pixel-data-js 0.27.0 → 0.28.0

package/src/Paint/PaintCursorRenderer.ts

@@ -0,0 +1,117 @@
+import { type Color32 } from '../_types'
+import type { CanvasContext, CanvasObjectFactory } from '../Canvas/_canvas-types'
+import { packColor } from '../color'
+import { CANVAS_CTX_FAILED } from '../Internal/_errors'
+import { _macro_paintRectCenterOffset } from '../Internal/macros'
+import { type BinaryMask, MaskType } from '../Mask/_mask-types'
+import { makeBinaryMaskFromAlphaMask } from '../Mask/BinaryMask/makeBinaryMaskFromAlphaMask'
+import { makeBinaryMaskOutline } from '../Mask/BinaryMask/makeBinaryMaskOutline'
+import { makeCircleBinaryMaskOutline } from '../Mask/BinaryMask/makeCircleBinaryMaskOutline'
+import { makeRectBinaryMaskOutline } from '../Mask/BinaryMask/makeRectBinaryMaskOutline'
+import { fillPixelDataBinaryMask } from '../PixelData/fillPixelDataBinaryMask'
+import { makeReusablePixelData } from '../PixelData/ReusablePixelData'
+import type { Rect } from '../Rect/_rect-types'
+import { type PaintMask, PaintMaskOutline } from './_paint-types'
+
+export type PaintCursorRenderer = ReturnType<typeof makePaintCursorRenderer>
+
+export function makePaintCursorRenderer<T extends HTMLCanvasElement | OffscreenCanvas>(
+  factory: CanvasObjectFactory<T> = (w, h) => new OffscreenCanvas(w, h) as T,
+) {
+  const canvas = factory(1, 1)
+  const ctx = canvas.getContext('2d')! as CanvasContext<T>
+  if (!ctx) throw new Error(CANVAS_CTX_FAILED)
+  ctx.imageSmoothingEnabled = false
+
+  const getPixelData = makeReusablePixelData()
+
+  let _color = packColor(0, 255, 255, 255)
+  let _scale = 1
+
+  let currentMask: PaintMask = {
+    type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.RECT,
+    w: 1,
+    h: 1,
+    centerOffsetX: _macro_paintRectCenterOffset(10),
+    centerOffsetY: _macro_paintRectCenterOffset(10),
+  } as PaintMask
+
+  let outline: BinaryMask
+
+  function update(paintMask?: PaintMask, scale?: number, color?: Color32, alphaThreshold = 127) {
+    currentMask = paintMask ?? currentMask
+
+    _scale = scale ?? _scale
+    _color = color ?? _color
+
+    canvas.width = currentMask.w * _scale + 2 * _scale
+    canvas.height = currentMask.h * _scale + 2 * _scale
+
+    if (currentMask.type === MaskType.BINARY) {
+      if (currentMask.outlineType === PaintMaskOutline.CIRCLE) {
+        outline = makeCircleBinaryMaskOutline(currentMask.w, _scale)
+      } else if (currentMask.outlineType === PaintMaskOutline.RECT) {
+        outline = makeRectBinaryMaskOutline(currentMask.w, currentMask.h, _scale)
+      } else if (currentMask.outlineType === PaintMaskOutline.MASKED) {
+        outline = makeBinaryMaskOutline(currentMask, _scale)
+      }
+    } else if (currentMask.type === MaskType.ALPHA) {
+      const mask = makeBinaryMaskFromAlphaMask(currentMask, alphaThreshold)
+      outline = makeBinaryMaskOutline(mask, _scale)
+    }
+
+    const pixelData = getPixelData(outline.w, outline.h)
+    fillPixelDataBinaryMask(pixelData, _color, outline)
+    ctx.putImageData(pixelData.imageData, 0, 0)
+  }
+
+  const boundsScratch = { x: 0, y: 0, w: 0, h: 0 }
+
+  function getBounds(centerX: number, centerY: number): Rect {
+    boundsScratch.x = centerX + currentMask.centerOffsetX
+    boundsScratch.y = centerY + currentMask.centerOffsetY
+    boundsScratch.w = currentMask.w
+    boundsScratch.h = currentMask.h
+
+    return boundsScratch
+  }
+
+  const boundsScaledScratch = { x: 0, y: 0, w: 0, h: 0 }
+
+  function getOutlineBoundsScaled(centerX: number, centerY: number): Rect {
+    boundsScaledScratch.x = centerX * _scale + currentMask.centerOffsetX * _scale - 1
+    boundsScaledScratch.y = centerY * _scale + currentMask.centerOffsetY * _scale - 1
+    boundsScaledScratch.w = currentMask.w * _scale
+    boundsScaledScratch.h = currentMask.h * _scale
+
+    return boundsScaledScratch
+  }
+
+  function draw(
+    drawCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    centerX: number,
+    centerY: number,
+  ) {
+    const dx = centerX * _scale + currentMask.centerOffsetX * _scale - 1
+    const dy = centerY * _scale + currentMask.centerOffsetY * _scale - 1
+
+    drawCtx.drawImage(canvas, Math.floor(dx), Math.floor(dy))
+  }
+
+  function getSettings() {
+    return {
+      color: _color,
+      scale: _scale,
+      currentMask,
+    }
+  }
+
+  return {
+    update,
+    getBounds,
+    getBoundsScaled: getOutlineBoundsScaled,
+    draw,
+    getSettings,
+  }
+}

