fonts

2026-06-15 09:35:24 +03:30
parent c6d1097a30
commit b7ffb2b857
118 changed files with 1600 additions and 33 deletions
@@ -4,17 +4,15 @@ import Select from "@/components/Select";
 import ColorPicker from "@/components/ColorPicker";
 import { useEditorStore } from "@/pages/editor/store/editorStore";
 import { useTextDefaultsStore } from "@/pages/editor/store/textDefaultsStore";
+import {
+    getDefaultFontWeight,
+    getFontFamilyOptions,
+    getFontWeightOptions,
+    hasMultipleFontWeights,
+} from "@/pages/editor/utils/fonts";
+import { getFontFamily } from "@/pages/editor/utils/fontFamily";

-const fontOptions = [
-    { label: "ایرانسل", value: "1" },
-    { label: "فونت 2", value: "2" },
-];
-
-const fontWeightOptions = [
-    { label: "Bold", value: "bold" },
-    { label: "Normal", value: "normal" },
-    { label: "Light", value: "300" },
-];
+const fontOptions = getFontFamilyOptions();


 type TextFormState = {
@@ -55,11 +53,45 @@ const TextInstruction: FC = () => {

    const [formState, setFormState] = useState<TextFormState>(baseValues);

+    const fontWeightOptions = useMemo(
+        () => getFontWeightOptions(formState.fontFamily),
+        [formState.fontFamily],
+    );
+
+    const selectedFontFamily = useMemo(
+        () => getFontFamily(formState.fontFamily),
+        [formState.fontFamily],
+    );
+
+    const showWeightSelect = hasMultipleFontWeights(formState.fontFamily);
+
    useEffect(() => {
        setFormState(baseValues);
    }, [baseValues]);

    const handleChange = (field: keyof TextFormState, value: string | number) => {
+        if (field === "fontFamily") {
+            const nextFontId = String(value);
+            const nextWeightOptions = getFontWeightOptions(nextFontId);
+            const nextWeight = nextWeightOptions.some((w) => w.value === formState.fontWeight)
+                ? formState.fontWeight
+                : getDefaultFontWeight(nextFontId);
+
+            if (isEditing && selectedObject) {
+                const newState = { ...formState, fontFamily: nextFontId, fontWeight: nextWeight };
+                setFormState(newState);
+                useEditorStore.getState().commitObjectHistoryBeforeChange();
+                updateObject(selectedObject.id, {
+                    fontFamily: nextFontId,
+                    fontWeight: nextWeight,
+                });
+            } else {
+                setFormState((prev) => ({ ...prev, fontFamily: nextFontId, fontWeight: nextWeight }));
+                updateDefaults({ fontFamily: nextFontId, fontWeight: nextWeight });
+            }
+            return;
+        }
+
        if (isEditing && selectedObject) {
            // اعمال تغییرات به صورت لایو
            const newState = { ...formState, [field]: value };
@@ -105,20 +137,24 @@ const TextInstruction: FC = () => {
                    label="فونت"
                    value={formState.fontFamily}
                    onChange={(e) => handleChange("fontFamily", e.target.value)}
+                    style={{ fontFamily: selectedFontFamily }}
                />
            </div>

            <div className="flex gap-2 mt-4">
-                <Select
-                    label="وزن"
-                    items={fontWeightOptions}
-                    value={formState.fontWeight}
-                    onChange={(e) => handleChange("fontWeight", e.target.value)}
-                />
+                {showWeightSelect && (
+                    <Select
+                        label="وزن"
+                        items={fontWeightOptions}
+                        value={formState.fontWeight}
+                        onChange={(e) => handleChange("fontWeight", e.target.value)}
+                    />
+                )}

                <Input
                    type="number"
                    label="سایز"
+                    className={showWeightSelect ? "" : "flex-1"}
                    value={Math.round(formState.fontSize)}
                    onChange={(e) => {
                        const numValue = parseInt(e.target.value) || 0;