@khanglvm/relay 0.15.0 → 0.16.1

package/src/ui/blocks.js

@@ -1888,6 +1888,24 @@
   }
 
   // ---------- image ----------
+  let activeRegionMode = null;
+  let viewerSpacePan = false;
+  const setViewerSpacePan = (enabled) => {
+    viewerSpacePan = Boolean(enabled);
+    document.body.classList.toggle('blk-space-pan', viewerSpacePan);
+  };
+  document.addEventListener('keydown', (e) => {
+    const tag = e.target && e.target.tagName ? e.target.tagName.toLowerCase() : '';
+    if (e.code === 'Space' && !e.repeat && !['input', 'textarea', 'select'].includes(tag)) {
+      setViewerSpacePan(true);
+      e.preventDefault();
+    }
+  });
+  document.addEventListener('keyup', (e) => {
+    if (e.code === 'Space') setViewerSpacePan(false);
+  });
+  window.addEventListener('blur', () => setViewerSpacePan(false));
+
   // src is a remote URL, or absent for embedded local files (served by the
   // board server at /img/b/<id>). Same sizing rule as diagrams: never upscale
   // past natural width; zoom/full-screen viewer attached once loaded.
@@ -1901,7 +1919,11 @@
       src,
       alt: block.alt || 'image',
       loading: 'lazy',
+      draggable: 'false',
+      title: ctx.canComment === false ? '' : 'Drag to draw a comment area · Space-drag to pan',
     });
+    img.addEventListener('dragstart', (e) => e.preventDefault());
+    const stage = el('div', { class: 'blk-imgstage' }, img);
     // Inline default: the image fills its full width (container width, never
     // upscaled past natural) so it's readable without manual zoom; the CONTAINER
     // caps the height (default 800 via CSS, or block.height) and SCROLLS — we
@@ -1911,18 +1933,31 @@
     img.addEventListener('error', () => {
       container.replaceChildren(el('div', { class: 'blk-error' }, 'Image failed to load'));
     });
