Upload 2 files

index.html

@@ -297,6 +297,7 @@
     }
 
     .field input,
+    .field select,
     .field textarea {
       width: 100%;
       min-width: 0;
@@ -311,12 +312,26 @@
         background 0.16s ease;
     }
 
-    .field input {
+    .field input,
+    .field select {
       height: 38px;
       padding: 0 10px;
       font-weight: 750;
     }
 
+    .field select {
+      appearance: none;
+      background-image:
+        linear-gradient(45deg, transparent 50%, var(--muted) 50%),
+        linear-gradient(135deg, var(--muted) 50%, transparent 50%);
+      background-position:
+        calc(100% - 16px) 16px,
+        calc(100% - 11px) 16px;
+      background-size: 5px 5px;
+      background-repeat: no-repeat;
+      padding-right: 30px;
+    }
+
     .field textarea {
       min-height: 176px;
       padding: 10px;
@@ -327,6 +342,7 @@
     }
 
     .field input:focus,
+    .field select:focus,
     .field textarea:focus {
       border-color: rgba(37, 99, 235, 0.78);
       box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
@@ -349,28 +365,37 @@
       margin-bottom: 12px;
     }
 
-    .action-row {
+    .paste-grid {
       display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+      grid-template-columns: minmax(0, 1fr) 112px;
       gap: 10px;
+      margin-bottom: 2px;
     }
 
     .result-stack {
       display: flex;
       flex-direction: column;
-      gap: 10px;
+      gap: 8px;
     }
 
-    .result-card {
-      display: flex;
-      flex-direction: column;
-      gap: 6px;
+    .result-row {
+      display: grid;
+      grid-template-columns: minmax(0, 1fr) 58px;
+      gap: 8px;
+      align-items: center;
       padding: 10px;
       border: 1px solid var(--line);
       border-radius: var(--radius);
       background: var(--surface-strong);
     }
 
+    .result-text {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
     .result-label {
       color: var(--muted);
       font-size: 12px;
@@ -388,6 +413,29 @@
       white-space: pre-wrap;
     }
 
+    .copy-button {
+      width: 58px;
+      height: 34px;
+      border-radius: 6px;
+      border: 1px solid var(--line);
+      background: #fff;
+      color: var(--accent);
+      cursor: pointer;
+      font-size: 12px;
+      font-weight: 850;
+    }
+
+    .copy-button:hover:not(:disabled) {
+      border-color: rgba(37, 99, 235, 0.45);
+      background: var(--accent-soft);
+    }
+
+    .copy-button:disabled {
+      color: #98a2b3;
+      cursor: not-allowed;
+      background: #f2f4f7;
+    }
+
     .status {
       min-height: 22px;
       margin: 10px auto 0;
@@ -449,7 +497,7 @@
       }
 
       .top-actions,
-      .action-row {
+      .paste-grid {
         grid-template-columns: 1fr;
       }
 
@@ -477,8 +525,6 @@
           上传图片
           <input id="fileInput" type="file" accept="image/*">
         </label>
-        <button class="button" id="fitButton" type="button" disabled>适配视图</button>
-        <button class="button danger" id="clearButton" type="button" disabled>清空标注</button>
       </div>
     </header>
 
@@ -487,7 +533,7 @@
         <div class="stage-toolbar">
           <div class="stage-meta">
             <span class="pill" id="imageMeta">未上传图片</span>
-            <span class="pill" id="boxMeta">0 个标注</span>
+            <span class="pill" id="boxMeta">未标注</span>
           </div>
         </div>
         <div class="canvas-wrap" id="canvasWrap">
@@ -503,47 +549,70 @@
         <section class="panel">
           <h2 class="panel-title">坐标编辑</h2>
           <div class="coord-grid">
-            <label class="field">X
-              <input id="xInput" type="number" min="0" step="1" disabled>
+            <label class="field">X1
+              <input id="x1Input" type="number" min="0" step="1" disabled>
             </label>
-            <label class="field">Y
-              <input id="yInput" type="number" min="0" step="1" disabled>
+            <label class="field">Y1
+              <input id="y1Input" type="number" min="0" step="1" disabled>
             </label>
-            <label class="field">W
-              <input id="wInput" type="number" min="1" step="1" disabled>
+            <label class="field">X2
+              <input id="x2Input" type="number" min="1" step="1" disabled>
             </label>
-            <label class="field">H
-              <input id="hInput" type="number" min="1" step="1" disabled>
+            <label class="field">Y2
+              <input id="y2Input" type="number" min="1" step="1" disabled>
             </label>
           </div>
-          <div class="action-row">
-            <button class="button" id="addButton" type="button" disabled>新增标注</button>
-            <button class="button danger" id="deleteButton" type="button" disabled>删除选中</button>
+          <div class="paste-grid">
+            <label class="field">粘贴坐标
+              <input id="pasteInput" type="text" placeholder="[x1,y1,x2,y2]" disabled>
+            </label>
+            <label class="field">类型
+              <select id="pasteMode" disabled>
+                <option value="absolute">绝对</option>
+                <option value="scale1000">0-1000</option>
+                <option value="relative">0-1</option>
+              </select>
+            </label>
           </div>
         </section>
 
         <section class="panel">
           <h2 class="panel-title">坐标结果</h2>
           <div class="result-stack">
-            <div class="result-card">
-              <div class="result-label">绝对坐标 x1 y1 x2 y2</div>
-              <div class="result-code" id="absoluteOutput">未选择</div>
+            <div class="result-row">
+              <div class="result-text">
+                <div class="result-label">绝对坐标 x1 y1 x2 y2</div>
+                <div class="result-code" id="absoluteOutput">未选择</div>
+              </div>
+              <button class="copy-button" type="button" data-copy="absoluteOutput" disabled>复制</button>
             </div>
-            <div class="result-card">
-              <div class="result-label">绝对坐标 x y w h</div>
-              <div class="result-code" id="sizeOutput">未选择</div>
+            <div class="result-row">
+              <div class="result-text">
+                <div class="result-label">绝对坐标 x y w h</div>
+                <div class="result-code" id="sizeOutput">未选择</div>
+              </div>
+              <button class="copy-button" type="button" data-copy="sizeOutput" disabled>复制</button>
             </div>
-            <div class="result-card">
-              <div class="result-label">相对坐标 x1 y1 x2 y2</div>
-              <div class="result-code" id="relativeOutput">未选择</div>
+            <div class="result-row">
+              <div class="result-text">
+                <div class="result-label">相对坐标 x1 y1 x2 y2</div>
+                <div class="result-code" id="relativeOutput">未选择</div>
+              </div>
+              <button class="copy-button" type="button" data-copy="relativeOutput" disabled>复制</button>
             </div>
-            <div class="result-card">
-              <div class="result-label">相对坐标 0-1000 x1 y1 x2 y2</div>
-              <div class="result-code" id="relative1000Output">未选择</div>
+            <div class="result-row">
+              <div class="result-text">
+                <div class="result-label">相对坐标 0-1000 x1 y1 x2 y2</div>
+                <div class="result-code" id="relative1000Output">未选择</div>
+              </div>
+              <button class="copy-button" type="button" data-copy="relative1000Output" disabled>复制</button>
             </div>
-            <div class="result-card">
-              <div class="result-label">YOLO 格式 cx cy w h</div>
-              <div class="result-code" id="yoloOutput">未选择</div>
+            <div class="result-row">
+              <div class="result-text">
+                <div class="result-label">YOLO 格式 cx cy w h</div>
+                <div class="result-code" id="yoloOutput">未选择</div>
+              </div>
+              <button class="copy-button" type="button" data-copy="yoloOutput" disabled>复制</button>
             </div>
           </div>
         </section>
@@ -565,14 +634,12 @@
 
       const controls = {
         fileInput: $("fileInput"),
-        fitButton: $("fitButton"),
-        clearButton: $("clearButton"),
-        addButton: $("addButton"),
-        deleteButton: $("deleteButton"),
-        xInput: $("xInput"),
-        yInput: $("yInput"),
-        wInput: $("wInput"),
-        hInput: $("hInput"),
+        x1Input: $("x1Input"),
+        y1Input: $("y1Input"),
+        x2Input: $("x2Input"),
+        y2Input: $("y2Input"),
+        pasteInput: $("pasteInput"),
+        pasteMode: $("pasteMode"),
         imageMeta: $("imageMeta"),
         boxMeta: $("boxMeta"),
         absoluteOutput: $("absoluteOutput"),
@@ -580,6 +647,7 @@
         relativeOutput: $("relativeOutput"),
         relative1000Output: $("relative1000Output"),
         yoloOutput: $("yoloOutput"),
+        copyButtons: Array.from(document.querySelectorAll("[data-copy]")),
         statusLine: $("statusLine")
       };
 
@@ -597,9 +665,7 @@
       const state = {
         image: null,
         imageName: "",
-        boxes: [],
-        selectedId: null,
-        nextId: 1,
+        box: null,
         drag: null,
         scale: 1,
         offsetX: 0,
@@ -628,19 +694,16 @@
       }
 
       function selectedBox() {
-        return state.boxes.find((box) => box.id === state.selectedId) || null;
+        return state.box;
       }
 
       function makeBox(x, y, width, height) {
-        const id = state.nextId;
-        state.nextId += 1;
         return {
-          id,
           x,
           y,
           width,
           height,
-          color: palette[(id - 1) % palette.length]
+          color: palette[0]
         };
       }
 
@@ -658,7 +721,9 @@
       }
 
       function constrainAllBoxes() {
-        state.boxes.forEach(constrainBox);
+        if (state.box) {
+          constrainBox(state.box);
+        }
       }
 
       function imageToCanvas(point) {
@@ -698,27 +763,29 @@
       }
 
       function hitTest(point) {
-        const tolerance = Math.max(6 / state.scale, 4);
-        for (let index = state.boxes.length - 1; index >= 0; index -= 1) {
-          const box = state.boxes[index];
-          for (const handle of handlePoints(box)) {
-            if (
-              Math.abs(point.x - handle.x) <= tolerance &&
-              Math.abs(point.y - handle.y) <= tolerance
-            ) {
-              return { box, action: "resize", handle: handle.name };
-            }
-          }
+        const box = state.box;
+        if (!box) {
+          return null;
+        }
 
+        const tolerance = Math.max(6 / state.scale, 4);
+        for (const handle of handlePoints(box)) {
           if (
-            point.x >= box.x &&
-            point.x <= box.x + box.width &&
-            point.y >= box.y &&
-            point.y <= box.y + box.height
+            Math.abs(point.x - handle.x) <= tolerance &&
+            Math.abs(point.y - handle.y) <= tolerance
           ) {
-            return { box, action: "move", handle: null };
+            return { box, action: "resize", handle: handle.name };
           }
         }
+
+        if (
+          point.x >= box.x &&
+          point.x <= box.x + box.width &&
+          point.y >= box.y &&
+          point.y <= box.y + box.height
+        ) {
+          return { box, action: "move", handle: null };
+        }
         return null;
       }
 
@@ -790,52 +857,34 @@
       }
 
       function drawBoxes() {
-        if (!state.image) {
+        const box = state.box;
+        if (!state.image || !box) {
           return;
         }
 
-        state.boxes.forEach((box) => {
-          const isActive = box.id === state.selectedId;
-          const topLeft = imageToCanvas({ x: box.x, y: box.y });
-          const width = box.width * state.scale;
-          const height = box.height * state.scale;
-
-          ctx.save();
-          ctx.lineWidth = isActive ? 3 : 2;
-          ctx.strokeStyle = box.color;
-          ctx.fillStyle = `${box.color}1f`;
-          ctx.fillRect(topLeft.x, topLeft.y, width, height);
-          ctx.strokeRect(topLeft.x, topLeft.y, width, height);
-
-          const labelText = `#${box.id}`;
-          ctx.font = "700 12px Inter, system-ui, sans-serif";
-          const labelWidth = Math.min(
-            Math.max(ctx.measureText(labelText).width + 14, 42),
-            Math.max(42, width)
-          );
-          const labelHeight = 22;
-          const labelY = Math.max(state.offsetY, topLeft.y - labelHeight);
-          ctx.fillStyle = box.color;
-          ctx.fillRect(topLeft.x, labelY, labelWidth, labelHeight);
-          ctx.fillStyle = "#ffffff";
-          ctx.textBaseline = "middle";
-          ctx.fillText(labelText, topLeft.x + 7, labelY + labelHeight / 2);
-
-          if (isActive) {
-            const size = 8;
-            ctx.fillStyle = "#ffffff";
-            ctx.strokeStyle = box.color;
-            ctx.lineWidth = 2;
-            for (const handle of handlePoints(box)) {
-              const point = imageToCanvas(handle);
-              ctx.beginPath();
-              ctx.rect(point.x - size / 2, point.y - size / 2, size, size);
-              ctx.fill();
-              ctx.stroke();
-            }
-          }
-          ctx.restore();
-        });
+        const topLeft = imageToCanvas({ x: box.x, y: box.y });
+        const width = box.width * state.scale;
+        const height = box.height * state.scale;
+
+        ctx.save();
+        ctx.lineWidth = 3;
+        ctx.strokeStyle = box.color;
+        ctx.fillStyle = `${box.color}1f`;
+        ctx.fillRect(topLeft.x, topLeft.y, width, height);
+        ctx.strokeRect(topLeft.x, topLeft.y, width, height);
+
+        const size = 8;
+        ctx.fillStyle = "#ffffff";
+        ctx.strokeStyle = box.color;
+        ctx.lineWidth = 2;
+        for (const handle of handlePoints(box)) {
+          const point = imageToCanvas(handle);
+          ctx.beginPath();
+          ctx.rect(point.x - size / 2, point.y - size / 2, size, size);
+          ctx.fill();
+          ctx.stroke();
+        }
+        ctx.restore();
       }
 
       function draw() {
@@ -859,15 +908,21 @@
         return Number.isFinite(value) ? Math.round(value * 1000) : 0;
       }
 
+      function toCorners(box) {
+        return {
+          x1: box.x,
+          y1: box.y,
+          x2: box.x + box.width,
+          y2: box.y + box.height
+        };
+      }
+
       function resultLines(box) {
         if (!box || !state.image) {
           return null;
         }
 
-        const x1 = box.x;
-        const y1 = box.y;
-        const x2 = box.x + box.width;
-        const y2 = box.y + box.height;
+        const { x1, y1, x2, y2 } = toCorners(box);
         const cx = box.x + box.width / 2;
         const cy = box.y + box.height / 2;
         const iw = imageWidth();
@@ -905,6 +960,9 @@
           controls.relativeOutput.textContent = "未选择";
           controls.relative1000Output.textContent = "未选择";
           controls.yoloOutput.textContent = "未选择";
+          controls.copyButtons.forEach((button) => {
+            button.disabled = true;
+          });
           return;
         }
 
@@ -913,6 +971,9 @@
         controls.relativeOutput.textContent = values.relative;
         controls.relative1000Output.textContent = values.relative1000;
         controls.yoloOutput.textContent = values.yolo;
+        controls.copyButtons.forEach((button) => {
+          button.disabled = false;
+        });
       }
 
       function updateControls() {
@@ -921,36 +982,35 @@
         const hasSelected = Boolean(selected);
         const disabled = !hasSelected;
 
-        controls.fitButton.disabled = !hasImage;
-        controls.clearButton.disabled = !state.boxes.length;
-        controls.addButton.disabled = !hasImage;
-        controls.deleteButton.disabled = disabled;
+        controls.pasteInput.disabled = !hasImage;
+        controls.pasteMode.disabled = !hasImage;
 
         for (const input of [
-          controls.xInput,
-          controls.yInput,
-          controls.wInput,
-          controls.hInput
+          controls.x1Input,
+          controls.y1Input,
+          controls.x2Input,
+          controls.y2Input
         ]) {
           input.disabled = disabled;
         }
 
         if (selected) {
-          controls.xInput.value = selected.x;
-          controls.yInput.value = selected.y;
-          controls.wInput.value = selected.width;
-          controls.hInput.value = selected.height;
+          const { x1, y1, x2, y2 } = toCorners(selected);
+          controls.x1Input.value = x1;
+          controls.y1Input.value = y1;
+          controls.x2Input.value = x2;
+          controls.y2Input.value = y2;
         } else {
-          controls.xInput.value = "";
-          controls.yInput.value = "";
-          controls.wInput.value = "";
-          controls.hInput.value = "";
+          controls.x1Input.value = "";
+          controls.y1Input.value = "";
+          controls.x2Input.value = "";
+          controls.y2Input.value = "";
         }
 
         controls.imageMeta.textContent = hasImage
           ? `${state.imageName} · ${imageWidth()} × ${imageHeight()}`
           : "未上传图片";
-        controls.boxMeta.textContent = `${state.boxes.length} 个标注`;
+        controls.boxMeta.textContent = hasSelected ? "已标注" : "未标注";
         updateResults(selected);
       }
 
@@ -976,9 +1036,8 @@
           image.onload = () => {
             state.image = image;
             state.imageName = file.name || "uploaded-image";
-            state.boxes = [];
-            state.selectedId = null;
-            state.nextId = 1;
+            state.box = null;
+            controls.pasteInput.value = "";
             setStatus(`已载入 ${state.imageName}`);
             sync();
           };
@@ -989,47 +1048,75 @@
         reader.readAsDataURL(file);
       }
 
-      function addCenteredBox() {
+      function setBoxFromCorners(x1, y1, x2, y2) {
         if (!state.image) {
           return;
         }
-        const width = Math.max(24, Math.round(imageWidth() * 0.28));
-        const height = Math.max(24, Math.round(imageHeight() * 0.22));
-        const x = Math.round((imageWidth() - width) / 2);
-        const y = Math.round((imageHeight() - height) / 2);
-        const box = makeBox(x, y, width, height);
-        state.boxes.push(box);
-        state.selectedId = box.id;
+
+        const left = clamp(Math.round(Math.min(x1, x2)), 0, Math.max(0, imageWidth() - 1));
+        const top = clamp(Math.round(Math.min(y1, y2)), 0, Math.max(0, imageHeight() - 1));
+        const right = clamp(Math.round(Math.max(x1, x2)), left + 1, imageWidth());
+        const bottom = clamp(Math.round(Math.max(y1, y2)), top + 1, imageHeight());
+        state.box = makeBox(left, top, right - left, bottom - top);
         sync();
       }
 
-      function deleteSelectedBox() {
-        if (!state.selectedId) {
-          return;
-        }
-        state.boxes = state.boxes.filter((box) => box.id !== state.selectedId);
-        state.selectedId = state.boxes.length
-          ? state.boxes[state.boxes.length - 1].id
-          : null;
+      function clearBox() {
+        state.box = null;
         sync();
       }
 
       function updateSelectedFromInputs() {
-        const box = selectedBox();
-        if (!box || !state.image) {
+        if (!selectedBox() || !state.image) {
           return;
         }
 
-        const x = Number.parseInt(controls.xInput.value, 10);
-        const y = Number.parseInt(controls.yInput.value, 10);
-        const width = Number.parseInt(controls.wInput.value, 10);
-        const height = Number.parseInt(controls.hInput.value, 10);
+        const values = [
+          Number.parseFloat(controls.x1Input.value),
+          Number.parseFloat(controls.y1Input.value),
+          Number.parseFloat(controls.x2Input.value),
+          Number.parseFloat(controls.y2Input.value)
+        ];
+        if (!values.every(Number.isFinite)) {
+          return;
+        }
 
-        box.x = clamp(x, 0, Math.max(0, imageWidth() - 1));
-        box.y = clamp(y, 0, Math.max(0, imageHeight() - 1));
-        box.width = clamp(width, 1, imageWidth() - box.x);
-        box.height = clamp(height, 1, imageHeight() - box.y);
-        sync();
+        setBoxFromCorners(...values);
+      }
+
+      function parseCoordinateList(value) {
+        const numbers = value.match(/-?\d+(?:\.\d+)?/g);
+        if (!numbers || numbers.length < 4) {
+          return null;
+        }
+        return numbers.slice(0, 4).map(Number);
+      }
+
+      function applyPastedCoordinates() {
+        if (!state.image) {
+          return;
+        }
+
+        const coords = parseCoordinateList(controls.pasteInput.value);
+        if (!coords) {
+          return;
+        }
+
+        let [x1, y1, x2, y2] = coords;
+        if (controls.pasteMode.value === "scale1000") {
+          x1 = (x1 / 1000) * imageWidth();
+          y1 = (y1 / 1000) * imageHeight();
+          x2 = (x2 / 1000) * imageWidth();
+          y2 = (y2 / 1000) * imageHeight();
+        } else if (controls.pasteMode.value === "relative") {
+          x1 *= imageWidth();
+          y1 *= imageHeight();
+          x2 *= imageWidth();
+          y2 *= imageHeight();
+        }
+
+        setBoxFromCorners(x1, y1, x2, y2);
+        setStatus("坐标已应用");
       }
 
       function moveBox(box, startBox, deltaX, deltaY) {
@@ -1073,12 +1160,10 @@
         const point = eventToImagePoint(event);
         const hit = hitTest(point);
         if (hit) {
-          state.selectedId = hit.box.id;
           state.drag = {
             action: hit.action,
             handle: hit.handle,
             start: point,
-            boxId: hit.box.id,
             startBox: { ...hit.box }
           };
           canvas.setPointerCapture(event.pointerId);
@@ -1087,13 +1172,11 @@
         }
 
         const box = makeBox(point.x, point.y, 1, 1);
-        state.boxes.push(box);
-        state.selectedId = box.id;
+        state.box = box;
         state.drag = {
           action: "create",
           handle: null,
           start: point,
-          boxId: box.id,
           startBox: { ...box }
         };
         canvas.setPointerCapture(event.pointerId);
@@ -1112,7 +1195,7 @@
           return;
         }
 
-        const box = state.boxes.find((item) => item.id === state.drag.boxId);
+        const box = state.box;
         if (!box) {
           return;
         }
@@ -1143,8 +1226,7 @@
 
         const createdBox = state.drag.action === "create" ? selectedBox() : null;
         if (createdBox && (createdBox.width < 3 || createdBox.height < 3)) {
-          state.boxes = state.boxes.filter((box) => box.id !== createdBox.id);
-          state.selectedId = null;
+          state.box = null;
         }
         state.drag = null;
         if (canvas.hasPointerCapture(event.pointerId)) {
@@ -1153,34 +1235,60 @@
         sync();
       }
 
+      function copyText(text) {
+        if (!text || text === "未选择") {
+          return;
+        }
+
+        const fallback = () => {
+          const textarea = document.createElement("textarea");
+          textarea.value = text;
+          textarea.style.position = "fixed";
+          textarea.style.opacity = "0";
+          document.body.append(textarea);
+          textarea.focus();
+          textarea.select();
+          document.execCommand("copy");
+          textarea.remove();
+        };
+
+        if (navigator.clipboard && window.isSecureContext) {
+          navigator.clipboard
+            .writeText(text)
+            .then(() => setStatus("已复制"))
+            .catch(() => {
+              fallback();
+              setStatus("已复制");
+            });
+        } else {
+          fallback();
+          setStatus("已复制");
+        }
+      }
+
       controls.fileInput.addEventListener("change", (event) => {
         loadImageFile(event.target.files[0]);
         event.target.value = "";
       });
 
-      controls.fitButton.addEventListener("click", () => {
-        resizeCanvas();
-        setStatus("视图已适配");
-      });
-
-      controls.clearButton.addEventListener("click", () => {
-        state.boxes = [];
-        state.selectedId = null;
-        sync();
-      });
-
-      controls.addButton.addEventListener("click", addCenteredBox);
-      controls.deleteButton.addEventListener("click", deleteSelectedBox);
-
       for (const input of [
-        controls.xInput,
-        controls.yInput,
-        controls.wInput,
-        controls.hInput
+        controls.x1Input,
+        controls.y1Input,
+        controls.x2Input,
+        controls.y2Input
       ]) {
         input.addEventListener("input", updateSelectedFromInputs);
       }
 
+      controls.pasteInput.addEventListener("input", applyPastedCoordinates);
+      controls.pasteMode.addEventListener("change", applyPastedCoordinates);
+
+      controls.copyButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          copyText($(button.dataset.copy).textContent);
+        });
+      });
+
       canvas.addEventListener("pointerdown", onPointerDown);
       canvas.addEventListener("pointermove", onPointerMove);
       canvas.addEventListener("pointerup", onPointerUp);
@@ -1208,7 +1316,7 @@
           return;
         }
         if (event.key === "Delete" || event.key === "Backspace") {
-          deleteSelectedBox();
+          clearBox();
         }
       });