npm - @helping-ai-workflow/md2doc - Versions diffs - 2.7.0 → 2.8.1 - Mend

@helping-ai-workflow/md2doc 2.7.0 → 2.8.1

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 (2) hide show

package/lib/md2doc.js +244 -24
package/package.json +2 -2

package/lib/md2doc.js CHANGED Viewed

@@ -1368,6 +1368,34 @@ const html = `<!DOCTYPE html>
     background: rgba(147, 197, 253, 0.35);
     box-shadow: inset 0 0 0 1px #93c5fd;
   }
+  .lightbox-swatch {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    padding: 0;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 255, 255, 0.4);
+    cursor: pointer;
+    align-self: center;
+  }
+  .lightbox-swatch.is-active {
+    border-color: #ffffff;
+    box-shadow: 0 0 0 2px #93c5fd;
+  }
+  /* Inline annotation overlay left behind after closing the lightbox:
+     same-viewBox svg over the source figure, in-memory only. */
+  .anno-inline-wrap {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+  }
+  .anno-inline {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
   .lightbox-sep {
     width: 1px;
     align-self: stretch;
@@ -2187,16 +2215,25 @@ ${mermaidInitTag}` : ''}
   // close/reopen keeps them, reload starts clean (they are reading-session
   // scratch, and localStorage keys would go stale when the doc regenerates).
   var ANNO_NS = 'http://www.w3.org/2000/svg';
+  var ANNO_COLORS = ['#ef4444', '#3b82f6', '#22c55e', '#f59e0b', '#111827'];
+  // Office-like absolute stroke widths: rendered px at fit zoom (S/M/L).
+  var ANNO_WIDTHS = [1, 2, 4];
   var annoStore = (typeof WeakMap === 'function') ? new WeakMap() : null;
   var annoShapes = [];
   var annoSvg = null;
-  var annoMode = null;        // null | 'f' | 'e' | 'r' | 'm'
+  var annoMode = null;        // null | 'f' | 'e' | 'r' | 'l' | 'a' | 'm'
   var annoSelected = null;
   var annoDraft = null;
   var annoUndoStack = [];
   var annoRedoStack = [];
   var annoStrokeW = 3;
+  var annoColor = ANNO_COLORS[0];
+  var annoWidth = ANNO_WIDTHS[1];
   var annoToolButtons = {};
+  var annoStyleButtons = [];
+  var annoSourceNode = null;
+  var annoCloneEl = null;
+  var annoBaseSrc = null;
   function lightboxIsOpen() {
     return !!lightboxEl && !lightboxEl.hidden;
@@ -2308,11 +2345,12 @@ ${mermaidInitTag}` : ''}
   function annoShapeEl(shape) {
     var tag = (shape.type === 'line' || shape.type === 'arrow') ? 'line' : shape.type;
     var el = document.createElementNS(ANNO_NS, tag);
+    var color = shape.color || ANNO_COLORS[0];
     if (shape.type === 'line' || shape.type === 'arrow') {
       el.setAttribute('x1', shape.x1.toFixed(1)); el.setAttribute('y1', shape.y1.toFixed(1));
       el.setAttribute('x2', shape.x2.toFixed(1)); el.setAttribute('y2', shape.y2.toFixed(1));
       el.setAttribute('stroke-linecap', 'round');
-      if (shape.type === 'arrow') el.setAttribute('marker-end', 'url(#anno-arrow-head)');
+      if (shape.type === 'arrow') el.setAttribute('marker-end', 'url(#anno-arrow-' + color.slice(1) + ')');
     } else if (shape.type === 'rect') {
       el.setAttribute('x', shape.x.toFixed(1)); el.setAttribute('y', shape.y.toFixed(1));
       el.setAttribute('width', Math.max(0.1, shape.w).toFixed(1));
@@ -2329,32 +2367,36 @@ ${mermaidInitTag}` : ''}
       el.setAttribute('stroke-linejoin', 'round');
       el.setAttribute('stroke-linecap', 'round');
     }
-    el.setAttribute('stroke', '#ef4444');
-    el.setAttribute('stroke-width', String(annoStrokeW));
+    el.setAttribute('stroke', color);
+    el.setAttribute('stroke-width', (shape.sw || annoStrokeW).toFixed(2));
     return el;
   }
