danak/dpage-editor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix animation

Browse Source
This commit is contained in:
Hamid
2026-05-16 23:22:01 -07:00
parent b3e0378af5
commit fef8099ab1
6 changed files with 195 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/viewer/components/BookPage.tsx
+8 -18
View File
@@ -1,4 +1,4 @@
import { forwardRef, useCallback } from 'react';
import { forwardRef } from 'react';
import { type PageData } from '../types';
import type { EditorObject } from '@/pages/editor/store/editorStore';
import { toCssLinearGradient } from '@/pages/editor/utils/gradient';
@@ -12,7 +12,7 @@ import {
} from '@/pages/editor/utils/textStyle';
import '@/pages/viewer/styles/entranceAnimations.css';
import { mergeEntranceAnimationStyle } from '@/pages/viewer/utils/entranceAnimationStyle';
import { useBookPageEntranceSequence } from '@/pages/viewer/hooks/useBookPageEntranceSequence';
import type { EntrancePhase } from '@/pages/viewer/hooks/useBookEntranceController';
type BookPageProps = {
page: PageData;
@@ -28,6 +28,8 @@ type BookPageProps = {
angle: number;
};
backgroundImageUrl?: string;
/** فاز انیمیشن ورود — از BookViewer کنترل می‌شود */
entrancePhase?: EntrancePhase;
/** در پیش‌نمایش کاتالوگ انیمیشن ورود غیرفعال باشد */
disableEntranceAnimations?: boolean;
};
@@ -40,20 +42,8 @@ type BookPageProps = {
* نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
*/
const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, disableEntranceAnimations = false }, ref) => {
const { attachRootRef, entranceSeq } = useBookPageEntranceSequence(disableEntranceAnimations);
const setHostRef = useCallback(
(node: HTMLDivElement | null) => {
attachRootRef(node);
if (typeof ref === 'function') {
ref(node);
} else if (ref) {
(ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
}
},
[ref, attachRootRef],
);
({ page, scale = 1, pageWidth, pageHeight, onLinkClick, backgroundType, backgroundColor, backgroundGradient, backgroundImageUrl, entrancePhase = 'idle', disableEntranceAnimations = false }, ref) => {
const phase: EntrancePhase = disableEntranceAnimations ? 'settled' : entrancePhase;
// تابع برای تبدیل opacity به رنگ (مثل editor)
// در editor، getColorWithOpacity انتظار opacity 0-100 دارد
// در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
@@ -97,7 +87,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
rotationDeg?: number;
},
) =>
mergeEntranceAnimationStyle(style, obj, scale, index, entranceSeq, {
mergeEntranceAnimationStyle(style, obj, scale, index, phase, {
...extra,
flyLayoutPx,
});
@@ -664,7 +654,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
return (
<div
ref={setHostRef}
ref={ref}
dir="rtl"
className="page"
data-density="soft"
src/pages/viewer/components/BookViewer.tsx
+30 -6
View File
@@ -5,6 +5,7 @@ import BookPage from './BookPage';
import { ArrowLeft2, ArrowRight2, Pause, Play } from 'iconsax-react';
import { getPaperDimensions } from '@/config/paperSizes';
import type { DocumentSettings } from '@/pages/editor/store/editorStore';
import { useBookEntranceController } from '@/pages/viewer/hooks/useBookEntranceController';
/** فاصله پیش‌فرض بین هر ورق در پخش خودکار (میلی‌ثانیه) */
const AUTO_PLAY_INTERVAL_MS = 3000;
@@ -176,6 +177,30 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
? 'desktop'
: `mobile-${pagePixelWidth}-${pagePixelHeight}`;
const usePortrait = !isDesktop || displayStyle === 'single';
const {
scheduleEntranceForSpread,
getEntrancePhase,
reset: resetEntrance,
} = useBookEntranceController({
pages,
portrait: usePortrait,
showCover: hasMultiplePages,
});
const commitEntranceAtCurrentSpread = useCallback(() => {
const api = bookRef.current?.pageFlip();
const idx = api?.getCurrentPageIndex?.();
if (typeof idx !== 'number' || pages.length <= 0) return;
const clamped = Math.max(0, Math.min(idx, pages.length - 1));
scheduleEntranceForSpread(clamped);
}, [pages.length, scheduleEntranceForSpread]);
useEffect(() => {
resetEntrance();
}, [flipKey, pages.length, pages[0]?.id, resetEntrance]);
// اطمینان از اینکه currentPage همیشه در محدوده معتبر است
useEffect(() => {
if (currentPage < 0) {
@@ -282,16 +307,17 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
setCurrentPage(clamped);
lastFlipPageRef.current = clamped;
},
[pages.length]
[pages.length],
);
/** بعد از اتمام انیمیشن، ایندکس واقعی کتاب را می‌گیریم (RTL روی روت کتاب مختصات page-flip را به‌هم می‌زند) */
/** بعد از اتمام انیمیشن ورق، ایندکس واقعی کتاب را می‌گیریم و انیمیشن ورود را یک‌بار شروع می‌کنیم */
const handleChangeState = useCallback(
(e: PageFlipStateEvent) => {
if (e.data !== 'read') return;
syncPageIndexFromBook();
commitEntranceAtCurrentSpread();
},
[syncPageIndexFromBook]
[syncPageIndexFromBook, commitEntranceAtCurrentSpread],
);
const goToNextPage = useCallback(() => {
@@ -393,9 +419,6 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
}
}, [currentPage, pages.length, goToNextPage, goToPrevPage]);
// تک‌صفحه‌ای: موبایل یا تنظیم single، دوصفحه‌ای: دسکتاپ + تنظیم double
const usePortrait = !isDesktop || displayStyle === 'single';
const prevFlipKeyRef = useRef(flipKey);
useEffect(() => {
if (prevFlipKeyRef.current !== flipKey) {
@@ -481,6 +504,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
<BookPage
key={page.id}
page={page}
entrancePhase={getEntrancePhase(page.id)}
scale={contentScale}
pageWidth={pagePixelWidth}
pageHeight={pagePixelHeight}
src/pages/viewer/hooks/useBookEntranceController.ts
+125
View File
@@ -0,0 +1,125 @@
import { useCallback, useRef, useState } from "react";
import {
DEFAULT_ENTRANCE_DURATION_MS,
ENTRANCE_ANIMATION_BASE_DELAY_MS,
MAX_ENTRANCE_DELAY_MS,
} from "@/shared/entranceAnimation";
import { getVisiblePageIndices } from "@/pages/viewer/utils/visiblePageIndices";
/** حداکثر زمان پخش انیمیشن ورود (برای برداشتن حالت play) */
const MAX_ENTRANCE_PLAY_MS =
ENTRANCE_ANIMATION_BASE_DELAY_MS +
MAX_ENTRANCE_DELAY_MS +
4000 +
1200;
export type EntrancePhase = "idle" | "play" | "settled";
type PageRef = { id: number };
type Options = {
pages: PageRef[];
portrait: boolean;
showCover: boolean;
};
/**
* کنترل یک‌بار پخش انیمیشن ورود هر صفحه — state در والد نگه‌داری می‌شود
* تا با remount شدن BookPage هنگام ورق‌خوردن دوباره اجرا نشود.
*/
export function useBookEntranceController({ pages, portrait, showCover }: Options) {
const playedPageIdsRef = useRef(new Set<number>());
const [playingPageIds, setPlayingPageIds] = useState<ReadonlySet<number>>(() => new Set());
const playTimersRef = useRef<Map<number, ReturnType<typeof setTimeout>>>(new Map());
const clearPlayTimer = useCallback((pageId: number) => {
const t = playTimersRef.current.get(pageId);
if (t) {
clearTimeout(t);
playTimersRef.current.delete(pageId);
}
}, []);
const finishPlaying = useCallback((pageId: number) => {
clearPlayTimer(pageId);
setPlayingPageIds((prev) => {
if (!prev.has(pageId)) return prev;
const next = new Set(prev);
next.delete(pageId);
return next;
});
}, [clearPlayTimer]);
const scheduleEntranceForSpread = useCallback(
(currentIndex: number) => {
const indices = getVisiblePageIndices(currentIndex, pages.length, {
portrait,
showCover,
});
const visibleIds = new Set(
indices.map((i) => pages[i]?.id).filter((id): id is number => id != null),
);
const newlyPlaying: number[] = [];
for (const i of indices) {
const page = pages[i];
if (!page) continue;
if (playedPageIdsRef.current.has(page.id)) continue;
playedPageIdsRef.current.add(page.id);
newlyPlaying.push(page.id);
}
setPlayingPageIds((prev) => {
const next = new Set<number>();
for (const id of prev) {
if (visibleIds.has(id)) next.add(id);
}
for (const id of newlyPlaying) next.add(id);
if (
next.size === prev.size &&
newlyPlaying.every((id) => prev.has(id))
) {
return prev;
}
return next;
});
if (newlyPlaying.length === 0) return;
for (const pageId of newlyPlaying) {
clearPlayTimer(pageId);
playTimersRef.current.set(
pageId,
setTimeout(() => finishPlaying(pageId), MAX_ENTRANCE_PLAY_MS),
);
}
},
[pages, portrait, showCover, clearPlayTimer, finishPlaying],
);
const getEntrancePhase = useCallback(
(pageId: number): EntrancePhase => {
if (playingPageIds.has(pageId)) return "play";
if (playedPageIdsRef.current.has(pageId)) return "settled";
return "idle";
},
[playingPageIds],
);
const reset = useCallback(() => {
for (const id of playTimersRef.current.keys()) {
clearPlayTimer(id);
}
playedPageIdsRef.current.clear();
setPlayingPageIds(new Set());
}, [clearPlayTimer]);
return {
scheduleEntranceForSpread,
getEntrancePhase,
reset,
};
}
src/pages/viewer/hooks/useBookPageEntranceSequence.ts
-56
View File
@@ -1,56 +0,0 @@
import { useCallback, useEffect, useRef, useState } from "react";
/**
* وقتی صفحهٔ کتاب به viewport می‌رسد، یک شمارنده زیاد می‌شود تا انیمیشن ورود دوباره اجرا شود
* (مشابه ورود مجدد به اسلاید در PowerPoint).
*/
export function useBookPageEntranceSequence(disabled: boolean) {
const wasVisibleRef = useRef(false);
const [entranceSeq, setEntranceSeq] = useState(0);
const observerRef = useRef<IntersectionObserver | null>(null);
const attachRootRef = useCallback(
(node: HTMLDivElement | null) => {
observerRef.current?.disconnect();
observerRef.current = null;
if (disabled || !node) {
wasVisibleRef.current = false;
return;
}
const io = new IntersectionObserver(
(entries) => {
const entry = entries[0];
if (!entry) return;
const visible = entry.isIntersecting && entry.intersectionRatio >= 0.06;
const mostlyHidden = !entry.isIntersecting || entry.intersectionRatio < 0.02;
if (visible && !wasVisibleRef.current) {
wasVisibleRef.current = true;
setEntranceSeq((s) => s + 1);
} else if (mostlyHidden) {
wasVisibleRef.current = false;
}
},
{ threshold: [0, 0.02, 0.06, 0.12, 0.25] },
);
io.observe(node);
observerRef.current = io;
},
[disabled],
);
useEffect(
() => () => {
observerRef.current?.disconnect();
observerRef.current = null;
},
[],
);
return {
attachRootRef,
entranceSeq: disabled ? 0 : entranceSeq,
};
}
src/pages/viewer/utils/entranceAnimationStyle.ts
+4 -4
View File
@@ -1,5 +1,6 @@
import type { CSSProperties } from "react";
import type { EditorObject } from "@/pages/editor/store/editorStore";
import type { EntrancePhase } from "@/pages/viewer/hooks/useBookEntranceController";
import {
DEFAULT_ENTRANCE_DURATION_MS,
DEFAULT_ENTRANCE_DELAY_MS,
@@ -48,7 +49,7 @@ export function mergeEntranceAnimationStyle(
obj: EditorObject,
scale: number,
elementIndex: number,
entranceSeq: number,
phase: EntrancePhase,
options?: {
transformOrigin?: CSSProperties["transformOrigin"];
rotationDeg?: number;
@@ -57,12 +58,11 @@ export function mergeEntranceAnimationStyle(
},
): CSSProperties {
const type = obj.entranceAnimation;
if (!type || type === "none") {
if (!type || type === "none" || phase === "settled") {
return base;
}
/* تا observer هنوز seq را زیاد نکرده، یک فریم با «ظاهر نهایی» رندر نشود — باعث چشمک می‌شد */
if (entranceSeq === 0) {
if (phase === "idle") {
const { opacity: _o, ...rest } = base;
return {
...rest,
src/pages/viewer/utils/visiblePageIndices.ts
+28
View File
@@ -0,0 +1,28 @@
/** ایندکس صفحاتی که در اسپرد فعلی کتاب دیده می‌شوند */
export function getVisiblePageIndices(
currentIndex: number,
pageCount: number,
mode: { portrait: boolean; showCover: boolean },
): number[] {
if (pageCount <= 0) return [];
const idx = Math.max(0, Math.min(currentIndex, pageCount - 1));
if (mode.portrait) {
return [idx];
}
if (mode.showCover) {
if (idx === 0) return [0];
if (idx === pageCount - 1) return [pageCount - 1];
const right = idx + 1;
return right < pageCount ? [idx, right] : [idx];
}
if (idx % 2 === 0) {
const right = idx + 1;
return right < pageCount ? [idx, right] : [idx];
}
return [idx - 1, idx];
}