Fix shape property update on select

low-earth-orbit · Sep 30, 2024 · 28664af · 28664af
1 parent 3fc4638
commit 28664af
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 20 deletions.
diff --git a/components/Canvas.tsx b/components/Canvas.tsx
@@ -28,11 +28,7 @@ import {
 } from "./text/textUtils";
 import ShapePanel from "./toolbar/ShapePanel";
 import TextPanel from "./toolbar/TextPanel";
-import {
-  setFillColor,
-  setStrokeColor,
-  setStrokeWidth,
-} from "@/redux/shapeSlice";
+import { setStrokeColor, setStrokeWidth } from "@/redux/shapeSlice";
 
 export interface StageSizeType {
   width: number;
@@ -236,9 +232,9 @@ export default function Canvas() {
   function updateStyle(property: keyof CanvasObjectType, value: any) {
     // Dynamically update state
     if (property === "strokeWidth") {
-      dispatch(setStrokeWidth(value));
+      dispatch(setStrokeWidth(value)); // TODO: Ink property should separate from shape/text
     } else if (property === "stroke") {
-      dispatch(setStrokeColor(value));
+      dispatch(setStrokeColor(value)); // TODO: Ink property should separate from shape/text
     }
 
     // Update object property
@@ -471,9 +467,6 @@ export default function Canvas() {
           objects={canvasObjects}
           newObject={newObject}
           onChange={updateSelectedObject}
-          setWidth={setStrokeWidth}
-          setBorderColor={setStrokeColor}
-          setFillColor={setFillColor}
           selectedObjectId={selectedObjectId}
           setSelectedObjectId={(newObjectId) =>
             dispatch(selectCanvasObject(newObjectId))

diff --git a/components/shapes/ShapeLayer.tsx b/components/shapes/ShapeLayer.tsx
@@ -4,8 +4,13 @@ import RectangleShape from "./RectangleShape";
 import OvalShape from "./OvalShape";
 import TriangleShape from "./TriangleShape";
 import StarShape from "./StarShape";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/redux/store";
+import {
+  setFillColor,
+  setStrokeColor,
+  setStrokeWidth,
+} from "@/redux/shapeSlice";
 
 type ShapesLayerProps = {
   objects: CanvasObjectType[];
@@ -14,9 +19,6 @@ type ShapesLayerProps = {
     newAttrs: Partial<CanvasObjectType>,
     selectedObjectId: string,
   ) => void;
-  setWidth: (newWidth: number) => void;
-  setBorderColor: (newColor: string) => void;
-  setFillColor: (newColor: string) => void;
   selectedObjectId: string;
   setSelectedObjectId: (id: string) => void;
   setSidePanelVisible: (isVisible: boolean) => void;
@@ -26,13 +28,12 @@ export default function ShapeLayer({
   objects,
   newObject,
   onChange,
-  setWidth,
-  setBorderColor,
-  setFillColor,
   selectedObjectId,
   setSelectedObjectId,
   setSidePanelVisible,
 }: ShapesLayerProps) {
+  const dispatch = useDispatch();
+
   const { selectedTool } = useSelector((state: RootState) => state.canvas);
 
   const shapes = [
@@ -52,9 +53,9 @@ export default function ShapeLayer({
           setSidePanelVisible(true);
 
           // update settings to match selected shape's
-          setWidth(shape.strokeWidth as number);
-          setBorderColor(shape.stroke as string);
-          setFillColor(shape.fill as string);
+          dispatch(setStrokeWidth(shape.strokeWidth || 5));
+          dispatch(setStrokeColor(shape.stroke || "#2986cc"));
+          dispatch(setFillColor(shape.fill || "#FFFFFF"));
 
           // Update cursor style
           const stage = e.target.getStage();