pixel-data-js 0.28.0 → 0.30.0

package/dist/index.prod.cjs

@@ -65,6 +65,8 @@ __export(src_exports, {
   colorDistance: () => colorDistance,
   colorDodgeFast: () => colorDodgeFast,
   colorDodgePerfect: () => colorDodgePerfect,
+  commitColorPaintBuffer: () => commitColorPaintBuffer,
+  commitMaskPaintBuffer: () => commitMaskPaintBuffer,
   copyImageData: () => copyImageData,
   copyImageDataLike: () => copyImageDataLike,
   copyMask: () => copyMask,
@@ -137,11 +139,15 @@ __export(src_exports, {
   linearLightPerfect: () => linearLightPerfect,
   makeAlphaMask: () => makeAlphaMask,
   makeAlphaMaskPaintBufferCanvasRenderer: () => makeAlphaMaskPaintBufferCanvasRenderer,
+  makeAlphaMaskPaintBufferCommitter: () => makeAlphaMaskPaintBufferCommitter,
+  makeAlphaMaskPaintBufferManager: () => makeAlphaMaskPaintBufferManager,
   makeAlphaMaskTile: () => makeAlphaMaskTile,
   makeBinaryMask: () => makeBinaryMask,
   makeBinaryMaskFromAlphaMask: () => makeBinaryMaskFromAlphaMask,
   makeBinaryMaskOutline: () => makeBinaryMaskOutline,
   makeBinaryMaskPaintBufferCanvasRenderer: () => makeBinaryMaskPaintBufferCanvasRenderer,
+  makeBinaryMaskPaintBufferCommitter: () => makeBinaryMaskPaintBufferCommitter,
+  makeBinaryMaskPaintBufferManager: () => makeBinaryMaskPaintBufferManager,
   makeBinaryMaskTile: () => makeBinaryMaskTile,
   makeBlendModeRegistry: () => makeBlendModeRegistry,
   makeCanvasFrameRenderer: () => makeCanvasFrameRenderer,
@@ -152,6 +158,8 @@ __export(src_exports, {
   makeClippedBlit: () => makeClippedBlit,
   makeClippedRect: () => makeClippedRect,
   makeColorPaintBufferCanvasRenderer: () => makeColorPaintBufferCanvasRenderer,
+  makeColorPaintBufferCommitter: () => makeColorPaintBufferCommitter,
+  makeColorPaintBufferManager: () => makeColorPaintBufferManager,
   makeFastBlendModeRegistry: () => makeFastBlendModeRegistry,
   makeFullPixelMutator: () => makeFullPixelMutator,
   makeHistoryAction: () => makeHistoryAction,
@@ -2176,13 +2184,13 @@ function makeReusableCanvasMeta(factory) {
 
 // src/Canvas/CanvasFrameRenderer.ts
 function makeCanvasFrameRenderer(reusableCanvasFactory = makeReusableOffscreenCanvas) {
-  const bufferCanvas = reusableCanvasFactory();
+  const getBuffer = reusableCanvasFactory();
   return function renderCanvasFrame(pixelCanvas, scale, getImageData, drawPixelLayer, drawScreenLayer) {
     const canvas = pixelCanvas.canvas;
     const ctx = pixelCanvas.ctx;
     const w = canvas.width;
     const h = canvas.height;
-    const buffer = bufferCanvas(w, h);
+    const buffer = getBuffer(w, h);
     const img = getImageData();
     if (img) {
       buffer.ctx.putImageData(img, 0, 0);
@@ -2307,19 +2315,17 @@ function applyPatchTiles(target, tiles, tileSize) {
 }
 
 // src/History/HistoryAction.ts
-function makeHistoryAction(config, accumulator, patch, after, afterUndo, afterRedo, applyPatchTilesFn = applyPatchTiles) {
+function makeHistoryAction(config, accumulator, patch, afterUndo, afterRedo, applyPatchTilesFn = applyPatchTiles) {
   const target = config.target;
   const tileSize = config.tileSize;
   return {
     undo: () => {
       applyPatchTilesFn(target, patch.beforeTiles, tileSize);
-      afterUndo?.();
-      after?.();
+      afterUndo?.(patch);
     },
     redo: () => {
       applyPatchTilesFn(target, patch.afterTiles, tileSize);
-      afterRedo?.();
-      after?.();
+      afterRedo?.(patch);
     },
     dispose: () => accumulator.recyclePatch(patch)
   };
@@ -5269,7 +5275,6 @@ var AlphaMaskPaintBuffer = class {
     w: 0,
     h: 0
   };
-  blendColorPixelDataAlphaMaskFn = blendColorPixelDataAlphaMask;
   forEachLinePointFn = forEachLinePoint;
   trimRectBoundsFn = trimRectBounds;
   eachTileInBoundsFn = eachTileInBounds;
@@ -5408,88 +5413,11 @@ var AlphaMaskPaintBuffer = class {
     });
     return changed;
   }
-  opts = {
-    alpha: 255,
-    blendFn: sourceOverPerfect,
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-  commit(accumulator, color, alpha = 255, blendFn = sourceOverPerfect) {
-    const blendColorPixelDataAlphaMaskFn = this.blendColorPixelDataAlphaMaskFn;
-    const tileShift = this.config.tileShift;
-    const lookup = this.lookup;
-    const opts = this.opts;
-    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(blendColorPixelDataAlphaMaskFn(this.config.target, color, tile, opts));
-      }
-    }
-    this.clear();
-  }
   clear() {
     this.tilePool.releaseTiles(this.lookup);
   }
 };
 
-// src/Paint/AlphaMaskPaintBufferCanvasRenderer.ts
-function makeAlphaMaskPaintBufferCanvasRenderer(paintBuffer, offscreenCanvasClass = OffscreenCanvas) {
-  const config = paintBuffer.config;
-  const tileSize = config.tileSize;
-  const tileShift = config.tileShift;
-  const tileArea = config.tileArea;
-  const lookup = paintBuffer.lookup;
-  const canvas = new offscreenCanvasClass(tileSize, tileSize);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
-  const bridge = makePixelData(new ImageData(tileSize, tileSize));
-  const view32 = bridge.data;
-  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
-    if (alpha === 0) return;
-    const baseSrcAlpha = color >>> 24;
-    const colorRGB = color & 16777215;
-    if (baseSrcAlpha === 0) return;
-    targetCtx.globalAlpha = alpha / 255;
-    targetCtx.globalCompositeOperation = compOperation;
-    for (let i = 0; i < lookup.length; i++) {
-      const tile = lookup[i];
-      if (tile) {
-        const data8 = tile.data;
-        view32.fill(0);
-        for (let p = 0; p < tileArea; p++) {
-          const maskA = data8[p];
-          if (maskA === 0) continue;
-          if (maskA === 255) {
-            view32[p] = color;
-          } else {
-            const t = baseSrcAlpha * maskA + 128;
-            const finalA = t + (t >> 8) >> 8;
-            view32[p] = (colorRGB | finalA << 24) >>> 0;
-          }
-        }
-        const dx = tile.tx << tileShift;
-        const dy = tile.ty << tileShift;
-        ctx.putImageData(bridge.imageData, 0, 0);
-        targetCtx.drawImage(canvas, dx, dy);
-      }
-    }
-    targetCtx.globalAlpha = 1;
-    targetCtx.globalCompositeOperation = "source-over";
-  };
-}
-
 // src/Paint/BinaryMaskPaintBuffer.ts
 var BinaryMaskPaintBuffer = class {
   constructor(config, tilePool) {
@@ -5504,7 +5432,6 @@ var BinaryMaskPaintBuffer = class {
     w: 0,
     h: 0
   };
-  blendColorPixelDataBinaryMaskFn = blendColorPixelDataBinaryMask;
   forEachLinePointFn = forEachLinePoint;
   trimRectBoundsFn = trimRectBounds;
   eachTileInBoundsFn = eachTileInBounds;
@@ -5595,87 +5522,16 @@ var BinaryMaskPaintBuffer = class {
     });
     return changed;
   }
-  opts = {
-    alpha: 255,
-    blendFn: sourceOverPerfect,
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
-  };
-  commit(accumulator, color, alpha = 255, blendFn = sourceOverPerfect) {
-    const blendColorPixelDataBinaryMaskFn = this.blendColorPixelDataBinaryMaskFn;
-    const tileShift = this.config.tileShift;
-    const lookup = this.lookup;
-    const opts = this.opts;
-    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(blendColorPixelDataBinaryMaskFn(this.config.target, color, tile, opts));
-      }
-    }
-    this.clear();
-  }
   clear() {
     this.tilePool.releaseTiles(this.lookup);
   }
 };
 
-// src/Paint/BinaryMaskPaintBufferCanvasRenderer.ts
-function makeBinaryMaskPaintBufferCanvasRenderer(paintBuffer, offscreenCanvasClass = OffscreenCanvas) {
-  const config = paintBuffer.config;
-  const tileSize = config.tileSize;
-  const tileShift = config.tileShift;
-  const tileArea = config.tileArea;
-  const lookup = paintBuffer.lookup;
-  const canvas = new offscreenCanvasClass(tileSize, tileSize);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
-  const bridge = makePixelData(new ImageData(tileSize, tileSize));
-  const view32 = bridge.data;
-  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
-    if (alpha === 0) return;
-    const baseSrcAlpha = color >>> 24;
-    if (baseSrcAlpha === 0) return;
-    targetCtx.globalAlpha = alpha / 255;
-    targetCtx.globalCompositeOperation = compOperation;
-    for (let i = 0; i < lookup.length; i++) {
-      const tile = lookup[i];
-      if (tile) {
-        const data8 = tile.data;
-        view32.fill(0);
-        for (let p = 0; p < tileArea; p++) {
-          if (data8[p] === 1) {
-            view32[p] = color;
-          }
-        }
-        const dx = tile.tx << tileShift;
-        const dy = tile.ty << tileShift;
-        ctx.putImageData(bridge.imageData, 0, 0);
-        targetCtx.drawImage(canvas, dx, dy);
-      }
-    }
-    targetCtx.globalAlpha = 1;
-    targetCtx.globalCompositeOperation = "source-over";
-  };
-}
-
 // src/Paint/ColorPaintBuffer.ts
 var ColorPaintBuffer = class {
-  constructor(config, tilePool, blendPixelDataFn = blendPixelData) {
+  constructor(config, tilePool) {
     this.config = config;
     this.tilePool = tilePool;
-    this.blendPixelDataFn = blendPixelDataFn;
     this.lookup = [];
   }
   lookup;
@@ -5826,48 +5682,246 @@ var ColorPaintBuffer = class {
     });
     return changed;
   }
-  opts = {
-    alpha: 255,
-    blendFn: sourceOverPerfect,
-    x: 0,
-    y: 0,
-    w: 0,
-    h: 0
+  clear() {
+    this.tilePool.releaseTiles(this.lookup);
+  }
+};
+
+// src/Paint/Commit/commitMaskPaintBuffer.ts
+var SCRATCH_OPTS = {
+  alpha: 255,
+  blendFn: sourceOverPerfect,
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0
+};
+function commitMaskPaintBuffer(accumulator, paintBuffer, color, alpha = 255, blendFn = sourceOverPerfect, blendColorPixelDataMaskFn) {
+  const config = accumulator.config;
+  const tileShift = config.tileShift;
+  const lookup = paintBuffer.lookup;
+  SCRATCH_OPTS.alpha = alpha;
+  SCRATCH_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;
+      SCRATCH_OPTS.x = dx;
+      SCRATCH_OPTS.y = dy;
+      SCRATCH_OPTS.w = tile.w;
+      SCRATCH_OPTS.h = tile.h;
+      didChange(blendColorPixelDataMaskFn(config.target, color, tile, SCRATCH_OPTS));
+    }
+  }
+  paintBuffer.clear();
+}
+
+// src/Paint/Commit/AlphaMaskPaintBufferCommitter.ts
+function makeAlphaMaskPaintBufferCommitter(accumulator, paintBuffer) {
+  return function commitAlphaMaskPaintBufferToAccumulator(color, alpha = 255, blendFn = sourceOverPerfect) {
+    return commitMaskPaintBuffer(accumulator, paintBuffer, color, alpha, blendFn, blendColorPixelDataAlphaMask);
   };
-  commit(accumulator, 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;
+}
+
+// src/Internal/_constants.ts
+var DEFAULT_CANVAS_FACTORY = (w, h) => new OffscreenCanvas(w, h);
+
+// src/Tile/MaskTile.ts
+var makeAlphaMaskTile = (id, tx, ty, tileSize, tileArea) => {
+  return {
+    tileType: 1 /* MASK */,
+    type: 0 /* ALPHA */,
+    data: new Uint8Array(tileArea),
+    w: tileSize,
+    h: tileSize,
+    id,
+    tx,
+    ty
+  };
+};
+var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
+  return {
+    tileType: 1 /* MASK */,
+    type: 1 /* BINARY */,
+    data: new Uint8Array(tileArea),
+    w: tileSize,
+    h: tileSize,
+    id,
+    tx,
+    ty
+  };
+};
+
+// src/Paint/Render/AlphaMaskPaintBufferCanvasRenderer.ts
+function makeAlphaMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
+  const config = paintBuffer.config;
+  const tileSize = config.tileSize;
+  const tileShift = config.tileShift;
+  const tileArea = config.tileArea;
+  const lookup = paintBuffer.lookup;
+  const canvas = canvasFactory(tileSize, tileSize);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
+  ctx.imageSmoothingEnabled = false;
+  const bridge = makePixelData(new ImageData(tileSize, tileSize));
+  const view32 = bridge.data;
+  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
+    if (alpha === 0) return;
+    const baseSrcAlpha = color >>> 24;
+    const colorRGB = color & 16777215;
+    if (baseSrcAlpha === 0) return;
+    targetCtx.globalAlpha = alpha / 255;
+    targetCtx.globalCompositeOperation = compOperation;
     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 data8 = tile.data;
+        view32.fill(0);
+        for (let p = 0; p < tileArea; p++) {
+          const maskA = data8[p];
+          if (maskA === 0) continue;
+          if (maskA === 255) {
+            view32[p] = color;
+          } else {
+            const t = baseSrcAlpha * maskA + 128;
+            const finalA = t + (t >> 8) >> 8;
+            view32[p] = (colorRGB | finalA << 24) >>> 0;
+          }
+        }
         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));
