scale viewer

src/pages/viewer/components/BookViewer.tsx

@@ -1,11 +1,18 @@
-import { type FC, useRef, useCallback, useState, useEffect } from 'react';
+import { type FC, useRef, useCallback, useState, useEffect, useMemo } from 'react';
 import HTMLFlipBook from 'react-pageflip';
 import { type PageData } from '../types';
 import BookPage from './BookPage';
 import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
+import { getPaperDimensions } from '@/config/paperSizes';
 
-type BookViewerProps = {
+const VIEWER_SCALE = 0.5;
+
+// سایز کتاب همیشه A4 است (ثابت)
+const BOOK_PAPER_SIZE = 'a4';
+
+export type BookViewerProps = {
     pages: PageData[];
+    catalogSize?: string;
 };
 
 interface PageFlipAPI {
@@ -27,10 +34,24 @@ interface FlipEvent {
  * این کامپوننت از HTMLFlipBook استفاده می‌کند که یک wrapper برای PageFlip است
  * از HTML برای رندر صفحات استفاده می‌شود (نه Canvas) برای سازگاری با Konva در آینده
  */
-const BookViewer: FC<BookViewerProps> = ({ pages }) => {
+const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize }) => {
     const bookRef = useRef<FlipBookInstance | null>(null);
     const [currentPage, setCurrentPage] = useState(0);
 
+    // سایز کتاب ثابت (همیشه A4)
+    const { width: bookWidth, height: bookHeight } = useMemo(
+        () => getPaperDimensions(BOOK_PAPER_SIZE),
+        []
+    );
+    const displayWidth = Math.round(bookWidth * VIEWER_SCALE);
+    const displayHeight = Math.round(bookHeight * VIEWER_SCALE);
+
+    // نسبت محتوا بر اساس catalogSize (A3/A4/A5)
+    const contentScale = useMemo(() => {
+        const { width: contentWidth } = getPaperDimensions(catalogSize ?? 'a4');
+        return VIEWER_SCALE * (bookWidth / contentWidth);
+    }, [catalogSize]);
+
     // اطمینان از اینکه currentPage همیشه در محدوده معتبر است
     useEffect(() => {
         if (currentPage < 0) {
@@ -156,13 +177,13 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
                 <div style={{ overflow: 'hidden', isolation: 'isolate' }}>
                     <HTMLFlipBook
                         ref={bookRef}
-                        width={397}
-                        height={561}
+                        width={displayWidth}
+                        height={displayHeight}
                         size="fixed"
-                        minWidth={397}
-                        minHeight={561}
-                        maxWidth={397}
-                        maxHeight={561}
+                        minWidth={displayWidth}
+                        minHeight={displayHeight}
+                        maxWidth={displayWidth}
+                        maxHeight={displayHeight}
                         drawShadow={true}
                         flippingTime={800}
                         usePortrait={false}
@@ -184,7 +205,14 @@ const BookViewer: FC<BookViewerProps> = ({ pages }) => {
                         onFlip={handlePageFlip}
                     >
                         {pages.map((page) => (
-                            <BookPage key={page.id} page={page} scale={0.5} onLinkClick={handleLinkClick} />
+                            <BookPage
+                                key={page.id}
+                                page={page}
+                                scale={contentScale}
+                                pageWidth={displayWidth}
+                                pageHeight={displayHeight}
+                                onLinkClick={handleLinkClick}
+                            />
                         ))}
                     </HTMLFlipBook>
                 </div>