@wasao/kagemusha 0.1.1 → 0.3.4

package/dist/editor/editor/inject.ts

@@ -1,385 +0,0 @@
-// 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';
-  }
-})();
-`;