pixel-data-js 0.27.0 → 0.28.0

package/src/Paint/BinaryMaskPaintBuffer.ts

@@ -0,0 +1,254 @@
+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 { blendColorPixelDataBinaryMask } from '../PixelData/blendColorPixelDataBinaryMask'
+import type { Rect } from '../Rect/_rect-types'
+import { trimRectBounds } from '../Rect/trimRectBounds'
+import type { BinaryMaskTile } from '../Tile/_tile-types'
+import type { TilePool } from '../Tile/TilePool'
+import type { PaintBinaryMask } from './_paint-types'
+import { eachTileInBounds } from './eachTileInBounds'
+
+export class BinaryMaskPaintBuffer {
+  readonly lookup: (BinaryMaskTile | undefined)[]
+  private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
+
+  private blendColorPixelDataBinaryMaskFn = blendColorPixelDataBinaryMask
+  private forEachLinePointFn = forEachLinePoint
+  private trimRectBoundsFn = trimRectBounds
+  private eachTileInBoundsFn = eachTileInBounds
+
+  constructor(
+    readonly config: PixelEngineConfig,
+    readonly tilePool: TilePool<BinaryMaskTile>,
+  ) {
+    this.lookup = []
+  }
+
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    x: number,
+    y: number,
+  ): boolean
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintBinaryMask(
+    brush: PaintBinaryMask,
+    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 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
+
+              // Only write if it's not already "on"
+              if (data[idx] === 0) {
+                data[idx] = 1
+                tileChanged = true
+              }
+            }
+          }
+        }
+        if (tileChanged) changed = true
+      })
+    })
+
+    return changed
+  }
+
+  paintRect(
+    brushWidth: number,
+    brushHeight: number,
+    x: number,
+    y: number,
+  ): boolean
+  paintRect(
+    brushWidth: number,
+    brushHeight: number,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintRect(
+    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
+
+                // Only write if it's not already "on"
+                if (data[idx] === 0) {
+                  data[idx] = 1
+                  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 blendColorPixelDataBinaryMaskFn = this.blendColorPixelDataBinaryMaskFn
+    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(
+          blendColorPixelDataBinaryMaskFn(
+            this.config.target,
+            color,
+            tile,
+            opts,
+          ),
+        )
+      }
+    }
+
+    this.clear()
+  }
+
+  clear(): void {
+    this.tilePool.releaseTiles(this.lookup)
+  }
+}

package/src/Paint/BinaryMaskPaintBufferCanvasRenderer.ts

@@ -0,0 +1,67 @@
+import type { Color32 } from '../_types'
+import { CANVAS_CTX_FAILED } from '../Internal/_errors'
+import { makePixelData } from '../PixelData/PixelData'
+import type { BinaryMaskPaintBuffer } from './BinaryMaskPaintBuffer'
+
+export type BinaryMaskPaintBufferCanvasRenderer = ReturnType<typeof makeBinaryMaskPaintBufferCanvasRenderer>
+
+export function makeBinaryMaskPaintBufferCanvasRenderer(
+  paintBuffer: BinaryMaskPaintBuffer,
+  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)
+    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++) {
+          // If mask is solid, the final pixel is just the unmodified color
+          if (data8[p] === 1) {
+            view32[p] = color
+          }
+        }
+
+        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'
+  }
+}

package/src/Paint/{PaintBuffer.ts → ColorPaintBuffer.ts}

@@ -1,78 +1,64 @@
-import type { Color32, PaintAlphaMask, PaintBinaryMask, Rect } from '../_types'
+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/helpers'
-import type { PixelTile } from '../PixelTile/PixelTile'
-import type { PixelTilePool } from '../PixelTile/PixelTilePool'
+import { _macro_paintRectCenterOffset } from '../Internal/macros'
+import { blendPixelData } from '../PixelData/blendPixelData'
+import type { Rect } from '../Rect/_rect-types'
 import { trimRectBounds } from '../Rect/trimRectBounds'
+import type { PixelTile } from '../Tile/_tile-types'
+import type { TilePool } from '../Tile/TilePool'
+import type { PaintAlphaMask, PaintBinaryMask } from './_paint-types'
+import { eachTileInBounds } from './eachTileInBounds'
 
