Merge pull request #68 from low-earth-orbit/eraser-fix

Various small fixes

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "prettier.prettierPath": "./node_modules/prettier",
-  "cSpell.words": ["Konva", "reduxjs"]
+  "cSpell.words": ["Konva", "reduxjs", "trackpad"]
 }

components/Canvas.tsx

@@ -43,7 +43,6 @@ export interface StageSizeType {
 export interface CanvasObjectType {
   id: string;
   type: ObjectType;
-  tool?: ToolType;
   shapeName?: ShapeName;
   stroke?: string; // stroke color
   strokeWidth?: number;
@@ -63,7 +62,7 @@ export interface CanvasObjectType {
   lineHeight?: number;
 }
 
-export type ObjectType = "ink" | "shape" | "text";
+export type ObjectType = "ink" | "eraserStroke" | "shape" | "text";
 
 export type ToolType =
   | "select"
@@ -141,6 +140,10 @@ export default function Canvas() {
           return `url(${basePath}rectangle.svg) 12 12, pointer`;
         case "addOval":
           return `url(${basePath}oval.svg) 12 12, pointer`;
+        case "addTriangle":
+          return `url(${basePath}triangle.svg) 12 12, pointer`;
+        case "addStar":
+          return `url(${basePath}star.svg) 12 12, pointer`;
         case "eraser":
           return `url(${basePath}erase.svg) 12 12, default`;
         default:
@@ -173,13 +176,37 @@ export default function Canvas() {
     localStorage.setItem("canvasState", JSON.stringify(canvasObjects));
   }, [canvasObjects]);
 
+  // Disable default trackpad zoom behavior globally
+  useEffect(() => {
+    const disableZoomAndScroll = (e: WheelEvent) => {
+      // Prevent zoom in/out triggered by ctrlKey + scroll or pinch zoom
+      // allow scroll
+      if (e.ctrlKey || e.deltaY < -1 || e.deltaY > 1) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("wheel", disableZoomAndScroll, { passive: false });
+
+    // Cleanup on component unmount
+    return () => {
+      window.removeEventListener("wheel", disableZoomAndScroll);
+    };
+  }, []);
+
   const handleDelete = useCallback(() => {
     if (selectedObjectId === "") {
       if (canvasObjects.length > 0) {
         setConfirmationModalOpen(true);
       }
     } else {
       dispatch(deleteCanvasObject(selectedObjectId));
+      // Update cursor style
+      const stage = stageRef.current;
+      if (stage) {
+        const container = stage.container();
+        container.style.cursor = "default";
+      }
     }
   }, [dispatch, selectedObjectId, canvasObjects]);
 
@@ -380,8 +407,7 @@ export default function Canvas() {
         const pos = e.target.getStage().getRelativePointerPosition();
         const newLine: CanvasObjectType = {
           id: uuid(),
-          tool: selectedTool, // eraser or pen
-          type: "ink",
+          type: selectedTool === "eraser" ? "eraserStroke" : "ink",
           points: [pos.x, pos.y],
           stroke: strokeColor,
           strokeWidth:
@@ -395,15 +421,17 @@ export default function Canvas() {
     // deselect object when clicked on empty area or clicked on an ink object (created by pen or eraser)
     if (
       e.target === e.target.getStage() ||
-      e.target.attrs.name.includes("ink")
+      e.target.attrs.name.includes("ink") ||
+      e.target.attrs.name.includes("eraserStroke")
     ) {
       dispatch(selectCanvasObject(""));
     }
 
     // side panel
     if (
       e.target === e.target.getStage() ||
-      e.target.attrs.name?.includes("ink")
+      e.target.attrs.name?.includes("ink") ||
+      e.target.attrs.name?.includes("eraserStroke")
     ) {
       setShapePanelVisible(false);
       setTextPanelVisible(false);
@@ -416,7 +444,12 @@ export default function Canvas() {
 
   const handleMouseMove = (e: any) => {
     // Creating new text/object is in progress
-    if (isInProgress && newObject && newObject.type !== "ink") {
+    if (
+      isInProgress &&
+      newObject &&
+      newObject.type !== "ink" &&
+      newObject.type !== "eraserStroke"
+    ) {
       const stage = e.target.getStage();
       const point = stage.getRelativePointerPosition();
 

components/ink/InkLayer.tsx

@@ -8,15 +8,21 @@ type Props = {
 
 export default function InkLayer({ objects, newObject }: Props) {
   const lines = [
-    ...objects.filter((obj: CanvasObjectType) => obj.type === "ink"),
-    ...(newObject && newObject.type === "ink" ? [newObject] : []),
+    ...objects.filter(
+      (obj: CanvasObjectType) =>
+        obj.type === "ink" || obj.type === "eraserStroke",
+    ),
+    ...(newObject &&
+    (newObject.type === "ink" || newObject.type === "eraserStroke")
+      ? [newObject]
+      : []),
   ];
 
   return (
     <Layer>
       {lines.map((line, i) => (
         <Line
-          name={`ink-${line.tool === "eraser" ? "eraser" : "pen"}`}
+          name={line.type}
           key={i}
           points={line.points}
           stroke={line.stroke}
@@ -25,7 +31,7 @@ export default function InkLayer({ objects, newObject }: Props) {
           lineCap="round"
           lineJoin="round"
           globalCompositeOperation={
-            line.tool === "eraser" ? "destination-out" : "source-over"
+            line.type === "eraserStroke" ? "destination-out" : "source-over"
           }
         />
       ))}

components/text/TextField.tsx

@@ -88,6 +88,8 @@ export default function TextField({
 
       // create textarea and add it to the document
       const textarea = document.createElement("textarea");
+      textarea.wrap = "soft";
+
       document.body.appendChild(textarea);
 
       // adjust the styles to match
@@ -127,6 +129,7 @@ export default function TextField({
       textarea.style.color = node.fill() as string;
       textarea.style.transformOrigin = "left top";
       textarea.style.scale = zoomLevel.toString();
+      textarea.style.textWrap = "wrap";
 
       // set rotation
       const rotation = node.rotation();

components/toolbar/Toolbar.tsx

@@ -19,8 +19,8 @@ import {
   LineWeightRounded,
   CropSquareRounded,
   CircleOutlined,
-  ChangeHistoryOutlined,
-  StarBorderOutlined,
+  ChangeHistoryRounded,
+  StarBorderPurple500Rounded,
   TextFields,
   UndoRounded,
   RedoRounded,
@@ -356,7 +356,7 @@ function Toolbar({
               dispatch(selectCanvasObject("")); // clear selected object, if there is
             }}
           >
-            <ChangeHistoryOutlined />
+            <ChangeHistoryRounded />
           </IconButton>
         </Tooltip>
 
@@ -369,7 +369,7 @@ function Toolbar({
               dispatch(selectCanvasObject("")); // clear selected object, if there is
             }}
           >
-            <StarBorderOutlined />
+            <StarBorderPurple500Rounded />
           </IconButton>
         </Tooltip>
       </Popover>