-    container.append(img);
+    container.append(stage);
+    const region = ctx.annotate && ctx.canComment !== false
+      ? enableImageRegions({
+          host: stage,
+          surface: img,
+          panHost: container,
+          sourceForSide: () => img,
+          sideAtPoint: () => null,
+          ctx,
+          blockId,
+          label: block.alt || 'Image',
+        })
+      : null;
     const attachImgViewer = () =>
       attachViewer(container, {
-        zoomEl: img,
+        zoomEl: stage,
         natural: () => (img.naturalWidth > 0 ? { w: img.naturalWidth, h: img.naturalHeight } : null),
         label: 'image',
         comment: wholeBlockComment(ctx, blockId, 'image'),
+        region,
       });
     if (img.complete && img.naturalWidth > 0) attachImgViewer();
     else img.addEventListener('load', attachImgViewer, { once: true });
     if (ctx.annotate && block.pins === true) {
-      enableImagePins(container, img, ctx, blockId, block.alt || 'Image');
+      enableImagePins(stage, img, ctx, blockId, block.alt || 'Image');
     } else if (ctx.annotate) {
       ctx.annotate.register(img, {
         blockId,
@@ -1945,6 +1980,7 @@
     img.addEventListener('pointerdown', (e) => { down = { x: e.clientX, y: e.clientY }; });
     img.addEventListener('click', (e) => {
       if (ctx.canComment === false) return;
+      if (img._rlySuppressPointClick) { img._rlySuppressPointClick = false; down = null; return; }
       if (down && (Math.abs(e.clientX - down.x) > 4 || Math.abs(e.clientY - down.y) > 4)) { down = null; return; }
       const r = img.getBoundingClientRect();
       if (!r.width || !r.height) return;
@@ -1984,6 +2020,244 @@
     syncPins();
   }
 
+  // Hold, then drag, to select a rectangular image area. A short move remains
+  // native viewer pan / comparison-slider input; the hold threshold makes the
+  // two gestures coexist without a mode switch. Region coordinates are stored
+  // as normalized fractions, while a pixel crop is uploaded through the host
+  // context so the result gives the agent an actual viewable image artifact.
+  function enableImageRegions({ host, surface, panHost, sourceForSide, sideAtPoint, ctx, blockId, label }) {
+    const layer = el('div', { class: 'blk-region-layer' });
+    const selection = el('div', { class: 'blk-region-selection' });
+    layer.append(selection);
+    host.append(layer);
+    panHost._rlyHasRegions = true;
+    panHost.classList.add('blk-has-regions');
+    let pending = null;
+    let active = false;
+    let status = null;
+    let modeActive = false;
+    const modeHooks = new Set();
+    let controller = null;
+    const MIN_REGION = 0.012;
+
+    const localPoint = (e) => {
+      const r = host.getBoundingClientRect();
+      return {
+        x: r.width ? Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) : 0,
+        y: r.height ? Math.max(0, Math.min(1, (e.clientY - r.top) / r.height)) : 0,
+      };
+    };
+    const clearStatus = () => { if (status) status.remove(); status = null; };
+    const showStatus = (text) => {
+      clearStatus();
+      status = el('div', { class: 'blk-region-status', role: 'status' }, text);
+      host.append(status);
+    };
+    const reset = () => {
+      active = false;
+      pending = null;
+      panHost._rlyRegionSelecting = false;
+      host.classList.remove('blk-region-arming', 'blk-region-selecting');
+      selection.style.display = 'none';
+      clearStatus();
+    };
+    const setModeActive = (next) => {
+      const enabled = Boolean(next);
+      if (enabled && activeRegionMode && activeRegionMode !== controller) {
+        activeRegionMode.setModeActive(false);
+      }
+      if (!enabled && pending) reset();
+      if (modeActive === enabled) return;
+      modeActive = enabled;
+      panHost._rlyRegionMode = enabled;
+      host.classList.toggle('blk-region-mode', enabled);
+      activeRegionMode = enabled ? controller : (activeRegionMode === controller ? null : activeRegionMode);
+      for (const fn of modeHooks) { try { fn(enabled); } catch (_) {} }
+    };
+    controller = {
+      setModeActive,
+      isModeActive: () => modeActive,
+      onModeChange: (fn) => {
+        if (typeof fn === 'function') modeHooks.add(fn);
+        return () => modeHooks.delete(fn);
+      },
+    };
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && modeActive) setModeActive(false);
+    });
+    const draw = (a, b) => {
+      const x = Math.min(a.x, b.x), y = Math.min(a.y, b.y);
+      const w = Math.abs(a.x - b.x), h = Math.abs(a.y - b.y);
+      selection.style.left = (x * 100) + '%';
+      selection.style.top = (y * 100) + '%';
+      selection.style.width = (w * 100) + '%';
+      selection.style.height = (h * 100) + '%';
+      return { x, y, w, h };
+    };
+    const createRegionZone = (target, count, provisional = false) => {
+      const badge = el('span', { class: 'blk-imgregion-badge', 'aria-hidden': 'true' });
+      badge.innerHTML = ICON_COMMENT;
+      badge.append(el('span', { class: 'blk-imgregion-count' }, String(count)));
+      const sideLabel = target.side ? target.side + ' ' : '';
+      const region = el('button', {
+        class: 'blk-imgregion' + (provisional ? ' blk-imgregion-provisional' : ''),
+        type: 'button',
+        title: provisional
+          ? `Add a comment to this ${sideLabel}area`
+          : `${target.side ? target.side + ' · ' : ''}${count} ${count === 1 ? 'comment' : 'comments'}`,
+        'aria-label': provisional
+          ? `New ${sideLabel}image area comment`
+          : `${sideLabel}image area with ${count} ${count === 1 ? 'comment' : 'comments'}`,
+      }, badge);
+      region.style.left = (target.x * 100) + '%';
+      region.style.top = (target.y * 100) + '%';
+      region.style.width = (target.w * 100) + '%';
+      region.style.height = (target.h * 100) + '%';
+      region.addEventListener('pointerdown', (e) => e.stopPropagation());
+      if (!provisional) {
+        region.addEventListener('click', (e) => {
+          e.stopPropagation();
+          ctx.annotate.openExternal({ blockId, questionId: ctx.questionId, target }, region);
+        });
+      }
+      return region;
+    };
+    const beginSelection = (pointerId) => {
+      if (!pending || active) return;
+      active = true;
+      panHost._rlyRegionSelecting = true;
+      host.classList.remove('blk-region-arming');
+      host.classList.add('blk-region-selecting');
+      selection.style.display = 'block';
+      draw(pending.start, pending.start);
+      showStatus((pending.side ? pending.side.charAt(0).toUpperCase() + pending.side.slice(1) + ' · ' : '') + 'drag to select an area');
+      try { surface.setPointerCapture(pointerId); } catch (_) {}
+    };
+
+    async function cropRegion(img, region) {
+      if (!img || !img.naturalWidth || !img.naturalHeight) throw new Error('image is not ready');
+      const sx = Math.max(0, Math.floor(region.x * img.naturalWidth));
+      const sy = Math.max(0, Math.floor(region.y * img.naturalHeight));
+      const sw = Math.max(1, Math.min(img.naturalWidth - sx, Math.round(region.w * img.naturalWidth)));
+      const sh = Math.max(1, Math.min(img.naturalHeight - sy, Math.round(region.h * img.naturalHeight)));
+      const scale = Math.min(1, 1400 / sw, 1400 / sh);
+      const width = Math.max(1, Math.round(sw * scale));
+      const height = Math.max(1, Math.round(sh * scale));
+      const canvas = document.createElement('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      const g = canvas.getContext('2d');
+      if (!g) throw new Error('canvas unavailable');
+      g.drawImage(img, sx, sy, sw, sh, 0, 0, width, height);
+      const dataUrl = canvas.toDataURL('image/png');
+      if (!/^data:image\/png;base64,/.test(dataUrl)) throw new Error('crop unavailable');
+      if (ctx.saveArtifact) return ctx.saveArtifact({ dataUrl, mime: 'image/png', width, height, blockId });
+      return { data: dataUrl.slice(dataUrl.indexOf(',') + 1), mime: 'image/png', width, height };
+    }
+
+    const finishRegion = async (region, side) => {
+      const target = {
+        kind: 'image-region',
+        x: Math.round(region.x * 10000) / 10000,
+        y: Math.round(region.y * 10000) / 10000,
+        w: Math.round(region.w * 10000) / 10000,
+        h: Math.round(region.h * 10000) / 10000,
+        side: side || undefined,
+        label,
+      };
+      const provisional = createRegionZone(target, 0, true);
+      layer.append(provisional);
+      showStatus('Saving selected area…');
+      try {
+        target.crop = await cropRegion(sourceForSide(side), region);
+      } catch {
+        target.cropUnavailable = true;
+      }
+      clearStatus();
+      ctx.annotate.openExternal({
+        blockId,
+        questionId: ctx.questionId,
+        target,
+        onClose: () => provisional.remove(),
+      }, provisional);
+    };
+
+    surface.addEventListener('pointerdown', (e) => {
+      if (e.button !== 0 || viewerSpacePan || ctx.canComment === false) return;
+      if (e.target.closest && e.target.closest('.cmp-handle, .blk-imgregion, .blk-tools')) return;
+      if (modeActive) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      const p = localPoint(e);
+      pending = {
+        start: p,
+        last: p,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        pointerId: e.pointerId,
+        explicitMode: modeActive,
+        side: sideAtPoint(p.x),
+      };
+      host.classList.add('blk-region-arming');
+      if (modeActive) beginSelection(e.pointerId);
+    });
+    surface.addEventListener('pointermove', (e) => {
+      if (!pending) return;
+      const moved = Math.hypot(e.clientX - pending.clientX, e.clientY - pending.clientY);
+      if (!active && moved > 5) beginSelection(pending.pointerId);
+      if (!active) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      pending.last = localPoint(e);
+      draw(pending.start, pending.last);
+    });
+    const end = (e) => {
+      if (!pending) return;
+      if (!active) { reset(); return; }
+      e.preventDefault();
+      const region = draw(pending.start, pending.last || localPoint(e));
+      const side = pending.side;
+      const explicitMode = pending.explicitMode;
+      surface._rlySuppressPointClick = true;
+      reset();
+      clearStatus();
+      if (region.w >= MIN_REGION && region.h >= MIN_REGION) {
+        if (explicitMode) setModeActive(false);
+        finishRegion(region, side);
+      } else if (explicitMode) {
+        showStatus('Drag a larger area');
+        setTimeout(clearStatus, 1200);
+      }
+    };
+    surface.addEventListener('pointerup', end);
+    // Some Chromium/CDP paths emit pointercancel immediately after granting
+    // capture on the first dragged frame. Once area mode is active, keep the
+    // last drawn rectangle instead of throwing the user's deliberate hold away.
+    surface.addEventListener('pointercancel', (e) => active ? end(e) : reset());
+
+    const syncRegions = () => {
+      for (const node of Array.from(layer.querySelectorAll('.blk-imgregion:not(.blk-imgregion-provisional)'))) node.remove();
+      const groups = new Map();
+      for (const a of ctx.annotate.list()) {
+        if (a.blockId !== blockId || !a.target || a.target.kind !== 'image-region') continue;
+        const t = a.target;
+        const key = [t.side || '', t.x, t.y, t.w, t.h].join(':');
+        const group = groups.get(key) || { target: t, count: 0 };
+        group.count++;
+        groups.set(key, group);
+      }
+      for (const { target, count } of groups.values()) {
+        layer.append(createRegionZone(target, count));
+      }
+    };
+    if (ctx.annotate.onBadgeRefresh) ctx.annotate.onBadgeRefresh(syncRegions);
+    syncRegions();
+    return controller;
+  }
+
   // ---------- palette ----------
   // Color palettes as swatch cards: hover a swatch to reveal its hex, click to
   // copy it. One palette may be {featured:true} → a larger spotlight row. Lets
@@ -2125,19 +2399,54 @@
     window.addEventListener('resize', sizeBefore);
 
     let dragging = false;
+    let dragMoved = false;
+    let dragStartX = 0;
     const setFromX = (clientX) => {
       const r = frame.getBoundingClientRect();
       if (r.width) { pos = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100)); apply(); }
     };
