@erd-studio/renderer 0.1.0

package/dist/chunk-HOQPSLHQ.js

@@ -0,0 +1,90 @@
+import {
+  useEditorStore
+} from "./chunk-WOTSQZCQ.js";
+
+// src/hooks/useColumnExpansion.ts
+import { useCallback } from "react";
+var COLLAPSED_COLUMN_LIMIT = 5;
+var NODE_THRESHOLD = 30;
+function useColumnExpansion() {
+  const expandedNodes = useEditorStore((s) => s.expandedNodes);
+  const allExpanded = useEditorStore((s) => s.allExpanded);
+  const toggleExpansion = useEditorStore((s) => s.toggleExpansion);
+  const collapseAll = useEditorStore((s) => s.collapseAll);
+  const expandAll = useEditorStore((s) => s.expandAll);
+  const isExpanded = useCallback(
+    (modelId) => allExpanded || expandedNodes.has(modelId),
+    [expandedNodes, allExpanded]
+  );
+  return { isExpanded, toggleExpansion, collapseAll, expandAll, allExpanded };
+}
+
+// src/lib/nodeSizing.ts
+var NODE_WIDTH = 280;
+var NODE_HEADER_HEIGHT = 29;
+var NODE_COLUMN_HEIGHT = 25;
+var NODE_COLUMNS_PADDING = 4;
+var NODE_EMPTY_ROW_HEIGHT = 33;
+var NODE_FOOTER_HEIGHT = 25;
+var NODE_BORDER = 4;
+var NODE_GRAIN_HEIGHT = 15;
+function estimateNodeHeight(rowCount, hasGrain) {
+  const grainHeight = hasGrain ? NODE_GRAIN_HEIGHT : 0;
+  const columnsHeight = rowCount > 0 ? NODE_COLUMNS_PADDING + rowCount * NODE_COLUMN_HEIGHT : NODE_COLUMNS_PADDING + NODE_EMPTY_ROW_HEIGHT;
+  return NODE_BORDER + NODE_HEADER_HEIGHT + grainHeight + columnsHeight + NODE_FOOTER_HEIGHT;
+}
+function countVisibleColumnRows(data) {
+  const visible = data.isStub ? data.columns.filter((c) => c.isPrimaryKey || c.isNaturalKey) : data.columns;
+  const expanded = data.isExpanded ?? false;
+  if (expanded) {
+    return visible.length + (data.columns.length > COLLAPSED_COLUMN_LIMIT ? 1 : 0);
+  }
+  if (visible.length > COLLAPSED_COLUMN_LIMIT) {
+    return COLLAPSED_COLUMN_LIMIT + 1;
+  }
+  return visible.length;
+}
+function resolveNodeDimensions(node) {
+  return {
+    width: node.measured?.width ?? estimateNodeWidth(node.data),
+    height: node.measured?.height ?? estimateNodeHeight(countVisibleColumnRows(node.data), !!node.data.grain)
+  };
+}
+var CHAR_WIDTH_BODY = 7.5;
+var CHAR_WIDTH_MONO = 7.2;
+var KEY_BADGE_WIDTH = 20;
+var COL_ROW_PADDING = 20;
+var COL_ROW_GAPS = 46;
+var EXTRA_BADGE_WIDTH = 30;
+var HEADER_PADDING = 20;
+var LAYER_BADGE_WIDTH = 36;
+var SOURCE_BADGE_WIDTH = 30;
+var WIDTH_SAFETY_MARGIN = 24;
+var MIN_NODE_WIDTH = 220;
+var MAX_NODE_WIDTH = 560;
+function estimateNodeWidth(data) {
+  const { modelName, columns, provenance } = data;
+  const headerWidth = HEADER_PADDING + modelName.length * CHAR_WIDTH_BODY + LAYER_BADGE_WIDTH + (provenance ? SOURCE_BADGE_WIDTH : 0);
+  let maxColWidth = 0;
+  for (const col of columns) {
+    const keyBadges = (col.isPrimaryKey ? 1 : 0) + (col.isForeignKey ? 1 : 0) + (col.isNaturalKey ? 1 : 0);
+    const extraBadges = (col.scdType !== void 0 ? 1 : 0) + (col.additiveType !== void 0 ? 1 : 0);
+    const colWidth = COL_ROW_PADDING + keyBadges * KEY_BADGE_WIDTH + col.name.length * CHAR_WIDTH_BODY + col.dataType.length * CHAR_WIDTH_MONO + extraBadges * EXTRA_BADGE_WIDTH + COL_ROW_GAPS;
+    if (colWidth > maxColWidth) {
+      maxColWidth = colWidth;
+    }
+  }
+  const rawWidth = Math.max(headerWidth, maxColWidth) + WIDTH_SAFETY_MARGIN;
+  return Math.round(Math.max(MIN_NODE_WIDTH, Math.min(MAX_NODE_WIDTH, rawWidth)));
+}
+
+export {
+  COLLAPSED_COLUMN_LIMIT,
+  NODE_THRESHOLD,
+  useColumnExpansion,
+  NODE_WIDTH,
+  estimateNodeHeight,
+  countVisibleColumnRows,
+  resolveNodeDimensions,
+  estimateNodeWidth
+};

