pixel-data-js 0.35.0 → 0.37.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pixel-data-js",
   "type": "module",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "packageManager": "pnpm@10.33.0",
   "description": "JS Pixel and ImageData operations",
   "author": {
@@ -88,7 +88,7 @@
     "typedoc-plugin-mdn-links": "^5.1.1",
     "typedoc-rhineai-theme": "^1.2.0",
     "typescript": "^5.9.3",
-    "unplugin-inline": "^1.15.0",
+    "unplugin-inline": "^1.16.0",
     "vite-tsconfig-paths": "^6.1.1",
     "vitest": "3.2.4"
   },

package/src/Algorithm/floodFillSelection.ts

@@ -1,5 +1,6 @@
-import { type Color32 } from '../_types'
-import { colorDistance } from '../color'
+import type { Color32 } from '../Color/_color-types'
+
+import { colorDistance } from '../Color/colorDistance'
 import { extractImageDataBuffer } from '../ImageData/extractImageDataBuffer'
 import { type BinaryMaskRect, MaskType } from '../Mask/_mask-types'
 import type { PixelData } from '../PixelData/_pixelData-types'

package/src/BlendModes/blend-modes-fast.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../_types'
+import type { BlendColor32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import { BaseBlendMode, overwriteBase } from './blend-modes'
 import { makeBlendModeRegistry } from './BlendModeRegistry'
 

package/src/BlendModes/blend-modes-perfect.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../_types'
+import type { BlendColor32 } from '../_types'
+import type { Color32 } from '../Color/_color-types'
 import { BaseBlendMode, overwriteBase } from './blend-modes'
 import { makeBlendModeRegistry } from './BlendModeRegistry'
 

package/src/Canvas/ReusableCanvas.ts

@@ -63,11 +63,6 @@ function makeReusableCanvasMeta<T extends HTMLCanvasElement | OffscreenCanvas>(
       canvas.width = width
       canvas.height = height
       ctx!.imageSmoothingEnabled = false
-    } else {
-      // Always reset transform before clearing to ensure the whole buffer is wiped
-      ctx!.setTransform(1, 0, 0, 1, 0, 0)
-      // Same size → manually clear
-      ctx!.clearRect(0, 0, width, height)
     }
 
     return result

package/src/Color/_color-types.ts

@@ -0,0 +1,8 @@
+/** Represents a 32-bit color in 0xAABBGGRR (Little endian) */
+export type Color32 = number & { readonly __brandColor32: unique symbol }
+
+/** ALL values are 0-255 */
+export type RGBA = { r: number, g: number, b: number, a: number }
+
+/** r, g, b are 0-255. a is 0-1 for css use */
+export type CssRGBA = { r: number, g: number, b: number, a: number } & { readonly __brandCssRGBA: unique symbol }

package/src/Color/colorDistance.ts

@@ -0,0 +1,9 @@
+import type { Color32 } from './_color-types'
+
+export function colorDistance(a: Color32, b: Color32): number {
+  const dr = (a & 0xFF) - (b & 0xFF)
+  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
+  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
+  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
+  return dr * dr + dg * dg + db * db + da * da
+}

package/src/Color/convert-color.ts

@@ -0,0 +1,43 @@
+// Convert 0xAABBGGRR to #RRGGBBAA
+import type { Color32, CssRGBA } from './_color-types'
+
+export function color32ToHex(color: Color32): string {
+  const r = (color & 0xFF).toString(16).padStart(2, '0')
+  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
+  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
+  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
+  return `#${r}${g}${b}${a}`
+}
+
+/**
+ * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
+ * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
+ */
+export function color32ToCssRGBAString(color: Color32): string {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  const alpha = Number((a / 255).toFixed(3))
+
+  return `rgba(${r},${g},${b},${alpha})`
+}
+
+export function color32ToCssRGBA(color: Color32): CssRGBA {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  return {
+    r,
+    g,
+    b,
+    a: a / 255,
+  } as CssRGBA
+}
+
+export function cssRGBAToColor32({ r, g, b, a }: CssRGBA): Color32 {
+  return (((a * 255) << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}

package/src/Color/lerpColor32.ts

@@ -0,0 +1,44 @@
+import type { Color32 } from './_color-types'
+
+/**
+ * Linearly interpolates between two 32-bit colors using a floating-point weight.
+ * * This is the preferred method for UI animations or scenarios where high
+ * precision is required. It uses the standard `a + t * (b - a)` formula
+ * for each channel.
+ * @param a - The starting color as a 32-bit integer (AABBGGRR).
+ * @param b - The target color as a 32-bit integer (AABBGGRR).
+ * @param t - The interpolation factor between 0.0 and 1.0.
+ * @returns The interpolated 32-bit color.
+ */
+export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
+  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
+  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
+  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
+  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
+
+  return ((a_ << 24) | (b_ << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Linearly interpolates between two 32-bit colors using integer fixed-point math.
+ * Highly optimized for image processing and real-time blitting. It processes
+ * channels in parallel using bitmasks (RB and GA pairs).
+ * **Note:** Subject to a 1-bit drift (rounding down) due to fast bit-shift division.
+ * @param src - The source (foreground) color as a 32-bit integer.
+ * @param dst - The destination (background) color as a 32-bit integer.
+ * @param w - The blend weight as a byte value from 0 to 255. Where 0 is 100% dst and 255 is 100% src
+ * @returns The blended 32-bit color.
+ */
+export function lerpColor32Fast(src: Color32, dst: Color32, w: number): Color32 {
+  const invA = 255 - w
+
+  // Masking Red and Blue: 0x00FF00FF
+  // We process R and B in one go, then shift back down
+  const rb = (((src & 0x00FF00FF) * w + (dst & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
+
+  // Masking Green and Alpha: 0xFF00FF00
+  // We shift down first to avoid overflow, then shift back up
+  const ga = ((((src >>> 8) & 0x00FF00FF) * w + ((dst >>> 8) & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF
+
+  return (rb | (ga << 8)) >>> 0 as Color32
+}

package/src/Color/pack-color.ts

@@ -0,0 +1,38 @@
+import type { Color32, RGBA } from './_color-types'
+
+/**
+ * Packs RGBA into a 32-bit integer compatible with
+ * Little-Endian Uint32Array views on ImageData.
+ */
+export function packColor(r: number, g: number, b: number, a: number): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export function packRGBA({ r, g, b, a }: RGBA): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
+export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
+export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
+export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
+
+export function unpackColor(packed: Color32): RGBA {
+  return {
+    r: (packed >>> 0) & 0xFF,
+    g: (packed >>> 8) & 0xFF,
+    b: (packed >>> 16) & 0xFF,
+    a: (packed >>> 24) & 0xFF,
+  }
+}
+
+const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
+
+// uses a scratch arg for memory perf. be careful about re-use.
+export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
+  scratch.r = (packed >>> 0) & 0xFF
+  scratch.g = (packed >>> 8) & 0xFF
+  scratch.b = (packed >>> 16) & 0xFF
+  scratch.a = (packed >>> 24) & 0xFF
+  return scratch
+}

package/src/History/HistoryAction.ts

@@ -1,5 +1,5 @@
+import type { TileTargetConfig } from '../Tile/_tile-types'
 import type { PixelAccumulator } from './PixelAccumulator'
-import type { PixelEngineConfig } from './PixelEngineConfig'
 import { applyPatchTiles, type PixelPatchTiles } from './PixelPatchTiles'
 
 export interface HistoryAction {
@@ -11,7 +11,7 @@ export interface HistoryAction {
 export type HistoryActionFactory = typeof makeHistoryAction
 
 export function makeHistoryAction(
-  config: PixelEngineConfig,
+  config: TileTargetConfig,
   accumulator: PixelAccumulator,
   patch: PixelPatchTiles,
   afterUndo?: (patch: PixelPatchTiles) => void,

package/src/History/PixelAccumulator.ts

@@ -1,6 +1,5 @@
-import type { PixelTile } from '../Tile/_tile-types'
+import type { PixelTile, TileTargetConfig } from '../Tile/_tile-types'
 import type { TilePool } from '../Tile/TilePool'
-import type { PixelEngineConfig } from './PixelEngineConfig'
 import { applyPatchTiles, type PixelPatchTiles } from './PixelPatchTiles'
 
 export type DidChangeFn = (didChange: boolean) => boolean
@@ -10,7 +9,7 @@ export class PixelAccumulator {
   public beforeTiles: PixelTile[]
 
   constructor(
-    readonly config: PixelEngineConfig,
+    readonly config: TileTargetConfig,
     readonly pixelTilePool: TilePool<PixelTile>,
   ) {
     this.lookup = []
@@ -26,11 +25,18 @@ export class PixelAccumulator {
    * @param x pixel x coordinate
    * @param y pixel y coordinate
    */
-  storePixelBeforeState(x: number, y: number): DidChangeFn {
-    const shift = this.config.tileShift
+  storePixelBeforeState(x: number, y: number): DidChangeFn | null {
     const columns = this.config.targetColumns
-    const tx = x >> shift
-    const ty = y >> shift
+    const targetWidth = this.config.targetWidth
+    const targetHeight = this.config.targetHeight
+
+    // Return a no-op if the pixel is outside the target boundaries
+    if (x < 0 || x >= targetWidth || y < 0 || y >= targetHeight) {
+      return null
+    }
+
+    const tx = (x * this.config.invTileSize) | 0
+    const ty = (y * this.config.invTileSize) | 0
     const id = ty * columns + tx
 
     let tile = this.lookup[id]
@@ -66,14 +72,27 @@ export class PixelAccumulator {
     y: number,
     w: number,
     h: number,
-  ): DidChangeFn {
-    const shift = this.config.tileShift
+  ): DidChangeFn | null {
     const columns = this.config.targetColumns
+    const targetWidth = this.config.targetWidth
+    const targetHeight = this.config.targetHeight
+    const invTileSize = this.config.invTileSize
+
+    // Clamp the bounding box to the actual canvas dimensions
+    const clipX1 = Math.max(0, x)
+    const clipY1 = Math.max(0, y)
+    const clipX2 = Math.min(targetWidth - 1, x + w - 1)
+    const clipY2 = Math.min(targetHeight - 1, y + h - 1)
+
+    // If the region is entirely off-canvas, return a no-op
+    if (clipX2 < clipX1 || clipY2 < clipY1) {
+      return null
+    }
 
-    const startX = x >> shift
-    const startY = y >> shift
-    const endX = (x + w - 1) >> shift
-    const endY = (y + h - 1) >> shift
+    const startX = (clipX1 * invTileSize) | 0
+    const startY = (clipY1 * invTileSize) | 0
+    const endX = (clipX2 * invTileSize) | 0
+    const endY = (clipY2 * invTileSize) | 0
 
     const startIndex = this.beforeTiles.length
 

package/src/History/PixelMutator/mutatorApplyAlphaMask.ts

@@ -26,6 +26,8 @@ export const mutatorApplyAlphaMask = ((writer: PixelWriter<any>, deps: Deps = de
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
+
       return didChange(applyAlphaMaskToPixelData(target, mask, opts))
     },
   }

package/src/History/PixelMutator/mutatorApplyBinaryMask.ts

@@ -26,7 +26,11 @@ export const mutatorApplyBinaryMask = ((writer: PixelWriter<any>, deps: Deps = d
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
-      return didChange(applyBinaryMaskToPixelData(target, mask, opts))
+      if (!didChange) return false
+
+      const b = applyBinaryMaskToPixelData(target, mask, opts)
+      console.log({ b })
+      return didChange(b)
     },
   }
 }) satisfies HistoryMutator<any, Deps>

package/src/History/PixelMutator/mutatorApplyMask.ts

@@ -29,6 +29,7 @@ export const mutatorApplyMask = ((writer: PixelWriter<any>, deps: Deps = default
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
       if (mask.type === MaskType.BINARY) {
         return didChange(applyBinaryMaskToPixelData(target, mask, opts))

package/src/History/PixelMutator/mutatorBlendAlphaMask.ts

@@ -27,6 +27,7 @@ export const mutatorBlendAlphaMask = ((writer: PixelWriter<any>, deps: Partial<D
       const h = opts?.h ?? src.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
       return didChange(
         blendPixelDataAlphaMask(writer.config.target, src, mask, opts),

package/src/History/PixelMutator/mutatorBlendBinaryMask.ts

@@ -27,6 +27,7 @@ export const mutatorBlendBinaryMask = ((writer: PixelWriter<any>, deps: Partial<
       const h = opts?.h ?? src.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
       return didChange(
         blendPixelDataBinaryMask(writer.config.target, src, mask, opts),

package/src/History/PixelMutator/mutatorBlendColor.ts

@@ -1,4 +1,5 @@
-import type { Color32, ColorBlendOptions } from '../../_types'
+import type { ColorBlendOptions } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 
@@ -25,6 +26,8 @@ export const mutatorBlendColor = ((writer: PixelWriter<any>, deps: Deps = defaul
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
+
       return didChange(
         blendColorPixelData(target, color, opts),
       )

package/src/History/PixelMutator/mutatorBlendColorPaintAlphaMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import type { PaintAlphaMask } from '../../Paint/_paint-types'
 import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -37,6 +37,7 @@ export const mutatorBlendColorPaintAlphaMask = ((writer: PixelWriter<any>, deps:
       const ty = y + mask.centerOffsetY
 
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h)
+      if (!didChange) return false
 
       OPTS.x = tx
       OPTS.y = ty

package/src/History/PixelMutator/mutatorBlendColorPaintBinaryMask.ts

@@ -1,5 +1,5 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import type { PaintBinaryMask } from '../../Paint/_paint-types'
 import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -37,6 +37,7 @@ export const mutatorBlendColorPaintBinaryMask = ((writer: PixelWriter<any>, deps
       const ty = y + mask.centerOffsetY
 
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h)
+      if (!didChange) return false
 
       OPTS.x = tx
       OPTS.y = ty

package/src/History/PixelMutator/mutatorBlendColorPaintMask.ts

@@ -1,7 +1,8 @@
-import { type Color32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import { MaskType } from '../../Mask/_mask-types'
-import type { PaintMask } from '../../Paint/_paint-types'
+import type { PaintMask, PaintRect } from '../../Paint/_paint-types'
+import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { blendColorPixelDataAlphaMask } from '../../PixelData/blendColorPixelDataAlphaMask'
 import { blendColorPixelDataBinaryMask } from '../../PixelData/blendColorPixelDataBinaryMask'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -9,6 +10,7 @@ import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 const defaults = {
   blendColorPixelDataAlphaMask,
   blendColorPixelDataBinaryMask,
+  blendColorPixelData,
 }
 type Deps = Partial<typeof defaults>
 
@@ -19,6 +21,7 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
   const {
     blendColorPixelDataBinaryMask = defaults.blendColorPixelDataBinaryMask,
     blendColorPixelDataAlphaMask = defaults.blendColorPixelDataAlphaMask,
+    blendColorPixelData = defaults.blendColorPixelData,
   } = deps
 
   const OPTS = {
@@ -26,12 +29,14 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
     y: 0,
     blendFn: sourceOverPerfect,
     alpha: 255,
+    w: undefined as number | undefined,
+    h: undefined as number | undefined,
   }
 
   return {
     blendColorPaintMask(
       color: Color32,
-      mask: PaintMask,
+      mask: PaintMask | PaintRect,
       x: number,
       y: number,
       alpha = 255,
@@ -41,21 +46,32 @@ export const mutatorBlendColorPaintMask = ((writer: PixelWriter<any>, deps: Part
       const ty = y + mask.centerOffsetY
 
       const didChange = writer.accumulator.storeRegionBeforeState(tx, ty, mask.w, mask.h)
+      if (!didChange) return false
 
       OPTS.x = tx
       OPTS.y = ty
       OPTS.alpha = alpha
       OPTS.blendFn = blendFn
+      OPTS.w = undefined
+      OPTS.h = undefined
 
-      if (mask.type === MaskType.BINARY) {
-        return didChange(
-          blendColorPixelDataBinaryMask(writer.config.target, color, mask, OPTS),
-        )
-      } else {
+      if (mask.data) {
+        if (mask.type === MaskType.BINARY) {
+          return didChange(
+            blendColorPixelDataBinaryMask(writer.config.target, color, mask, OPTS),
+          )
+        }
         return didChange(
           blendColorPixelDataAlphaMask(writer.config.target, color, mask, OPTS),
         )
       }
+
+      OPTS.w = mask.w
+      OPTS.h = mask.h
+
+      return didChange(
+        blendColorPixelData(writer.config.target, color, OPTS),
+      )
     },
   }
 }) satisfies HistoryMutator<any, Deps>

package/src/History/PixelMutator/mutatorBlendColorPaintRect.ts

@@ -1,5 +1,6 @@
-import type { BlendColor32, Color32 } from '../../_types'
+import type { BlendColor32 } from '../../_types'
 import { sourceOverPerfect } from '../../BlendModes/blend-modes-perfect'
+import type { Color32 } from '../../Color/_color-types'
 import { _macro_paintRectCenterOffset } from '../../Internal/macros'
 import { blendColorPixelData } from '../../PixelData/blendColorPixelData'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -43,6 +44,8 @@ export const mutatorBlendColorPaintRect = ((writer: PixelWriter<any>, deps: Deps
       OPTS.alpha = alpha
 
       const didChange = writer.accumulator.storeRegionBeforeState(topLeftX, topLeftY, brushWidth, brushHeight)
+      if (!didChange) return false
+
       return didChange(
         blendColorPixelData(
           target,

package/src/History/PixelMutator/mutatorBlendMask.ts

@@ -29,6 +29,7 @@ export const mutatorBlendMask = ((writer: PixelWriter<any>, deps: Partial<Deps>
       const h = opts?.h ?? src.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
       if (mask.type === MaskType.BINARY) {
         return didChange(

package/src/History/PixelMutator/mutatorBlendPixel.ts

@@ -1,4 +1,5 @@
-import type { BlendColor32, Color32 } from '../../_types'
+import type { BlendColor32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { blendPixel } from '../../PixelData/blendPixel'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
 
@@ -23,6 +24,7 @@ export const mutatorBlendPixel = ((writer: PixelWriter<any>, deps: Partial<Deps>
     ): boolean {
 
       const didChange = writer.accumulator.storePixelBeforeState(x, y)
+      if (!didChange) return false
 
       return didChange(
         blendPixel(writer.config.target, x, y, color, alpha, blendFn),

package/src/History/PixelMutator/mutatorBlendPixelData.ts

@@ -25,6 +25,7 @@ export const mutatorBlendPixelData = ((writer: PixelWriter<any>, deps: Partial<D
       const h = opts?.h ?? src.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
       return didChange(
         blendPixelData(writer.config.target, src, opts),

package/src/History/PixelMutator/mutatorClear.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { fillPixelData } from '../../PixelData/fillPixelData'
 import type { Rect } from '../../Rect/_rect-types'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -18,7 +18,7 @@ export const mutatorClear = ((writer: PixelWriter<any>, deps: Deps = defaults) =
   return {
     clear(
       rect?: Partial<Rect>,
-    ) {
+    ): boolean {
       const target = writer.config.target
       const x = rect?.x ?? 0
       const y = rect?.y ?? 0
@@ -26,6 +26,7 @@ export const mutatorClear = ((writer: PixelWriter<any>, deps: Deps = defaults) =
       const h = rect?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
       return didChange(
         fillPixelData(target, 0 as Color32, x, y, w, h),
       )

package/src/History/PixelMutator/mutatorFill.ts

@@ -1,4 +1,4 @@
-import type { Color32 } from '../../_types'
+import type { Color32 } from '../../Color/_color-types'
 import { fillPixelData } from '../../PixelData/fillPixelData'
 import type { Rect } from '../../Rect/_rect-types'
 import { type HistoryMutator, PixelWriter } from '../PixelWriter'
@@ -14,44 +14,60 @@ export const mutatorFill = ((writer: PixelWriter<any>, deps: Deps = defaults) =>
     fillPixelData = defaults.fillPixelData,
   } = deps
 
-  return {
-    fill(
-      color: Color32,
-      x = 0,
-      y = 0,
-      w = writer.config.target.w,
-      h = writer.config.target.h,
-    ) {
-      const target = writer.config.target
-
-      const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
-      return didChange(
-        fillPixelData(target, color, x, y, w, h),
-      )
-    },
-  }
-}) satisfies HistoryMutator<any, Deps>
+  const config = writer.config
 
-/**
- * @param deps - @hidden
- */
-export const mutatorFillRect = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
-  const {
-    fillPixelData = defaults.fillPixelData,
-  } = deps
+  function fill(
+    color: Color32,
+    rect?: Partial<Rect>,
+  ): boolean
+
+  function fill(
+    color: Color32,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+  ): boolean
+  function fill(
+    color: Color32,
+    _x?: Partial<Rect> | number,
+    _y?: number,
+    _w?: number,
+    _h?: number,
+  ): boolean {
+    const target = config.target
+
+    const dstW = target.w
+    const dstH = target.h
+
+    let x: number
+    let y: number
+    let w: number
+    let h: number
 
-  return {
-    fillRect(
-      color: Color32,
-      rect: Rect,
-    ) {
-      const target = writer.config.target
-
-      const didChange = writer.accumulator.storeRegionBeforeState(rect.x, rect.y, rect.w, rect.h)
-      return didChange(
-        fillPixelData(target, color, rect.x, rect.y, rect.w, rect.h),
-      )
-    },
+    if (typeof _x === 'number') {
+      x = _x
+      y = _y!
+      w = _w!
+      h = _h!
+    } else if (typeof _x === 'object') {
+      x = _x.x ?? 0
+      y = _x.y ?? 0
+      w = _x.w ?? dstW
+      h = _x.h ?? dstH
+    } else {
+      x = 0
+      y = 0
+      w = dstW
+      h = dstH
+    }
+
+    const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+    if (!didChange) return false
+    return didChange(
+      fillPixelData(target, color, x, y, w, h),
+    )
   }
-}) satisfies HistoryMutator<any, Deps>
 
+  return { fill }
+}) satisfies HistoryMutator<any, Deps>