From c5702ec6b36315d6de6ff024264e7ddf330c165a Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 29 Apr 2026 12:25:33 +0330
Subject: [PATCH] fix bug in book page

---
 src/pages/viewer/components/BookPage.tsx | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/pages/viewer/components/BookPage.tsx b/src/pages/viewer/components/BookPage.tsx
index af32069..2f7355f 100644
--- a/src/pages/viewer/components/BookPage.tsx
+++ b/src/pages/viewer/components/BookPage.tsx
@@ -55,9 +55,11 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
         position: 'absolute',
         left: `${(obj.x || 0) * scale}px`,
         top: `${(obj.y || 0) * scale}px`,
-        opacity: obj.opacity ?? 1,
+        // editor opacity is stored as 0-100, CSS expects 0-1
+        opacity: (obj.opacity ?? 100) / 100,
         transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
-        transformOrigin: 'center center',
+        // Konva default transform origin is top-left for Rect/Text/Image/etc.
+        transformOrigin: 'top left',
       };
 
       if (obj.visible === false) {
@@ -77,6 +79,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                 fontSize: `${(obj.fontSize || 16) * scale}px`,
                 fontFamily: obj.fontFamily || 'irancell, sans-serif',
                 fontWeight: obj.fontWeight || 'normal',
+                lineHeight: 1,
                 color: getColorWithOpacity(obj.fill, obj.opacity),
                 whiteSpace: 'pre-wrap',
                 letterSpacing: obj.letterSpacing ? `${obj.letterSpacing * scale}px` : undefined,
@@ -225,7 +228,8 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                   border: hasStroke && obj.stroke
                     ? `${actualStrokeWidth * scale}px solid ${obj.stroke}`
                     : 'none',
-                  opacity: obj.opacity ?? 1,
+                  boxSizing: 'border-box',
+                  opacity: (obj.opacity ?? 100) / 100,
                   transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                   transformOrigin: 'center center',
                   zIndex: index, // برای حفظ ترتیب رندر
@@ -276,7 +280,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                   top: `${centerY - radius}px`,
                   width: `${size}px`,
                   height: `${size}px`,
-                  opacity: obj.opacity ?? 1,
+                  opacity: (obj.opacity ?? 100) / 100,
                   transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                   transformOrigin: 'center center',
                   zIndex: index,
@@ -318,7 +322,8 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                   border: obj.stroke
                     ? `${(obj.strokeWidth || 1) * scale}px solid ${obj.stroke}`
                     : 'none',
-                  opacity: obj.opacity ?? 1,
+                  boxSizing: 'border-box',
+                  opacity: (obj.opacity ?? 100) / 100,
                   transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                   transformOrigin: 'center center',
                 }}
@@ -336,6 +341,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
             border: hasStroke && obj.stroke
               ? `${actualStrokeWidth * scale}px solid ${obj.stroke}`
               : 'none',
+            boxSizing: 'border-box',
             zIndex: index, // برای حفظ ترتیب رندر
           };
 
@@ -365,7 +371,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                 width: `${lineLength}px`,
                 height: `${(obj.strokeWidth || 2) * scale}px`,
                 backgroundColor: obj.stroke || '#000000',
-                opacity: obj.opacity ?? 1,
+                opacity: (obj.opacity ?? 100) / 100,
                 transform: `rotate(${lineAngle}deg)`,
                 transformOrigin: 'left center',
               }}
@@ -397,7 +403,7 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(
                 width: `${arrowLength}px`,
                 height: `${strokeWidth}px`,
                 backgroundColor: obj.stroke || '#000000',
-                opacity: obj.opacity ?? 1,
+                opacity: (obj.opacity ?? 100) / 100,
                 transform: `rotate(${arrowAngle}deg)`,
                 transformOrigin: 'left center',
               }}