+        ctx.putImageData(bridge.imageData, 0, 0);
+        targetCtx.drawImage(canvas, dx, dy);
       }
     }
-    this.clear();
-  }
-  clear() {
-    this.tilePool.releaseTiles(this.lookup);
-  }
+    targetCtx.globalAlpha = 1;
+    targetCtx.globalCompositeOperation = "source-over";
+  };
+}
+
+// src/Paint/Commit/AlphaMaskPaintBufferManager.ts
+function makeAlphaMaskPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
+  const pool = new TilePool(writer.config, makeAlphaMaskTile);
+  const buffer = new AlphaMaskPaintBuffer(writer.config, pool);
+  const draw = makeAlphaMaskPaintBufferCanvasRenderer(buffer, canvasFactory);
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeAlphaMaskPaintBufferCommitter(writer.accumulator, buffer),
+    draw
+  };
+}
+
+// src/Paint/Commit/BinaryMaskPaintBufferCommitter.ts
+function makeBinaryMaskPaintBufferCommitter(accumulator, paintBuffer) {
+  return function commitBinaryMaskPaintBufferToAccumulator(color, alpha = 255, blendFn = sourceOverPerfect) {
+    return commitMaskPaintBuffer(accumulator, paintBuffer, color, alpha, blendFn, blendColorPixelDataBinaryMask);
+  };
+}
+
+// src/Paint/Render/BinaryMaskPaintBufferCanvasRenderer.ts
+function makeBinaryMaskPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
+  const config = paintBuffer.config;
+  const tileSize = config.tileSize;
+  const tileShift = config.tileShift;
+  const tileArea = config.tileArea;
+  const lookup = paintBuffer.lookup;
+  const canvas = canvasFactory(tileSize, tileSize);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
+  ctx.imageSmoothingEnabled = false;
+  const bridge = makePixelData(new ImageData(tileSize, tileSize));
+  const view32 = bridge.data;
+  return function drawPaintBuffer(targetCtx, color, alpha = 255, compOperation = "source-over") {
+    if (alpha === 0) return;
+    const baseSrcAlpha = color >>> 24;
+    if (baseSrcAlpha === 0) return;
+    targetCtx.globalAlpha = alpha / 255;
+    targetCtx.globalCompositeOperation = compOperation;
+    for (let i = 0; i < lookup.length; i++) {
+      const tile = lookup[i];
+      if (tile) {
+        const data8 = tile.data;
+        view32.fill(0);
+        for (let p = 0; p < tileArea; p++) {
+          if (data8[p] === 1) {
+            view32[p] = color;
+          }
+        }
+        const dx = tile.tx << tileShift;
+        const dy = tile.ty << tileShift;
+        ctx.putImageData(bridge.imageData, 0, 0);
+        targetCtx.drawImage(canvas, dx, dy);
+      }
+    }
+    targetCtx.globalAlpha = 1;
+    targetCtx.globalCompositeOperation = "source-over";
+  };
+}
+
+// src/Paint/Commit/BinaryMaskPaintBufferManager.ts
+function makeBinaryMaskPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
+  const pool = new TilePool(writer.config, makeBinaryMaskTile);
+  const buffer = new BinaryMaskPaintBuffer(writer.config, pool);
+  const draw = makeBinaryMaskPaintBufferCanvasRenderer(buffer, canvasFactory);
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeBinaryMaskPaintBufferCommitter(writer.accumulator, buffer),
+    draw
+  };
+}
+
+// src/Paint/Commit/commitColorPaintBuffer.ts
+var SCRATCH_OPTS2 = {
+  alpha: 255,
+  blendFn: sourceOverPerfect,
+  x: 0,
+  y: 0,
+  w: 0,
+  h: 0
 };
