pixel-data-js 0.27.0 → 0.29.0

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

@@ -1,78 +1,60 @@
-import type { Color32, PaintAlphaMask, PaintBinaryMask, Rect } from '../_types'
+import type { Color32 } from '../_types'
 import { forEachLinePoint } from '../Algorithm/forEachLinePoint'
 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 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>,
   ) {
     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 +67,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 +109,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 +154,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 +189,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 +244,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++) {

package/src/Paint/Commit/AlphaMaskPaintBufferCommitter.ts

@@ -0,0 +1,26 @@
+import type { Color32 } from '../../_types'
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../../History/PixelAccumulator'
+import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
+import type { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'
+import { commitMaskPaintBuffer } from './commitMaskPaintBuffer'
+
+export function makeAlphaMaskPaintBufferCommitter(
+  accumulator: PixelAccumulator,
+  paintBuffer: AlphaMaskPaintBuffer,
+) {
+  return function commitAlphaMaskPaintBufferToAccumulator(
+    color: Color32,
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+  ) {
+    return commitMaskPaintBuffer(
+      accumulator,
+      paintBuffer,
+      color,
+      alpha,
+      blendFn,
+      blendColorPixelDataAlphaMask,
+    )
+  }
+}

package/src/Paint/Commit/AlphaMaskPaintBufferManager.ts

@@ -0,0 +1,34 @@
+import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { PixelWriter } from '../../History/PixelWriter'
+import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
+import { makeAlphaMaskTile } from '../../Tile/MaskTile'
+import { TilePool } from '../../Tile/TilePool'
+import { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'
+import { makeAlphaMaskPaintBufferCanvasRenderer } from '../Render/AlphaMaskPaintBufferCanvasRenderer'
+import { makeAlphaMaskPaintBufferCommitter } from './AlphaMaskPaintBufferCommitter'
+
+export type AlphaMaskPaintBufferManager =
+  Pick<AlphaMaskPaintBuffer, 'paintAlphaMask' | 'paintBinaryMask' | 'paintRect'>
+  & {
+  commit: ReturnType<typeof makeAlphaMaskPaintBufferCommitter>
+  draw: ReturnType<typeof makeAlphaMaskPaintBufferCanvasRenderer>
+  clear: () => void
+}
+
+export function makeAlphaMaskPaintBufferManager(
+  writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
+  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+): AlphaMaskPaintBufferManager {
+  const pool = new TilePool(writer.config, makeAlphaMaskTile)
+  const buffer = new AlphaMaskPaintBuffer(writer.config, pool)
+  const draw = makeAlphaMaskPaintBufferCanvasRenderer(buffer, canvasFactory)
+
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeAlphaMaskPaintBufferCommitter(writer.accumulator, buffer),
+    draw,
+  }
+}

package/src/Paint/Commit/BinaryMaskPaintBufferCommitter.ts

@@ -0,0 +1,26 @@
+import type { Color32 } from '../../_types'
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../../History/PixelAccumulator'
+import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
+import type { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'
+import { commitMaskPaintBuffer } from './commitMaskPaintBuffer'
+
+export function makeBinaryMaskPaintBufferCommitter(
+  accumulator: PixelAccumulator,
+  paintBuffer: BinaryMaskPaintBuffer,
+) {
+  return function commitBinaryMaskPaintBufferToAccumulator(
+    color: Color32,
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+  ) {
+    return commitMaskPaintBuffer(
+      accumulator,
+      paintBuffer,
+      color,
+      alpha,
+      blendFn,
+      blendColorPixelDataBinaryMask,
+    )
+  }
+}

package/src/Paint/Commit/BinaryMaskPaintBufferManager.ts

@@ -0,0 +1,31 @@
+import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { PixelWriter } from '../../History/PixelWriter'
+import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
+import { makeBinaryMaskTile } from '../../Tile/MaskTile'
+import { TilePool } from '../../Tile/TilePool'
+import { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'
+import { makeBinaryMaskPaintBufferCanvasRenderer } from '../Render/BinaryMaskPaintBufferCanvasRenderer'
+import { makeBinaryMaskPaintBufferCommitter } from './BinaryMaskPaintBufferCommitter'
+
+export type BinaryMaskPaintBufferManager = Pick<BinaryMaskPaintBuffer, 'paintBinaryMask' | 'paintRect'> & {
+  commit: ReturnType<typeof makeBinaryMaskPaintBufferCommitter>
+  draw: ReturnType<typeof makeBinaryMaskPaintBufferCanvasRenderer>
+  clear: () => void
+}
+
+export function makeBinaryMaskPaintBufferManager(
+  writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
+  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+): BinaryMaskPaintBufferManager {
+  const pool = new TilePool(writer.config, makeBinaryMaskTile)
+  const buffer = new BinaryMaskPaintBuffer(writer.config, pool)
+  const draw = makeBinaryMaskPaintBufferCanvasRenderer(buffer, canvasFactory)
+
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeBinaryMaskPaintBufferCommitter(writer.accumulator, buffer),
+    draw,
+  }
+}

package/src/Paint/Commit/ColorPaintBufferCommitter.ts

@@ -0,0 +1,23 @@
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../../History/PixelAccumulator'
+import { blendPixelData } from '../../PixelData/blendPixelData'
+import type { ColorPaintBuffer } from '../ColorPaintBuffer'
+import { commitColorPaintBuffer } from './commitColorPaintBuffer'
+
+export function makeColorPaintBufferCommitter(
+  accumulator: PixelAccumulator,
+  paintBuffer: ColorPaintBuffer,
+) {
+  return function commitColorPaintBufferToAccumulator(
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+  ) {
+    return commitColorPaintBuffer(
+      accumulator,
+      paintBuffer,
+      alpha,
+      blendFn,
+      blendPixelData,
+    )
+  }
+}

package/src/Paint/Commit/ColorPaintBufferManager.ts

@@ -0,0 +1,34 @@
+import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import type { PixelWriter } from '../../History/PixelWriter'
+import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
+import { makePixelTile } from '../../Tile/PixelTile'
+import { TilePool } from '../../Tile/TilePool'
+import { ColorPaintBuffer } from '../ColorPaintBuffer'
+import { makeColorPaintBufferCanvasRenderer } from '../Render/ColorPaintBufferCanvasRenderer'
+import { makeColorPaintBufferCommitter } from './ColorPaintBufferCommitter'
+
+export type ColorPaintBufferManager =
+  Pick<ColorPaintBuffer, 'paintAlphaMask' | 'paintBinaryMask' | 'paintRect'>
+  & {
+  commit: ReturnType<typeof makeColorPaintBufferCommitter>
+  draw: ReturnType<typeof makeColorPaintBufferCanvasRenderer>
+  clear: () => void
+}
+
+export function makeColorPaintBufferManager(
+  writer: Pick<PixelWriter<any>, 'accumulator' | 'config'>,
+  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+): ColorPaintBufferManager {
+  const pool = new TilePool(writer.config, makePixelTile)
+  const buffer = new ColorPaintBuffer(writer.config, pool)
+  const draw = makeColorPaintBufferCanvasRenderer(buffer, canvasFactory)
+
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeColorPaintBufferCommitter(writer.accumulator, buffer),
+    draw,
+  }
+}

package/src/Paint/Commit/commitColorPaintBuffer.ts

@@ -0,0 +1,55 @@
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../../History/PixelAccumulator'
+import { blendPixelData } from '../../PixelData/blendPixelData'
+import type { ColorPaintBuffer } from '../ColorPaintBuffer'
+
+const SCRATCH_OPTS = {
+  alpha: 255,
+  blendFn: sourceOverPerfect,
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0,
+}
+
+export function commitColorPaintBuffer(
+  accumulator: PixelAccumulator,
+  paintBuffer: ColorPaintBuffer,
+  alpha = 255,
+  blendFn = sourceOverPerfect,
+  blendPixelDataFn = blendPixelData,
+) {
+  const config = accumulator.config
+  const tileShift = config.tileShift
+  const lookup = paintBuffer.lookup
+
+  SCRATCH_OPTS.alpha = alpha
+  SCRATCH_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
+
+      SCRATCH_OPTS.x = dx
+      SCRATCH_OPTS.y = dy
+      SCRATCH_OPTS.w = tile.w
+      SCRATCH_OPTS.h = tile.h
+
+      didChange(
+        blendPixelDataFn(
+          config.target,
+          tile,
+          SCRATCH_OPTS,
+        ),
+      )
+    }
+  }
+
+  paintBuffer.clear()
+}
+

