grediant in a shape

2026-05-09 09:50:13 +03:30
parent 0229a1355d
commit b513ecb33f
16 changed files with 378 additions and 15 deletions
@@ -11,6 +11,12 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
    const baseWidth = selectedObject.width ?? 100;
    const baseHeight = selectedObject.height ?? 100;
    const baseFill = selectedObject.fill ?? "#3b82f6";
+    const fillType = selectedObject.fillType ?? "solid";
+    const gradient = selectedObject.gradient ?? {
+        from: "#3b82f6",
+        to: "#1d4ed8",
+        angle: 135,
+    };
    const baseStroke = selectedObject.stroke ?? "#1e40af";
    const baseStrokeWidth = selectedObject.strokeWidth ?? 0;
    const baseBorderRadius = selectedObject.borderRadius ?? 0;
@@ -42,12 +48,84 @@ const ShapeSettings = ({ selectedObject, onUpdate }: ShapeSettingsProps) => {
            <ColorPicker
                label="رنگ پس‌زمینه"
                value={baseFill}
+                readOnly={fillType === "gradient"}
                onChange={(value) =>
                    onUpdate(selectedObject.id, {
                        fill: value,
                    })
                }
            />
+            <div className="space-y-2">
+                <label className="text-sm">نوع Fill</label>
+                <div className="flex gap-2">
+                    <button
+                        type="button"
+                        onClick={() =>
+                            onUpdate(selectedObject.id, {
+                                fillType: "solid",
+                            })
+                        }
+                        className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "solid" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
+                            }`}
+                    >
+                        رنگ ساده
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() =>
+                            onUpdate(selectedObject.id, {
+                                fillType: "gradient",
+                                gradient: selectedObject.gradient ?? {
+                                    from: "#3b82f6",
+                                    to: "#1d4ed8",
+                                    angle: 135,
+                                },
+                            })
+                        }
+                        className={`px-3 py-1.5 rounded-lg border text-xs ${fillType === "gradient" ? "border-gray-800 text-gray-900" : "border-border text-gray-500"
+                            }`}
+                    >
+                        گرادیانت
+                    </button>
+                </div>
+            </div>
+            {fillType === "gradient" && (
+                <div className="space-y-3 border border-border rounded-xl p-3">
+                    <ColorPicker
+                        label="رنگ شروع"
+                        value={gradient.from}
+                        onChange={(value) =>
+                            onUpdate(selectedObject.id, {
+                                gradient: { ...gradient, from: value },
+                            })
+                        }
+                    />
+                    <ColorPicker
+                        label="رنگ پایان"
+                        value={gradient.to}
+                        onChange={(value) =>
+                            onUpdate(selectedObject.id, {
+                                gradient: { ...gradient, to: value },
+                            })
+                        }
+                    />
+                    <Input
+                        label="زاویه گرادیانت"
+                        type="number"
+                        value={gradient.angle}
+                        onChange={(e) =>
+                            onUpdate(selectedObject.id, {
+                                gradient: {
+                                    ...gradient,
+                                    angle: Number(e.target.value) || 0,
+                                },
+                            })
+                        }
+                        min={0}
+                        max={360}
+                    />
+                </div>
+            )}
            <ColorPicker
                label="رنگ خط"
                value={baseStroke}