pixel-data-js 0.36.0 → 0.38.0

package/src/Paint/Render/ColorPaintBufferCanvasRenderer.ts

@@ -1,47 +1,47 @@
-import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
-import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
-import { CANVAS_CTX_FAILED } from '../../Internal/_errors'
+import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
+import { makeReusableOffscreenCanvas } from '../../Canvas/ReusableCanvas'
 import type { ColorPaintBuffer } from '../ColorPaintBuffer'
 
 export type ColorPaintBufferCanvasRenderer = ReturnType<typeof makeColorPaintBufferCanvasRenderer>
 
-export function makeColorPaintBufferCanvasRenderer(
+export function makeColorPaintBufferCanvasRenderer<T extends HTMLCanvasElement | OffscreenCanvas>(
   paintBuffer: ColorPaintBuffer,
-  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+  reusableCanvasFactory?: () => ReusableCanvasFactory<T>,
 ) {
-  const config = paintBuffer.config
-  const tileSize = config.tileSize
-  const tileShift = config.tileShift
-  const lookup = paintBuffer.lookup
+  const factory = (reusableCanvasFactory ?? makeReusableOffscreenCanvas) as unknown as () => ReusableCanvasFactory<T>
+  const getBuffer = factory()
 
-  const canvas = canvasFactory(tileSize, tileSize)
-  const ctx = canvas.getContext('2d')
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED)
-  ctx.imageSmoothingEnabled = false
-
-  return function drawPaintBuffer(
+  function draw(
     targetCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
     alpha = 255,
     compOperation: GlobalCompositeOperation = 'source-over',
   ): void {
+    const buff = getBuffer(paintBuffer.config.tileSize, paintBuffer.config.tileSize)
+    const lookup = paintBuffer.lookup
+    const length = lookup.length
+    const ctx = buff.ctx
+    const canvas = buff.canvas
 
     targetCtx.globalAlpha = alpha / 255
     targetCtx.globalCompositeOperation = compOperation
 
-    for (let i = 0; i < lookup.length; i++) {
+    for (let i = 0; i < length; i++) {
       const tile = lookup[i]
 
       if (tile) {
-        const dx = tile.tx << tileShift
-        const dy = tile.ty << tileShift
-
         ctx.putImageData(tile.imageData, 0, 0)
-
-        targetCtx.drawImage(canvas, dx, dy)
+        targetCtx.drawImage(canvas, tile.x, tile.y)
       }
     }
 
     targetCtx.globalAlpha = 1
     targetCtx.globalCompositeOperation = 'source-over'
   }
+
+  return {
+    draw,
+    setBuffer(value: ColorPaintBuffer) {
+      paintBuffer = value
+    },
+  }
 }

package/src/Paint/Render/PaintCursorRenderer.ts

@@ -1,7 +1,8 @@
-import { type Color32 } from '../../_types'
 import type { ReusableCanvasFactory } from '../../Canvas/_canvas-types'
 import { makeReusableOffscreenCanvas } from '../../Canvas/ReusableCanvas'
-import { packColor } from '../../color'
+import type { Color32 } from '../../Color/_color-types'
+
+import { packColor } from '../../Color/pack-color'
 import { _macro_paintRectCenterOffset } from '../../Internal/macros'
 import { type BinaryMask, MaskType } from '../../Mask/_mask-types'
 import { makeBinaryMaskFromAlphaMask } from '../../Mask/BinaryMask/makeBinaryMaskFromAlphaMask'

package/src/Paint/eachTileInBounds.ts

@@ -1,32 +1,31 @@
-import type { PixelEngineConfig } from '../History/PixelEngineConfig'
 import type { Rect } from '../Rect/_rect-types'
-import type { Tile } from '../Tile/_tile-types'
+import type { Tile, TileTargetMeta } from '../Tile/_tile-types'
 import type { TilePool } from '../Tile/TilePool'
 
 export function eachTileInBounds<T extends Tile>(
-  config: PixelEngineConfig,
+  config: TileTargetMeta,
   lookup: (T | undefined)[],
   tilePool: TilePool<T>,
   bounds: Rect,
   callback: (tile: T, bX: number, bY: number, bW: number, bH: number) => void,
 ): void {
-  const { tileShift, targetColumns, targetRows, tileSize } = config
+  const { targetRows, targetColumns, tileSize } = config
 
-  const x1 = Math.max(0, bounds.x >> tileShift)
-  const y1 = Math.max(0, bounds.y >> tileShift)
-  const x2 = Math.min(targetColumns - 1, (bounds.x + bounds.w - 1) >> tileShift)
-  const y2 = Math.min(targetRows - 1, (bounds.y + bounds.h - 1) >> tileShift)
+  const x1 = Math.max(0, Math.floor(bounds.x / tileSize))
+  const y1 = Math.max(0, Math.floor(bounds.y / tileSize))
+  const x2 = Math.min(targetColumns - 1, Math.floor((bounds.x + bounds.w - 1) / tileSize))
+  const y2 = Math.min(targetRows - 1, Math.floor((bounds.y + bounds.h - 1) / tileSize))
 
   if (x1 > x2 || y1 > y2) return
 
   for (let ty = y1; ty <= y2; ty++) {
     const rowOffset = ty * targetColumns
-    const tileTop = ty << tileShift
+    const tileTop = ty * tileSize
 
     for (let tx = x1; tx <= x2; tx++) {
       const id = rowOffset + tx
       const tile = lookup[id] ?? (lookup[id] = tilePool.getTile(id, tx, ty))
-      const tileLeft = tx << tileShift
+      const tileLeft = tx * tileSize
 
       const startX = bounds.x > tileLeft ? bounds.x : tileLeft
       const startY = bounds.y > tileTop ? bounds.y : tileTop

package/src/PixelData/blendColorPixelData.ts

@@ -1,5 +1,6 @@
-import { type Color32, type ColorBlendOptions } from '../_types'
+import { type ColorBlendOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { PixelData32 } from './_pixelData-types'
 
 /**

package/src/PixelData/blendColorPixelDataAlphaMask.ts

@@ -1,5 +1,6 @@
-import type { Color32, ColorBlendMaskOptions } from '../_types'
+import type { ColorBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { AlphaMask } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/blendColorPixelDataBinaryMask.ts

@@ -1,5 +1,6 @@
-import type { Color32, ColorBlendMaskOptions } from '../_types'
+import type { ColorBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { BinaryMask } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/blendColorPixelDataMask.ts

@@ -1,4 +1,5 @@
-import { type Color32, type ColorBlendMaskOptions } from '../_types'
+import { type ColorBlendMaskOptions } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import { type Mask, MaskType } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 import { blendColorPixelDataAlphaMask } from './blendColorPixelDataAlphaMask'

package/src/PixelData/blendColorPixelDataPaintAlphaMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { PaintAlphaMask } from '../Paint/_paint-types'
 import type { PixelData32 } from './_pixelData-types'
 import { blendColorPixelDataAlphaMask } from './blendColorPixelDataAlphaMask'

package/src/PixelData/blendColorPixelDataPaintBinaryMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { PaintBinaryMask } from '../Paint/_paint-types'
 import type { PixelData32 } from './_pixelData-types'
 import { blendColorPixelDataBinaryMask } from './blendColorPixelDataBinaryMask'

package/src/PixelData/blendColorPixelDataPaintMask.ts

@@ -1,8 +1,9 @@
-import { type Color32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import { MaskType } from '../Mask/_mask-types'
-import type { PaintMask } from '../Paint/_paint-types'
+import type { PaintMask, PaintRect } from '../Paint/_paint-types'
 import type { PixelData32 } from './_pixelData-types'
+import { blendColorPixelData } from './blendColorPixelData'
 import { blendColorPixelDataAlphaMask } from './blendColorPixelDataAlphaMask'
 import { blendColorPixelDataBinaryMask } from './blendColorPixelDataBinaryMask'
 
@@ -11,12 +12,14 @@ const SCRATCH_OPTS = {
   y: 0,
   alpha: 255,
   blendFn: sourceOverPerfect,
+  w: undefined as number | undefined,
+  h: undefined as number | undefined,
 }
 
 export function blendColorPixelDataPaintMask(
-  dst: PixelData32,
+  target: PixelData32,
   color: Color32,
-  mask: PaintMask,
+  mask: PaintMask | PaintRect,
   x: number,
   y: number,
   alpha = 255,
@@ -29,10 +32,18 @@ export function blendColorPixelDataPaintMask(
   SCRATCH_OPTS.y = ty
   SCRATCH_OPTS.alpha = alpha
   SCRATCH_OPTS.blendFn = blendFn
+  SCRATCH_OPTS.w = undefined
+  SCRATCH_OPTS.h = undefined
 
-  if (mask.type === MaskType.BINARY) {
-    return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS)
-  } else {
-    return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS)
+  if (mask.data) {
+    if (mask.type === MaskType.BINARY) {
+      return blendColorPixelDataBinaryMask(target, color, mask, SCRATCH_OPTS)
+    } else {
+      return blendColorPixelDataAlphaMask(target, color, mask, SCRATCH_OPTS)
+    }
   }
+  SCRATCH_OPTS.w = mask.w
+  SCRATCH_OPTS.h = mask.h
+
+  return blendColorPixelData(target, color, SCRATCH_OPTS)
 }

package/src/PixelData/blendPixel.ts

@@ -1,5 +1,6 @@
-import type { BlendColor32, Color32 } from '../_types'
+import type { BlendColor32 } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { PixelData32 } from './_pixelData-types'
 
 export function blendPixel(

package/src/PixelData/blendPixelData.ts

@@ -1,5 +1,6 @@
-import { type Color32, type PixelBlendOptions } from '../_types'
+import { type PixelBlendOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { PixelData32 } from './_pixelData-types'
 
 /**

package/src/PixelData/blendPixelDataAlphaMask.ts

@@ -1,5 +1,6 @@
-import { type Color32, type PixelBlendMaskOptions } from '../_types'
+import { type PixelBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { AlphaMask } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/blendPixelDataBinaryMask.ts

@@ -1,5 +1,6 @@
-import type { Color32, PixelBlendMaskOptions } from '../_types'
+import type { PixelBlendMaskOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../Color/_color-types'
 import type { BinaryMask } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/blendPixelDataPaintBuffer.ts

@@ -17,14 +17,13 @@ export function blendPixelDataPaintBuffer(
   blendFn?: BlendColor32,
   blendPixelDataFn = blendPixelData,
 ): void {
-  const tileShift = paintBuffer.config.tileShift
   const lookup = paintBuffer.lookup
   for (let i = 0; i < lookup.length; i++) {
     const tile = lookup[i]
 
     if (tile) {
-      const x = tile.tx << tileShift
-      const y = tile.ty << tileShift
+      const x = tile.x
+      const y = tile.y
 
       SCRATCH_OPTS.x = x
       SCRATCH_OPTS.y = y

package/src/PixelData/clearPixelDataFast.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import type { BinaryMaskRect } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 import { fillPixelDataFast } from './fillPixelDataFast'

package/src/PixelData/fillPixelData.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import type { Rect } from '../Rect/_rect-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/fillPixelDataBinaryMask.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import type { BinaryMask } from '../Mask/_mask-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/fillPixelDataFast.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import type { Rect } from '../Rect/_rect-types'
 import type { PixelData32 } from './_pixelData-types'
 

package/src/PixelData/writePaintBufferToPixelData.ts

@@ -10,17 +10,13 @@ export function writePaintBufferToPixelData(
   paintBuffer: ColorPaintBuffer,
   writePixelDataBufferFn = writePixelDataBuffer,
 ) {
-  const tileShift = paintBuffer.config.tileShift
   const lookup = paintBuffer.lookup
 
   for (let i = 0; i < lookup.length; i++) {
     const tile = lookup[i]
 
     if (tile) {
-      const dx = tile.tx << tileShift
-      const dy = tile.ty << tileShift
-
-      writePixelDataBufferFn(target, tile.data, dx, dy, tile.w, tile.h)
+      writePixelDataBufferFn(target, tile.data, tile.x, tile.y, tile.w, tile.h)
     }
   }
 }

package/src/Tile/MaskTile.ts

@@ -14,6 +14,8 @@ export const makeAlphaMaskTile: TileFactory<AlphaMaskTile> = (
     data: new Uint8Array(tileArea),
     w: tileSize,
     h: tileSize,
+    x: tx * tileSize,
+    y: ty * tileSize,
     id,
     tx,
     ty,
@@ -33,6 +35,8 @@ export const makeBinaryMaskTile: TileFactory<BinaryMaskTile> = (
     data: new Uint8Array(tileArea),
     w: tileSize,
     h: tileSize,
+    x: tx * tileSize,
+    y: ty * tileSize,
     id,
     tx,
     ty,

package/src/Tile/PixelTile.ts

@@ -15,6 +15,8 @@ export function makePixelTile(
     id,
     tx,
     ty,
+    x: tx * tileSize,
+    y: ty * tileSize,
     w: tileSize,
     h: tileSize,
     data: data32,

package/src/Tile/TilePool.ts

@@ -1,19 +1,17 @@
-import type { PixelEngineConfig } from '../History/PixelEngineConfig'
 import type { Tile, TileFactory } from './_tile-types'
 
 export class TilePool<T extends Tile> {
   public pool: T[]
 
-  private tileSize: number
-  private tileArea: number
+  protected tileArea: number
 
   constructor(
-    config: PixelEngineConfig,
-    private tileFactory: TileFactory<T>,
+    protected tileSize: number,
+    protected tileFactory: TileFactory<T>,
   ) {
     this.pool = []
-    this.tileSize = config.tileSize
-    this.tileArea = config.tileArea
+    this.tileSize = tileSize
+    this.tileArea = tileSize * tileSize
   }
 
   getTile(
@@ -22,11 +20,14 @@ export class TilePool<T extends Tile> {
     ty: number,
   ): T {
     let tile = this.pool.pop()
+    const tileSize = this.tileSize
 
     if (tile) {
       tile.id = id
       tile.tx = tx
       tile.ty = ty
+      tile.x = tx * tileSize
+      tile.y = ty * tileSize
 
       // Wipe dirty memory from previous uses before handing it out
       tile.data.fill(0)
@@ -38,7 +39,7 @@ export class TilePool<T extends Tile> {
       id,
       tx,
       ty,
-      this.tileSize,
+      tileSize,
       this.tileArea,
     )
   }

package/src/Tile/TileTargetConfig.ts

@@ -0,0 +1,27 @@
+import type { PixelData } from '../PixelData/_pixelData-types'
+import type { TileTargetConfig, TileTargetMeta } from './_tile-types'
+
+export function makeTileTargetConfig(
+  tileSize: number,
+  target: PixelData,
+): TileTargetConfig {
+  return {
+    target,
+    ...makeTileTargetMeta(tileSize, target),
+  }
+}
+
+export function makeTileTargetMeta(
+  tileSize: number,
+  target: { w: number, h: number },
+): TileTargetMeta {
+  return {
+    targetWidth: target.w,
+    targetHeight: target.h,
+    tileSize: tileSize,
+    invTileSize: 1 / tileSize,
+    tileArea: tileSize * tileSize,
+    targetColumns: Math.ceil(target.w / tileSize),
+    targetRows: Math.ceil(target.h / tileSize),
+  }
+}

package/src/Tile/_tile-types.ts

@@ -11,6 +11,8 @@ interface BaseTile {
   id: number
   tx: number
   ty: number
+  x: number
+  y: number
 }
 
 export interface PixelTile extends PixelData, BaseTile {
@@ -31,3 +33,17 @@ export type TileFactory<T extends Tile> = (
   tileSize: number,
   tileArea: number,
 ) => T
+
+export interface TileTargetMeta {
+  readonly tileArea: number
+  readonly targetColumns: number
+  readonly targetRows: number
+  readonly targetWidth: number
+  readonly targetHeight: number
+  readonly tileSize: number
+  readonly invTileSize: number
+}
+
+export interface TileTargetConfig extends TileTargetMeta {
+  readonly target: PixelData
+}

package/src/_types.ts

@@ -1,11 +1,6 @@
+import type { Color32 } from './Color/_color-types'
 import type { BinaryMask } from './Mask/_mask-types'
 
-/** ALL values are 0-255 (including alpha which in CSS is 0-1) */
-export type RGBA = { r: number, g: number, b: number, a: number }
-
-/** Represents a 32-bit color in 0xAABBGGRR (Little endian) */
-export type Color32 = number & { readonly __brandColor32: unique symbol }
-
 /**
  * A function that defines how to combine a source color with a destination color.
  * @param src - The incoming color (source).

package/src/index.ts

@@ -1,4 +1,4 @@
-// generated by `npm run re-index` 
+// generated by `npm run re-index`
 
 export * from './_errors'
 export * from './_types'
@@ -24,7 +24,10 @@ export * from './Clipboard/getImageDataFromClipboard'
 export * from './Clipboard/writeImageDataToClipboard'
 export * from './Clipboard/writeImgBlobToClipboard'
 
-export * from './color'
+export * from './Color/_color-types'
+export * from './Color/lerpColor32'
+export * from './Color/convert-color'
+export * from './Color/pack-color'
 
 export * from './Control/BatchedQueue'
 export * from './Control/RenderQueue'
@@ -32,7 +35,6 @@ export * from './Control/RenderQueue'
 export * from './History/HistoryAction'
 export * from './History/HistoryManager'
 export * from './History/PixelAccumulator'
-export * from './History/PixelEngineConfig'
 export * from './History/PixelMutator'
 
 export * from './History/PixelMutator/mutatorApplyAlphaMask'
@@ -181,3 +183,5 @@ export * from './Tile/_tile-types'
 export * from './Tile/MaskTile'
 export * from './Tile/PixelTile'
 export * from './Tile/TilePool'
+export * from './Tile/TileTargetConfig'
+export { colorDistance } from './Color/colorDistance'

package/src/History/PixelEngineConfig.ts

@@ -1,28 +0,0 @@
-import type { PixelData } from '../PixelData/_pixelData-types'
-
-export class PixelEngineConfig {
-  readonly tileSize: number
-  // pixelX = tileX << tileShift
-  // pixelY = tileY << tileShift
-  readonly tileShift: number
-  readonly tileMask: number
-  readonly tileArea: number
-  readonly target!: PixelData
-  readonly targetColumns: number = 0
-  readonly targetRows: number = 0
-
-  constructor(tileSize: number, target: PixelData) {
-    // Ensure it's a power of 2 to guarantee bitwise math works
-    if ((tileSize & (tileSize - 1)) !== 0) {
-      throw new Error('tileSize must be a power of 2')
-    }
-
-    this.tileSize = tileSize
-    this.tileShift = 31 - Math.clz32(tileSize)
-    this.tileMask = tileSize - 1
-    this.tileArea = tileSize * tileSize
-    this.target = target
-    this.targetColumns = (target.w + this.tileMask) >> this.tileShift
-    this.targetRows = (target.h + this.tileMask) >> this.tileShift
-  }
-}

package/src/Internal/_constants.ts

@@ -1,3 +0,0 @@
-import type { CanvasObjectFactory } from '../Canvas/_canvas-types'
-
-export const DEFAULT_CANVAS_FACTORY: CanvasObjectFactory<any> = (w, h) => new OffscreenCanvas(w, h)

package/src/color.ts

@@ -1,112 +0,0 @@
-import type { Color32, RGBA } from './_types'
-
-/**
- * Packs RGBA into a 32-bit integer compatible with
- * Little-Endian Uint32Array views on ImageData.
- */
-export function packColor(r: number, g: number, b: number, a: number): Color32 {
-  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
-}
-
-export function packRGBA({ r, g, b, a }: RGBA): Color32 {
-  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
-}
-
-export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
-export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
-export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
-export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
-
-export function unpackColor(packed: Color32): RGBA {
-  return {
-    r: (packed >>> 0) & 0xFF,
-    g: (packed >>> 8) & 0xFF,
-    b: (packed >>> 16) & 0xFF,
-    a: (packed >>> 24) & 0xFF,
-  }
-}
-
-const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
-
-// uses a scratch arg for memory perf. be careful about re-use.
-export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
-  scratch.r = (packed >>> 0) & 0xFF
-  scratch.g = (packed >>> 8) & 0xFF
-  scratch.b = (packed >>> 16) & 0xFF
-  scratch.a = (packed >>> 24) & 0xFF
-  return scratch
-}
-
-export function colorDistance(a: Color32, b: Color32): number {
-  const dr = (a & 0xFF) - (b & 0xFF)
-  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
-  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
-  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
-  return dr * dr + dg * dg + db * db + da * da
-}
-
-/**
- * Linearly interpolates between two 32-bit colors using a floating-point weight.
- * * This is the preferred method for UI animations or scenarios where high
- * precision is required. It uses the standard `a + t * (b - a)` formula
- * for each channel.
- * @param a - The starting color as a 32-bit integer (AABBGGRR).
- * @param b - The target color as a 32-bit integer (AABBGGRR).
- * @param t - The interpolation factor between 0.0 and 1.0.
- * @returns The interpolated 32-bit color.
- */
-export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
-  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
-  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
-  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
-  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
-
-  return ((a_ << 24) | (b_ << 16) | (g << 8) | r) >>> 0 as Color32
-}
-
-/**
- * Linearly interpolates between two 32-bit colors using integer fixed-point math.
- * Highly optimized for image processing and real-time blitting. It processes
- * channels in parallel using bitmasks (RB and GA pairs).
- * **Note:** Subject to a 1-bit drift (rounding down) due to fast bit-shift division.
- * @param src - The source (foreground) color as a 32-bit integer.
- * @param dst - The destination (background) color as a 32-bit integer.
- * @param w - The blend weight as a byte value from 0 to 255. Where 0 is 100% dst and 255 is 100% src
- * @returns The blended 32-bit color.
- */export function lerpColor32Fast(src: Color32, dst: Color32, w: number): Color32 {
-  const invA = 255 - w
-
-  // Masking Red and Blue: 0x00FF00FF
-  // We process R and B in one go, then shift back down
-  const rb = (((src & 0x00FF00FF) * w + (dst & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
-
-  // Masking Green and Alpha: 0xFF00FF00
-  // We shift down first to avoid overflow, then shift back up
-  const ga = ((((src >>> 8) & 0x00FF00FF) * w + ((dst >>> 8) & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
-
-  return (rb | (ga << 8)) >>> 0 as Color32
-}
-
-// Convert 0xAABBGGRR to #RRGGBBAA
-export function color32ToHex(color: Color32): string {
-  const r = (color & 0xFF).toString(16).padStart(2, '0')
-  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
-  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
-  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
-  return `#${r}${g}${b}${a}`
-}
-
-/**
- * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
- * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
- */
-export function color32ToCssRGBA(color: Color32): string {
-  const r = color & 0xFF
-  const g = (color >>> 8) & 0xFF
-  const b = (color >>> 16) & 0xFF
-  const a = (color >>> 24) & 0xFF
-
-  const alpha = Number((a / 255).toFixed(3))
-
-  return `rgba(${r},${g},${b},${alpha})`
-}