copper3d 3.4.5 → 3.4.7

package/dist/bundle.esm.js

@@ -40606,86 +40606,6 @@ function switchPencilIcon(icon, urls) {
     }
     return url;
 }
-function switchEraserSize(size, urls) {
-    let url = "";
-    if (!!urls && urls.length > 0) {
-        if (size <= 3) {
-            url = `url(${urls[0]}) 3 3, crosshair`;
-        }
-        else if (3 < size && size <= 8) {
-            url = `url(${urls[1]}) 8 8, crosshair`;
-        }
-        else if (8 < size && size <= 13) {
-            url = `url(${urls[2]}) 13 13, crosshair`;
-        }
-        else if (13 < size && size <= 18) {
-            url = `url(${urls[3]}) 18 18, crosshair`;
-        }
-        else if (18 < size && size <= 23) {
-            url = `url(${urls[4]}) 23 23, crosshair`;
-        }
-        else if (23 < size && size <= 28) {
-            url = `url(${urls[5]}) 28 28, crosshair`;
-        }
-        else if (28 < size && size <= 33) {
-            url = `url(${urls[6]}) 33 33, crosshair`;
-        }
-        else if (33 < size && size <= 38) {
-            url = `url(${urls[7]}) 38 38, crosshair`;
-        }
-        else if (38 < size && size <= 43) {
-            url = `url(${urls[8]}) 43 43, crosshair`;
-        }
-        else if (43 < size && size <= 48) {
-            url = `url(${urls[9]}) 48 48, crosshair`;
-        }
-        else if (48 < size && size <= 53) {
-            url = `url(${urls[10]}) 52 52, crosshair`;
-        }
-        else {
-            url = `url(${urls[11]}) 52 52, crosshair`;
-        }
-    }
-    else {
-        if (size <= 3) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_3.png) 3 3, crosshair`;
-        }
-        else if (3 < size && size <= 8) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_8.png) 8 8, crosshair`;
-        }
-        else if (8 < size && size <= 13) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_13.png) 13 13, crosshair`;
-        }
-        else if (13 < size && size <= 18) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_18.png) 18 18, crosshair`;
-        }
-        else if (18 < size && size <= 23) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_23.png) 23 23, crosshair`;
-        }
-        else if (23 < size && size <= 28) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_28.png) 28 28, crosshair`;
-        }
-        else if (28 < size && size <= 33) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_33.png) 33 33, crosshair`;
-        }
-        else if (33 < size && size <= 38) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_38.png) 38 38, crosshair`;
-        }
-        else if (38 < size && size <= 43) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_43.png) 43 43, crosshair`;
-        }
-        else if (43 < size && size <= 48) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_48.png) 48 48, crosshair`;
-        }
-        else if (48 < size && size <= 53) {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_52.png) 52 52, crosshair`;
-        }
-        else {
-            url = `url(https://raw.githubusercontent.com/LinkunGao/copper3d-datasets/main/icons/eraser/circular-cursor_52.png) 52 52, crosshair`;
-        }
-    }
-    return url;
-}
 function throttle(callback, wait) {
     let start = 0;
     return function (event) {
@@ -73002,10 +72922,7 @@ function setupGui(configs) {
         .name("BrushAndEraserSize")
         .min(5)
         .max(50)
-        .step(1)
-        .onChange(() => {
-        updateGuiBrushAndEraserSize();
-    });
+        .step(1);
     actionsFolder.add(configs.gui_states.mode, "eraser").onChange((value) => {
         updateGuiEraserState();
     });
@@ -73133,37 +73050,33 @@ function setupGui(configs) {
         configs.gui_states.viewConfig.readyToUpdate = true;
     });
     actionsFolder.open();
-    const updateGuiBrushAndEraserSize = () => {
-        if (configs.gui_states.mode.eraser) {
-            configs.eraserUrls.length > 0
-                ? (configs.drawingCanvas.style.cursor = switchEraserSize(configs.gui_states.drawing.brushAndEraserSize, configs.eraserUrls))
-                : (configs.drawingCanvas.style.cursor = switchEraserSize(configs.gui_states.drawing.brushAndEraserSize));
-        }
-    };
-    const updatePencilState = () => {
-        if (configs.gui_states.mode.pencil) {
-            // add canvas brush circle move event listeners
-            configs.drawingCanvas.removeEventListener("mouseover", configs.drawingPrameters.handleOnDrawingBrushCricleMove);
-            configs.drawingCanvas.removeEventListener("mouseout", configs.drawingPrameters.handleOnDrawingBrushCricleMove);
+    // Add/remove the hover-tracking listeners that feed the brush/eraser preview
+    // ring (mouseOver position). Present for brush & eraser, removed for pencil.
+    const setBrushHoverTracking = (enabled) => {
+        const handler = configs.drawingPrameters.handleOnDrawingBrushCricleMove;
+        if (enabled) {
+            configs.drawingCanvas.addEventListener("mouseover", handler);
+            configs.drawingCanvas.addEventListener("mouseout", handler);
         }
         else {
-            // add canvas brush circle move event listeners
-            configs.drawingCanvas.addEventListener("mouseover", configs.drawingPrameters.handleOnDrawingBrushCricleMove);
-            configs.drawingCanvas.addEventListener("mouseout", configs.drawingPrameters.handleOnDrawingBrushCricleMove);
+            configs.drawingCanvas.removeEventListener("mouseover", handler);
+            configs.drawingCanvas.removeEventListener("mouseout", handler);
         }
+    };
+    const updatePencilState = () => {
+        // Pencil has no preview ring; brush keeps the hover-tracking listeners.
+        setBrushHoverTracking(!configs.gui_states.mode.pencil);
         configs.drawingCanvas.style.cursor = configs.gui_states.viewConfig.defaultPaintCursor;
     };
     const updateGuiEraserState = () => {
-        // configs.gui_states.mode.eraser = value;
+        // The eraser shows a dashed preview ring (rendered in DrawToolCore.start),
+        // so it needs the same hover-tracking as the brush. The canvas keeps the
+        // default paint cursor; the ring conveys size (resize via Shift+wheel).
         if (configs.gui_states.mode.eraser) {
-            configs.eraserUrls.length > 0
-                ? (configs.drawingCanvas.style.cursor = switchEraserSize(configs.gui_states.drawing.brushAndEraserSize, configs.eraserUrls))
-                : (configs.drawingCanvas.style.cursor = switchEraserSize(configs.gui_states.drawing.brushAndEraserSize));
-        }
-        else {
-            configs.drawingCanvas.style.cursor =
-                configs.gui_states.viewConfig.defaultPaintCursor;
+            setBrushHoverTracking(true);
         }
+        configs.drawingCanvas.style.cursor =
+            configs.gui_states.viewConfig.defaultPaintCursor;
     };
     const updateGuiSphereState = () => {
         var _a, _b, _c, _d;
@@ -73219,7 +73132,6 @@ function setupGui(configs) {
             min: 5,
             max: 50,
             step: 1,
-            onChange: updateGuiBrushAndEraserSize,
         },
         eraser: {
             name: "Eraser",
@@ -74948,18 +74860,11 @@ class DrawingTool extends BaseTool {
         this.drawingLines = [];
         this.isPainting = true;
         this.ctx.protectedData.isDrawing = true;
-        // Set cursor based on mode
-        if (this.ctx.gui_states.mode.eraser) {
-            const urls = this.callbacks.getEraserUrls();
-            this.ctx.protectedData.canvases.drawingCanvas.style.cursor =
-                urls.length > 0
-                    ? switchEraserSize(this.ctx.gui_states.drawing.brushAndEraserSize, urls)
-                    : switchEraserSize(this.ctx.gui_states.drawing.brushAndEraserSize);
-        }
-        else {
-            this.ctx.protectedData.canvases.drawingCanvas.style.cursor =
-                this.ctx.gui_states.viewConfig.defaultPaintCursor;
-        }
+        // Brush and eraser both show their size via the dashed/solid preview ring
+        // rendered in DrawToolCore.start(); the canvas keeps the default paint
+        // cursor underneath. (The eraser previously swapped in a sized PNG cursor.)
+        this.ctx.protectedData.canvases.drawingCanvas.style.cursor =
+            this.ctx.gui_states.viewConfig.defaultPaintCursor;
         // Record draw start position
         this.ctx.nrrd_states.interaction.drawStartPos.x = e.offsetX;
         this.ctx.nrrd_states.interaction.drawStartPos.y = e.offsetY;
@@ -75035,9 +74940,15 @@ class DrawingTool extends BaseTool {
                 this.refreshLayerFromVolume();
             }
             else {
-                // Brush mode: voxels already written during mousemove
-                // Just re-render final state and composite
+                // Brush mode: voxels already written directly into the MaskVolume
+                // during mousemove, so no canvas→voxel bake (syncLayerSliceData) is
+                // needed. But we MUST still notify the backend — unlike pencil/eraser
+                // (which go through syncLayerSliceData) the brush path never fires
+                // onMaskChanged, so brush strokes were silently never persisted via
+                // useReplaceMask. Re-render the final state, then fire onMaskChanged
+                // for the current slice (same pattern as SphereBrushTool.refreshDisplay).
                 this.refreshLayerFromVolume();
+                this.notifyMaskChanged();
             }
         }
         else {
@@ -75091,20 +75002,37 @@ class DrawingTool extends BaseTool {
         return handler;
     }
     /**
-     * Render brush circle preview on the drawing context.
+     * Render the size-preview ring for the brush / eraser on the drawing context.
+     *
+     * - Brush: solid outline in the current brush colour.
+     * - Eraser: red dashed outline (matches the sphereEraser preview), so the
+     *   eraser no longer needs a sized PNG cursor — the ring tracks the live
+     *   `brushAndEraserSize` and is what the user resizes with Shift+wheel.
+     *
+     * Only the pencil has no preview ring (its stroke width is fixed).
      */
-    renderBrushPreview(ctx, width, height) {
+    renderBrushPreview(ctx, _width, _height) {
         if (this.ctx.gui_states.mode.pencil ||
-            this.ctx.gui_states.mode.eraser ||
             !this.ctx.nrrd_states.interaction.mouseOver) {
             return;
         }
-        ctx.clearRect(0, 0, width, height);
-        ctx.fillStyle = this.ctx.gui_states.drawing.brushColor;
+        const isEraser = this.ctx.gui_states.mode.eraser;
+        // No clearRect here: DrawToolCore.start() clears drawingCtx once per frame
+        // before compositing, and this ring is now drawn on top of the mask so it
+        // stays visible during an active stroke (e.g. while Shift+wheel resizing).
+        ctx.save();
         ctx.beginPath();
         ctx.arc(this.ctx.nrrd_states.interaction.mouseOverX, this.ctx.nrrd_states.interaction.mouseOverY, this.ctx.gui_states.drawing.brushAndEraserSize / 2 + 1, 0, Math.PI * 2);
-        ctx.strokeStyle = this.ctx.gui_states.drawing.brushColor;
+        if (isEraser) {
+            ctx.strokeStyle = "#ff4444";
+            ctx.lineWidth = 2;
+            ctx.setLineDash([4, 4]);
+        }
+        else {
+            ctx.strokeStyle = this.ctx.gui_states.drawing.brushColor;
+        }
         ctx.stroke();
+        ctx.restore();
     }
     // ── Brush mode: direct voxel write ────────────────────────────
     /**
@@ -75295,6 +75223,30 @@ class DrawingTool extends BaseTool {
         this.callbacks.compositeAllLayers();
         this.ctx.protectedData.mainPreSlices.mesh.material.map.needsUpdate = true;
     }
+    /**
+     * Notify the backend of the brush stroke by firing onMaskChanged for the
+     * current slice. Brush writes voxels straight into the MaskVolume (no canvas
+     * bake), so we read the authoritative slice back from the volume — mirrors
+     * SphereBrushTool.refreshDisplay's notify path. Brush only ever touches the
+     * current view slice (canvasToVoxel3D fixes the slice axis), so a single
+     * slice notification is sufficient.
+     */
+    notifyMaskChanged() {
+        if (this.ctx.nrrd_states.flags.loadingMaskData)
+            return;
+        try {
+            const layer = this.ctx.gui_states.layerChannel.layer;
+            const vol = this.callbacks.getVolumeForLayer(layer);
+            const channel = this.ctx.gui_states.layerChannel.activeChannel || 1;
+            const axis = this.ctx.protectedData.axis;
+            const sliceIndex = this.ctx.nrrd_states.view.currentSliceIndex;
+            const { data: sliceData, width, height } = vol.getSliceUint8(sliceIndex, axis);
+            this.ctx.callbacks.onMaskChanged(sliceData, layer, channel, sliceIndex, axis, width, height, false);
+        }
+        catch (_a) {
+            // Volume not ready — skip notification
+        }
+    }
     // ── Private helpers ────────────────────────────────────────
     /** Capture pre-draw slice snapshot for undo */
     capturePreDrawSnapshot() {
@@ -76221,7 +76173,6 @@ class DrawToolCore {
             handleOnContrastMouseUp: (ev) => { },
             handleOnContrastMouseLeave: (ev) => { },
         };
-        this.eraserUrls = [];
         this.pencilUrls = [];
         this.undoManager = new UndoManager();
         /** Slice index recorded when paintOnCanvas() starts, guards stale-click */
@@ -76296,7 +76247,6 @@ class DrawToolCore {
             filterDrawedImage: (axis, index) => this.renderer.filterDrawedImage(axis, index),
             getVolumeForLayer: (layer) => this.renderer.getVolumeForLayer(layer),
             pushUndoDelta: (delta) => this.undoManager.push(delta),
-            getEraserUrls: () => this.eraserUrls,
             renderSliceToCanvas: (layer, axis, sliceIndex, buffer, ctx, w, h) => this.renderer.renderSliceToCanvas(layer, axis, sliceIndex, buffer, ctx, w, h),
             getOrCreateSliceBuffer: (axis) => this.renderer.getOrCreateSliceBuffer(axis),
         });
@@ -76308,7 +76258,6 @@ class DrawToolCore {
             getOrCreateSliceBuffer: (axis) => this.renderer.getOrCreateSliceBuffer(axis),
             setEmptyCanvasSize: (axis) => this.setEmptyCanvasSize(axis),
             reloadMasksFromVolume: () => this.reloadMasksFromVolume(),
-            getEraserUrls: () => this.eraserUrls,
         });
     }
     initDrawToolCore() {
@@ -76463,6 +76412,12 @@ class DrawToolCore {
         });
         // Register wheel handler with EventRouter
         this.eventRouter.setWheelHandler((e) => {
+            // Shift + wheel resizes the brush/eraser (like sphereBrush/sphereEraser
+            // radius), independent of whether the left button is held. Consumes the
+            // event so it never falls through to zoom/slice. Pencil is excluded even
+            // though it also uses Shift — see tryBrushEraserResizeWheel.
+            if (this.tryBrushEraserResizeWheel(e))
+                return;
             if (this.activeWheelMode === 'zoom') {
                 this.drawingPrameters.handleMouseZoomSliceWheel(e);
             }
@@ -76476,8 +76431,47 @@ class DrawToolCore {
         // Bind all event listeners
         this.eventRouter.bindAll();
     }
-    setEraserUrls(urls) {
-        this.eraserUrls = urls;
+    /**
+     * Shift + mouse-wheel resize for the brush and eraser tools.
+     *
+     * Mirrors the sphereBrush/sphereEraser "scroll to change radius" UX so the
+     * user no longer has to reach for the B&E Size slider mid-annotation. Active
+     * whenever the EventRouter is in `draw` mode (i.e. Shift is held — with or
+     * without the left button down) and the current tool is brush or eraser.
+     *
+     * Pencil is deliberately excluded: it also draws with Shift, but its stroke
+     * width is fixed and unrelated to `brushAndEraserSize`. Sphere-family tools
+     * keep their own wheel-radius handler (`activeWheelMode === 'sphereBrush'`).
+     *
+     * `gui_states.mode` is the source of truth for the active tool here, not
+     * `eventRouter.getGuiTool()` — the latter is only updated for sphere tools.
+     *
+     * @returns true if the event was handled (and should not fall through to
+     *   the zoom/slice/sphere wheel handlers).
+     */
+    tryBrushEraserResizeWheel(e) {
+        // `draw` mode means Shift is held and neither crosshair nor contrast is
+        // active (EventRouter only enters it for drawing tools under those rules),
+        // so it doubles as the "Shift held, not blocked" gate.
+        if (this.eventRouter.getMode() !== 'draw')
+            return false;
+        const mode = this.state.gui_states.mode;
+        // Brush = no flag set; eraser = mode.eraser. Exclude pencil and all
+        // sphere-family tools.
+        if (mode.pencil || mode.sphere || mode.sphereBrush || mode.sphereEraser) {
+            return false;
+        }
+        e.preventDefault();
+        const drawing = this.state.gui_states.drawing;
+        // Step/bounds match the B&E Size slider config (min 5, max 50, step 1).
+        const next = Math.max(5, Math.min(50, drawing.brushAndEraserSize + (e.deltaY < 0 ? 1 : -1)));
+        if (next === drawing.brushAndEraserSize)
+            return true;
+        drawing.brushAndEraserSize = next;
+        // Both brush and eraser draw a size-preview ring in start() that reads
+        // brushAndEraserSize live, so the new size shows up on the next frame with
+        // no extra work here.
+        return true;
     }
     setPencilIconUrls(urls) {
         this.pencilUrls = urls;
@@ -76646,6 +76640,7 @@ class DrawToolCore {
                 this.state.protectedData.ctxes.drawingCtx.clearRect(0, 0, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
                 this.state.protectedData.ctxes.drawingCtx.globalAlpha =
                     this.state.gui_states.drawing.globalAlpha;
+                const currentMode = this.eventRouter.getMode();
                 if (this.state.protectedData.isDrawing) {
                     this.state.protectedData.ctxes.drawingLayerMasterCtx.lineCap = "round";
                     this.state.protectedData.ctxes.drawingLayerMasterCtx.globalAlpha = 1;
@@ -76654,16 +76649,18 @@ class DrawToolCore {
                         target.ctx.globalAlpha = 1;
                     }
                 }
-                else {
-                    const currentMode = this.eventRouter.getMode();
-                    if (currentMode === 'draw') {
-                        this.drawingTool.renderBrushPreview(this.state.protectedData.ctxes.drawingCtx, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
-                    }
-                    else if (currentMode === 'crosshair' || this.eventRouter.isCrosshairEnabled()) {
-                        this.crosshairTool.renderCrosshair(this.state.protectedData.ctxes.drawingCtx, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
-                    }
+                else if (currentMode === 'crosshair' || this.eventRouter.isCrosshairEnabled()) {
+                    this.crosshairTool.renderCrosshair(this.state.protectedData.ctxes.drawingCtx, this.state.nrrd_states.view.changedWidth, this.state.nrrd_states.view.changedHeight);
                 }
                 this.state.protectedData.ctxes.drawingCtx.drawImage(this.state.protectedData.canvases.drawingCanvasLayerMaster, 0, 0);
+                // Brush/eraser size ring is drawn AFTER the mask composite so it stays
+                // visible during an active stroke (not just on hover) — e.g. while the
+                // user resizes with Shift+wheel mid-paint. Gated on draw mode so it only
+                // shows for brush/eraser with Shift held (renderBrushPreview itself
+                // skips pencil and the no-hover case).
+                if (currentMode === 'draw') {
+                    this.drawingTool.renderBrushPreview(this.state.protectedData.ctxes.drawingCtx);
+                }
                 if (this.state.gui_states.mode.sphere
                     || this.state.gui_states.mode.sphereBrush
                     || this.state.gui_states.mode.sphereEraser) {
@@ -78375,7 +78372,6 @@ class NrrdTools {
             nrrd_states: this.state.nrrd_states,
             drawingCanvas: this.state.protectedData.canvases.drawingCanvas,
             drawingPrameters: this.drawCore.drawingPrameters,
-            eraserUrls: this.drawCore.eraserUrls,
             pencilUrls: this.drawCore.pencilUrls,
             mainPreSlices: this.state.protectedData.mainPreSlices,
             protectedData: this.state.protectedData,
@@ -78408,7 +78404,6 @@ class NrrdTools {
         this.guiCallbacks = {
             updatePencilState: this.guiParameterSettings.pencil.onChange,
             updateEraserState: this.guiParameterSettings.eraser.onChange,
-            updateBrushAndEraserSize: this.guiParameterSettings.brushAndEraserSize.onChange,
             updateSphereState: this.guiParameterSettings.sphere.onChange,
             updateCalDistance: this.guiParameterSettings.activeSphereType.onChange,
             updateWindowHigh: this.guiParameterSettings.windowHigh.onChange,
@@ -78521,9 +78516,9 @@ class NrrdTools {
         return this.state.gui_states.drawing.globalAlpha;
     }
     setBrushSize(size) {
-        var _a;
+        // No cursor side-effect needed: the brush/eraser preview ring reads this
+        // value live each frame (see DrawingTool.renderBrushPreview).
         this.state.gui_states.drawing.brushAndEraserSize = Math.max(5, Math.min(50, size));
-        (_a = this.guiCallbacks) === null || _a === void 0 ? void 0 : _a.updateBrushAndEraserSize();
     }
     getBrushSize() {
         return this.state.gui_states.drawing.brushAndEraserSize;
@@ -78758,9 +78753,6 @@ class NrrdTools {
     enableContrastDragEvents(callback) {
         this.drawCore.setupConrastEvents(callback);
     }
-    setEraserUrls(urls) {
-        this.drawCore.setEraserUrls(urls);
-    }
     setPencilIconUrls(urls) {
         this.drawCore.setPencilIconUrls(urls);
     }
@@ -79450,7 +79442,7 @@ function evaluateElement(element, weights) {
 }
 
 // import * as kiwrious from "copper3d_plugin_heart_k";
-const REVISION = "v3.4.5-beta";
+const REVISION = "v3.4.7-beta";
 console.log(`%cCopper3D Visualisation %cBeta:${REVISION}`, "padding: 3px;color:white; background:#023047", "padding: 3px;color:white; background:#f50a25");
 
 export { CHANNEL_COLORS, CHANNEL_HEX_COLORS, CameraViewPoint, Copper3dTrackballControls, GaussianSmoother, MeshNodeTool, NrrdTools, REVISION, addBoxHelper, addLabelToScene, configKiwriousHeart, convert3DPostoScreenPos, convertScreenPosto3DPos, copperMScene, copperMSceneRenderer, copperRenderer, copperRendererOnDemond, copperScene, copperSceneOnDemond, createTexture2D_NRRD, fullScreenListenner, kiwrious, loading, removeGuiFolderChilden, rgbaToCss, rgbaToHex, setHDRFilePath, throttle };