scale viewer

src/pages/viewer/Viewer.tsx

@@ -58,7 +58,7 @@ const Viewer: FC = () => {
 
     return (
         <div className="w-full h-full">
-            <BookViewer pages={pages} />
+            <BookViewer pages={pages} catalogSize={data?.data?.size} />
         </div>
     );
 };

src/pages/viewer/components/BookPage.tsx

@@ -5,6 +5,8 @@ import type { EditorObject } from '@/pages/editor/store/editorStore';
 type BookPageProps = {
   page: PageData;
   scale?: number;
+  pageWidth?: number;
+  pageHeight?: number;
   onLinkClick?: (linkUrl: string) => void;
 };
 
@@ -15,7 +17,8 @@ type BookPageProps = {
  * این کامپوننت به عنوان child برای HTMLFlipBook استفاده می‌شود
  * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
  */
-const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page, scale = 1, onLinkClick }, ref) => {
+const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
+  ({ page, scale = 1, pageWidth, pageHeight, onLinkClick }, ref) => {
   // تابع برای تبدیل opacity به رنگ (مثل editor)
   // در editor، getColorWithOpacity انتظار opacity 0-100 دارد
   // در dataTransformer، opacity از 0-1 به 0-100 تبدیل شده است
@@ -462,6 +465,9 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page, scale = 1, o
     }
   };
 
+  const width = pageWidth ?? 794 * scale;
+  const height = pageHeight ?? 1123 * scale;
+
   return (
     <div
       ref={ref}
@@ -472,8 +478,8 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page, scale = 1, o
         backgroundColor: '#ffffff',
         overflow: 'hidden',
         boxSizing: 'border-box',
-        width: `${794 * scale}px`,
-        height: `${1123 * scale}px`,
+        width: `${width}px`,
+        height: `${height}px`,
         isolation: 'isolate',
         zIndex: 1,
       }}

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>