pixel-data-js 0.26.0 → 0.28.0

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'
+  }
+}

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'
+  }
+}