@diagrammo/dgmo 0.8.8 → 0.8.10

package/docs/language-reference.md

@@ -716,6 +716,20 @@ Home
   -login-> Login
 ```
 
+Arrows can target containers using bracket syntax:
+
+```
+Home
+  -> [Port Market]
+[Port Market]
+  Shop
+  -> [Warehouse]
+[Warehouse]
+  Storage
+```
+
+All permutations supported: node→group, group→node, group→group. Brackets required to distinguish group targets from page targets.
+
 ### 11.4 Containers
 
 ```
@@ -898,14 +912,26 @@ Nested groups (max depth 2):
 
 Group metadata cascades to children (node metadata overrides). Nodes already declared above can be referenced inside groups to assign membership.
 
-### 13.5 Group-to-Group Edges
+### 13.5 Group-Targeted Edges
+
+Node-to-group and group-to-group edges use bracket syntax `[Group Name]`:
 
 ```
-[Region A] -> [Region B]
+API -> [Backend]
+[Backend] -> [Frontend]
 [Region A] <-> [Region B]
 [Region A] -VPN-> [Region B]
 ```
 
+Indented shorthand also supports groups (place arrow directly after group header):
+
+```
+[Backend]
+  -> [Frontend]
+  DB
+  Cache
+```
+
 ### 13.6 Directives
 
 - `direction TB` — top-to-bottom layout (default: `LR`)

package/gallery/fixtures/sitemap-full.dgmo

@@ -19,6 +19,7 @@ Home
   -search-> Search
   -sign in-> Login
   -my tickets-> My Account
+  -> [Browse & Discovery]
 
 [Browse & Discovery]
   Game Schedule

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diagrammo/dgmo",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "DGMO diagram markup language — parser, renderer, and color system",
   "license": "MIT",
   "type": "module",

package/src/boxes-and-lines/layout.ts

@@ -5,6 +5,31 @@
 import dagre from '@dagrejs/dagre';
 import type { ParsedBoxesAndLines, BLNode } from './types';
 
+/**
+ * Clip a point at (cx, cy) to the border of a rectangle centered at (cx, cy)
+ * with given width/height, along the direction toward (tx, ty).
+ * Returns the intersection point on the rectangle border.
+ */
+function clipToRectBorder(
+  cx: number,
+  cy: number,
+  w: number,
+  h: number,
+  tx: number,
+  ty: number
+): { x: number; y: number } {
+  const dx = tx - cx;
+  const dy = ty - cy;
+  if (dx === 0 && dy === 0) return { x: cx, y: cy };
+  const hw = w / 2;
+  const hh = h / 2;
+  // Scale factor to reach the border along the direction (dx, dy)
+  const sx = dx !== 0 ? hw / Math.abs(dx) : Infinity;
+  const sy = dy !== 0 ? hh / Math.abs(dy) : Infinity;
+  const s = Math.min(sx, sy);
+  return { x: cx + dx * s, y: cy + dy * s };
+}
+
 // ── Constants ──────────────────────────────────────────────
 const NODESEP = 60;
 const RANKSEP = 100;
@@ -38,6 +63,8 @@ export interface BLLayoutEdge {
   yOffset: number;
   parallelCount: number;
   metadata: Record<string, string>;
+  /** True for edges deferred from dagre (group endpoints) — use linear curve */
+  deferred?: boolean;
 }
 
 export interface BLLayoutGroup {
@@ -257,17 +284,29 @@ export function layoutBoxesAndLines(
     let points: { x: number; y: number }[];
 
     if (deferredSet.has(i)) {
-      // Deferred edge (compound parent endpoint) — compute points from node positions
+      // Deferred edge (compound parent endpoint) — compute points clipped to border
       const srcNode = g.node(edge.source);
       const tgtNode = g.node(edge.target);
       if (!srcNode || !tgtNode) continue;
-      const midX = (srcNode.x + tgtNode.x) / 2;
-      const midY = (srcNode.y + tgtNode.y) / 2;
-      points = [
-        { x: srcNode.x, y: srcNode.y },
-        { x: midX, y: midY },
-        { x: tgtNode.x, y: tgtNode.y },
-      ];
+      const srcPt = clipToRectBorder(
+        srcNode.x,
+        srcNode.y,
+        srcNode.width,
+        srcNode.height,
+        tgtNode.x,
+        tgtNode.y
+      );
+      const tgtPt = clipToRectBorder(
+        tgtNode.x,
+        tgtNode.y,
+        tgtNode.width,
+        tgtNode.height,
+        srcNode.x,
+        srcNode.y
+      );
+      const midX = (srcPt.x + tgtPt.x) / 2;
+      const midY = (srcPt.y + tgtPt.y) / 2;
+      points = [srcPt, { x: midX, y: midY }, tgtPt];
     } else {
       const dagreEdge = g.edge(edge.source, edge.target, `e${i}`);
       points = dagreEdge?.points ?? [];
@@ -294,6 +333,7 @@ export function layoutBoxesAndLines(
       yOffset: edgeYOffsets[i],
       parallelCount: edgeParallelCounts[i],
       metadata: edge.metadata,
+      deferred: deferredSet.has(i) || undefined,
     });
   }
 

package/src/boxes-and-lines/parser.ts

@@ -94,6 +94,7 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
   const nodeLabels = new Set<string>();
   const groupLabels = new Set<string>();
   let lastNodeLabel: string | null = null;
+  let lastSourceIsGroup = false;
 
   // Group stack for nesting
   interface GroupState {
@@ -393,6 +394,8 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
 
       groupLabels.add(label);
       groupStack.push({ group, indent, depth: currentDepth });
+      lastNodeLabel = label;
+      lastSourceIsGroup = true;
       continue;
     }
 
@@ -414,7 +417,10 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
           );
           continue;
         }
