paint

src/pages/editor/components/EditorCanvas.tsx

@@ -11,9 +11,11 @@ import { useTransformHandlers } from "./canvas/useTransformHandlers";
 import { useObjectHandlers } from "./canvas/useObjectHandlers";
 import { useMaskGroupState } from "./canvas/useMaskGroupState";
 import { useCustomShapeDrawing } from "./canvas/useCustomShapeDrawing";
+import { usePencilDrawing } from "./canvas/usePencilDrawing";
 import ObjectsLayer from "./canvas/ObjectsLayer";
 import GuidesLayer from "./canvas/GuidesLayer";
 import CustomShapeDrawingLayer from "./canvas/CustomShapeDrawingLayer";
+import PencilDrawingLayer from "./canvas/PencilDrawingLayer";
 import {
   clearSmartGuides,
   drawSmartGuides,
@@ -101,6 +103,12 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
   const { drawingState, handleStageClick: handleCustomShapeClick, handleStageMouseMove: handleCustomShapeMouseMove } =
     useCustomShapeDrawing();
+  const {
+    drawingState: pencilDrawingState,
+    handleStagePointerDown: handlePencilPointerDown,
+    handleStagePointerMove: handlePencilPointerMove,
+    handleStagePointerUp: handlePencilPointerUp,
+  } = usePencilDrawing(stageRef);
   useKeyboardMovement();
 
   const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
@@ -372,14 +380,32 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     if (e.target?.name() !== "guide-line") {
       setSelectedGuideId(null);
     }
+    if (tool === "pencil") return;
     handleStageMouseDown(e);
   };
 
+  const handleStagePointerDownWithGuideReset = (e: Konva.KonvaEventObject<PointerEvent>) => {
+    if (e.target?.name() !== "guide-line") {
+      setSelectedGuideId(null);
+    }
+    if (tool === "pencil") {
+      handlePencilPointerDown(e);
+    }
+  };
+
   const handleCombinedMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
     handleStageMouseMove(e);
     handleCustomShapeMouseMove(e);
   };
 
+  const handleCombinedPointerMove = (e: Konva.KonvaEventObject<PointerEvent>) => {
+    handlePencilPointerMove(e);
+  };
+
+  const handleCombinedPointerUp = (e: Konva.KonvaEventObject<PointerEvent>) => {
+    handlePencilPointerUp(e);
+  };
+
   const scaledW = stageSize.width * finalScale;
   const scaledH = stageSize.height * finalScale;
 
@@ -511,10 +537,13 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
               height={stageSize.height * finalScale}
               scaleX={finalScale}
               scaleY={finalScale}
-              style={{ cursor: tool === "custom-shape" ? "crosshair" : undefined }}
+              style={{ cursor: tool === "custom-shape" || tool === "pencil" ? "crosshair" : undefined }}
               onMouseDown={handleStageMouseDownWithGuideReset}
               onMouseMove={handleCombinedMouseMove}
               onMouseUp={handleStageMouseUp}
+              onPointerDown={handleStagePointerDownWithGuideReset}
+              onPointerMove={handleCombinedPointerMove}
+              onPointerUp={handleCombinedPointerUp}
               onClick={handleCustomShapeClick}
               onDragMove={handleDragMove}
               onDragEnd={handleDragEnd}
@@ -575,6 +604,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
               />
               <Layer ref={smartGuidesLayerRef} listening={false} visible={false} />
               <CustomShapeDrawingLayer drawingState={drawingState} />
+              <PencilDrawingLayer drawingState={pencilDrawingState} />
             </Stage>
           </div>
         </div>