package/dist/chunk-WOTSQZCQ.js

@@ -0,0 +1,151 @@
+// src/store/editorStore.ts
+import { createContext, createElement, useContext } from "react";
+import { createStore, useStore } from "zustand";
+function createCanvasSlice(set) {
+  return {
+    // Default state
+    searchQuery: "",
+    selectedNode: null,
+    selectedEdges: [],
+    selectedEdge: null,
+    detailPanelOpen: false,
+    pendingDeleteConfirmation: false,
+    domain: null,
+    nodes: [],
+    edges: [],
+    editingAnnotationId: null,
+    existingModels: [],
+    contextMenu: null,
+    legendOpen: false,
+    dragLineState: null,
+    annotationLinkDrag: null,
+    highlightedColumns: /* @__PURE__ */ new Set(),
+    expandedNodes: /* @__PURE__ */ new Set(),
+    allExpanded: false,
+    selectedColumns: [],
+    lastSelectedColumn: null,
+    editingColumn: null,
+    selectedAnnotation: null,
+    // Actions
+    setSearchQuery: (query) => set({ searchQuery: query }),
+    selectNode: (nodeName) => set({ selectedNode: nodeName, selectedAnnotation: null, selectedColumns: [], lastSelectedColumn: null, editingColumn: null }),
+    setSelectedEdges: (edgeIds) => set({ selectedEdges: edgeIds }),
+    setSelectedEdge: (edgeId) => set({ selectedEdge: edgeId }),
+    setDetailPanelOpen: (open) => set({ detailPanelOpen: open }),
+    setPendingDeleteConfirmation: (pending) => set({ pendingDeleteConfirmation: pending }),
+    // Clear column selection on domain reload
+    setDomain: (domain) => set({ domain, selectedColumns: [], lastSelectedColumn: null, editingColumn: null }),
+    setNodes: (nodes) => set({ nodes }),
+    setEdges: (edges) => set({ edges }),
+    setEditingAnnotationId: (id) => set({ editingAnnotationId: id }),
+    setExistingModels: (models) => set({ existingModels: models }),
+    openEdgeContextMenu: (x, y, data) => set({ contextMenu: { type: "edge", x, y, data } }),
+    openNodeContextMenu: (x, y, modelName) => set({ contextMenu: { type: "node", x, y, modelName } }),
+    openAnnotationContextMenu: (x, y, annotationId) => set({ contextMenu: { type: "annotation", x, y, annotationId } }),
+    closeContextMenu: () => set({ contextMenu: null }),
+    setLegendOpen: (open) => set({ legendOpen: open }),
+    startDragLine: (modelName, columnName, sourceX, sourceY) => set({
+      dragLineState: {
+        sourceModelName: modelName,
+        sourceColumnName: columnName,
+        sourceX,
+        sourceY,
+        currentX: sourceX,
+        currentY: sourceY
+      }
+    }),
+    updateDragLineMouse: (mouseX, mouseY) => set(
+      (state) => state.dragLineState ? {
+        dragLineState: {
+          ...state.dragLineState,
+          currentX: mouseX,
+          currentY: mouseY
+        }
+      } : {}
+    ),
+    endDragLine: () => set({ dragLineState: null }),
+    startAnnotationLinkDrag: (annotationId, sourceX, sourceY) => set({ annotationLinkDrag: { annotationId, sourceX, sourceY, currentX: sourceX, currentY: sourceY } }),
+    updateAnnotationLinkDrag: (mouseX, mouseY) => set(
+      (state) => state.annotationLinkDrag ? { annotationLinkDrag: { ...state.annotationLinkDrag, currentX: mouseX, currentY: mouseY } } : {}
+    ),
+    endAnnotationLinkDrag: () => set({ annotationLinkDrag: null }),
+    setHighlightedColumns: (columns) => set({ highlightedColumns: columns }),
+    expandAll: (modelIds) => set({ expandedNodes: new Set(modelIds), allExpanded: true }),
+    expandNew: (modelIds) => set((state) => {
+      const next = new Set(state.expandedNodes);
+      modelIds.forEach((id) => next.add(id));
+      return { expandedNodes: next };
+    }),
+    collapseAll: () => set({ expandedNodes: /* @__PURE__ */ new Set(), allExpanded: false }),
+    toggleExpansion: (modelId) => set((state) => {
+      const next = new Set(state.expandedNodes);
+      if (next.has(modelId)) {
+        next.delete(modelId);
+      } else {
+        next.add(modelId);
+      }
+      return { expandedNodes: next, allExpanded: false };
+    }),
+    setExpandedNodes: (nodes, allExpanded) => set({ expandedNodes: new Set(nodes), allExpanded }),
+    // Column selection actions
+    selectColumn: (name) => set({ selectedColumns: [name], lastSelectedColumn: name, editingColumn: null }),
+    toggleColumnSelection: (name) => set((state) => {
+      const idx = state.selectedColumns.indexOf(name);
+      const next = idx >= 0 ? state.selectedColumns.filter((n) => n !== name) : [...state.selectedColumns, name];
+      return { selectedColumns: next, lastSelectedColumn: name, editingColumn: null };
+    }),
+    selectColumnRange: (name, allNames) => set((state) => {
+      const anchor = state.lastSelectedColumn;
+      if (!anchor) return { selectedColumns: [name], lastSelectedColumn: name, editingColumn: null };
+      const anchorIdx = allNames.indexOf(anchor);
+      const targetIdx = allNames.indexOf(name);
+      if (anchorIdx < 0 || targetIdx < 0) return { selectedColumns: [name], lastSelectedColumn: name, editingColumn: null };
+      const start = Math.min(anchorIdx, targetIdx);
+      const end = Math.max(anchorIdx, targetIdx);
+      return { selectedColumns: allNames.slice(start, end + 1), editingColumn: null };
+    }),
+    clearColumnSelection: () => set({ selectedColumns: [], lastSelectedColumn: null, editingColumn: null }),
+    setEditingColumn: (name) => set({ editingColumn: name }),
+    // Annotation selection actions
+    selectAnnotation: (annotationId) => set({
+      selectedAnnotation: annotationId,
+      selectedNode: null,
+      detailPanelOpen: false,
+      pendingDeleteConfirmation: false,
+      selectedEdge: null,
+      selectedEdges: [],
+      highlightedColumns: /* @__PURE__ */ new Set(),
+      selectedColumns: [],
+      lastSelectedColumn: null,
+      editingColumn: null
+    })
+  };
+}
+function createCanvasStore(initial) {
+  return createStore()((set) => ({
+    ...createCanvasSlice(set),
+    ...initial
+  }));
+}
+var CanvasStoreContext = createContext(null);
+function CanvasStoreProvider({ store, children }) {
+  return createElement(CanvasStoreContext.Provider, { value: store }, children);
+}
+function useEditorStoreApi() {
+  const store = useContext(CanvasStoreContext);
+  if (!store) {
+    throw new Error("useEditorStore must be used inside a CanvasStoreProvider (or <ErdCanvas>).");
+  }
+  return store;
+}
+function useEditorStore(selector) {
+  return useStore(useEditorStoreApi(), selector);
+}
+
+export {
+  createCanvasSlice,
+  createCanvasStore,
+  CanvasStoreProvider,
+  useEditorStoreApi,
+  useEditorStore
+};