-        edgeText = `${lastNodeLabel} ${trimmed}`;
+        const sourcePrefix = lastSourceIsGroup
+          ? `[${lastNodeLabel}]`
+          : lastNodeLabel;
+        edgeText = `${sourcePrefix} ${trimmed}`;
       }
 
       const edge = parseEdgeLine(
@@ -442,6 +448,7 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
       continue;
     }
     lastNodeLabel = node.label;
+    lastSourceIsGroup = false;
 
     const gs = currentGroupState();
     const isGroupChild = gs && indent > gs.indent;
@@ -478,16 +485,47 @@ export function parseBoxesAndLines(content: string): ParsedBoxesAndLines {
     result.groups.push(gs.group);
   }
 
-  // Implicit node creation for edge endpoints
+  // Validate group references and implicitly create node endpoints
+  const validEdges: BLEdge[] = [];
   for (const edge of result.edges) {
-    // Skip group references
-    if (!edge.source.startsWith('__group_')) {
+    let valid = true;
+
+    // Check group references exist
+    if (edge.source.startsWith('__group_')) {
+      const label = edge.source.slice('__group_'.length);
+      const found = [...groupLabels].some(
+        (g) => g.toLowerCase() === label.toLowerCase()
+      );
+      if (!found) {
+        result.diagnostics.push(
+          makeDgmoError(edge.lineNumber, `Group '[${label}]' not found`)
+        );
+        valid = false;
+      }
+    } else {
       ensureNode(edge.source, edge.lineNumber);
     }
-    if (!edge.target.startsWith('__group_')) {
+
+    if (edge.target.startsWith('__group_')) {
+      const label = edge.target.slice('__group_'.length);
+      const found = [...groupLabels].some(
+        (g) => g.toLowerCase() === label.toLowerCase()
+      );
+      if (!found) {
+        result.diagnostics.push(
+          makeDgmoError(edge.lineNumber, `Group '[${label}]' not found`)
+        );
+        valid = false;
+      }
+    } else {
       ensureNode(edge.target, edge.lineNumber);
     }
+
+    if (valid) {
+      validEdges.push(edge);
+    }
   }
+  result.edges = validEdges;
 
   // Post-parse: inject default tag metadata and validate tag values
   if (result.tagGroups.length > 0) {
@@ -540,6 +578,12 @@ function parseNodeLine(
   };
 }
 
+/** Convert `[Group Name]` to `__group_Group Name`, or return as-is for plain nodes */
+function resolveEndpoint(name: string): string {
+  const m = name.match(/^\[(.+)\]$/);
+  return m ? groupId(m[1].trim()) : name;
+}
+
 /**
  * Parse an edge line. Supports:
  * - `Source -> Target`
@@ -548,6 +592,8 @@ function parseNodeLine(
  * - `Source <-> Target`
  * - `Source <-label-> Target`
  * - `Source -label-> Target | key: value`
+ *
+ * `[Group Name]` in source or target position is resolved to `__group_Group Name`.
  */
 function parseEdgeLine(
   trimmed: string,
@@ -558,7 +604,7 @@ function parseEdgeLine(
   // Check for bidirectional labeled: `Source <-label-> Target`
   const biLabeledMatch = trimmed.match(/^(.+?)\s*<-(.+)->\s*(.+)$/);
   if (biLabeledMatch) {
-    const source = biLabeledMatch[1].trim();
+    const source = resolveEndpoint(biLabeledMatch[1].trim());
     const label = biLabeledMatch[2].trim();
     let rest = biLabeledMatch[3].trim();
 
@@ -582,7 +628,7 @@ function parseEdgeLine(
 
     return {
       source,
-      target: rest,
+      target: resolveEndpoint(rest),
       label: label || undefined,
       bidirectional: true,
       lineNumber: lineNum,
@@ -593,7 +639,7 @@ function parseEdgeLine(
   // Check for bidirectional plain: `Source <-> Target`
   const biIdx = trimmed.indexOf('<->');
   if (biIdx >= 0) {
-    const source = trimmed.slice(0, biIdx).trim();
+    const source = resolveEndpoint(trimmed.slice(0, biIdx).trim());
     let rest = trimmed.slice(biIdx + 3).trim();
 
     let metadata: Record<string, string> = {};
@@ -616,7 +662,7 @@ function parseEdgeLine(
 
     return {
       source,
-      target: rest,
+      target: resolveEndpoint(rest),
       bidirectional: true,
       lineNumber: lineNum,
       metadata,
@@ -626,7 +672,7 @@ function parseEdgeLine(
   // Check for labeled arrow: `Source -label-> Target`
   const labeledMatch = trimmed.match(/^(.+?)\s+-(.+)->\s*(.+)$/);
   if (labeledMatch) {
-    const source = labeledMatch[1].trim();
+    const source = resolveEndpoint(labeledMatch[1].trim());
     const label = labeledMatch[2].trim();
     let rest = labeledMatch[3].trim();
 
@@ -651,7 +697,7 @@ function parseEdgeLine(
 
       return {
         source,
-        target: rest,
+        target: resolveEndpoint(rest),
         label,
         bidirectional: false,
         lineNumber: lineNum,
@@ -664,7 +710,7 @@ function parseEdgeLine(
   const arrowIdx = trimmed.indexOf('->');
   if (arrowIdx < 0) return null;
 
-  const source = trimmed.slice(0, arrowIdx).trim();
+  const source = resolveEndpoint(trimmed.slice(0, arrowIdx).trim());
   let rest = trimmed.slice(arrowIdx + 2).trim();
 
   if (!source || !rest) {
@@ -689,7 +735,7 @@ function parseEdgeLine(
 
   return {
     source,
-    target: rest,
+    target: resolveEndpoint(rest),
     bidirectional: false,
     lineNumber: lineNum,
     metadata,

package/src/boxes-and-lines/renderer.ts

@@ -5,18 +5,9 @@
 import * as d3Selection from 'd3-selection';
 import * as d3Shape from 'd3-shape';
 import { FONT_FAMILY } from '../fonts';
-import {
-  LEGEND_HEIGHT,
-  LEGEND_PILL_PAD,
-  LEGEND_PILL_FONT_SIZE,
-  LEGEND_CAPSULE_PAD,
-  LEGEND_DOT_R,
-  LEGEND_ENTRY_FONT_SIZE,
-  LEGEND_ENTRY_DOT_GAP,
-  LEGEND_ENTRY_TRAIL,
-  LEGEND_GROUP_GAP,
-  measureLegendText,
-} from '../utils/legend-constants';
+import { LEGEND_HEIGHT } from '../utils/legend-constants';
+import { renderLegendD3 } from '../utils/legend-d3';
+import type { LegendConfig, LegendState } from '../utils/legend-types';
 import {
   TITLE_FONT_SIZE,
   TITLE_FONT_WEIGHT,
@@ -62,6 +53,12 @@ const lineGeneratorTB = d3Shape
   .y((d) => d.y)
   .curve(d3Shape.curveMonotoneY);
 
+const lineGeneratorLinear = d3Shape
+  .line<{ x: number; y: number }>()
+  .x((d) => d.x)
+  .y((d) => d.y)
+  .curve(d3Shape.curveLinear);
+
 // ── Text fitting ───────────────────────────────────────────
 
 function splitCamelCase(word: string): string[] {
@@ -526,15 +523,15 @@ export function renderBoxesAndLines(
     edgeGroups.set(i, edgeG as unknown as D3G);
 
     const markerId = `bl-arrow-${color.replace('#', '')}`;
+    const gen = le.deferred
+      ? lineGeneratorLinear
+      : parsed.direction === 'TB'
+        ? lineGeneratorTB
+        : lineGeneratorLR;
     const path = edgeG
       .append('path')
       .attr('class', 'bl-edge')
-      .attr(
-        'd',
-        (parsed.direction === 'TB' ? lineGeneratorTB : lineGeneratorLR)(
-          points
-        ) ?? ''
-      )
+      .attr('d', gen(points) ?? '')
       .attr('fill', 'none')
       .attr('stroke', color)
       .attr('stroke-width', EDGE_STROKE_WIDTH)
@@ -709,126 +706,25 @@ export function renderBoxesAndLines(
 
   // ── Render legend ──────────────────────────────────────
   if (parsed.tagGroups.length > 0) {
-    renderLegend(svg, parsed, palette, isDark, activeGroup, width, titleOffset);
-  }
-}
-
-// ── Legend ──────────────────────────────────────────────────
-
-function renderLegend(
-  svg: D3Svg,
-  parsed: ParsedBoxesAndLines,
-  palette: PaletteColors,
-  isDark: boolean,
-  activeGroup: string | null,
-  svgWidth: number,
-  titleOffset: number
-): void {
-  const groupBg = isDark
-    ? mix(palette.surface, palette.bg, 50)
-    : mix(palette.surface, palette.bg, 30);
-  const pillBorder = mix(palette.textMuted, palette.bg, 50);
-
-  // ── Pre-compute total legend width for centering ──
-  let totalW = 0;
-  for (const tg of parsed.tagGroups) {
-    const isActive = activeGroup?.toLowerCase() === tg.name.toLowerCase();
-    totalW +=
-      measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    if (isActive) {
-      totalW += 6;
-      for (const entry of tg.entries) {
-        totalW +=
-          LEGEND_DOT_R * 2 +
-          LEGEND_ENTRY_DOT_GAP +
-          measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE) +
-          LEGEND_ENTRY_TRAIL;
-      }
-    }
-    totalW += LEGEND_GROUP_GAP;
-  }
-
-  const legendX = Math.max(LEGEND_CAPSULE_PAD, (svgWidth - totalW) / 2);
-  const legendY = titleOffset + 4;
-  const legendG = svg
-    .append('g')
-    .attr('transform', `translate(${legendX},${legendY})`);
-
-  let x = 0;
-
-  // ── Tag group pills (collapsed when inactive, expanded when active) ──
-  for (const tg of parsed.tagGroups) {
-    const isActiveGroup = activeGroup?.toLowerCase() === tg.name.toLowerCase();
-
-    const groupG = legendG
+    const legendConfig: LegendConfig = {
+      groups: parsed.tagGroups,
+      position: { placement: 'top-center', titleRelation: 'below-title' },
+      mode: 'fixed',
+    };
+    const legendState: LegendState = { activeGroup };
+    const legendG = svg
       .append('g')
-      .attr('class', 'bl-legend-group')
-      .attr('data-legend-group', tg.name.toLowerCase())
-      .style('cursor', 'pointer');
-
-    // Group name pill
-    const nameW =
-      measureLegendText(tg.name, LEGEND_PILL_FONT_SIZE) + LEGEND_PILL_PAD;
-    const tagPill = groupG
-      .append('rect')
-      .attr('x', x)
-      .attr('y', 0)
-      .attr('width', nameW)
-      .attr('height', LEGEND_HEIGHT)
-      .attr('rx', LEGEND_HEIGHT / 2)
-      .attr('fill', groupBg);
-
-    if (isActiveGroup) {
-      tagPill.attr('stroke', pillBorder).attr('stroke-width', 0.75);
-    }
-
-    groupG
-      .append('text')
-      .attr('x', x + nameW / 2)
-      .attr('y', LEGEND_HEIGHT / 2)
-      .attr('text-anchor', 'middle')
-      .attr('dominant-baseline', 'central')
-      .attr('font-size', LEGEND_PILL_FONT_SIZE)
-      .attr('font-weight', 500)
-      .attr('fill', isActiveGroup ? palette.text : palette.textMuted)
-      .attr('pointer-events', 'none')
-      .text(tg.name);
-
-    x += nameW;
-
-    // Entries — only rendered when this group is active
-    if (isActiveGroup) {
-      x += 6;
-      for (const entry of tg.entries) {
-        const entryColor = entry.color || palette.textMuted;
-        const ew = measureLegendText(entry.value, LEGEND_ENTRY_FONT_SIZE);
-
-        const entryG = groupG
-          .append('g')
-          .attr('data-legend-entry', entry.value.toLowerCase())
-          .style('cursor', 'pointer');
-
-        entryG
-          .append('circle')
-          .attr('cx', x + LEGEND_DOT_R)
-          .attr('cy', LEGEND_HEIGHT / 2)
-          .attr('r', LEGEND_DOT_R)
-          .attr('fill', entryColor);
-
-        entryG
-          .append('text')
-          .attr('x', x + LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP)
-          .attr('y', LEGEND_HEIGHT / 2)
-          .attr('dominant-baseline', 'central')
-          .attr('font-size', LEGEND_ENTRY_FONT_SIZE)
-          .attr('fill', palette.textMuted)
-          .text(entry.value);
-
-        x += LEGEND_DOT_R * 2 + LEGEND_ENTRY_DOT_GAP + ew + LEGEND_ENTRY_TRAIL;
-      }
-    }
-
-    x += LEGEND_GROUP_GAP;
+      .attr('transform', `translate(0,${titleOffset + 4})`);
+    renderLegendD3(
+      legendG,
+      legendConfig,
+      legendState,
+      palette,
+      isDark,
+      undefined,
+      width
+    );
+    legendG.selectAll('[data-legend-group]').classed('bl-legend-group', true);
   }
 }