@erd-studio/renderer 0.1.4 → 0.4.0

package/dist/types/store/editorStore.d.ts

@@ -14,8 +14,11 @@
  */
 import { type ReactNode } from 'react';
 import { type StoreApi } from 'zustand';
-import type { DisplayDomain, ExistingModelPreview } from '@erd-studio/core';
-import type { ModelFlowNode, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+import type { CanvasContext, DisplaySubjectArea, ExistingTablePreview } from '@erd-studio/core';
+import type { TableFlowNode, FkFlowEdge, FkEdgeData, AnnotationFlowNode, AnnotationFlowEdge } from '../types/graph.js';
+import { type CanvasFocus } from '../lib/canvasFocus.js';
+import type { RoutedEdge } from '../lib/edgeRouting/types.js';
+import { type LineStyle } from '../lib/edgeRouting/lineStyle.js';
 /** Context menu state for edge right-click. */
 export interface EdgeContextMenu {
     type: 'edge';
@@ -70,15 +73,15 @@ export interface CanvasState {
     /** Whether a delete confirmation is pending (triggered by Delete key). */
     pendingDeleteConfirmation: boolean;
     /** The loaded domain data from the extension host (already reconciled with manifest). */
-    domain: DisplayDomain | null;
+    domain: DisplaySubjectArea | null;
     /** React Flow nodes (local state for selection/drag). */
-    nodes: (ModelFlowNode | AnnotationFlowNode)[];
+    nodes: (TableFlowNode | AnnotationFlowNode)[];
     /** React Flow edges. */
     edges: (FkFlowEdge | AnnotationFlowEdge)[];
     /** Annotation currently being edited (auto-focus textarea), or null. */
     editingAnnotationId: string | null;
     /** Models available to add from logical-models/ and manifest. */
-    existingModels: ExistingModelPreview[];
+    existingModels: ExistingTablePreview[];
     /** Context menu state (position and target), or null if closed. */
     contextMenu: ContextMenuState;
     /** Whether the legend panel is visible. */
@@ -101,6 +104,44 @@ export interface CanvasState {
     editingColumn: string | null;
     /** Currently selected annotation ID, or null. */
     selectedAnnotation: string | null;
+    /**
+     * Hover preview focus: the table the pointer rests on, its related tables
+     * and lines (`useHoverFocus`). Ephemeral UI state: never persisted, never
+     * posted to the host, never written to a file.
+     */
+    hoverFocus: CanvasFocus | null;
+    /**
+     * What carries the moving relationship arrows: `hoverFocus`, else the
+     * focus of the clicked table or line. Ephemeral, like `hoverFocus`.
+     */
+    flowFocus: CanvasFocus | null;
+    /**
+     * The project has no dbt project, so there is one stage only: the canvas
+     * drops the stage colours (`editor-canvas--neutral`) and the legend its
+     * Physical, ghost and comparison entries. Default false, today's look. The
+     * extension's store sets it from the host's `logicalOnly` flag; ErdCanvas
+     * from its `logicalOnly` prop.
+     */
+    logicalOnly: boolean;
+    /**
+     * What the editing host knows beyond the diagram (`CanvasContext`): each
+     * table's file, its relationships to tables not on the diagram, who reviews
+     * it. Logical stage only. Null by default and in the viewer, which never
+     * gets one: then the detail panel has no File line or "Not on this
+     * diagram" list and no node shows a "+n" chip.
+     */
+    canvasContext: CanvasContext | null;
+    /**
+     * How FK lines are drawn (`curved` or `hops`), a reader's view preference.
+     * The extension's store sets it from the host's `lineStyle` message (the
+     * `erdStudio.canvas.lineStyle` setting); ErdCanvas from its `lineStyle` prop.
+     */
+    lineStyle: LineStyle;
+    /**
+     * The routed FK lines by edge id, from `EdgeRouter`'s last pass. Null (or
+     * a line missing from it) means `FkEdge` draws its smooth-step fallback.
+     */
+    edgeRoutes: Map<string, RoutedEdge> | null;
 }
 export interface CanvasActions {
     setSearchQuery: (query: string) => void;
@@ -110,12 +151,12 @@ export interface CanvasActions {
     setDetailPanelOpen: (open: boolean) => void;
     /** Set pending delete confirmation state (triggered by Delete key). */
     setPendingDeleteConfirmation: (pending: boolean) => void;
-    setDomain: (domain: DisplayDomain) => void;
-    setNodes: (nodes: (ModelFlowNode | AnnotationFlowNode)[]) => void;
+    setDomain: (domain: DisplaySubjectArea) => void;
+    setNodes: (nodes: (TableFlowNode | AnnotationFlowNode)[]) => void;
     setEdges: (edges: (FkFlowEdge | AnnotationFlowEdge)[]) => void;
     /** Set the annotation currently being edited (auto-focus). */
     setEditingAnnotationId: (id: string | null) => void;
-    setExistingModels: (models: ExistingModelPreview[]) => void;
+    setExistingModels: (models: ExistingTablePreview[]) => void;
     /** Open context menu for an edge at the given position. */
     openEdgeContextMenu: (x: number, y: number, data: FkEdgeData) => void;
     /** Open context menu for a node at the given position. */
@@ -162,6 +203,16 @@ export interface CanvasActions {
     setEditingColumn: (name: string | null) => void;
     /** Select an annotation (clears model selection). */
     selectAnnotation: (annotationId: string | null) => void;
+    /** Set the hover preview focus; a focus equal by value is not written. */
+    setHoverFocus: (focus: CanvasFocus | null) => void;
+    /** Set the flowing focus; a focus equal by value is not written. */
+    setFlowFocus: (focus: CanvasFocus | null) => void;
+    /** Store the host's canvas context, or clear it (null). */
+    setCanvasContext: (context: CanvasContext | null) => void;
+    /** Change how FK lines are drawn. */
+    setLineStyle: (lineStyle: LineStyle) => void;
+    /** Store the router's latest routes (null: every line on the fallback). */
+    setEdgeRoutes: (routes: Map<string, RoutedEdge> | null) => void;
 }
 export type CanvasStore = CanvasState & CanvasActions;
 export type CanvasStoreApi = StoreApi<CanvasStore>;
@@ -183,3 +234,9 @@ export declare function CanvasStoreProvider({ store, children }: {
 export declare function useEditorStoreApi(): CanvasStoreApi;
 /** Select a value from the nearest canvas store; re-renders when it changes. */
 export declare function useEditorStore<T>(selector: (s: CanvasStore) => T): T;
+/**
+ * Like `useEditorStore`, but returns `fallback` instead of throwing when no
+ * `CanvasStoreProvider` is above. For presentation-only reads in components
+ * that are also rendered on their own (an `FkEdge` in a unit test).
+ */
+export declare function useEditorStoreOr<T>(selector: (s: CanvasStore) => T, fallback: T): T;

package/dist/types/types/graph.d.ts

@@ -2,15 +2,15 @@
  * Types for React Flow graph nodes and edges.
  *
  * These types define the data payloads for custom React Flow node and edge
- * components. The graph transformer converts DisplayDomain data into
+ * components. The graph transformer converts DisplaySubjectArea data into
  * these shapes.
  */
 import type { Node, Edge } from '@xyflow/react';
-import type { AnnotationColor, Cardinality, ColumnPair, DbtKeyHint, Layer, Meta, ModelLoadError, ModelLoadWarning, ModelRole, Stage } from '@erd-studio/core';
+import type { AnnotationColor, Cardinality, ColumnPair, DbtKeyHint, Layer, Meta, TableLoadError, TableLoadWarning, TableRole, Stage } from '@erd-studio/core';
 import type { LayerConfig } from '@erd-studio/core';
-import type { ModelDiscrepancy } from '@erd-studio/core';
+import type { TableDiscrepancy } from '@erd-studio/core';
 import type { PhysicalProvenance } from '@erd-studio/core';
-/** Column data enriched with PK/FK/NK indicators for display in ModelNode. */
+/** Column data enriched with PK/FK/NK indicators for display in TableNode. */
 export interface ColumnDisplay {
     name: string;
     dataType: string;
@@ -30,24 +30,43 @@ export interface ColumnDisplay {
     /** What dbt's tests say about the column (editable logical canvas only) — one line of its hover text. */
     dbtKey?: DbtKeyHint;
 }
-/** Data payload for a ModelNode React Flow node. */
-export type ModelNodeData = {
+/** Data payload for a TableNode React Flow node. */
+export type TableNodeData = {
     /** Model name (unique within a domain). */
     modelName: string;
     /**
      * Header label when it differs from `modelName`: the model's table name
      * (`alias`), qualified by schema when another model on the canvas would read
-     * the same. See `computeModelLabels`.
+     * the same. See `computeTableLabels`.
      */
     label?: string;
     /** The active design stage. */
     stage: Stage;
     /** Data warehouse layer. */
     layer: Layer;
-    /** Database schema the model materializes in (shown as badge text). */
+    /** Database schema the model materializes in (named in the badge's hover card). */
     schema?: string;
     /** Layer configuration for dynamic badge styling (color, abbreviation). */
     layerConfig?: LayerConfig;
+    /**
+     * The layer the table itself belongs to (`DisplayTable.layer`), when known.
+     * The header's badge always names the layer the table lives in: this one,
+     * else the diagram's `layer`. A known layer also draws the colour strip.
+     */
+    tableLayer?: Layer;
+    /** {@link tableLayer}'s config (its colour and abbreviation). */
+    tableLayerConfig?: LayerConfig;
+    /** Set when {@link tableLayer} is not the diagram's layer: a table this diagram borrows. */
+    otherLayer?: true;
+    /** The schema as a prefix of the name (`sales.fct_order`): set only when it is not the badge's layer id. */
+    shownSchema?: string;
+    /**
+     * Set when the project has one layer and every table is in it
+     * (`isSingleLayerProject`): the layer badge and colour strip are left off.
+     */
+    singleLayer?: true;
+    /** The warehouse name when it differs from the model name (`alias`), shown after it: `gold_orders  as orders`. */
+    alias?: string;
     /** Columns to display, enriched with PK/FK flags. */
     columns: ColumnDisplay[];
     /** Whether the node is dimmed (doesn't match current search query). */
@@ -65,7 +84,7 @@ export type ModelNodeData = {
     /** Grain statement — "One row per ___". Shown as subtitle on node. */
     grain?: string;
     /** Model's role in the data warehouse architecture. Shown as badge on node. */
-    modelRole?: ModelRole;
+    modelRole?: TableRole;
     /** Structured metadata (`meta:`) — shown in the name's hover tip. Absent when empty. */
     meta?: Meta;
     /** Whether this stage is read-only (physical). */
@@ -93,16 +112,16 @@ export type ModelNodeData = {
      * The model's file exists but could not be read (logical stage only): the
      * node shows the error and an "Open file" button instead of "No columns".
      */
-    loadError?: ModelLoadError;
+    loadError?: TableLoadError;
     /**
      * The model's file was read but needs fixing (logical stage only): a key
      * written twice, whose last value is shown (#164). Absent from an older core.
      */
-    loadWarning?: ModelLoadWarning;
+    loadWarning?: TableLoadWarning;
     /** Whether this model is in stub display mode (PK/NK columns only). */
     isStub: boolean;
     /** Per-model discrepancy data when a cross-stage comparison report is active. */
-    discrepancy?: ModelDiscrepancy;
+    discrepancy?: TableDiscrepancy;
     /** The stage currently being viewed (set when discrepancy overlay is active). */
     discrepancySourceStage?: Stage;
     /** The stage being compared against (set when discrepancy overlay is active). */
@@ -111,14 +130,14 @@ export type ModelNodeData = {
      * Index signature required by React Flow's Node generic.
      *
      * It also means an unknown or misspelled key type-checks, and a field written
-     * here but never destructured in ModelNode ships as dead payload — which is
+     * here but never destructured in TableNode ships as dead payload — which is
      * exactly how `hasRationale` and `modelRole` gained matching dead CSS. Add a
      * field here only together with the code that reads it.
      */
     [key: string]: unknown;
 };
 /** Typed React Flow node for a semantic model. */
-export type ModelFlowNode = Node<ModelNodeData, 'model'>;
+export type TableFlowNode = Node<TableNodeData, 'model'>;
 /** Data payload for an FkEdge React Flow edge. */
 export type FkEdgeData = {
     fromModel: string;
@@ -135,6 +154,11 @@ export type FkEdgeData = {
     pairs?: ColumnPair[];
     /** The composite's `compositeKey` name, alongside `pairs`. */
     compositeKey?: string;
+    /**
+     * The keys contradict its direction (`DisplayRelationship.keysContradict`,
+     * #163): drawn with a ⚠ and Turn round, except for viewers.
+     */
+    keysContradict?: true;
     /** Stage of the owning domain canvas — drives CSS colour class. */
     stage?: Stage;
     /** Discrepancy status for ghost/extra/mismatch edges. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erd-studio/renderer",
-  "version": "0.1.4",
+  "version": "0.4.0",
   "description": "ERD Studio's React Flow canvas: the entity-relationship diagram renderer shared by the VS Code extension, with a read-only viewer mode.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -36,6 +36,7 @@
   },
   "files": [
     "dist",
+    "CHANGELOG.md",
     "LICENSE",
     "README.md"
   ],
@@ -46,7 +47,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@erd-studio/core": "0.1.4",
+    "@erd-studio/core": "0.4.0",
     "zustand": "^5.0.0"
   },
   "peerDependencies": {