color opacity

src/pages/editor/components/sidebar/instructions/PencilInstruction.tsx

@@ -22,6 +22,8 @@ const PencilInstruction: FC = () => {
       <ColorPicker
         label="رنگ قلم"
         value={defaults.stroke}
+        opacity={defaults.opacity}
+        onOpacityChange={(value) => updateDefaults({ opacity: value })}
         onChange={(value) => updateDefaults({ stroke: value })}
       />
       <Input

src/pages/editor/components/sidebar/instructions/TextInstruction.tsx

@@ -106,13 +106,6 @@ const TextInstruction: FC = () => {
         }
     };
 
-    // State محلی برای نمایش شفافیت
-    const [opacityDisplay, setOpacityDisplay] = useState<string>(`${formState.opacity}`);
-
-    useEffect(() => {
-        setOpacityDisplay(`${formState.opacity}`);
-    }, [formState.opacity]);
-
 
     return (
         <div>
@@ -164,41 +157,14 @@ const TextInstruction: FC = () => {
                 />
             </div>
 
-            <div className="mt-4 flex flex-col gap-2">
-                <div className="flex gap-3">
-                    <ColorPicker
-                        label="رنگ"
-                        className="flex-1"
-                        value={formState.fill}
-                        onChange={(value) => handleChange("fill", value)}
-                    />
-                    <div className="w-28">
-                        <Input
-                            type="number"
-                            label="شفافیت"
-                            className="px-3"
-                            value={opacityDisplay}
-                            onChange={(e) => {
-                                const value = e.target.value;
-                                setOpacityDisplay(value);
-
-                                // اعمال تغییرات به صورت لایو اگر مقدار معتبر است
-                                const numValue = parseInt(value);
-                                if (!isNaN(numValue) && numValue >= 0 && numValue <= 100) {
-                                    handleChange("opacity", numValue);
-                                }
-                            }}
-                            onBlur={(e) => {
-                                const numValue = parseInt(e.target.value) || 0;
-                                const clampedValue = Math.min(100, Math.max(0, numValue));
-                                setOpacityDisplay(`${clampedValue}`);
-                                handleChange("opacity", clampedValue);
-                            }}
-                            min={0}
-                            max={100}
-                        />
-                    </div>
-                </div>
+            <div className="mt-4">
+                <ColorPicker
+                    label="رنگ"
+                    value={formState.fill}
+                    opacity={formState.opacity}
+                    onOpacityChange={(value) => handleChange("opacity", value)}
+                    onChange={(value) => handleChange("fill", value)}
+                />
             </div>
 
             {/* <div className="mt-4 flex gap-2">

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

@@ -22,6 +22,7 @@ const CustomShapeSettings = ({ selectedObject, onUpdate }: CustomShapeSettingsPr
   };
   const stroke = selectedObject.stroke ?? "#1e40af";
   const strokeWidth = selectedObject.strokeWidth ?? 2;
+  const opacity = selectedObject.opacity ?? 100;
 
   return (
     <div className="space-y-4">
@@ -29,6 +30,8 @@ const CustomShapeSettings = ({ selectedObject, onUpdate }: CustomShapeSettingsPr
         label="رنگ پر"
         value={fill}
         readOnly={fillType === "gradient"}
+        opacity={opacity}
+        onOpacityChange={(value) => onUpdate(selectedObject.id, { opacity: value })}
         onChange={(value) => onUpdate(selectedObject.id, { fill: value })}
       />
 

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

@@ -15,6 +15,7 @@ const GridSettings = ({ selectedObject }: GridSettingsProps) => {
         removeRow,
         removeColumn,
         changeCellBackground,
+        changeCellBackgroundOpacity,
         selectedCellId,
     } = useEditorStore();
 
@@ -50,6 +51,12 @@ const GridSettings = ({ selectedObject }: GridSettingsProps) => {
         }
     };
 
+    const handleCellBackgroundOpacityChange = (opacity: number) => {
+        if (selectedCellId && tableDataObj) {
+            changeCellBackgroundOpacity(selectedObject.id, selectedCellId, opacity);
+        }
+    };
+
     const selectedCell = selectedCellId && tableDataObj ? tableDataObj.cells[selectedCellId] : null;
 
     return (
@@ -111,6 +118,8 @@ const GridSettings = ({ selectedObject }: GridSettingsProps) => {
                     <ColorPicker
                         label="رنگ پس‌زمینه سلول"
                         value={selectedCell.background}
+                        opacity={selectedCell.backgroundOpacity ?? 100}
+                        onOpacityChange={handleCellBackgroundOpacityChange}
                         onChange={handleCellBackgroundChange}
                     />
                 </div>

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

@@ -13,6 +13,10 @@ const LineSettings = ({ selectedObject, onUpdate }: LineSettingsProps) => {
             <ColorPicker
                 label="رنگ خط"
                 value={selectedObject.stroke || "#000000"}
+                opacity={selectedObject.opacity ?? 100}
+                onOpacityChange={(value) =>
+                    onUpdate(selectedObject.id, { opacity: value })
+                }
                 onChange={(value) => onUpdate(selectedObject.id, { stroke: value })}
             />
             <Input

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

@@ -51,6 +51,10 @@ const LinkSettings = ({ selectedObject, onUpdate }: LinkSettingsProps) => {
             <ColorPicker
                 label="رنگ متن"
                 value={selectedObject.fill || "#0000ff"}
+                opacity={selectedObject.opacity ?? 100}
+                onOpacityChange={(value) =>
+                    onUpdate(selectedObject.id, { opacity: value })
+                }
                 onChange={(value) => onUpdate(selectedObject.id, { fill: value })}
             />
         </>

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

@@ -10,6 +10,7 @@ type ShapeSettingsProps = {
 const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
     const baseWidth = selectedObject.width ?? 100;
     const baseHeight = selectedObject.height ?? 100;
+    const baseOpacity = selectedObject.opacity ?? 100;
     const baseFill = selectedObject.fill ?? "#3b82f6";
     const fillType = selectedObject.fillType ?? "solid";
     const gradient = selectedObject.gradient ?? {
@@ -50,6 +51,12 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
                 label="رنگ پس‌زمینه"
                 value={baseFill}
                 readOnly={fillType === "gradient"}
+                opacity={baseOpacity}
+                onOpacityChange={(value) =>
+                    onUpdate(selectedObject.id, {
+                        opacity: value,
+                    })
+                }
                 onChange={(value) =>
                     onUpdate(selectedObject.id, {
                         fill: value,

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

@@ -102,6 +102,10 @@ const TextSettings = ({ selectedObject, onUpdate }: TextSettingsProps) => {
             <ColorPicker
                 label="رنگ متن"
                 value={selectedObject.fill || "#000000"}
+                opacity={selectedObject.opacity ?? 100}
+                onOpacityChange={(value) =>
+                    onUpdate(selectedObject.id, { opacity: value })
+                }
                 onChange={(value) => onUpdate(selectedObject.id, { fill: value })}
             />
         </>