+function commitColorPaintBuffer(accumulator, paintBuffer, alpha = 255, blendFn = sourceOverPerfect, blendPixelDataFn = blendPixelData) {
+  const config = accumulator.config;
+  const tileShift = config.tileShift;
+  const lookup = paintBuffer.lookup;
+  SCRATCH_OPTS2.alpha = alpha;
+  SCRATCH_OPTS2.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;
+      SCRATCH_OPTS2.x = dx;
+      SCRATCH_OPTS2.y = dy;
+      SCRATCH_OPTS2.w = tile.w;
+      SCRATCH_OPTS2.h = tile.h;
+      didChange(blendPixelDataFn(config.target, tile, SCRATCH_OPTS2));
+    }
+  }
+  paintBuffer.clear();
+}
 
-// src/Paint/ColorPaintBufferCanvasRenderer.ts
-function makeColorPaintBufferCanvasRenderer(paintBuffer, offscreenCanvasClass = OffscreenCanvas) {
+// src/Paint/Commit/ColorPaintBufferCommitter.ts
+function makeColorPaintBufferCommitter(accumulator, paintBuffer) {
+  return function commitColorPaintBufferToAccumulator(alpha = 255, blendFn = sourceOverPerfect) {
+    return commitColorPaintBuffer(accumulator, paintBuffer, alpha, blendFn, blendPixelData);
+  };
+}
+
+// src/Paint/Render/ColorPaintBufferCanvasRenderer.ts
+function makeColorPaintBufferCanvasRenderer(paintBuffer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
   const config = paintBuffer.config;
   const tileSize = config.tileSize;
   const tileShift = config.tileShift;
   const lookup = paintBuffer.lookup;
-  const canvas = new offscreenCanvasClass(tileSize, tileSize);
+  const canvas = canvasFactory(tileSize, tileSize);
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error(CANVAS_CTX_FAILED);
   ctx.imageSmoothingEnabled = false;
@@ -5888,6 +5942,21 @@ function makeColorPaintBufferCanvasRenderer(paintBuffer, offscreenCanvasClass =
   };
 }
 
+// src/Paint/Commit/ColorPaintBufferManager.ts
+function makeColorPaintBufferManager(writer, canvasFactory = DEFAULT_CANVAS_FACTORY) {
+  const pool = new TilePool(writer.config, makePixelTile);
+  const buffer = new ColorPaintBuffer(writer.config, pool);
+  const draw = makeColorPaintBufferCanvasRenderer(buffer, canvasFactory);
+  return {
+    clear: buffer.clear.bind(buffer),
+    paintRect: buffer.paintRect.bind(buffer),
+    paintAlphaMask: buffer.paintAlphaMask.bind(buffer),
+    paintBinaryMask: buffer.paintBinaryMask.bind(buffer),
+    commit: makeColorPaintBufferCommitter(writer.accumulator, buffer),
+    draw
+  };
+}
+
 // src/Paint/makeCirclePaintMask.ts
 function makeCirclePaintAlphaMask(size, fallOff = (d) => d) {
   const area = size * size;
@@ -6025,12 +6094,14 @@ function makeReusablePixelData() {
   };
 }
 
-// src/Paint/PaintCursorRenderer.ts
-function makePaintCursorRenderer(factory = (w, h) => new OffscreenCanvas(w, h)) {
-  const canvas = factory(1, 1);
-  const ctx = canvas.getContext("2d");
-  if (!ctx) throw new Error(CANVAS_CTX_FAILED);
-  ctx.imageSmoothingEnabled = false;
+// src/Paint/Render/PaintCursorRenderer.ts
+function makePaintCursorRenderer(reusableCanvasFactory) {
+  const factory = reusableCanvasFactory ?? makeReusableOffscreenCanvas;
+  const updateBuffer = factory();
+  const {
+    canvas,
+    ctx
+  } = updateBuffer(1, 1);
   const getPixelData = makeReusablePixelData();
   let _color = packColor(0, 255, 255, 255);
   let _scale = 1;
@@ -6047,8 +6118,7 @@ function makePaintCursorRenderer(factory = (w, h) => new OffscreenCanvas(w, h))
     currentMask = paintMask ?? currentMask;
     _scale = scale ?? _scale;
     _color = color ?? _color;
-    canvas.width = currentMask.w * _scale + 2 * _scale;
-    canvas.height = currentMask.h * _scale + 2 * _scale;
+    updateBuffer(currentMask.w * _scale + 2 * _scale, currentMask.h * _scale + 2 * _scale);
     if (currentMask.type === 1 /* BINARY */) {
       if (currentMask.outlineType === 1 /* CIRCLE */) {
         outline = makeCircleBinaryMaskOutline(currentMask.w, _scale);
@@ -6131,7 +6201,7 @@ function blendColorPixelDataMask(dst, color, mask, opts) {
 }
 
 // src/PixelData/blendColorPixelDataPaintAlphaMask.ts
-var SCRATCH_OPTS = {
+var SCRATCH_OPTS3 = {
   x: 0,
   y: 0,
   alpha: 255,
@@ -6140,15 +6210,15 @@ var SCRATCH_OPTS = {
 function blendColorPixelDataPaintAlphaMask(dst, color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
   const tx = x + mask.centerOffsetX;
   const ty = y + mask.centerOffsetY;
-  SCRATCH_OPTS.x = tx;
-  SCRATCH_OPTS.y = ty;
-  SCRATCH_OPTS.alpha = alpha;
-  SCRATCH_OPTS.blendFn = blendFn;
-  return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS);
+  SCRATCH_OPTS3.x = tx;
+  SCRATCH_OPTS3.y = ty;
+  SCRATCH_OPTS3.alpha = alpha;
+  SCRATCH_OPTS3.blendFn = blendFn;
+  return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS3);
 }
 
 // src/PixelData/blendColorPixelDataPaintBinaryMask.ts
-var SCRATCH_OPTS2 = {
+var SCRATCH_OPTS4 = {
   x: 0,
   y: 0,
   alpha: 255,
@@ -6157,15 +6227,15 @@ var SCRATCH_OPTS2 = {
 function blendColorPixelDataPaintBinaryMask(dst, color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
   const tx = x + mask.centerOffsetX;
   const ty = y + mask.centerOffsetY;
-  SCRATCH_OPTS2.x = tx;
-  SCRATCH_OPTS2.y = ty;
-  SCRATCH_OPTS2.alpha = alpha;
-  SCRATCH_OPTS2.blendFn = blendFn;
-  return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS2);
+  SCRATCH_OPTS4.x = tx;
+  SCRATCH_OPTS4.y = ty;
+  SCRATCH_OPTS4.alpha = alpha;
+  SCRATCH_OPTS4.blendFn = blendFn;
+  return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS4);
 }
 
 // src/PixelData/blendColorPixelDataPaintMask.ts
-var SCRATCH_OPTS3 = {
+var SCRATCH_OPTS5 = {
   x: 0,
   y: 0,
   alpha: 255,
@@ -6174,14 +6244,14 @@ var SCRATCH_OPTS3 = {
 function blendColorPixelDataPaintMask(dst, color, mask, x, y, alpha = 255, blendFn = sourceOverPerfect) {
   const tx = x + mask.centerOffsetX;
   const ty = y + mask.centerOffsetY;
-  SCRATCH_OPTS3.x = tx;
-  SCRATCH_OPTS3.y = ty;
-  SCRATCH_OPTS3.alpha = alpha;
-  SCRATCH_OPTS3.blendFn = blendFn;
+  SCRATCH_OPTS5.x = tx;
+  SCRATCH_OPTS5.y = ty;
+  SCRATCH_OPTS5.alpha = alpha;
+  SCRATCH_OPTS5.blendFn = blendFn;
   if (mask.type === 1 /* BINARY */) {
-    return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS3);
+    return blendColorPixelDataBinaryMask(dst, color, mask, SCRATCH_OPTS5);
   } else {
-    return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS3);
+    return blendColorPixelDataAlphaMask(dst, color, mask, SCRATCH_OPTS5);
   }
 }
 
@@ -6195,7 +6265,7 @@ function blendPixelDataMask(target, src, mask, opts) {
 }
 
 // src/PixelData/blendPixelDataPaintBuffer.ts
-var SCRATCH_OPTS4 = {
+var SCRATCH_OPTS6 = {
   x: 0,
   y: 0,
   alpha: 255,
@@ -6209,11 +6279,11 @@ function blendPixelDataPaintBuffer(target, paintBuffer, alpha = 255, blendFn, bl
     if (tile) {
       const x = tile.tx << tileShift;
       const y = tile.ty << tileShift;
-      SCRATCH_OPTS4.x = x;
-      SCRATCH_OPTS4.y = y;
-      SCRATCH_OPTS4.alpha = alpha;
-      SCRATCH_OPTS4.blendFn = blendFn;
-      blendPixelDataFn(target, tile, SCRATCH_OPTS4);
+      SCRATCH_OPTS6.x = x;
+      SCRATCH_OPTS6.y = y;
+      SCRATCH_OPTS6.alpha = alpha;
+      SCRATCH_OPTS6.blendFn = blendFn;
+      blendPixelDataFn(target, tile, SCRATCH_OPTS6);
     }
   }
 }
@@ -6496,32 +6566,6 @@ function writePaintBufferToPixelData(target, paintBuffer, writePixelDataBufferFn
     }
   }
 }
-
-// src/Tile/MaskTile.ts
-var makeAlphaMaskTile = (id, tx, ty, tileSize, tileArea) => {
-  return {
-    tileType: 1 /* MASK */,
-    type: 0 /* ALPHA */,
-    data: new Uint8Array(tileArea),
-    w: tileSize,
-    h: tileSize,
-    id,
-    tx,
-    ty
-  };
-};
-var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
-  return {
-    tileType: 1 /* MASK */,
-    type: 1 /* BINARY */,
-    data: new Uint8Array(tileArea),
-    w: tileSize,
-    h: tileSize,
-    id,
-    tx,
-    ty
-  };
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlphaMaskPaintBuffer,
@@ -6569,6 +6613,8 @@ var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
   colorDistance,
   colorDodgeFast,
   colorDodgePerfect,
+  commitColorPaintBuffer,
+  commitMaskPaintBuffer,
   copyImageData,
   copyImageDataLike,
   copyMask,
@@ -6641,11 +6687,15 @@ var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
   linearLightPerfect,
   makeAlphaMask,
   makeAlphaMaskPaintBufferCanvasRenderer,
+  makeAlphaMaskPaintBufferCommitter,
+  makeAlphaMaskPaintBufferManager,
   makeAlphaMaskTile,
   makeBinaryMask,
   makeBinaryMaskFromAlphaMask,
   makeBinaryMaskOutline,
   makeBinaryMaskPaintBufferCanvasRenderer,
+  makeBinaryMaskPaintBufferCommitter,
+  makeBinaryMaskPaintBufferManager,
   makeBinaryMaskTile,
   makeBlendModeRegistry,
   makeCanvasFrameRenderer,
@@ -6656,6 +6706,8 @@ var makeBinaryMaskTile = (id, tx, ty, tileSize, tileArea) => {
   makeClippedBlit,
   makeClippedRect,
   makeColorPaintBufferCanvasRenderer,
+  makeColorPaintBufferCommitter,
+  makeColorPaintBufferManager,
   makeFastBlendModeRegistry,
   makeFullPixelMutator,
   makeHistoryAction,