pixel-data-js 0.27.0 → 0.28.0

package/src/Mask/BinaryMask/makeRectBinaryMaskOutline.ts

@@ -0,0 +1,34 @@
+import { type BinaryMask, MaskType } from '../_mask-types'
+
+export function makeRectBinaryMaskOutline(
+  w: number,
+  h: number,
+  scale = 1,
+): BinaryMask {
+  const rw = w * scale
+  const rh = h * scale
+
+  const outW = rw + 2
+  const outH = rh + 2
+  const outData = new Uint8Array(outW * outH)
+
+  // Top edge
+  outData.fill(1, 0, outW)
+
+  // Bottom edge
+  outData.fill(1, (outH - 1) * outW, outH * outW)
+
+  // Left and Right edges
+  for (let iy = 1; iy < outH - 1; iy++) {
+    const rowStart = iy * outW
+    outData[rowStart] = 1
+    outData[rowStart + outW - 1] = 1
+  }
+
+  return {
+    type: MaskType.BINARY,
+    w: outW,
+    h: outH,
+    data: outData,
+  }
+}

package/src/Mask/BinaryMask.ts

@@ -1,4 +1,4 @@
-import { type BinaryMask, MaskType } from '../_types'
+import { type BinaryMask, MaskType } from './_mask-types'
 
 /**
  * Creates a Binary Mask

package/src/Mask/_mask-types.ts

@@ -0,0 +1,73 @@
+import type { Rect } from '../Rect/_rect-types'
+
+/**
+ * Defines how mask values should be interpreted during a draw operation.
+ */
+export enum MaskType {
+  /**
+   * Values are treated as alpha weights.
+   * 0 is skipped, values > 0 are processed.
+   */
+  ALPHA,
+  /**
+   *  Values are treated as on/off.
+   * 0 is fully transparent (skipped), any other value is fully opaque.
+   */
+  BINARY
+}
+
+export interface BaseMask {
+  readonly type: MaskType
+  readonly data: Uint8Array
+  readonly w: number
+  readonly h: number
+}
+
+export type Mask = BinaryMask | AlphaMask
+
+/** Strictly 0 or 1 */
+export interface BinaryMask extends BaseMask {
+  readonly type: MaskType.BINARY
+}
+
+/** Strictly 0-255 */
+export interface AlphaMask extends BaseMask {
+  readonly type: MaskType.ALPHA
+}
+
+export interface MutableMask<T extends MaskType> {
+  readonly type: T
+  data: Uint8Array
+  w: number
+  h: number
+}
+
+export interface MutableAlphaMask extends MutableMask<MaskType.ALPHA> {
+}
+
+export interface MutableBinaryMask extends MutableMask<MaskType.BINARY> {
+}
+
+export type MaskRect<T extends MaskType> = Rect & {
+  type: T
+  data: Uint8Array
+}
+
+export type BinaryMaskRect = MaskRect<MaskType.BINARY>
+
+export type AlphaMaskRect = MaskRect<MaskType.ALPHA>
+
+export type NullableBinaryMaskRect = Rect & ({
+  type: MaskType.BINARY
+  data: Uint8Array
+} | {
+  type?: null
+  data?: null
+})
+export type NullableMaskRect = Rect & ({
+  type: MaskType
+  data: Uint8Array
+} | {
+  type?: null
+  data?: null
+})

package/src/Mask/applyBinaryMaskToAlphaMask.ts