package/src/Paint/_paint-types.ts

@@ -0,0 +1,22 @@
+import type { AlphaMask, BinaryMask } from '../Mask/_mask-types'
+
+export enum PaintMaskOutline {
+  MASKED,
+  CIRCLE,
+  RECT,
+}
+
+interface BasePaintMask<T extends PaintMaskOutline = PaintMaskOutline> {
+  readonly outlineType: T
+  readonly centerOffsetX: number
+  readonly centerOffsetY: number
+}
+
+export interface PaintAlphaMask<T extends PaintMaskOutline = PaintMaskOutline> extends BasePaintMask<T>, AlphaMask {
+}
+
+export interface PaintBinaryMask<T extends PaintMaskOutline = PaintMaskOutline> extends BasePaintMask<T>, BinaryMask {
+}
+
+export type PaintMask = PaintAlphaMask<any> | PaintBinaryMask<any>
+

package/src/Paint/eachTileInBounds.ts

@@ -0,0 +1,45 @@
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import type { Rect } from '../Rect/_rect-types'
+import type { Tile } from '../Tile/_tile-types'
+import type { TilePool } from '../Tile/TilePool'
+
+export function eachTileInBounds<T extends Tile>(
+  config: PixelEngineConfig,
+  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 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)
+
+  if (x1 > x2 || y1 > y2) return
+
+  for (let ty = y1; ty <= y2; ty++) {
+    const rowOffset = ty * targetColumns
+    const tileTop = ty << tileShift
+
+    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 startX = bounds.x > tileLeft ? bounds.x : tileLeft
+      const startY = bounds.y > tileTop ? bounds.y : tileTop
+
+      const maskEndX = bounds.x + bounds.w
+      const tileEndX = tileLeft + tileSize
+      const endX = maskEndX < tileEndX ? maskEndX : tileEndX
+
+      const maskEndY = bounds.y + bounds.h
+      const tileEndY = tileTop + tileSize
+      const endY = maskEndY < tileEndY ? maskEndY : tileEndY
+
+      callback(tile, startX, startY, endX - startX, endY - startY)
+    }
+  }
+}

package/src/Paint/makeCirclePaintMask.ts

