pixel-data-js 0.24.0 → 0.25.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.24.0",
+  "version": "0.25.2",
   "packageManager": "pnpm@10.30.0",
   "description": "JS Pixel and ImageData operations",
   "author": {

package/src/Algorithm/floodFillSelection.ts

@@ -2,7 +2,7 @@ import { type BinaryMaskRect, type Color32, type ImageDataLike, MaskType, type R
 import { colorDistance } from '../color'
 import { extractImageDataBuffer } from '../ImageData/extractImageDataBuffer'
 import type { PixelData } from '../PixelData/PixelData'
-import { trimRectBounds } from '../Rect/trimRectBounds'
+import { trimMaskRectBounds } from '../Rect/trimMaskRectBounds'
 
 export type FloodFillImageDataOptions = {
   contiguous?: boolean
@@ -205,7 +205,7 @@ export function floodFillSelection(
     }
   }
 
-  trimRectBounds(
+  trimMaskRectBounds(
     selectionRect,
     { x: 0, y: 0, w: width, h: height },
   )

package/src/Canvas/canvas-blend-modes.ts

@@ -0,0 +1,28 @@
+import { BaseBlendMode } from '../BlendModes/blend-modes'
+
+export const CANVAS_COMPOSITE_MAP = {
+  [BaseBlendMode.overwrite]: 'copy',
+  [BaseBlendMode.sourceOver]: 'source-over',
+  [BaseBlendMode.darken]: 'darken',
+  [BaseBlendMode.multiply]: 'multiply',
+  [BaseBlendMode.colorBurn]: 'color-burn',
+  [BaseBlendMode.lighten]: 'lighten',
+  [BaseBlendMode.screen]: 'screen',
+  [BaseBlendMode.colorDodge]: 'color-dodge',
+  [BaseBlendMode.linearDodge]: 'lighter',
+  [BaseBlendMode.overlay]: 'overlay',
+  [BaseBlendMode.softLight]: 'soft-light',
+  [BaseBlendMode.hardLight]: 'hard-light',
+  [BaseBlendMode.difference]: 'difference',
+  [BaseBlendMode.exclusion]: 'exclusion',
+} as const
+
+export type CanvasBlendModeIndex = keyof typeof CANVAS_COMPOSITE_MAP
+export type CanvasCompositeOperation = typeof CANVAS_COMPOSITE_MAP[CanvasBlendModeIndex]
+
+/**
+ * example
+ * function getCanvasCompositeOperation(mode: CanvasBlendModeIndex): CanvasCompositeOperation {
+ *   return CANVAS_COMPOSITE_MAP[mode]
+ * }
+ */

package/src/History/PixelAccumulator.ts

@@ -27,11 +27,11 @@ export class PixelAccumulator {
    * @param y pixel y coordinate
    */
   storePixelBeforeState(x: number, y: number): DidChangeFn {
-    let shift = this.config.tileShift
-    let columns = this.config.targetColumns
-    let tx = x >> shift
-    let ty = y >> shift
-    let id = ty * columns + tx
+    const shift = this.config.tileShift
+    const columns = this.config.targetColumns
+    const tx = x >> shift
+    const ty = y >> shift
+    const id = ty * columns + tx
 
     let tile = this.lookup[id]
     let added = false
@@ -67,19 +67,19 @@ export class PixelAccumulator {
     w: number,
     h: number,
   ): DidChangeFn {
-    let shift = this.config.tileShift
-    let columns = this.config.targetColumns
+    const shift = this.config.tileShift
+    const columns = this.config.targetColumns
 
-    let startX = x >> shift
-    let startY = y >> shift
-    let endX = (x + w - 1) >> shift
-    let endY = (y + h - 1) >> shift
+    const startX = x >> shift
+    const startY = y >> shift
+    const endX = (x + w - 1) >> shift
+    const endY = (y + h - 1) >> shift
 
-    let startIndex = this.beforeTiles.length
+    const startIndex = this.beforeTiles.length
 
     for (let ty = startY; ty <= endY; ty++) {
       for (let tx = startX; tx <= endX; tx++) {
-        let id = ty * columns + tx
+        const id = ty * columns + tx
         let tile = this.lookup[id]
 
         if (!tile) {
@@ -94,7 +94,7 @@ export class PixelAccumulator {
 
     return (didChange: boolean) => {
       if (!didChange) {
-        let length = this.beforeTiles.length
+        const length = this.beforeTiles.length
 
         for (let i = startIndex; i < length; i++) {
           let t = this.beforeTiles[i]
@@ -111,15 +111,38 @@ export class PixelAccumulator {
     }
   }
 
+  storeTileBeforeState(id: number, tx: number, ty: number): DidChangeFn {
+    let tile = this.lookup[id]
+    let added = false
+
+    if (!tile) {
+      tile = this.tilePool.getTile(id, tx, ty)
+
+      this.extractState(tile)
+      this.lookup[id] = tile
+      this.beforeTiles.push(tile)
+      added = true
+    }
+
+    return (didChange: boolean) => {
+      if (!didChange && added) {
+        this.beforeTiles.pop()
+        this.lookup[id] = undefined
+        this.tilePool.releaseTile(tile!)
+      }
+      return didChange
+    }
+  }
+
   extractState(tile: PixelTile) {
-    let target = this.config.target
-    let TILE_SIZE = this.config.tileSize
-    let dst = tile.data32
-    let src = target.data32
-    let startX = tile.tx * TILE_SIZE
-    let startY = tile.ty * TILE_SIZE
-    let targetWidth = target.width
-    let targetHeight = target.height
+    const target = this.config.target
+    const TILE_SIZE = this.config.tileSize
+    const dst = tile.data32
+    const src = target.data32
+    const startX = tile.tx * TILE_SIZE
+    const startY = tile.ty * TILE_SIZE
+    const targetWidth = target.width
+    const targetHeight = target.height
 
     // If the tile is completely outside the canvas, zero it out.
     if (startX >= targetWidth || startX + TILE_SIZE <= 0 || startY >= targetHeight || startY + TILE_SIZE <= 0) {
@@ -160,8 +183,8 @@ export class PixelAccumulator {
   }
 
   extractPatch(): PixelPatchTiles {
-    let afterTiles: PixelTile[] = []
-    let length = this.beforeTiles.length
+    const afterTiles: PixelTile[] = []
+    const length = this.beforeTiles.length
 
     for (let i = 0; i < length; i++) {
       let beforeTile = this.beforeTiles[i]
@@ -174,7 +197,7 @@ export class PixelAccumulator {
       }
     }
 
-    let beforeTiles = this.beforeTiles
+    const beforeTiles = this.beforeTiles
     this.beforeTiles = []
     this.lookup.length = 0
 
@@ -184,10 +207,10 @@ export class PixelAccumulator {
     }
   }
 
-  rollback() {
-    let target = this.config.target
-    let tileSize = this.config.tileSize
-    let length = this.beforeTiles.length
+  rollbackAfterError() {
+    const target = this.config.target
+    const tileSize = this.config.tileSize
+    const length = this.beforeTiles.length
 
     applyPatchTiles(target, this.beforeTiles, tileSize)
 

package/src/History/PixelEngineConfig.ts

@@ -1,4 +1,4 @@
-import type { IPixelData } from '../_types'
+import type { PixelData } from '../PixelData/PixelData'
 
 export class PixelEngineConfig {
   readonly tileSize: number
@@ -7,10 +7,11 @@ export class PixelEngineConfig {
   readonly tileShift: number
   readonly tileMask: number
   readonly tileArea: number
-  readonly target!: IPixelData
+  readonly target!: PixelData
   readonly targetColumns: number = 0
+  readonly targetRows: number = 0
 
-  constructor(tileSize: number, target: IPixelData) {
+  constructor(tileSize: number, target: PixelData) {
     // Ensure it's a power of 2 to guarantee bitwise math works
     if ((tileSize & (tileSize - 1)) !== 0) {
       throw new Error('tileSize must be a power of 2')
@@ -20,11 +21,8 @@ export class PixelEngineConfig {
     this.tileShift = 31 - Math.clz32(tileSize)
     this.tileMask = tileSize - 1
     this.tileArea = tileSize * tileSize
-    this.setTarget(target)
-  }
-
-  setTarget(target: IPixelData) {
-    ;(this as any).target = target
-    ;(this as any).targetColumns = (target.width + this.tileMask) >> this.tileShift
+    this.target = target
+    this.targetColumns = (target.width + this.tileMask) >> this.tileShift
+    this.targetRows = (target.height + this.tileMask) >> this.tileShift
   }
 }

package/src/History/PixelMutator/mutatorBlendPaintMask.ts

@@ -0,0 +1,60 @@
+import { type Color32, type HistoryMutator, MaskType, type PaintMask } from '../../_types'
+import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
+import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
+import { PixelWriter } from '../PixelWriter'
+
+const defaults = {
+  blendColorPixelDataAlphaMask,
+  blendColorPixelDataBinaryMask,
+}
+type Deps = Partial<typeof defaults>
+
+/**
+ * @param deps - @hidden
+ */
+export const mutatorBlendPaintMask = ((writer: PixelWriter<any>, deps: Partial<Deps> = defaults) => {
+  const {
+    blendColorPixelDataBinaryMask = defaults.blendColorPixelDataBinaryMask,
+    blendColorPixelDataAlphaMask = defaults.blendColorPixelDataAlphaMask,
+  } = deps
+
+  const OPTS = {
+    x: 0,
+    y: 0,
+    blendFn: sourceOverPerfect,
+    alpha: 255,
+  }
+
+  return {
+    blendColorPaintMask(
+      color: Color32,
+      mask: PaintMask,
+      x: number,
+      y: number,
+      alpha = 255,
+      blendFn = sourceOverPerfect,
+    ): boolean {
+      const tx = x + mask.centerOffsetX
+      const ty = y + mask.centerOffsetY
+
+      const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h)
+
+      OPTS.x = tx
+      OPTS.y = ty
+      OPTS.alpha = alpha
+      OPTS.blendFn = blendFn
+
+      if (mask.type === MaskType.BINARY) {
+        return didChange(
+          blendColorPixelDataBinaryMask(writer.config.target, color, mask, OPTS),
+        )
+      } else {
+        return didChange(
+          blendColorPixelDataAlphaMask(writer.config.target, color, mask, OPTS),
+        )
+      }
+    },
+  }
+}) satisfies HistoryMutator<any, Deps>
+

package/src/History/PixelMutator/mutatorBlendPixelData.ts

@@ -1,4 +1,4 @@
-import type { HistoryMutator, IPixelData, PixelBlendOptions } from '../../_types'
+import type { HistoryMutator, IPixelData32, PixelBlendOptions } from '../../_types'
 import { blendPixelData } from '../../PixelData/blendPixelData'
 import { PixelWriter } from '../PixelWriter'
 
@@ -15,7 +15,7 @@ export const mutatorBlendPixelData = ((writer: PixelWriter<any>, deps: Partial<D
 
   return {
     blendPixelData(
-      src: IPixelData,
+      src: IPixelData32,
       opts: PixelBlendOptions = {},
     ): boolean {
       const {

package/src/History/PixelMutator/mutatorBlendPixelDataAlphaMask.ts

@@ -1,4 +1,4 @@
-import type { AlphaMask, HistoryMutator, IPixelData, PixelBlendMaskOptions } from '../../_types'
+import type { AlphaMask, HistoryMutator, IPixelData32, PixelBlendMaskOptions } from '../../_types'
 import { blendPixelDataAlphaMask } from '../../PixelData/blendPixelDataAlphaMask'
 import { PixelWriter } from '../PixelWriter'
 
@@ -15,7 +15,7 @@ export const mutatorBlendPixelDataAlphaMask = ((writer: PixelWriter<any>, deps:
 
   return {
     blendPixelDataAlphaMask(
-      src: IPixelData,
+      src: IPixelData32,
       mask: AlphaMask,
       opts: PixelBlendMaskOptions = {},
     ): boolean {

package/src/History/PixelMutator/mutatorBlendPixelDataBinaryMask.ts

@@ -1,4 +1,4 @@
-import type { BinaryMask, HistoryMutator, IPixelData, PixelBlendMaskOptions } from '../../_types'
+import type { BinaryMask, HistoryMutator, IPixelData32, PixelBlendMaskOptions } from '../../_types'
 import { blendPixelDataBinaryMask } from '../../PixelData/blendPixelDataBinaryMask'
 import { PixelWriter } from '../PixelWriter'
 
@@ -15,7 +15,7 @@ export const mutatorBlendPixelDataBinaryMask = ((writer: PixelWriter<any>, deps:
 
   return {
     blendPixelDataBinaryMask(
-      src: IPixelData,
+      src: IPixelData32,
       mask: BinaryMask,
       opts: PixelBlendMaskOptions = {},
     ): boolean {

package/src/History/PixelMutator.ts

@@ -1,13 +1,3 @@
-import { mutatorApplyAlphaMask } from './PixelMutator/mutatorApplyAlphaMask'
-import { mutatorApplyBinaryMask } from './PixelMutator/mutatorApplyBinaryMask'
-import { mutatorApplyCircleBrushStroke } from './PixelMutator/mutatorApplyCircleBrushStroke'
-import { mutatorBlendColorCircleMask } from './PixelMutator/mutatorBlendColorCircleMask'
-import { mutatorApplyCirclePencil } from './PixelMutator/mutatorApplyCirclePencil'
-import { mutatorApplyCirclePencilStroke } from './PixelMutator/mutatorApplyCirclePencilStroke'
-import { mutatorApplyRectBrush } from './PixelMutator/mutatorApplyRectBrush'
-import { mutatorApplyRectBrushStroke } from './PixelMutator/mutatorApplyRectBrushStroke'
-import { mutatorApplyRectPencil } from './PixelMutator/mutatorApplyRectPencil'
-import { mutatorApplyRectPencilStroke } from './PixelMutator/mutatorApplyRectPencilStroke'
 import { mutatorBlendColor } from './PixelMutator/mutatorBlendColor'
 import { mutatorBlendPixel } from './PixelMutator/mutatorBlendPixel'
 import { mutatorBlendPixelData } from './PixelMutator/mutatorBlendPixelData'
@@ -22,17 +12,7 @@ import type { PixelWriter } from './PixelWriter'
 export function makeFullPixelMutator(writer: PixelWriter<any>) {
   return {
     // @sort
-    ...mutatorApplyAlphaMask(writer),
-    ...mutatorApplyBinaryMask(writer),
-    ...mutatorApplyCircleBrushStroke(writer),
-    ...mutatorApplyCirclePencil(writer),
-    ...mutatorApplyCirclePencilStroke(writer),
-    ...mutatorApplyRectBrush(writer),
-    ...mutatorApplyRectBrushStroke(writer),
-    ...mutatorApplyRectPencil(writer),
-    ...mutatorApplyRectPencilStroke(writer),
     ...mutatorBlendColor(writer),
-    ...mutatorBlendColorCircleMask(writer),
     ...mutatorBlendPixel(writer),
     ...mutatorBlendPixelData(writer),
     ...mutatorBlendPixelDataAlphaMask(writer),

package/src/History/PixelPatchTiles.ts

@@ -1,4 +1,4 @@
-import type { IPixelData } from '../_types'
+import type { IPixelData32 } from '../_types'
 import { PixelTile } from '../PixelTile/PixelTile'
 
 export type PixelPatchTiles = {
@@ -6,7 +6,7 @@ export type PixelPatchTiles = {
   afterTiles: PixelTile[]
 }
 
-export function applyPatchTiles(target: IPixelData, tiles: PixelTile[], tileSize: number) {
+export function applyPatchTiles(target: IPixelData32, tiles: PixelTile[], tileSize: number) {
   for (let i = 0; i < tiles.length; i++) {
     const tile = tiles[i]
 

package/src/History/PixelWriter.ts

@@ -1,9 +1,13 @@
-import type { IPixelData } from '../_types'
+import { sourceOverPerfect } from '../BlendModes/blend-modes-perfect'
+import { resizeImageData } from '../ImageData/resizeImageData'
+import { PaintBuffer } from '../Paint/PaintBuffer'
+import { blendPixelData } from '../PixelData/blendPixelData'
+import type { PixelData } from '../PixelData/PixelData'
+import { PixelTilePool } from '../PixelTile/PixelTilePool'
 import { type HistoryActionFactory, makeHistoryAction } from './HistoryAction'
 import { HistoryManager } from './HistoryManager'
 import { PixelAccumulator } from './PixelAccumulator'
 import { PixelEngineConfig } from './PixelEngineConfig'
-import { PixelTilePool } from '../PixelTile/PixelTilePool'
 
 export interface PixelWriterOptions {
   maxHistorySteps?: number
@@ -11,6 +15,7 @@ export interface PixelWriterOptions {
   historyManager?: HistoryManager
   historyActionFactory?: HistoryActionFactory
   pixelTilePool?: PixelTilePool,
+  accumulator?: PixelAccumulator
 }
 
 /**
@@ -39,34 +44,72 @@ export class PixelWriter<M> {
   readonly accumulator: PixelAccumulator
   readonly historyActionFactory: HistoryActionFactory
   readonly config: PixelEngineConfig
+  readonly pixelTilePool: PixelTilePool
+  readonly paintBuffer: PaintBuffer
   readonly mutator: M
 
-  constructor(target: IPixelData, mutatorFactory: (writer: PixelWriter<any>) => M, {
+  private blendPixelDataOpts = {
+    alpha: 255,
+    blendFn: sourceOverPerfect,
+    x: 0,
+    y: 0,
+    w: 0,
+    h: 0,
+  }
+
+  private _inProgress = false
+
+  constructor(target: PixelData, mutatorFactory: (writer: PixelWriter<any>) => M, {
     tileSize = 256,
     maxHistorySteps = 50,
     historyManager = new HistoryManager(maxHistorySteps),
     historyActionFactory = makeHistoryAction,
     pixelTilePool,
+    accumulator,
   }: PixelWriterOptions = {}) {
     this.config = new PixelEngineConfig(tileSize, target)
     this.historyManager = historyManager
-    pixelTilePool ??= new PixelTilePool(this.config)
-    this.accumulator = new PixelAccumulator(this.config, pixelTilePool)
+    this.pixelTilePool = pixelTilePool ?? new PixelTilePool(this.config)
+    this.accumulator = accumulator ?? new PixelAccumulator(this.config, this.pixelTilePool)
     this.historyActionFactory = historyActionFactory
     this.mutator = mutatorFactory(this)
+    this.paintBuffer = new PaintBuffer(this.config, this.pixelTilePool)
   }
 
+  /**
+   * Executes `transaction` and commits the resulting pixel changes as a single
+   * undoable history action.
+   *
+   * - If `transaction` throws, all accumulated changes are rolled back and the error
+   *   is re-thrown. No action is committed.
+   * - If `transaction` completes without modifying any pixels, no action is committed.
+   * - `withHistory` is not re-entrant. Calling it again from inside `transaction` will
+   *   throw immediately to prevent silent data loss from a nested extractPatch.
+   *
+   * @param transaction Callback to be executed inside the transaction.
+   * @param after    Called after both undo and redo — use for generic change notifications.
+   * @param afterUndo Called after undo only — use for dimension or state changes specific to undo.
+   * @param afterRedo Called after redo only.
+   */
   withHistory(
-    cb: (mutator: M) => void,
+    transaction: (mutator: M) => void,
     after?: () => void,
     afterUndo?: () => void,
     afterRedo?: () => void,
-  ) {
+  ): void {
+    if (this._inProgress) {
+      throw new Error('withHistory is not re-entrant — commit or rollback the current operation first')
+    }
+
+    this._inProgress = true
+
     try {
-      cb(this.mutator)
+      transaction(this.mutator)
     } catch (e) {
-      this.accumulator.rollback()
+      this.accumulator.rollbackAfterError()
       throw e
+    } finally {
+      this._inProgress = false
     }
 
     if (this.accumulator.beforeTiles.length === 0) return
@@ -76,4 +119,84 @@ export class PixelWriter<M> {
 
     this.historyManager.commit(action)
   }
+
+  resize(
+    newWidth: number,
+    newHeight: number,
+    offsetX = 0,
+    offsetY = 0,
+    after?: (target: ImageData) => void,
+    afterUndo?: (target: ImageData) => void,
+    afterRedo?: (target: ImageData) => void,
+    resizeImageDataFn = resizeImageData,
+  ): void {
+    if (this._inProgress) {
+      throw new Error('Cannot resize inside a withHistory callback')
+    }
+
+    if (this.accumulator.beforeTiles.length > 0) {
+      throw new Error('Cannot resize with an open accumulator — commit or rollback first')
+    }
+
+    const config = this.config
+    const target = config.target
+    const beforeImageData = target.imageData
+    const afterImageData = resizeImageDataFn(beforeImageData, newWidth, newHeight, offsetX, offsetY)
+
+    target.set(afterImageData)
+
+    this.historyManager.commit({
+      undo: () => {
+        target.set(beforeImageData)
+        afterUndo?.(beforeImageData)
+        after?.(beforeImageData)
+      },
+      redo: () => {
+        target.set(afterImageData)
+        afterRedo?.(afterImageData)
+        after?.(afterImageData)
+      },
+    })
+  }
+
+  commitPaintBuffer(
+    alpha = 255,
+    blendFn = sourceOverPerfect,
+    blendPixelDataFn = blendPixelData,
+  ) {
+    const paintBuffer = this.paintBuffer
+    const tileShift = paintBuffer.config.tileShift
+    const lookup = paintBuffer.lookup
+
+    const opts = this.blendPixelDataOpts
+
+    opts.alpha = alpha
+    opts.blendFn = blendFn
+
+    for (let i = 0; i < lookup.length; i++) {
+      const tile = lookup[i]
+
+      if (tile) {
+        const didChange = this.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.width
+        opts.h = tile.height
+
+        didChange(
+          blendPixelDataFn(
+            this.config.target,
+            tile,
+            opts,
+          ),
+        )
+      }
+    }
+
+    paintBuffer.clear()
+  }
 }

package/src/Internal/helpers.ts

@@ -0,0 +1,2 @@
+// @__INLINE_MACRO__
+export const macro_halfAndFloor = (value: number) => value >> 1