-    frame.addEventListener('pointerdown', (e) => { dragging = true; setFromX(e.clientX); try { frame.setPointerCapture(e.pointerId); } catch (_) {} e.preventDefault(); });
-    frame.addEventListener('pointermove', (e) => { if (dragging) setFromX(e.clientX); });
-    frame.addEventListener('pointerup', () => { dragging = false; });
-    frame.addEventListener('pointercancel', () => { dragging = false; });
+    frame.addEventListener('pointerdown', (e) => {
+      const handleTarget = e.target.closest('.cmp-handle');
+      if (!handleTarget || frame._rlyRegionMode) return;
+      dragging = true;
+      dragMoved = false;
+      dragStartX = e.clientX;
+      try { frame.setPointerCapture(e.pointerId); } catch (_) {}
+    });
+    frame.addEventListener('pointermove', (e) => {
+      if (!dragging || frame._rlyRegionMode || frame._rlyRegionSelecting) return;
+      if (Math.abs(e.clientX - dragStartX) > 3) dragMoved = true;
+      if (dragMoved) { setFromX(e.clientX); e.preventDefault(); }
+    });
+    frame.addEventListener('pointerup', (e) => {
+      if (dragging && !dragMoved && !frame._rlyRegionMode && !frame._rlyRegionSelecting) setFromX(e.clientX);
+      dragging = false;
+    });
+    frame.addEventListener('pointercancel', () => { dragging = false; dragMoved = false; });
     handle.addEventListener('keydown', (e) => {
       if (e.key === 'ArrowLeft') { pos = Math.max(0, pos - 2); apply(); e.preventDefault(); }
       else if (e.key === 'ArrowRight') { pos = Math.min(100, pos + 2); apply(); e.preventDefault(); }
     });
