space

src/pages/viewer/components/BookPage.tsx

@@ -169,31 +169,61 @@ const BookPage = forwardRef<HTMLDivElement, BookPageProps>(({ page, scale = 1 },
 
         if (obj.shapeType === 'triangle') {
           // در editor، triangle با مرکز در x + width/2, y + height/2 رندر می‌شود
-          const width = (obj.width || 100) * scale;
-          const height = (obj.height || 100) * scale;
-          const radius = Math.min(width, height) / 2;
-          const centerX = (obj.x || 0) * scale + width / 2;
-          const centerY = (obj.y || 0) * scale + height / 2;
+          // RegularPolygon در Konva یک مثلث متساوی‌الاضلاع است با radius از مرکز تا رأس
+          // radius باید بر اساس ابعاد اصلی (قبل از scale) محاسبه شود
+          const baseWidth = obj.width || 100;
+          const baseHeight = obj.height || 100;
+          const baseRadius = Math.min(baseWidth, baseHeight) / 2;
+          const radius = baseRadius * scale;
+
+          // محاسبه مرکز مثلث (مثل editor)
+          const centerX = ((obj.x || 0) + baseWidth / 2) * scale;
+          const centerY = ((obj.y || 0) + baseHeight / 2) * scale;
+
+          // برای مثلث متساوی‌الاضلاع، size = radius * 2
+          const size = radius * 2;
+          const halfSize = size / 2;
+
+          // نقاط مثلث متساوی‌الاضلاع: رأس بالا (50%, 0%), پایین چپ (0%, 100%), پایین راست (100%, 100%)
+          // اما برای مثلث متساوی‌الاضلاع واقعی، باید ارتفاع را محاسبه کنیم
+          // ارتفاع مثلث متساوی‌الاضلاع = size * sqrt(3) / 2 ≈ size * 0.866
+          const triangleHeight = size * 0.8660254; // sqrt(3) / 2
+          const topY = (size - triangleHeight) / 2;
+          const bottomY = size - topY;
+          const halfWidth = triangleHeight * 0.5773503; // tan(30°) = 1/sqrt(3)
+
+          const topX = halfSize;
+          const bottomLeftX = halfSize - halfWidth;
+          const bottomRightX = halfSize + halfWidth;
+
+          const strokeWidth = obj.stroke ? (obj.strokeWidth || 1) * scale : 0;
+          const fillColor = obj.fill || '#000000';
+          const strokeColor = obj.stroke || 'transparent';
 
           return (
-            <div
+            <svg
               key={obj.id || index}
               style={{
                 position: 'absolute',
                 left: `${centerX - radius}px`,
                 top: `${centerY - radius}px`,
-                width: 0,
-                height: 0,
-                borderLeft: `${radius}px solid transparent`,
-                borderRight: `${radius}px solid transparent`,
-                borderBottom: `${radius * 2}px solid ${obj.fill || '#000000'}`,
-                backgroundColor: 'transparent',
-                borderTop: 'none',
+                width: `${size}px`,
+                height: `${size}px`,
                 opacity: obj.opacity ?? 1,
                 transform: obj.rotation ? `rotate(${obj.rotation}deg)` : undefined,
                 transformOrigin: 'center center',
+                zIndex: index,
+                overflow: 'visible',
               }}
+              viewBox={`0 0 ${size} ${size}`}
+            >
+              <polygon
+                points={`${topX},${topY} ${bottomLeftX},${bottomY} ${bottomRightX},${bottomY}`}
+                fill={fillColor}
+                stroke={strokeColor}
+                strokeWidth={strokeWidth}
               />
+            </svg>
           );
         }