fix: BROS-125: Allow bitmask eraser to erase single pixels

web/libs/editor/src/components/ImageView/ImageView.jsx

@@ -464,7 +464,7 @@ const PixelGridLayer = observer(({ item }) => {
   const { stageWidth, stageHeight } = item;
   const imageSmallerThanStage = naturalWidth < stageWidth || naturalHeight < stageHeight;
 
-  const step = 1 / (item.imageIsSmallerThanStage ? 1 : item.stageToImageRatio); // image pixel
+  const step = item.stageZoom; // image pixel
 
   const { verticalPoints, horizontalPoints } = useMemo(() => {
     const vPts = [];
@@ -1247,7 +1247,6 @@ const EntireStage = observer(
           item.setStageRef(ref);
         }}
         className={[styles["image-element"], ...imagePositionClassnames].join(" ")}
-        style={{ cursor: "none" }}
         width={size.width}
         height={size.height}
         scaleX={item.zoomScale}
@@ -1289,14 +1288,14 @@ const ImageLayer = observer(({ item }) => {
 
   const { width, height } = useMemo(() => {
     return {
-      width: Math.min(imageEntity.naturalWidth, item.stageWidth),
-      height: Math.min(imageEntity.naturalHeight, item.stageHeight),
+      width: imageEntity.naturalWidth,
+      height: imageEntity.naturalHeight,
     };
   }, [imageEntity.naturalWidth, imageEntity.naturalHeight, item.stageWidth, item.stageHeight]);
 
   return image ? (
     <>
-      <Layer imageSmoothingEnabled={item.smoothing}>
+      <Layer imageSmoothingEnabled={item.smoothing} scale={{ x: item.stageZoom, y: item.stageZoom }}>
         <KonvaImage image={image} width={width} height={height} listening={false} />
       </Layer>
     </>
@@ -1335,13 +1334,38 @@ const CursorLayer = observer(({ item, tool }) => {
   }, [item.stageRef]);
 
   const size = useMemo(() => {
-    return (item.imageIsSmallerThanStage ? tool.strokeWidth : tool.strokeWidth / item.stageToImageRatio) + 2;
-  }, [tool.strokeWidth, item.imageIsSmallerThanStage, item.stageToImageRatio]);
+    return tool.strokeWidth * item.stageZoom;
+  }, [tool.strokeWidth, item.stageZoom]);
 
   return visible ? (
-    <Layer>
-      <Circle x={x} y={y} radius={size} stroke="black" strokeWidth={3} strokeScaleEnabled={false} />
-      <Circle x={x} y={y} radius={size} stroke="white" strokeWidth={1} strokeScaleEnabled={false} />
+    <Layer listening={false}>
+      {tool.strokeWidth <= 2 ? (
+        <>
+          <Rect
+            x={x - size / 2}
+            y={y - size / 2}
+            width={size}
+            height={size}
+            stroke="black"
+            strokeWidth={3}
+            strokeScaleEnabled={false}
+          />
+          <Rect
+            x={x - size / 2}
+            y={y - size / 2}
+            width={size}
+            height={size}
+            stroke="white"
+            strokeWidth={1}
+            strokeScaleEnabled={false}
+          />
+        </>
+      ) : (
+        <>
+          <Circle x={x} y={y} radius={size} stroke="black" strokeWidth={3} strokeScaleEnabled={false} />
+          <Circle x={x} y={y} radius={size} stroke="white" strokeWidth={1} strokeScaleEnabled={false} />
+        </>
+      )}
     </Layer>
   ) : null;
 });

web/libs/editor/src/regions/BitmaskRegion.jsx

@@ -86,10 +86,6 @@ const Model = types
         }
       },
 
-      get scale() {
-        return self.parent?.imageIsSmallerThanStage ? 1 : self.drawingOffset.scale;
-      },
-
       /**
        * Brushes are processed in pixels, so percentages are derived values for them,
        * unlike for other tools.
@@ -118,21 +114,6 @@ const Model = types
         };
       },
 
-      get drawingOffset() {
-        const { dimensions } = self;
-
-        const scale = Math.min(
-          dimensions.stageWidth / dimensions.imageWidth,
-          dimensions.stageHeight / dimensions.imageHeight,
-        );
-
-        return {
-          offsetX: dimensions.imageWidth - dimensions.stageWidth / scale,
-          offsetY: dimensions.imageHeight - dimensions.stageHeight / scale,
-          scale,
-        };
-      },
-
       getImageDataURL() {
         const canvas = self.getImageSnapshotCanvas();
         const imageDataURL = canvas.toDataURL("image/png");
@@ -243,11 +224,10 @@ const Model = types
       canvasSize() {
         if (!self.parent) return { width: 0, height: 0 };
         const ent = self.parent.currentImageEntity;
-        const scale = self.parent.imageIsSmallerThanStage ? 1 : self.parent.stageToImageRatio;
 
         return {
-          width: ent.naturalWidth / scale,
-          height: ent.naturalHeight / scale,
+          width: ent.naturalWidth * self.parent.stageZoom,
+          height: ent.naturalHeight * self.parent.stageZoom,
         };
       },
 
@@ -291,7 +271,7 @@ const Model = types
       },
 
       updateBBox() {
-        self.setBBox(getCanvasPixelBounds(self.offscreenCanvas, self.scale));
+        self.setBBox(getCanvasPixelBounds(self.offscreenCanvas, self.parent?.stageZoom ?? 1));
       },
 
       /**
@@ -315,7 +295,6 @@ const Model = types
       beginPath({ type, strokeWidth, opacity = self.opacity, x = 0, y = 0 }) {
         self.object.annotation.pauseAutosave();
 
-        const { drawingOffset: offset } = self;
         const ctx = self.offscreenCanvas.getContext("2d");
 
         // Set up context properties once
@@ -356,13 +335,9 @@ const Model = types
       },
 
       positionToStage(x, y) {
-        const { drawingOffset: offset } = self;
-        const smaller = self.parent.imageIsSmallerThanStage;
-        const ratio = smaller ? 1 : offset.scale;
-
         return {
-          x: Math.floor(x / ratio + offset.offsetX),
-          y: Math.floor(y / ratio + offset.offsetY),
+          x: Math.floor(x / self.parent.stageZoom),
+          y: Math.floor(y / self.parent.stageZoom),
         };
       },
 

web/libs/editor/src/tags/object/Image/Image.js

@@ -284,16 +284,6 @@ const Model = types
       }[self.rotation];
     },
 
-    get stageToImageRatio() {
-      const ent = self.currentImageEntity;
-      return Math.min(ent.naturalWidth / self.stageWidth, ent.naturalHeight / self.stageHeight);
-    },
-
-    get imageIsSmallerThanStage() {
-      const ent = self.currentImageEntity;
-      return ent.naturalWidth < self.stageWidth || ent.naturalHeight < self.stageHeight;
-    },
-
     get stageScale() {
       return self.zoomScale;
     },

web/libs/editor/src/tools/BitmaskErase.jsx

@@ -108,7 +108,7 @@ const _Tool = types
       },
 
       addPoint(x, y) {
-        brush.addPoint(Math.floor(x), Math.floor(y), self.strokeWidth, { erase: true });
+        brush.addPoint(x, y, self.strokeWidth, { erase: true });
       },
 
       setStroke(val) {