@erd-studio/renderer 0.3.0 → 0.4.0

package/dist/{chunk-WOTSQZCQ.js → chunk-YLXBIRPE.js}

@@ -1,3 +1,96 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/lib/canvasFocus.ts
+var FLOW_ANIMATION_LIMIT = 40;
+function fkData(edge) {
+  return edge.type === "fk" ? edge.data : void 0;
+}
+function computeCanvasFocus(edges, target, nodeIds, options) {
+  const node = target.node ?? null;
+  if (node !== null) {
+    if (nodeIds && !nodeIds.has(node)) return null;
+    const nodes = /* @__PURE__ */ new Set([node]);
+    const own = /* @__PURE__ */ new Set();
+    const flowEdges2 = /* @__PURE__ */ new Set();
+    for (const edge2 of edges) {
+      const fk2 = fkData(edge2);
+      if (!fk2) continue;
+      if (fk2.fromModel !== node && fk2.toModel !== node) continue;
+      nodes.add(fk2.fromModel);
+      nodes.add(fk2.toModel);
+      own.add(edge2.id);
+      if (fk2.discrepancyStatus !== "missing") flowEdges2.add(edge2.id);
+    }
+    let bright = own;
+    if (!options?.ownLinesOnly) {
+      bright = /* @__PURE__ */ new Set();
+      for (const edge2 of edges) {
+        const fk2 = fkData(edge2);
+        if (fk2 && nodes.has(fk2.fromModel) && nodes.has(fk2.toModel)) bright.add(edge2.id);
+      }
+    }
+    return {
+      node,
+      edge: null,
+      nodes,
+      edges: bright,
+      flowEdges: flowEdges2,
+      animate: flowEdges2.size <= FLOW_ANIMATION_LIMIT
+    };
+  }
+  const edgeId = target.edge ?? null;
+  if (edgeId === null) return null;
+  const edge = edges.find((e) => e.id === edgeId);
+  const fk = edge ? fkData(edge) : void 0;
+  if (!fk) return null;
+  const flowEdges = new Set(fk.discrepancyStatus === "missing" ? [] : [edgeId]);
+  return {
+    node: null,
+    edge: edgeId,
+    nodes: /* @__PURE__ */ new Set([fk.fromModel, fk.toModel]),
+    edges: /* @__PURE__ */ new Set([edgeId]),
+    flowEdges,
+    animate: flowEdges.size <= FLOW_ANIMATION_LIMIT
+  };
+}
+function sameSet(a, b) {
+  if (a === b) return true;
+  if (a.size !== b.size) return false;
+  for (const v of a) if (!b.has(v)) return false;
+  return true;
+}
+function sameFocus(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.node === b.node && a.edge === b.edge && a.animate === b.animate && a.nodes.size === b.nodes.size && a.edges.size === b.edges.size && a.flowEdges.size === b.flowEdges.size && sameSet(a.nodes, b.nodes) && sameSet(a.edges, b.edges) && sameSet(a.flowEdges, b.flowEdges);
+}
+function tableFocusRole(focus, id) {
+  if (!focus) return null;
+  if (focus.node === id) return "origin";
+  return focus.nodes.has(id) ? "related" : null;
+}
+function edgeFocusRole(flow, hover, id) {
+  if (flow && flow.flowEdges.has(id)) return flow.animate ? "flow" : "flow-static";
+  if (hover && hover.edges.has(id)) return "lit";
+  return null;
+}
+
+// src/lib/edgeRouting/lineStyle.ts
+var LINE_STYLES = ["curved", "hops"];
+var DEFAULT_LINE_STYLE = "curved";
+function isLineStyle(value) {
+  return value === "curved" || value === "hops";
+}
+var LINE_STYLE_OPTIONS = {
+  curved: { crossings: "halo", underTables: "xray", corners: "curved" },
+  hops: { crossings: "hops", underTables: "hidden", corners: "rounded" }
+};
+function lineStyleOptions(style) {
+  return LINE_STYLE_OPTIONS[isLineStyle(style) ? style : DEFAULT_LINE_STYLE];
+}
+
 // src/store/editorStore.ts
 import { createContext, createElement, useContext } from "react";
 import { createStore, useStore } from "zustand";
