pixel-data-js 0.23.1 → 0.24.0

package/src/PixelTile/PaintBuffer.ts

@@ -0,0 +1,122 @@
+import type { AlphaMaskRect, BinaryMaskRect, Color32, Rect } from '../_types'
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import type { PixelTile } from './PixelTile'
+import type { PixelTilePool } from './PixelTilePool'
+
+export class PaintBuffer {
+  readonly lookup: (PixelTile | undefined)[]
+
+  constructor(
+    readonly config: PixelEngineConfig,
+    readonly tilePool: PixelTilePool,
+  ) {
+    this.lookup = []
+  }
+
+  private processMaskTiles(
+    mask: Rect,
+    callback: (tile: PixelTile, bX: number, bY: number, bW: number, bH: number, mX: number, mY: number) => void,
+  ): void {
+    const { tileShift, targetColumns } = this.config
+
+    const x1 = mask.x >> tileShift
+    const y1 = mask.y >> tileShift
+    const x2 = (mask.x + mask.w - 1) >> tileShift
+    const y2 = (mask.y + mask.h - 1) >> tileShift
+
+    for (let ty = y1; ty <= y2; ty++) {
+      const tileRowIndex = ty * targetColumns
+      const tileTop = ty << tileShift
+
+      for (let tx = x1; tx <= x2; tx++) {
+        const id = tileRowIndex + tx
+        let tile = this.lookup[id]
+
+        if (!tile) {
+          tile = this.tilePool.getTile(id, tx, ty)
+          this.lookup[id] = tile
+        }
+
+        const tileLeft = tx << tileShift
+
+        const startX = Math.max(mask.x, tileLeft)
+        const endX = Math.min(mask.x + mask.w, tileLeft + this.config.tileSize)
+        const startY = Math.max(mask.y, tileTop)
+        const endY = Math.min(mask.y + mask.h, tileTop + this.config.tileSize)
+
+        // Passing 7 primitive arguments to avoid object allocation
+        callback(
+          tile,
+          startX,
+          startY,
+          endX - startX,
+          endY - startY,
+          startX - mask.x,
+          startY - mask.y,
+        )
+      }
+    }
+  }
+
+  writeColorBinaryMaskRect(color: Color32, mask: BinaryMaskRect): void {
+    const { tileShift, tileMask } = this.config
+    const maskData = mask.data
+    const maskW = mask.w
+
+    this.processMaskTiles(mask, (tile, bX, bY, bW, bH, mX, mY) => {
+      const data32 = tile.data32
+      const startTileX = bX & tileMask
+
+      for (let i = 0; i < bH; i++) {
+        const tileY = (bY + i) & tileMask
+        const maskY = mY + i
+        const tileRowOffset = tileY << tileShift
+        const maskRowOffset = maskY * maskW
+
+        const destStart = tileRowOffset + startTileX
+        const maskStart = maskRowOffset + mX
+
+        for (let j = 0; j < bW; j++) {
+          if (maskData[maskStart + j]) {
+            data32[destStart + j] = color
+          }
+        }
+      }
+    })
+  }
+
+  writeColorAlphaMaskRect(color: Color32, mask: AlphaMaskRect): void {
+    const { tileShift, tileMask } = this.config
+    const maskData = mask.data
+    const maskW = mask.w
+    const colorRGB = color & 0x00ffffff
+    const colorA = color >>> 24
+
+    this.processMaskTiles(mask, (tile, bX, bY, bW, bH, mX, mY) => {
+      const data32 = tile.data32
+      const startTileX = bX & tileMask
+
+      for (let i = 0; i < bH; i++) {
+        const tileY = (bY + i) & tileMask
+        const maskY = mY + i
+        const tileRowOffset = tileY << tileShift
+        const maskRowOffset = maskY * maskW
+
+        const destStart = tileRowOffset + startTileX
+        const maskStart = maskRowOffset + mX
+
+        for (let j = 0; j < bW; j++) {
+          const maskA = maskData[maskStart + j]
+          if (maskA > 0) {
+            const finalA = (colorA * maskA + 128) >> 8
+            data32[destStart + j] = (colorRGB | (finalA << 24)) >>> 0 as Color32
+          }
+        }
+      }
+    })
+  }
+
+  clear(): void {
+    this.tilePool.releaseTiles(this.lookup)
+  }
+}

