خطوط لبه صفحات را روی عکس نمایش بده با همپوشانی اعمال شده

script.js

@@ -171,7 +171,8 @@ let uploadedImage = null;
                 sy = Math.max(0, sy);
                 sw = Math.min(uploadedImage.width - sx, sw);
                 sh = Math.min(uploadedImage.height - sy, sh);
-                // Draw the image segment
+                // Draw the image segment with border
+                ctx.save();
                 if (orient === 'diagonal') {
                     // For diagonal orientation, rotate the canvas
                     ctx.translate(canvas.width/2, canvas.height/2);
@@ -190,6 +191,50 @@ let uploadedImage = null;
                         0, 0, canvas.width, canvas.height
                     );
                 }
+
+                // Draw border around the image segment
+                ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(0, 0, canvas.width, canvas.height);
+
+                // Draw overlap indicators
+                ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
+                ctx.lineWidth = 1;
+                ctx.setLineDash([5, 5]);
+                
+                // Left overlap
+                if (col > 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(0, canvas.height);
+                    ctx.stroke();
+                }
+                
+                // Right overlap
+                if (col < gridSize - 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(canvas.width, 0);
+                    ctx.lineTo(canvas.width, canvas.height);
+                    ctx.stroke();
+                }
+                
+                // Top overlap
+                if (row > 0) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, 0);
+                    ctx.lineTo(canvas.width, 0);
+                    ctx.stroke();
+                }
+                
+                // Bottom overlap
+                if (row < gridSize - 1) {
+                    ctx.beginPath();
+                    ctx.moveTo(0, canvas.height);
+                    ctx.lineTo(canvas.width, canvas.height);
+                    ctx.stroke();
+                }
+                
+                ctx.restore();
 // Add cutting guides if enabled
                 if (showGuides) {
                     const guideSize = 20;

style.css

@@ -20,13 +20,15 @@
     height: 100%;
     object-fit: cover;
 }
-
 .cutting-guide {
     position: absolute;
     background-color: rgba(255, 0, 0, 0.3);
     z-index: 10;
 }
 
+.poster-page canvas {
+    border: 1px dashed rgba(0, 0, 255, 0.5);
+}
 .page-number {
     position: absolute;
     bottom: 5px;