From 6c9b390c9a63e545096ffe648e4ff4e32747dcf0 Mon Sep 17 00:00:00 2001 From: WANG Lei Date: Wed, 6 May 2026 14:33:08 +0800 Subject: [PATCH] drag to upload --- src/css/site.css | 59 ++++++++++++++++++++++++++ src/index.html | 34 +++++++-------- src/interface/functions/ImageChange.js | 9 +++- src/interface/init.js | 18 ++++++++ 4 files changed, 101 insertions(+), 19 deletions(-) diff --git a/src/css/site.css b/src/css/site.css index 1fbdcb6..f74fb24 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -186,6 +186,11 @@ a:visited { cursor: move; } +#box.drag-over { + outline: 3px dashed #4074db; + outline-offset: -8px; +} + .outputColumn { margin-top: 15px; margin-bottom: 15px; @@ -374,6 +379,60 @@ a:visited { padding-right: 10px; } +.col-toolbar button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; + vertical-align: top; +} + +.toolbar-icon { + flex-shrink: 0; + margin-left: -4px; + margin-top: -3px; +} + +.toolbar-label { + display: none; + font-size: 14px; + white-space: nowrap; +} + +@media (min-width:1100px) { + .col-toolbar { + width: 120px; + } + + .col-toolbar .resetButton, + .col-toolbar .actionButton, + .col-toolbar .helpButton { + width: 110px; + height: 72px; + flex-direction: column; + gap: 2px; + padding: 4px 6px; + } + + .col-toolbar .toolbar-icon { + margin-left: 0; + margin-top: 0; + } + + .col-toolbar .toolbar-label { + display: block; + font-size: 12px; + line-height: 1; + text-align: center; + } +} + +@media (min-width:1100px) and (max-width:1561px) { + .col-result { + margin-left: 132px; + } +} + .col-measure { position: relative; width: 900px; diff --git a/src/index.html b/src/index.html index ce8bc45..952ef1e 100644 --- a/src/index.html +++ b/src/index.html @@ -31,43 +31,43 @@

工具

@@ -334,4 +334,4 @@

关于

- \ No newline at end of file + diff --git a/src/interface/functions/ImageChange.js b/src/interface/functions/ImageChange.js index 3d1b370..45f8174 100644 --- a/src/interface/functions/ImageChange.js +++ b/src/interface/functions/ImageChange.js @@ -8,8 +8,9 @@ class ImageChange extends DefaultbuttonFunctioner { this.clearAllData = clearAllData; } - onClick(e) { - let file = e.target.files[0]; + loadFile(file) { + if (!file || !file.type.startsWith('image/')) return; + let reader = new FileReader(); reader.onload = function (e) { let img = new Image(); @@ -43,6 +44,10 @@ class ImageChange extends DefaultbuttonFunctioner { this.interactPhoto.canvas.defaultCursor = 'grab'; this.interactPhoto.canvas.remove(this.interactPhoto.text); } + + onClick(e) { + this.loadFile(e.target.files[0]); + } } export { ImageChange }; diff --git a/src/interface/init.js b/src/interface/init.js index 0c2428b..5b757f1 100644 --- a/src/interface/init.js +++ b/src/interface/init.js @@ -78,6 +78,24 @@ function initializeEvents(eventManager) { document .getElementById('srcFile') .addEventListener('change', (e) => eventManager.imageChange.onClick.call(eventManager.imageChange, e)); + interactPhoto.container.addEventListener('dragover', (e) => { + e.preventDefault(); + e.stopPropagation(); + interactPhoto.container.classList.add('drag-over'); + }); + interactPhoto.container.addEventListener('dragleave', (e) => { + e.preventDefault(); + e.stopPropagation(); + if (!interactPhoto.container.contains(e.relatedTarget)) { + interactPhoto.container.classList.remove('drag-over'); + } + }); + interactPhoto.container.addEventListener('drop', (e) => { + e.preventDefault(); + e.stopPropagation(); + interactPhoto.container.classList.remove('drag-over'); + eventManager.imageChange.loadFile(e.dataTransfer.files[0]); + }); document .getElementById('actionCalcul') .addEventListener('click', eventManager.calc.onClick.bind(eventManager.calc));