pixel-data-js 0.26.0 → 0.28.0

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

package/src/Paint/PaintCursorRenderer.ts

@@ -0,0 +1,117 @@
+import { type Color32 } from '../_types'
+import type { CanvasContext, CanvasObjectFactory } from '../Canvas/_canvas-types'
+import { packColor } from '../color'
+import { CANVAS_CTX_FAILED } from '../Internal/_errors'
+import { _macro_paintRectCenterOffset } from '../Internal/macros'
+import { type BinaryMask, MaskType } from '../Mask/_mask-types'
+import { makeBinaryMaskFromAlphaMask } from '../Mask/BinaryMask/makeBinaryMaskFromAlphaMask'
+import { makeBinaryMaskOutline } from '../Mask/BinaryMask/makeBinaryMaskOutline'
+import { makeCircleBinaryMaskOutline } from '../Mask/BinaryMask/makeCircleBinaryMaskOutline'
+import { makeRectBinaryMaskOutline } from '../Mask/BinaryMask/makeRectBinaryMaskOutline'
+import { fillPixelDataBinaryMask } from '../PixelData/fillPixelDataBinaryMask'
+import { makeReusablePixelData } from '../PixelData/ReusablePixelData'
+import type { Rect } from '../Rect/_rect-types'
+import { type PaintMask, PaintMaskOutline } from './_paint-types'
+
+export type PaintCursorRenderer = ReturnType<typeof makePaintCursorRenderer>
+
+export function makePaintCursorRenderer<T extends HTMLCanvasElement | OffscreenCanvas>(
+  factory: CanvasObjectFactory<T> = (w, h) => new OffscreenCanvas(w, h) as T,
+) {
+  const canvas = factory(1, 1)
+  const ctx = canvas.getContext('2d')! as CanvasContext<T>
+  if (!ctx) throw new Error(CANVAS_CTX_FAILED)
+  ctx.imageSmoothingEnabled = false
+
+  const getPixelData = makeReusablePixelData()
+
+  let _color = packColor(0, 255, 255, 255)
+  let _scale = 1
+
+  let currentMask: PaintMask = {
+    type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.RECT,
+    w: 1,
+    h: 1,
+    centerOffsetX: _macro_paintRectCenterOffset(10),
+    centerOffsetY: _macro_paintRectCenterOffset(10),
+  } as PaintMask
+
+  let outline: BinaryMask
+
+  function update(paintMask?: PaintMask, scale?: number, color?: Color32, alphaThreshold = 127) {
+    currentMask = paintMask ?? currentMask
+
+    _scale = scale ?? _scale
+    _color = color ?? _color
+
+    canvas.width = currentMask.w * _scale + 2 * _scale
+    canvas.height = currentMask.h * _scale + 2 * _scale
+
+    if (currentMask.type === MaskType.BINARY) {
+      if (currentMask.outlineType === PaintMaskOutline.CIRCLE) {
+        outline = makeCircleBinaryMaskOutline(currentMask.w, _scale)
+      } else if (currentMask.outlineType === PaintMaskOutline.RECT) {
+        outline = makeRectBinaryMaskOutline(currentMask.w, currentMask.h, _scale)
+      } else if (currentMask.outlineType === PaintMaskOutline.MASKED) {
+        outline = makeBinaryMaskOutline(currentMask, _scale)
+      }
+    } else if (currentMask.type === MaskType.ALPHA) {
+      const mask = makeBinaryMaskFromAlphaMask(currentMask, alphaThreshold)
+      outline = makeBinaryMaskOutline(mask, _scale)
+    }
+
+    const pixelData = getPixelData(outline.w, outline.h)
+    fillPixelDataBinaryMask(pixelData, _color, outline)
+    ctx.putImageData(pixelData.imageData, 0, 0)
+  }
+
+  const boundsScratch = { x: 0, y: 0, w: 0, h: 0 }
+
+  function getBounds(centerX: number, centerY: number): Rect {
+    boundsScratch.x = centerX + currentMask.centerOffsetX
+    boundsScratch.y = centerY + currentMask.centerOffsetY
+    boundsScratch.w = currentMask.w
+    boundsScratch.h = currentMask.h
+
+    return boundsScratch
+  }
+
+  const boundsScaledScratch = { x: 0, y: 0, w: 0, h: 0 }
+
+  function getOutlineBoundsScaled(centerX: number, centerY: number): Rect {
+    boundsScaledScratch.x = centerX * _scale + currentMask.centerOffsetX * _scale - 1
+    boundsScaledScratch.y = centerY * _scale + currentMask.centerOffsetY * _scale - 1
+    boundsScaledScratch.w = currentMask.w * _scale
+    boundsScaledScratch.h = currentMask.h * _scale
+
+    return boundsScaledScratch
+  }
+
+  function draw(
+    drawCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    centerX: number,
+    centerY: number,
+  ) {
+    const dx = centerX * _scale + currentMask.centerOffsetX * _scale - 1
+    const dy = centerY * _scale + currentMask.centerOffsetY * _scale - 1
+
+    drawCtx.drawImage(canvas, Math.floor(dx), Math.floor(dy))
+  }
+
+  function getSettings() {
+    return {
+      color: _color,
+      scale: _scale,
+      currentMask,
+    }
+  }
+
+  return {
+    update,
+    getBounds,
+    getBoundsScaled: getOutlineBoundsScaled,
+    draw,
+    getSettings,
+  }
+}

package/src/Paint/_paint-types.ts