package/dist/editor.js

@@ -0,0 +1,124 @@
+import {
+  ADDITIVE_BADGE,
+  ADDITIVE_TITLE,
+  ANNOTATION_COLORS,
+  ANNOTATION_MINIMAP_COLORS,
+  AnnotationEdge,
+  AnnotationNode,
+  CanvasBackdrop,
+  CanvasEnvironmentProvider,
+  ColumnRowEditor,
+  DISCREPANCY_PHRASE,
+  DataTypeSelect,
+  DetailPanel,
+  ErdCanvas,
+  FkEdge,
+  KeyBadge,
+  KeyBadgeGroup,
+  Legend,
+  ModelNode,
+  NOOP_CANVAS_HOST,
+  SCD_BADGE,
+  SCD_TITLE,
+  SOURCE_LABEL,
+  SOURCE_LEGEND_DESC,
+  SOURCE_ORDER,
+  SOURCE_PHRASE,
+  STAGE_HEX,
+  applyNodeOverlays,
+  canvasEdgeTypes,
+  canvasNodeTypes,
+  edgeHoverText,
+  getDataTypeColor,
+  nodeRect,
+  pickHandleSides,
+  repickHandleSides,
+  stageNodeColor,
+  swapCardinality,
+  transformDomain,
+  useCanvasGraph,
+  useCanvasHost,
+  useColumnReorder,
+  useFocusWithinRow,
+  useIsViewer,
+  useLongPressDrag,
+  useSend
+} from "./chunk-3PJCC7BX.js";
+import "./chunk-QZGU5NZH.js";
+import "./chunk-6XQXDZ4R.js";
+import {
+  COLLAPSED_COLUMN_LIMIT,
+  NODE_THRESHOLD,
+  NODE_WIDTH,
+  countVisibleColumnRows,
+  estimateNodeHeight,
+  estimateNodeWidth,
+  resolveNodeDimensions,
+  useColumnExpansion
+} from "./chunk-HOQPSLHQ.js";
+import {
+  CanvasStoreProvider,
+  createCanvasSlice,
+  createCanvasStore,
+  useEditorStore,
+  useEditorStoreApi
+} from "./chunk-WOTSQZCQ.js";
+export {
+  ADDITIVE_BADGE,
+  ADDITIVE_TITLE,
+  ANNOTATION_COLORS,
+  ANNOTATION_MINIMAP_COLORS,
+  AnnotationEdge,
+  AnnotationNode,
+  COLLAPSED_COLUMN_LIMIT,
+  CanvasBackdrop,
+  CanvasEnvironmentProvider,
+  CanvasStoreProvider,
+  ColumnRowEditor,
+  DISCREPANCY_PHRASE,
+  DataTypeSelect,
+  DetailPanel,
+  ErdCanvas,
+  FkEdge,
+  KeyBadge,
+  KeyBadgeGroup,
+  Legend,
+  ModelNode,
+  NODE_THRESHOLD,
+  NODE_WIDTH,
+  NOOP_CANVAS_HOST,
+  SCD_BADGE,
+  SCD_TITLE,
+  SOURCE_LABEL,
+  SOURCE_LEGEND_DESC,
+  SOURCE_ORDER,
+  SOURCE_PHRASE,
+  STAGE_HEX,
+  applyNodeOverlays,
+  canvasEdgeTypes,
+  canvasNodeTypes,
+  countVisibleColumnRows,
+  createCanvasSlice,
+  createCanvasStore,
+  edgeHoverText,
+  estimateNodeHeight,
+  estimateNodeWidth,
+  getDataTypeColor,
+  nodeRect,
+  pickHandleSides,
+  repickHandleSides,
+  resolveNodeDimensions,
+  stageNodeColor,
+  swapCardinality,
+  transformDomain,
+  useCanvasGraph,
+  useCanvasHost,
+  useColumnExpansion,
+  useColumnReorder,
+  useEditorStore,
+  useEditorStoreApi,
+  useFocusWithinRow,
+  useIsViewer,
+  useLongPressDrag,
+  useSend
+};

