@diagrammo/dgmo 0.4.3 → 0.4.4

package/package.json

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

package/src/infra/layout.ts

@@ -335,7 +335,7 @@ function formatUptime(fraction: number): string {
 // Layout engine
 // ============================================================
 
-export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null): InfraLayoutResult {
+export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: string | null, collapsedNodes?: Set<string> | null): InfraLayoutResult {
   if (computed.nodes.length === 0) {
     return { nodes: [], edges: [], groups: [], options: {}, width: 0, height: 0 };
   }
@@ -363,9 +363,12 @@ export function layoutInfra(computed: ComputedInfraModel, selectedNodeId?: strin
   const widthMap = new Map<string, number>();
   const heightMap = new Map<string, number>();
   for (const node of computed.nodes) {
-    const expanded = node.id === selectedNodeId;
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    const expanded = !isNodeCollapsed && node.id === selectedNodeId;
     const width = computeNodeWidth(node, expanded, computed.options);
-    const height = computeNodeHeight(node, expanded, computed.options);
+    const height = isNodeCollapsed
+      ? NODE_HEADER_HEIGHT + NODE_PAD_BOTTOM
+      : computeNodeHeight(node, expanded, computed.options);
     widthMap.set(node.id, width);
     heightMap.set(node.id, height);
     const inGroup = groupedNodeIds.has(node.id);

package/src/infra/parser.ts

@@ -43,8 +43,8 @@ const TAG_VALUE_RE = /^(\w[\w\s]*?)(?:\(([^)]+)\))?(\s+default)?\s*$/;
 // Component line: ComponentName  or  ComponentName | t: Backend | env: Prod
 const COMPONENT_RE = /^([a-zA-Z_][\w]*)(.*)$/;
 
-// Pipe metadata: | key: value
-const PIPE_META_RE = /\|\s*(\w+)\s*:\s*([^|]+)/g;
+// Pipe metadata: | key: value  or  | k1: v1, k2: v2  (comma-separated)
+const PIPE_META_RE = /[|,]\s*(\w+)\s*:\s*([^|,]+)/g;
 
 // Property: key: value
 const PROPERTY_RE = /^([\w-]+)\s*:\s*(.+)$/;

package/src/infra/renderer.ts

@@ -606,6 +606,23 @@ function renderEdgeLabels(
   }
 }
 
+/** Returns the resolved tag color for a node's active tag group, or null if not applicable. */
+function resolveActiveTagStroke(
+  node: InfraLayoutNode,
+  activeGroup: string,
+  tagGroups: InfraTagGroup[],
+  palette: PaletteColors,
+): string | null {
+  const tg = tagGroups.find((t) => t.name.toLowerCase() === activeGroup.toLowerCase());
+  if (!tg) return null;
+  const tagKey = (tg.alias ?? tg.name).toLowerCase();
+  const tagVal = node.tags[tagKey];
+  if (!tagVal) return null;
+  const tv = tg.values.find((v) => v.name.toLowerCase() === tagVal.toLowerCase());
+  if (!tv?.color) return null;
+  return resolveColor(tv.color, palette);
+}
+
 function renderNodes(
   svg: d3Selection.Selection<SVGGElement, unknown, null, undefined>,
   nodes: InfraLayoutNode[],
@@ -615,11 +632,22 @@ function renderNodes(
   selectedNodeId?: string | null,
   activeGroup?: string | null,
   diagramOptions?: Record<string, string>,
+  collapsedNodes?: Set<string> | null,
+  tagGroups?: InfraTagGroup[],
 ) {
   const mutedColor = palette.textMuted;
 
   for (const node of nodes) {
-    const { fill, stroke, textFill } = nodeColor(node, palette, isDark);
+    let { fill, stroke, textFill } = nodeColor(node, palette, isDark);
+
+    // When a tag legend is active, override border color with tag color
+    if (activeGroup && tagGroups && !node.isEdge) {
+      const tagStroke = resolveActiveTagStroke(node, activeGroup, tagGroups, palette);
+      if (tagStroke) {
+        stroke = tagStroke;
+        fill = mix(palette.bg, tagStroke, isDark ? 88 : 94);
+      }
+    }
     let cls = 'infra-node';
     if (animate && node.isEdge) {
       cls += ' infra-node-edge-throb';
@@ -632,12 +660,13 @@ function renderNodes(
     const g = svg.append('g')
       .attr('class', cls)
       .attr('data-line-number', node.lineNumber)
-      .attr('data-infra-node', node.id);
+      .attr('data-infra-node', node.id)
+      .attr('data-node-collapse', node.id)
+      .style('cursor', 'pointer');
 
-    // Collapsed group nodes: toggle attribute + pointer cursor
+    // Collapsed group nodes: toggle attribute
     if (node.id.startsWith('[')) {
-      g.attr('data-node-toggle', node.id)
-        .style('cursor', 'pointer');
+      g.attr('data-node-toggle', node.id);
     }
 
     // Expose tag values for legend hover dimming
@@ -681,8 +710,22 @@ function renderNodes(
       .attr('fill', textFill)
       .text(node.label);
 
-    // --- Key-value rows below header ---
-    {
+    // --- Key-value rows below header (skipped for collapsed nodes) ---
+    const isNodeCollapsed = collapsedNodes?.has(node.id) ?? false;
+    if (isNodeCollapsed) {
+      // Collapsed: show a subtle chevron indicator at the bottom of the header
+      const chevronY = y + node.height - 6;
+      g.append('text')
+        .attr('x', node.x)
+        .attr('y', chevronY)
+        .attr('text-anchor', 'middle')
+        .attr('font-family', FONT_FAMILY)
+        .attr('font-size', 8)
+        .attr('fill', textFill)
+        .attr('opacity', 0.5)
+        .text('▼');
+    }
+    if (!isNodeCollapsed) {
       const expanded = node.id === selectedNodeId;
       // Declared properties only shown when node is selected (expanded)
       const displayProps = (!node.isEdge && expanded) ? getDisplayProps(node, expanded, diagramOptions) : [];
@@ -1380,6 +1423,7 @@ export function renderInfra(
   playback?: InfraPlaybackState | null,
   selectedNodeId?: string | null,
   exportMode?: boolean,
+  collapsedNodes?: Set<string> | null,
 ) {
   // Clear previous render (preserve tooltips if any)
   d3Selection.select(container).selectAll(':not([data-d3-tooltip])').remove();
@@ -1470,7 +1514,7 @@ export function renderInfra(
   // Render layers: groups (back), edge paths, nodes, reject particles, edge labels (front)
   renderGroups(svg, layout.groups, palette, isDark);
   renderEdgePaths(svg, layout.edges, layout.nodes, palette, isDark, shouldAnimate);
-  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options);
+  renderNodes(svg, layout.nodes, palette, isDark, shouldAnimate, selectedNodeId, activeGroup, layout.options, collapsedNodes, tagGroups ?? []);
   if (shouldAnimate) {
     renderRejectParticles(svg, layout.nodes);
   }

package/src/sharing.ts

@@ -8,6 +8,7 @@ const COMPRESSED_SIZE_LIMIT = 8192; // 8 KB
 
 export interface DiagramViewState {
   activeTagGroup?: string;
+  collapsedGroups?: string[];
 }
 
 export interface DecodedDiagramUrl {
@@ -47,6 +48,10 @@ export function encodeDiagramUrl(
     hash += `&tag=${encodeURIComponent(options.viewState.activeTagGroup)}`;
   }
 
+  if (options?.viewState?.collapsedGroups?.length) {
+    hash += `&cg=${encodeURIComponent(options.viewState.collapsedGroups.join(','))}`;
+  }
+
   // Encode in both query param AND hash fragment — some share mechanisms
   // strip one or the other (iOS share sheet strips #, AirDrop strips ?)
   return { url: `${baseUrl}?${hash}#${hash}` };
@@ -89,6 +94,9 @@ export function decodeDiagramUrl(hash: string): DecodedDiagramUrl {
     if (key === 'tag' && val) {
       viewState.activeTagGroup = val;
     }
+    if (key === 'cg' && val) {
+      viewState.collapsedGroups = val.split(',').filter(Boolean);
+    }
   }
 
   // Strip 'dgmo=' prefix