From 8ead4176b57492a15fb115b5ec70ed547368dc14 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 28 Jun 2025 19:30:24 +0200
Subject: [PATCH] Add paste mode to handlePaste for image positioning

The handlePaste method now accepts a pasteMode parameter to control image placement, allowing images to be pasted either at the mouse position or centered on the canvas. This improves user control when pasting images via keyboard shortcuts or UI buttons.
---
 js/Canvas.js             |  4 ++--
 js/CanvasInteractions.js |  2 +-
 js/CanvasLayers.js       | 15 ++++++++++-----
 js/CanvasView.js         |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/js/Canvas.js b/js/Canvas.js
index b2d77d6..fdcafa8 100644
--- a/js/Canvas.js
+++ b/js/Canvas.js
@@ -157,8 +157,8 @@ export class Canvas {
         return this.canvasLayers.pasteLayers();
     }
 
-    async handlePaste() {
-        return this.canvasLayers.handlePaste();
+    async handlePaste(pasteMode) {
+        return this.canvasLayers.handlePaste(pasteMode);
     }
 
 
diff --git a/js/CanvasInteractions.js b/js/CanvasInteractions.js
index bd8b024..0e8066b 100644
--- a/js/CanvasInteractions.js
+++ b/js/CanvasInteractions.js
@@ -347,7 +347,7 @@ export class CanvasInteractions {
             if (e.key.toLowerCase() === 'v') {
                 e.preventDefault();
                 e.stopPropagation();
-                this.canvas.handlePaste();
+                this.canvas.handlePaste('mouse');
                 return;
             }
         }
diff --git a/js/CanvasLayers.js b/js/CanvasLayers.js
index 497304b..05238e1 100644
--- a/js/CanvasLayers.js
+++ b/js/CanvasLayers.js
@@ -66,7 +66,7 @@ export class CanvasLayers {
         log.info(`Pasted ${newLayers.length} layer(s).`);
     }
 
-    async handlePaste() {
+    async handlePaste(pasteMode = 'mouse') {
         try {
             if (!navigator.clipboard?.read) {
                 log.info("Browser does not support clipboard read API. Falling back to internal paste.");
@@ -86,10 +86,15 @@ export class CanvasLayers {
                     reader.onload = (event) => {
                         const img = new Image();
                         img.onload = async () => {
-                            await this.addLayerWithImage(img, {
-                                x: this.canvasLayers.lastMousePosition.x - img.width / 2,
-                                y: this.canvasLayers.lastMousePosition.y - img.height / 2,
-                            });
+                            let layerProps = {};
+                            if (pasteMode === 'center') {
+                                layerProps.x = (this.canvasLayers.width - img.width) / 2;
+                                layerProps.y = (this.canvasLayers.height - img.height) / 2;
+                            } else { // 'mouse' or default
+                                layerProps.x = this.canvasLayers.lastMousePosition.x - img.width / 2;
+                                layerProps.y = this.canvasLayers.lastMousePosition.y - img.height / 2;
+                            }
+                            await this.addLayerWithImage(img, layerProps);
                         };
                         img.src = event.target.result;
                     };
diff --git a/js/CanvasView.js b/js/CanvasView.js
index 86fac2c..a4a377b 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -555,7 +555,7 @@ async function createCanvasWidget(node, widget, app) {
                 $el("button.painter-button.primary", {
                     textContent: "Paste Image",
                     title: "Paste image from clipboard",
-                    onclick: () => canvas.handlePaste()
+                    onclick: () => canvas.handlePaste('center')
                 }),
             ]),