Upload coordinatemaker.html

coordinatemaker.html

@@ -33,11 +33,13 @@
       background: rgba(44,222,88,0.15);
       box-sizing: border-box;
       cursor: move;
+      transition: box-shadow 0.2s;
     }
     .rect.selected {
       border: 2px solid #f00;
       background: rgba(255,100,100,0.15);
       z-index: 10;
+      box-shadow: 0 0 10px #f00a;
     }
     .handle {
       position: absolute;
@@ -54,6 +56,24 @@
     .rect.selected .handle {
       display: block;
     }
+    .rotate-handle {
+      position: absolute;
+      left: 50%;
+      top: -32px;
+      width: 18px;
+      height: 18px;
+      margin-left: -9px;
+      background: #ff0;
+      border: 2px solid #f90;
+      border-radius: 50%;
+      cursor: pointer;
+      z-index: 30;
+      display: none;
+      box-shadow: 0 0 4px #0006;
+    }
+    .rect.selected .rotate-handle {
+      display: block;
+    }
     #coords {
       font-family: monospace;
       margin-top: 10px;
@@ -209,11 +229,14 @@
     let drawing = false;
     let moving = false;
     let resizing = false;
+    let rotating = false;
     let startX = 0, startY = 0;
     let offsetX = 0, offsetY = 0;
     let originX = 0, originY = 0;
     let activeHandle = null;
     let memory = [];
+    let rotateStartAngle = 0;
+    let rotateCenter = {x:0, y:0};
 
     function updateFileNameLabel(name) {
       fileNameLabel.textContent = name ? name : "";
@@ -314,6 +337,7 @@
       memory.push({
         filename: currentImageName || '',
         coords: imgPoints,
+        angle: rectObj.angle || 0,
         id: Date.now() + Math.random()
       });
       updateMemoryList();
@@ -328,6 +352,7 @@
       setSelectedRect(false);
     }
 
+    // ----- Main Rectangle Creation -----
     container.addEventListener('mousedown', (e) => {
       if (!imgLoaded) return;
       if (!drawing) return;
@@ -341,7 +366,8 @@
       container.appendChild(rectEl);
       rectObj = {
         left: startX, top: startY, width: 0, height: 0,
-        element: rectEl, handles: []
+        element: rectEl, handles: [],
+        angle: 0
       };
       setSelectedRect(true);
       updateRectUI(rectObj);
@@ -367,6 +393,7 @@
           saveRectBtn.disabled = true;
         } else {
           createHandles(rectObj);
+          createRotateHandle(rectObj);
           updateCoords(rectObj);
           saveRectBtn.disabled = false;
         }
@@ -397,6 +424,7 @@
           rectObj.top = newTop;
           updateRectUI(rectObj);
           updateHandles(rectObj);
+          updateRotateHandle(rectObj);
           updateCoords(rectObj);
         }
         function onUp(ev) {
@@ -411,6 +439,7 @@
       }
     });
 
