@wasao/kagemusha 0.1.0 → 0.1.1

package/dist/editor/editor/inject.ts

@@ -0,0 +1,385 @@
+// This script is injected into the target page to provide annotation editing.
+// It adds a toolbar and SVG overlay layer on top of the actual page.
+
+export const EDITOR_SCRIPT = `
+(function() {
+  let tool = 'rect';
+  let annotations = [];
+  let selectedId = null;
+  let dragState = null;
+  let nextId = 1;
+
+  // --- TOOLBAR ---
+  const toolbar = document.createElement('div');
+  toolbar.id = 'kagemusha-toolbar';
+  toolbar.innerHTML = \`
+    <style>
+      #kagemusha-toolbar {
+        position: fixed; top: 0; left: 0; right: 0; z-index: 999999;
+        background: #16213e; padding: 8px 16px; display: flex; align-items: center; gap: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.3); font-family: -apple-system, sans-serif;
+      }
+      #kagemusha-toolbar button {
+        padding: 6px 14px; border: 1px solid #444; border-radius: 6px;
+        background: #1a1a2e; color: #fff; font-size: 13px; cursor: pointer;
+      }
+      #kagemusha-toolbar button:hover { background: #2a2a4e; }
+      #kagemusha-toolbar button.active { background: #6366f1; border-color: #6366f1; }
+      #kagemusha-toolbar .sep { width: 1px; height: 24px; background: #444; }
+      #kagemusha-toolbar .title { color: #888; font-size: 13px; }
+      #kagemusha-toolbar .save-btn { background: #22c55e; border-color: #22c55e; font-weight: 600; margin-left: auto; }
+      #kagemusha-toolbar .save-btn:hover { background: #16a34a; }
+      #kagemusha-svg-layer {
+        position: absolute; top: 0; left: 0; width: 100%;
+        z-index: 999998; pointer-events: none;
+      }
+      #kagemusha-svg-layer.drawing { pointer-events: auto; cursor: crosshair; }
+      #kagemusha-svg-layer .annotation { pointer-events: auto; cursor: move; }
+      #kagemusha-svg-layer .annotation.selected { filter: drop-shadow(0 0 3px #6366f1); }
+      .kagemusha-hint {
+        position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+        color: #fff; background: rgba(0,0,0,0.7); padding: 6px 16px; border-radius: 8px;
+        font-size: 12px; z-index: 999999; font-family: -apple-system, sans-serif;
+      }
+    </style>
+    <span class="title">🥷 Annotation Editor</span>
+    <button id="kg-tool-rect" class="active">▭ Rectangle</button>
+    <button id="kg-tool-arrow">→ Arrow</button>
+    <button id="kg-tool-label">T Label</button>
+    <div class="sep"></div>
+    <button id="kg-delete">🗑 Delete</button>
+    <button class="save-btn" id="kg-save">💾 Save</button>
+  \`;
+  document.body.appendChild(toolbar);
+
+  // Shift page content down so toolbar doesn't overlap
+  document.body.style.paddingTop = '48px';
+
+  // Hint
+  const hint = document.createElement('div');
+  hint.className = 'kagemusha-hint';
+  hint.textContent = 'Click and drag to add annotations. Click to select. Press Delete to remove.';
+  document.body.appendChild(hint);
+
+  // --- SVG LAYER ---
+  const svgNS = 'http://www.w3.org/2000/svg';
+  const svg = document.createElementNS(svgNS, 'svg');
+  svg.id = 'kagemusha-svg-layer';
+  svg.classList.add('drawing');
+  document.body.appendChild(svg);
+
+  function updateSvgSize() {
+    svg.setAttribute('width', String(window.innerWidth));
+    svg.setAttribute('height', String(document.documentElement.scrollHeight));
+  }
+  updateSvgSize();
+  window.addEventListener('resize', updateSvgSize);
+
+  // Arrowhead marker
+  const defs = document.createElementNS(svgNS, 'defs');
+  defs.innerHTML = '<marker id="kg-arrowhead" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto" fill="#FF0000"><polygon points="0 0, 10 3.5, 0 7"/></marker>';
+  svg.appendChild(defs);
+
+  // --- TOOLS ---
+  function setTool(t) {
+    tool = t;
+    document.querySelectorAll('#kagemusha-toolbar button').forEach(b => b.classList.remove('active'));
+    const btn = document.getElementById('kg-tool-' + t);
+    if (btn) btn.classList.add('active');
+    svg.classList.toggle('drawing', true);
+    deselectAll();
+  }
+
+  document.getElementById('kg-tool-rect').addEventListener('click', () => setTool('rect'));
+  document.getElementById('kg-tool-arrow').addEventListener('click', () => setTool('arrow'));
+  document.getElementById('kg-tool-label').addEventListener('click', () => setTool('label'));
+  document.getElementById('kg-delete').addEventListener('click', deleteSelected);
+  document.getElementById('kg-save').addEventListener('click', save);
+
+  function deselectAll() {
+    selectedId = null;
+    svg.querySelectorAll('.annotation').forEach(el => el.classList.remove('selected'));
+  }
+
+  function selectEl(el) {
+    deselectAll();
+    selectedId = el.dataset.id;
+    el.classList.add('selected');
+  }
+
+  function deleteSelected() {
+    if (!selectedId) return;
+    const el = svg.querySelector('[data-id="' + selectedId + '"]');
+    if (el) el.remove();
+    annotations = annotations.filter(a => a.id !== selectedId);
+    selectedId = null;
+  }
+
+  document.addEventListener('keydown', e => {
+    if (e.key === 'Delete' || e.key === 'Backspace') {
+      if (document.activeElement.tagName === 'INPUT') return;
+      deleteSelected();
+    }
+  });
+
+  // --- MOUSE HANDLING ---
+  function getPos(e) {
+    return { x: e.pageX, y: e.pageY };
+  }
+
+  svg.addEventListener('mousedown', e => {
+    if (e.target.closest('.annotation')) return;
+    const p = getPos(e);
+    deselectAll();
+
+    if (tool === 'rect') {
+      const id = 'a' + nextId++;
+      const rect = document.createElementNS(svgNS, 'rect');
+      rect.setAttribute('x', p.x);
+      rect.setAttribute('y', p.y);
+      rect.setAttribute('width', '0');
+      rect.setAttribute('height', '0');
+      rect.setAttribute('fill', 'none');
+      rect.setAttribute('stroke', '#FF0000');
+      rect.setAttribute('stroke-width', '3');
+      rect.setAttribute('rx', '4');
+      rect.classList.add('annotation');
+      rect.dataset.id = id;
+      svg.appendChild(rect);
+      dragState = { type: 'create-rect', id, el: rect, sx: p.x, sy: p.y };
+    } else if (tool === 'arrow') {
+      const id = 'a' + nextId++;
+      const line = document.createElementNS(svgNS, 'line');
+      line.setAttribute('x1', p.x);
+      line.setAttribute('y1', p.y);
+      line.setAttribute('x2', p.x);
+      line.setAttribute('y2', p.y);
+      line.setAttribute('stroke', '#FF0000');
+      line.setAttribute('stroke-width', '3');
+      line.setAttribute('marker-end', 'url(#kg-arrowhead)');
+      line.classList.add('annotation');
+      line.dataset.id = id;
+      svg.appendChild(line);
+      dragState = { type: 'create-arrow', id, el: line, sx: p.x, sy: p.y };
+    } else if (tool === 'label') {
+      const id = 'a' + nextId++;
+      // Create inline input on the page
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.value = '';
+      input.placeholder = 'Type label...';
+      input.style.cssText = 'position:fixed;z-index:9999999;padding:4px 8px;background:#fff;border:none;border-radius:4px;color:#FF0000;font-size:14px;font-family:-apple-system,sans-serif;outline:2px solid #6366f1;min-width:80px;box-shadow:0 2px 8px rgba(0,0,0,0.2);';
+      input.style.left = (e.clientX) + 'px';
+      input.style.top = (e.clientY) + 'px';
+      document.body.appendChild(input);
+      svg.classList.remove('drawing');
+      setTimeout(() => input.focus(), 50);
+
+      function finishLabel() {
+        const text = input.value.trim();
+        input.remove();
+        svg.classList.add('drawing');
+        if (!text) return;
+
+        const g = document.createElementNS(svgNS, 'g');
+        g.classList.add('annotation');
+        g.dataset.id = id;
+        const bg = document.createElementNS(svgNS, 'rect');
+        const txt = document.createElementNS(svgNS, 'text');
+        txt.textContent = text;
+        txt.setAttribute('x', String(p.x + 6));
+        txt.setAttribute('y', String(p.y + 16));
+        txt.setAttribute('fill', '#FF0000');
+        txt.setAttribute('font-size', '14');
+        txt.setAttribute('font-family', '-apple-system, sans-serif');
+        const tw = text.length * 9 + 12;
+        bg.setAttribute('x', String(p.x));
+        bg.setAttribute('y', String(p.y));
+        bg.setAttribute('width', String(tw));
+        bg.setAttribute('height', '24');
+        bg.setAttribute('fill', '#FFFFFF');
+        bg.setAttribute('rx', '4');
+        g.appendChild(bg);
+        g.appendChild(txt);
+        svg.appendChild(g);
+        annotations.push({ id, type: 'label', x: p.x, y: p.y, text });
+        selectEl(g);
+        g.addEventListener('mousedown', e => startMove(e, id));
+      }
+
+      input.addEventListener('keydown', e => {
+        if (e.key === 'Enter') finishLabel();
+        if (e.key === 'Escape') { input.remove(); svg.classList.add('drawing'); }
+      });
+      input.addEventListener('blur', finishLabel);
+    }
+  });
+
+  document.addEventListener('mousemove', e => {
+    if (!dragState) return;
+    const p = getPos(e);
+
+    if (dragState.type === 'create-rect') {
+      const el = dragState.el;
+      const x = Math.min(dragState.sx, p.x);
+      const y = Math.min(dragState.sy, p.y);
+      el.setAttribute('x', x);
+      el.setAttribute('y', y);
+      el.setAttribute('width', Math.abs(p.x - dragState.sx));
+      el.setAttribute('height', Math.abs(p.y - dragState.sy));
+    } else if (dragState.type === 'create-arrow') {
+      dragState.el.setAttribute('x2', p.x);
+      dragState.el.setAttribute('y2', p.y);
+    } else if (dragState.type === 'move') {
+      const a = annotations.find(a => a.id === dragState.id);
+      if (!a) return;
+      const dx = p.x - dragState.lastX;
+      const dy = p.y - dragState.lastY;
+      dragState.lastX = p.x;
+      dragState.lastY = p.y;
+
+      if (a.type === 'rect') {
+        a.x += dx; a.y += dy;
+        dragState.el.setAttribute('x', a.x);
+        dragState.el.setAttribute('y', a.y);
+      } else if (a.type === 'arrow') {
+        a.fromX += dx; a.fromY += dy; a.toX += dx; a.toY += dy;
+        dragState.el.setAttribute('x1', a.fromX);
+        dragState.el.setAttribute('y1', a.fromY);
+        dragState.el.setAttribute('x2', a.toX);
+        dragState.el.setAttribute('y2', a.toY);
+      } else if (a.type === 'label') {
+        a.x += dx; a.y += dy;
+        const bg = dragState.el.querySelector('rect');
+        const txt = dragState.el.querySelector('text');
+        bg.setAttribute('x', a.x);
+        bg.setAttribute('y', a.y);
+        txt.setAttribute('x', a.x + 6);
+        txt.setAttribute('y', a.y + 16);
+      }
+    }
+  });
+
+  document.addEventListener('mouseup', e => {
+    if (!dragState) return;
+    const p = getPos(e);
+
+    if (dragState.type === 'create-rect') {
+      const w = Math.abs(p.x - dragState.sx);
+      const h = Math.abs(p.y - dragState.sy);
+      if (w < 5 && h < 5) { dragState.el.remove(); }
+      else {
+        const a = { id: dragState.id, type: 'rect', x: Math.min(dragState.sx, p.x), y: Math.min(dragState.sy, p.y), width: w, height: h };
+        annotations.push(a);
+        selectEl(dragState.el);
+        dragState.el.addEventListener('mousedown', e => startMove(e, dragState.id));
+      }
+    } else if (dragState.type === 'create-arrow') {
+      const dist = Math.hypot(p.x - dragState.sx, p.y - dragState.sy);
+      if (dist < 5) { dragState.el.remove(); }
+      else {
+        const a = { id: dragState.id, type: 'arrow', fromX: dragState.sx, fromY: dragState.sy, toX: p.x, toY: p.y };
+        annotations.push(a);
+        selectEl(dragState.el);
+        dragState.el.addEventListener('mousedown', e => startMove(e, dragState.id));
+      }
+    }
+    dragState = null;
+  });
+
+  function startMove(e, id) {
+    e.stopPropagation();
+    const el = svg.querySelector('[data-id="' + id + '"]');
+    selectEl(el);
+    const p = getPos(e);
+    dragState = { type: 'move', id, el, lastX: p.x, lastY: p.y };
+  }
+
+  // --- LOAD EXISTING ---
+  window.__kagemusha_loadAnnotations = function(decorations) {
+    const pad = 48; // toolbar height to add to Y
+    const dpr = window.__kagemusha_dpr || 1;
+    decorations.forEach(d => {
+      const id = 'a' + nextId++;
+      if (d.type === 'rect' && d.target && 'x' in d.target) {
+        const rx = d.target.x / dpr, ry = d.target.y / dpr + pad;
+        const rect = document.createElementNS(svgNS, 'rect');
+        const rw = d.target.width / dpr, rh = d.target.height / dpr;
+        rect.setAttribute('x', rx);
+        rect.setAttribute('y', ry);
+        rect.setAttribute('width', rw);
+        rect.setAttribute('height', rh);
+        rect.setAttribute('fill', 'none');
+        rect.setAttribute('stroke', d.style?.color || '#FF0000');
+        rect.setAttribute('stroke-width', '3');
+        rect.setAttribute('rx', '4');
+        rect.classList.add('annotation');
+        rect.dataset.id = id;
+        svg.appendChild(rect);
+        annotations.push({ id, type: 'rect', x: rx, y: ry, width: rw, height: rh });
+        rect.addEventListener('mousedown', e => startMove(e, id));
+      } else if (d.type === 'arrow' && d.from && 'x' in d.from) {
+        const line = document.createElementNS(svgNS, 'line');
+        const ax1 = d.from.x / dpr, ay1 = d.from.y / dpr + pad;
+        const ax2 = d.to.x / dpr, ay2 = d.to.y / dpr + pad;
+        line.setAttribute('x1', ax1);
+        line.setAttribute('y1', ay1);
+        line.setAttribute('x2', ax2);
+        line.setAttribute('y2', ay2);
+        line.setAttribute('stroke', d.style?.color || '#FF0000');
+        line.setAttribute('stroke-width', '3');
+        line.setAttribute('marker-end', 'url(#kg-arrowhead)');
+        line.classList.add('annotation');
+        line.dataset.id = id;
+        svg.appendChild(line);
+        annotations.push({ id, type: 'arrow', fromX: ax1, fromY: ay1, toX: ax2, toY: ay2 });
+        line.addEventListener('mousedown', e => startMove(e, id));
+      } else if (d.type === 'label' && d.position && 'x' in d.position) {
+        const lx = d.position.x / dpr, ly = d.position.y / dpr + pad;
+        const g = document.createElementNS(svgNS, 'g');
+        g.classList.add('annotation');
+        g.dataset.id = id;
+        const bg = document.createElementNS(svgNS, 'rect');
+        const txt = document.createElementNS(svgNS, 'text');
+        txt.textContent = d.text;
+        txt.setAttribute('x', lx + 6);
+        txt.setAttribute('y', ly + 16);
+        txt.setAttribute('fill', d.style?.color || '#FF0000');
+        txt.setAttribute('font-size', d.style?.fontSize || '14');
+        txt.setAttribute('font-family', '-apple-system, sans-serif');
+        const tw = (d.text || '').length * 9 + 12;
+        bg.setAttribute('x', lx);
+        bg.setAttribute('y', ly);
+        bg.setAttribute('width', tw);
+        bg.setAttribute('height', '24');
+        bg.setAttribute('fill', d.style?.background || '#FFFFFF');
+        bg.setAttribute('rx', '4');
+        g.appendChild(bg);
+        g.appendChild(txt);
+        svg.appendChild(g);
+        annotations.push({ id, type: 'label', x: lx, y: ly, text: d.text });
+        g.addEventListener('mousedown', e => startMove(e, id));
+      }
+    });
+  };
+
+  // --- SAVE ---
+  function save() {
+    const pad = 48; // toolbar height to subtract from Y
+    const dpr = window.__kagemusha_dpr || 1;
+    const s = Math.round; // shorthand
+    const decorations = annotations.map(a => {
+      if (a.type === 'rect') {
+        return { type: 'rect', target: { x: s(a.x * dpr), y: s((a.y - pad) * dpr), width: s(a.width * dpr), height: s(a.height * dpr) }, style: { color: '#FF0000', strokeWidth: s(3 * dpr) } };
+      } else if (a.type === 'arrow') {
+        return { type: 'arrow', from: { x: s(a.fromX * dpr), y: s((a.fromY - pad) * dpr) }, to: { x: s(a.toX * dpr), y: s((a.toY - pad) * dpr) }, style: { color: '#FF0000', strokeWidth: s(3 * dpr) } };
+      } else if (a.type === 'label') {
+        return { type: 'label', text: a.text, position: { x: s(a.x * dpr), y: s((a.y - pad) * dpr) }, style: { fontSize: s(14 * dpr), color: '#FF0000', background: '#FFFFFF' } };
+      }
+    }).filter(Boolean);
+
+    window.__kagemusha_saved = decorations;
+    document.title = 'KAGEMUSHA_SAVED';
+  }
+})();
+`;