pixel-data-js 0.20.0 → 0.22.2

package/package.json

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

package/src/Algorithm/floodFillSelection.ts

@@ -1,4 +1,4 @@
-import { type Color32, type ImageDataLike, MaskType, type Rect, type SelectionRect } from '../_types'
+import { type BinaryMaskRect, type Color32, type ImageDataLike, MaskType, type Rect } from '../_types'
 import { colorDistance } from '../color'
 import { extractImageDataBuffer } from '../ImageData/extractImageDataBuffer'
 import type { PixelData } from '../PixelData/PixelData'
@@ -13,7 +13,7 @@ export type FloodFillImageDataOptions = {
 export type FloodFillResult = {
   startX: number
   startY: number
-  selectionRect: SelectionRect
+  selectionRect: BinaryMaskRect
   pixels: Uint8ClampedArray
 }
 
@@ -27,9 +27,9 @@ export type FloodFillResult = {
  * @param startX - The starting horizontal coordinate.
  * @param startY - The starting vertical coordinate.
  * @param options - Configuration for the fill operation.
- * @param options.contiguous - @default true. If true, only connected pixels are
+ * @param options.contiguous - If true, only connected pixels are
  * selected. If false, all pixels within tolerance are selected regardless of position.
- * @param options.tolerance - @default 0. The maximum allowed difference in color
+ * @param options.tolerance - The maximum allowed difference in color
  * distance (0-255) for a pixel to be included.
  * @param options.bounds - Optional bounding box to restrict the search area.
  *
@@ -181,20 +181,20 @@ export function floodFillSelection(
   if (matchCount === 0) {
     return null
   }
-  const selectionRect: SelectionRect = {
+  const w = maxX - minX + 1
+  const h = maxY - minY + 1
+  const selectionRect: BinaryMaskRect = {
     x: minX,
     y: minY,
-    w: maxX - minX + 1,
-    h: maxY - minY + 1,
-    mask: new Uint8Array((maxX - minX + 1) * (maxY - minY + 1)),
-    maskType: MaskType.BINARY,
+    w,
+    h,
+    data: new Uint8Array(w * h),
+    type: MaskType.BINARY,
   }
 
-  // REMOVED trimRectBounds from here
-
   const sw = selectionRect.w
   const sh = selectionRect.h
-  const finalMask = selectionRect.mask!
+  const finalMask = selectionRect.data
 
   for (let i = 0; i < matchCount; i++) {
     const mx = matchX[i] - selectionRect.x
@@ -205,13 +205,11 @@ export function floodFillSelection(
     }
   }
 
-  // trimRectBounds can see them and work correctly.
   trimRectBounds(
     selectionRect,
     { x: 0, y: 0, w: width, h: height },
   )
 
-  // Use the UPDATED values from the selectionRect after trimming
   const extracted = extractImageDataBuffer(
     imageData,
     selectionRect.x,

package/src/BlendModes/toBlendModeIndexAndName.ts

@@ -12,14 +12,7 @@ export function toBlendModeIndexAndName(input: string | number) {
   const isNumeric = trimmed !== '' && !Number.isNaN(num)
 
   if (isNumeric && Number.isInteger(num)) {
-    console.log({
-      trimmed,
-      num,
-      isNumeric,
-      isInt: Number.isInteger(num),
-    })
     const name = getKeyByValue(BaseBlendMode, num)
-    console.log({name})
     if (name === undefined) throw new Error(`Invalid index: ${num}`)
     return { blendIndex: num, blendName: name }
   }

package/src/Clipboard/writeImgBlobToClipboard.ts

@@ -1,7 +1,7 @@
 /**
  * Writes a {@link Blob} image to the system clipboard.
  *
- * @param blob - The image {@link Blob} (typically `image/png`) to copy.
+ * @param blob - The image blob (typically `image/png`) to copy.
  * @returns A promise that resolves when the clipboard has been updated.
  */
 export async function writeImgBlobToClipboard(blob: Blob): Promise<void> {

package/src/History/PixelMutator/mutatorApplyAlphaMask.ts

@@ -8,6 +8,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyAlphaMask = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     applyAlphaMaskToPixelData = defaults.applyAlphaMaskToPixelData,

package/src/History/PixelMutator/mutatorApplyBinaryMask.ts

@@ -8,6 +8,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyBinaryMask = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     applyBinaryMaskToPixelData = defaults.applyBinaryMaskToPixelData,

package/src/History/PixelMutator/mutatorApplyCircleBrush.ts

@@ -1,4 +1,12 @@
-import type { BlendColor32, Color32, HistoryMutator, Rect } from '../../_types'
+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'
@@ -10,6 +18,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyCircleBrush = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     applyCircleBrushToPixelData = defaults.applyCircleBrushToPixelData,
@@ -19,21 +30,29 @@ export const mutatorApplyCircleBrush = ((writer: PixelWriter<any>, deps: 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,
-      brushSize: number,
+      brush: CircleBrushAlphaMask,
       alpha = 255,
-      fallOff: (dist: number) => number,
       blendFn?: BlendColor32,
     ) {
 
       const bounds = getCircleBrushOrPencilBounds(
         centerX,
         centerY,
-        brushSize,
+        brush.size,
         writer.target.width,
         writer.target.height,
         boundsOut,
@@ -48,10 +67,10 @@ export const mutatorApplyCircleBrush = ((writer: PixelWriter<any>, deps: Deps =
         color,
         centerX,
         centerY,
-        brushSize,
+        brush,
         alpha,
-        fallOff,
         blendFn,
+        blendColorPixelOptions,
         bounds,
       )
     },

package/src/History/PixelMutator/mutatorApplyCircleBrushStroke.ts

@@ -1,9 +1,11 @@
 import {
   type AlphaMask,
   type BlendColor32,
+  type CircleBrushAlphaMask,
   type Color32,
   type ColorBlendMaskOptions,
   type HistoryMutator,
+  MaskType,
   type Rect,
 } from '../../_types'
 import { forEachLinePoint } from '../../Algorithm/forEachLinePoint'
@@ -22,6 +24,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyCircleBrushStroke = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     forEachLinePoint = defaults.forEachLinePoint,
@@ -53,6 +58,13 @@ export const mutatorApplyCircleBrushStroke = ((writer: PixelWriter<any>, deps: D
     h: 0,
   }
 
+  const mask = {
+    type: MaskType.ALPHA,
+    data: null as unknown as Uint8Array,
+    w: 0,
+    h: 0,
+  }
+
   return {
     applyCircleBrushStroke(
       color: Color32,
@@ -60,70 +72,96 @@ export const mutatorApplyCircleBrushStroke = ((writer: PixelWriter<any>, deps: D
       y0: number,
       x1: number,
       y1: number,
-      brushSize: number,
+      brush: CircleBrushAlphaMask,
       alpha = 255,
-      fallOff: (dist: number) => number,
       blendFn: BlendColor32 = sourceOverPerfect,
     ) {
+      const brushSize = brush.size
+
       const {
         x: bx,
         y: by,
         w: bw,
         h: bh,
-      } = getCircleBrushOrPencilStrokeBounds(x0, y0, x1, y1, brushSize, strokeBoundsOut)
+      } = getCircleBrushOrPencilStrokeBounds(
+        x0,
+        y0,
+        x1,
+        y1,
+        brushSize,
+        strokeBoundsOut,
+      )
 
       if (bw <= 0 || bh <= 0) return
 
-      const mask = new Uint8Array(bw * bh) as AlphaMask
+      mask.data = new Uint8Array(bw * bh)
+      mask.w = bw
+      mask.h = bh
 
-      const r = brushSize / 2
-      const rSqr = r * r
-      const invR = 1 / r
-      const centerOffset = (brushSize % 2 === 0) ? 0.5 : 0
+      const maskData = mask.data
+      const brushData = brush.data
+      const minOffset = brush.minOffset
 
       const targetWidth = writer.target.width
       const targetHeight = writer.target.height
 
-      forEachLinePoint(x0, y0, x1, y1, (px, py) => {
-        // 2. Calculate bounds for this specific stamp
-        const {
-          x: cbx,
-          y: cby,
-          w: cbw,
-          h: cbh,
-        } = getCircleBrushOrPencilBounds(px, py, brushSize, targetWidth, targetHeight, circleBrushBounds)
-
-        writer.accumulator.storeRegionBeforeState(cbx, cby, cbw, cbh)
-
-        const startX = Math.max(bx, cbx)
-        const startY = Math.max(by, cby)
-        const endX = Math.min(bx + bw, cbx + cbw)
-        const endY = Math.min(by + bh, cby + cbh)
-
-        const fPx = Math.floor(px)
-        const fPy = Math.floor(py)
-
-        for (let my = startY; my < endY; my++) {
-          const dy = (my - fPy) + centerOffset
-          const dySqr = dy * dy
-          const maskRowOffset = (my - by) * bw
-
-          for (let mx = startX; mx < endX; mx++) {
-            const dx = (mx - fPx) + centerOffset
-            const dSqr = dx * dx + dySqr
-
-            if (dSqr <= rSqr) {
-              const maskIdx = maskRowOffset + (mx - bx)
-
-              const dist = Math.sqrt(dSqr) * invR
-              const intensity = (fallOff(1 - dist) * 255) | 0
-              if (intensity > mask[maskIdx]) {
-                mask[maskIdx] = intensity
+      forEachLinePoint(
+        x0,
+        y0,
+        x1,
+        y1,
+        (px, py) => {
+          const {
+            x: cbx,
+            y: cby,
+            w: cbw,
+            h: cbh,
+          } = getCircleBrushOrPencilBounds(
+            px,
+            py,
+            brushSize,
+            targetWidth,
+            targetHeight,
+            circleBrushBounds,
+          )
+
+          writer.accumulator.storeRegionBeforeState(
+            cbx,
+            cby,
+            cbw,
+            cbh,
+          )
+
+          const startX = Math.max(bx, cbx)
+          const startY = Math.max(by, cby)
+          const endX = Math.min(bx + bw, cbx + cbw)
+          const endY = Math.min(by + bh, cby + cbh)
+
+          const unclippedStartX = Math.floor(px + minOffset)
+          const unclippedStartY = Math.floor(py + minOffset)
+
+          for (let my = startY; my < endY; my++) {
+            const strokeMaskY = my - by
+            const strokeMaskRowOffset = strokeMaskY * bw
+
+            const brushY = my - unclippedStartY
+            const brushRowOffset = brushY * brushSize
+
+            for (let mx = startX; mx < endX; mx++) {
+              const brushX = mx - unclippedStartX
+              const brushVal = brushData[brushRowOffset + brushX]
+
+              if (brushVal > 0) {
+                const strokeMaskIdx = strokeMaskRowOffset + (mx - bx)
+
+                if (brushVal > maskData[strokeMaskIdx]) {
+                  maskData[strokeMaskIdx] = brushVal
+                }
               }
             }
           }
-        }
-      })
+        },
+      )
 
       blendColorPixelOptions.blendFn = blendFn
       blendColorPixelOptions.alpha = alpha
@@ -132,7 +170,12 @@ export const mutatorApplyCircleBrushStroke = ((writer: PixelWriter<any>, deps: D
       blendColorPixelOptions.w = bw
       blendColorPixelOptions.h = bh
 
-      blendColorPixelDataAlphaMask(writer.target, color, mask, blendColorPixelOptions)
+      blendColorPixelDataAlphaMask(
+        writer.target,
+        color,
+        mask as AlphaMask,
+        blendColorPixelOptions,
+      )
     },
   }
 }) satisfies HistoryMutator<any, Deps>

package/src/History/PixelMutator/mutatorApplyCirclePencil.ts

@@ -1,4 +1,4 @@
-import type { BlendColor32, Color32, HistoryMutator, Rect } from '../../_types'
+import type { BlendColor32, CircleBrushMask, Color32, HistoryMutator, Rect } from '../../_types'
 import { applyCircleBrushToPixelData } from '../../PixelData/applyCircleBrushToPixelData'
 import { getCircleBrushOrPencilBounds } from '../../Rect/getCircleBrushOrPencilBounds'
 import { PixelWriter } from '../PixelWriter'
@@ -6,16 +6,17 @@ import { PixelWriter } from '../PixelWriter'
 const defaults = {
   applyCircleBrushToPixelData,
   getCircleBrushOrPencilBounds,
-  fallOff: () => 1,
 }
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ **/
 export const mutatorApplyCirclePencil = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     applyCircleBrushToPixelData = defaults.applyCircleBrushToPixelData,
     getCircleBrushOrPencilBounds = defaults.getCircleBrushOrPencilBounds,
-    fallOff = defaults.fallOff,
   } = deps
 
   const boundsOut: Rect = { x: 0, y: 0, w: 0, h: 0 }
@@ -25,7 +26,7 @@ export const mutatorApplyCirclePencil = ((writer: PixelWriter<any>, deps: Deps =
       color: Color32,
       centerX: number,
       centerY: number,
-      brushSize: number,
+      brush: CircleBrushMask,
       alpha = 255,
       blendFn?: BlendColor32,
     ) {
@@ -33,7 +34,7 @@ export const mutatorApplyCirclePencil = ((writer: PixelWriter<any>, deps: Deps =
       const bounds = getCircleBrushOrPencilBounds(
         centerX,
         centerY,
-        brushSize,
+        brush.size,
         writer.target.width,
         writer.target.height,
         boundsOut,
@@ -48,9 +49,8 @@ export const mutatorApplyCirclePencil = ((writer: PixelWriter<any>, deps: Deps =
         color,
         centerX,
         centerY,
-        brushSize,
+        brush,
         alpha,
-        fallOff,
         blendFn,
         bounds,
       )

package/src/History/PixelMutator/mutatorApplyCirclePencilStroke.ts

@@ -1,9 +1,11 @@
 import {
   type BinaryMask,
   type BlendColor32,
+  type CircleBrushBinaryMask,
   type Color32,
   type ColorBlendMaskOptions,
   type HistoryMutator,
+  MaskType,
   type Rect,
 } from '../../_types'
 import { forEachLinePoint } from '../../Algorithm/forEachLinePoint'
@@ -22,6 +24,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyCirclePencilStroke = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     forEachLinePoint = defaults.forEachLinePoint,
@@ -53,6 +58,13 @@ export const mutatorApplyCirclePencilStroke = ((writer: PixelWriter<any>, deps:
     h: 0,
   }
 
+  const mask = {
+    type: MaskType.BINARY,
+    data: null as unknown as Uint8Array,
+    w: 0,
+    h: 0,
+  }
+
   return {
     applyCirclePencilStroke(
       color: Color32,
@@ -60,7 +72,7 @@ export const mutatorApplyCirclePencilStroke = ((writer: PixelWriter<any>, deps:
       y0: number,
       x1: number,
       y1: number,
-      brushSize: number,
+      brush: CircleBrushBinaryMask,
       alpha = 255,
       blendFn: BlendColor32 = sourceOverPerfect,
     ) {
@@ -69,54 +81,77 @@ export const mutatorApplyCirclePencilStroke = ((writer: PixelWriter<any>, deps:
         y: by,
         w: bw,
         h: bh,
-      } = getCircleBrushOrPencilStrokeBounds(x0, y0, x1, y1, brushSize, strokeBoundsOut)
+      } = getCircleBrushOrPencilStrokeBounds(
+        x0,
+        y0,
+        x1,
+        y1,
+        brush.size,
+        strokeBoundsOut,
+      )
 
       if (bw <= 0 || bh <= 0) return
 
-      const mask = new Uint8Array(bw * bh) as BinaryMask
-
-      const r = brushSize / 2
-      const rSqr = r * r
-      const centerOffset = (brushSize % 2 === 0) ? 0.5 : 0
+      mask.data = new Uint8Array(bw * bh)
+      mask.w = bw
+      mask.h = bh
 
+      const maskData = mask.data
       const targetWidth = writer.target.width
       const targetHeight = writer.target.height
 
-      forEachLinePoint(x0, y0, x1, y1, (px, py) => {
-        // 2. Calculate bounds for this specific stamp
-        const {
-          x: cbx,
-          y: cby,
-          w: cbw,
-          h: cbh,
-        } = getCircleBrushOrPencilBounds(px, py, brushSize, targetWidth, targetHeight, circlePencilBounds)
-
-        writer.accumulator.storeRegionBeforeState(cbx, cby, cbw, cbh)
-
-        const startX = Math.max(bx, cbx)
-        const startY = Math.max(by, cby)
-        const endX = Math.min(bx + bw, cbx + cbw)
-        const endY = Math.min(by + bh, cby + cbh)
-
-        const fPx = Math.floor(px)
-        const fPy = Math.floor(py)
-
-        for (let my = startY; my < endY; my++) {
-          const dy = (my - fPy) + centerOffset
-          const dySqr = dy * dy
-          const maskRowOffset = (my - by) * bw
-
-          for (let mx = startX; mx < endX; mx++) {
-            const dx = (mx - fPx) + centerOffset
-            const dSqr = dx * dx + dySqr
-
-            if (dSqr <= rSqr) {
-              const maskIdx = maskRowOffset + (mx - bx)
-              mask[maskIdx] = 1
+      forEachLinePoint(
+        x0,
+        y0,
+        x1,
+        y1,
+        (px, py) => {
+          const {
+            x: cbx,
+            y: cby,
+            w: cbw,
+            h: cbh,
+          } = getCircleBrushOrPencilBounds(
+            px,
+            py,
+            brush.size,
+            targetWidth,
+            targetHeight,
+            circlePencilBounds,
+          )
+
+          writer.accumulator.storeRegionBeforeState(
+            cbx,
+            cby,
+            cbw,
+            cbh,
+          )
+
+          const unclippedStartX = Math.floor(px + brush.minOffset)
+          const unclippedStartY = Math.floor(py + brush.minOffset)
+
+          const startX = Math.max(bx, unclippedStartX)
+          const startY = Math.max(by, unclippedStartY)
+          const endX = Math.min(bx + bw, unclippedStartX + brush.w)
+          const endY = Math.min(by + bh, unclippedStartY + brush.h)
+
+          for (let my = startY; my < endY; my++) {
+            const brushY = my - unclippedStartY
+            const maskRowOffset = (my - by) * bw
+            const brushRowOffset = brushY * brush.w
+
+            for (let mx = startX; mx < endX; mx++) {
+              const brushX = mx - unclippedStartX
+              const brushAlpha = brush.data[brushRowOffset + brushX]
+
+              if (brushAlpha > 0) {
+                const maskIdx = maskRowOffset + (mx - bx)
+                maskData[maskIdx] = brushAlpha
+              }
             }
           }
-        }
-      })
+        },
+      )
 
       blendColorPixelOptions.blendFn = blendFn
       blendColorPixelOptions.alpha = alpha
@@ -125,7 +160,12 @@ export const mutatorApplyCirclePencilStroke = ((writer: PixelWriter<any>, deps:
       blendColorPixelOptions.w = bw
       blendColorPixelOptions.h = bh
 
-      blendColorPixelDataBinaryMask(writer.target, color, mask, blendColorPixelOptions)
+      blendColorPixelDataBinaryMask(
+        writer.target,
+        color,
+        mask as BinaryMask,
+        blendColorPixelOptions,
+      )
     },
   }
 }) satisfies HistoryMutator<any, Deps>

package/src/History/PixelMutator/mutatorApplyRectBrush.ts

@@ -10,6 +10,9 @@ const defaults = {
 
 type Deps = Partial<typeof defaults>
 
+/**
+ * @param deps - @hidden
+ */
 export const mutatorApplyRectBrush = ((writer: PixelWriter<any>, deps: Deps = defaults) => {
   const {
     applyRectBrushToPixelData = defaults.applyRectBrushToPixelData,