fix animation
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
import Select from "@/components/Select";
|
||||
import Input from "@/components/Input";
|
||||
import type { EditorObject } from "../../../store/editorStore";
|
||||
import { useEditorStore } from "../../../store/editorStore";
|
||||
import { ENTRANCE_ANIMATION_SELECT_ITEMS } from "../constants/entranceAnimationOptions";
|
||||
import {
|
||||
DEFAULT_ENTRANCE_DURATION_MS,
|
||||
@@ -13,10 +14,34 @@ type Props = {
|
||||
onUpdate: (id: string, updates: Partial<EditorObject>) => void;
|
||||
};
|
||||
|
||||
/** اعضای گروه (نه خود باکس group) برای تنظیم انیمیشن ورود */
|
||||
function getAnimationTargets(
|
||||
selectedObject: EditorObject,
|
||||
objects: EditorObject[],
|
||||
): EditorObject[] {
|
||||
if (selectedObject.type === "group") {
|
||||
return objects.filter(
|
||||
(o) => o.groupId === selectedObject.id && o.type !== "group",
|
||||
);
|
||||
}
|
||||
return [selectedObject];
|
||||
}
|
||||
|
||||
const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
|
||||
const anim = selectedObject.entranceAnimation ?? "none";
|
||||
const duration = selectedObject.entranceDurationMs ?? DEFAULT_ENTRANCE_DURATION_MS;
|
||||
const delayMs = selectedObject.entranceDelayMs ?? DEFAULT_ENTRANCE_DELAY_MS;
|
||||
const objects = useEditorStore((s) => s.objects);
|
||||
const targets = getAnimationTargets(selectedObject, objects);
|
||||
const primary = targets[0] ?? selectedObject;
|
||||
|
||||
const anim = primary.entranceAnimation ?? "none";
|
||||
|
||||
const duration = primary.entranceDurationMs ?? DEFAULT_ENTRANCE_DURATION_MS;
|
||||
const delayMs = primary.entranceDelayMs ?? DEFAULT_ENTRANCE_DELAY_MS;
|
||||
|
||||
const applyToTargets = (updates: Partial<EditorObject>) => {
|
||||
const ids =
|
||||
targets.length > 0 ? targets.map((t) => t.id) : [selectedObject.id];
|
||||
ids.forEach((id) => onUpdate(id, updates));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="pt-4 flex flex-col gap-4 border-t border-border">
|
||||
@@ -26,7 +51,7 @@ const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
|
||||
value={anim}
|
||||
onChange={(e) => {
|
||||
const v = e.target.value as EditorObject["entranceAnimation"];
|
||||
onUpdate(selectedObject.id, {
|
||||
applyToTargets({
|
||||
entranceAnimation: v === "none" ? undefined : v,
|
||||
...(v === "none" || !v
|
||||
? { entranceDurationMs: undefined, entranceDelayMs: undefined }
|
||||
@@ -35,19 +60,22 @@ const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
|
||||
}}
|
||||
/>
|
||||
{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)),
|
||||
});
|
||||
}} /><Input
|
||||
<>
|
||||
<Input
|
||||
label="مدت انیمیشن (میلیثانیه)"
|
||||
type="number"
|
||||
min={100}
|
||||
max={4000}
|
||||
value={duration}
|
||||
onChange={(e) => {
|
||||
const n = parseInt(e.target.value, 10);
|
||||
if (Number.isNaN(n)) return;
|
||||
applyToTargets({
|
||||
entranceDurationMs: Math.min(4000, Math.max(100, n)),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
label="تأخیر قبل از شروع (میلیثانیه)"
|
||||
type="number"
|
||||
min={0}
|
||||
@@ -57,13 +85,15 @@ const EntranceAnimationSettings = ({ selectedObject, onUpdate }: Props) => {
|
||||
const n = parseInt(e.target.value, 10);
|
||||
if (Number.isNaN(n)) return;
|
||||
const clamped = Math.min(MAX_ENTRANCE_DELAY_MS, Math.max(0, n));
|
||||
onUpdate(selectedObject.id, {
|
||||
applyToTargets({
|
||||
entranceDelayMs: clamped === 0 ? undefined : clamped,
|
||||
});
|
||||
}} /></>
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EntranceAnimationSettings;
|
||||
export default EntranceAnimationSettings;
|
||||
Reference in New Issue
Block a user