fix: renderer

packages/pixel-profile/src/renderer/texture-filter/linear.ts

@@ -14,10 +14,12 @@ export function genBiLinearFilter(pixels: Buffer, width: number, height: number)
   function biLinearFilter(coords: PixelCoords): RGBA {
     const x = coords[0]
     const y = coords[1]
-    const x0 = clamp(Math.floor(x), 0, maxX)
-    const x1 = clamp(x0 + 1, 0, maxX)
-    const y0 = clamp(Math.floor(y), 0, maxY)
-    const y1 = clamp(y0 + 1, 0, maxY)
+    const flooredX = Math.floor(x)
+    const flooredY = Math.floor(y)
+    const x0 = clamp(flooredX, 0, maxX)
+    const x1 = clamp(flooredX + 1, 0, maxX)
+    const y0 = clamp(flooredY, 0, maxY)
+    const y1 = clamp(flooredY + 1, 0, maxY)
 
     const sx = x - x0
     const sy = y - y0

packages/pixel-profile/src/utils/math.ts

@@ -3,8 +3,8 @@ import { RGBA } from '../renderer'
 export type Vec2 = [number, number]
 export type Vec3 = [number, number, number]
 
-export function clamp(x: number, min: number, max: number): number {
-  return Math.min(max, Math.max(min, x))
+export function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n))
 }
 
 export function kFormatter(num: number): string {

packages/pixel-profile/test/renderer.test.ts

@@ -1,4 +1,5 @@
 import { render } from '../src/renderer'
+import { genBiLinearFilter } from '../src/renderer/texture-filter/linear'
 import { compare } from '../src/utils'
 import { getPixelsFromPngBuffer, getPngBufferFromBase64 } from '../src/utils/converter'
 import { LUCI_AVATAR } from './utils/avatar/luci'
@@ -15,3 +16,62 @@ describe('Renderer', () => {
     expect(compare(source, target)).toBeTruthy()
   })
 })
+
+describe('genBiLinearFilter', () => {
+  const width = 4
+  const height = 4
+  /* eslint-disable prettier/prettier */
+  const pixels = Buffer.from([
+    255, 0, 0, 255,    0, 255, 0, 255,    0, 0, 255, 255,    255, 255, 0, 255,
+    0, 255, 255, 255,  255, 0, 255, 255,  255, 255, 255, 255, 0, 0, 0, 255,
+    255, 0, 0, 255,    0, 255, 0, 255,    0, 0, 255, 255,    255, 255, 0, 255,
+    0, 255, 255, 255,  255, 0, 255, 255,  255, 255, 255, 255, 0, 0, 0, 255
+  ])
+  /* eslint-enable prettier/prettier */
+
+  const biLinearFilter = genBiLinearFilter(pixels, width, height)
+
+  it('should return the correct pixel value at integer coordinates', () => {
+    expect(biLinearFilter([0, 0])).toEqual([255, 0, 0, 255])
+    expect(biLinearFilter([1, 0])).toEqual([0, 255, 0, 255])
+    expect(biLinearFilter([0, 1])).toEqual([0, 255, 255, 255])
+    expect(biLinearFilter([3, 3])).toEqual([0, 0, 0, 255])
+  })
+
+  it('should correctly interpolate at non-integer coordinates', () => {
+    const result = biLinearFilter([0.5, 0.5])
+    expect(result[0]).toBeCloseTo(127.5)
+    expect(result[1]).toBeCloseTo(127.5)
+    expect(result[2]).toBeCloseTo(127.5)
+    expect(result[3]).toBe(255)
+  })
+
+  it('should correctly handle image edges', () => {
+    const result = biLinearFilter([3.9, 3.9])
+    expect(result).toEqual([0, 0, 0, 255])
+  })
+
+  it('should correctly handle out of range coordinates', () => {
+    const result1 = biLinearFilter([-1, -1])
+    expect(result1).toEqual([255, 0, 0, 255])
+
+    const result2 = biLinearFilter([5, 5])
+    expect(result2).toEqual([0, 0, 0, 255])
+  })
+
+  it('should correctly interpolate in the x direction', () => {
+    const result = biLinearFilter([0.5, 0])
+    expect(result[0]).toBeCloseTo(127.5)
+    expect(result[1]).toBeCloseTo(127.5)
+    expect(result[2]).toBeCloseTo(0)
+    expect(result[3]).toBe(255)
+  })
+
+  it('should correctly interpolate in the y direction', () => {
+    const result = biLinearFilter([0, 0.5])
+    expect(result[0]).toBeCloseTo(127.5)
+    expect(result[1]).toBeCloseTo(127.5)
+    expect(result[2]).toBeCloseTo(127.5)
+    expect(result[3]).toBe(255)
+  })
+})