+    // ---- Handles (resize) ----
     function createHandles(rectObj) {
       if (rectObj.handles && rectObj.handles.length) {
         rectObj.handles.forEach(h=>h.remove());
@@ -428,11 +457,13 @@
           originX = e.clientX;
           originY = e.clientY;
           h._orig = {...rectObj};
+          h._orig.angle = rectObj.angle;
           document.body.style.cursor = h.style.cursor;
           function onMove(ev) {
             resizeRect(rectObj, ev, h._orig);
             updateRectUI(rectObj);
             updateHandles(rectObj);
+            updateRotateHandle(rectObj);
             updateCoords(rectObj);
           }
           function onUp(ev) {
@@ -462,16 +493,13 @@
     function updateHandles(rectObj) {
       const {width, height, handles} = rectObj;
       if(!handles || handles.length!==4) return;
-      handles[0].style.left = '0px';
-      handles[0].style.top  = '0px';
-      handles[1].style.left = width + 'px';
-      handles[1].style.top  = '0px';
-      handles[2].style.left = width + 'px';
-      handles[2].style.top  = height + 'px';
-      handles[3].style.left = '0px';
-      handles[3].style.top  = height + 'px';
+      handles[0].style.left = '0px';          handles[0].style.top  = '0px';
+      handles[1].style.left = width + 'px';   handles[1].style.top  = '0px';
+      handles[2].style.left = width + 'px';   handles[2].style.top  = height + 'px';
+      handles[3].style.left = '0px';          handles[3].style.top  = height + 'px';
     }
     function resizeRect(rectObj, e, orig) {
+      // ignore angle for resizing, keep axis-aligned bounding box
       let dx = e.clientX - originX;
       let dy = e.clientY - originY;
       let nd = {...orig};
@@ -507,12 +535,75 @@
       nd.height = Math.max(10, Math.min(nd.height, container.clientHeight - nd.top));
       Object.assign(rectObj, nd);
     }
+
+    // ---- Rotation Handle ----
+    function createRotateHandle(rectObj) {
+      if(rectObj.rotateHandle) rectObj.rotateHandle.remove();
+      let h = document.createElement('div');
+      h.className = 'rotate-handle';
+      rectObj.element.appendChild(h);
+      rectObj.rotateHandle = h;
+      updateRotateHandle(rectObj);
+
+      h.addEventListener('mousedown', function(e) {
+        rotating = true;
+        const rectC = container.getBoundingClientRect();
+        // center of rectangle in container coords
+        let cx = rectObj.left + rectObj.width/2;
+        let cy = rectObj.top + rectObj.height/2;
+        rotateCenter = {x: cx, y: cy};
+        // 角度初期値
+        const mx = e.clientX - rectC.left, my = e.clientY - rectC.top;
+        rotateStartAngle = Math.atan2(my - cy, mx - cx) * 180/Math.PI - (rectObj.angle||0);
+        document.body.style.cursor = "crosshair";
+        function onMove(ev) {
+          const mx2 = ev.clientX - rectC.left, my2 = ev.clientY - rectC.top;
+          let angle = Math.atan2(my2 - cy, mx2 - cx) * 180/Math.PI - rotateStartAngle;
+          // angleを0-360に正規化
+          angle = ((angle % 360) + 360) % 360;
+          rectObj.angle = angle;
+          updateRectUI(rectObj);
+          updateHandles(rectObj);
+          updateRotateHandle(rectObj);
+          updateCoords(rectObj);
+        }
+        function onUp(ev) {
+          rotating = false;
+          document.body.style.cursor = "";
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        }
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+        e.stopPropagation();
+      });
+    }
+    function updateRotateHandle(rectObj) {
+      if(!rectObj.rotateHandle) return;
+      // 回転ハンドルの位置は矩形の中心上方向に固定
+      let w = rectObj.width, h = rectObj.height;
+      let angle = rectObj.angle || 0;
+      // 中心
+      let cx = w/2, cy = h/2;
+      // ハンドルの相対座標（矩形の中心から上へ）
+      let r = Math.max(w, h)/2 + 24;
+      let rad = (-90 + angle) * Math.PI / 180.0;
+      let hx = cx + r * Math.cos(rad);
+      let hy = cy + r * Math.sin(rad);
+      rectObj.rotateHandle.style.left = `${hx}px`;
+      rectObj.rotateHandle.style.top = `${hy}px`;
+    }
+
+    // --- 矩形のUI更新: 回転も反映
     function updateRectUI(rectObj) {
       rectObj.element.style.left = rectObj.left + 'px';
       rectObj.element.style.top = rectObj.top + 'px';
       rectObj.element.style.width = rectObj.width + 'px';
       rectObj.element.style.height = rectObj.height + 'px';
       rectObj.element.classList.add('selected');
+      rectObj.angle = typeof rectObj.angle === "number" ? rectObj.angle : 0;
+      rectObj.element.style.transform = `rotate(${rectObj.angle||0}deg)`;
+      rectObj.element.style.transformOrigin = "50% 50%";
     }
 
     function setSelectedRect(selected) {
@@ -528,18 +619,29 @@
 
     function getRectImageCoords(rectObj) {
       const {left:imgL, top:imgT, width:imgW, height:imgH} = dispImgInfo;
-      const clamp = (v, min, max) => Math.max(min, Math.min(v, max));
-      const dispPoints = [
-        { x: clamp(rectObj.left, imgL, imgL+imgW), y: clamp(rectObj.top, imgT, imgT+imgH) },
-        { x: clamp(rectObj.left+rectObj.width, imgL, imgL+imgW), y: clamp(rectObj.top, imgT, imgT+imgH) },
-        { x: clamp(rectObj.left+rectObj.width, imgL, imgL+imgW), y: clamp(rectObj.top+rectObj.height, imgT, imgT+imgH) },
-        { x: clamp(rectObj.left, imgL, imgL+imgW), y: clamp(rectObj.top+rectObj.height, imgT, imgT+imgH) }
+      let x = rectObj.left, y = rectObj.top, w = rectObj.width, h = rectObj.height;
+      // 中心
+      let cx = x + w/2, cy = y + h/2;
+      // 角度
+      let angle = ((typeof rectObj.angle === "number" ? rectObj.angle : 0) * Math.PI) / 180;
+      // 各頂点
+      let box = [
+        [x,     y    ], // TL
+        [x+w,   y    ], // TR
+        [x+w,   y+h  ], // BR
+        [x,     y+h  ]  // BL
       ];
-      const toImgPx = (p) => [
-        Math.round( (p.x - imgL) * imgNaturalWidth / imgW ),
-        Math.round( (p.y - imgT) * imgNaturalHeight / imgH )
-      ];
-      return dispPoints.map(toImgPx);
+      // 回転適用
+      let rot = box.map(([px,py]) => {
+        let dx = px - cx, dy = py - cy;
+        let rx = dx * Math.cos(angle) - dy * Math.sin(angle) + cx;
+        let ry = dx * Math.sin(angle) + dy * Math.cos(angle) + cy;
+        // img領域→元画像座標
+        let ix = Math.round((rx - imgL) * imgNaturalWidth / imgW);
+        let iy = Math.round((ry - imgT) * imgNaturalHeight / imgH);
+        return [ix, iy];
+      });
+      return rot;
     }
 
     function updateCoords(rectObj) {
@@ -553,18 +655,20 @@
         1. (${imgPoints[0][0]}, ${imgPoints[0][1]})<br>
         2. (${imgPoints[1][0]}, ${imgPoints[1][1]})<br>
         3. (${imgPoints[2][0]}, ${imgPoints[2][1]})<br>
-        4. (${imgPoints[3][0]}, ${imgPoints[3][1]})<br>`;
+        4. (${imgPoints[3][0]}, ${imgPoints[3][1]})<br>
+        [angle: ${rectObj.angle ? rectObj.angle.toFixed(1) : 0}°]`;
     }
 
     function updateMemoryList() {
       let html = '';
-      memory.forEach((mem, idx) => {
+      memory.forEach((mem) => {
         html += `<div class="memory-item" data-id="${mem.id}">
           <span class="memory-label"><b>${mem.filename}</b> : 
             TL(${mem.coords[0][0]},${mem.coords[0][1]}) 
             TR(${mem.coords[1][0]},${mem.coords[1][1]}) 
             BR(${mem.coords[2][0]},${mem.coords[2][1]}) 
             BL(${mem.coords[3][0]},${mem.coords[3][1]})
+            [angle: ${mem.angle || 0}°]
           </span>
           <button class="memory-delete-btn" data-id="${mem.id}" title="Delete this memory">&times;</button>
         </div>`;
@@ -586,10 +690,10 @@
         alert("No memory to save.");
         return;
       }
-      // Convert memory to required JSON format
-      // { "filename": { "print_area": [[x,y], ...] }, ... }
+      // ★ 画像名に「bases/」を付けないように修正
       let outObj = {};
       memory.forEach(mem => {
+        // ファイル名そのままをキーに
         outObj[mem.filename] = {
           print_area: mem.coords
         };
@@ -599,7 +703,6 @@
       let filename = filenameInput.value.trim() || "templates.json";
       filename = filename.replace(/[\\\/:*?"<>|]/g, "_");
 
-      // Prefer File System Access API if available
       if (window.showSaveFilePicker) {
         try {
           const opts = {
@@ -623,8 +726,6 @@
           }
         }
       }
-
-      // Fallback: Classic download
       const blob = new Blob([jsonString], {type: "application/json"});
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');