@helping-ai-workflow/md2doc 3.4.2 → 3.5.0

package/lib/md2doc.js

@@ -1677,8 +1677,24 @@ ${itemsHtml}
     padding: 3px 8px; font-size: 12px; cursor: pointer;
   }
   .ed-wave-toolbar button:disabled { opacity: .45; cursor: default; }
+  /* v3.5.0 Task 7: the 關聯線 arm button, armed or mid-drag. Same on/off
+     treatment as .ed-wave-brush.is-on above — a picked tool reads the same
+     way whichever toolbar it lives in. */
+  .ed-wave-edge-arm.is-on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
   .ed-wave-metafield { display: flex; align-items: center; gap: 4px; font-size: 12px; }
   .ed-wave-metafield input { width: 110px; font-size: 12px; padding: 2px 4px; }
+  /* v3.5.0 Task 6 fix round 2: with no rule at all this is a flex item inside
+     .ed-wave-toolbar (display:flex; flex-wrap:wrap) that sizes to content, so
+     its three controls squeeze against whichever control precedes them
+     instead of forming their own row. The two property groups below are not
+     new values invented for this rule: display/flex-wrap/gap/align-items are
+     copied from .ed-wave-brushes, .ed-wave-cycleops, .ed-wave-meta above (the
+     shared flex-row rule its own children need), and flex:1 1 100% is copied
+     from .ed-wave-unmodelled below (what makes THAT sibling claim its own row
+     instead of sitting beside the control before it) — this row needs both at
+     once: it lays out its own children AND has to stop sharing a line with
+     whatever toolbar control precedes it. */
+  .ed-wave-edgebar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1 1 100%; }
   /* The "this drawing is not showing you everything" notice. period / phase /
      config.hscale all change what the ENGINE paints and none of them is
      modelled by the hand drawing, so a document carrying one says so instead
@@ -1716,6 +1732,15 @@ ${itemsHtml}
     gap: 3px; padding-right: 6px; box-sizing: border-box;
   }
   .ed-wave-lane-row.is-selected { background: #eaf2fe; }
+  /* v3.5.0 Task 12: Shift+click multi-select for group creation — a
+     distinct tint from .is-selected above (that one is the CYCLE selection
+     the brush/cycle-ops toolbar acts on; this one is a SET of whole lanes
+     the group buttons act on, and a user with both standing at once — a
+     cycle range selected on a lane that is also multi-selected for
+     grouping — needs to tell which is which at a glance). A lane can carry
+     both classes together, so this is additive (a left border) rather than
+     a second background that would just overwrite .is-selected's. */
+  .ed-wave-lane-row.is-multi-selected { border-left: 3px solid #7c3aed; }
   .ed-wave-lane-name { flex: 1 1 auto; min-width: 0; font-size: 12px; padding: 2px 4px; }
   .ed-wave-lane-row button {
     border: 1px solid #cfcfcf; border-radius: 3px; background: #fff;
@@ -1730,18 +1755,70 @@ ${itemsHtml}
     color: #555; cursor: pointer; box-sizing: border-box;
   }
   .ed-wave-group-input { width: 16px; height: 90px; cursor: text; }
-  .ed-wave-canvas-wrap { flex: 1 1 auto; overflow: auto; padding: 8px; }
+  /* position: relative so the data-label field below (v3.5.0 Task 11) has
+     an offsetParent to measure from: wave-ui.js reads canvas.offsetLeft /
+     offsetTop against THIS element, not a hard-coded copy of the padding
+     number just below, so the two cannot drift apart if that padding ever
+     changes. */
+  .ed-wave-canvas-wrap { flex: 1 1 auto; overflow: auto; padding: 8px; position: relative; }
   .ed-wave-canvas { display: block; }
+  /* v3.5.0 Task 11: the bus data-label field, positioned by wave-ui.js's
+     openDataEdit() from geometry.cellRect() — left/top/width/height are all
+     set inline per cell, so only the visual skin lives here. Sized to sit
+     exactly over the box it labels, text centred to match .ed-wave-buslabel
+     beside it in the drawing underneath, box-sizing so the border does not
+     push the field past the cell it is meant to cover. */
+  .ed-wave-data-input {
+    position: absolute; z-index: 1; box-sizing: border-box; text-align: center;
+    font-size: 11px; padding: 0 2px; border: 1px solid #1a73e8; border-radius: 2px;
+    background: #fff; color: #222;
+  }
   .ed-wave-grid { stroke: #ececec; stroke-width: 1; }
   .ed-wave-line, .ed-wave-edge { stroke: #111; stroke-width: 2; fill: none; }
   .ed-wave-weak { stroke-dasharray: 4 3; }
+  /* v3.5.0 Task 10: the P/N explicit-edge arrowhead — see wave-ui.js's
+     drawLane isClock branch for the measurement behind its shape and
+     placement. Filled, no stroke, matching the line colour above. */
+  .ed-wave-clock-arrow { fill: #111; stroke: none; }
   .ed-wave-x { fill: #d9d9d9; stroke: #111; stroke-width: 2; }
   .ed-wave-bus { fill: #f5e9c8; stroke: #111; stroke-width: 2; }
   .ed-wave-bus-3 { fill: #d8ead3; }
   .ed-wave-bus-4 { fill: #d6e4f7; }
   .ed-wave-bus-5 { fill: #f7d6e4; }
-  .ed-wave-buslabel { font-size: 11px; fill: #222; }
-  .ed-wave-selection { fill: rgba(26,115,232,.18); stroke: #1a73e8; stroke-width: 1; }
+  /* v3.5.0 Task 11 fix round 2: this text, not the box under it, is the
+     click target that opens the data-label field (wave-ui.js's onCanvasDown
+     gates on ev.target.classList.contains('ed-wave-buslabel') — pressing
+     anywhere else in the bus box still paints). pointer-events:
+     visiblePainted is the SVG initial value already, so this changes
+     nothing on its own; it is written out explicitly because that default
+     is now load-bearing for a real gesture, not incidental — a future
+     blanket pointer-events: none added upstream of this rule would
+     silently make the label unclickable again, and this line is what a
+     reviewer would have to notice and remove. */
+  .ed-wave-buslabel { font-size: 11px; fill: #222; pointer-events: visiblePainted; cursor: text; }
+  /* v3.5.0 Task 11 fix round 3: the hit target for an UNLABELLED bus run —
+     drawLane draws this circle in place of the text when the run has no
+     label, sharing the ed-wave-buslabel class above (same pointer-events,
+     same cursor: text) so onCanvasDown's hit test needed no change. Kept
+     visually quiet on purpose: dim and small, so a diagram full of
+     unlabelled buses reads as buses first and marks second, not as a field
+     of dots. Geometry (position, radius) is inline per cell, sized against
+     that cell's own box in drawLane so it always stays a small fraction of
+     it — this rule is skin only. */
+  .ed-wave-buslabel-empty { fill: #666; opacity: .35; }
+  /* v3.5.0 Task 11 fix round 4: this rect's job is to SHOW what cycle range
+     is selected, never to be pressed. pointer-events: none, so it can never
+     swallow a press meant for whatever it happens to be sitting over —
+     reviewer-measured, a bus label whose run is one cycle wide can sit
+     right up against this rect's own right edge (stroke included), and
+     without this a second press on that same label landed on the
+     selection's stroke instead of the label text underneath it, and the
+     data-label field never opened. Same principle as .ed-wave-cursor two
+     rules below, applied to the OTHER highlight this drawing draws. */
+  .ed-wave-selection {
+    fill: rgba(26,115,232,.18); stroke: #1a73e8; stroke-width: 1;
+    pointer-events: none;
+  }
   /* The KEYBOARD's own cell, and deliberately not the same mark as the
      selection: the selection is the RANGE a cycle operation acts on, the
      cursor is the ONE cell the next keystroke paints, and after Shift+left /
@@ -1757,8 +1834,69 @@ ${itemsHtml}
   .ed-wave-canvas:focus { outline: 2px solid #1a73e8; outline-offset: 2px; }
   /* The discontinuity marker. The engine draws one gap <use> per pipe
      character; drawing none left the two pictures disagreeing on a lane whose
-     levels agreed exactly. */
-  .ed-wave-gap { stroke: #111; stroke-width: 2; fill: none; }
+     levels agreed exactly. v3.5.0 Task 11 fix round 4 audit: drawLane's own
+     comment already calls this "last so it sits over the trace it
+     interrupts" — purely decorative, drawn on top purely to be seen, the
+     exact shape of thing that swallowed a press meant for the bus label
+     underneath it (see .ed-wave-selection above). A gap cycle inside a bus
+     run can land at that run's own label position, so pointer-events: none
+     here too, on the same principle, not because a concrete collision was
+     reproduced. */
+  .ed-wave-gap { stroke: #111; stroke-width: 2; fill: none; pointer-events: none; }
+  /* v3.5.0 Task 6: edge: relationship lines, drawn by wave-ui.js's
+     renderEdges() after every lane. Named .ed-wave-edge-* (with a hyphen)
+     rather than .ed-wave-edge, which is already the brick-to-brick
+     transition tick inside ONE lane (two rules above) — a different mark
+     with a different meaning, and CSS class matching is exact-token so the
+     two never collide, but the names are kept visually distinct too.
+     Colours match the engine's own arc-shape.js style string
+     (stroke:#0041c4) so a line drawn here and the same line in the
+     WaveDrom preview beside it read as the same colour. */
+  .ed-wave-edge-path { stroke: #0041c4; stroke-width: 1; fill: none; }
+  .ed-wave-edge-path.is-on { stroke: #1a73e8; stroke-width: 2; }
+  /* v3.5.0 Task 8: the edge an in-flight endpoint drag is dragging, drawn at
+     its own ACTUAL (still-committed) position — the document does not
+     change until the drop — but faded so it reads as "not where this will
+     end up" once wave-ui.js's own dashed .ed-wave-edge-pending preview line
+     (same mechanism Task 7's not-yet-written edge already uses) is standing
+     next to it. Combines with .is-on: the dragged edge is always the
+     selected one (renderEdges()'s own comment), so both classes are present
+     together and this only lowers opacity on top of that colour. */
+  .ed-wave-edge-path.is-drag-source { opacity: .35; }
+  /* The invisible, wide-stroke click target layered over each visible path
+     (see renderEdges()'s own comment) — pointer-events: stroke is what makes
+     a transparent stroke hit-testable at all, since a stroke that paints
+     nothing is not visiblePainted by the SVG default. */
+  .ed-wave-edge-hit { stroke: transparent; stroke-width: 10; fill: none; pointer-events: stroke; }
+  /* v3.5.0 Task 11 fix round 4 audit, closed in round 5: this text (drawn
+     by renderEdges, AFTER .ed-wave-edge-hit) is the same shape of hazard as
+     .ed-wave-selection and .ed-wave-gap above — purely decorative, sits on
+     top of the fat invisible click target a press aimed at SELECTING the
+     edge is meant to land on. Round 4 found this but could not apply
+     pointer-events: none to the bare class: ed-wave-edge-label is not this
+     text's own class alone — wave-ui.js's sidebar edgeLabelInput (the real,
+     keyboard-and-mouse text field for editing an edge's label) uses the
+     IDENTICAL class name, and a blanket rule would have also landed on
+     that input field and blocked clicking into it with the mouse.
+     Round 5's fix: scope the SELECTOR by element instead of renaming
+     anything. text.ed-wave-edge-label only ever matches the SVG <text>
+     wave-ui.js draws on the canvas — the sidebar control is an <input>, a
+     different element entirely, and keeps its own default pointer-events
+     untouched no matter what class it shares. */
+  text.ed-wave-edge-label { pointer-events: none; }
+  .ed-wave-edge-label { font-size: 11px; fill: #333; }
+  .ed-wave-edge-handle { fill: #1a73e8; stroke: #ffffff; }
+  .ed-wave-edge-arrow { fill: #0041c4; }
+  .ed-wave-edge-tee { stroke: #0041c4; }
+  /* v3.5.0 Task 7: the pending line an armed drag or keyboard two-step is
+     standing on, from wave-ui.js's renderCanvas() — UI state only, never a
+     document read, so it is dashed rather than the solid .ed-wave-edge-path
+     colour to read as "not written yet". pointer-events: none so it can
+     never itself become the thing a press lands on. */
+  .ed-wave-edge-pending {
+    stroke: #1a73e8; stroke-width: 2; stroke-dasharray: 5 4; fill: none;
+    pointer-events: none;
+  }
   .ed-wave-preview {
     flex: 0 1 340px; min-width: 160px; border-left: 1px solid #e2e2e2;
     overflow: auto; padding: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",