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.
This commit is contained in:
Dariusz L
2025-06-28 19:30:24 +02:00
parent aee5836252
commit 8ead4176b5
4 changed files with 14 additions and 9 deletions

View File

@@ -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);
}

View File

@@ -347,7 +347,7 @@ export class CanvasInteractions {
if (e.key.toLowerCase() === 'v') {
e.preventDefault();
e.stopPropagation();
this.canvas.handlePaste();
this.canvas.handlePaste('mouse');
return;
}
}

View File

@@ -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;
};

View File

@@ -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')
}),
]),