Spaces:

junjiro1129
/

coordinate-maker

Running

App Files Files Community

junjiro1129 commited on Jun 23, 2025

Commit

2a05f0c

verified ·

1 Parent(s): f79a535

Upgrade file

Browse files

"Free transformation mode" that allows you to freely change the shape of the rectangle

Files changed (1) hide show

index.html +395 -408

index.html CHANGED Viewed

@@ -3,7 +3,9 @@
 <head>
   <meta charset="UTF-8">
   <title>Coordinate Maker</title>
   <style>
     #img-container {
       position: relative;
       width: 800px;
@@ -33,6 +35,7 @@
       background: rgba(44,222,88,0.15);
       box-sizing: border-box;
       cursor: move;
       transition: box-shadow 0.2s;
     }
     .rect.selected {
@@ -43,36 +46,48 @@
     }
     .handle {
       position: absolute;
-      width: 12px; height: 12px;
       background: #2a7;
       border-radius: 50%;
       cursor: pointer;
-      margin: -6px 0 0 -6px;
       z-index: 20;
-      border: 1px solid #fff;
       box-shadow: 0 0 2px #0004;
-      display: none;
     }
     .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;
@@ -164,7 +179,7 @@
       margin-left: 1em;
       font-size: 1.1em;
     }
-    #add-rect-btn, #save-rect-btn, #memory-save-btn {
       margin-right: 1em;
       padding: 0.5em 1em;
       font-size: 1em;
@@ -175,9 +190,6 @@
       border-color: #ccc;
       cursor: default;
     }
-    #rect-list {
-      display: none;
-    }
     input[type="file"]::-webkit-file-upload-button { visibility: visible; }
     input[type="file"]::file-selector-button { visibility: visible; }
     input[type="file"]::-ms-value { display: none; }
@@ -195,9 +207,11 @@
   <div id="toolbar">
     <label style="display:inline-block; position:relative;">
       <input type="file" id="img-input" accept="image/*" style="width:140px;">
     </label>
     <span id="file-name-label"></span>
-    <button id="add-rect-btn">Add Rectangle</button>
     <button id="save-rect-btn" disabled>Save Rectangle</button>
     <input type="text" id="filename-input" placeholder="templates.json">
     <button id="memory-save-btn">Save Memory to File</button>
@@ -209,456 +223,461 @@
   <div id="coords">Coordinates:<br></div>
   <div id="memory-list"></div>
   <script>
     const imgInput = document.getElementById('img-input');
     const img = document.getElementById('the-img');
     const container = document.getElementById('img-container');
     const coords = document.getElementById('coords');
     const dropMessage = document.getElementById('drop-message');
     const addRectBtn = document.getElementById('add-rect-btn');
     const saveRectBtn = document.getElementById('save-rect-btn');
     const memorySaveBtn = document.getElementById('memory-save-btn');
     const memoryList = document.getElementById('memory-list');
     const filenameInput = document.getElementById('filename-input');
     const fileNameLabel = document.getElementById('file-name-label');
-    let imgLoaded = false;
-    let imgNaturalWidth = 0, imgNaturalHeight = 0;
     let dispImgInfo = {left:0, top:0, width:0, height:0};
     let currentImageName = '';
     let rectObj = null;
-    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 : "";
-    }
     function loadImageFromFile(file) {
       if (!file || !file.type.match(/^image\//)) return;
       const reader = new FileReader();
-      reader.onload = function(ev) {
-        img.src = ev.target.result;
-        currentImageName = file.name || '';
-        updateFileNameLabel(currentImageName);
-      };
       reader.readAsDataURL(file);
     }
-    imgInput.addEventListener('change', e => {
-      const file = e.target.files[0];
-      imgInput.value = "";
-      updateFileNameLabel(""); // Clear previous file name immediately
-      if (file) {
-        loadImageFromFile(file);
-      }
-    });
-    container.addEventListener('dragover', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      container.classList.add('dragover');
-      dropMessage.style.display = 'block';
-    });
-    container.addEventListener('dragleave', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      container.classList.remove('dragover');
-      dropMessage.style.display = 'none';
     });
-    container.addEventListener('drop', (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      container.classList.remove('dragover');
-      dropMessage.style.display = 'none';
-      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
-        const file = e.dataTransfer.files[0];
-        updateFileNameLabel(""); // Clear previous name immediately
-        loadImageFromFile(file);
-      }
     });
     img.addEventListener('load', () => {
-      imgLoaded = true;
-      img.style.display = "block";
-      imgNaturalWidth = img.naturalWidth;
-      imgNaturalHeight = img.naturalHeight;
-      img.style.width = '100%';
-      img.style.height = '100%';
-      img.style.objectFit = 'contain';
-      clearRect();
-      updateDispImgInfo();
-      updateCoords();
     });
     function updateDispImgInfo() {
-      const cW = container.clientWidth;
-      const cH = container.clientHeight;
-      const iW = imgNaturalWidth;
-      const iH = imgNaturalHeight;
-      let dispW = cW, dispH = cH, dispL = 0, dispT = 0;
-      const imgAspect = iW / iH;
-      const contAspect = cW / cH;
-      if (imgAspect > contAspect) {
-        dispW = cW;
-        dispH = cW / imgAspect;
-        dispT = (cH - dispH) / 2;
-        dispL = 0;
-      } else {
-        dispH = cH;
-        dispW = cH * imgAspect;
-        dispL = (cW - dispW) / 2;
-        dispT = 0;
-      }
       dispImgInfo = {left:dispL, top:dispT, width:dispW, height:dispH};
     }
     window.addEventListener('resize', updateDispImgInfo);