-  function annoEnsureDefs() {
+  function annoEnsureDefs(svg) {
     var defs = document.createElementNS(ANNO_NS, 'defs');
-    var marker = document.createElementNS(ANNO_NS, 'marker');
-    marker.setAttribute('id', 'anno-arrow-head');
-    marker.setAttribute('markerWidth', '8');
-    marker.setAttribute('markerHeight', '8');
-    marker.setAttribute('refX', '6.4');
-    marker.setAttribute('refY', '3');
-    marker.setAttribute('orient', 'auto');
-    var tip = document.createElementNS(ANNO_NS, 'path');
-    tip.setAttribute('d', 'M0 0 L7 3 L0 6 Z');
-    tip.setAttribute('fill', '#ef4444');
-    marker.appendChild(tip);
-    defs.appendChild(marker);
-    annoSvg.appendChild(defs);
+    ANNO_COLORS.forEach(function (color) {
+      var marker = document.createElementNS(ANNO_NS, 'marker');
+      // Same id + content in every overlay svg, so document-wide url(#) lookups
+      // always resolve to an identical marker.
+      marker.setAttribute('id', 'anno-arrow-' + color.slice(1));
+      marker.setAttribute('markerWidth', '8');
+      marker.setAttribute('markerHeight', '8');
+      marker.setAttribute('refX', '6.4');
+      marker.setAttribute('refY', '3');
+      marker.setAttribute('orient', 'auto');
+      var tip = document.createElementNS(ANNO_NS, 'path');
+      tip.setAttribute('d', 'M0 0 L7 3 L0 6 Z');
+      tip.setAttribute('fill', color);
+      marker.appendChild(tip);
+      defs.appendChild(marker);
+    });
+    svg.appendChild(defs);
   }
   function annoRedraw() {
     if (!annoSvg) return;
     while (annoSvg.firstChild) annoSvg.removeChild(annoSvg.firstChild);
-    annoEnsureDefs();
+    annoEnsureDefs(annoSvg);
     annoShapes.forEach(function (shape, index) {
       var g = document.createElementNS(ANNO_NS, 'g');
       g.setAttribute('data-anno-id', String(index));
@@ -2370,13 +2412,14 @@ ${mermaidInitTag}` : ''}
         }
         hit.setAttribute('fill', 'none');
         hit.setAttribute('stroke', 'transparent');
-        hit.setAttribute('stroke-width', String(annoStrokeW * 5));
+        hit.setAttribute('stroke-width', String(Math.max((shape.sw || annoStrokeW) * 5, 10 / (lightboxFitZoom || 1))));
         hit.setAttribute('data-anno-hit', '');
         g.appendChild(hit);
       }
       annoSvg.appendChild(g);
     });
     if (annoSelected && annoShapes.indexOf(annoSelected) !== -1) {
+      var u = 1.5 / (lightboxFitZoom || 1); // ~1.5px at fit zoom
       var box = annoBBox(annoSelected);
       var ui = document.createElementNS(ANNO_NS, 'rect');
       ui.setAttribute('data-anno-ui', '');
@@ -2384,10 +2427,10 @@ ${mermaidInitTag}` : ''}
       ui.setAttribute('width', Math.max(0.1, box.w)); ui.setAttribute('height', Math.max(0.1, box.h));
       ui.setAttribute('fill', 'none');
       ui.setAttribute('stroke', '#3b82f6');
-      ui.setAttribute('stroke-width', String(Math.max(1, annoStrokeW / 2)));
-      ui.setAttribute('stroke-dasharray', (annoStrokeW * 2) + ' ' + annoStrokeW);
+      ui.setAttribute('stroke-width', String(u));
+      ui.setAttribute('stroke-dasharray', (u * 4) + ' ' + (u * 2));
       annoSvg.appendChild(ui);
-      var hs = annoStrokeW * 3;
+      var hs = u * 6;
       [[box.x, box.y], [box.x + box.w, box.y], [box.x, box.y + box.h], [box.x + box.w, box.y + box.h]]
         .forEach(function (corner, i) {
           var h = document.createElementNS(ANNO_NS, 'rect');
@@ -2404,6 +2447,7 @@ ${mermaidInitTag}` : ''}
   function annoPushOp(op) {
     annoUndoStack.push(op);
     annoRedoStack.length = 0;
+    annoBake();
   }
   function annoApplyOp(op, reverse) {
@@ -2415,6 +2459,10 @@ ${mermaidInitTag}` : ''}
       else annoShapes.splice(annoShapes.indexOf(op.shape), 1);
     } else if (op.kind === 'geom') {
       annoSetGeom(op.shape, reverse ? op.before : op.after);
+    } else if (op.kind === 'style') {
+      var style = reverse ? op.before : op.after;
+      op.shape.color = style.color;
+      op.shape.sw = style.sw;
     } else if (op.kind === 'clear') {
       if (reverse) op.shapes.forEach(function (s) { annoShapes.push(s); });
       else annoShapes.length = 0;
@@ -2428,6 +2476,7 @@ ${mermaidInitTag}` : ''}
     annoRedoStack.push(op);
     annoSelected = null;
     annoRedraw();
+    annoBake();
   }
   function annoRedo() {
@@ -2437,6 +2486,7 @@ ${mermaidInitTag}` : ''}
     annoUndoStack.push(op);
     annoSelected = null;
     annoRedraw();
+    annoBake();
   }
   function annoClearAll() {
@@ -2457,6 +2507,129 @@ ${mermaidInitTag}` : ''}
     annoRedraw();
   }
+  function setAnnoStyle(patch) {
+    if (patch.color) annoColor = patch.color;
+    if (patch.w) annoWidth = patch.w;
+    annoStyleButtons.forEach(function (entry) {
+      entry.button.classList.toggle('is-active',
+        entry.kind === 'color' ? entry.value === annoColor : entry.value === annoWidth);
+    });
+    // With a selection, the pickers restyle it (undoably); otherwise they only
+    // set the style for the next shape.
+    if (annoSelected) {
+      var beforeStyle = { color: annoSelected.color, sw: annoSelected.sw };
+      annoSelected.color = patch.color || annoSelected.color;
+      if (patch.w) annoSelected.sw = patch.w / (lightboxFitZoom || 1);
+      annoPushOp({
+        kind: 'style', shape: annoSelected,
+        before: beforeStyle,
+        after: { color: annoSelected.color, sw: annoSelected.sw },
+      });
+      annoRedraw();
+    }
+  }
+  // Re-bake the shown raster clone (image + shapes composited to a PNG data
+  // URI) so a native right-click "Copy image" carries the annotations.
+  function annoShapesSvgMarkup() {
+    var svg = document.createElementNS(ANNO_NS, 'svg');
+    svg.setAttribute('xmlns', ANNO_NS);
+    svg.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    svg.setAttribute('width', lightboxNaturalW);
+    svg.setAttribute('height', lightboxNaturalH);
+    annoEnsureDefs(svg);
+    annoShapes.forEach(function (shape) { svg.appendChild(annoShapeEl(shape)); });
+    return new XMLSerializer().serializeToString(svg);
+  }
+  function annoComposite(drawBase, scale, done) {
+    var canvas = document.createElement('canvas');
+    canvas.width = lightboxNaturalW * scale;
+    canvas.height = lightboxNaturalH * scale;
+    var ctx = canvas.getContext('2d');
+    drawBase(ctx, canvas, function () {
+      if (!annoShapes.length) { done(canvas); return; }
+      var overlay = new Image();
+      overlay.onload = function () {
+        ctx.drawImage(overlay, 0, 0, canvas.width, canvas.height);
+        done(canvas);
+      };
+      overlay.onerror = function () { done(canvas); };
+      overlay.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(annoShapesSvgMarkup());
+    });
+  }
+  function annoBake() {
+    if (!annoCloneEl || annoCloneEl.tagName !== 'IMG' || !annoBaseSrc) return;
+    var expected = annoCloneEl;
+    annoComposite(function (ctx, canvas, next) {
+      var base = new Image();
+      base.onload = function () { ctx.drawImage(base, 0, 0, canvas.width, canvas.height); next(); };
+      base.onerror = function () { next(); };
+      base.src = annoBaseSrc;
+    }, 1, function (canvas) {
+      if (annoCloneEl !== expected) return; // lightbox moved on to another image
+      try { annoCloneEl.src = canvas.toDataURL('image/png'); }
+      catch (e) { /* tainted canvas — keep the plain image */ }
+    });
+  }
+  function annoCopyImage() {
+    var clone = annoCloneEl;
+    if (!clone) return;
+    var isImg = clone.tagName === 'IMG';
+    annoComposite(function (ctx, canvas, next) {
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      var base = new Image();
+      base.onload = function () { ctx.drawImage(base, 0, 0, canvas.width, canvas.height); next(); };
+      base.onerror = function () { next(); };
+      base.src = isImg ? (annoBaseSrc || clone.src)
+        : 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(new XMLSerializer().serializeToString(clone));
+    }, isImg ? 1 : 2, function (canvas) {
+      try {
+        canvas.toBlob(function (blob) {
+          if (!blob || typeof ClipboardItem === 'undefined' || !navigator.clipboard || !navigator.clipboard.write) return;
+          navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]).catch(function () {});
+        }, 'image/png');
+      } catch (e) { /* clipboard unavailable */ }
+    });
+  }
+  // After Esc the drawings stay visible on the inline figure: a same-viewBox
+  // overlay svg over the source element. In-memory only — gone on reload.
+  function annoSyncInline() {
+    var node = annoSourceNode;
+    if (!node) return;
+    var visual = lightboxSourceOf(node);
+    if (!visual || !visual.parentNode) return;
+    var wrap = visual.closest ? visual.closest('.anno-inline-wrap') : null;
+    var shapes = annoShapes;
+    if (!shapes.length) {
+      if (wrap) {
+        var old = wrap.querySelector('svg.anno-inline');
+        if (old) wrap.removeChild(old);
+      }
+      return;
+    }
+    if (!wrap) {
+      wrap = document.createElement('span');
+      wrap.className = 'anno-inline-wrap';
+      visual.parentNode.insertBefore(wrap, visual);
+      wrap.appendChild(visual);
+    }
+    var overlay = wrap.querySelector('svg.anno-inline');
+    if (!overlay) {
+      overlay = document.createElementNS(ANNO_NS, 'svg');
+      overlay.setAttribute('class', 'anno-inline');
+      wrap.appendChild(overlay);
+    }
+    overlay.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    while (overlay.firstChild) overlay.removeChild(overlay.firstChild);
+    annoEnsureDefs(overlay);
+    shapes.forEach(function (shape) { overlay.appendChild(annoShapeEl(shape)); });
+  }
   function setAnnoMode(mode) {
     annoMode = (annoMode === mode) ? null : mode;
     if (annoMode !== 'm') annoSelected = null;
@@ -2519,6 +2692,11 @@ ${mermaidInitTag}` : ''}
         annoSelected = null;
         annoRedraw();
       }
+      // The baked clone still shows the shape at its old spot — revert to the
+      // base image for the gesture; the overlay alone renders the live shapes.
+      if (annoDraft && annoCloneEl && annoCloneEl.tagName === 'IMG' && annoBaseSrc) {
+        annoCloneEl.src = annoBaseSrc;
+      }
       return;
     }
     var shape;