-export class PaintBuffer {
+export class ColorPaintBuffer {
   readonly lookup: (PixelTile | undefined)[]
   private readonly scratchBounds: Rect = { x: 0, y: 0, w: 0, h: 0 }
 
   constructor(
     readonly config: PixelEngineConfig,
-    readonly tilePool: PixelTilePool,
+    readonly tilePool: TilePool<PixelTile>,
+    private blendPixelDataFn = blendPixelData,
   ) {
     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(
+  paintAlphaMask(
+    color: Color32,
+    brush: PaintAlphaMask,
+    x: number,
+    y: number,
+  ): boolean
+  paintAlphaMask(
+    color: Color32,
+    brush: PaintAlphaMask,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintAlphaMask(
     color: Color32,
     brush: PaintAlphaMask,
     x0: number,
     y0: number,
-    x1: number,
-    y1: number,
+    x1: number = x0,
+    y1: number = y0,
   ): boolean {
     const cA = color >>> 24
     if (cA === 0) return false
 
-    const { tileShift, tileMask, target } = this.config
+    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
     const cRGB = color & 0x00ffffff
-    const scratch = this.scratchBounds
 
     let changed = false
 
@@ -85,15 +71,15 @@ export class PaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.width,
-        target.height,
+        target.w,
+        target.h,
         scratch,
       )
 
       if (scratch.w <= 0 || scratch.h <= 0) return
 
-      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
-        const d32 = tile.data32
+      eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data
         let tileChanged = false
 
         for (let i = 0; i < bH_t; i++) {
@@ -127,20 +113,40 @@ export class PaintBuffer {
     return changed
   }
 
-  writePaintBinaryMaskStroke(
+  paintBinaryMask(
+    color: Color32,
+    brush: PaintBinaryMask,
+    x: number,
+    y: number,
+  ): boolean
+  paintBinaryMask(
+    color: Color32,
+    brush: PaintBinaryMask,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintBinaryMask(
     color: Color32,
     brush: PaintBinaryMask,
     x0: number,
     y0: number,
-    x1: number,
-    y1: number,
+    x1: number = x0,
+    y1: number = y0,
   ): 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
+    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
 
     forEachLinePoint(x0, y0, x1, y1, (px, py) => {
@@ -152,15 +158,15 @@ export class PaintBuffer {
         topLeftY,
         bW,
         bH,
-        target.width,
-        target.height,
+        target.w,
+        target.h,
         scratch,
       )
 
       if (scratch.w <= 0 || scratch.h <= 0) return
 
-      this.eachTileInBounds(scratch, (tile, bX, bY, bW_t, bH_t) => {
-        const d32 = tile.data32
+      eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+        const d32 = tile.data
         let tileChanged = false
 
         for (let i = 0; i < bH_t; i++) {
@@ -187,26 +193,44 @@ export class PaintBuffer {
     return changed
   }
 
-  writeRectStroke(
+  paintRect(
+    color: Color32,
+    brushWidth: number,
+    brushHeight: number,
+    x: number,
+    y: number,
+  ): boolean
+  paintRect(
+    color: Color32,
+    brushWidth: number,
+    brushHeight: number,
+    startX: number,
+    startY: number,
+    endX: number,
+    endY: number,
+  ): boolean
+  paintRect(
     color: Color32,
     brushWidth: number,
     brushHeight: number,
     x0: number,
     y0: number,
-    x1: number,
-    y1: number,
+    x1: number = x0,
+    y1: number = y0,
   ): boolean {
     const alphaIsZero = (color >>> 24) === 0
     if (alphaIsZero) 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 scratch = this.scratchBounds
 
-    const centerOffsetX = -_macro_paintRectCenterOffset(brushWidth)
-    const centerOffsetY = -_macro_paintRectCenterOffset(brushHeight)
+    const centerOffsetX = _macro_paintRectCenterOffset(brushWidth)
+    const centerOffsetY = _macro_paintRectCenterOffset(brushHeight)
 
     let changed = false
 
@@ -224,17 +248,15 @@ export class PaintBuffer {
           topLeftY,
           brushWidth,
           brushHeight,
-          target.width,
-          target.height,
+          target.w,
+          target.h,
           scratch,
         )
 
         if (scratch.w <= 0 || scratch.h <= 0) return
 
-        this.eachTileInBounds(
-          scratch,
-          (tile, bX, bY, bW_t, bH_t) => {
-            const d32 = tile.data32
+        eachTileInBounds(config, lookup, tilePool, scratch, (tile, bX, bY, bW_t, bH_t) => {
+            const d32 = tile.data
             let tileChanged = false
 
             for (let i = 0; i < bH_t; i++) {
@@ -263,6 +285,55 @@ export class PaintBuffer {
     return changed
   }
 
+  private opts = {
+    alpha: 255,
+    blendFn: sourceOverPerfect,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  }
+
+  commit(
+    accumulator: PixelAccumulator,
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+  ) {
+    const tileShift = this.config.tileShift
+    const lookup = this.lookup
+    const opts = this.opts
+
+    const blendPixelDataFn = this.blendPixelDataFn
+    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(
+          blendPixelDataFn(
+            this.config.target,
+            tile,
+            opts,
+          ),
+        )
+      }
+    }
+
+    this.clear()
+  }
+
   clear(): void {
     this.tilePool.releaseTiles(this.lookup)
   }

package/src/Paint/{PaintBufferCanvasRenderer.ts → ColorPaintBufferCanvasRenderer.ts}

@@ -1,14 +1,15 @@
-import { CANVAS_CTX_FAILED } from '../../support/error-strings'
-import type { PaintBuffer } from './PaintBuffer'
+import { CANVAS_CTX_FAILED } from '../Internal/_errors'
+import type { ColorPaintBuffer } from './ColorPaintBuffer'
 
-export type PaintBufferCanvasRenderer = ReturnType<typeof makePaintBufferCanvasRenderer>
+export type ColorPaintBufferCanvasRenderer = ReturnType<typeof makeColorPaintBufferCanvasRenderer>
 
 /**
  *
+ * @param paintBuffer
  * @param offscreenCanvasClass - @internal
  */
-export function makePaintBufferCanvasRenderer(
-  paintBuffer: PaintBuffer,
+export function makeColorPaintBufferCanvasRenderer(
+  paintBuffer: ColorPaintBuffer,
   offscreenCanvasClass = OffscreenCanvas,
 ) {
   const config = paintBuffer.config