@taylorwong/ichartjs 2.0.6 → 2.0.8

package/src/diagram-interaction.mjs

@@ -4,18 +4,24 @@
  */
 import { buildScene } from './charts.mjs';
 
-export const isDiagram = chart => ['flow', 'swimlane'].includes(chart.spec.type);
+export const isDiagram = chart => ['flow', 'swimlane', 'architecture', 'mindmap'].includes(chart.spec.type);
 
 function focusableNodes(chart) {
   const items = [];
   chart.model.scene.walk(node => {
     if (!node.interactive) return;
-    if (!/^node-|^group-|^port-/.test(node.id)) return;
+    if (!/^node-|^group-|^port-|^edge-/.test(node.id) || node.dataRef?.edgeHandle) return;
     items.push(node);
   });
   return items;
 }
 
+function edgeNode(chart, edgeId) {
+  let found = null;
+  chart.model.scene.walk(node => { if (!found && node.dataRef?.edgeId === edgeId && !node.dataRef?.edgeHandle) found = node; });
+  return found;
+}
+
 function center(node) {
   if (node.geometry?.cx != null && node.geometry?.cy != null) return { x: node.geometry.cx, y: node.geometry.cy };
   return { x: node.bounds?.x + node.bounds?.width / 2 || node.geometry?.x || 0, y: node.bounds?.y + node.bounds?.height / 2 || node.geometry?.y || 0 };
@@ -32,15 +38,31 @@ function paintConnectPreview(chart, start, end) {
 }
 
 export function paintSelection(chart) {
-  for (const [id] of chart._selected) {
-    const node = chart.model.scene.find(id);
-    if (node) { node.selected = true; chart._selected.set(id, node.dataRef); }
-    else chart._selected.delete(id);
+  const selected = new Map();
+  for (const [id, reference] of chart._selected) {
+    const node = reference?.edgeId ? edgeNode(chart, reference.edgeId) : chart.model.scene.find(id);
+    if (node) { node.selected = true; selected.set(node.id, node.dataRef); }
   }
+  chart._selected = selected;
+  const selectedEdges = [];
   chart.model.scene.walk(node => {
     if (node.id === chart._diagramFocusTarget) node.highlighted = true;
     if (node.selected && node.id.startsWith('node-')) { node.style.stroke = '#f59e0b'; node.style.strokeWidth = 3; }
     if (node.selected && node.id.startsWith('group-')) { node.style.stroke = '#2563eb'; node.style.strokeWidth = 2; }
+    if (node.selected && node.dataRef?.edgeId) { node.style.stroke = chart.spec.theme?.selection || '#2563eb'; node.style.strokeWidth = Math.max(3, Number(node.style.strokeWidth) || 1); selectedEdges.push(node); }
+  });
+  if (chart.spec.editing?.enabled !== true || chart.spec.interaction?.edgeDrag !== true) return;
+  selectedEdges.forEach(edge => {
+    if (edge.geometry?.curve === 'cubic') return;
+    const points = edge.geometry?.points || [], edgeId = edge.dataRef.edgeId;
+    points.slice(1, -1).forEach((point, offset) => chart.model.scene.add({ id: `edge-handle-waypoint-${edge.id}-${offset + 1}`, type: 'circle', geometry: { cx: point.x, cy: point.y, r: 5 }, bounds: { x: point.x - 8, y: point.y - 8, width: 16, height: 16 }, style: { fill: chart.spec.theme?.background || '#fff', stroke: chart.spec.theme?.selection || '#2563eb', strokeWidth: 2 }, dataRef: { edgeId, edgeHandle: 'waypoint', pointIndex: offset + 1, routePoints: points.map(value => ({ x: value.x, y: value.y })) }, interactive: true, zIndex: 102 }));
+    points.forEach((point, index) => {
+      if (index === 0 || index >= points.length - 2) return;
+      const next = points[index + 1], orthogonal = point.x === next.x || point.y === next.y;
+      if (!orthogonal) return;
+      const middle = { x: (point.x + next.x) / 2, y: (point.y + next.y) / 2 };
+      chart.model.scene.add({ id: `edge-handle-segment-${edge.id}-${index}`, type: 'rect', geometry: { x: middle.x - 5, y: middle.y - 5, width: 10, height: 10 }, bounds: { x: middle.x - 8, y: middle.y - 8, width: 16, height: 16 }, style: { fill: chart.spec.theme?.selection || '#2563eb', stroke: chart.spec.theme?.background || '#fff', strokeWidth: 1 }, dataRef: { edgeId, edgeHandle: 'segment', segmentIndex: index, routePoints: points.map(value => ({ x: value.x, y: value.y })) }, interactive: true, zIndex: 103 });
+    });
   });
 }
 
@@ -55,20 +77,21 @@ export function diagramPointer(chart, phase, event, target) {
     target.focus?.({ preventScroll: true });
     target.setPointerCapture?.(event.pointerId);
     const hit = chart.model.scene.hit(point.x, point.y), additive = Boolean(event.shiftKey || event.ctrlKey || event.metaKey);
-    const nodeId = hit?.dataRef?.nodeId, groupId = hit?.dataRef?.groupId, portId = hit?.dataRef?.portId;
-    if (groupId && !nodeId) chart.selectGroup(groupId, { additive });
+    const nodeId = hit?.dataRef?.nodeId, groupId = hit?.dataRef?.groupId, portId = hit?.dataRef?.portId, edgeId = hit?.dataRef?.edgeId, edgeHandle = hit?.dataRef?.edgeHandle;
+    if (edgeId) chart.selectEdges([edgeId], { additive: edgeHandle ? true : additive });
+    else if (groupId && !nodeId) chart.selectGroup(groupId, { additive });
     else if (nodeId) {
       if (additive && chart.getSelectedNodeIds().includes(nodeId)) chart.selectNodes(chart.getSelectedNodeIds().filter(id => id !== nodeId));
       else if (additive || !chart.getSelectedNodeIds().includes(nodeId)) chart.selectNodes([nodeId], { additive });
     } else if (!additive) chart.clearSelection();
-    const mode = portId && chart.spec.editing?.enabled ? 'connect' : nodeId && chart.spec.interaction?.drag && chart.spec.editing?.enabled ? 'nodes' : !hit && (additive || chart.spec.interaction?.brush) ? 'box' : !hit && chart.spec.interaction?.pan ? 'pan' : groupId ? 'group' : 'select';
+    const mode = edgeHandle && chart.spec.editing?.enabled && chart.spec.interaction?.edgeDrag ? 'edge-handle' : portId && chart.spec.editing?.enabled && chart.spec.interaction?.portConnect ? 'connect' : nodeId && chart.spec.interaction?.drag && chart.spec.editing?.enabled ? 'nodes' : !hit && (additive || chart.spec.interaction?.brush) ? 'box' : !hit && chart.spec.interaction?.pan ? 'pan' : groupId ? 'group' : 'select';
     const view = chart.model.state.view, positions = {};
     chart.getSelectedNodeIds().forEach(id => {
       const geometry = chart.model.scene.find(`node-${id}`)?.geometry;
       if (!geometry) return;
       positions[id] = { x: (geometry.x - view.offsetX) / view.scale, y: (geometry.y - view.offsetY) / view.scale };
     });
-    chart._diagramGesture = { mode, point, previous: point, positions, view: { ...view }, pointerId: event.pointerId, revision: chart._revision, additive, selected: chart.getSelectedNodeIds(), moved: false, hitId: hit?.id, groupId, nodeId, portId };
+    chart._diagramGesture = { mode, point, previous: point, positions, view: { ...view }, pointerId: event.pointerId, revision: chart._revision, additive, selected: chart.getSelectedNodeIds(), moved: false, hitId: hit?.id, groupId, nodeId, portId, edgeId, edgeHandle, pointIndex: hit?.dataRef?.pointIndex, segmentIndex: hit?.dataRef?.segmentIndex, routePoints: hit?.dataRef?.routePoints?.map(value => ({ ...value })) };
     if (mode === 'connect' && hit) paintConnectPreview(chart, center(hit), point);
     return true;
   }
@@ -84,6 +107,20 @@ export function diagramPointer(chart, phase, event, target) {
         paintConnectPreview(chart, center(source), point);
         chart.emit('connectionpreview', { chart, source: source.dataRef, coordinate: point });
       }
+    } else if (gesture.mode === 'edge-handle') {
+      const grid = chart.spec.diagram?.grid ?? 8, snapped = chart.spec.diagram?.snap === false || event.altKey ? point : { x: Math.round(point.x / grid) * grid, y: Math.round(point.y / grid) * grid }, routePoints = gesture.routePoints.map(value => ({ ...value }));
+      if (gesture.edgeHandle === 'waypoint') routePoints[gesture.pointIndex] = snapped;
+      else {
+        const first = routePoints[gesture.segmentIndex], second = routePoints[gesture.segmentIndex + 1];
+        if (first.x === second.x) first.x = second.x = snapped.x;
+        else first.y = second.y = snapped.y;
+      }
+      gesture.waypoints = routePoints.slice(1, -1);
+      const edges = chart.getDiagramEdges().map((edge, index) => (edge.id || `edge-${index}`) === gesture.edgeId ? { ...edge, waypoints: gesture.waypoints } : edge);
+      chart.model = buildScene({ ...chart.spec, edges });
+      paintSelection(chart);
+      if (chart.renderer.container) chart.renderer.render(chart.model.scene);
+      chart.emit('drag', { chart, edgeId: gesture.edgeId, waypoints: gesture.waypoints, coordinate: point });
     } else if (gesture.mode === 'nodes') {
       let delta = { x: (point.x - gesture.point.x) / gesture.view.scale, y: (point.y - gesture.point.y) / gesture.view.scale };
       const anchor = Object.values(gesture.positions)[0], grid = chart.spec.diagram?.grid ?? 8;
@@ -113,6 +150,10 @@ export function diagramPointer(chart, phase, event, target) {
     const preview = chart.previewEdit({ type: 'layout-edit', reason: 'Drag diagram selection', operations: gesture.operations });
     if (preview.requiresConfirmation) chart.emit('editrequest', { chart, preview, source: 'pointer' });
     else chart.applyEdit(preview.command, { preview, source: 'pointer', confirmed: true });
+  } else if (!cancelled && gesture.moved && gesture.mode === 'edge-handle' && gesture.waypoints) {
+    const preview = chart.previewEdit({ type: 'layout-edit', reason: 'Drag diagram edge handle', operations: [{ op: 'updateEdge', edgeId: gesture.edgeId, changes: { waypoints: gesture.waypoints } }] });
+    if (preview.requiresConfirmation) chart.emit('editrequest', { chart, preview, source: 'pointer' });
+    else chart.applyEdit(preview.command, { preview, source: 'pointer', confirmed: true });
   } else if (!cancelled && gesture.moved && gesture.mode === 'box') {
     chart.selectBox(gesture.point, point);
     if (gesture.additive) chart.selectNodes(gesture.selected, { additive: true });
@@ -145,6 +186,7 @@ export function diagramKeyboard(chart, event) {
   if (modifier && key === 'v') { chart.pasteSelection({ confirmed: true, source: 'keyboard' }); event.preventDefault(); return true; }
   if (modifier && key === 'd') { chart.duplicateSelection({ confirmed: true, source: 'keyboard' }); event.preventDefault(); return true; }
   if (modifier && ['z', 'y'].includes(key) && chart.spec.editing?.enabled) { chart[key === 'y' || event.shiftKey ? 'redo' : 'undo'](); event.preventDefault(); return true; }
+  if (['delete', 'backspace'].includes(key) && chart.spec.editing?.enabled && chart.spec.editing?.allowDelete && chart.getSelectedEdgeIds().length) { chart.deleteSelectedEdges({ confirmed: true, source: 'keyboard' }); event.preventDefault(); return true; }
   if (['tab', 'enter', ' '].includes(key)) {
     const step = event.shiftKey ? -1 : 1;
     if (!nodes.length) return true;
@@ -154,13 +196,14 @@ export function diagramKeyboard(chart, event) {
     if (target?.id?.startsWith('node-')) chart.selectNodes([target.dataRef.nodeId], { additive: key === ' ' && event.shiftKey });
     else if (target?.id?.startsWith('group-')) chart.selectGroup(target.dataRef.groupId, { additive: key === ' ' && event.shiftKey });
     else if (target?.id?.startsWith('port-') && target.dataRef?.nodeId) chart.selectNodes([target.dataRef.nodeId], { additive: key === ' ' && event.shiftKey });
+    else if (target?.dataRef?.edgeId) chart.selectEdges([target.dataRef.edgeId], { additive: key === ' ' && event.shiftKey });
     if (chart._keyboardConnection && target) {
       const source = chart.model.scene.find(chart._keyboardConnection.targetId);
       if (source) paintConnectPreview(chart, center(source), center(target));
       chart.emit('connectionpreview', { chart, source: chart._keyboardConnection, target: target.dataRef, sourceType: 'keyboard' });
     }
     if (key !== 'tab') {
-      if (target?.id?.startsWith('port-') && chart.spec.editing?.enabled) {
+      if (target?.id?.startsWith('port-') && chart.spec.editing?.enabled && chart.spec.interaction?.portConnect) {
         if (!chart._keyboardConnection) {
           chart._keyboardConnection = { nodeId: target.dataRef.nodeId, portId: target.dataRef.portId, targetId: target.id };
           paintConnectPreview(chart, center(target), center(target));
@@ -189,6 +232,7 @@ export function diagramKeyboard(chart, event) {
     chart._diagramFocusTarget = target.id;
     if (target.id.startsWith('node-')) chart.selectNodes([target.dataRef.nodeId]);
     else if (target.id.startsWith('group-')) chart.selectGroup(target.dataRef.groupId);
+    else if (target.dataRef?.edgeId) chart.selectEdges([target.dataRef.edgeId]);
   }
   event.preventDefault();
   return true;

package/src/diagram.mjs

@@ -3,24 +3,39 @@
  * Supports nodes, edges, lanes, flat groups, ports, and 2D routing modes.
  */
 import { copyJSON } from './schema.mjs';
+import { sampleCubicBezier } from './scene.mjs';
 
 export const diagramLayoutModes = ['manual', 'layered', 'tree', 'radial'];
 export const edgeRoutingModes = ['straight', 'orthogonal', 'curved'];
+export const diagramModes = ['process', 'architecture', 'mindmap'];
 
 const finite = value => typeof value === 'number' && Number.isFinite(value);
 
 export function normalizeDiagramSpec(spec = {}) {
   const data = spec.data || {};
   const nodes = copyJSON(spec.nodes ?? data.nodes ?? data.values ?? []);
-  const edges = copyJSON(spec.edges ?? data.edges ?? []);
+  const explicitEdges = copyJSON(spec.edges ?? data.edges ?? []);
+  const generatedEdges = spec.type === 'mindmap'
+    ? nodes.filter(node => node?.parentId).map((node, index) => ({ id: `parent-${node.parentId}-${node.id || index}`, from: node.parentId, to: node.id, relation: 'parent-child' }))
+    : [];
+  const edgeKeys = new Set(explicitEdges.map(edge => `${edge.from}->${edge.to}`));
+  const edges = [...explicitEdges, ...generatedEdges.filter(edge => !edgeKeys.has(`${edge.from}->${edge.to}`))];
   const lanes = copyJSON(spec.lanes ?? data.lanes ?? []);
-  return { ...copyJSON(spec), nodes, edges, lanes, groups: copyJSON(spec.groups ?? data.groups ?? []), diagram: { layout: spec.diagram?.layout || 'layered', routing: spec.diagram?.routing || 'orthogonal', snap: spec.diagram?.snap ?? true, grid: spec.diagram?.grid ?? 8 } };
+  const mode = spec.diagram?.mode || (spec.type === 'architecture' ? 'architecture' : spec.type === 'mindmap' ? 'mindmap' : 'process');
+  const defaultLayout = mode === 'mindmap' ? 'tree' : 'layered';
+  const defaultRouting = mode === 'mindmap' ? 'curved' : 'orthogonal';
+  return { ...copyJSON(spec), nodes, edges, lanes, layers: copyJSON(spec.layers ?? data.layers ?? []), boundaries: copyJSON(spec.boundaries ?? data.boundaries ?? []), groups: copyJSON(spec.groups ?? data.groups ?? []), diagram: { layout: spec.diagram?.layout || defaultLayout, routing: spec.diagram?.routing || defaultRouting, curveTension: spec.diagram?.curveTension ?? 0.4, mode, snap: spec.diagram?.snap ?? true, grid: spec.diagram?.grid ?? 8 } };
 }
 
 export function validateDiagram(spec = {}) {
-  const errors = [], normalized = normalizeDiagramSpec(spec), nodes = normalized.nodes, edges = normalized.edges, lanes = normalized.lanes;
+  const errors = [], normalized = normalizeDiagramSpec(spec), nodes = normalized.nodes, edges = normalized.edges, lanes = normalized.lanes, layers = normalized.layers;
   const nodeIds = new Set(), laneIds = new Set(lanes.map(lane => lane.id));
   const groupIds = new Set();
+  const layerIds = new Set(layers.map(layer => layer.id));
+  if (!diagramModes.includes(normalized.diagram.mode)) errors.push({ code: 'DIAGRAM_MODE', path: 'diagram.mode', message: `Unsupported diagram mode: ${normalized.diagram.mode}.`, suggestion: `Use ${diagramModes.join(', ')}.` });
+  layers.forEach((layer, index) => {
+    if (typeof layer?.id !== 'string' || !layer.id) errors.push({ code: 'LAYER_ID', path: `layers.${index}.id`, message: 'Architecture layers require stable IDs.' });
+  });
   normalized.groups.forEach((group, index) => {
     if (typeof group?.id !== 'string' || !group.id) errors.push({ code: 'GROUP_ID', path: `groups.${index}.id`, message: 'Groups require stable IDs.' });
     else if (groupIds.has(group.id)) errors.push({ code: 'DUPLICATE_GROUP_ID', path: `groups.${index}.id`, message: 'Group IDs must be unique.' });
@@ -35,6 +50,9 @@ export function validateDiagram(spec = {}) {
     if (node.laneId && lanes.length && !laneIds.has(node.laneId)) errors.push({ code: 'MISSING_LANE', path: `nodes.${index}.laneId`, message: `Unknown lane ID: ${node.laneId}.` });
     if (node.size && (!finite(node.size.width) || !finite(node.size.height) || node.size.width <= 0 || node.size.height <= 0)) errors.push({ code: 'NODE_SIZE', path: `nodes.${index}.size`, message: 'Node sizes must be finite and positive.' });
     if (node.groupId && !groupIds.has(node.groupId)) errors.push({ code: 'MISSING_GROUP', path: `nodes.${index}.groupId`, message: `Unknown group ${node.groupId}.` });
+    if (node.layerId && layers.length && !layerIds.has(node.layerId)) errors.push({ code: 'MISSING_LAYER', path: `nodes.${index}.layerId`, message: `Unknown layer ${node.layerId}.` });
+    if (node.parentId && !nodes.some(parent => parent.id === node.parentId)) errors.push({ code: 'MISSING_PARENT', path: `nodes.${index}.parentId`, message: `Unknown parent node ${node.parentId}.` });
+    if (node.parentId === node.id) errors.push({ code: 'SELF_PARENT', path: `nodes.${index}.parentId`, message: 'Mindmap nodes cannot parent themselves.' });
     if (node.ports && (!Array.isArray(node.ports) || node.ports.some(port => !port || typeof port.id !== 'string' || !port.id))) errors.push({ code: 'NODE_PORTS', path: `nodes.${index}.ports`, message: 'Ports must be an array with stable string IDs.' });
     const portIds = new Set();
     if (Array.isArray(node.ports)) node.ports.forEach((port, portIndex) => {
@@ -56,10 +74,17 @@ export function validateDiagram(spec = {}) {
       const node = nodes.find(item => item.id === edge[key === 'fromPort' ? 'from' : 'to']);
       if (edge[key] && (!Array.isArray(node?.ports) || !node.ports.some(port => port?.id === edge[key]))) errors.push({ code: 'MISSING_PORT', path: `edges.${index}.${key}`, message: `Unknown port ${edge[key]}.` });
     });
+    if (edge.curveTension !== undefined && (!finite(edge.curveTension) || edge.curveTension < 0.2 || edge.curveTension > 0.8)) errors.push({ code: 'EDGE_CURVE_TENSION', path: `edges.${index}.curveTension`, message: 'Edge curve tension must be a finite number between 0.2 and 0.8.' });
+    if (edge.waypoints !== undefined && (!Array.isArray(edge.waypoints) || edge.waypoints.some(point => !point || !finite(point.x) || !finite(point.y)))) errors.push({ code: 'EDGE_WAYPOINTS', path: `edges.${index}.waypoints`, message: 'Edge waypoints must be an array of finite x/y points.' });
   });
   if (!diagramLayoutModes.includes(normalized.diagram.layout)) errors.push({ code: 'LAYOUT_MODE', path: 'diagram.layout', message: `Unsupported layout: ${normalized.diagram.layout}.` });
   if (!finite(normalized.diagram.grid) || normalized.diagram.grid <= 0) errors.push({ code: 'DIAGRAM_GRID', path: 'diagram.grid', message: 'Grid must be a positive finite number.' });
+  if (!finite(normalized.diagram.curveTension) || normalized.diagram.curveTension < 0.2 || normalized.diagram.curveTension > 0.8) errors.push({ code: 'CURVE_TENSION', path: 'diagram.curveTension', message: 'Curve tension must be a finite number between 0.2 and 0.8.' });
   if (!edgeRoutingModes.includes(normalized.diagram.routing)) errors.push({ code: 'ROUTING_MODE', path: 'diagram.routing', message: `Unsupported routing: ${normalized.diagram.routing}.` });
+  if (normalized.diagram.mode === 'mindmap') {
+    const parents = new Map(nodes.map(node => [node.id, node.parentId]).filter(([, parentId]) => parentId));
+    nodes.forEach(node => { const seen = new Set([node.id]); let current = node.parentId; while (current) { if (seen.has(current)) { errors.push({ code: 'MINDMAP_CYCLE', path: `nodes.${node.id}.parentId`, message: 'Mindmap parent relationships must be acyclic.' }); break; } seen.add(current); current = parents.get(current); } });
+  }
   return { valid: errors.length === 0, errors, spec: normalized };
 }
 
@@ -73,6 +98,21 @@ export function diagramGraph(spec) {
 export function layoutDiagram(spec, bounds = { x: 0, y: 0, width: 640, height: 360 }) {
   const graph = diagramGraph(spec), mode = graph.spec.diagram.layout, positions = new Map(), gapX = Math.max(150, bounds.width / Math.max(1, graph.nodes.length)), gapY = 72;
   if (mode === 'manual') graph.nodes.forEach(node => positions.set(node.id, { x: node.position?.x ?? bounds.x, y: node.position?.y ?? bounds.y }));
+  else if (graph.spec.diagram.mode === 'mindmap') {
+    const roots = graph.nodes.filter(node => !graph.incoming.get(node.id).length), children = new Map(graph.nodes.map(node => [node.id, []]));
+    graph.edges.forEach(edge => { if (children.has(edge.from)) children.get(edge.from).push(edge.to); });
+    const ordered = [], visit = (id, depth = 0) => { ordered.push({ id, depth }); (children.get(id) || []).forEach(child => visit(child, depth + 1)); };
+    roots.forEach(root => visit(root.id));
+    graph.nodes.filter(node => !ordered.some(item => item.id === node.id)).forEach(node => visit(node.id));
+    if (mode === 'radial') {
+      const center = { x: bounds.x + bounds.width / 2, y: bounds.y + bounds.height / 2 }, levels = new Map();
+      ordered.forEach(item => { if (!levels.has(item.depth)) levels.set(item.depth, []); levels.get(item.depth).push(item); });
+      levels.forEach((items, depth) => items.forEach((item, index) => { const angle = (index / Math.max(1, items.length)) * Math.PI * 2 - Math.PI / 2, radiusX = depth ? bounds.width * 0.38 * Math.min(1, depth / Math.max(1, levels.size - 1)) : 0, radiusY = depth ? bounds.height * 0.36 * Math.min(1, depth / Math.max(1, levels.size - 1)) : 0; positions.set(item.id, { x: center.x + Math.cos(angle) * radiusX, y: center.y + Math.sin(angle) * radiusY }); }));
+    } else {
+      const levels = new Map(); ordered.forEach(item => { if (!levels.has(item.depth)) levels.set(item.depth, []); levels.get(item.depth).push(item); });
+      levels.forEach((items, depth) => items.forEach((item, index) => positions.set(item.id, { x: bounds.x + depth * Math.max(160, bounds.width / Math.max(1, levels.size)), y: bounds.y + (index + 0.5) * bounds.height / Math.max(1, items.length) })));
+    }
+  }
   else {
     const rank = new Map(graph.nodes.map(node => [node.id, 0])), queue = graph.nodes.filter(node => graph.incoming.get(node.id).length === 0).map(node => node.id);
     for (let index = 0; index < queue.length; index += 1) graph.outgoing.get(queue[index]).forEach(edge => { rank.set(edge.to, Math.max(rank.get(edge.to) || 0, (rank.get(edge.from) || 0) + 1)); if (!queue.includes(edge.to) && graph.incoming.get(edge.to).every(item => queue.includes(item.from))) queue.push(edge.to); });
@@ -85,48 +125,121 @@ export function layoutDiagram(spec, bounds = { x: 0, y: 0, width: 640, height: 3
   return Object.fromEntries(positions);
 }
 
-export function routeEdge(edge, from, to, mode = 'orthogonal') {
-  const pointFor = (box, port, fallbackSide) => {
-    if (!port) return fallbackSide === 'left' ? { x: box.x, y: box.y + box.height / 2 } : { x: box.x + box.width, y: box.y + box.height / 2 };
+function preferredSide(source, target, sourcePoint) {
+  const sourceCenter = { x: source.x + source.width / 2, y: source.y + source.height / 2 };
+  const targetCenter = { x: target.x + target.width / 2, y: target.y + target.height / 2 };
+  const deltaX = targetCenter.x - sourceCenter.x, deltaY = targetCenter.y - sourceCenter.y;
+  if (Math.abs(deltaX) >= Math.abs(deltaY)) return sourcePoint ? (deltaX >= 0 ? 'right' : 'left') : (deltaX >= 0 ? 'left' : 'right');
+  return sourcePoint ? (deltaY >= 0 ? 'bottom' : 'top') : (deltaY >= 0 ? 'top' : 'bottom');
+}
+
+function pointFor(box, port, fallbackSide) {
+  if (!port) {
+    if (fallbackSide === 'left') return { x: box.x, y: box.y + box.height / 2 };
+    if (fallbackSide === 'top') return { x: box.x + box.width / 2, y: box.y };
+    if (fallbackSide === 'bottom') return { x: box.x + box.width / 2, y: box.y + box.height };
+    return { x: box.x + box.width, y: box.y + box.height / 2 };
+  }
     const side = port.side || fallbackSide, offset = Math.max(0, Math.min(1, Number(port.offset ?? 0.5)));
     if (side === 'left') return { x: box.x, y: box.y + box.height * offset };
     if (side === 'top') return { x: box.x + box.width * offset, y: box.y };
     if (side === 'bottom') return { x: box.x + box.width * offset, y: box.y + box.height };
     return { x: box.x + box.width, y: box.y + box.height * offset };
+}
+
+export function diagramConnectionPoints(from, to, fromPort, toPort) {
+  return {
+    start: pointFor(from, fromPort, preferredSide(from, to, true)),
+    end: pointFor(to, toPort, preferredSide(from, to, false))
   };
-  const start = pointFor(from, edge.fromPortDefinition, 'right'), end = pointFor(to, edge.toPortDefinition, 'left');
-  if (mode === 'straight') return [start, end];
-  if (mode === 'curved') { const bend = Math.max(30, Math.abs(end.x - start.x) * 0.4); return [start, { x: start.x + bend, y: start.y }, { x: end.x - bend, y: end.y }, end]; }
+}
+
+export function routeEdgePath(edge, from, to, mode = 'orthogonal') {
+  const initial = diagramConnectionPoints(from, to, edge.fromPortDefinition, edge.toPortDefinition), startSide = edge.fromPortDefinition?.side || preferredSide(from, to, true), endSide = edge.toPortDefinition?.side || preferredSide(from, to, false);
   const obstacles = (edge.obstacles || []).filter(box => box && Number.isFinite(box.x) && Number.isFinite(box.y) && Number.isFinite(box.width) && Number.isFinite(box.height));
-  const padding = Math.max(12, Number(edge.grid) || 8);
-  const segmentIntersects = (first, second, box) => {
+  const compact = points => points.filter((point, index) => !index || point.x !== points[index - 1].x || point.y !== points[index - 1].y);
+  const pointInside = (point, box) => point.x > box.x && point.x < box.x + box.width && point.y > box.y && point.y < box.y + box.height;
+  const orientation = (first, second, third) => Math.sign((second.y - first.y) * (third.x - second.x) - (second.x - first.x) * (third.y - second.y));
+  const intersects = (first, second, third, fourth) => orientation(first, second, third) !== orientation(first, second, fourth) && orientation(third, fourth, first) !== orientation(third, fourth, second);
+  const segmentIntersectsBox = (first, second, box, padding = 0) => {
     const expanded = { x: box.x - padding, y: box.y - padding, width: box.width + padding * 2, height: box.height + padding * 2 };
-    if (first.x === second.x) return first.x >= expanded.x && first.x <= expanded.x + expanded.width && Math.max(first.y, second.y) >= expanded.y && Math.min(first.y, second.y) <= expanded.y + expanded.height;
-    if (first.y === second.y) return first.y >= expanded.y && first.y <= expanded.y + expanded.height && Math.max(first.x, second.x) >= expanded.x && Math.min(first.x, second.x) <= expanded.x + expanded.width;
-    return false;
+    if (pointInside(first, expanded) || pointInside(second, expanded)) return true;
+    const topLeft = { x: expanded.x, y: expanded.y }, topRight = { x: expanded.x + expanded.width, y: expanded.y }, bottomRight = { x: expanded.x + expanded.width, y: expanded.y + expanded.height }, bottomLeft = { x: expanded.x, y: expanded.y + expanded.height };
+    return [[topLeft, topRight], [topRight, bottomRight], [bottomRight, bottomLeft], [bottomLeft, topLeft]].some(([start, end]) => intersects(first, second, start, end));
   };
-  const validPath = points => points.every((point, index) => index === 0 || obstacles.every(box => !segmentIntersects(points[index - 1], point, box)));
-  const snap = value => { const grid = Number(edge.grid) || 8; return Math.round(value / grid) * grid; };
-  const middle = snap((start.x + end.x) / 2), middleY = snap((start.y + end.y) / 2);
-  const candidates = [
-    [start, { x: middle, y: start.y }, { x: middle, y: end.y }, end],
-    [start, { x: start.x, y: middleY }, { x: end.x, y: middleY }, end]
-  ];
-  const xChannels = new Set([start.x, end.x, middle]), yChannels = new Set([start.y, end.y, middleY]);
-  obstacles.forEach(box => {
-    [box.x - padding, box.x + box.width + padding].forEach(x => xChannels.add(snap(x)));
-    [box.y - padding, box.y + box.height + padding].forEach(y => yChannels.add(snap(y)));
-  });
-  xChannels.forEach(x => candidates.push([start, { x, y: start.y }, { x, y: end.y }, end]));
-  yChannels.forEach(y => candidates.push([start, { x: start.x, y }, { x: end.x, y }, end]));
-  xChannels.forEach(x => yChannels.forEach(y => {
-    candidates.push([start, { x, y: start.y }, { x, y }, { x: end.x, y }, end]);
-    candidates.push([start, { x: start.x, y }, { x, y }, { x, y: end.y }, end]);
-  }));
-  const compact = points => points.filter((point, index) => !index || point.x !== points[index - 1].x || point.y !== points[index - 1].y);
-  const length = points => points.slice(1).reduce((sum, point, index) => sum + Math.abs(point.x - points[index].x) + Math.abs(point.y - points[index].y), 0);
-  const valid = candidates.map(compact).filter(validPath).sort((left, right) => length(left) - length(right) || left.length - right.length || JSON.stringify(left).localeCompare(JSON.stringify(right)));
-  return valid[0] || compact(candidates[0]);
+  const leavesSide = (start, next, side) => side === 'left' ? next.x < start.x : side === 'right' ? next.x > start.x : side === 'top' ? next.y < start.y : next.y > start.y;
+  const entersSide = (previous, end, side) => side === 'left' ? previous.x < end.x : side === 'right' ? previous.x > end.x : side === 'top' ? previous.y < end.y : previous.y > end.y;
+  const waypoints = Array.isArray(edge.waypoints) ? edge.waypoints.filter(point => Number.isFinite(point?.x) && Number.isFinite(point?.y)).map(point => ({ x: point.x, y: point.y })) : [];
+  if (waypoints.length) {
+    const manual = compact([initial.start, ...waypoints, initial.end]), padding = Math.max(4, Number(edge.grid) || 8) / 2;
+    if (leavesSide(manual[0], manual[1], startSide) && entersSide(manual.at(-2), manual.at(-1), endSide) && manual.every((point, index) => index === 0 || obstacles.every(box => !segmentIntersectsBox(manual[index - 1], point, box, padding)))) return { points: manual, curve: null };
+  }
+  if (mode === 'straight') return { points: [initial.start, initial.end], curve: null };
+  if (mode === 'curved') {
+    const tension = Math.max(0.2, Math.min(0.8, Number(edge.curveTension) || 0.4)), distance = Math.hypot(initial.end.x - initial.start.x, initial.end.y - initial.start.y), bend = Math.max(24, distance * tension);
+    const direction = side => side === 'left' ? { x: -1, y: 0 } : side === 'right' ? { x: 1, y: 0 } : side === 'top' ? { x: 0, y: -1 } : { x: 0, y: 1 };
+    const startDirection = direction(startSide), endDirection = direction(endSide);
+    const points = [initial.start, { x: initial.start.x + startDirection.x * bend, y: initial.start.y + startDirection.y * bend }, { x: initial.end.x + endDirection.x * bend, y: initial.end.y + endDirection.y * bend }, initial.end];
+    const samples = sampleCubicBezier(points, 24), padding = Math.max(4, Number(edge.grid) || 8) / 2;
+    if (samples.every((point, index) => index === 0 || obstacles.every(box => !segmentIntersectsBox(samples[index - 1], point, box, padding)))) return { points, curve: 'cubic' };
+    return routeEdgePath({ ...edge, waypoints: [] }, from, to, 'orthogonal');
+  }
+  const sidePairs = edge.fromPortDefinition || edge.toPortDefinition ? [[startSide, endSide]] : [[startSide, endSide], ...['right', 'left', 'top', 'bottom'].flatMap(fromSide => ['right', 'left', 'top', 'bottom'].map(toSide => [fromSide, toSide]))].filter((pair, index, pairs) => pairs.findIndex(item => item[0] === pair[0] && item[1] === pair[1]) === index);
+  const routeForSides = (fromSide, toSide) => {
+    const fromPort = edge.fromPortDefinition || { side: fromSide }, toPort = edge.toPortDefinition || { side: toSide }, { start, end } = diagramConnectionPoints(from, to, fromPort, toPort), padding = Math.max(12, Number(edge.grid) || 8);
+    const segmentIntersects = (first, second, box) => {
+      const expanded = { x: box.x - padding, y: box.y - padding, width: box.width + padding * 2, height: box.height + padding * 2 };
+      if (first.x === second.x) return first.x > expanded.x && first.x < expanded.x + expanded.width && Math.max(first.y, second.y) > expanded.y && Math.min(first.y, second.y) < expanded.y + expanded.height;
+      if (first.y === second.y) return first.y > expanded.y && first.y < expanded.y + expanded.height && Math.max(first.x, second.x) > expanded.x && Math.min(first.x, second.x) < expanded.x + expanded.width;
+      return false;
+    };
+    const leavesFromSide = points => {
+      if (points.length < 2) return false;
+      const next = points[1];
+      if (fromSide === 'left') return next.x < start.x && next.y === start.y;
+      if (fromSide === 'top') return next.y < start.y && next.x === start.x;
+      if (fromSide === 'bottom') return next.y > start.y && next.x === start.x;
+      return next.x > start.x && next.y === start.y;
+    };
+    const entersToSide = points => {
+      if (points.length < 2) return false;
+      const previous = points.at(-2);
+      if (toSide === 'left') return previous.x < end.x && previous.y === end.y;
+      if (toSide === 'top') return previous.y < end.y && previous.x === end.x;
+      if (toSide === 'bottom') return previous.y > end.y && previous.x === end.x;
+      return previous.x > end.x && previous.y === end.y;
+    };
+    const connectionAccess = points => leavesFromSide(points) && entersToSide(points);
+    const validPath = points => connectionAccess(points) && points.every((point, index) => index === 0 || obstacles.every(box => !segmentIntersects(points[index - 1], point, box)));
+    const snap = value => { const grid = Number(edge.grid) || 8; return Math.round(value / grid) * grid; };
+    const middle = snap((start.x + end.x) / 2), middleY = snap((start.y + end.y) / 2);
+    const candidates = [
+      [start, { x: middle, y: start.y }, { x: middle, y: end.y }, end],
+      [start, { x: start.x, y: middleY }, { x: end.x, y: middleY }, end]
+    ];
+    const xChannels = new Set([start.x, end.x, middle]), yChannels = new Set([start.y, end.y, middleY]);
+    obstacles.forEach(box => {
+      [box.x - padding, box.x + box.width + padding].forEach(x => xChannels.add(snap(x)));
+      [box.y - padding, box.y + box.height + padding].forEach(y => yChannels.add(snap(y)));
+    });
+    xChannels.forEach(x => candidates.push([start, { x, y: start.y }, { x, y: end.y }, end]));
+    yChannels.forEach(y => candidates.push([start, { x: start.x, y }, { x: end.x, y }, end]));
+    xChannels.forEach(x => yChannels.forEach(y => {
+      candidates.push([start, { x, y: start.y }, { x, y }, { x, y: end.y }, end]);
+      candidates.push([start, { x: start.x, y }, { x, y }, { x: end.x, y }, end]);
+    }));
+    const length = points => points.slice(1).reduce((sum, point, index) => sum + Math.abs(point.x - points[index].x) + Math.abs(point.y - points[index].y), 0);
+    return candidates.map(compact).filter(validPath).sort((left, right) => length(left) - length(right) || left.length - right.length || JSON.stringify(left).localeCompare(JSON.stringify(right)))[0] || null;
+  };
+  for (const [fromSide, toSide] of sidePairs) {
+    const route = routeForSides(fromSide, toSide);
+    if (route) return { points: route, curve: null };
+  }
+  return { points: [initial.start, initial.end], curve: null };
+}
+
+export function routeEdge(edge, from, to, mode = 'orthogonal') {
+  return routeEdgePath(edge, from, to, mode).points;
 }
 
 export function normalizeDiagramData(spec) {

package/src/edit-controller.mjs

@@ -27,11 +27,11 @@ export class EditController {
 
   targetEntries(command) {
     const spec = this.chart.spec;
-    const diagram = ['flow', 'swimlane'].includes(spec.type);
+    const diagram = ['flow', 'swimlane', 'architecture', 'mindmap'].includes(spec.type);
     if (!diagram) return [{ field: 'values', root: false }];
     const operations = command.operations || [];
     const wantsGroups = operations.some(operation => ['toggleGroupCollapse', 'duplicateGroup', 'deleteGroup'].includes(operation?.op));
-    const wantsEdges = operations.some(operation => ['updateEdge', 'addEdge', 'duplicateSelection', 'pasteSelection', 'duplicateGroup'].includes(operation?.op) || operation?.op === 'deleteGroup' && operation.policy === 'delete-members');
+    const wantsEdges = operations.some(operation => ['updateEdge', 'removeEdge', 'addEdge', 'duplicateSelection', 'pasteSelection', 'duplicateGroup'].includes(operation?.op) || operation?.op === 'deleteGroup' && operation.policy === 'delete-members');
     const wantsNodes = operations.some(operation => ['moveNode', 'moveNodes', 'moveNodeToLane', 'resizeNode', 'alignNodes', 'snapNodes', 'moveGroup', 'resizeGroup', 'assignNodesToGroup', 'duplicateGroup', 'deleteGroup', 'duplicateSelection', 'pasteSelection'].includes(operation?.op));
     const entries = [];
     if (wantsNodes || !wantsEdges && !wantsGroups) entries.push({ field: 'nodes', root: spec.nodes !== undefined });
@@ -42,7 +42,7 @@ export class EditController {
 
   context(command) {
     const spec = this.chart.spec;
-    const diagram = ['flow', 'swimlane'].includes(spec.type);
+    const diagram = ['flow', 'swimlane', 'architecture', 'mindmap'].includes(spec.type);
     const entries = this.targetEntries(command);
     const primary = entries[0];
     const nodes = spec.nodes ?? spec.data.nodes ?? [];
@@ -58,6 +58,9 @@ export class EditController {
       nodeSchema: spec.data.schema ?? spec.schema,
       schema: primary?.field === 'edges' ? spec.data.edgeSchema : spec.data.schema ?? spec.schema,
       edgeSchema: spec.data.edgeSchema,
+      type: spec.type,
+      nodeModel: spec.type === 'architecture' ? 'architecture-node' : spec.type === 'mindmap' ? 'mindmap-node' : 'flow-node',
+      edgeModel: spec.type === 'architecture' ? 'architecture-edge' : 'flow-edge',
       validationOptions: { ...spec.validationOptions, references: { ...spec.validationOptions?.references, ...(diagram ? { 'flow-node': nodes.map(row => row.id), swimlane: lanes.map(row => row.id) } : {}) } },
       requireConfirmation: spec.editing?.requireConfirmation,
       grid: spec.diagram?.grid || 8,

package/src/edit.mjs

@@ -11,11 +11,11 @@ const day = 86400000;
 const plusDays = (value, days) => { const date = new Date(`${value}T00:00:00.000Z`); date.setUTCDate(date.getUTCDate() + days); return date.toISOString().slice(0, 10); };
 const equality = (left, right) => JSON.stringify(left) === JSON.stringify(right);
 const recordId = operation => operation.recordId ?? operation.taskId ?? operation.nodeId ?? operation.edgeId;
-const diagramOperationTypes = new Set(['moveNode', 'moveNodes', 'moveNodeToLane', 'resizeNode', 'alignNodes', 'snapNodes', 'moveGroup', 'resizeGroup', 'assignNodesToGroup', 'duplicateGroup', 'deleteGroup', 'updateEdge', 'toggleGroupCollapse', 'addEdge', 'duplicateSelection', 'pasteSelection']);
-const structureOperationTypes = new Set(['assignNodesToGroup', 'duplicateGroup', 'deleteGroup', 'toggleGroupCollapse', 'addEdge', 'duplicateSelection', 'pasteSelection']);
+const diagramOperationTypes = new Set(['moveNode', 'moveNodes', 'moveNodeToLane', 'resizeNode', 'alignNodes', 'snapNodes', 'moveGroup', 'resizeGroup', 'assignNodesToGroup', 'duplicateGroup', 'deleteGroup', 'updateEdge', 'removeEdge', 'toggleGroupCollapse', 'addEdge', 'duplicateSelection', 'pasteSelection']);
+const structureOperationTypes = new Set(['assignNodesToGroup', 'duplicateGroup', 'deleteGroup', 'removeEdge', 'toggleGroupCollapse', 'addEdge', 'duplicateSelection', 'pasteSelection']);
 
 export function businessModelForType(type) {
-  return { gantt: 'project-task', timeline: 'timeline-event', milestone: 'milestone', burndown: 'burndown-sample', flow: 'flow-node', swimlane: 'flow-node' }[type] || type;
+  return { gantt: 'project-task', timeline: 'timeline-event', milestone: 'milestone', burndown: 'burndown-sample', flow: 'flow-node', swimlane: 'flow-node', architecture: 'architecture-node', mindmap: 'mindmap-node' }[type] || type;
 }
 
 function jsonValue(value) { return value === undefined ? null : copyJSON(value); }
@@ -25,8 +25,8 @@ function uniqueId(existing, preferred) { let index = 1, value = preferred; while
 function duplicateEdge(edges, edge) { return edges.some(item => item.from === edge.from && item.to === edge.to && (item.fromPort || null) === (edge.fromPort || null) && (item.toPort || null) === (edge.toPort || null)); }
 
 function previewDiagramEdit(command, options = {}) {
-  const nodeSchemaResult = validateDataSchema(options.nodeSchema || options.schema || getBusinessSchema('flow-node'));
-  const edgeSchemaResult = validateDataSchema(options.edgeSchema || getBusinessSchema('flow-edge'));
+  const nodeSchemaResult = validateDataSchema(options.nodeSchema || options.schema || getBusinessSchema(options.nodeModel || businessModelForType(options.type)));
+  const edgeSchemaResult = validateDataSchema(options.edgeSchema || getBusinessSchema(options.edgeModel || (options.type === 'architecture' ? 'architecture-edge' : 'flow-edge')));
   const errors = [...nodeSchemaResult.errors, ...edgeSchemaResult.errors], warnings = [], changes = [], patches = [], affected = new Set();
   const beforeNodes = copyJSON(options.nodes || options.values || []), beforeEdges = copyJSON(options.edges || []), beforeGroups = copyJSON(options.groups || []), lanes = copyJSON(options.lanes || []);
   if (!nodeSchemaResult.valid || !edgeSchemaResult.valid) return result({ valid: false, errors, command, changes, patches, affectedRecords: [], warnings, requiresConfirmation: false });
@@ -181,6 +181,16 @@ function previewDiagramEdit(command, options = {}) {
       return;
     }
 
+    if (operation.op === 'removeEdge') {
+      const hit = edgeIndex().get(recordId(operation));
+      if (!hit) { errors.push(issue('RECORD_NOT_FOUND', `command.operations.${opIndex}`, `Record ${recordId(operation)} was not found.`)); return; }
+      const removed = edges.splice(hit.rowIndex, 1)[0];
+      affected.add(removed.id || `edge-${hit.rowIndex}`);
+      changes.push(change(removed, undefined, `edges.${hit.rowIndex}`, operation));
+      patches.push({ op: 'remove', path: `/edges/${hit.rowIndex}` });
+      return;
+    }
+
     if (operation.op === 'addEdge') {
       const edge = {
         id: operation.id || nextId(edges, 'edge'),
@@ -265,7 +275,7 @@ function previewDiagramEdit(command, options = {}) {
   const edgeValidation = validateData(edges, edgeSchemaResult.schema, { ...options.validationOptions, references: { ...options.validationOptions?.references, 'flow-node': nodeValidation.rows.map(node => node.id) } });
   errors.push(...nodeValidation.errors, ...edgeValidation.errors);
   warnings.push(...nodeValidation.warnings, ...edgeValidation.warnings);
-  const diagramSpec = { type: 'flow', nodes: nodeValidation.rows, edges: edgeValidation.rows, groups, lanes, ...(options.diagram ? { diagram: options.diagram } : {}) };
+  const diagramSpec = { type: options.type || 'flow', nodes: nodeValidation.rows, edges: edgeValidation.rows, groups, lanes, ...(options.diagram ? { diagram: options.diagram } : {}) };
   const diagramValidation = validateDiagram(diagramSpec);
   errors.push(...diagramValidation.errors.map(error => issue(error.code, error.path, error.message, error.suggestion)));
 
@@ -274,7 +284,7 @@ function previewDiagramEdit(command, options = {}) {
   if (!equality(beforeEdges, edgeValidation.rows)) targets.edges = edgeValidation.rows;
   if (!equality(beforeGroups, groups)) targets.groups = groups;
   if (errors.length) return result({ valid: false, errors, command, changes: [], patches: [], affectedRecords: [...affected], warnings, requiresConfirmation: false, before: { nodes: beforeNodes, edges: beforeEdges, groups: beforeGroups }, after: { nodes: beforeNodes, edges: beforeEdges, groups: beforeGroups }, targets: {} });
-  const requiresConfirmation = options.requireConfirmation !== false || command.operations.some(operation => structureOperationTypes.has(operation.op) || operation.op === 'updateEdge');
+  const requiresConfirmation = options.requireConfirmation !== false || command.operations.some(operation => structureOperationTypes.has(operation.op));
   return result({
     valid: true,
     errors: [],