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

@helping-ai-workflow/md2doc 2.7.0 → 2.8.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 (2) hide show

package/lib/md2doc.js +219 -19
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,24 @@ ${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'];
+  var ANNO_WIDTHS = [0.6, 1, 1.8];
   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 annoWidthScale = 1;
   var annoToolButtons = {};
+  var annoStyleButtons = [];
+  var annoSourceNode = null;
+  var annoCloneEl = null;
+  var annoBaseSrc = null;
   function lightboxIsOpen() {
     return !!lightboxEl && !lightboxEl.hidden;
@@ -2308,11 +2344,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 +2366,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', (annoStrokeW * (shape.ws || 1)).toFixed(1));
     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));
@@ -2404,6 +2445,7 @@ ${mermaidInitTag}` : ''}
   function annoPushOp(op) {
     annoUndoStack.push(op);
     annoRedoStack.length = 0;
+    annoBake();
   }
   function annoApplyOp(op, reverse) {
@@ -2415,6 +2457,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.ws = style.ws;
     } else if (op.kind === 'clear') {
       if (reverse) op.shapes.forEach(function (s) { annoShapes.push(s); });
       else annoShapes.length = 0;
@@ -2428,6 +2474,7 @@ ${mermaidInitTag}` : ''}
     annoRedoStack.push(op);
     annoSelected = null;
     annoRedraw();
+    annoBake();
   }
   function annoRedo() {
@@ -2437,6 +2484,7 @@ ${mermaidInitTag}` : ''}
     annoUndoStack.push(op);
     annoSelected = null;
     annoRedraw();
+    annoBake();
   }
   function annoClearAll() {
@@ -2457,6 +2505,129 @@ ${mermaidInitTag}` : ''}
     annoRedraw();
   }
+  function setAnnoStyle(patch) {
+    if (patch.color) annoColor = patch.color;
+    if (patch.ws) annoWidthScale = patch.ws;
+    annoStyleButtons.forEach(function (entry) {
+      entry.button.classList.toggle('is-active',
+        entry.kind === 'color' ? entry.value === annoColor : entry.value === annoWidthScale);
+    });
+    // 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, ws: annoSelected.ws };
+      annoSelected.color = patch.color || annoSelected.color;
+      annoSelected.ws = patch.ws || annoSelected.ws;
+      annoPushOp({
+        kind: 'style', shape: annoSelected,
+        before: beforeStyle,
+        after: { color: annoSelected.color, ws: annoSelected.ws },
+      });
+      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;
@@ -2527,6 +2698,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.ws = annoWidthScale;
     annoDraft = { kind: 'draw', shape: shape, start: pt, el: annoShapeEl(shape), clientDist: 0, lastClient: [event.clientX, event.clientY] };
     annoSvg.appendChild(annoDraft.el);
   }
@@ -2598,6 +2771,9 @@ ${mermaidInitTag}` : ''}
   }
   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 +2794,7 @@ ${mermaidInitTag}` : ''}
     lightboxCanvas.appendChild(annoSvg);
     annoMode = null;
     setAnnoMode(null);
+    if (annoShapes.length) annoBake();
   }
   function buildLightbox() {
@@ -2658,6 +2835,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[0], function () { setAnnoStyle({ ws: width[1] }); });
+      button.setAttribute('data-anno-width', String(width[1]));
+      if (width[1] === annoWidthScale) 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);
@@ -2782,6 +2978,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.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/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",