@zukhruf/diagram 0.3.33 → 0.3.34

package/dist/lib/compiler/diagram-compile.js

@@ -1,7 +1,6 @@
 import { Children, Fragment, isValidElement } from 'react';
-import { parseEndpointRef } from "../model/endpoint-ref.js";
 export const DIAGRAM_PRIMITIVE = Symbol.for('@zukhruf/diagram/primitive');
-const PRIMITIVE_KINDS = ['node', 'box', 'card', 'port', 'label', 'float', 'phantom', 'appliance', 'connector', 'junction', 'edge', 'arrow', 'wire', 'group', 'text', 'line', 'lane', 'signal', 'frame', 'marker', 'guide', 'waypoint', 'entry', 'exit', 'content'];
+const PRIMITIVE_KINDS = ['node', 'box', 'card', 'port', 'label', 'float', 'appliance', 'connector', 'junction', 'edge', 'arrow', 'wire', 'group', 'note', 'line', 'lane', 'signal', 'frame', 'marker', 'content'];
 export function primitive(kind) {
   return Object.assign(() => null, {
     [DIAGRAM_PRIMITIVE]: kind
@@ -24,24 +23,20 @@ function emptyCompileResult() {
     nodes: [],
     edges: [],
     groups: [],
-    annotations: [],
     lanes: [],
     signals: [],
-    frames: [],
-    guides: []
+    frames: []
   };
 }
 function mergeCompileResults(target, source) {
   target.nodes.push(...source.nodes);
   target.edges.push(...source.edges);
   target.groups.push(...source.groups);
-  target.annotations.push(...source.annotations);
   target.lanes.push(...source.lanes);
   target.signals.push(...source.signals);
   target.frames.push(...source.frames);
-  target.guides.push(...source.guides);
 }
-export function compileGraph(children, layout) {
+export function compileGraph(children) {
   const result = compileChildren(children, {});
   if (result.lanes.length > 0 || result.signals.length > 0 || result.frames.length > 0) {
     throw new Error('A graph diagram cannot contain Diagram.Lane, Diagram.Signal or Diagram.Frame; draw those with SvgTimelineDiagram.');
@@ -49,15 +44,12 @@ export function compileGraph(children, layout) {
   return {
     nodes: result.nodes,
     edges: result.edges,
-    groups: result.groups,
-    annotations: result.annotations,
-    guides: result.guides,
-    layout
+    groups: result.groups
   };
 }
 export function compileTimeline(children) {
   const result = compileChildren(children, {});
-  if (result.nodes.length > 0 || result.edges.length > 0 || result.groups.length > 0 || result.annotations.length > 0 || result.guides.length > 0) {
+  if (result.nodes.length > 0 || result.edges.length > 0 || result.groups.length > 0) {
     throw new Error('A timeline diagram only accepts Diagram.Lane, Diagram.Signal and Diagram.Frame; draw other primitives with SvgGraphDiagram or CanvasGraphDiagram.');
   }
   return {
@@ -99,10 +91,6 @@ function compileChildren(children, context) {
       mergeCompileResults(result, group.children);
       return;
     }
-    if (kind === 'text') {
-      result.annotations.push(compileText(child));
-      return;
-    }
     if (kind === 'lane') {
       result.lanes.push(compileLane(child));
       return;
@@ -118,10 +106,6 @@ function compileChildren(children, context) {
       result.frames.push(compileFrame(child));
       return;
     }
-    if (kind === 'guide') {
-      result.guides.push(requirePrimitiveProps(child));
-      return;
-    }
     throw new Error(`<Diagram.${kind}> cannot be a direct child of Diagram.`);
   });
   return result;
@@ -130,7 +114,7 @@ function isTextNode(child) {
   return typeof child === 'string' || typeof child === 'number';
 }
 function isNodeKind(kind) {
-  return kind === 'node' || kind === 'box' || kind === 'card' || kind === 'port' || kind === 'label' || kind === 'float' || kind === 'phantom' || kind === 'appliance' || kind === 'connector' || kind === 'junction' || kind === 'marker';
+  return kind === 'node' || kind === 'box' || kind === 'card' || kind === 'port' || kind === 'label' || kind === 'float' || kind === 'note' || kind === 'appliance' || kind === 'connector' || kind === 'junction' || kind === 'marker';
 }
 function isEdgeKind(kind) {
   return kind === 'edge' || kind === 'arrow' || kind === 'wire';
@@ -144,182 +128,97 @@ function requirePrimitiveProps(child) {
   return child.props;
 }
 function compileNode(kind, child, context) {
-  if (kind === 'phantom') {
-    const props = requirePrimitiveProps(child);
-    const label = compileLabelChildren(props.children, 'Diagram.Phantom');
-    const hasLabel = label.length > 0;
+  const group = context.groupId === undefined ? {} : {
+    group: context.groupId
+  };
+  if (kind === 'note') {
+    const {
+      children,
+      ...props
+    } = requirePrimitiveProps(child);
     return {
-      id: props.id,
-      label: hasLabel ? label : '',
-      row: props.row,
-      col: props.col,
-      width: props.width ?? 1,
-      height: props.height ?? 1,
-      ...(props.group ?? context.groupId ? {
-        group: props.group ?? context.groupId
-      } : {}),
-      frame: 'none',
-      hidden: props.hidden ?? !hasLabel,
-      ...(props.fontSize ? {
-        fontSize: props.fontSize
-      } : {}),
-      ...(props.fontWeight ? {
-        fontWeight: props.fontWeight
-      } : {}),
-      ...(props.textColor ? {
-        textColor: props.textColor
-      } : {}),
-      ...(props.accent !== undefined ? {
-        accent: props.accent
-      } : {}),
-      ...(props.textAlign ? {
-        textAlign: props.textAlign
-      } : {}),
-      ...(props.connectable !== undefined ? {
-        connectable: props.connectable
-      } : {})
+      ...props,
+      kind: 'note',
+      label: nodeLabel(children, 'Diagram.Note'),
+      ...group,
+      frame: 'none'
     };
   }
   if (kind === 'junction') {
-    const props = requirePrimitiveProps(child);
-    const label = compileLabelChildren(props.children, 'Diagram.Junction');
-    const group = props.group ?? context.groupId;
+    const {
+      children,
+      ...props
+    } = requirePrimitiveProps(child);
     return {
-      id: props.id,
+      ...props,
       kind: 'junction',
-      label: label.length > 0 ? label : '',
-      row: props.row,
-      col: props.col,
-      width: props.width ?? 16,
-      height: props.height ?? 16,
-      ...(group ? {
-        group
-      } : {}),
-      frame: 'none',
-      connectable: true,
-      hidden: props.hidden,
-      accent: props.accent,
-      tone: props.tone,
-      fontSize: props.fontSize,
-      fontWeight: props.fontWeight,
-      textColor: props.textColor,
-      caption: props.caption,
-      captionSide: props.captionSide,
-      captionOffset: props.captionOffset,
-      captionColor: props.captionColor,
-      captionFontSize: props.captionFontSize,
-      captionFontWeight: props.captionFontWeight
+      label: nodeLabel(children, 'Diagram.Junction'),
+      ...group,
+      frame: 'none'
     };
   }
   if (kind === 'connector') {
-    const props = requirePrimitiveProps(child);
-    const label = compileLabelChildren(props.children, 'Diagram.Connector');
-    const group = props.group ?? context.groupId;
+    const {
+      children,
+      ...props
+    } = requirePrimitiveProps(child);
     return {
-      id: props.id,
+      ...props,
       kind: 'connector',
-      label: label.length > 0 ? label : '',
-      row: props.row,
-      col: props.col,
-      colSpan: props.colSpan,
-      width: props.width ?? 148,
-      height: props.height ?? 40,
-      ...(group ? {
-        group
-      } : {}),
-      frame: 'solid',
-      connectable: true,
-      rx: props.rx ?? 10,
-      accent: props.accent,
-      tone: props.tone,
-      texture: props.texture,
-      icon: props.icon,
-      iconSize: props.iconSize,
-      ports: props.ports,
-      fontSize: props.fontSize,
-      fontWeight: props.fontWeight,
-      textColor: props.textColor,
-      caption: props.caption,
-      captionSide: props.captionSide,
-      captionOffset: props.captionOffset,
-      captionColor: props.captionColor,
-      captionFontSize: props.captionFontSize,
-      captionFontWeight: props.captionFontWeight
+      label: nodeLabel(children, 'Diagram.Connector'),
+      ...group,
+      frame: 'solid'
     };
   }
   if (kind === 'appliance') {
-    const props = requirePrimitiveProps(child);
-    const label = compileLabelChildren(props.children, 'Diagram.Appliance');
-    const group = props.group ?? context.groupId;
+    const {
+      children,
+      ...props
+    } = requirePrimitiveProps(child);
     return {
-      id: props.id,
+      ...props,
       kind: 'appliance',
-      label: label.length > 0 ? label : '',
-      row: props.row,
-      col: props.col,
-      width: props.width ?? 112,
-      height: props.height ?? 72,
-      ...(group ? {
-        group
-      } : {}),
-      frame: 'none',
-      connectable: true,
-      accent: props.accent,
-      tone: props.tone,
-      texture: props.texture,
-      ports: props.ports,
-      fontSize: props.fontSize,
-      fontWeight: props.fontWeight,
-      textColor: props.textColor,
-      caption: props.caption,
-      captionSide: props.captionSide,
-      captionOffset: props.captionOffset,
-      captionColor: props.captionColor,
-      captionFontSize: props.captionFontSize,
-      captionFontWeight: props.captionFontWeight,
-      appliancePorts: props.appliancePorts,
-      antenna: props.antenna,
-      slant: props.slant
+      label: nodeLabel(children, 'Diagram.Appliance'),
+      ...group,
+      frame: 'none'
     };
   }
-  const props = requirePrimitiveProps(child);
   const {
-    children: _children,
-    ...nodeProps
-  } = props;
+    children,
+    ...props
+  } = requirePrimitiveProps(child);
   const {
     labelChildren,
     content
-  } = splitNodeContent(props.children, kind);
-  const label = compileLabelChildren(labelChildren, `Diagram.${kind}`);
-  const group = nodeProps.group ?? context.groupId;
+  } = splitNodeContent(children, kind);
   return {
-    ...nodeProps,
-    label: label.length > 0 ? label : '',
-    ...(content.length > 0 ? {
-      content: content[0]
+    ...props,
+    label: nodeLabel(labelChildren, `Diagram.${kind}`),
+    ...(content ? {
+      content
     } : {}),
     ...(kind === 'marker' ? {
-      kind: 'marker',
-      width: nodeProps.width ?? 72,
-      height: nodeProps.height ?? 76
+      kind: 'marker'
     } : {}),
-    ...(group ? {
-      group
+    ...group,
+    frame: nodeFrame(kind, props.frame),
+    ...(kind === 'card' ? {
+      textAlign: 'start'
     } : {}),
-    frame: nodeFrame(kind, nodeProps.frame),
-    textAlign: kind === 'card' ? nodeProps.textAlign ?? 'start' : nodeProps.textAlign,
-    hidden: kind === 'marker' ? false : nodeProps.hidden,
-    connectable: kind === 'float' ? false : nodeProps.connectable,
-    ...(kind === 'marker' ? {
-      frame: nodeProps.frame ?? 'none'
+    hidden: kind === 'marker' ? false : props.hidden,
+    ...(kind === 'float' ? {
+      connectable: false
     } : {})
   };
 }
+function nodeLabel(children, owner) {
+  const label = compileLabelChildren(children, owner);
+  return label.length > 0 ? label : '';
+}
 const CONTENT_HOSTS = new Set(['node', 'box', 'card']);
 function splitNodeContent(children, kind) {
   const labelChildren = [];
-  const content = [];
+  let content;
   Children.forEach(children, child => {
     if (!isValidElement(child) || primitiveKind(child) !== 'content') {
       labelChildren.push(child);
@@ -328,10 +227,17 @@ function splitNodeContent(children, kind) {
     if (!CONTENT_HOSTS.has(kind)) {
       throw new Error(`Diagram.Content goes inside Diagram.Box, Diagram.Card or Diagram.Node, not Diagram.${kind}.`);
     }
-    if (content.length > 0) {
+    if (content) {
       throw new Error(`Diagram.${kind} accepts one Diagram.Content.`);
     }
-    content.push(requirePrimitiveProps(child).children);
+    const {
+      children: element,
+      size
+    } = requirePrimitiveProps(child);
+    content = {
+      element,
+      size
+    };
   });
   return {
     labelChildren,
@@ -348,51 +254,12 @@ function nodeFrame(kind, explicit) {
   return 'solid';
 }
 function compileEdge(kind, child) {
-  const props = requirePrimitiveProps(child);
   const {
-    children: _children,
+    children,
     badgeLabel,
     ...edgeProps
-  } = props;
-  const lines = [];
-  const waypoints = [...(props.waypoints ?? [])];
-  let entrySide = props.entrySide;
-  let exitSide = props.exitSide;
-  let entryGap = props.entryGap;
-  Children.forEach(props.children, edgeChild => {
-    if (edgeChild === null || edgeChild === undefined || typeof edgeChild === 'boolean') return;
-    if (isTextNode(edgeChild)) {
-      const text = String(edgeChild).trim();
-      if (text.length > 0) lines.push(text);
-      return;
-    }
-    if (!isValidElement(edgeChild)) {
-      throw new Error('Diagram edges only accept text, Line, Entry, Exit, and Waypoint children.');
-    }
-    if (edgeChild.type === Fragment) {
-      throw new Error('Diagram edges do not accept fragments. Use direct Line/Entry/Exit/Waypoint children.');
-    }
-    const edgeChildKind = primitiveKind(edgeChild);
-    if (edgeChildKind === 'line') {
-      lines.push(lineText(edgeChild));
-      return;
-    }
-    if (edgeChildKind === 'entry') {
-      const entry = requirePrimitiveProps(edgeChild);
-      entrySide = entry.side;
-      entryGap = entry.gap ?? entryGap;
-      return;
-    }
-    if (edgeChildKind === 'exit') {
-      exitSide = requirePrimitiveProps(edgeChild).side;
-      return;
-    }
-    if (edgeChildKind === 'waypoint') {
-      waypoints.push(requirePrimitiveProps(edgeChild));
-      return;
-    }
-    throw new Error(`Diagram edge cannot contain <Diagram.${edgeChildKind ?? 'Unknown'}>.`);
-  });
+  } = requirePrimitiveProps(child);
+  const lines = compileStringLines(children, `Diagram.${kind}`);
   return {
     ...edgeProps,
     ...(lines.length > 0 ? {
@@ -401,18 +268,6 @@ function compileEdge(kind, child) {
     ...(badgeLabel !== undefined ? {
       badgeLabel: normalizeStringLines(badgeLabel)
     } : {}),
-    ...(waypoints.length > 0 ? {
-      waypoints
-    } : {}),
-    ...(entrySide ? {
-      entrySide
-    } : {}),
-    ...(exitSide ? {
-      exitSide
-    } : {}),
-    ...(entryGap !== undefined ? {
-      entryGap
-    } : {}),
     headless: kind === 'wire' ? true : edgeProps.headless
   };
 }
@@ -420,39 +275,20 @@ function normalizeStringLines(value) {
   return (Array.isArray(value) ? value : [value]).map(line => line.trim()).filter(Boolean);
 }
 function compileGroup(child, context) {
-  const props = requirePrimitiveProps(child);
-  const children = compileChildren(props.children, {
+  const {
+    children: groupChildren,
+    label,
+    ...props
+  } = requirePrimitiveProps(child);
+  const children = compileChildren(groupChildren, {
     ...context,
     groupId: props.id
   });
-  const bounds = props.rowStart !== undefined && props.rowEnd !== undefined && props.colStart !== undefined && props.colEnd !== undefined ? {
-    rowStart: props.rowStart,
-    rowEnd: props.rowEnd,
-    colStart: props.colStart,
-    colEnd: props.colEnd
-  } : inferGroupBounds(props.id, children.nodes, children.groups);
   return {
     group: {
-      id: props.id,
-      label: normalizeGroupLabel(props.label),
-      labelAlign: props.labelAlign,
-      labelSide: props.labelSide,
-      accent: props.accent,
-      tone: props.tone,
-      texture: props.texture,
-      rx: props.rx,
-      frame: props.frame,
-      fill: props.fill,
-      ports: props.ports,
-      parent: context.groupId,
-      tight: props.tight,
-      tightX: props.tightX,
-      tightY: props.tightY,
-      titleBand: props.titleBand,
-      titleGap: props.titleGap,
-      padding: props.padding,
-      dividers: props.dividers,
-      bounds
+      ...props,
+      label: normalizeGroupLabel(label),
+      parent: context.groupId
     },
     children
   };
@@ -463,54 +299,6 @@ function normalizeGroupLabel(label) {
   }
   return label?.trim() ?? '';
 }
-function inferGroupBounds(groupId, nodes, groups = []) {
-  const grouped = nodes.filter(node => node.group === groupId);
-  const childGroups = groups.filter(group => group.parent === groupId);
-  if (grouped.length === 0 && childGroups.length === 0) {
-    throw new Error(`Diagram.Group "${groupId}" needs bounds or direct node/group children so bounds can be inferred.`);
-  }
-  const bounds = emptyGroupBounds();
-  for (const node of grouped) {
-    if (node.row === undefined || node.col === undefined) return undefined;
-    includeGroupBounds(bounds, {
-      rowStart: node.row,
-      rowEnd: node.row,
-      colStart: node.col,
-      colEnd: node.col + (node.colSpan ?? 1) - 1
-    });
-  }
-  for (const group of childGroups) {
-    if (!group.bounds) return undefined;
-    includeGroupBounds(bounds, group.bounds);
-  }
-  return bounds;
-}
-function emptyGroupBounds() {
-  return {
-    rowStart: Number.POSITIVE_INFINITY,
-    rowEnd: Number.NEGATIVE_INFINITY,
-    colStart: Number.POSITIVE_INFINITY,
-    colEnd: Number.NEGATIVE_INFINITY
-  };
-}
-function includeGroupBounds(target, source) {
-  target.rowStart = Math.min(target.rowStart, source.rowStart);
-  target.rowEnd = Math.max(target.rowEnd, source.rowEnd);
-  target.colStart = Math.min(target.colStart, source.colStart);
-  target.colEnd = Math.max(target.colEnd, source.colEnd);
-}
-function compileText(child) {
-  const props = requirePrimitiveProps(child);
-  const {
-    children: _children,
-    ...textProps
-  } = props;
-  const lines = compileStringLines(props.children, 'Diagram.Text');
-  return {
-    ...textProps,
-    text: lines.length > 0 ? lines : ['']
-  };
-}
 function compileLane(child) {
   const props = requirePrimitiveProps(child);
   return {
@@ -619,79 +407,6 @@ function lineText(child) {
     return String(part).trim();
   }).filter(Boolean).join('');
 }
-export function validateGraph(ir) {
-  const nodeIds = new Set();
-  for (const node of ir.nodes) {
-    if (nodeIds.has(node.id)) throw new Error(`Duplicate Diagram node id "${node.id}".`);
-    nodeIds.add(node.id);
-  }
-  const groupIds = new Set();
-  for (const group of ir.groups) {
-    if (groupIds.has(group.id)) throw new Error(`Duplicate Diagram group id "${group.id}".`);
-    groupIds.add(group.id);
-  }
-  const guideIds = new Set();
-  for (const guide of ir.guides) {
-    if (!guide.id) continue;
-    if (guideIds.has(guide.id)) throw new Error(`Duplicate Diagram guide id "${guide.id}".`);
-    guideIds.add(guide.id);
-  }
-  const nodesById = new Map(ir.nodes.map(node => [node.id, node]));
-  const groupsById = new Map(ir.groups.map(group => [group.id, group]));
-  for (const node of ir.nodes) {
-    if (groupsById.has(node.id)) {
-      throw new Error(`Diagram node id "${node.id}" conflicts with a Diagram group id. Node and group endpoint ids must be unique.`);
-    }
-    if (node.bodyFontSize !== undefined && (!Number.isFinite(node.bodyFontSize) || node.bodyFontSize <= 0)) {
-      throw new Error(`Diagram node "${node.id}" bodyFontSize must be a positive finite number, got ${node.bodyFontSize}.`);
-    }
-    if (node.bodyLineGap !== undefined && (!Number.isFinite(node.bodyLineGap) || node.bodyLineGap < 0)) {
-      throw new Error(`Diagram node "${node.id}" bodyLineGap must be a non-negative finite number, got ${node.bodyLineGap}.`);
-    }
-  }
-  for (const edge of ir.edges) {
-    if (edge.route !== undefined && edge.route !== 'orthogonal' && edge.route !== 'straight') {
-      throw new Error(`Diagram edge route must be "orthogonal" or "straight", got "${edge.route}".`);
-    }
-    if (edge.labelLineGap !== undefined && (!Number.isFinite(edge.labelLineGap) || edge.labelLineGap < 0)) {
-      throw new Error(`Diagram edge labelLineGap must be a non-negative finite number, got ${edge.labelLineGap}.`);
-    }
-    if (edge.exitOffset !== undefined && !Number.isFinite(edge.exitOffset)) {
-      throw new Error(`Diagram edge exitOffset must be a finite number, got ${edge.exitOffset}.`);
-    }
-    if (edge.entryOffset !== undefined && !Number.isFinite(edge.entryOffset)) {
-      throw new Error(`Diagram edge entryOffset must be a finite number, got ${edge.entryOffset}.`);
-    }
-    if (edge.stubDistance !== undefined && (!Number.isFinite(edge.stubDistance) || edge.stubDistance < 0)) {
-      throw new Error(`Diagram edge stubDistance must be a non-negative finite number, got ${edge.stubDistance}.`);
-    }
-    const {
-      nodeId: sourceNodeId,
-      portId: sourcePortId
-    } = parseEndpointRef(edge.from);
-    const {
-      nodeId: targetNodeId,
-      portId: targetPortId
-    } = parseEndpointRef(edge.to);
-    if (!nodeIds.has(sourceNodeId) && !groupsById.has(sourceNodeId)) {
-      throw new Error(`Diagram edge ${edge.from}->${edge.to} references missing source "${sourceNodeId}".`);
-    }
-    if (!nodeIds.has(targetNodeId) && !groupsById.has(targetNodeId)) {
-      throw new Error(`Diagram edge ${edge.from}->${edge.to} references missing target "${targetNodeId}".`);
-    }
-    if (sourcePortId && !(nodesById.get(sourceNodeId)?.ports?.some(port => port.id === sourcePortId) || groupsById.get(sourceNodeId)?.ports?.some(port => port.id === sourcePortId))) {
-      throw new Error(`Diagram edge ${edge.from}->${edge.to} references missing source port "${sourcePortId}" on "${sourceNodeId}".`);
-    }
-    if (targetPortId && !(nodesById.get(targetNodeId)?.ports?.some(port => port.id === targetPortId) || groupsById.get(targetNodeId)?.ports?.some(port => port.id === targetPortId))) {
-      throw new Error(`Diagram edge ${edge.from}->${edge.to} references missing target port "${targetPortId}" on "${targetNodeId}".`);
-    }
-  }
-  for (const annotation of ir.annotations) {
-    if (annotation.lineGap !== undefined && (!Number.isFinite(annotation.lineGap) || annotation.lineGap < 0)) {
-      throw new Error(`Diagram.Text lineGap must be a non-negative finite number, got ${annotation.lineGap}.`);
-    }
-  }
-}
 export function validateTimeline(ir) {
   const laneIds = new Set();
   for (const lane of ir.lanes) {