base flip

2026-01-01 12:02:24 +03:30
parent 97f70eefae
commit 84f93463a3
11 changed files with 479 additions and 17 deletions
@@ -0,0 +1,78 @@
+import { forwardRef } from 'react';
+import { type PageData } from '../types';
+
+type BookPageProps = {
+  page: PageData;
+};
+
+/**
+ * کامپوننت خالص برای نمایش محتوای یک صفحه کتاب
+ * تمام المنت‌ها با absolute positioning رندر می‌شوند
+ * از HTML استفاده می‌شود (نه Canvas) برای سازگاری با Konva در آینده
+ * این کامپوننت به عنوان child برای HTMLFlipBook استفاده می‌شود
+ * نیاز به forwardRef دارد تا react-pageflip بتواند ref را مدیریت کند
+ */
+const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className="page"
+      data-density="soft"
+      style={{
+        position: 'relative',
+        backgroundColor: '#ffffff',
+        overflow: 'hidden',
+        padding: '40px',
+        boxSizing: 'border-box',
+        width: '100%',
+        height: '100%',
+      }}
+    >
+      {page.elements.map((element, index) => {
+        if (element.type === 'text') {
+          return (
+            <div
+              key={index}
+              style={{
+                position: 'absolute',
+                left: `${element.x}px`,
+                top: `${element.y}px`,
+                fontSize: `${element.fontSize}px`,
+                color: element.color,
+                fontFamily: 'inherit',
+                whiteSpace: 'pre-wrap',
+              }}
+            >
+              {element.text}
+            </div>
+          );
+        }
+        
+        if (element.type === 'image') {
+          return (
+            <img
+              key={index}
+              src={element.src}
+              alt=""
+              style={{
+                position: 'absolute',
+                left: `${element.x}px`,
+                top: `${element.y}px`,
+                width: `${element.width}px`,
+                height: `${element.height}px`,
+                objectFit: 'contain',
+              }}
+            />
+          );
+        }
+        
+        return null;
+      })}
+    </div>
+  );
+});
+
+BookPage.displayName = 'BookPage';
+
+export default BookPage;
+