pixel-data-js 0.35.0 → 0.36.0

package/package.json

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

package/src/History/PixelAccumulator.ts

@@ -26,9 +26,17 @@ export class PixelAccumulator {
    * @param x pixel x coordinate
    * @param y pixel y coordinate
    */
-  storePixelBeforeState(x: number, y: number): DidChangeFn {
+  storePixelBeforeState(x: number, y: number): DidChangeFn | null {
     const shift = this.config.tileShift
     const columns = this.config.targetColumns
+    const targetWidth = this.config.target.w
+    const targetHeight = this.config.target.h
+
+    // 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 >> shift
     const ty = y >> shift
     const id = ty * columns + tx
@@ -66,14 +74,27 @@ export class PixelAccumulator {
     y: number,
     w: number,
     h: number,
-  ): DidChangeFn {
+  ): DidChangeFn | null {
     const shift = this.config.tileShift
     const columns = this.config.targetColumns
+    const targetWidth = this.config.target.w
+    const targetHeight = this.config.target.h
+
+    // 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 >> shift
+    const startY = clipY1 >> shift
+    const endX = clipX2 >> shift
+    const endY = clipY2 >> shift
 
     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

@@ -25,6 +25,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

@@ -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

@@ -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

@@ -41,6 +41,7 @@ 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

package/src/History/PixelMutator/mutatorBlendColorPaintRect.ts

@@ -43,6 +43,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

@@ -23,6 +23,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

@@ -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

@@ -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>

package/src/History/PixelMutator/mutatorFillBinaryMask.ts

@@ -20,8 +20,9 @@ export const mutatorFillBinaryMask = ((writer: PixelWriter<any>, deps: Deps = de
       mask: BinaryMask,
       x = 0,
       y = 0,
-    ) {
+    ): boolean {
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, mask.w, mask.h)
+      if (!didChange) return false
       return didChange(
         fillPixelDataBinaryMask(writer.config.target, color, mask, x, y),
       )

package/src/History/PixelMutator/mutatorInvert.ts

@@ -14,7 +14,7 @@ export const mutatorInvert = ((writer: PixelWriter<any>, deps: Deps = defaults)
   } = deps
 
   return {
-    invert(opts?: PixelMutateOptions) {
+    invert(opts?: PixelMutateOptions): boolean {
       const target = writer.config.target
       const x = opts?.x ?? 0
       const y = opts?.y ?? 0
@@ -22,8 +22,9 @@ export const mutatorInvert = ((writer: PixelWriter<any>, deps: Deps = defaults)
       const h = opts?.h ?? target.h
 
       const didChange = writer.accumulator.storeRegionBeforeState(x, y, w, h)
+      if (!didChange) return false
 
-      return didChange(
+      return didChange?.(
         invertPixelData(target, opts),
       )
     },

package/src/History/PixelMutator.ts

@@ -12,7 +12,7 @@ import { mutatorBlendMask } from './PixelMutator/mutatorBlendMask'
 import { mutatorBlendPixel } from './PixelMutator/mutatorBlendPixel'
 import { mutatorBlendPixelData } from './PixelMutator/mutatorBlendPixelData'
 import { mutatorClear } from './PixelMutator/mutatorClear'
-import { mutatorFill, mutatorFillRect } from './PixelMutator/mutatorFill'
+import { mutatorFill } from './PixelMutator/mutatorFill'
 import { mutatorFillBinaryMask } from './PixelMutator/mutatorFillBinaryMask'
 import { mutatorInvert } from './PixelMutator/mutatorInvert'
 import type { PixelWriter } from './PixelWriter'
@@ -36,7 +36,6 @@ export function makeFullPixelMutator(writer: PixelWriter<any>) {
     ...mutatorClear(writer),
     ...mutatorFill(writer),
     ...mutatorFillBinaryMask(writer),
-    ...mutatorFillRect(writer),
     ...mutatorInvert(writer),
   }
 }

package/src/Paint/Render/PaintCursorRenderer.ts

@@ -103,6 +103,14 @@ export function makePaintCursorRenderer<T extends HTMLCanvasElement | OffscreenC
     drawCtx.drawImage(canvas, Math.floor(dx), Math.floor(dy))
   }
 
+  function drawRaw(
+    drawCtx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D,
+    x: number,
+    y: number,
+  ) {
+    drawCtx.drawImage(canvas, Math.floor(x * _scale), Math.floor(y * _scale))
+  }
+
   function getSettings() {
     return {
       color: _color,
@@ -116,6 +124,7 @@ export function makePaintCursorRenderer<T extends HTMLCanvasElement | OffscreenC
     getBounds,
     getBoundsScaled: getOutlineBoundsScaled,
     draw,
+    drawRaw,
     getSettings,
   }
 }

package/src/PixelData/_pixelData-types.ts

@@ -15,3 +15,10 @@ export interface MutablePixelData32 {
 export interface PixelData<T extends ImageDataLike = ImageData> extends PixelData32 {
   readonly imageData: T
 }
+
+export interface MutablePixelData<T extends ImageDataLike = ImageData> extends PixelData32 {
+  imageData: T
+  data: Uint32Array
+  w: number
+  h: number
+}

package/src/PixelData/cropPixelData.ts

@@ -0,0 +1,36 @@
+import type { MutablePixelData, PixelData, PixelData32 } from './_pixelData-types'
+import { setPixelData } from './PixelData'
+
+export function cropPixelData(src: PixelData32, x: number, y: number, w: number, h: number, out?: MutablePixelData): PixelData {
+  const cx = Math.max(x, 0)
+  const cy = Math.max(y, 0)
+  const cw = Math.min(x + w, src.w) - cx
+  const ch = Math.min(y + h, src.h) - cy
+
+  if (cw <= 0 || ch <= 0) {
+    throw new Error(`Crop [${x},${y} ${w}x${h}] does not overlap PixelData [${src.w}x${src.h}]`)
+  }
+
+  const cropped = new ImageData(cw, ch)
+
+  let dst32: Uint32Array
+  if (out) {
+    setPixelData(out, cropped)
+    dst32 = out.data
+  } else {
+    dst32 = new Uint32Array(cropped.data.buffer)
+  }
+
+  for (let row = 0; row < ch; row++) {
+    const srcOffset = ((cy + row) * src.w) + cx
+    const dstOffset = row * cw
+    dst32.set(src.data.subarray(srcOffset, srcOffset + cw), dstOffset)
+  }
+
+  return out ?? {
+    data: dst32,
+    imageData: cropped,
+    w: cw,
+    h: ch,
+  }
+}

package/src/PixelData/fillPixelData.ts

@@ -47,16 +47,16 @@ export function fillPixelData(
   let w: number
   let h: number
 
-  if (typeof _x === 'object') {
-    x = _x.x ?? 0
-    y = _x.y ?? 0
-    w = _x.w ?? dstW
-    h = _x.h ?? dstH
-  } else if (typeof _x === 'number') {
+  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

package/src/PixelData/trimPixelData.ts

@@ -0,0 +1,49 @@
+import type { Rect } from '../Rect/_rect-types'
+import type { MutablePixelData, PixelData, PixelData32 } from './_pixelData-types'
+import { cropPixelData } from './cropPixelData'
+
+export function getPixelDataTransparentTrimmedBounds(target: PixelData32): Rect | null {
+  let minX = target.w
+  let minY = target.h
+  let maxX = -1
+  let maxY = -1
+
+  for (let y = 0; y < target.h; y++) {
+    for (let x = 0; x < target.w; x++) {
+      const alpha = target.data[y * target.w + x] >>> 24
+      if (alpha !== 0) {
+        if (x < minX) minX = x
+        if (x > maxX) maxX = x
+        if (y < minY) minY = y
+        if (y > maxY) maxY = y
+      }
+    }
+  }
+
+  if (maxX === -1) return null
+
+  return {
+    x: minX,
+    y: minY,
+    w: maxX - minX + 1,
+    h: maxY - minY + 1,
+  }
+}
+
+export function trimTransparentPixelData(target: PixelData32): PixelData {
+  const r = getPixelDataTransparentTrimmedBounds(target)
+  if (!r) {
+    throw new Error('PixelData is fully transparent — no crop bounds found')
+  }
+
+  return cropPixelData(target, r.x, r.y, r.w, r.h)
+}
+
+export function trimTransparentPixelDataInPlace(target: MutablePixelData) {
+  const r = getPixelDataTransparentTrimmedBounds(target)
+  if (!r) {
+    throw new Error('PixelData is fully transparent — no crop bounds found')
+  }
+
+  cropPixelData(target, r.x, r.y, r.w, r.h, target)
+}

package/src/index.ts

@@ -152,6 +152,7 @@ export * from './PixelData/blendPixelDataMask'
 export * from './PixelData/blendPixelDataPaintBuffer'
 export * from './PixelData/clearPixelDataFast'
 export * from './PixelData/copyPixelData'
+export * from './PixelData/cropPixelData'
 export * from './PixelData/extractPixelData'
 export * from './PixelData/extractPixelDataBuffer'
 export * from './PixelData/fillPixelData'
@@ -165,6 +166,7 @@ export * from './PixelData/resamplePixelData'
 export * from './PixelData/resizePixelData'
 export * from './PixelData/ReusablePixelData'
 export * from './PixelData/rotatePixelData'
+export * from './PixelData/trimPixelData'
 export * from './PixelData/uInt32ArrayToPixelData'
 export * from './PixelData/writePaintBufferToPixelData'
 export * from './PixelData/writePixelData'