base animation

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

@@ -0,0 +1,50 @@
+import Select from "@/components/Select";
+import Input from "@/components/Input";
+import type { EditorObject } from "../../../store/editorStore";
+import { ENTRANCE_ANIMATION_SELECT_ITEMS } from "../constants/entranceAnimationOptions";
+import { DEFAULT_ENTRANCE_DURATION_MS } from "@/shared/entranceAnimation";
+
+type Props = {
+  selectedObject: EditorObject;
+  onUpdate: (id: string, updates: Partial<EditorObject>) => void;
+};
+
+const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
+  const anim = selectedObject.entranceAnimation ?? "none";
+  const duration = selectedObject.entranceDurationMs ?? DEFAULT_ENTRANCE_DURATION_MS;
+
+  return (
+    <div className="pt-4 flex flex-col gap-4 border-t border-border">
+      <Select
+        label="انیمیشن هنگام نمایش"
+        items={ENTRANCE_ANIMATION_SELECT_ITEMS}
+        value={anim}
+        onChange={(e) => {
+          const v = e.target.value as EditorObject["entranceAnimation"];
+          onUpdate(selectedObject.id, {
+            entranceAnimation: v === "none" ? undefined : v,
+            ...(v === "none" || !v ? { entranceDurationMs: undefined } : {}),
+          });
+        }}
+      />
+      {anim !== "none" && (
+        <Input
+          label="مدت انیمیشن (میلی‌ثانیه)"
+          type="number"
+          min={100}
+          max={4000}
+          value={duration}
+          onChange={(e) => {
+            const n = parseInt(e.target.value, 10);
+            if (Number.isNaN(n)) return;
+            onUpdate(selectedObject.id, {
+              entranceDurationMs: Math.min(4000, Math.max(100, n)),
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default EntranceAnimationSettings;

src/pages/editor/components/sidebar/settings/index.ts

@@ -8,4 +8,5 @@ export { default as AlignmentSettings } from "./AlignmentSettings";
 export { default as TransformSettings } from "./TransformSettings";
 export { default as GridSettings } from "./GridSettings";
 export { default as MaskSettings } from "./MaskSettings";
+export { default as EntranceAnimationSettings } from "./EntranceAnimationSettings";