@@ -1,4 +1,5 @@
-import type { AlphaMask, ApplyMaskToPixelDataOptions, BinaryMask } from '../_types'
+import type { ApplyMaskToPixelDataOptions } from '../_types'
+import type { AlphaMask, BinaryMask } from './_mask-types'
 
 export function applyBinaryMaskToAlphaMask(
   alphaMaskDst: AlphaMask,

package/src/Mask/copyMask.ts

@@ -1,4 +1,4 @@
-import { type Mask } from '../_types'
+import type { Mask } from './_mask-types'
 
 /**
  * Creates a new copy of a mask.

package/src/Mask/extractMask.ts

@@ -1,4 +1,5 @@
-import { type Mask, type Rect } from '../_types'
+import type { Rect } from '../Rect/_rect-types'
+import type { Mask } from './_mask-types'
 
 /**
  * Extracts a rectangular region from a 1D {@link Uint8Array} mask.

package/src/Mask/extractMaskBuffer.ts

@@ -1,4 +1,4 @@
-import type { Rect } from '../_types'
+import type { Rect } from '../Rect/_rect-types'
 
 /**
  * Extracts a rectangular region from a 1D {@link Uint8Array} mask.

package/src/Mask/mergeAlphaMasks.ts

@@ -1,4 +1,5 @@
-import { type AlphaMask, type MergeAlphaMasksOptions } from '../_types'
+import type { MergeAlphaMasksOptions } from '../_types'
+import type { AlphaMask } from './_mask-types'
 
 /**
  * Merges 2 alpha masks values are 0-255
@@ -58,7 +59,8 @@ export function mergeAlphaMasks(
       } else if (globalAlpha === 255) {
         weight = effectiveM
       } else {
-        weight = (effectiveM * globalAlpha + 128) >> 8
+        const t = effectiveM * globalAlpha + 128
+        weight = (t + (t >> 8)) >> 8
       }
 
       if (weight !== 255) {
@@ -70,7 +72,8 @@ export function mergeAlphaMasks(
           if (da === 255) {
             dstData[dIdx] = weight
           } else if (da !== 0) {
-            dstData[dIdx] = (da * weight + 128) >> 8
+            const t = da * weight + 128
+            dstData[dIdx] = (t + (t >> 8)) >> 8
           }
         }
       }

package/src/Mask/mergeBinaryMasks.ts

@@ -1,4 +1,5 @@
-import type { BinaryMask, MergeAlphaMasksOptions } from '../_types'
+import type { MergeAlphaMasksOptions } from '../_types'
+import type { BinaryMask } from './_mask-types'
 
 export function mergeBinaryMasks(
   dst: BinaryMask,

package/src/Mask/setMaskData.ts

@@ -1,4 +1,4 @@
-import type { Mask } from '../_types'
+import type { Mask } from './_mask-types'
 
 export function setMaskData(mask: Mask, width: number, height: number, data: Uint8Array): void {
   ;(mask as any).w = width

package/src/MaskRect/merge2BinaryMaskRects.ts

@@ -1,4 +1,4 @@
-import { MaskType, type NullableBinaryMaskRect } from '../_types'
+import { MaskType, type NullableBinaryMaskRect } from '../Mask/_mask-types'
 import { getRectsBounds } from '../Rect/getRectsBounds'
 
 export function merge2BinaryMaskRects(
@@ -34,7 +34,7 @@ export function merge2BinaryMaskRects(
     }
   }
 
- const maskData =  new Uint8Array(bounds.w * bounds.h)
+  const maskData = new Uint8Array(bounds.w * bounds.h)
 
   // --- Write A's contribution ---
   const aOffY = a.y - bounds.y

package/src/MaskRect/mergeBinaryMaskRects.ts

@@ -1,4 +1,4 @@
-import type { NullableBinaryMaskRect } from '../_types'
+import type { NullableBinaryMaskRect } from '../Mask/_mask-types'
 import { merge2BinaryMaskRects } from './merge2BinaryMaskRects'
 
 export function mergeBinaryMaskRects(current: NullableBinaryMaskRect[], adding: NullableBinaryMaskRect[]): NullableBinaryMaskRect[] {

package/src/MaskRect/subtractBinaryMaskRects.ts

@@ -1,4 +1,4 @@
-import { MaskType, type NullableBinaryMaskRect } from '../_types'
+import { MaskType, type NullableBinaryMaskRect } from '../Mask/_mask-types'
 
 export function subtractBinaryMaskRects(
   current: NullableBinaryMaskRect[],

package/src/Paint/AlphaMaskPaintBuffer.ts

@@ -0,0 +1,339 @@
+import { type Color32 } from '../_types'
+import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
+import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../History/PixelAccumulator'
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import { _macro_paintRectCenterOffset } from '../Internal/macros'
+import { blendColorPixelDataAlphaMask } from '../PixelData/blendColorPixelDataAlphaMask'
+import type { Rect } from '../Rect/_rect-types'
+import { trimRectBounds } from '../Rect/trimRectBounds'
+import type { AlphaMaskTile } from '../Tile/_tile-types'
+import type { TilePool } from '../Tile/TilePool'
+import type { PaintAlphaMask, PaintBinaryMask } from './_paint-types'
+import { eachTileInBounds } from './eachTileInBounds'
+
+export class AlphaMaskPaintBuffer {
+  readonly lookup: (AlphaMaskTile | undefined)[]
+  private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
+
+  private blendColorPixelDataAlphaMaskFn = blendColorPixelDataAlphaMask
+  private forEachLinePointFn = forEachLinePoint
+  private trimRectBoundsFn = trimRectBounds
+  private eachTileInBoundsFn = eachTileInBounds
+
+  constructor(
+    readonly config: PixelEngineConfig,
+    readonly tilePool: TilePool<AlphaMaskTile>,
+  ) {
+    this.lookup = []
+  }
+
+  paintAlphaMask(
+    brush: PaintAlphaMask,
+    x: number,
+    y: number,
+  ): boolean
+  paintAlphaMask(
+    brush: PaintAlphaMask,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintAlphaMask(
+    brush: PaintAlphaMask,
+    x0: number,
+    y0: number,
+    x1: number = x0,
+    y1: number = y0,
+  ): boolean {
+
+    const scratch = this.scratchBounds
+    const lookup = this.lookup
+    const tilePool = this.tilePool
+    const config = this.config
+    const tileShift = config.tileShift
+    const tileMask = config.tileMask
+    const target = config.target
+
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+
+    let changed = false
+
+    const eachTileInBoundsFn = this.eachTileInBoundsFn
+    const trimRectBoundsFn = this.trimRectBoundsFn
+
+    this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
+
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+      trimRectBoundsFn(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.w,
+        target.h,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const data = tile.data
+        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 idx = dS + j
+
+            // Only overwrite if the brush stroke is stronger than the existing mask pixel
+            if (brushA > data[idx]) {
+              data[idx] = brushA
+              tileChanged = true
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+    return changed
+  }
+
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    alpha: number,
+    x: number,
+    y: number,
+  ): boolean
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    alpha: number,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    alpha: number,
+    x0: number,
+    y0: number,
+    x1: number = x0,
+    y1: number = y0,
+  ): boolean {
+    if (alpha === 0) return false
+
+    const scratch = this.scratchBounds
+    const lookup = this.lookup
+    const tilePool = this.tilePool
+    const config = this.config
+    const tileShift = config.tileShift
+    const tileMask = config.tileMask
+    const target = config.target
+
+    const { w: bW, h: bH, data: bD, centerOffsetX, centerOffsetY } = brush
+    let changed = false
+
+    const trimRectBoundsFn = this.trimRectBoundsFn
+    const eachTileInBoundsFn = this.eachTileInBoundsFn
+
+    this.forEachLinePointFn(x0, y0, x1, y1, (px, py) => {
+      const topLeftX = Math.floor(px + centerOffsetX)
+      const topLeftY = Math.floor(py + centerOffsetY)
+
+      trimRectBoundsFn(
+        topLeftX,
+        topLeftY,
+        bW,
+        bH,
+        target.w,
+        target.h,
+        scratch,
+      )
+
+      if (scratch.w <= 0 || scratch.h <= 0) return
+
+      eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const data = tile.data
+        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 (data[idx] < alpha) {
+                data[idx] = alpha
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+
+    return changed
+  }
+
+  paintRect(
+    alpha: number,
+    brushWidth: number,
+    brushHeight: number,
+    x: number,
+    y: number,
+  ): boolean
+  paintRect(
+    alpha: number,
+    brushWidth: number,
+    brushHeight: number,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintRect(
+    alpha: number,
+    brushWidth: number,
+    brushHeight: number,
+    x0: number,
+    y0: number,
+    x1: number = x0,
+    y1: number = y0,
+  ): boolean {
+    const scratch = this.scratchBounds
+    const lookup = this.lookup
+    const tilePool = this.tilePool
+    const config = this.config
+    const tileShift = config.tileShift
+    const tileMask = config.tileMask
+    const target = config.target
+
+    const centerOffsetX = _macro_paintRectCenterOffset(brushWidth)
+    const centerOffsetY = _macro_paintRectCenterOffset(brushHeight)
+
+    const trimRectBoundsFn = this.trimRectBoundsFn
+    const eachTileInBoundsFn = this.eachTileInBoundsFn
+
+    let changed = false
+    this.forEachLinePointFn(
+      x0,
+      y0,
+      x1,
+      y1,
+      (px, py) => {
+        const topLeftX = Math.floor(px + centerOffsetX)
+        const topLeftY = Math.floor(py + centerOffsetY)
+
+        trimRectBoundsFn(
+          topLeftX,
+          topLeftY,
+          brushWidth,
+          brushHeight,
+          target.w,
+          target.h,
+          scratch,
+        )
+
+        if (scratch.w <= 0 || scratch.h <= 0) return
+
+        eachTileInBoundsFn(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+            const data = tile.data
+            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 the new alpha is stronger than the current alpha, overwrite it
+                if (alpha > data[idx]) {
+                  data[idx] = alpha
+                  tileChanged = true
+                }
+              }
+            }
+
+            if (tileChanged) {
+              changed = true
+            }
+          },
+        )
+      },
+    )
+
+    return changed
+  }
+
+  private opts = {
+    alpha: 255,
+    blendFn: sourceOverPerfect,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  }
+
+  commit(
+    accumulator: PixelAccumulator,
+    color: Color32,
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+  ) {
+    const blendColorPixelDataAlphaMaskFn = this.blendColorPixelDataAlphaMaskFn
+    const tileShift = this.config.tileShift
+    const lookup = this.lookup
+    const opts = this.opts
+
+    opts.alpha = alpha
+    opts.blendFn = blendFn
+
+    for (let i = 0; i < lookup.length; i++) {
+      const tile = lookup[i]
+
+      if (tile) {
+        const didChange = accumulator.storeTileBeforeState(tile.id, tile.tx, tile.ty)
+
+        const dx = tile.tx << tileShift
+        const dy = tile.ty << tileShift
+
+        opts.x = dx
+        opts.y = dy
+        opts.w = tile.w
+        opts.h = tile.h
+
+        didChange(
+          blendColorPixelDataAlphaMaskFn(
+            this.config.target,
+            color,
+            tile,
+            opts,
+          ),
+        )
+      }
+    }
+
+    this.clear()
+  }
+
+  clear(): void {
+    this.tilePool.releaseTiles(this.lookup)
+  }
+}

package/src/Paint/AlphaMaskPaintBufferCanvasRenderer.ts

@@ -0,0 +1,78 @@
+import type { Color32 } from '../_types'
+import { CANVAS_CTX_FAILED } from '../Internal/_errors'
+import { makePixelData } from '../PixelData/PixelData'
+import type { AlphaMaskPaintBuffer } from './AlphaMaskPaintBuffer'
+
+export type AlphaMaskPaintBufferCanvasRenderer = ReturnType<typeof makeAlphaMaskPaintBufferCanvasRenderer>
+
+export function makeAlphaMaskPaintBufferCanvasRenderer(
+  paintBuffer: AlphaMaskPaintBuffer,
+  offscreenCanvasClass = OffscreenCanvas,
+) {
+  const config = paintBuffer.config
+  const tileSize = config.tileSize
+  const tileShift = config.tileShift
+  const tileArea = config.tileArea
+  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
+
+  const bridge = makePixelData(new ImageData(tileSize, tileSize))
+  const view32 = bridge.data
+
+  return function drawPaintBuffer(
+    targetCtx: CanvasRenderingContext2D,
+    color: Color32,
+    alpha = 255,
+    compOperation: GlobalCompositeOperation = 'source-over',
+  ): void {
+    if (alpha === 0) return
+
+    const baseSrcAlpha = (color >>> 24)
+    const colorRGB = color & 0x00ffffff
+
+    if (baseSrcAlpha === 0) return
+
+    targetCtx.globalAlpha = alpha / 255
+    targetCtx.globalCompositeOperation = compOperation
+
+    for (let i = 0; i < lookup.length; i++) {
+      const tile = lookup[i]
+
+      if (tile) {
+        const data8 = tile.data
+        view32.fill(0)
+
+        for (let p = 0; p < tileArea; p++) {
+          const maskA = data8[p]
+          if (maskA === 0) continue
+
+          // If mask is solid, the final pixel is just the unmodified color
+          if (maskA === 255) {
+            view32[p] = color
+          } else {
+            // Otherwise, blend the color's inherent alpha with the mask's alpha
+            const t = baseSrcAlpha * maskA + 128
+            const finalA = (t + (t >> 8)) >> 8
+
+            view32[p] = ((colorRGB | (finalA << 24)) >>> 0) as Color32
+          }
+        }
+
+        const dx = tile.tx << tileShift
+        const dy = tile.ty << tileShift
+
+        ctx.putImageData(bridge.imageData, 0, 0)
+        targetCtx.drawImage(canvas, dx, dy)
+      }
+    }
+
+    targetCtx.globalAlpha = 1
+    targetCtx.globalCompositeOperation = 'source-over'
+  }
+}