@ai-matrx/rich-content 0.2.4 → 0.2.7

package/dist/display/blocks/diagram/layout-utils.js

@@ -0,0 +1,347 @@
+import dagre from "dagre";
+import { Position, MarkerType } from "@xyflow/react";
+const getLayoutedElements = (nodes, edges, options = {}) => {
+  const {
+    direction = "TB",
+    nodeWidth = 200,
+    nodeHeight = 100,
+    rankSep = 100,
+    nodeSep = 80
+  } = options;
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({
+    rankdir: direction,
+    ranksep: rankSep,
+    nodesep: nodeSep,
+    marginx: 20,
+    marginy: 20
+  });
+  nodes.forEach((node) => {
+    dagreGraph.setNode(node.id, {
+      width: node.measured?.width ?? node.width ?? nodeWidth,
+      height: node.measured?.height ?? node.height ?? nodeHeight
+    });
+  });
+  edges.forEach((edge) => {
+    dagreGraph.setEdge(edge.source, edge.target);
+  });
+  dagre.layout(dagreGraph);
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    const width = node.measured?.width ?? node.width ?? nodeWidth;
+    const height = node.measured?.height ?? node.height ?? nodeHeight;
+    return {
+      ...node,
+      targetPosition: getTargetPosition(direction),
+      sourcePosition: getSourcePosition(direction),
+      position: {
+        x: nodeWithPosition.x - width / 2,
+        y: nodeWithPosition.y - height / 2
+      },
+      data: { ...node.data }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+};
+const getTargetPosition = (direction) => {
+  switch (direction) {
+    case "TB":
+      return Position.Top;
+    case "BT":
+      return Position.Bottom;
+    case "LR":
+      return Position.Left;
+    case "RL":
+      return Position.Right;
+    default:
+      return Position.Top;
+  }
+};
+const getSourcePosition = (direction) => {
+  switch (direction) {
+    case "TB":
+      return Position.Bottom;
+    case "BT":
+      return Position.Top;
+    case "LR":
+      return Position.Right;
+    case "RL":
+      return Position.Left;
+    default:
+      return Position.Bottom;
+  }
+};
+const getLayoutOptionsForDiagramType = (diagramType, nodeCount, preferredDirection) => {
+  const baseOptions = {
+    nodeWidth: 200,
+    nodeHeight: 100,
+    rankSep: 100,
+    nodeSep: 80
+  };
+  const dir = preferredDirection;
+  switch (diagramType) {
+    case "flowchart":
+    case "process":
+      return {
+        ...baseOptions,
+        direction: dir ?? "TB",
+        rankSep: 120,
+        nodeSep: 100
+      };
+    case "orgchart":
+      return {
+        ...baseOptions,
+        direction: dir ?? "TB",
+        rankSep: 200,
+        nodeSep: 150,
+        nodeWidth: 220,
+        nodeHeight: 120
+      };
+    case "pedigree":
+      return {
+        ...baseOptions,
+        direction: dir ?? "TB",
+        rankSep: 180,
+        nodeSep: 120,
+        nodeWidth: 120,
+        nodeHeight: 120
+      };
+    case "mindmap":
+      return {
+        ...baseOptions,
+        direction: dir ?? (nodeCount > 10 ? "LR" : "TB"),
+        rankSep: 80,
+        nodeSep: 60
+      };
+    case "network":
+    case "system":
+      return {
+        ...baseOptions,
+        direction: dir ?? "LR",
+        rankSep: 150,
+        nodeSep: 100
+      };
+    case "timeline":
+      return {
+        ...baseOptions,
+        direction: dir ?? "LR",
+        rankSep: 60,
+        nodeSep: 40,
+        nodeWidth: 160,
+        nodeHeight: 80
+      };
+    case "erd":
+      return {
+        ...baseOptions,
+        direction: dir ?? "LR",
+        rankSep: 160,
+        nodeSep: 120,
+        nodeWidth: 200,
+        nodeHeight: 140
+      };
+    case "sequence":
+      return {
+        ...baseOptions,
+        direction: dir ?? "LR",
+        rankSep: 120,
+        nodeSep: 100
+      };
+    default:
+      return {
+        ...baseOptions,
+        direction: dir ?? "TB"
+      };
+  }
+};
+const getRadialLayout = (nodes, edges, centerNodeId) => {
+  if (nodes.length === 0) return { nodes, edges };
+  const foundCenterNode = centerNodeId ? nodes.find((n) => n.id === centerNodeId) : findCenterNode(nodes, edges);
+  const centerNode = foundCenterNode ?? nodes[0];
+  const centerX = 400;
+  const centerY = 300;
+  const radius = 220;
+  const angleStep = 2 * Math.PI / (nodes.length - 1);
+  const layoutedNodes = nodes.map((node, index) => {
+    if (node.id === centerNode.id) {
+      return { ...node, position: { x: centerX, y: centerY } };
+    }
+    const adjustedIndex = index > nodes.findIndex((n) => n.id === centerNode.id) ? index - 1 : index;
+    const angle = adjustedIndex * angleStep;
+    return {
+      ...node,
+      position: {
+        x: centerX + radius * Math.cos(angle) - 100,
+        y: centerY + radius * Math.sin(angle) - 50
+      }
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+};
+const getGridLayout = (nodes, edges) => {
+  if (nodes.length === 0) return { nodes, edges };
+  const rootNodes = nodes.filter((node) => !node.parentId);
+  const columns = Math.max(1, Math.ceil(Math.sqrt(rootNodes.length)));
+  const widestRoot = Math.max(
+    ...rootNodes.map((node) => node.measured?.width ?? node.width ?? 220)
+  );
+  const tallestRoot = Math.max(
+    ...rootNodes.map((node) => node.measured?.height ?? node.height ?? 120)
+  );
+  const columnWidth = widestRoot + 80;
+  const rowHeight = tallestRoot + 80;
+  const rootPosition = new Map(
+    rootNodes.map((node, index) => [
+      node.id,
+      {
+        x: index % columns * columnWidth + 40,
+        y: Math.floor(index / columns) * rowHeight + 40
+      }
+    ])
+  );
+  return {
+    nodes: nodes.map((node) => ({
+      ...node,
+      position: rootPosition.get(node.id) ?? node.position
+    })),
+    edges
+  };
+};
+const findCenterNode = (nodes, edges) => {
+  const connectionCounts = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => connectionCounts.set(node.id, 0));
+  edges.forEach((edge) => {
+    connectionCounts.set(
+      edge.source,
+      (connectionCounts.get(edge.source) || 0) + 1
+    );
+    connectionCounts.set(
+      edge.target,
+      (connectionCounts.get(edge.target) || 0) + 1
+    );
+  });
+  let maxConnections = 0;
+  let centerNodeId = "";
+  connectionCounts.forEach((count, nodeId) => {
+    if (count > maxConnections) {
+      maxConnections = count;
+      centerNodeId = nodeId;
+    }
+  });
+  return nodes.find((node) => node.id === centerNodeId);
+};
+const getOrgChartLayout = (nodes, edges, options = {}) => {
+  const {
+    direction = "TB",
+    nodeWidth = 220,
+    nodeHeight = 120,
+    rankSep = 200,
+    nodeSep = 150
+  } = options;
+  const dagreGraph = new dagre.graphlib.Graph();
+  dagreGraph.setDefaultEdgeLabel(() => ({}));
+  dagreGraph.setGraph({
+    rankdir: direction,
+    ranksep: rankSep,
+    nodesep: nodeSep,
+    marginx: 40,
+    marginy: 40,
+    align: "UL"
+  });
+  nodes.forEach(
+    (node) => dagreGraph.setNode(node.id, {
+      width: node.measured?.width ?? node.width ?? nodeWidth,
+      height: node.measured?.height ?? node.height ?? nodeHeight
+    })
+  );
+  edges.forEach((edge) => dagreGraph.setEdge(edge.source, edge.target));
+  dagre.layout(dagreGraph);
+  const layoutedNodes = nodes.map((node) => {
+    const nodeWithPosition = dagreGraph.node(node.id);
+    const width = node.measured?.width ?? node.width ?? nodeWidth;
+    const height = node.measured?.height ?? node.height ?? nodeHeight;
+    return {
+      ...node,
+      targetPosition: getTargetPosition(direction),
+      sourcePosition: getSourcePosition(direction),
+      position: {
+        x: nodeWithPosition.x - width / 2,
+        y: nodeWithPosition.y - height / 2
+      },
+      data: { ...node.data, diagramType: "orgchart" }
+    };
+  });
+  const cleanedEdges = edges.map((edge) => ({
+    ...edge,
+    label: void 0,
+    labelStyle: void 0,
+    labelBgStyle: void 0,
+    style: {
+      ...edge.style,
+      stroke: "#6b7280",
+      strokeWidth: 2,
+      strokeDasharray: "none"
+    },
+    markerEnd: {
+      type: MarkerType.ArrowClosed,
+      width: 16,
+      height: 16,
+      color: "#6b7280"
+    }
+  }));
+  return { nodes: layoutedNodes, edges: cleanedEdges };
+};
+const getPedigreeLayout = (nodes, edges) => {
+  const generationMap = /* @__PURE__ */ new Map();
+  nodes.forEach((node) => {
+    const gen = typeof node.data.generation === "number" ? node.data.generation : 0;
+    const genNodes = generationMap.get(gen);
+    if (genNodes) {
+      genNodes.push(node);
+    } else {
+      generationMap.set(gen, [node]);
+    }
+  });
+  if (generationMap.size <= 1) {
+    return getLayoutedElements(nodes, edges, {
+      direction: "TB",
+      nodeWidth: 120,
+      nodeHeight: 120,
+      rankSep: 180,
+      nodeSep: 120
+    });
+  }
+  const GENERATION_HEIGHT = 220;
+  const NODE_WIDTH = 130;
+  const NODE_SPACING = 60;
+  const generations = Array.from(generationMap.keys()).sort((a, b) => a - b);
+  const maxNodesInGen = Math.max(
+    ...generations.map((g) => generationMap.get(g)?.length ?? 0)
+  );
+  const totalWidth = maxNodesInGen * (NODE_WIDTH + NODE_SPACING);
+  const layoutedNodes = nodes.map((node) => {
+    const gen = typeof node.data.generation === "number" ? node.data.generation : 0;
+    const genNodes = generationMap.get(gen) ?? [];
+    const indexInGen = genNodes.findIndex((n) => n.id === node.id);
+    const genWidth = genNodes.length * (NODE_WIDTH + NODE_SPACING);
+    const xOffset = (totalWidth - genWidth) / 2;
+    return {
+      ...node,
+      position: {
+        x: xOffset + indexInGen * (NODE_WIDTH + NODE_SPACING),
+        y: generations.indexOf(gen) * GENERATION_HEIGHT + 50
+      },
+      targetPosition: Position.Top,
+      sourcePosition: Position.Bottom
+    };
+  });
+  return { nodes: layoutedNodes, edges };
+};
+export {
+  getGridLayout,
+  getLayoutOptionsForDiagramType,
+  getLayoutedElements,
+  getOrgChartLayout,
+  getPedigreeLayout,
+  getRadialLayout
+};

package/dist/display/blocks/diagram/parseDiagramJSON.d.ts

@@ -0,0 +1,105 @@
+import type { KIND_KEY } from "@ai-matrx/content-ir";
+interface DiagramEdgeKind {
+    id?: string;
+    type?: string;
+    arrow?: boolean;
+    color?: string;
+    label?: string;
+    /**
+     * The registered kind this payload is an instance of.
+     */
+    __kind: "diagram_edge";
+    dashed?: boolean;
+    source: string;
+    target: string;
+    animated?: boolean;
+    strokeWidth?: number;
+    relationship?: string;
+}
+interface DiagramNodeKind {
+    id: string;
+    icon?: string;
+    type?: string;
+    color?: string;
+    label: string;
+    /**
+     * The registered kind this payload is an instance of.
+     */
+    __kind: "diagram_node";
+    gender?: string;
+    details?: string;
+    proband?: boolean;
+    affected?: boolean;
+    deceased?: boolean;
+    position?: {
+        x: number;
+        y: number;
+        /**
+         * The registered kind this payload is an instance of, when it is one.
+         */
+        __kind?: string;
+    };
+    birthYear?: string;
+    deathYear?: string;
+    generation?: number;
+    description?: string;
+}
+import { type DiagramBackground } from "./diagram-visual-defaults.js";
+export type DiagramNode = Omit<DiagramNodeKind, typeof KIND_KEY> & {
+    /** Layout/presentation the RENDERER owns — never part of the wire kind. */
+    nodeType?: string;
+    metadata?: Record<string, unknown>;
+    isGroup?: boolean;
+    parentId?: string;
+    width?: number;
+    height?: number;
+    groupStyle?: string;
+    shape?: string;
+    borderStyle?: string;
+    textAlign?: string;
+};
+export type DiagramEdge = Omit<DiagramEdgeKind, typeof KIND_KEY> & Required<Pick<DiagramEdgeKind, "id">> & {
+    /** Presentation the RENDERER owns — never part of the wire kind. */
+    lineStyle?: string;
+    marker?: string;
+};
+export interface DiagramData {
+    title: string;
+    description?: string;
+    type: "flowchart" | "mindmap" | "orgchart" | "network" | "system" | "process" | "pedigree" | "timeline" | "erd" | "sequence" | string;
+    nodes: DiagramNode[];
+    edges: DiagramEdge[];
+    layout?: {
+        direction?: "TB" | "LR" | "BT" | "RL";
+        spacing?: number;
+        algorithm?: "dagre" | "grid" | "radial" | "pedigree";
+    };
+    renderHints?: {
+        showLegend?: boolean;
+        showEdgeLabels?: boolean;
+        compactNodes?: boolean;
+        hideArrows?: boolean;
+        background?: DiagramBackground;
+        showMiniMap?: boolean;
+        snapToGrid?: boolean;
+        showControls?: boolean;
+    };
+}
+/** Make every renderer-chosen visual decision explicit in the document. */
+export declare function materializeDiagramDefaults(diagram: DiagramData): DiagramData;
+/**
+ * Parses JSON content into structured diagram data.
+ *
+ * Supported input formats:
+ * - { "diagram": { ... } }          — wrapped format
+ * - { "title": ..., "nodes": ... }  — direct format
+ * - JSON inside markdown code fences
+ *
+ * Edge fields accept both from/to AND source/target.
+ * All new fields (gender, affected, generation, relationship, etc.) are passed through.
+ */
+export declare function parseDiagramJSON(content: string): DiagramData;
+export declare function validateDiagram(diagram: DiagramData): boolean;
+export declare function diagramToJSON(diagram: DiagramData): string;
+export declare function parseDiagramContent(content: string): DiagramData;
+export {};