@@ -2527,6 +2705,8 @@ ${mermaidInitTag}` : ''}
     else if (annoMode === 'l') shape = { type: 'line', x1: pt.x, y1: pt.y, x2: pt.x, y2: pt.y };
     else if (annoMode === 'a') shape = { type: 'arrow', x1: pt.x, y1: pt.y, x2: pt.x, y2: pt.y };
     else shape = { type: 'rect', x: pt.x, y: pt.y, w: 0, h: 0 };
+    shape.color = annoColor;
+    shape.sw = annoWidth / (lightboxFitZoom || 1);
     annoDraft = { kind: 'draw', shape: shape, start: pt, el: annoShapeEl(shape), clientDist: 0, lastClient: [event.clientX, event.clientY] };
     annoSvg.appendChild(annoDraft.el);
   }
@@ -2593,11 +2773,16 @@ ${mermaidInitTag}` : ''}
     }
     if (d.moved) {
       annoPushOp({ kind: 'geom', shape: d.shape, before: d.before, after: annoGeomOf(d.shape) });
+    } else {
+      annoBake(); // gesture reverted the clone to the base image — restore it
     }
     annoRedraw();
   }
   function annoSetup(sourceNode) {
+    annoSourceNode = sourceNode;
+    annoCloneEl = lightboxCanvas.firstElementChild;
+    annoBaseSrc = (annoCloneEl && annoCloneEl.tagName === 'IMG') ? annoCloneEl.src : null;
     annoShapes = [];
     if (annoStore) {
       annoShapes = annoStore.get(sourceNode);
@@ -2618,6 +2803,7 @@ ${mermaidInitTag}` : ''}
     lightboxCanvas.appendChild(annoSvg);
     annoMode = null;
     setAnnoMode(null);
+    if (annoShapes.length) annoBake();
   }
   function buildLightbox() {
@@ -2658,6 +2844,25 @@ ${mermaidInitTag}` : ''}
       annoToolButtons[tool[0]] = button;
       bar.appendChild(button);
     });