@@ -0,0 +1,22 @@
+import type { AlphaMask, BinaryMask } from '../Mask/_mask-types'
+
+export enum PaintMaskOutline {
+  MASKED,
+  CIRCLE,
+  RECT,
+}
+
+interface BasePaintMask<T extends PaintMaskOutline = PaintMaskOutline> {
+  readonly outlineType: T
+  readonly centerOffsetX: number
+  readonly centerOffsetY: number
+}
+
+export interface PaintAlphaMask<T extends PaintMaskOutline = PaintMaskOutline> extends BasePaintMask<T>, AlphaMask {
+}
+
+export interface PaintBinaryMask<T extends PaintMaskOutline = PaintMaskOutline> extends BasePaintMask<T>, BinaryMask {
+}
+
+export type PaintMask = PaintAlphaMask<any> | PaintBinaryMask<any>
+

package/src/Paint/eachTileInBounds.ts

@@ -0,0 +1,45 @@
+import type { PixelEngineConfig } from '../History/PixelEngineConfig'
+import type { Rect } from '../Rect/_rect-types'
+import type { Tile } from '../Tile/_tile-types'
+import type { TilePool } from '../Tile/TilePool'
+
+export function eachTileInBounds<T extends Tile>(
+  config: PixelEngineConfig,
+  lookup: (T | undefined)[],
+  tilePool: TilePool<T>,
+  bounds: Rect,
+  callback: (tile: T, bX: number, bY: number, bW: number, bH: number) => void,
+): void {
+  const { tileShift, targetColumns, targetRows, tileSize } = 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
+
+  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)
+    }
+  }
+}

package/src/Paint/makeCirclePaintMask.ts

@@ -0,0 +1,74 @@
+import { _macro_paintCircleCenterOffset } from '../Internal/macros'
+import { MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, type PaintBinaryMask, PaintMaskOutline } from './_paint-types'
+
+export function makeCirclePaintAlphaMask(size: number, fallOff: (d: number) => number = (d) => d): PaintAlphaMask {
+  const area = size * size
+  const data = new Uint8Array(area)
+  const radius = size / 2
+  const invR = 1 / radius
+
+  const centerOffset = _macro_paintCircleCenterOffset(radius)
+
+  for (let y = 0; y < size; y++) {
+    const rowOffset = y * size
+    const dy = y - radius + 0.5
+    const dy2 = dy * dy
+
+    for (let x = 0; x < size; x++) {
+      const dx = x - radius + 0.5
+      const distSqr = dx * dx + dy2
+
+      if (distSqr <= (radius * radius)) {
+        const dist = Math.sqrt(distSqr) * invR
+
+        // Pass 1.0 at center, 0.0 at edge
+        const strength = fallOff(1 - dist)
+        if (strength > 0) {
+          const intensity = (strength * 255) | 0
+          data[rowOffset + x] = Math.max(0, Math.min(255, intensity))
+        }
+      }
+    }
+  }
+
+  return {
+    type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.CIRCLE,
+    data,
+    w: size,
+    h: size,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
+  }
+}
+
+export function makeCirclePaintBinaryMask(size: number): PaintBinaryMask {
+  const area = size * size
+  const data = new Uint8Array(area)
+  const radius = size / 2
+  const r2 = radius * radius
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const dx = x - radius + 0.5
+      const dy = y - radius + 0.5
+      const distSqr = dx * dx + dy * dy
+      if (distSqr <= r2) {
+        data[y * size + x] = 1
+      }
+    }
+  }
+
+  const centerOffset = _macro_paintCircleCenterOffset(radius)
+
+  return {
+    type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.CIRCLE,
+    w: size,
+    h: size,
+    data,
+    centerOffsetX: centerOffset,
+    centerOffsetY: centerOffset,
+  }
+}

package/src/Paint/makePaintMask.ts

@@ -1,11 +1,13 @@
-import { type AlphaMask, type BinaryMask, MaskType, type PaintAlphaMask, type PaintBinaryMask } from '../_types'
-import { _macro_halfAndFloor } from '../Internal/helpers'
+import { _macro_halfAndFloor } from '../Internal/macros'
+import { type AlphaMask, type BinaryMask, MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, type PaintBinaryMask, PaintMaskOutline } from './_paint-types'
 
 export function makePaintBinaryMask(
   mask: BinaryMask,
 ): PaintBinaryMask {
   return {
     type: MaskType.BINARY,
+    outlineType: PaintMaskOutline.MASKED,
     data: mask.data,
     w: mask.w,
     h: mask.h,
@@ -19,6 +21,7 @@ export function makePaintAlphaMask(
 ): PaintAlphaMask {
   return {
     type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.MASKED,
     data: mask.data,
     w: mask.w,
     h: mask.h,

package/src/Paint/makeRectFalloffPaintAlphaMask.ts

@@ -1,5 +1,6 @@
-import { MaskType, type PaintAlphaMask } from '../_types'
-import { _macro_halfAndFloor } from '../Internal/helpers'
+import { _macro_halfAndFloor } from '../Internal/macros'
+import { MaskType } from '../Mask/_mask-types'
+import { type PaintAlphaMask, PaintMaskOutline } from './_paint-types'
 
 export function makeRectFalloffPaintAlphaMask(
   width: number,
@@ -38,6 +39,7 @@ export function makeRectFalloffPaintAlphaMask(
 
   return {
     type: MaskType.ALPHA,
+    outlineType: PaintMaskOutline.RECT,
     data: data,
     w: width,
     h: height,