show live change values object

src/pages/editor/components/sidebar/settings/ShapeSettings.tsx

@@ -1,5 +1,3 @@
-import { useEffect, useState } from "react";
-import Button from "@/components/Button";
 import Input from "@/components/Input";
 import ColorPicker from "@/components/ColorPicker";
 import type { EditorObject } from "@/pages/editor/store/editorStore";
@@ -9,14 +7,6 @@ type ShapeSettingsProps = {
     onUpdate: (id: string, updates: Partial<EditorObject>) => void;
 };
 
-type ShapeFormState = {
-    width: string;
-    height: string;
-    fill: string;
-    stroke: string;
-    strokeWidth: string;
-};
-
 const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
     const baseWidth = selectedObject.width ?? 100;
     const baseHeight = selectedObject.height ?? 100;
@@ -24,105 +14,57 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
     const baseStroke = selectedObject.stroke ?? "#1e40af";
     const baseStrokeWidth = selectedObject.strokeWidth ?? 0;
 
-    const [formState, setFormState] = useState<ShapeFormState>({
-        width: String(baseWidth),
-        height: String(baseHeight),
-        fill: baseFill,
-        stroke: baseStroke,
-        strokeWidth: String(baseStrokeWidth),
-    });
-
-    useEffect(() => {
-        setFormState({
-            width: String(baseWidth),
-            height: String(baseHeight),
-            fill: baseFill,
-            stroke: baseStroke,
-            strokeWidth: String(baseStrokeWidth),
-        });
-    }, [baseWidth, baseHeight, baseFill, baseStroke, baseStrokeWidth]);
-
-    const parseNumber = (value: string, fallback: number) => {
-        const parsed = parseInt(value, 10);
-        return Number.isNaN(parsed) ? fallback : parsed;
-    };
-
-    const handleSave = () => {
-        onUpdate(selectedObject.id, {
-            width: parseNumber(formState.width, baseWidth),
-            height: parseNumber(formState.height, baseHeight),
-            fill: formState.fill || baseFill,
-            stroke: formState.stroke || baseStroke,
-            strokeWidth: parseNumber(formState.strokeWidth, baseStrokeWidth),
-        });
-    };
-
-    const isDirty =
-        formState.width !== String(baseWidth) ||
-        formState.height !== String(baseHeight) ||
-        formState.fill !== baseFill ||
-        formState.stroke !== baseStroke ||
-        formState.strokeWidth !== String(baseStrokeWidth);
-
     return (
         <div className="space-y-4">
             <Input
                 label="عرض"
                 type="number"
-                value={formState.width}
+                value={baseWidth}
                 onChange={(e) =>
-                    setFormState((prev) => ({
-                        ...prev,
-                        width: e.target.value,
-                    }))
+                    onUpdate(selectedObject.id, {
+                        width: parseInt(e.target.value) || baseWidth,
+                    })
                 }
             />
             <Input
                 label="ارتفاع"
                 type="number"
-                value={formState.height}
+                value={baseHeight}
                 onChange={(e) =>
-                    setFormState((prev) => ({
-                        ...prev,
-                        height: e.target.value,
-                    }))
+                    onUpdate(selectedObject.id, {
+                        height: parseInt(e.target.value) || baseHeight,
+                    })
                 }
             />
             <ColorPicker
                 label="رنگ پس‌زمینه"
-                value={formState.fill}
+                value={baseFill}
                 onChange={(value) =>
-                    setFormState((prev) => ({
-                        ...prev,
+                    onUpdate(selectedObject.id, {
                         fill: value,
-                    }))
+                    })
                 }
             />
             <ColorPicker
                 label="رنگ خط"
-                value={formState.stroke}
+                value={baseStroke}
                 onChange={(value) =>
-                    setFormState((prev) => ({
-                        ...prev,
+                    onUpdate(selectedObject.id, {
                         stroke: value,
-                    }))
+                    })
                 }
             />
             <Input
                 label="ضخامت خط"
                 type="number"
-                value={formState.strokeWidth}
+                value={baseStrokeWidth}
                 onChange={(e) =>
-                    setFormState((prev) => ({
-                        ...prev,
-                        strokeWidth: e.target.value,
-                    }))
+                    onUpdate(selectedObject.id, {
+                        strokeWidth: parseInt(e.target.value) || 0,
+                    })
                 }
                 min={0}
             />
-            <Button type="button" onClick={handleSave} disabled={!isDirty} className="w-full">
-                ذخیره تغییرات
-            </Button>
         </div>
     );
 };