commit aa28b63c4c89fbc94eb8aae5c2f30425f61f83c2
parent d6f88aaf378723cdbab5f7e84d5c9a3c11385bec
Author: Hunter
Date: Wed, 1 Apr 2026 12:40:53 -0400
support pasting image data from clipboard
Diffstat:
2 files changed, 40 insertions(+), 1 deletion(-)
diff --git a/readme.md b/readme.md
@@ -31,7 +31,7 @@ Different Techo types use differently-sized grid paper. Use the links below to s
### controls
-- after opening memori in your web browser, drag one or more images from your desktop onto the grid.<br>
+- after opening memori in your web browser, drag one or more images from your desktop onto the grid (or press `⌘ + v` to paste image data from your clipboard)<br>
<img src="readme_images/drag_n_drop.gif">
- click and drag images to move them<br>
diff --git a/script.js b/script.js
@@ -294,6 +294,45 @@ async function processAndAddImages(files, dropX = 0, dropY = 0) {
}
}
+// Track mouse position for paste placement
+let lastMouseX = -1;
+let lastMouseY = -1;
+document.addEventListener('mousemove', (e) => {
+ lastMouseX = e.clientX;
+ lastMouseY = e.clientY;
+});
+
+// Clipboard paste support
+document.addEventListener('paste', async (e) => {
+ const items = e.clipboardData?.items;
+ if (!items) return;
+
+ const imageFiles = [];
+ for (const item of items) {
+ if (item.type.startsWith('image/')) {
+ const file = item.getAsFile();
+ if (file) imageFiles.push(file);
+ }
+ }
+
+ if (imageFiles.length === 0) {
+ if (!isUsingSafari) showPopup('No image found in clipboard');
+ return;
+ }
+
+ // Use last known mouse position relative to grid, fall back to (0, 0)
+ const gridRect = grid.getBoundingClientRect();
+ const mouseXInGrid = lastMouseX - gridRect.left;
+ const mouseYInGrid = lastMouseY - gridRect.top;
+ const isOnGrid = mouseXInGrid >= 0 && mouseYInGrid >= 0 &&
+ mouseXInGrid <= gridRect.width && mouseYInGrid <= gridRect.height;
+
+ const dropX = isOnGrid ? mouseXInGrid : 0;
+ const dropY = isOnGrid ? mouseYInGrid : 0;
+
+ await processAndAddImages(imageFiles, dropX, dropY);
+});
+
// Prevent default drag behavior on entire document
document.addEventListener('dragover', (e) => {
e.preventDefault();