-    addRectBtn.addEventListener('click', () => {
-      if (!imgLoaded) return;
-      if (rectObj) return;
-      drawing = true;
-      setSelectedRect(true);
-      coords.innerHTML = "Draw a rectangle on the image.<br>";
-      saveRectBtn.disabled = true;
-    });
-    saveRectBtn.addEventListener('click', () => {
-      if (!rectObj) return;
-      const imgPoints = getRectImageCoords(rectObj);
-      memory.push({
-        filename: currentImageName || '',
-        coords: imgPoints,
-        angle: rectObj.angle || 0,
-        id: Date.now() + Math.random()
-      });
-      updateMemoryList();
-      clearRect();
-      coords.innerHTML = "Coordinates:<br>";
-      saveRectBtn.disabled = true;
-    });
-    function clearRect() {
-      if (rectObj && rectObj.element) rectObj.element.remove();
-      rectObj = null;
-      setSelectedRect(false);
-    }
-    // ----- Main Rectangle Creation -----
-    container.addEventListener('mousedown', (e) => {
-      if (!imgLoaded) return;
-      if (!drawing) return;
-      if (rectObj) return;
       if (e.target !== container && e.target !== img) return;
       const rectC = container.getBoundingClientRect();
-      startX = e.clientX - rectC.left;
-      startY = e.clientY - rectC.top;
-      let rectEl = document.createElement('div');
-      rectEl.className = 'rect selected';
-      container.appendChild(rectEl);
       rectObj = {
-        left: startX, top: startY, width: 0, height: 0,
-        element: rectEl, handles: [],
-        angle: 0
       };
-      setSelectedRect(true);
-      updateRectUI(rectObj);
-      document.body.style.cursor = "crosshair";
-      drawing = true;
-      function onMouseMove(ev) {
-        const currX = ev.clientX - rectC.left;
-        const currY = ev.clientY - rectC.top;
-        rectObj.left = Math.min(startX, currX);
-        rectObj.top = Math.min(startY, currY);
-        rectObj.width = Math.abs(currX - startX);
-        rectObj.height = Math.abs(currY - startY);
-        updateRectUI(rectObj);
-        updateCoords(rectObj);
       }
-      function onMouseUp(ev) {
-        drawing = false;
-        document.body.style.cursor = "";
-        document.removeEventListener('mousemove', onMouseMove);
-        document.removeEventListener('mouseup', onMouseUp);
-        if (rectObj.width < 10 || rectObj.height < 10) {
-          clearRect();
-          saveRectBtn.disabled = true;
-        } else {
-          createHandles(rectObj);
-          createRotateHandle(rectObj);
-          updateCoords(rectObj);
-          saveRectBtn.disabled = false;
         }
       }
-      document.addEventListener('mousemove', onMouseMove);
-      document.addEventListener('mouseup', onMouseUp);
       e.preventDefault();
     });
-    container.addEventListener('mousedown', (e) => {
-      if (drawing) return;
-      if (!imgLoaded) return;
-      if (!rectObj || !rectObj.element) return;
-      if (e.target === rectObj.element) {
-        setSelectedRect(true);
-        saveRectBtn.disabled = false;
-        moving = true;
         const rectC = container.getBoundingClientRect();
-        offsetX = e.clientX - rectC.left - rectObj.left;
-        offsetY = e.clientY - rectC.top - rectObj.top;
         document.body.style.cursor = "move";
         function onMove(ev) {
-          let newLeft = ev.clientX - rectC.left - offsetX;
-          let newTop = ev.clientY - rectC.top - offsetY;
-          newLeft = Math.max(0, Math.min(newLeft, container.clientWidth - rectObj.width));
-          newTop = Math.max(0, Math.min(newTop, container.clientHeight - rectObj.height));
-          rectObj.left = newLeft;
-          rectObj.top = newTop;
-          updateRectUI(rectObj);
-          updateHandles(rectObj);
-          updateRotateHandle(rectObj);
-          updateCoords(rectObj);
         }
         function onUp(ev) {
-          moving = false;
-          document.body.style.cursor = "";
-          document.removeEventListener('mousemove', onMove);
-          document.removeEventListener('mouseup', onUp);
         }
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-        e.stopPropagation();
       }
     });