package/src/Paint/Commit/commitMaskPaintBuffer.ts

@@ -0,0 +1,78 @@
+import { type Color32 } from '../../_types'
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { PixelAccumulator } from '../../History/PixelAccumulator'
+import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
+import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
+import type { AlphaMaskPaintBuffer } from '../AlphaMaskPaintBuffer'
+import type { BinaryMaskPaintBuffer } from '../BinaryMaskPaintBuffer'
+
+const SCRATCH_OPTS = {
+  alpha: 255,
+  blendFn: sourceOverPerfect,
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0,
+}
+
+export function commitMaskPaintBuffer(
+  accumulator: PixelAccumulator,
+  paintBuffer: BinaryMaskPaintBuffer,
+  color: Color32,
+  alpha: number | undefined,
+  blendFn: typeof sourceOverPerfect | undefined,
+  blendColorPixelDataMaskFn: typeof blendColorPixelDataBinaryMask,
+): void
+
+export function commitMaskPaintBuffer(
+  accumulator: PixelAccumulator,
+  paintBuffer: AlphaMaskPaintBuffer,
+  color: Color32,
+  alpha: number | undefined,
+  blendFn: typeof sourceOverPerfect | undefined,
+  blendColorPixelDataMaskFn: typeof blendColorPixelDataAlphaMask,
+): void
+
+export function commitMaskPaintBuffer(
+  accumulator: PixelAccumulator,
+  paintBuffer: any,
+  color: Color32,
+  alpha = 255,
+  blendFn = sourceOverPerfect,
+  blendColorPixelDataMaskFn: any,
+) {
+  const config = accumulator.config
+  const tileShift = config.tileShift
+  const lookup = paintBuffer.lookup
+
+  SCRATCH_OPTS.alpha = alpha
+  SCRATCH_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
+
+      SCRATCH_OPTS.x = dx
+      SCRATCH_OPTS.y = dy
+      SCRATCH_OPTS.w = tile.w
+      SCRATCH_OPTS.h = tile.h
+
+      didChange(
+        blendColorPixelDataMaskFn(
+          config.target,
+          color,
+          tile,
+          SCRATCH_OPTS,
+        ),
+      )
+    }
+  }
+
+  paintBuffer.clear()
+}
+

package/src/Paint/Render/AlphaMaskPaintBufferCanvasRenderer.ts

@@ -0,0 +1,78 @@
+import type { Color32 } from '../../_types'
+import type { CanvasObjectFactory } from '../../Canvas/_canvas-types'
+import { DEFAULT_CANVAS_FACTORY } from '../../Internal/_constants'
+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,
+  canvasFactory: CanvasObjectFactory<any> = DEFAULT_CANVAS_FACTORY,
+) {
+  const config = paintBuffer.config
+  const tileSize = config.tileSize
+  const tileShift = config.tileShift
+  const tileArea = config.tileArea
+  const lookup = paintBuffer.lookup
+
+  const canvas = canvasFactory(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 | OffscreenCanvasRenderingContext2D,
+    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'
+  }
+}