package/src/PixelTile/PaintBufferRenderer.ts

@@ -0,0 +1,40 @@
+import { CANVAS_CTX_FAILED } from '../Canvas/_constants'
+import type { PaintBuffer } from './PaintBuffer'
+
+export type PaintBufferRenderer = ReturnType<typeof makePaintBufferRenderer>
+
+/**
+ *
+ * @param paintBuffer
+ * @param offscreenCanvasClass - @internal
+ */
+export function makePaintBufferRenderer(
+  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(
+    target: CanvasRenderingContext2D,
+  ): void {
+    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)
+
+        target.drawImage(canvas, dx, dy)
+      }
+    }
+  }
+}

package/src/PixelTile/PixelTile.ts

@@ -0,0 +1,21 @@
+import type { IPixelData } from '../_types'
+
+export class PixelTile implements IPixelData {
+  readonly data32: Uint32Array
+  readonly width: number
+  readonly height: number
+  readonly imageData: ImageData
+
+  constructor(
+    public id: number,
+    public tx: number,
+    public ty: number,
+    tileSize: number,
+    tileArea: number,
+  ) {
+    this.width = this.height = tileSize
+    this.data32 = new Uint32Array(tileArea)
+    const data8 = new Uint8ClampedArray(this.data32.buffer) as Uint8ClampedArray<ArrayBuffer>
+    this.imageData = new ImageData(data8, tileSize, tileSize)
+  }
+}

package/src/PixelTile/PixelTilePool.ts

@@ -0,0 +1,63 @@
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+
+import { PixelTile } from './PixelTile'
+
+export class PixelTilePool {
+  public pool: PixelTile[]
+
+  private tileSize: number
+  private tileArea: number
+
+  constructor(
+    config: PixelEngineConfig,
+  ) {
+    this.pool = []
+    this.tileSize = config.tileSize
+    this.tileArea = config.tileArea
+  }
+
+  getTile(
+    id: number,
+    tx: number,
+    ty: number,
+  ): PixelTile {
+    let tile = this.pool.pop()
+
+    if (tile) {
+      tile.id = id
+      tile.tx = tx
+      tile.ty = ty
+
+      // Wipe dirty memory from previous uses before handing it out
+      tile.data32.fill(0)
+
+      return tile
+    }
+
+    return new PixelTile(
+      id,
+      tx,
+      ty,
+      this.tileSize,
+      this.tileArea,
+    )
+  }
+
+  releaseTile(tile: PixelTile): void {
+    this.pool.push(tile)
+  }
+
+  releaseTiles(tiles: (PixelTile | undefined)[]): void {
+    let length = tiles.length
+
+    for (let i = 0; i < length; i++) {
+      let tile = tiles[i]
+
+      if (tile) {
+        this.pool.push(tile)
+      }
+    }
+
+    tiles.length = 0
+  }
+}

package/src/_types.ts

@@ -80,19 +80,19 @@ export interface AlphaMask extends Mask {
   readonly type: MaskType.ALPHA
 }
 
