pixel-data-js 0.23.1 → 0.25.0

package/src/Paint/PaintBuffer.ts

@@ -0,0 +1,269 @@
+import type { Color32, PaintAlphaMask, PaintBinaryMask, Rect } from '../_types'
+import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import { macro_halfAndFloor } from '../Internal/helpers'
+import type { PixelTile } from '../PixelTile/PixelTile'
+import type { PixelTilePool } from '../PixelTile/PixelTilePool'
+import { trimRectBounds } from '../Rect/trimRectBounds'
+
+export class PaintBuffer {
+  readonly lookup: (PixelTile | undefined)[]
+  private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
+
+  constructor(
+    readonly config: PixelEngineConfig,
+    readonly tilePool: PixelTilePool,
+  ) {
+    this.lookup = []
+  }
+
+  private eachTileInBounds(
+    bounds: Rect,
+    callback: (tile: PixelTile, bX: number, bY: number, bW: number, bH: number) => void,
+  ): void {
+    const { tileShift, targetColumns, targetRows, tileSize } = this.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
+
+    const lookup = this.lookup
+    const tilePool = this.tilePool
+
+    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)
+      }
+    }
+  }
+
+  writePaintAlphaMaskStroke(
+    color: Color32,
+    brush: PaintAlphaMask,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const cA = color >>> 24
+    if (cA === 0) return false
+
+    const { tileShift, tileMask, target } = this.config
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+    const cRGB = color & 0x00ffffff
+    const scratch = this.scratchBounds
+
+    let changed = false
+
+    forEachLinePoint(x0, y0, x1, y1, (px, py) => {
+
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+      trimRectBounds(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.width,
+        target.height,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data32
+        let tileChanged = false
+
+        for (let i = 0; i < bH_t; i++) {
+          const canvasY = bY + i
+          const bOff = (canvasY - topLeftY) * bW
+          const tOff = (canvasY & tileMask) << tileShift
+          const dS = tOff + (bX & tileMask)
+
+          for (let j = 0; j < bW_t; j++) {
+            const canvasX = bX + j
+            const brushA = bD[bOff + (canvasX - topLeftX)]
+            if (brushA === 0) continue
+
+            const t = cA * brushA + 128
+            const blendedA = (t + (t >> 8)) >> 8
+
+            const idx = dS + j
+            const cur = d32[idx]
+            if (brushA > (cur >>> 24)) {
+              const next = (cRGB | (blendedA << 24)) >>> 0
+              if (cur !== next) {
+                d32[idx] = next as Color32
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+    return changed
+  }
+
+  writePaintBinaryMaskStroke(
+    color: Color32,
+    brush: PaintBinaryMask,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const alphaIsZero = (color >>> 24) === 0
+    if (alphaIsZero) return false
+
+    const { tileShift, tileMask, target } = this.config
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+    const scratch = this.scratchBounds
+    let changed = false
+
+    forEachLinePoint(x0, y0, x1, y1, (px, py) => {
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+
+      trimRectBounds(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.width,
+        target.height,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data32
+        let tileChanged = false
+
+        for (let i = 0; i < bH_t; i++) {
+          const canvasY = bY + i
+          const bOff = (canvasY - topLeftY) * bW
+          const tOff = (canvasY & tileMask) << tileShift
+          const dS = tOff + (bX & tileMask)
+
+          for (let j = 0; j < bW_t; j++) {
+            const canvasX = bX + j
+            if (bD[bOff + (canvasX - topLeftX)]) {
+              const idx = dS + j
+              if (d32[idx] !== color) {
+                d32[idx] = color
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+
+    return changed
+  }
+
+  writeRectStroke(
+    color: Color32,
+    brushWidth: number,
+    brushHeight: number,
+    x0: number,
+    y0: number,
+    x1: number,
+    y1: number,
+  ): boolean {
+    const alphaIsZero = (color >>> 24) === 0
+    if (alphaIsZero) return false
+
+    const config = this.config
+    const tileShift = config.tileShift
+    const tileMask = config.tileMask
+    const target = config.target
+    const scratch = this.scratchBounds
+
+    const centerOffsetX = macro_halfAndFloor(brushWidth - 1)
+    const centerOffsetY = macro_halfAndFloor(brushHeight - 1)
+
+    let changed = false
+
+    forEachLinePoint(
+      x0,
+      y0,
+      x1,
+      y1,
+      (px, py) => {
+        const topLeftX = Math.floor(px + centerOffsetX)
+        const topLeftY = Math.floor(py + centerOffsetY)
+
+        trimRectBounds(
+          topLeftX,
+          topLeftY,
+          brushWidth,
+          brushHeight,
+          target.width,
+          target.height,
+          scratch,
+        )
+
+        if (scratch.w <= 0 || scratch.h <= 0) return
+
+        this.eachTileInBounds(
+          scratch,
+          (tile, bX, bY, bW_t, bH_t) => {
+            const d32 = tile.data32
+            let tileChanged = false
+
+            for (let i = 0; i < bH_t; i++) {
+              const canvasY = bY + i
+              const tOff = (canvasY & tileMask) << tileShift
+              const dS = tOff + (bX & tileMask)
+
+              for (let j = 0; j < bW_t; j++) {
+                const idx = dS + j
+
+                if (d32[idx] !== color) {
+                  d32[idx] = color
+                  tileChanged = true
+                }
+              }
+            }
+
+            if (tileChanged) {
+              changed = true
+            }
+          },
+        )
+      },
+    )
+
+    return changed
+  }
+
+  clear(): void {
+    this.tilePool.releaseTiles(this.lookup)
+  }
+}

package/src/Paint/PaintBufferCanvasRenderer.ts

@@ -0,0 +1,48 @@
+import { CANVAS_CTX_FAILED } from '../Canvas/_constants'
+import type { PaintBuffer } from './PaintBuffer'
+
+export type PaintBufferCanvasRenderer = ReturnType<typeof makePaintBufferCanvasRenderer>
+
+/**
+ *
+ * @param offscreenCanvasClass - @internal
+ */
+export function makePaintBufferCanvasRenderer(
+  paintBuffer: PaintBuffer,
+  offscreenCanvasClass = OffscreenCanvas,
+) {
+  const config = paintBuffer.config
+  const tileSize = config.tileSize
+  const tileShift = config.tileShift
+  const lookup = paintBuffer.lookup
+  const canvas = new offscreenCanvasClass(tileSize, tileSize)
+  const ctx = canvas.getContext('2d')
+  if (!ctx) throw new Error(CANVAS_CTX_FAILED)
+  ctx.imageSmoothingEnabled = false
+
+  return function drawPaintBuffer(
+    targetCtx: CanvasRenderingContext2D,
+    alpha = 255,
+    compOperation: GlobalCompositeOperation = 'source-over',
+  ): void {
+
+    targetCtx.globalAlpha = alpha / 255
+    targetCtx.globalCompositeOperation = compOperation
+
+    for (let i = 0; i < lookup.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.globalAlpha = 1
+    targetCtx.globalCompositeOperation = 'source-over'
+  }
+}

package/src/Paint/makeCirclePaintAlphaMask.ts

@@ -0,0 +1,41 @@
+import { MaskType, type PaintAlphaMask } from '../_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 = -Math.ceil(radius - 0.5)
+
+  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,
+    data,
+    w: size,
+    h: size,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset
+  }
+}

package/src/{Mask/CircleBrushBinaryMask.ts → Paint/makeCirclePaintBinaryMask.ts}

@@ -1,11 +1,11 @@
-import { type CircleBrushBinaryMask, MaskType } from '../_types'
+import { MaskType, type PaintBinaryMask } from '../_types'
 
-export function makeCircleBrushBinaryMask(size: number): CircleBrushBinaryMask {
+export function makeCirclePaintBinaryMask(size: number): PaintBinaryMask {
   const area = size * size
   const data = new Uint8Array(area)
   const radius = size / 2
 
-  const minOffset = -Math.ceil(radius - 0.5)
+  const centerOffset = -Math.ceil(radius - 0.5)
 
   for (let y = 0; y < size; y++) {
     for (let x = 0; x < size; x++) {
@@ -23,8 +23,7 @@ export function makeCircleBrushBinaryMask(size: number): CircleBrushBinaryMask {
     data,
     w: size,
     h: size,
-    radius,
-    size,
-    minOffset,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
   }
 }

package/src/Paint/makePaintMask.ts

@@ -0,0 +1,28 @@
+import { type AlphaMask, type BinaryMask, MaskType, type PaintAlphaMask, type PaintBinaryMask } from '../_types'
+import { macro_halfAndFloor } from '../Internal/helpers'
+
+export function makePaintBinaryMask(
+  mask: BinaryMask,
+): PaintBinaryMask {
+  return {
+    type: MaskType.BINARY,
+    data: mask.data,
+    w: mask.w,
+    h: mask.h,
+    centerOffsetX: -macro_halfAndFloor(mask.w),
+    centerOffsetY: -macro_halfAndFloor(mask.h),
+  }
+}
+
+export function makePaintAlphaMask(
+  mask: AlphaMask,
+): PaintAlphaMask {
+  return {
+    type: MaskType.ALPHA,
+    data: mask.data,
+    w: mask.w,
+    h: mask.h,
+    centerOffsetX: -macro_halfAndFloor(mask.w),
+    centerOffsetY: -macro_halfAndFloor(mask.h),
+  }
+}

package/src/Paint/makeRectFalloffPaintAlphaMask.ts

@@ -0,0 +1,47 @@
+import { MaskType, type PaintAlphaMask } from '../_types'
+import { macro_halfAndFloor } from '../Internal/helpers'
+
+export function makeRectFalloffPaintAlphaMask(
+  width: number,
+  height: number,
+  fallOff: (d: number) => number = (d) => d,
+): PaintAlphaMask {
+  const fPx = Math.floor(width / 2)
+  const fPy = Math.floor(height / 2)
+
+  const invHalfW = 2 / width
+  const invHalfH = 2 / height
+
+  const offX = (width % 2 === 0) ? 0.5 : 0
+  const offY = (height % 2 === 0) ? 0.5 : 0
+
+  const area = width * height
+  const data = new Uint8Array(area)
+
+  for (let y = 0; y < height; y++) {
+    const dy = Math.abs((y - fPy) + offY) * invHalfH
+    const rowOffset = y * width
+
+    for (let x = 0; x < width; x++) {
+      const dx = Math.abs((x - fPx) + offX) * invHalfW
+
+      // Chebyshev distance (square/rect shape)
+      const dist = dx > dy ? dx : dy
+      // 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,
+    data: data,
+    w: width,
+    h: height,
+    centerOffsetX: -macro_halfAndFloor(width),
+    centerOffsetY: -macro_halfAndFloor(height),
+  }
+}

package/src/PixelData/PixelBuffer32.ts

@@ -1,6 +1,6 @@
-import type { IPixelData } from '../_types'
+import type { IPixelData32 } from '../_types'
 
-export class PixelBuffer32 implements IPixelData {
+export class PixelBuffer32 implements IPixelData32 {
   readonly data32: Uint32Array
 
   constructor(

package/src/PixelData/PixelData.ts

@@ -1,7 +1,7 @@
-import type { ImageDataLike, ImageDataLikeConstructor, IPixelData } from '../_types'
+import type { ImageDataLike, IPixelData } from '../_types'
 import { imageDataToUInt32Array } from '../ImageData/imageDataToUInt32Array'
 
-export class PixelData<T extends ImageDataLike = ImageData> implements IPixelData {
+export class PixelData<T extends ImageDataLike = ImageData> implements IPixelData<T> {
   readonly data32: Uint32Array
   readonly imageData: T
   readonly width: number
@@ -20,30 +20,4 @@ export class PixelData<T extends ImageDataLike = ImageData> implements IPixelDat
     ;(this as any).width = imageData.width
     ;(this as any).height = imageData.height
   }
-
-  // should only be used for debug and testing
-  copy(): PixelData<T> {
-    const data = this.imageData.data
-    const buffer = new Uint8ClampedArray(data)
-    const Ctor = this.imageData.constructor
-    const isCtorValid = typeof Ctor === 'function'
-
-    let newImageData: T
-    if (isCtorValid && Ctor !== Object) {
-      const ImageConstructor = Ctor as ImageDataLikeConstructor<T>
-      newImageData = new ImageConstructor(
-        buffer,
-        this.width,
-        this.height,
-      )
-    } else {
-      newImageData = {
-        width: this.width,
-        height: this.height,
-        data: buffer,
-      } as unknown as T
-    }
-
-    return new PixelData<T>(newImageData)
-  }
 }

package/src/PixelData/applyAlphaMaskToPixelData.ts

@@ -1,14 +1,15 @@
-import { type AlphaMask, type ApplyMaskToPixelDataOptions, type IPixelData } from '../_types'
+import { type AlphaMask, type ApplyMaskToPixelDataOptions, type Color32, type IPixelData32 } from '../_types'
 
 /**
  * Directly applies a mask to a region of PixelData,
  * modifying the destination's alpha channel in-place.
+ * @returns true if any pixels were actually modified.
  */
 export function applyAlphaMaskToPixelData(
-  dst: IPixelData,
+  dst: IPixelData32,
   mask: AlphaMask,
   opts: ApplyMaskToPixelDataOptions = {},
-): void {
+): boolean {
   const {
     x: targetX = 0,
     y: targetY = 0,
@@ -20,7 +21,7 @@ export function applyAlphaMaskToPixelData(
     invertMask = false,
   } = opts
 
-  if (globalAlpha === 0) return
+  if (globalAlpha === 0) return false
 
   // 1. Initial Destination Clipping
   let x = targetX
@@ -41,12 +42,12 @@ export function applyAlphaMaskToPixelData(
   w = Math.min(w, dst.width - x)
   h = Math.min(h, dst.height - y)
 
-  if (w <= 0) return
-  if (h <= 0) return
+  if (w <= 0) return false
+  if (h <= 0) return false
 
   // 2. Determine Source Dimensions
   const mPitch = mask.w
-  if (mPitch <= 0) return
+  if (mPitch <= 0) return false
 
   // 3. Source Bounds Clipping
   // Calculate where we would start reading in the mask
@@ -63,8 +64,8 @@ export function applyAlphaMaskToPixelData(
   const finalH = sY1 - sY0
 
   // This is where your failing tests are now caught
-  if (finalW <= 0) return
-  if (finalH <= 0) return
+  if (finalW <= 0) return false
+  if (finalH <= 0) return false
 
   // 4. Align Destination with Source Clipping
   // If the source was clipped on the top/left, we must shift the destination start
@@ -80,6 +81,7 @@ export function applyAlphaMaskToPixelData(
   let dIdx = (y + yShift) * dw + (x + xShift)
   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]
@@ -101,6 +103,7 @@ export function applyAlphaMaskToPixelData(
       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]
@@ -108,7 +111,13 @@ export function applyAlphaMaskToPixelData(
 
         if (da !== 0) {
           const finalAlpha = da === 255 ? weight : (da * weight + 128) >> 8
-          dst32[dIdx] = ((d & 0x00ffffff) | (finalAlpha << 24)) >>> 0
+
+          const current = dst32[dIdx] as Color32
+          const next = ((d & 0x00ffffff) | (finalAlpha << 24)) >>> 0
+          if (current !== next) {
+            dst32[dIdx] = next
+            didChange = true
+          }
         }
       }
 
@@ -119,4 +128,5 @@ export function applyAlphaMaskToPixelData(
     dIdx += dStride
     mIdx += mStride
   }
+  return didChange
 }