+    ANNO_COLORS.forEach(function (color) {
+      var swatch = lightboxButton('', 'Stroke color ' + color, function () { setAnnoStyle({ color: color }); });
+      swatch.className = 'lightbox-swatch';
+      swatch.style.background = color;
+      swatch.setAttribute('data-anno-color', color);
+      if (color === annoColor) swatch.classList.add('is-active');
+      annoStyleButtons.push({ kind: 'color', value: color, button: swatch });
+      bar.appendChild(swatch);
+    });
+    [['S', ANNO_WIDTHS[0]], ['M', ANNO_WIDTHS[1]], ['L', ANNO_WIDTHS[2]]].forEach(function (width) {
+      var button = lightboxButton(width[0], 'Stroke width ' + width[1] + 'px', function () { setAnnoStyle({ w: width[1] }); });
+      button.setAttribute('data-anno-width', String(width[1]));
+      if (width[1] === annoWidth) button.classList.add('is-active');
+      annoStyleButtons.push({ kind: 'width', value: width[1], button: button });
+      bar.appendChild(button);
+    });
+    var copyButton = lightboxButton('⧉', 'Copy image with annotations', annoCopyImage);
+    copyButton.setAttribute('data-anno-copy', '');
+    bar.appendChild(copyButton);
     var clearButton = lightboxButton('Clear', 'Clear all annotations', annoClearAll);
     clearButton.setAttribute('data-anno-clear', '');
     bar.appendChild(clearButton);