-    attachViewer(wrap, { zoomEl: null, label: 'comparison', comment: wholeBlockComment(ctx, blockId, 'comparison') });
+    let region = null;
+    if (ctx.annotate && ctx.canComment !== false) {
+      frame.title = 'Drag to draw a comment area · drag the divider handle to compare';
+      region = enableImageRegions({
+        host: frame,
+        surface: frame,
+        panHost: frame,
+        sourceForSide: (side) => side === 'before' ? beforeImg : afterImg,
+        sideAtPoint: (x) => (x * 100 <= pos ? 'before' : 'after'),
+        ctx,
+        blockId,
+        label: 'Comparison',
+      });
+    }
+    attachViewer(wrap, {
+      zoomEl: null,
+      label: 'comparison',
+      comment: wholeBlockComment(ctx, blockId, 'comparison'),
+      region,
+    });
     return wrap;
   }
 
@@ -2170,6 +2479,10 @@
   const ICON_COMMENT =
     '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
     '<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8z"/></svg>';
+  const ICON_REGION =
+    '<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">' +
+    '<rect x="3" y="4" width="14" height="12" rx="2" stroke-dasharray="3 2"/>' +
+    '<path d="M14 14.5h6.5v4H18l-2.5 2v-2H14z" fill="currentColor" stroke="none"/></svg>';
 
   function exitFull() {
     if (!fullOpen) return;
@@ -2181,7 +2494,6 @@
     if (btn) btn.innerHTML = ICON_EXPAND;
     fullOpen = null;
     window.dispatchEvent(new Event('resize'));
-    if (c._rlyToolsSync) c._rlyToolsSync(); // re-pin toolbar to its scrolled corner
     if (c._rlyZoom) c._rlyZoom.reapply(); // restore the compact inline height cap
   }
   document.addEventListener('keydown', (e) => {
@@ -2200,7 +2512,6 @@
     const btn = container.querySelector('.blk-tools .tool-full');
     if (btn) btn.textContent = '✕';
     window.dispatchEvent(new Event('resize'));
-    if (container._rlyToolsSync) container._rlyToolsSync();
     if (container._rlyZoom) container._rlyZoom.reapply();
   }
 
@@ -2293,7 +2604,8 @@
     const refresh = () => scrollEl.classList.toggle('blk-pannable', pannable());
 
     scrollEl.addEventListener('pointerdown', (e) => {
-      if (e.button !== 0 || !pannable()) return;
+      const panGesture = e.button === 1 || (e.button === 0 && (!scrollEl._rlyHasRegions || viewerSpacePan));
+      if (!panGesture || scrollEl._rlyRegionMode || !pannable()) return;
       // leave the toolbar, the diagram editor, and real controls interactive
       if (e.target.closest && e.target.closest('.blk-tools, .blk-editor, button, a, input, textarea, select')) return;
       pending = true; active = false;
@@ -2303,6 +2615,7 @@
     });
     scrollEl.addEventListener('pointermove', (e) => {
       if (!pending) return;
+      if (scrollEl._rlyRegionMode || scrollEl._rlyRegionSelecting) { pending = false; active = false; return; }
       const dx = e.clientX - sx, dy = e.clientY - sy;
       if (!active) {
         if (Math.abs(dx) < THRESH && Math.abs(dy) < THRESH) return;
@@ -2353,6 +2666,10 @@
   // comment (optional) = { open(anchor), active(), subscribe(fn) } wiring the
   // "comment on the whole block" button + its already-commented style.
   function attachViewer(container, opts) {
+    if (container._rlyRegionHook) {
+      try { container._rlyRegionHook(); } catch (_) {}
+      container._rlyRegionHook = null;
+    }
     if (container._rlyTools) container._rlyTools.remove();
     container.classList.add('blk-viewer');
     const zoomable = Boolean(opts && opts.zoomEl);
@@ -2363,22 +2680,6 @@
     if (!container._rlyPan) container._rlyPan = enablePan(container);
     const refreshPan = container._rlyPan;
 
-    // The toolbar is absolute inside the scroll box, so it scrolls away when the
-    // user pans/scrolls. Counter-translate it by the scroll offset to pin it to
-    // the visible corner (off in full-screen, where it is position:fixed). Bound
-    // once; always re-reads the current toolbar (mermaid rebuilds it on render).
-    if (!container._rlyToolsSync) {
-      const sync = () => {
-        const tb = container._rlyTools;
-        if (!tb) return;
-        if (container.classList.contains('blk-full')) { tb.style.transform = ''; return; }
-        const x = container.scrollLeft, y = container.scrollTop;
-        tb.style.transform = x || y ? 'translate(' + x + 'px,' + y + 'px)' : '';
-      };
-      container.addEventListener('scroll', sync);
-      container._rlyToolsSync = sync;
-    }
-
     // zoom level persists across re-renders; the wheel handler (bound once)
     // delegates through container._rlyZoom so it never holds a stale zoomEl
     if (container._rlyZ === undefined) container._rlyZ = null; // null = fit-to-width
@@ -2427,7 +2728,6 @@
       }
       window.dispatchEvent(new Event('resize')); // annotation badges reposition
       refreshPan();                              // content size → grab affordance
-      container._rlyToolsSync();                 // keep the toolbar pinned
     }
     function currentZ() {
       if (container._rlyZ !== null) return container._rlyZ;
@@ -2484,6 +2784,34 @@
       }
     }
 
+    if (opts && opts.region) {
+      const regionCtl = opts.region;
+      const regionLabel = el('span', { class: 'tool-region-label' }, 'Area');
+      const regionBtn = el('button', {
+        class: 'tool-region',
+        type: 'button',
+        title: 'Draw an area comment',
+        'aria-label': 'Draw an area comment',
+        'aria-pressed': 'false',
+      });
+      regionBtn.innerHTML = ICON_REGION;
+      regionBtn.append(regionLabel);
+      const syncRegionMode = (enabled) => {
+        regionBtn.classList.toggle('is-active', enabled);
+        regionBtn.setAttribute('aria-pressed', enabled ? 'true' : 'false');
+        regionBtn.title = enabled ? 'Cancel area comment' : 'Draw an area comment';
+        regionBtn.setAttribute('aria-label', regionBtn.title);
+        regionLabel.textContent = enabled ? 'Drawing' : 'Area';
+      };
+      regionBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        regionCtl.setModeActive(!regionCtl.isModeActive());
+      });
+      container._rlyRegionHook = regionCtl.onModeChange(syncRegionMode);
+      syncRegionMode(regionCtl.isModeActive());
+      tools.append(regionBtn);
+    }
+
     if (zoomable) {
       // cmd/ctrl+wheel zoom, bound ONCE (re-binding per render would stack);
       // delegates to the current controller so it never uses a stale zoomEl
@@ -2550,12 +2878,11 @@
     });
     tools.append(fullBtn);
 
-    container.append(tools);
+    container.prepend(tools);
     container._rlyTools = tools;
     if (zoomable) apply();
     // non-zoomable diagrams (tall mermaid, oversized image) can still overflow
     refreshPan();
-    container._rlyToolsSync();
     if (container._rlyCmtSync) container._rlyCmtSync(); // reflect existing comment
   }
 
@@ -2678,6 +3005,8 @@
       // reports an accepted change (or null to clear back to the original).
       edits: ctx && ctx.edits ? ctx.edits : {},
       canComment: !ctx || ctx.canComment !== false,
+      saveArtifact:
+        ctx && typeof ctx.saveArtifact === 'function' ? ctx.saveArtifact : null,
       canEditBlocks: !ctx || ctx.canEditBlocks !== false,
       onBlockEdit:
         ctx && typeof ctx.onBlockEdit === 'function' ? ctx.onBlockEdit : () => {},