update guide line

src/pages/editor/components/EditorCanvas.tsx

@@ -86,9 +86,9 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
       guides.map((guide) =>
         guide.id === id
           ? {
-              ...guide,
+            ...guide,
-              position,
+            position,
-            }
+          }
           : guide,
       ),
     );
@@ -250,59 +250,59 @@ const EditorCanvas = ({ catalogSize }: EditorCanvasProps) => {
           />
           <div className="absolute -top-6 -left-6 w-6 h-6 bg-slate-200 border border-slate-300" />
           <div ref={stageWrapRef} className="shadow-lg">
-        <Stage
+            <Stage
-          ref={stageRef}
+              ref={stageRef}
-          width={stageSize.width * finalScale}
+              width={stageSize.width * finalScale}
-          height={stageSize.height * finalScale}
+              height={stageSize.height * finalScale}
-          scaleX={finalScale}
+              scaleX={finalScale}
-          scaleY={finalScale}
+              scaleY={finalScale}
-          onMouseDown={handleStageMouseDownWithGuideReset}
+              onMouseDown={handleStageMouseDownWithGuideReset}
-          onMouseMove={handleStageMouseMove}
+              onMouseMove={handleStageMouseMove}
-          onMouseUp={handleStageMouseUp}
+              onMouseUp={handleStageMouseUp}
-          onDragMove={handleDragMove}
+              onDragMove={handleDragMove}
-          onDragEnd={handleDragEnd}
+              onDragEnd={handleDragEnd}
-        >
+            >
-          <Layer listening={false}>
+              <Layer listening={false}>
-            <Rect
+                <Rect
-              x={0}
+                  x={0}
-              y={0}
+                  y={0}
-              width={stageSize.width}
+                  width={stageSize.width}
-              height={stageSize.height}
+                  height={stageSize.height}
-              fill="#ffffff"
+                  fill="#ffffff"
-              listening={false}
+                  listening={false}
-            />
+                />
-          </Layer>
+              </Layer>
 
-          <ObjectsLayer
+              <ObjectsLayer
-            layerRef={layerRef}
+                layerRef={layerRef}
-            objects={objects}
+                objects={objects}
-            selectedObjectIds={selectedObjectIds}
+                selectedObjectIds={selectedObjectIds}
-            selectedCellId={selectedCellId}
+                selectedCellId={selectedCellId}
-            tool={tool}
+                tool={tool}
-            transformerRef={transformerRef}
+                transformerRef={transformerRef}
-            selectedObject={selectedObject}
+                selectedObject={selectedObject}
-            isGroupedWithMask={isGroupedWithMask}
+                isGroupedWithMask={isGroupedWithMask}
-            maskObject={maskObject}
+                maskObject={maskObject}
-            canGroup={canGroup}
+                canGroup={canGroup}
-            canUngroup={canUngroup}
+                canUngroup={canUngroup}
-            onSelect={handleSelect}
+                onSelect={handleSelect}
-            onUpdate={handleObjectUpdate}
+                onUpdate={handleObjectUpdate}
-            onCellClick={handleCellClick}
+                onCellClick={handleCellClick}
-            onCellDblClick={handleCellDblClick}
+                onCellDblClick={handleCellDblClick}
-            onGroup={handleGroupWithMask}
+                onGroup={handleGroupWithMask}
-            onUngroup={handleUngroupFromMask}
+                onUngroup={handleUngroupFromMask}
-          />
+              />
-          <GuidesLayer
+              <GuidesLayer
-            guides={guides}
+                guides={guides}
-            stageWidth={stageSize.width}
+                stageWidth={stageSize.width}
-            stageHeight={stageSize.height}
+                stageHeight={stageSize.height}
-            activeGuideIds={activeGuideIds}
+                activeGuideIds={activeGuideIds}
-            selectedGuideId={selectedGuideId}
+                selectedGuideId={selectedGuideId}
-            draftGuide={draftGuide}
+                draftGuide={draftGuide}
-            onGuideSelect={setSelectedGuideId}
+                onGuideSelect={setSelectedGuideId}
-            onGuideDragEnd={handleGuideDragEnd}
+                onGuideDragEnd={handleGuideDragEnd}
-          />
+              />
-        </Stage>
+            </Stage>
           </div>
         </div>
       </div>

src/pages/editor/components/tools/AbstractShape.tsx

@@ -14,10 +14,10 @@ const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
     const abstractScale = 0.85;
     const radius = baseRadius * abstractScale;
     const innerRadius = radius * 0.5;
-    
+
     const actualStrokeWidth = obj.strokeWidth ?? 0;
     const hasStroke = actualStrokeWidth > 0;
-    
+
     // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
     const displayStroke = isSelected
         ? (hasStroke ? obj.stroke : "#3b82f6")
@@ -26,7 +26,7 @@ const AbstractShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
             : (isMask && !showGuide)
                 ? "transparent"
                 : (hasStroke ? obj.stroke : undefined);
-    
+
     const displayStrokeWidth = isSelected
         ? (hasStroke ? actualStrokeWidth : 3)
         : (isMask && showGuide ? 2 : actualStrokeWidth);

src/pages/editor/components/tools/CircleShape.tsx

@@ -10,10 +10,10 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
 
     const isMask = obj.isMask || false;
     const showGuide = obj.showMaskGuide !== false;
-    
+
     const actualStrokeWidth = obj.strokeWidth ?? 0;
     const hasStroke = actualStrokeWidth > 0;
-    
+
     // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
     const displayStroke = isSelected
         ? (hasStroke ? obj.stroke : "#3b82f6")
@@ -22,7 +22,7 @@ const CircleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: ShapePr
             : (isMask && !showGuide)
                 ? "transparent"
                 : (hasStroke ? obj.stroke : undefined);
-    
+
     const displayStrokeWidth = isSelected
         ? (hasStroke ? actualStrokeWidth : 3)
         : (isMask && showGuide ? 2 : actualStrokeWidth);

src/pages/editor/components/tools/TriangleShape.tsx

@@ -11,10 +11,10 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
     const isMask = obj.isMask || false;
     const showGuide = obj.showMaskGuide !== false;
     const radius = Math.min((obj.width || 100) / 2, (obj.height || 100) / 2);
-    
+
     const actualStrokeWidth = obj.strokeWidth ?? 0;
     const hasStroke = actualStrokeWidth > 0;
-    
+
     // برای نمایش انتخاب: اگر strokeWidth واقعی > 0 است، از آن استفاده کن، وگرنه stroke را برای انتخاب نمایش بده
     const displayStroke = isSelected
         ? (hasStroke ? obj.stroke : "#3b82f6")
@@ -23,7 +23,7 @@ const TriangleShape = ({ obj, isSelected, onSelect, onUpdate, draggable }: Shape
             : (isMask && !showGuide)
                 ? "transparent"
                 : (hasStroke ? obj.stroke : undefined);
-    
+
     const displayStrokeWidth = isSelected
         ? (hasStroke ? actualStrokeWidth : 3)
         : (isMask && showGuide ? 2 : actualStrokeWidth);