costum shape

src/pages/editor/components/EditorCanvas.tsx

@@ -10,8 +10,10 @@ import { useSelectionHandlers } from "./canvas/useSelectionHandlers";
 import { useTransformHandlers } from "./canvas/useTransformHandlers";
 import { useObjectHandlers } from "./canvas/useObjectHandlers";
 import { useMaskGroupState } from "./canvas/useMaskGroupState";
+import { useCustomShapeDrawing } from "./canvas/useCustomShapeDrawing";
 import ObjectsLayer from "./canvas/ObjectsLayer";
 import GuidesLayer from "./canvas/GuidesLayer";
+import CustomShapeDrawingLayer from "./canvas/CustomShapeDrawingLayer";
 import {
   clearSmartGuides,
   drawSmartGuides,
@@ -97,6 +99,8 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
   })();
 
   const { transformerRef, handleStageMouseDown, handleStageMouseMove, handleStageMouseUp } = useDrawingHandlers();
+  const { drawingState, handleStageClick: handleCustomShapeClick, handleStageMouseMove: handleCustomShapeMouseMove } =
+    useCustomShapeDrawing();
   useKeyboardMovement();
 
   const { handleSelect, handleCellClick, handleCellDblClick } = useSelectionHandlers();
@@ -371,6 +375,11 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
     handleStageMouseDown(e);
   };
 
+  const handleCombinedMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
+    handleStageMouseMove(e);
+    handleCustomShapeMouseMove(e);
+  };
+
   const scaledW = stageSize.width * finalScale;
   const scaledH = stageSize.height * finalScale;
 
@@ -502,9 +511,11 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
               height={stageSize.height * finalScale}
               scaleX={finalScale}
               scaleY={finalScale}
+              style={{ cursor: tool === "custom-shape" ? "crosshair" : undefined }}
               onMouseDown={handleStageMouseDownWithGuideReset}
-              onMouseMove={handleStageMouseMove}
+              onMouseMove={handleCombinedMouseMove}
               onMouseUp={handleStageMouseUp}
+              onClick={handleCustomShapeClick}
               onDragMove={handleDragMove}
               onDragEnd={handleDragEnd}
             >
@@ -563,6 +574,7 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
                 onGuideDragEnd={handleGuideDragEnd}
               />
               <Layer ref={smartGuidesLayerRef} listening={false} visible={false} />
+              <CustomShapeDrawingLayer drawingState={drawingState} />
             </Stage>
           </div>
         </div>