-    // ---- Handles (resize) ----
     function createHandles(rectObj) {
-      if (rectObj.handles && rectObj.handles.length) {
-        rectObj.handles.forEach(h=>h.remove());
-      }
-      const positions = ['tl','tr','br','bl'];
       rectObj.handles = [];
       for(let i=0; i<4; i++) {
         let h = document.createElement('div');
         h.className = 'handle';
-        h.dataset.handle = positions[i];
-        h.style.cursor = handleCursor(positions[i]);
-        h.addEventListener('mousedown', (e) => {
-          resizing = true;
-          activeHandle = positions[i];
-          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) {
-            resizing = false;
-            document.body.style.cursor = "";
-            document.removeEventListener('mousemove', onMove);
-            document.removeEventListener('mouseup', onUp);
           }
-          document.addEventListener('mousemove', onMove);
-          document.addEventListener('mouseup', onUp);
-          e.stopPropagation();
         });
-        rectObj.element.appendChild(h);
-        rectObj.handles.push(h);
-      }
-      updateHandles(rectObj);
-    }
-    function handleCursor(pos) {
-      switch(pos) {
-        case 'tl': return 'nwse-resize';
-        case 'tr': return 'nesw-resize';
-        case 'br': return 'nwse-resize';
-        case 'bl': return 'nesw-resize';
-        default: return 'pointer';
       }
     }
     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';
-    }
-    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};
-      switch(activeHandle) {
-        case 'tl':
-          nd.left = Math.min(orig.left + dx, orig.left + orig.width - 10);
-          nd.top = Math.min(orig.top + dy, orig.top + orig.height - 10);
-          nd.width = orig.width - (nd.left - orig.left);
-          nd.height = orig.height - (nd.top - orig.top);
-          break;
-        case 'tr':
-          nd.top = Math.min(orig.top + dy, orig.top + orig.height - 10);
-          nd.width = Math.max(10, orig.width + dx);
-          nd.height = orig.height - (nd.top - orig.top);
-          nd.left = orig.left;
-          break;
-        case 'br':
-          nd.width = Math.max(10, orig.width + dx);
-          nd.height = Math.max(10, orig.height + dy);
-          nd.left = orig.left;
-          nd.top = orig.top;
-          break;
-        case 'bl':
-          nd.left = Math.min(orig.left + dx, orig.left + orig.width - 10);
-          nd.width = orig.width - (nd.left - orig.left);
-          nd.height = Math.max(10, orig.height + dy);
-          nd.top = orig.top;
-          break;
       }