@@ -0,0 +1,74 @@
+import { _macro_paintCircleCenterOffset } from '../Internal/macros'
+import { MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, type PaintBinaryMask, PaintMaskOutline } from './_paint-types'
+
+export function makeCirclePaintAlphaMask(size: number, fallOff: (d: number) => number = (d) => d): PaintAlphaMask {
+  const area = size * size
+  const data = new Uint8Array(area)
+  const radius = size / 2
+  const invR = 1 / radius
+
+  const centerOffset = _macro_paintCircleCenterOffset(radius)
+
+  for (let y = 0; y < size; y++) {
+    const rowOffset = y * size
+    const dy = y - radius + 0.5
+    const dy2 = dy * dy
+
+    for (let x = 0; x < size; x++) {
+      const dx = x - radius + 0.5
+      const distSqr = dx * dx + dy2
+
+      if (distSqr <= (radius * radius)) {
+        const dist = Math.sqrt(distSqr) * invR
+
+        // Pass 1.0 at center, 0.0 at edge
+        const strength = fallOff(1 - dist)
+        if (strength > 0) {
+          const intensity = (strength * 255) | 0
+          data[rowOffset + x] = Math.max(0, Math.min(255, intensity))
+        }
+      }
+    }
+  }
+
+  return {
+    type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.CIRCLE,
+    data,
+    w: size,
+    h: size,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
+  }
+}
+
+export function makeCirclePaintBinaryMask(size: number): PaintBinaryMask {
+  const area = size * size
+  const data = new Uint8Array(area)
+  const radius = size / 2
+  const r2 = radius * radius
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const dx = x - radius + 0.5
+      const dy = y - radius + 0.5
+      const distSqr = dx * dx + dy * dy
+      if (distSqr <= r2) {
+        data[y * size + x] = 1
+      }
+    }
+  }
+
+  const centerOffset = _macro_paintCircleCenterOffset(radius)
+
+  return {
+    type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.CIRCLE,
+    w: size,
+    h: size,
+    data,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
+  }
+}

package/src/Paint/makePaintMask.ts