@@ -2752,7 +2957,18 @@ ${mermaidInitTag}` : ''}
     var isVector = !!(source.tagName && source.tagName.toLowerCase() === 'svg');
     var clone = source.cloneNode(true);
-    clone.removeAttribute('id');
+    // Mermaid scopes its embedded <style> to the svg's #id — dropping the id
+    // kills the theme. Rename it instead (avoids a duplicate id) and rewrite
+    // the scoped selectors to the new name.
+    if (isVector && source.id) {
+      var lightboxCloneId = 'lightbox-' + source.id;
+      clone.setAttribute('id', lightboxCloneId);
+      Array.prototype.forEach.call(clone.querySelectorAll('style'), function (styleEl) {
+        styleEl.textContent = styleEl.textContent.split('#' + source.id).join('#' + lightboxCloneId);
+      });
+    } else {
+      clone.removeAttribute('id');
+    }
     clone.removeAttribute('class');
     clone.removeAttribute('style');
     clone.removeAttribute('width');
@@ -2782,6 +2998,10 @@ ${mermaidInitTag}` : ''}
     lightboxEl.hidden = true;
     document.body.removeAttribute('data-lightbox-open');
     annoCancelDraft();
+    annoSyncInline();
+    annoSourceNode = null;
+    annoCloneEl = null;
+    annoBaseSrc = null;
     annoSvg = null;
     annoMode = null;
     setAnnoMode(null);

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "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/lightbox.test.js && node test/lightbox-anno.test.js && node test/reader-panels.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/lightbox-anno.test.js && node test/lightbox-anno-style.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",