npm - @helping-ai-workflow/md2doc - Versions diffs - 2.4.2 → 2.5.0 - Mend

@helping-ai-workflow/md2doc 2.4.2 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -98,6 +98,25 @@ A reference with no file on disk keeps its original `src` and prints
 Each reference carries its own copy of the payload, so re-using one large diagram
 in several places grows the HTML accordingly. PDF output is unaffected.
+### Viewing diagrams
+Click any image, Mermaid, Graphviz or WaveDrom graphic in the rendered HTML to open it
+full-screen.
+| Input | Action |
+|---|---|
+| Wheel / shift+wheel | Scroll vertically / horizontally |
+| Ctrl (or ⌘) + wheel | Zoom around the pointer |
+| Drag | Pan |
+| `+` `-` | Zoom in / out |
+| `0` `1` | Fit to window / actual size |
+| Double-click | Toggle fit ↔ 100% |
+| `Esc`, ✕, backdrop click | Close |
+Vector diagrams open scaled to fill the window; raster images open at actual size. An
+image wrapped in a link stays a link. The overlay is hidden in print and never reaches
+the PDF output.
 ### Migration from md2html / md2pdf (v1.x → v2.0.0)
 | Old | New |

package/lib/md2doc.js CHANGED Viewed

@@ -1282,6 +1282,82 @@ const html = `<!DOCTYPE html>
     height: auto;
     margin: 0 auto;
   }
+  /* Anything the reader can pop out. The click handler uses the same
+     selectors, so this cursor and that behaviour cannot drift apart. */
+  .content img,
+  .content .mermaid,
+  .content .graphviz,
+  .content [id^="WaveDrom_Display_"] { cursor: zoom-in; }
+  .content a img { cursor: pointer; }
+  .lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    background: rgba(16, 18, 21, 0.92);
+  }
+  .lightbox[hidden] { display: none; }
+  .lightbox-bar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.35);
+    color: #e6edf3;
+    font-size: 13px;
+  }
+  .lightbox-bar button {
+    min-width: 32px;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.08);
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .lightbox-bar button:hover { background: rgba(255, 255, 255, 0.18); }
+  .lightbox-zoom-value {
+    min-width: 56px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .lightbox-hint {
+    margin-right: auto;
+    opacity: 0.7;
+    font-size: 12px;
+  }
+  /* position: relative makes the stage the canvas's offsetParent, which the
+     cursor-anchored zoom maths depends on. */
+  .lightbox-stage {
+    position: relative;
+    flex: 1 1 auto;
+    overflow: auto;
+    cursor: grab;
+    overscroll-behavior: contain;
+  }
+  .lightbox-stage[data-panning] { cursor: grabbing; }
+  .lightbox-canvas { margin: 0 auto; }
+  /* Sized in px by the runtime; the child follows, so the scroll extent grows
+     with the zoom. A CSS transform would scale the pixels and leave the scroll
+     area at the original size, stranding the edges out of reach. */
+  .lightbox-canvas > * {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    background: #ffffff;
+  }
+  body[data-lightbox-open] { overflow: hidden; }
+  @media print { .lightbox { display: none !important; } }
   @media (max-width: 1080px) {
     .sidebar-toggle { display: inline-flex; align-items: center; }
     .page-layout {
@@ -1857,6 +1933,7 @@ ${mermaidInitTag}` : ''}
     sidebarScrim.addEventListener('click', () => setSidebarOpen(false));
   }
   document.addEventListener('keydown', (event) => {
+    if (lightboxIsOpen()) return;
     if (event.key === 'Escape' && document.body.hasAttribute('data-sidebar-open')) {
       setSidebarOpen(false);
     }
@@ -1945,6 +2022,251 @@ ${mermaidInitTag}` : ''}
   });
   captureScrollAnchor();
+  // ── Diagram / image lightbox ──────────────────────────────────────────────
+  // Specs are read at 100% but their block diagrams and waveforms are drawn far
+  // wider than the column, so the inline copy is unreadably small. Clicking one
+  // pops it into a modal stage that zooms and scrolls.
+  var LIGHTBOX_TARGETS = 'img, .mermaid, .graphviz, [id^="WaveDrom_Display_"]';
+  var LIGHTBOX_MIN_ZOOM = 0.05;
+  var LIGHTBOX_MAX_ZOOM = 8;
+  var LIGHTBOX_STEP = 1.25;
+  var lightboxEl = null;
+  var lightboxStage = null;
+  var lightboxCanvas = null;
+  var lightboxZoomValue = null;
+  var lightboxZoom = 1;
+  var lightboxFitZoom = 1;
+  var lightboxNaturalW = 1;
+  var lightboxNaturalH = 1;
+  var lightboxReturnScroll = 0;
+  function lightboxIsOpen() {
+    return !!lightboxEl && !lightboxEl.hidden;
+  }
+  function lightboxButton(label, title, onClick) {
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    button.addEventListener('click', onClick);
+    return button;
+  }
+  function computeLightboxFit(isVector) {
+    var pad = 24;
+    var byWidth = (lightboxStage.clientWidth - pad) / lightboxNaturalW;
+    var byHeight = (lightboxStage.clientHeight - pad) / lightboxNaturalH;
+    var fit = Math.min(byWidth, byHeight);
+    if (!isFinite(fit) || fit <= 0) return 1;
+    // Vector art fills the window — a waveform authored at 480px wide is the
+    // whole reason for popping it out. A raster image stops at actual size,
+    // where enlarging past 100% only buys blur.
+    return isVector ? fit : Math.min(fit, 1);
+  }
+  function setLightboxZoom(next, anchorX, anchorY) {
+    if (!lightboxCanvas) return;
+    var clamped = Math.min(LIGHTBOX_MAX_ZOOM, Math.max(LIGHTBOX_MIN_ZOOM, next));
+    var stage = lightboxStage;
+    var ax = (typeof anchorX === 'number') ? anchorX : stage.clientWidth / 2;
+    var ay = (typeof anchorY === 'number') ? anchorY : stage.clientHeight / 2;
+    // Keep whatever sits under the anchor point pinned across the zoom.
+    var contentX = stage.scrollLeft + ax - lightboxCanvas.offsetLeft;
+    var contentY = stage.scrollTop + ay - lightboxCanvas.offsetTop;
+    var ratio = clamped / lightboxZoom;
+    lightboxZoom = clamped;
+    // Width in px, not a transform: the scroll extent has to grow with the
+    // zoom, or the enlarged edges can never be scrolled into view.
+    lightboxCanvas.style.width = Math.max(1, Math.round(lightboxNaturalW * clamped)) + 'px';
+    if (lightboxZoomValue) {
+      lightboxZoomValue.textContent = Math.round(clamped * 100) + '%';
+    }
+    stage.scrollLeft = contentX * ratio - ax + lightboxCanvas.offsetLeft;
+    stage.scrollTop = contentY * ratio - ay + lightboxCanvas.offsetTop;
+  }
+  function zoomLightboxBy(factor, anchorX, anchorY) {
+    setLightboxZoom(lightboxZoom * factor, anchorX, anchorY);
+  }
+  function buildLightbox() {
+    if (lightboxEl) return;
+    lightboxEl = document.createElement('div');
+    lightboxEl.className = 'lightbox';
+    lightboxEl.hidden = true;
+    lightboxEl.setAttribute('role', 'dialog');
+    lightboxEl.setAttribute('aria-modal', 'true');
+    var bar = document.createElement('div');
+    bar.className = 'lightbox-bar';
+    var hint = document.createElement('span');
+    hint.className = 'lightbox-hint';
+    hint.textContent = 'scroll to pan · shift+scroll sideways · ctrl+scroll to zoom · drag to pan · esc to close';
+    lightboxZoomValue = document.createElement('span');
+    lightboxZoomValue.className = 'lightbox-zoom-value';
+    lightboxZoomValue.setAttribute('data-lightbox-zoom-value', '');
+    bar.appendChild(hint);
+    bar.appendChild(lightboxButton('−', 'Zoom out', function () { zoomLightboxBy(1 / LIGHTBOX_STEP); }));
+    bar.appendChild(lightboxZoomValue);
+    bar.appendChild(lightboxButton('+', 'Zoom in', function () { zoomLightboxBy(LIGHTBOX_STEP); }));
+    bar.appendChild(lightboxButton('Fit', 'Fit to window', function () { setLightboxZoom(lightboxFitZoom); }));
+    bar.appendChild(lightboxButton('1:1', 'Actual size', function () { setLightboxZoom(1); }));
+    bar.appendChild(lightboxButton('✕', 'Close', closeLightbox));
+    lightboxStage = document.createElement('div');
+    lightboxStage.className = 'lightbox-stage';
+    lightboxCanvas = document.createElement('div');
+    lightboxCanvas.className = 'lightbox-canvas';
+    lightboxStage.appendChild(lightboxCanvas);
+    lightboxEl.appendChild(bar);
+    lightboxEl.appendChild(lightboxStage);
+    document.body.appendChild(lightboxEl);
+    var panning = false;
+    var panX = 0;
+    var panY = 0;
+    var panDistance = 0;
+    lightboxStage.addEventListener('wheel', function (event) {
+      // Plain and shift+wheel stay native scrolling — that is the pan.
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      var rect = lightboxStage.getBoundingClientRect();
+      zoomLightboxBy(
+        event.deltaY < 0 ? LIGHTBOX_STEP : 1 / LIGHTBOX_STEP,
+        event.clientX - rect.left,
+        event.clientY - rect.top
+      );
+    }, { passive: false });
+    lightboxStage.addEventListener('mousedown', function (event) {
+      if (event.button !== 0) return;
+      panning = true;
+      panDistance = 0;
+      panX = event.clientX;
+      panY = event.clientY;
+      lightboxStage.setAttribute('data-panning', '');
+      event.preventDefault();
+    });
+    document.addEventListener('mousemove', function (event) {
+      if (!panning) return;
+      var dx = event.clientX - panX;
+      var dy = event.clientY - panY;
+      panX = event.clientX;
+      panY = event.clientY;
+      panDistance += Math.abs(dx) + Math.abs(dy);
+      lightboxStage.scrollLeft -= dx;
+      lightboxStage.scrollTop -= dy;
+    });
+    document.addEventListener('mouseup', function () {
+      if (!panning) return;
+      panning = false;
+      lightboxStage.removeAttribute('data-panning');
+    });
+    lightboxStage.addEventListener('click', function (event) {
+      if (panDistance > 4) return;
+      // Only the empty backdrop closes; a click on the artwork must not.
+      if (event.target === lightboxStage) closeLightbox();
+    });
+    lightboxStage.addEventListener('dblclick', function (event) {
+      event.preventDefault();
+      setLightboxZoom(Math.abs(lightboxZoom - 1) < 0.001 ? lightboxFitZoom : 1);
+    });
+  }
+  function lightboxSourceOf(node) {
+    if (node.tagName === 'IMG') return node;
+    return node.querySelector('svg') || node;
+  }
+  function lightboxNaturalSize(source) {
+    if (source.tagName === 'IMG') {
+      return { w: source.naturalWidth || source.clientWidth || 1, h: source.naturalHeight || source.clientHeight || 1 };
+    }
+    var box = source.viewBox ? source.viewBox.baseVal : null;
+    if (box && box.width) return { w: box.width, h: box.height };
+    var rect = source.getBoundingClientRect();
+    return { w: rect.width || 1, h: rect.height || 1 };
+  }
+  function openLightbox(node) {
+    buildLightbox();
+    var source = lightboxSourceOf(node);
+    var size = lightboxNaturalSize(source);
+    lightboxNaturalW = Math.max(1, Math.round(size.w));
+    lightboxNaturalH = Math.max(1, Math.round(size.h));
+    var isVector = !!(source.tagName && source.tagName.toLowerCase() === 'svg');
+    var clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    clone.removeAttribute('class');
+    clone.removeAttribute('style');
+    clone.removeAttribute('width');
+    clone.removeAttribute('height');
+    if (isVector && !clone.getAttribute('viewBox')) {
+      clone.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    }
+    while (lightboxCanvas.firstChild) {
+      lightboxCanvas.removeChild(lightboxCanvas.firstChild);
+    }
+    lightboxCanvas.appendChild(clone);
+    lightboxReturnScroll = window.scrollY;
+    suppressAnchorCapture = true;
+    document.body.setAttribute('data-lightbox-open', '');
+    lightboxEl.hidden = false;
+    lightboxStage.scrollTop = 0;
+    lightboxStage.scrollLeft = 0;
+    lightboxZoom = 1;
+    lightboxFitZoom = computeLightboxFit(isVector);
+    setLightboxZoom(lightboxFitZoom);
+  }
+  function closeLightbox() {
+    if (!lightboxIsOpen()) return;
+    lightboxEl.hidden = true;
+    document.body.removeAttribute('data-lightbox-open');
+    while (lightboxCanvas.firstChild) {
+      lightboxCanvas.removeChild(lightboxCanvas.firstChild);
+    }
+    window.scrollTo(window.scrollX, lightboxReturnScroll);
+    window.requestAnimationFrame(function () {
+      suppressAnchorCapture = false;
+      captureScrollAnchor();
+    });
+  }
+  if (contentEl) {
+    contentEl.addEventListener('click', function (event) {
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+      var target = (event.target && event.target.closest) ? event.target.closest(LIGHTBOX_TARGETS) : null;
+      if (!target) return;
+      // A linked image is a link first.
+      if (target.closest('a[href]')) return;
+      event.preventDefault();
+      openLightbox(target);
+    });
+  }
+  document.addEventListener('keydown', function (event) {
+    if (!lightboxIsOpen()) return;
+    if (event.key === 'Escape') { event.preventDefault(); closeLightbox(); return; }
+    if (event.key === '+' || event.key === '=') { event.preventDefault(); zoomLightboxBy(LIGHTBOX_STEP); return; }
+    if (event.key === '-' || event.key === '_') { event.preventDefault(); zoomLightboxBy(1 / LIGHTBOX_STEP); return; }
+    if (event.key === '0') { event.preventDefault(); setLightboxZoom(lightboxFitZoom); return; }
+    if (event.key === '1') { event.preventDefault(); setLightboxZoom(1); }
+  });
+  window.addEventListener('resize', function () {
+    if (!lightboxIsOpen()) return;
+    var shown = lightboxCanvas.firstElementChild;
+    lightboxFitZoom = computeLightboxFit(!!(shown && shown.tagName.toLowerCase() === 'svg'));
+  });
 })();
 </script>
 </body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/cli.test.js && node test/code-operator.test.js"
+    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",