-      nd.left = Math.max(0, Math.min(nd.left, container.clientWidth - nd.width));
-      nd.top = Math.max(0, Math.min(nd.top, container.clientHeight - nd.height));
-      nd.width = Math.max(10, Math.min(nd.width, container.clientWidth - nd.left));
-      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) {
-      if (rectObj && rectObj.element) {
-        if (selected) {
-          rectObj.element.classList.add('selected');
-        } else {
-          rectObj.element.classList.remove('selected');
-        }
-      }
       saveRectBtn.disabled = !rectObj;
     }
     function getRectImageCoords(rectObj) {
       const {left:imgL, top:imgT, width:imgW, height:imgH} = dispImgInfo;
-      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
-      ];
-      // 回転適用
-      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) {
-      if (!rectObj) {
-        coords.innerHTML = "Coordinates:<br>";
-        return;
-      }
       const imgPoints = getRectImageCoords(rectObj);
       coords.innerHTML =
         `Original image pixel coordinates (top-left origin):<br>
         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>
-        [angle: ${rectObj.angle ? rectObj.angle.toFixed(1) : 0}°]`;
     }
     function updateMemoryList() {
       let html = '';
       memory.forEach((mem) => {
@@ -668,14 +687,12 @@
             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>`;
       });
       memoryList.innerHTML = html || "<span style='color:#999;'>No memory saved.</span>";
     }
     memoryList.addEventListener('click', (e) => {
       if (e.target.classList.contains('memory-delete-btn')) {
         const id = e.target.dataset.id;
@@ -684,59 +701,29 @@
       }
     });
-    // Save memory to JSON file using the File System Access API if available (showSaveFilePicker)
     memorySaveBtn.addEventListener('click', async () => {
-      if (!memory.length) {
-        alert("No memory to save.");
-        return;
-      }
-      // ★ 画像名に「bases/」を付けないように修正
       let outObj = {};
-      memory.forEach(mem => {
-        // ファイル名そのままをキーに
-        outObj[mem.filename] = {
-          print_area: mem.coords
-        };
-      });
       let jsonString = JSON.stringify(outObj, null, 2);
       let filename = filenameInput.value.trim() || "templates.json";
       filename = filename.replace(/[\\\/:*?"<>|]/g, "_");
       if (window.showSaveFilePicker) {
         try {
           const opts = {
             suggestedName: filename,
-            types: [
-              {
-                description: 'JSON Files',
-                accept: {'application/json': ['.json', '.txt']}
-              }
-            ]
           };
           const handle = await window.showSaveFilePicker(opts);
           const writable = await handle.createWritable();
-          await writable.write(jsonString);
-          await writable.close();
-          alert("Memory saved!");
-          return;
-        } catch (err) {
-          if (err.name !== "AbortError") {
-            alert("Failed to save file: " + err.message);
-          }
-        }
       }
       const blob = new Blob([jsonString], {type: "application/json"});
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = filename;
-      document.body.appendChild(a);
-      a.click();
-      setTimeout(() => {
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-      }, 100);
     });
     document.addEventListener('keydown', e => {

 <head>
   <meta charset="UTF-8">
   <title>Coordinate Maker</title>
+  <meta name="viewport" content="width=800,user-scalable=no">
   <style>
+    /* ...（CSSは変更不要なので省略。前回そのまま）... */
     #img-container {
       position: relative;
       width: 800px;
       background: rgba(44,222,88,0.15);
       box-sizing: border-box;
       cursor: move;
+      pointer-events: auto;
       transition: box-shadow 0.2s;
     }
     .rect.selected {
     }
     .handle {
       position: absolute;
+      width: 14px; height: 14px;
+      margin: -7px 0 0 -7px;
       background: #2a7;
       border-radius: 50%;
       cursor: pointer;
       z-index: 20;
+      border: 2px solid #fff;
       box-shadow: 0 0 2px #0004;
+      display: block;
     }
     .rect.selected .handle {
+      background: #f00;
     }
+    .rotate-handle, .quad-rotate-handle {
       position: absolute;
       width: 18px;
       height: 18px;
       background: #ff0;
       border: 2px solid #f90;
       border-radius: 50%;
+      cursor: grab;
       z-index: 30;
+      display: block;
       box-shadow: 0 0 4px #0006;
     }
+    .rotate-handle {
+      left: 50%;
+      top: -32px;
+      transform: translate(-50%,0);
+    }
+    .quad-svg {
+      position: absolute;
+      left: 0; top: 0;
+      width: 100%; height: 100%;
+      pointer-events: none;
+      z-index: 2;
+    }
+    .quad-svg polygon {
+      fill: rgba(44,222,88,0.15);
+      stroke: #f00;
+      stroke-width: 2;
+      pointer-events: stroke;
     }
     #coords {
       font-family: monospace;
       margin-left: 1em;
       font-size: 1.1em;
     }
+    #add-rect-btn, #add-quad-btn, #save-rect-btn, #memory-save-btn {
       margin-right: 1em;
       padding: 0.5em 1em;
       font-size: 1em;
       border-color: #ccc;
       cursor: default;
     }
     input[type="file"]::-webkit-file-upload-button { visibility: visible; }
     input[type="file"]::file-selector-button { visibility: visible; }
     input[type="file"]::-ms-value { display: none; }
   <div id="toolbar">
     <label style="display:inline-block; position:relative;">
       <input type="file" id="img-input" accept="image/*" style="width:140px;">
+      <span style="position:absolute;left:12px;top:8px;pointer-events:none;color:#555;font-size:1em;" id="file-input-label">Choose File</span>
     </label>
     <span id="file-name-label"></span>
+    <button id="add-rect-btn">Rectangle Mode</button>
+    <button id="add-quad-btn">Free Transform Mode</button>
     <button id="save-rect-btn" disabled>Save Rectangle</button>
     <input type="text" id="filename-input" placeholder="templates.json">
     <button id="memory-save-btn">Save Memory to File</button>
   <div id="coords">Coordinates:<br></div>
   <div id="memory-list"></div>
   <script>
+    // === DOM取得 ===
     const imgInput = document.getElementById('img-input');
     const img = document.getElementById('the-img');
     const container = document.getElementById('img-container');
     const coords = document.getElementById('coords');
     const dropMessage = document.getElementById('drop-message');
     const addRectBtn = document.getElementById('add-rect-btn');
+    const addQuadBtn = document.getElementById('add-quad-btn');
     const saveRectBtn = document.getElementById('save-rect-btn');
     const memorySaveBtn = document.getElementById('memory-save-btn');
     const memoryList = document.getElementById('memory-list');
     const filenameInput = document.getElementById('filename-input');
     const fileNameLabel = document.getElementById('file-name-label');
+    const fileInputLabel = document.getElementById('file-input-label');
+    // --- State ---
+    let imgLoaded = false, imgNaturalWidth = 0, imgNaturalHeight = 0;
     let dispImgInfo = {left:0, top:0, width:0, height:0};
     let currentImageName = '';
+    let currentMode = "rect"; // "rect" or "quad"
     let rectObj = null;
+    let drawing = false, moving = false, resizing = false, rotating = false;
+    let startX = 0, startY = 0, offsetX = 0, offsetY = 0, originX = 0, originY = 0, rotateStartAngle = 0;
+    let activeHandle = null, memory = [];
+    let quadPoints = null; // only for quad mode
+    let quadSVG = null;
+    let rotateHandle = null;
+    let quadRotateHandle = null;
+    // --- File input label (hide when file is selected) ---
+    imgInput.addEventListener('change', (e) => {
+      if(imgInput.files && imgInput.files.length) fileInputLabel.style.display = 'none';
+      else fileInputLabel.style.display = '';
+    });
+    imgInput.addEventListener('input', (e) => {
+      if(imgInput.files && imgInput.files.length) fileInputLabel.style.display = 'none';
+      else fileInputLabel.style.display = '';
+    });
+    // --- Mode Buttons ---
+    addRectBtn.onclick = () => {
+      currentMode = "rect";
+      addRectBtn.style.background = "#baffba";
+      addQuadBtn.style.background = "";
+      clearRect(); saveRectBtn.disabled = true;
+    };
+    addQuadBtn.onclick = () => {
+      currentMode = "quad";
+      addQuadBtn.style.background = "#baffba";
+      addRectBtn.style.background = "";
+      clearRect(); saveRectBtn.disabled = true;
+    };
+    addRectBtn.style.background = "#baffba";
+    function updateFileNameLabel(name) { fileNameLabel.textContent = name ? name : ""; }
     function loadImageFromFile(file) {
       if (!file || !file.type.match(/^image\//)) return;
       const reader = new FileReader();
+      reader.onload = ev => { img.src = ev.target.result; currentImageName = file.name || ''; updateFileNameLabel(currentImageName); };
       reader.readAsDataURL(file);
     }
+    imgInput.addEventListener('change', e => {
+      const file = e.target.files[0];
+      imgInput.value = "";
+      updateFileNameLabel("");
+      if (file) loadImageFromFile(file);
     });
+    container.addEventListener('dragover', e => { e.preventDefault(); e.stopPropagation(); container.classList.add('dragover'); dropMessage.textContent = "Drop image here"; dropMessage.style.display = 'block'; });
+    container.addEventListener('dragleave', e => { e.preventDefault(); e.stopPropagation(); container.classList.remove('dragover'); dropMessage.style.display = 'none'; });
+    container.addEventListener('drop', e => {
+      e.preventDefault(); e.stopPropagation();
+      container.classList.remove('dragover'); dropMessage.style.display = 'none';
+      if (e.dataTransfer.files && e.dataTransfer.files[0]) { const file = e.dataTransfer.files[0]; updateFileNameLabel(""); loadImageFromFile(file); }
     });
     img.addEventListener('load', () => {
+      imgLoaded = true; img.style.display = "block";
+      imgNaturalWidth = img.naturalWidth; imgNaturalHeight = img.naturalHeight;
+      img.style.width = '100%'; img.style.height = '100%'; img.style.objectFit = 'contain';
+      clearRect(); updateDispImgInfo(); updateCoords();
     });
     function updateDispImgInfo() {
+      const cW = container.clientWidth, cH = container.clientHeight, iW = imgNaturalWidth, iH = imgNaturalHeight;
+      let dispW = cW, dispH = cH, dispL = 0, dispT = 0, imgAspect = iW / iH, contAspect = cW / cH;
+      if (imgAspect > contAspect) { dispW = cW; dispH = cW / imgAspect; dispT = (cH - dispH) / 2; dispL = 0; }
+      else { dispH = cH; dispW = cH * imgAspect; dispL = (cW - dispW) / 2; dispT = 0; }
       dispImgInfo = {left:dispL, top:dispT, width:dispW, height:dispH};
     }
     window.addEventListener('resize', updateDispImgInfo);
+    // --- Drawing ---
+    container.addEventListener('mousedown', e => {
+      if (!imgLoaded || drawing || rectObj) return;
       if (e.target !== container && e.target !== img) return;
       const rectC = container.getBoundingClientRect();
+      startX = e.clientX - rectC.left; startY = e.clientY - rectC.top;
+      let el = document.createElement('div');
+      el.className = 'rect selected';
+      container.appendChild(el);
       rectObj = {
+        type: currentMode,
+        el: el,
+        x: startX, y: startY, w: 0, h: 0,
+        angle: 0, handles: []
       };
+      setSelectedRect(true); updateRectUI(rectObj);
+      drawing = true; saveRectBtn.disabled = true;
+      function onMove(ev) {
+        const currX = ev.clientX - rectC.left, currY = ev.clientY - rectC.top;
+        rectObj.x = Math.min(startX, currX); rectObj.y = Math.min(startY, currY);
+        rectObj.w = Math.abs(currX - startX); rectObj.h = Math.abs(currY - startY);
+        updateRectUI(rectObj); updateCoords(rectObj);
       }
+      function onUp(ev) {
+        drawing = false; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
+        if (rectObj.w < 10 || rectObj.h < 10) { clearRect(); saveRectBtn.disabled = true; }
+        else {
+          createHandles(rectObj);
+          if(currentMode==="rect") createRotateHandle(rectObj);
+          else { quadPoints = null; createHandles(rectObj); }
+          updateCoords(rectObj); saveRectBtn.disabled = false;
         }
       }
+      document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
       e.preventDefault();
     });
+    // --- Rect/Quad move ---
+    container.addEventListener('mousedown', e => {
+      if (drawing || !imgLoaded) return;
+      if (!rectObj || !rectObj.el) return;
+      if (e.target === rectObj.el && !rotating) {
+        setSelectedRect(true); saveRectBtn.disabled = false; moving = true;
         const rectC = container.getBoundingClientRect();
+        offsetX = e.clientX - rectC.left - rectObj.x;
+        offsetY = e.clientY - rectC.top - rectObj.y;
         document.body.style.cursor = "move";
         function onMove(ev) {
+          let newX = ev.clientX - rectC.left - offsetX, newY = ev.clientY - rectC.top - offsetY;
+          if(currentMode==="quad" && quadPoints) {
+            let dx = newX - rectObj.x, dy = newY - rectObj.y;
+            for(let i=0;i<4;i++) {
+              quadPoints[i][0] += dx;
+              quadPoints[i][1] += dy;
+            }
+            rectObj.x = newX; rectObj.y = newY;
+            updateQuadSVG();
+            updateHandlesQuad();
+            updateCoordsQuad();
+            updateQuadRotateHandle();
+          } else {
+            rectObj.x = newX; rectObj.y = newY; updateRectUI(rectObj); updateHandles(rectObj); updateRotateHandle(rectObj); updateCoords(rectObj);
+          }
         }
         function onUp(ev) {
+          moving = false; document.body.style.cursor = ""; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
         }
+        document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp); e.stopPropagation();
       }
     });
+    // --- Handles (resize/drag) ---
     function createHandles(rectObj) {
+      if (rectObj.handles && rectObj.handles.length) rectObj.handles.forEach(h=>h.remove());
       rectObj.handles = [];
+      const positions = [
+        {name:"tl", left:0, top:0},
+        {name:"tr", left:1, top:0},
+        {name:"br", left:1, top:1},
+        {name:"bl", left:0, top:1},
+      ];
       for(let i=0; i<4; i++) {
         let h = document.createElement('div');
         h.className = 'handle';
+        h.dataset.handle = positions[i].name;
+        h.style.left = (positions[i].left*100) + '%';
+        h.style.top = (positions[i].top*100) + '%';
+        h.style.cursor = ["nwse-resize","nesw-resize","nwse-resize","nesw-resize"][i];
+        h.addEventListener('mousedown', evt => {
+          resizing = true; activeHandle = i;
+          originX = evt.clientX; originY = evt.clientY;
+          let orig = {...rectObj};
+          let origAngle = rectObj.angle;
+          let origPoints = getRectCornerPoints(rectObj);
           document.body.style.cursor = h.style.cursor;
           function onMove(ev) {
+            if(rectObj.type==="rect") {
+              // 対角固定のリサイズ
+              const idx = activeHandle, oppIdx = (idx+2)%4;
+              const [fx,fy] = origPoints[oppIdx];
+              let mx = ev.clientX, my = ev.clientY;
+              let [cx,cy] = getRectCenter(orig);
+              let rad = -origAngle * Math.PI/180;
+              let tx = mx - container.getBoundingClientRect().left, ty = my - container.getBoundingClientRect().top;
+              let dx = (tx-cx)*Math.cos(rad)+(ty-cy)*Math.sin(rad);
+              let dy =-(tx-cx)*Math.sin(rad)+(ty-cy)*Math.cos(rad);
+              let ofx = fx - cx, ofy = fy - cy;
+              let newW = Math.abs(dx-ofx), newH = Math.abs(dy-ofy);
+              let newCx = (dx+ofx)/2+cx, newCy = (dy+ofy)/2+cy;
+              rectObj.w = Math.max(10,newW); rectObj.h = Math.max(10,newH);
+              rectObj.x = newCx - rectObj.w/2; rectObj.y = newCy - rectObj.h/2;
+              updateRectUI(rectObj); updateHandles(rectObj); updateRotateHandle(rectObj); updateCoords(rectObj);
+            } else {
+              // --- quad: 他の3点は絶対固定 ---
+              if(!quadPoints) {
+                quadPoints = getRectCornerPoints(rectObj).map(p=>[...p]);
+                showQuadSVG();
+                createQuadRotateHandle();
+              }
+              const idx = activeHandle;
+              const tx = ev.clientX - container.getBoundingClientRect().left;
+              const ty = ev.clientY - container.getBoundingClientRect().top;
+              quadPoints[idx][0] = tx;
+              quadPoints[idx][1] = ty;
+              updateQuadSVG();
+              updateHandlesQuad();
+              updateCoordsQuad();
+              updateQuadRotateHandle();
+            }
           }
           function onUp(ev) {
+            resizing = false; document.body.style.cursor = ""; document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp);
           }
+          document.addEventListener('mousemove', onMove); document.addEventListener('mouseup', onUp);
+          evt.stopPropagation();
         });
+        rectObj.el.appendChild(h); rectObj.handles.push(h);
       }
+      if(currentMode==="rect" || !quadPoints) updateHandles(rectObj);
+      else updateHandlesQuad();
     }
     function updateHandles(rectObj) {
+      let pts = getRectCornerPoints(rectObj);
+      for(let i=0;i<4;i++) {
+        rectObj.handles[i].style.left = pts[i][0]-rectObj.x+'px';
+        rectObj.handles[i].style.top  = pts[i][1]-rectObj.y+'px';
       }
+    }
+    function updateHandlesQuad() {
+      if(!rectObj || !rectObj.handles || !quadPoints) return;
+      for(let i=0;i<4;i++) {
+        rectObj.handles[i].style.left = quadPoints[i][0] - rectObj.x + 'px';
+        rectObj.handles[i].style.top  = quadPoints[i][1] - rectObj.y + 'px';
+      }
+    }
+    function getRectCenter(r) {
+      return [r.x + r.w/2, r.y + r.h/2];
+    }
+    function getRectCornerPoints(r) {
+      let cx = r.x + r.w/2, cy = r.y + r.h/2;
+      let rad = (r.angle||0)*Math.PI/180;
+      let dx = r.w/2, dy = r.h/2;
+      let corners = [
+        [-dx,-dy],
+        [ dx,-dy],
+        [ dx, dy],
+        [-dx, dy]
+      ];
+      return corners.map(([ox,oy])=>{
+        let x = ox*Math.cos(rad)-oy*Math.sin(rad)+cx;
+        let y = ox*Math.sin(rad)+oy*Math.cos(rad)+cy;
+        return [x,y];
+      });
     }
+    // --- 回転ハンドルと回転処理 ---
     function createRotateHandle(rectObj) {
+      if(rotateHandle) rotateHandle.remove();
+      rotateHandle = document.createElement('div');
+      rotateHandle.className = 'rotate-handle';
+      rectObj.el.appendChild(rotateHandle);
       updateRotateHandle(rectObj);
+      rotateHandle.addEventListener('mousedown', function(e) {
         rotating = true;
+        let [cx,cy] = getRectCenter(rectObj);
         const rectC = container.getBoundingClientRect();
+        let mx = e.clientX - rectC.left, my = e.clientY - rectC.top;
+        let startAngle = rectObj.angle || 0;
+        let baseAngle = Math.atan2(my - cx, mx - cy);
         document.body.style.cursor = "crosshair";
         function onMove(ev) {
+          let mx2 = ev.clientX - rectC.left, my2 = ev.clientY - rectC.top;
+          let currAngle = Math.atan2(my2 - cx, mx2 - cy);
+          let angle = startAngle + (currAngle - baseAngle) * 180 / Math.PI;
           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) {
+      rotateHandle.style.left = '50%';
+      rotateHandle.style.top = '-32px';
+      rotateHandle.style.transform = `translate(-50%,0)`;
+      rotateHandle.style.display = currentMode === "rect" ? "block" : "none";
+    }
+    // Quad専用の回転ハンドル
+    function createQuadRotateHandle() {
+      if(quadRotateHandle) quadRotateHandle.remove();
+      quadRotateHandle = document.createElement('div');
+      quadRotateHandle.className = 'quad-rotate-handle rotate-handle';
+      quadRotateHandle.style.position = 'absolute';
+      updateQuadRotateHandle();
+      container.appendChild(quadRotateHandle);
+      quadRotateHandle.addEventListener('mousedown', function(e) {
+        rotating = true;
+        let center = getQuadCenter(quadPoints);
+        let rectC = container.getBoundingClientRect();
+        let mx = e.clientX - rectC.left, my = e.clientY - rectC.top;
+        let baseAngle = Math.atan2(my - center[1], mx - center[0]);
+        document.body.style.cursor = "crosshair";
+        function onMove(ev) {
+          let mx2 = ev.clientX - rectC.left, my2 = ev.clientY - rectC.top;
+          let currAngle = Math.atan2(my2 - center[1], mx2 - center[0]);
+          let diff = currAngle - baseAngle;
+          let cos = Math.cos(diff), sin = Math.sin(diff);
+          for(let i=0;i<4;i++) {
+            let x = quadPoints[i][0] - center[0], y = quadPoints[i][1] - center[1];
+            let rx = x * cos - y * sin;
+            let ry = x * sin + y * cos;
+            quadPoints[i][0] = rx + center[0];
+            quadPoints[i][1] = ry + center[1];
+          }
+          baseAngle = currAngle;
+          updateQuadSVG(); updateHandlesQuad(); updateCoordsQuad(); updateQuadRotateHandle();
+        }
+        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 updateQuadRotateHandle() {
+      if(!quadPoints || !quadRotateHandle) return;
+      let center = getQuadCenter(quadPoints);
+      let p0 = quadPoints[0], p1 = quadPoints[1];
+      let dx = p1[0] - p0[0], dy = p1[1] - p0[1];
+      let mx = (p0[0]+p1[0])/2, my = (p0[1]+p1[1])/2;
+      let len = Math.sqrt(dx*dx+dy*dy);
+      let nx = -dy/len, ny = dx/len; // normal
+      let hx = mx + nx*40, hy = my + ny*40;
+      quadRotateHandle.style.left = (hx) + 'px';
+      quadRotateHandle.style.top = (hy) + 'px';
+      quadRotateHandle.style.transform = 'translate(-50%,-50%)';
+      quadRotateHandle.style.display = currentMode === "quad" && quadPoints ? "block" : "none";
+    }
+    function getQuadCenter(pts) {
+      let x=0, y=0;
+      for(let i=0;i<4;i++) { x+=pts[i][0]; y+=pts[i][1]; }
+      return [x/4, y/4];
     }
     function updateRectUI(rectObj) {
+      rectObj.el.style.left = rectObj.x + 'px';
+      rectObj.el.style.top = rectObj.y + 'px';
+      rectObj.el.style.width = rectObj.w + 'px';
+      rectObj.el.style.height = rectObj.h + 'px';
+      rectObj.el.style.transform = `rotate(${rectObj.angle||0}deg)`;
+      rectObj.el.style.transformOrigin = "50% 50%";
+      if(currentMode==="rect") {
+        if(rotateHandle) rotateHandle.style.display = "block";
+        if(quadRotateHandle) quadRotateHandle.style.display = "none";
+      }
+      if(currentMode==="quad" && quadPoints) {
+        updateQuadSVG();
+        updateHandlesQuad();
+        updateQuadRotateHandle();
+        if(rotateHandle) rotateHandle.style.display = "none";
+        if(quadRotateHandle) quadRotateHandle.style.display = "block";
+      }
     }
     function setSelectedRect(selected) {
+      if (!rectObj) return;
+      if (selected) rectObj.el.classList.add('selected');
+      else rectObj.el.classList.remove('selected');
       saveRectBtn.disabled = !rectObj;
     }
+    function clearRect() {
+      if(rectObj && rectObj.el) rectObj.el.remove();
+      if(document.getElementById('quad-svg')) document.getElementById('quad-svg').remove();
+      if(rotateHandle) { rotateHandle.remove(); rotateHandle = null; }
+      if(quadRotateHandle) { quadRotateHandle.remove(); quadRotateHandle = null; }
+      rectObj = null; quadPoints = null; setSelectedRect(false);
+    }
+    // --- SVG(自由四角形) ---
+    function showQuadSVG() {
+      let svg = document.getElementById('quad-svg');
+      if(svg) svg.remove();
+      svg = document.createElementNS("http://www.w3.org/2000/svg","svg");
+      svg.setAttribute("id","quad-svg");
+      svg.classList.add("quad-svg");
+      svg.setAttribute("width",container.clientWidth);
+      svg.setAttribute("height",container.clientHeight);
+      let poly = document.createElementNS("http://www.w3.org/2000/svg","polygon");
+      svg.appendChild(poly);
+      container.appendChild(svg);
+      updateQuadSVG();
+    }
+    function updateQuadSVG() {
+      let svg = document.getElementById('quad-svg');
+      if(!svg) showQuadSVG();
+      let poly = svg.querySelector('polygon');
+      if(quadPoints && poly) {
+        let pts = quadPoints.map(p=>p.join(',')).join(' ');
+        poly.setAttribute('points',pts);
+      }
+    }
+    // --- 座標計算 ---
     function getRectImageCoords(rectObj) {
+      let pts;
+      if(currentMode==="quad" && quadPoints) {
+        pts = quadPoints;
+      } else {
+        pts = getRectCornerPoints(rectObj);
+      }
       const {left:imgL, top:imgT, width:imgW, height:imgH} = dispImgInfo;
+      return pts.map(([rx, ry]) => [
+        Math.round((rx - imgL) * imgNaturalWidth / imgW),
+        Math.round((ry - imgT) * imgNaturalHeight / imgH)
+      ]);
     }
     function updateCoords(rectObj) {
+      if (!rectObj) { coords.innerHTML = "Coordinates:<br>"; return; }
       const imgPoints = getRectImageCoords(rectObj);
       coords.innerHTML =
         `Original image pixel coordinates (top-left origin):<br>
         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>`;
+    }
+    function updateCoordsQuad() {
+      updateCoords(rectObj);
     }
+    // --- Memory ---
+    saveRectBtn.addEventListener('click', () => {
+      if (!rectObj) return;
+      const imgPoints = getRectImageCoords(rectObj);
+      memory.push({
+        filename: currentImageName || '',
+        coords: imgPoints,
+        id: Date.now() + Math.random()
+      });
+      updateMemoryList();
+      clearRect();
+      coords.innerHTML = "Coordinates:<br>";
+      saveRectBtn.disabled = true;
+    });
     function updateMemoryList() {
       let html = '';
       memory.forEach((mem) => {
             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]})
           </span>
           <button class="memory-delete-btn" data-id="${mem.id}" title="Delete this memory">&times;</button>
         </div>`;
       });
       memoryList.innerHTML = html || "<span style='color:#999;'>No memory saved.</span>";
     }
     memoryList.addEventListener('click', (e) => {
       if (e.target.classList.contains('memory-delete-btn')) {
         const id = e.target.dataset.id;
       }
     });
     memorySaveBtn.addEventListener('click', async () => {
+      if (!memory.length) { alert("No memory to save."); return; }
       let outObj = {};
+      memory.forEach(mem => { outObj[mem.filename] = { print_area: mem.coords }; });
       let jsonString = JSON.stringify(outObj, null, 2);
       let filename = filenameInput.value.trim() || "templates.json";
       filename = filename.replace(/[\\\/:*?"<>|]/g, "_");
       if (window.showSaveFilePicker) {
         try {
           const opts = {
             suggestedName: filename,
+            types: [{ description: 'JSON Files', accept: {'application/json': ['.json', '.txt']} }]
           };
           const handle = await window.showSaveFilePicker(opts);
           const writable = await handle.createWritable();
+          await writable.write(jsonString); await writable.close();
+          alert("Memory saved!"); return;
+        } catch (err) { if (err.name !== "AbortError") alert("Failed to save file: " + err.message); }
       }
       const blob = new Blob([jsonString], {type: "application/json"});
+      const url = URL.createObjectURL(blob); const a = document.createElement('a');
+      a.href = url; a.download = filename; document.body.appendChild(a); a.click();
+      setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 100);
     });
     document.addEventListener('keydown', e => {