package/dist/index.js

@@ -0,0 +1,16 @@
+import {
+  ErdCanvas,
+  nodeRect,
+  pickHandleSides,
+  repickHandleSides,
+  transformDomain
+} from "./chunk-3PJCC7BX.js";
+import "./chunk-HOQPSLHQ.js";
+import "./chunk-WOTSQZCQ.js";
+export {
+  ErdCanvas,
+  nodeRect,
+  pickHandleSides,
+  repickHandleSides,
+  transformDomain
+};

package/dist/sizing.js

@@ -0,0 +1,16 @@
+import "./chunk-6XQXDZ4R.js";
+import {
+  NODE_WIDTH,
+  countVisibleColumnRows,
+  estimateNodeHeight,
+  estimateNodeWidth,
+  resolveNodeDimensions
+} from "./chunk-HOQPSLHQ.js";
+import "./chunk-WOTSQZCQ.js";
+export {
+  NODE_WIDTH,
+  countVisibleColumnRows,
+  estimateNodeHeight,
+  estimateNodeWidth,
+  resolveNodeDimensions
+};

package/dist/store.js

@@ -0,0 +1,15 @@
+import "./chunk-QZGU5NZH.js";
+import {
+  CanvasStoreProvider,
+  createCanvasSlice,
+  createCanvasStore,
+  useEditorStore,
+  useEditorStoreApi
+} from "./chunk-WOTSQZCQ.js";
+export {
+  CanvasStoreProvider,
+  createCanvasSlice,
+  createCanvasStore,
+  useEditorStore,
+  useEditorStoreApi
+};