-interface CircleBrush {
+interface BaseCircleMask {
   readonly size: number
   readonly radius: number
   readonly minOffset: number
 }
 
-export interface CircleBrushAlphaMask extends CircleBrush, AlphaMask {
+export interface CircleAlphaMask extends BaseCircleMask, AlphaMask {
 }
 
-export interface CircleBrushBinaryMask extends CircleBrush, BinaryMask {
+export interface CircleBinaryMask extends BaseCircleMask, BinaryMask {
 }
 
-export type CircleBrushMask = CircleBrushAlphaMask | CircleBrushBinaryMask
+export type CircleMask = CircleAlphaMask | CircleBinaryMask
 
 /**
  * Configuration for pixel manipulation operations.
@@ -217,6 +217,11 @@ export type BinaryMaskRect = Rect & {
   data: Uint8Array
 }
 
+export type AlphaMaskRect = Rect & {
+  type: MaskType.ALPHA
+  data: Uint8Array
+}
+
 export type NullableBinaryMaskRect = Rect & ({
   type: MaskType.BINARY
   data: Uint8Array
@@ -225,7 +230,6 @@ export type NullableBinaryMaskRect = Rect & ({
   data?: null
 })
 
-
 export type NullableMaskRect = Rect & ({
   type: MaskType
   data: Uint8Array
@@ -234,10 +238,6 @@ export type NullableMaskRect = Rect & ({
   data?: null
 })
 
-export type AlphaMaskRect = Rect & {
-  mask: AlphaMask
-}
-
 export type HistoryMutator<T extends {}, D extends {}> = (writer: PixelWriter<any>, deps?: Partial<D>) => T
 
 export interface IPixelData {

package/src/index.ts

@@ -3,6 +3,7 @@ export * from './_types'
 export * from './color'
 
 export * from './Algorithm/floodFillSelection'
+export * from './Algorithm/forEachLinePoint'
 
 export * from './BlendModes/blend-modes-fast'
 export * from './BlendModes/blend-modes-perfect'
@@ -11,6 +12,7 @@ export * from './BlendModes/BlendModeRegistry'
 export * from './BlendModes/toBlendModeIndexAndName'
 
 export * from './Canvas/_constants'
+export * from './Canvas/CanvasFrameRenderer'
 export * from './Canvas/PixelCanvas'
 export * from './Canvas/ReusableCanvas'
 
@@ -18,6 +20,7 @@ export * from './Clipboard/getImageDataFromClipboard'
 export * from './Clipboard/writeImageDataToClipboard'
 export * from './Clipboard/writeImgBlobToClipboard'
 
+export * from './History/HistoryAction'
 export * from './History/HistoryManager'
 export * from './History/PixelAccumulator'
 export * from './History/PixelEngineConfig'
@@ -28,8 +31,8 @@ export * from './History/PixelWriter'
 export * from './History/PixelMutator/mutatorApplyAlphaMask'
 export * from './History/PixelMutator/mutatorApplyBinaryMask'
 
-export * from './History/PixelMutator/mutatorApplyCircleBrush'
 export * from './History/PixelMutator/mutatorApplyCircleBrushStroke'
+export * from './History/PixelMutator/mutatorBlendColorCircleMask'
 
 export * from './History/PixelMutator/mutatorApplyCirclePencil'
 export * from './History/PixelMutator/mutatorApplyCirclePencilStroke'
@@ -80,8 +83,8 @@ export * from './Input/getSupportedRasterFormats'
 export * from './Mask/AlphaMask'
 export * from './Mask/BinaryMask'
 
-export * from './Mask/CircleBrushAlphaMask'
-export * from './Mask/CircleBrushBinaryMask'
+export * from './Mask/CircleAlphaMask'
+export * from './Mask/CircleBinaryMask'
 
 export * from './Mask/applyBinaryMaskToAlphaMask'
 export * from './Mask/copyMask'
@@ -92,13 +95,13 @@ export * from './Mask/mergeAlphaMasks'
 export * from './Mask/mergeBinaryMasks'
 export * from './Mask/setMaskData'
 
-export { subtractBinaryMaskRects } from './MaskRect/subtractBinaryMaskRects'
 export * from './MaskRect/merge2BinaryMaskRects'
 export * from './MaskRect/mergeBinaryMaskRects'
+export * from './MaskRect/subtractBinaryMaskRects'
 
 export * from './PixelData/applyAlphaMaskToPixelData'
 export * from './PixelData/applyBinaryMaskToPixelData'
-export * from './PixelData/applyCircleBrushToPixelData'
+export * from './PixelData/blendColorPixelDataCircleMask'
 export * from './PixelData/PixelData'
 
 export * from './PixelData/applyRectBrushToPixelData'
@@ -109,11 +112,14 @@ export * from './PixelData/blendPixelData'
 export * from './PixelData/blendPixelDataAlphaMask'
 export * from './PixelData/blendPixelDataBinaryMask'
 
+export * from './PixelData/blendPixel'
+export * from './PixelData/blendPixelDataPaintBuffer'
 export * from './PixelData/clearPixelData'
 export * from './PixelData/extractPixelData'
 export * from './PixelData/extractPixelDataBuffer'
 export * from './PixelData/fillPixelData'
 export * from './PixelData/fillPixelDataBinaryMask'
+export * from './PixelData/fillPixelDataFast'
 export * from './PixelData/invertPixelData'
 export * from './PixelData/PixelBuffer32'
 export * from './PixelData/pixelDataToAlphaMask'
@@ -129,4 +135,8 @@ export * from './Rect/getRectBrushOrPencilStrokeBounds'
 export * from './Rect/getRectsBounds'
 export * from './Rect/trimRectBounds'
 
-export * from './Algorithm/forEachLinePoint'
+export * from './PixelTile/PaintBuffer'
+export * from './PixelTile/PaintBufferRenderer'
+export * from './PixelTile/PixelTile'
+export * from './PixelTile/PixelTilePool'
+

package/src/History/PixelMutator/mutatorApplyCircleBrush.ts

@@ -1,78 +0,0 @@
-import type {
-  BlendColor32,
-  CircleBrushAlphaMask,
-  Color32,
-  ColorBlendMaskOptions,
-  HistoryMutator,
-  Rect,
-} from '../../_types'
-import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
-import { applyCircleBrushToPixelData } from '../../PixelData/applyCircleBrushToPixelData'
-import { getCircleBrushOrPencilBounds } from '../../Rect/getCircleBrushOrPencilBounds'
-import { PixelWriter } from '../PixelWriter'
-
-const defaults = {
-  applyCircleBrushToPixelData,
-  getCircleBrushOrPencilBounds,
-}
-
-type Deps = Partial<typeof defaults>
-
-/**
- * @param deps - @hidden
- */
-export const mutatorApplyCircleBrush = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
-  const {
-    applyCircleBrushToPixelData = defaults.applyCircleBrushToPixelData,
-    getCircleBrushOrPencilBounds = defaults.getCircleBrushOrPencilBounds,
-
-  } = deps
-
-  const boundsOut: Rect = { x: 0, y: 0, w: 0, h: 0 }
-
-  const blendColorPixelOptions: ColorBlendMaskOptions = {
-    alpha: 255,
-    blendFn: sourceOverPerfect,
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0,
-  }
-
-  return {
-    applyCircleBrush(
-      color: Color32,
-      centerX: number,
-      centerY: number,
-      brush: CircleBrushAlphaMask,
-      alpha = 255,
-      blendFn?: BlendColor32,
-    ) {
-
-      const bounds = getCircleBrushOrPencilBounds(
-        centerX,
-        centerY,
-        brush.size,
-        writer.target.width,
-        writer.target.height,
-        boundsOut,
-      )
-
-      const { x, y, w, h } = bounds
-
-      writer.accumulator.storeRegionBeforeState(x, y, w, h)
-
-      applyCircleBrushToPixelData(
-        writer.target,
-        color,
-        centerX,
-        centerY,
-        brush,
-        alpha,
-        blendFn,
-        blendColorPixelOptions,
-        bounds,
-      )
-    },
-  }
-}) satisfies HistoryMutator<any, Deps>