@datnguye/erd-flow 1.0.0 → 1.0.1

package/README.md

@@ -5,8 +5,7 @@
 [![npm version](https://img.shields.io/npm/v/%40datnguye%2Ferd-flow)](https://www.npmjs.com/package/@datnguye/erd-flow)
 [![npm downloads](https://img.shields.io/npm/dm/%40datnguye%2Ferd-flow)](https://www.npmjs.com/package/@datnguye/erd-flow)
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)
-[![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6.svg)](./tsconfig.json)
-[![React](https://img.shields.io/badge/React-18-61dafb.svg)](https://react.dev)
+[![GitHub stars](https://img.shields.io/github/stars/datnguye/erd-flow)](https://github.com/datnguye/erd-flow/stargazers)
 
 A [React Flow](https://reactflow.dev) entity-relationship diagram for
 dbt projects: table nodes with per-column PK/FK badges, self-drawing foreign-key
@@ -20,6 +19,26 @@ static docs SPA) and [dbterd-vscode](https://github.com/datnguye/dbterd-vscode)
 (a VS Code webview). Turns out one diagram is enough for two very different
 homes.
 
+## Demo
+
+![The erd-flow demo: table cards with PK/FK badges and self-drawing foreign-key edges landing on the joined rows, in the hierarchical layout](docs/demo.png)
+
+The repo ships a Vite playground wired to a sample dbt-style payload — the
+fastest way to see the diagram move before writing a line of host code:
+
+```bash
+git clone https://github.com/datnguye/erd-flow
+cd erd-flow
+npm install
+npm run dev
+```
+
+Open the printed URL at `/demo/index.html`. The toolbar switches layout
+(hierarchical / radial / force), focuses a table's FK neighbourhood, toggles
+column collapsing, and locks the canvas. The same knobs work as URL params for
+sharable states: `?layout=hierarchical`, `?focus=<node-id>`, `?collapse=off`,
+`?locked=on`.
+
 ## Install
 
 ```bash
@@ -66,7 +85,7 @@ export function Diagram({ payload }) {
 | `collapseColumns` | `boolean` | Collapse wide tables to a few rows with a "N more" toggle (default `true`). `false` shows every column — for a focused view where join columns must stay visible. |
 | `expandAll` | `boolean` | Controlled expand-all: forces every collapsible table open (`true`) or closed (`false`). Omit to let per-table toggles work independently. |
 | `onExpandStateChange` | `({ allExpanded, canExpand }) => void` | Reports the aggregate expand state so a host can label/disable its own expand-all button. |
-| `interactive` | `boolean` | Pan / zoom / drag (default `true`). `false` locks the canvas — gate it behind a "click to unlock" affordance. |
+| `interactive` | `boolean` | Pan / zoom / drag (default `true`). `false` locks the canvas and releases the wheel so the page scrolls past it — gate it behind a "click to unlock" affordance. |
 | `onNodeActivate` | `(node \| null) => void` | Header click activates; pane click clears. Render your own details pane. |
 | `onOpenNode` | `(node) => void` | Table double-click — open the backing model. |
 | `resourceMeta` | `Record<string, ResourceMeta>` | Colour/icon per `resource_type`. Merged over dbt defaults. |

package/dist/index.js

@@ -944,6 +944,7 @@ function no(t) {
       zoomOnDoubleClick: a,
       nodesDraggable: a,
       panOnScroll: !1,
+      preventScrolling: a,
       children: [
         I ? /* @__PURE__ */ b(je, {}) : null,
         y ? /* @__PURE__ */ b(Ve, {}) : null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datnguye/erd-flow",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "An entity-relationship diagram component for dbt projects — table nodes, self-drawing foreign-key edges, and pluggable layouts.",
   "type": "module",
   "license": "MIT",