@@ -26,6 +119,12 @@ function createCanvasSlice(set) {
     lastSelectedColumn: null,
     editingColumn: null,
     selectedAnnotation: null,
+    hoverFocus: null,
+    flowFocus: null,
+    logicalOnly: false,
+    canvasContext: null,
+    lineStyle: DEFAULT_LINE_STYLE,
+    edgeRoutes: null,
     // Actions
     setSearchQuery: (query) => set({ searchQuery: query }),
     selectNode: (nodeName) => set({ selectedNode: nodeName, selectedAnnotation: null, selectedColumns: [], lastSelectedColumn: null, editingColumn: null }),
@@ -118,7 +217,15 @@ function createCanvasSlice(set) {
       selectedColumns: [],
       lastSelectedColumn: null,
       editingColumn: null
-    })
+    }),
+    // Hover focus and relationship flow (ephemeral, see useHoverFocus)
+    setHoverFocus: (focus) => set((s) => sameFocus(s.hoverFocus, focus) ? s : { hoverFocus: focus }),
+    setFlowFocus: (focus) => set((s) => sameFocus(s.flowFocus, focus) ? s : { flowFocus: focus }),
+    // Host context (editing hosts only)
+    setCanvasContext: (context) => set({ canvasContext: context }),
+    // Line routing (EdgeRouter writes the routes; FkEdge and EdgeOverlay read them)
+    setLineStyle: (lineStyle) => set((s) => s.lineStyle === lineStyle ? s : { lineStyle }),
+    setEdgeRoutes: (routes) => set((s) => s.edgeRoutes === routes ? s : { edgeRoutes: routes })
   };
 }
 function createCanvasStore(initial) {
@@ -141,11 +248,34 @@ function useEditorStoreApi() {
 function useEditorStore(selector) {
   return useStore(useEditorStoreApi(), selector);
 }
+var NO_STORE = {
+  getState: () => void 0,
+  getInitialState: () => void 0,
+  subscribe: () => () => {
+  }
+};
+function useEditorStoreOr(selector, fallback) {
+  const store = useContext(CanvasStoreContext);
+  return useStore(
+    store ?? NO_STORE,
+    store ? selector : () => fallback
+  );
+}
 
 export {
+  __publicField,
+  computeCanvasFocus,
+  sameFocus,
+  tableFocusRole,
+  edgeFocusRole,
+  LINE_STYLES,
+  DEFAULT_LINE_STYLE,
+  isLineStyle,
+  lineStyleOptions,
   createCanvasSlice,
   createCanvasStore,
   CanvasStoreProvider,
   useEditorStoreApi,
-  useEditorStore
+  useEditorStore,
+  useEditorStoreOr
 };

package/dist/editor.js

@@ -8,24 +8,32 @@ import {
   CanvasBackdrop,
   CanvasEnvironmentProvider,
   ColumnRowEditor,
+  DBML_RICH_EXPORT_HEADER,
   DIAGRAM_EXPORT_FILE_EXTENSIONS,
   DIAGRAM_EXPORT_FORMATS,
   DISCREPANCY_PHRASE,
   DataTypeSelect,
   DetailPanel,
+  EdgeFlow,
+  EdgeFlowGlyphs,
   ErdCanvas,
   FkEdge,
   KeyBadge,
   KeyBadgeGroup,
+  LAYER_BADGE_FALLBACK,
   Legend,
   NOOP_CANVAS_HOST,
   SCD_BADGE,
   SCD_TITLE,
   SOURCE_LABEL,
+  SOURCE_LABEL_NEUTRAL,
   SOURCE_LEGEND_DESC,
+  SOURCE_LEGEND_DESC_NEUTRAL,
   SOURCE_ORDER,
   SOURCE_PHRASE,
+  SOURCE_PHRASE_NEUTRAL,
   STAGE_HEX,
+  StatusBar,
   TableNode,
   applyNodeOverlays,
   canvasEdgeTypes,
@@ -37,6 +45,9 @@ import {
   exportDiagram,
   foldComposites,
   getDataTypeColor,
+  isSingleLayerProject,
+  layerAbbreviation,
+  legendEntries,
   matchesTableSearch,
   nodeRect,
   pickHandleSides,
@@ -44,18 +55,22 @@ import {
   relationshipEdgeId,
   repickHandleSides,
   stageNodeColor,
+  statusBarStats,
   swapCardinality,
   toDbml,
+  toDbmlRich,
   toMermaid,
   transformSubjectArea,
   useCanvasGraph,
   useCanvasHost,
   useColumnReorder,
   useFocusWithinRow,
+  useHoverFocus,
   useIsViewer,
   useLongPressDrag,
+  usePrefersReducedMotion,
   useSend
-} from "./chunk-HWA32XG5.js";
+} from "./chunk-7VFJNN4P.js";
 import "./chunk-QZGU5NZH.js";
 import "./chunk-6XQXDZ4R.js";
 import {
@@ -67,14 +82,19 @@ import {
   estimateNodeWidth,
   resolveNodeDimensions,
   useColumnExpansion
-} from "./chunk-DUQ2TTQH.js";
+} from "./chunk-64BVOHOR.js";
 import {
   CanvasStoreProvider,
+  DEFAULT_LINE_STYLE,
+  LINE_STYLES,
+  computeCanvasFocus,
   createCanvasSlice,
   createCanvasStore,
+  isLineStyle,
+  sameFocus,
   useEditorStore,
   useEditorStoreApi
-} from "./chunk-WOTSQZCQ.js";
+} from "./chunk-YLXBIRPE.js";
 export {
   ADDITIVE_BADGE,
   ADDITIVE_TITLE,
@@ -87,15 +107,21 @@ export {
   CanvasEnvironmentProvider,
   CanvasStoreProvider,
   ColumnRowEditor,
+  DBML_RICH_EXPORT_HEADER,
+  DEFAULT_LINE_STYLE,
   DIAGRAM_EXPORT_FILE_EXTENSIONS,
   DIAGRAM_EXPORT_FORMATS,
   DISCREPANCY_PHRASE,
   DataTypeSelect,
   DetailPanel,
+  EdgeFlow,
+  EdgeFlowGlyphs,
   ErdCanvas,
   FkEdge,
   KeyBadge,
   KeyBadgeGroup,
+  LAYER_BADGE_FALLBACK,
+  LINE_STYLES,
   Legend,
   NODE_THRESHOLD,
   NODE_WIDTH,
@@ -103,15 +129,20 @@ export {
   SCD_BADGE,
   SCD_TITLE,
   SOURCE_LABEL,
+  SOURCE_LABEL_NEUTRAL,
   SOURCE_LEGEND_DESC,
+  SOURCE_LEGEND_DESC_NEUTRAL,
   SOURCE_ORDER,
   SOURCE_PHRASE,
+  SOURCE_PHRASE_NEUTRAL,
   STAGE_HEX,
+  StatusBar,
   TableNode,
   applyNodeOverlays,
   canvasEdgeTypes,
   canvasNodeTypes,
   columnPairs,
+  computeCanvasFocus,
   computeTableLabels,
   countVisibleColumnRows,
   createCanvasSlice,
@@ -123,6 +154,10 @@ export {
   exportDiagram,
   foldComposites,
   getDataTypeColor,
+  isLineStyle,
+  isSingleLayerProject,
+  layerAbbreviation,
+  legendEntries,
   matchesTableSearch,
   nodeRect,
   pickHandleSides,
@@ -130,9 +165,12 @@ export {
   relationshipEdgeId,
   repickHandleSides,
   resolveNodeDimensions,
+  sameFocus,
   stageNodeColor,
+  statusBarStats,
   swapCardinality,
   toDbml,
+  toDbmlRich,
   toMermaid,
   transformSubjectArea,
   useCanvasGraph,
@@ -142,7 +180,9 @@ export {
   useEditorStore,
   useEditorStoreApi,
   useFocusWithinRow,
+  useHoverFocus,
   useIsViewer,
   useLongPressDrag,
+  usePrefersReducedMotion,
   useSend
 };

package/dist/index.js

@@ -1,4 +1,5 @@
 import {
+  DBML_RICH_EXPORT_HEADER,
   DIAGRAM_EXPORT_FILE_EXTENSIONS,
   DIAGRAM_EXPORT_FORMATS,
   ErdCanvas,
@@ -8,21 +9,31 @@ import {
   pickHandleSides,
   repickHandleSides,
   toDbml,
+  toDbmlRich,
   toMermaid,
   transformSubjectArea
-} from "./chunk-HWA32XG5.js";
-import "./chunk-DUQ2TTQH.js";
-import "./chunk-WOTSQZCQ.js";
+} from "./chunk-7VFJNN4P.js";
+import "./chunk-64BVOHOR.js";
+import {
+  DEFAULT_LINE_STYLE,
+  LINE_STYLES,
+  isLineStyle
+} from "./chunk-YLXBIRPE.js";
 export {
+  DBML_RICH_EXPORT_HEADER,
+  DEFAULT_LINE_STYLE,
   DIAGRAM_EXPORT_FILE_EXTENSIONS,
   DIAGRAM_EXPORT_FORMATS,
   ErdCanvas,
+  LINE_STYLES,
   diagramExportFileName,
   exportDiagram,
+  isLineStyle,
   nodeRect,
   pickHandleSides,
   repickHandleSides,
   toDbml,
+  toDbmlRich,
   toMermaid,
   transformSubjectArea
 };

package/dist/sizing.js

@@ -5,8 +5,8 @@ import {
   estimateNodeHeight,
   estimateNodeWidth,
   resolveNodeDimensions
-} from "./chunk-DUQ2TTQH.js";
-import "./chunk-WOTSQZCQ.js";
+} from "./chunk-64BVOHOR.js";
+import "./chunk-YLXBIRPE.js";
 export {
   NODE_WIDTH,
   countVisibleColumnRows,

package/dist/store.js

@@ -5,7 +5,7 @@ import {
   createCanvasStore,
   useEditorStore,
   useEditorStoreApi
-} from "./chunk-WOTSQZCQ.js";
+} from "./chunk-YLXBIRPE.js";
 export {
   CanvasStoreProvider,
   createCanvasSlice,