@@ -1,11 +1,13 @@
-import { type AlphaMask, type BinaryMask, MaskType, type PaintAlphaMask, type PaintBinaryMask } from '../_types'
-import { _macro_halfAndFloor } from '../Internal/helpers'
+import { _macro_halfAndFloor } from '../Internal/macros'
+import { type AlphaMask, type BinaryMask, MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, type PaintBinaryMask, PaintMaskOutline } from './_paint-types'
 
 export function makePaintBinaryMask(
   mask: BinaryMask,
 ): PaintBinaryMask {
   return {
     type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.MASKED,
     data: mask.data,
     w: mask.w,
     h: mask.h,
@@ -19,6 +21,7 @@ export function makePaintAlphaMask(
 ): PaintAlphaMask {
   return {
     type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.MASKED,
     data: mask.data,
     w: mask.w,
     h: mask.h,

package/src/Paint/makeRectFalloffPaintAlphaMask.ts

@@ -1,5 +1,6 @@
-import { MaskType, type PaintAlphaMask } from '../_types'
-import { _macro_halfAndFloor } from '../Internal/helpers'
+import { _macro_halfAndFloor } from '../Internal/macros'
+import { MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, PaintMaskOutline } from './_paint-types'
 
 export function makeRectFalloffPaintAlphaMask(
   width: number,
@@ -38,6 +39,7 @@ export function makeRectFalloffPaintAlphaMask(
 
   return {
     type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.RECT,
     data: data,
     w: width,
     h: height,

package/src/PixelData/PixelData.ts

@@ -1,23 +1,19 @@
-import type { ImageDataLike, IPixelData } from '../_types'
-import { imageDataToUInt32Array } from '../ImageData/imageDataToUInt32Array'
+import type { ImageDataLike } from '../ImageData/_ImageData-types'
+import { _macro_imageDataToUint32Array } from '../ImageData/imageDataToUint32Array'
+import type { PixelData } from './_pixelData-types'
 
-export class PixelData<T extends ImageDataLike = ImageData> implements IPixelData<T> {
-  readonly data32: Uint32Array
-  readonly imageData: T
-  readonly width: number
-  readonly height: number
-
-  constructor(imageData: T) {
-    this.data32 = imageDataToUInt32Array(imageData)
-    this.imageData = imageData
-    this.width = imageData.width
-    this.height = imageData.height
+export function makePixelData<T extends ImageDataLike = ImageData>(imageData: T): PixelData<T> {
+  return {
+    data: _macro_imageDataToUint32Array(imageData),
+    imageData,
+    w: imageData.width,
+    h: imageData.height,
   }
+}
 
-  set(imageData: T): void {
-    ;(this as any).imageData = imageData
-    ;(this as any).data32 = imageDataToUInt32Array(imageData)
-    ;(this as any).width = imageData.width
-    ;(this as any).height = imageData.height
-  }
+export function setPixelData(target: PixelData, imageData: ImageData) {
+  ;(target as any).data = _macro_imageDataToUint32Array(imageData)
+  ;(target as any).imageData = imageData
+  ;(target as any).w = imageData.width
+  ;(target as any).h = imageData.height
 }

package/src/PixelData/ReusablePixelData.ts

@@ -0,0 +1,36 @@
+import type { PixelData } from './_pixelData-types'
+import { setPixelData } from './PixelData'
+
+export type ReusablePixelData = ReturnType<typeof makeReusablePixelData>
+
+/**
+ * Creates a factory function that manages a single, reusable PixelData instance.
+ * This is used to minimize garbage collection overhead by recycling the
+ * underlying pixel buffer across multiple operations.
+ * @returns A function that takes width and height and returns a pooled PixelData instance.
+ */
+export function makeReusablePixelData() {
+  const pixelData = {
+    w: 0,
+    h: 0,
+    data: null as unknown as Uint32Array,
+    imageData: null as unknown as ImageData,
+  }
+
+  /**
+   * Retrieves a PixelData instance of the requested dimensions.
+   * If the requested dimensions differ from the cached instance, a new one is allocated.
+   * @param width - The desired width in pixels.
+   * @param height - The desired height in pixels.
+   * @returns The cached PixelData object.
+   */
+  return function getReusablePixelData(width: number, height: number): PixelData {
+    if (pixelData.w !== width || pixelData.h !== height) {
+      setPixelData(pixelData, new ImageData(width, height))
+    } else {
+      pixelData.data.fill(0)
+    }
+
+    return pixelData
+  }
+}

package/src/PixelData/_pixelData-types.ts

@@ -0,0 +1,17 @@
+import type { ImageDataLike } from '../ImageData/_ImageData-types'
+
+export interface PixelData32 {
+  readonly data: Uint32Array
+  readonly w: number
+  readonly h: number
+}
+
+export interface MutablePixelData32 {
+  data: Uint32Array
+  w: number
+  h: number
+}
+
+export interface PixelData<T extends ImageDataLike = ImageData> extends PixelData32 {
+  readonly imageData: T
+}

package/src/PixelData/applyAlphaMaskToPixelData.ts

@@ -1,4 +1,6 @@
-import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IPixelData32 } from '../_types'
+import { type ApplyMaskToPixelDataOptions } from '../_types'
+import type { AlphaMask } from '../Mask/_mask-types'
+import type { PixelData32 } from './_pixelData-types'
 
 /**
  * Directly applies a mask to a region of PixelData,
@@ -6,14 +8,14 @@ import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IP
  * @returns true if any pixels were actually modified.
  */
 export function applyAlphaMaskToPixelData(
-  target: IPixelData32,
+  target: PixelData32,
   mask: AlphaMask,
   opts?: ApplyMaskToPixelDataOptions,
 ): boolean {
   const targetX = opts?.x ?? 0
   const targetY = opts?.y ?? 0
-  const width = opts?.w ?? target.width
-  const height = opts?.h ?? target.height
+  const width = opts?.w ?? target.w
+  const height = opts?.h ?? target.h
   const globalAlpha = opts?.alpha ?? 255
   const mx = opts?.mx ?? 0
   const my = opts?.my ?? 0
@@ -37,8 +39,8 @@ export function applyAlphaMaskToPixelData(
     y = 0
   }
 
-  w = Math.min(w, target.width - x)
-  h = Math.min(h, target.height - y)
+  w = Math.min(w, target.w - x)
+  h = Math.min(h, target.h - y)
 
   if (w <= 0) return false
   if (h <= 0) return false
@@ -70,8 +72,8 @@ export function applyAlphaMaskToPixelData(
   const xShift = sX0 - startX
   const yShift = sY0 - startY
 
-  const dst32 = target.data32
-  const dw = target.width
+  const dst32 = target.data
+  const dw = target.w
   const dStride = dw - finalW
   const mStride = mPitch - finalW
   const maskData = mask.data
@@ -80,51 +82,86 @@ export function applyAlphaMaskToPixelData(
   let mIdx = sY0 * mPitch + sX0
 
   let didChange = false
-  for (let iy = 0; iy < h; iy++) {
-    for (let ix = 0; ix < w; ix++) {
-      const mVal = maskData[mIdx]
-      // Unified logic branch inside the hot path
-      const effectiveM = invertMask ? 255 - mVal : mVal
-
-      let weight = 0
-
-      if (effectiveM === 0) {
-        weight = 0
-      } else if (effectiveM === 255) {
-        weight = globalAlpha
-      } else if (globalAlpha === 255) {
-        weight = effectiveM
-      } else {
-        weight = (effectiveM * globalAlpha + 128) >> 8
-      }
-
-      if (weight === 0) {
-        // Clear alpha channel
-        dst32[dIdx] = (dst32[dIdx] & 0x00ffffff) >>> 0
-        didChange = true
-      } else if (weight !== 255) {
-        // Merge alpha channel
-        const d = dst32[dIdx]
-        const da = d >>> 24
+  if (invertMask) {
+    for (let iy = 0; iy < finalH; iy++) {
+      for (let ix = 0; ix < finalW; ix++) {
+        const effectiveM = 255 - maskData[mIdx]
 
-        if (da !== 0) {
-          const finalAlpha = da === 255 ? weight : (da * weight + 128) >> 8
+        if (effectiveM === 0) {
+          const current = dst32[dIdx]
+          const next = (current & 0x00ffffff) >>> 0
 
-          const current = dst32[dIdx] as Color32
-          const next = ((d & 0x00ffffff) | (finalAlpha << 24)) >>> 0
           if (current !== next) {
             dst32[dIdx] = next
             didChange = true
           }
+        } else {
+          const t1 = effectiveM * globalAlpha + 128
+          const weight = (t1 + (t1 >> 8)) >> 8
+
+          if (weight < 255) {
+            const current = dst32[dIdx]
+            const da = current >>> 24
+
+            if (da !== 0) {
+              const t2 = da * weight + 128
+              const finalAlpha = (t2 + (t2 >> 8)) >> 8
+              const next = ((current & 0x00ffffff) | (finalAlpha << 24)) >>> 0
+
+              if (current !== next) {
+                dst32[dIdx] = next
+                didChange = true
+              }
+            }
+          }
         }
-      }
 
-      dIdx++
-      mIdx++
+        dIdx++
+        mIdx++
+      }
+      dIdx += dStride
+      mIdx += mStride
     }
+  } else {
+    for (let iy = 0; iy < finalH; iy++) {
+      for (let ix = 0; ix < finalW; ix++) {
+        const effectiveM = maskData[mIdx]
+
+        if (effectiveM === 0) {
+          const current = dst32[dIdx]
+          const next = (current & 0x00ffffff) >>> 0
 
-    dIdx += dStride
-    mIdx += mStride
+          if (current !== next) {
+            dst32[dIdx] = next
+            didChange = true
+          }
+        } else {
+          const t1 = effectiveM * globalAlpha + 128
+          const weight = (t1 + (t1 >> 8)) >> 8
+
+          if (weight < 255) {
+            const current = dst32[dIdx]
+            const da = current >>> 24
+
+            if (da !== 0) {
+              const t2 = da * weight + 128
+              const finalAlpha = (t2 + (t2 >> 8)) >> 8
+              const next = ((current & 0x00ffffff) | (finalAlpha << 24)) >>> 0
+
+              if (current !== next) {
+                dst32[dIdx] = next
+                didChange = true
+              }
+            }
+          }
+        }
+
+        dIdx++
+        mIdx++
+      }
+      dIdx += dStride
+      mIdx += mStride
+    }
   }
   return didChange
 }

package/src/PixelData/applyBinaryMaskToPixelData.ts

@@ -1,4 +1,6 @@
-import { type ApplyMaskToPixelDataOptions, type BinaryMask, type IPixelData32 } from '../_types'
+import { type ApplyMaskToPixelDataOptions } from '../_types'
+import type { BinaryMask } from '../Mask/_mask-types'
+import type { PixelData32 } from './_pixelData-types'
 
 /**
  * Directly applies a mask to a region of PixelData,
@@ -6,14 +8,14 @@ import { type ApplyMaskToPixelDataOptions, type BinaryMask, type IPixelData32 }
  * @returns true if any pixels were actually modified.
  */
 export function applyBinaryMaskToPixelData(
-  target: IPixelData32,
+  target: PixelData32,
   mask: BinaryMask,
   opts?: ApplyMaskToPixelDataOptions,
 ): boolean {
   const targetX = opts?.x ?? 0
   const targetY = opts?.y ?? 0
-  const width = opts?.w ?? target.width
-  const height = opts?.h ?? target.height
+  const width = opts?.w ?? target.w
+  const height = opts?.h ?? target.h
   const globalAlpha = opts?.alpha ?? 255
   const mx = opts?.mx ?? 0
   const my = opts?.my ?? 0
@@ -36,8 +38,8 @@ export function applyBinaryMaskToPixelData(
     y = 0
   }
 
-  w = Math.min(w, target.width - x)
-  h = Math.min(h, target.height - y)
+  w = Math.min(w, target.w - x)
+  h = Math.min(h, target.h - y)
 
   if (w <= 0 || h <= 0) return false
 
@@ -67,8 +69,8 @@ export function applyBinaryMaskToPixelData(
   const xShift = sX0 - startX
   const yShift = sY0 - startY
 
-  const dst32 = target.data32
-  const dw = target.width
+  const dst32 = target.data
+  const dw = target.w
   const dStride = dw - finalW
   const mStride = mPitch - finalW
   const maskData = mask.data

package/src/PixelData/applyMaskToPixelData.ts

@@ -1,16 +1,11 @@
-import {
-  type AlphaMask,
-  type ApplyMaskToPixelDataOptions,
-  type BinaryMask,
-  type IPixelData32,
-  type Mask,
-  MaskType,
-} from '../_types'
+import { type ApplyMaskToPixelDataOptions } from '../_types'
+import { type AlphaMask, type BinaryMask, type Mask, MaskType } from '../Mask/_mask-types'
+import type { PixelData32 } from './_pixelData-types'
 import { applyAlphaMaskToPixelData } from './applyAlphaMaskToPixelData'
 import { applyBinaryMaskToPixelData } from './applyBinaryMaskToPixelData'
 
 export function applyMaskToPixelData(
-  dst: IPixelData32,
+  dst: PixelData32,
   mask: Mask,
   opts?: ApplyMaskToPixelDataOptions,
 ): boolean {

package/src/PixelData/blendColorPixelData.ts

@@ -1,19 +1,20 @@
-import { type Color32, type ColorBlendOptions, type IPixelData32 } from '../_types'
+import { type Color32, type ColorBlendOptions } from '../_types'
 import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { PixelData32 } from './_pixelData-types'
 
 /**
  * Blends a solid color into a target pixel buffer.
  * @returns true if any pixels were actually modified.
  */
 export function blendColorPixelData(
-  target: IPixelData32,
+  target: PixelData32,
   color: Color32,
   opts?: ColorBlendOptions,
 ): boolean {
   const targetX = opts?.x ?? 0
   const targetY = opts?.y ?? 0
-  const width = opts?.w ?? target.width
-  const height = opts?.h ?? target.height
+  const width = opts?.w ?? target.w
+  const height = opts?.h ?? target.h
   const globalAlpha = opts?.alpha ?? 255
   const blendFn = opts?.blendFn ?? sourceOverPerfect
   if (globalAlpha === 0) return false
@@ -39,8 +40,8 @@ export function blendColorPixelData(
     y = 0
   }
 
-  const actualW = Math.min(w, target.width - x)
-  const actualH = Math.min(h, target.height - y)
+  const actualW = Math.min(w, target.w - x)
+  const actualH = Math.min(h, target.h - y)
 
   if (actualW <= 0 || actualH <= 0) return false
 
@@ -53,8 +54,8 @@ export function blendColorPixelData(
     finalSrcColor = ((color & 0x00ffffff) | (a << 24)) >>> 0 as Color32
   }
 
-  const dst32 = target.data32
-  const dw = target.width
+  const dst32 = target.data
+  const dw = target.w
   let dIdx = (y * dw + x) | 0
   const dStride = (dw - actualW) | 0
   let didChange = false