@msdshsk/react-er-canvas 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,13 +1,15 @@
 import { a as e, c as t, i as n, n as r, o as i, r as a, s as o, t as s } from "./core-DZ30VgUT.js";
-import { Fragment as c, createContext as l, memo as u, useCallback as d, useContext as f, useEffect as p, useMemo as m, useState as h } from "react";
-import { Background as ee, BaseEdge as g, Controls as _, EdgeLabelRenderer as v, Handle as y, MiniMap as te, Position as b, ReactFlow as ne, getSmoothStepPath as x, useNodesState as S } from "@xyflow/react";
-import { Fragment as C, jsx as w, jsxs as T } from "react/jsx-runtime";
+import { Fragment as c, createContext as l, forwardRef as u, memo as d, useCallback as f, useContext as p, useEffect as m, useImperativeHandle as h, useMemo as g, useRef as _, useState as v } from "react";
+import { Background as y, BaseEdge as b, Controls as ee, EdgeLabelRenderer as x, Handle as S, MiniMap as te, Position as C, ReactFlow as ne, getSmoothStepPath as w, useNodesState as re, useReactFlow as T } from "@xyflow/react";
+import { Fragment as E, jsx as D, jsxs as O } from "react/jsx-runtime";
 //#region src/components/TableNode.tsx
-var E = l(/* @__PURE__ */ new Map()), D = l({
+var k = l(/* @__PURE__ */ new Map()), A = l({
 	enabled: !1,
+	showSelectAll: !1,
 	selected: /* @__PURE__ */ new Set(),
-	onToggle: () => void 0
-}), O = l(!1), k = l({}), A = {
+	onToggle: () => void 0,
+	onToggleAll: () => void 0
+}), ie = l(!1), j = l({}), M = {
 	pk: {
 		label: "PK",
 		bg: "#f59e0b"
@@ -21,9 +23,9 @@ var E = l(/* @__PURE__ */ new Map()), D = l({
 		bg: "#10b981"
 	}
 };
-function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabled: i, selected: a, onSelectToggle: o }) {
+function N({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabled: i, selected: a, onSelectToggle: o }) {
 	let s = [];
-	return t.keys.pk && s.push(A.pk), t.keys.fk && s.push(A.fk), t.keys.uk && s.push(A.uk), /* @__PURE__ */ T("div", {
+	return t.keys.pk && s.push(M.pk), t.keys.fk && s.push(M.fk), t.keys.uk && s.push(M.uk), /* @__PURE__ */ O("div", {
 		title: t.comment,
 		onClick: r ? () => r(e, t.name) : void 0,
 		style: {
@@ -41,7 +43,7 @@ function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 			transition: "background 0.15s"
 		},
 		children: [
-			i && /* @__PURE__ */ w("input", {
+			i && /* @__PURE__ */ D("input", {
 				type: "checkbox",
 				checked: a,
 				onChange: (e) => o(e.target.checked),
@@ -54,14 +56,14 @@ function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 					cursor: "pointer"
 				}
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ D("span", {
 				style: {
 					display: "flex",
 					gap: 2,
 					flexShrink: 0,
 					minWidth: 18
 				},
-				children: s.map((e) => /* @__PURE__ */ w("span", {
+				children: s.map((e) => /* @__PURE__ */ D("span", {
 					style: {
 						display: "inline-block",
 						padding: "0 4px",
@@ -75,7 +77,7 @@ function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 					children: e.label
 				}, e.label))
 			}),
-			/* @__PURE__ */ w("span", {
+			/* @__PURE__ */ D("span", {
 				style: {
 					flexShrink: 0,
 					fontWeight: t.keys.pk ? 600 : 400,
@@ -83,7 +85,7 @@ function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 				},
 				children: t.name
 			}),
-			t.type && /* @__PURE__ */ w("span", {
+			t.type && /* @__PURE__ */ D("span", {
 				style: {
 					flex: 1,
 					textAlign: "right",
@@ -98,8 +100,22 @@ function j({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 		]
 	});
 }
-var M = u(function({ data: e }) {
-	let { table: t } = e, n = f(E), r = f(D), i = f(O), a = f(k), o = a.onColumnClick, s = n.get(t.name), l = t.group ? "#1e40af" : "#374151", u = (e) => ({
+var ae = d(function({ data: e }) {
+	let { table: t } = e, n = p(k), r = p(A), i = p(ie), a = p(j), o = a.onColumnClick, s = n.get(t.name), l = t.group ? "#1e40af" : "#374151", u = r.enabled && r.showSelectAll && t.columns.length > 0, d = g(() => t.columns.map((e) => e.name), [t.columns]), f = g(() => {
+		if (!u) return 0;
+		let e = 0;
+		for (let n of d) r.selected.has(`${t.name}.${n}`) && e++;
+		return e;
+	}, [
+		u,
+		d,
+		r.selected,
+		t.name
+	]), h = u && f === d.length, v = u && f > 0 && f < d.length, y = _(null);
+	m(() => {
+		y.current && (y.current.indeterminate = v);
+	}, [v]);
+	let b = (e) => ({
 		...e,
 		width: i ? 9 : 6,
 		height: i ? 9 : 6,
@@ -110,7 +126,7 @@ var M = u(function({ data: e }) {
 		pointerEvents: i ? "auto" : "none",
 		cursor: i ? "crosshair" : "default"
 	});
-	return /* @__PURE__ */ T("div", {
+	return /* @__PURE__ */ O("div", {
 		style: {
 			background: "#fff",
 			border: "1px solid #c4c4c4",
@@ -124,19 +140,19 @@ var M = u(function({ data: e }) {
 			position: "relative"
 		},
 		children: [
-			/* @__PURE__ */ w(y, {
+			/* @__PURE__ */ D(S, {
 				id: "__default-target",
 				type: "target",
-				position: b.Left,
-				style: u({ top: 32 / 2 })
+				position: C.Left,
+				style: b({ top: 32 / 2 })
 			}),
-			/* @__PURE__ */ w(y, {
+			/* @__PURE__ */ D(S, {
 				id: "__default-source",
 				type: "source",
-				position: b.Right,
-				style: u({ top: 32 / 2 })
+				position: C.Right,
+				style: b({ top: 32 / 2 })
 			}),
-			/* @__PURE__ */ T("div", {
+			/* @__PURE__ */ O("div", {
 				style: {
 					padding: "6px 10px",
 					background: l,
@@ -152,21 +168,47 @@ var M = u(function({ data: e }) {
 					borderTopLeftRadius: 6,
 					borderTopRightRadius: 6
 				},
-				children: [/* @__PURE__ */ w("span", {
+				children: [/* @__PURE__ */ O("span", {
 					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
 						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap"
+						minWidth: 0
 					},
-					children: t.name
-				}), /* @__PURE__ */ T("span", {
+					children: [u && /* @__PURE__ */ D("input", {
+						ref: y,
+						type: "checkbox",
+						className: "nodrag",
+						checked: h,
+						onChange: (e) => r.onToggleAll(t.name, d, e.target.checked),
+						onClick: (e) => e.stopPropagation(),
+						onMouseDown: (e) => e.stopPropagation(),
+						title: h ? "Deselect all columns" : v ? "Some columns selected — click to select all" : "Select all columns",
+						style: {
+							width: 13,
+							height: 13,
+							margin: 0,
+							flexShrink: 0,
+							cursor: "pointer",
+							accentColor: "#3b82f6"
+						}
+					}), /* @__PURE__ */ D("span", {
+						style: {
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap"
+						},
+						children: t.name
+					})]
+				}), /* @__PURE__ */ O("span", {
 					style: {
 						display: "flex",
 						alignItems: "center",
 						gap: 4,
 						flexShrink: 0
 					},
-					children: [t.group && /* @__PURE__ */ w("span", {
+					children: [t.group && /* @__PURE__ */ D("span", {
 						style: {
 							fontSize: 10,
 							opacity: .75,
@@ -176,10 +218,10 @@ var M = u(function({ data: e }) {
 							borderRadius: 3
 						},
 						children: t.group
-					}), a.onTableRemove && /* @__PURE__ */ w("button", {
+					}), a.onTableRemove && /* @__PURE__ */ D("button", {
 						className: "nodrag",
 						onClick: (e) => {
-							e.stopPropagation(), a.onTableRemove?.(t.name);
+							e.stopPropagation(), a.onTableRemove?.(t.name, t.meta);
 						},
 						onMouseDown: (e) => e.stopPropagation(),
 						title: "Remove this table",
@@ -204,35 +246,35 @@ var M = u(function({ data: e }) {
 				})]
 			}),
 			t.columns.map((e, n) => {
-				let i = 32 + n * 22 + 22 / 2, a = s?.has(e.name) ?? !1, l = `${t.name}.${e.name}`, d = r.enabled && r.selected.has(l);
-				return /* @__PURE__ */ T(c, { children: [
-					/* @__PURE__ */ w(y, {
+				let i = 32 + n * 22 + 22 / 2, a = s?.has(e.name) ?? !1, l = `${t.name}.${e.name}`, u = r.enabled && r.selected.has(l);
+				return /* @__PURE__ */ O(c, { children: [
+					/* @__PURE__ */ D(S, {
 						id: `${e.name}__target`,
 						type: "target",
-						position: b.Left,
-						style: u({ top: i })
+						position: C.Left,
+						style: b({ top: i })
 					}),
-					/* @__PURE__ */ w(y, {
+					/* @__PURE__ */ D(S, {
 						id: `${e.name}__source`,
 						type: "source",
-						position: b.Right,
-						style: u({ top: i })
+						position: C.Right,
+						style: b({ top: i })
 					}),
-					/* @__PURE__ */ w(j, {
+					/* @__PURE__ */ D(N, {
 						tableName: t.name,
 						column: e,
 						highlighted: a,
 						onClick: o,
 						selectionEnabled: r.enabled,
-						selected: d,
+						selected: u,
 						onSelectToggle: (n) => r.onToggle(t.name, e.name, n)
 					})
 				] }, `${e.name}-${n}`);
 			})
 		]
 	});
-}), N = u(function({ id: e, sourceX: t, sourceY: n, targetX: r, targetY: i, sourcePosition: a, targetPosition: o, data: s, selected: c }) {
-	let [l, u, d] = x({
+}), P = d(function({ id: e, sourceX: t, sourceY: n, targetX: r, targetY: i, sourcePosition: a, targetPosition: o, data: s, selected: c }) {
+	let [l, u, d] = w({
 		sourceX: t,
 		sourceY: n,
 		sourcePosition: a,
@@ -240,15 +282,15 @@ var M = u(function({ data: e }) {
 		targetY: i,
 		targetPosition: o
 	}), f = s ?? {}, p = !!c || !!f.hovered, m = f.color || "#3b82f6";
-	return /* @__PURE__ */ T(C, { children: [/* @__PURE__ */ w(g, {
+	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(b, {
 		id: e,
 		path: l,
 		style: {
 			stroke: m,
-			strokeWidth: p ? 2.5 : 2,
-			strokeDasharray: "6 3"
+			strokeWidth: f.strokeWidth ?? (p ? 2.5 : 2),
+			strokeDasharray: f.strokeDasharray ?? "6 3"
 		}
-	}), /* @__PURE__ */ w(v, { children: /* @__PURE__ */ T("div", {
+	}), /* @__PURE__ */ D(x, { children: /* @__PURE__ */ O("div", {
 		className: "nodrag nopan",
 		style: {
 			position: "absolute",
@@ -267,7 +309,7 @@ var M = u(function({ data: e }) {
 			boxShadow: p ? "0 0 0 2px rgba(0,0,0,0.4)" : "0 1px 2px rgba(0,0,0,0.15)",
 			userSelect: "none"
 		},
-		children: [/* @__PURE__ */ w("span", { children: f.type }), f.onDelete && /* @__PURE__ */ w("button", {
+		children: [/* @__PURE__ */ D("span", { children: f.type }), f.onDelete && /* @__PURE__ */ D("button", {
 			type: "button",
 			onClick: (e) => {
 				e.stopPropagation(), f.onDelete?.();
@@ -293,8 +335,8 @@ var M = u(function({ data: e }) {
 			children: "×"
 		})]
 	}) })] });
-}), P = { table: M }, re = { joinEdge: N };
-function ie(e) {
+}), oe = { table: ae }, se = { joinEdge: P };
+function ce(e) {
 	try {
 		return {
 			model: t(e),
@@ -320,49 +362,60 @@ function L(e) {
 function R(e) {
 	return `${e.table}.${e.column}`;
 }
-var ae = {
+var le = {
 	INNER: "#3b82f6",
 	LEFT: "#8b5cf6",
 	RIGHT: "#a855f7",
 	FULL: "#ec4899",
 	CROSS: "#6b7280"
 };
-function z(e) {
-	let { source: t, model: n, algorithm: r, direction: a, aspectRatio: o, positions: s, onPositionsChange: c, showColumnCheckboxes: l, selectedColumns: u, onColumnSelectionChange: f, enableManualJoins: g, joins: v, onJoinConnect: y, onJoinDelete: b, onTableRemove: x, onColumnClick: C, onTableClick: A, deleteKeyCode: j = "Delete", className: M, style: N, highlightReferencesOnHover: z = !0 } = e, { model: B, error: V } = m(() => n ? {
-		model: n,
+function ue({ apiRef: e, wrapperRef: t }) {
+	let n = T();
+	return h(e, () => ({
+		fitView: (e) => n.fitView(e),
+		getViewport: () => n.getViewport(),
+		setViewport: (e) => n.setViewport(e),
+		getNodesBounds: () => n.getNodesBounds(n.getNodes()),
+		getWrapperElement: () => t.current,
+		getViewportElement: () => t.current?.querySelector(".react-flow__viewport") ?? null
+	}), [n, t]), null;
+}
+var z = u(function(e, t) {
+	let { source: n, model: r, algorithm: a, direction: o, aspectRatio: s, positions: c, onPositionsChange: l, showColumnCheckboxes: u, selectedColumns: d, onColumnSelectionChange: p, enableManualJoins: h, joins: b, onJoinConnect: x, onJoinDelete: S, onJoinClick: C, joinStyle: w, onTableRemove: T, onColumnClick: E, onTableClick: M, showSelectAllPerTable: N, deleteKeyCode: ae = "Delete", className: P, style: z, highlightReferencesOnHover: B = !0 } = e, { model: V, error: H } = g(() => r ? {
+		model: r,
 		error: null
-	} : t == null ? {
+	} : n == null ? {
 		model: null,
 		error: null
-	} : ie(t), [t, n]), [H, U] = h(null), [W, G] = h(null);
-	p(() => {
-		if (!B) {
-			U(null);
+	} : ce(n), [n, r]), [U, W] = v(null), [G, K] = v(null);
+	m(() => {
+		if (!V) {
+			W(null);
 			return;
 		}
 		let e = !1;
-		return i(B, {
-			algorithm: r,
-			direction: a,
-			aspectRatio: o
+		return i(V, {
+			algorithm: a,
+			direction: o,
+			aspectRatio: s
 		}).then((t) => {
-			e || U(t);
+			e || W(t);
 		}), () => {
 			e = !0;
 		};
 	}, [
-		B,
-		r,
+		V,
 		a,
-		o
+		o,
+		s
 	]);
-	let K = m(() => {
-		if (!H || !B) return [];
-		let e = new Map(B.tables.map((e) => [e.name, e])), t = [];
-		for (let n of H.nodes) {
+	let q = g(() => {
+		if (!U || !V) return [];
+		let e = new Map(V.tables.map((e) => [e.name, e])), t = [];
+		for (let n of U.nodes) {
 			let r = e.get(n.id);
 			if (!r) continue;
-			let i = s?.[n.id], a = { table: r };
+			let i = c?.[n.id], a = { table: r };
 			t.push({
 				id: n.id,
 				type: "table",
@@ -379,30 +432,30 @@ function z(e) {
 		}
 		return t;
 	}, [
-		H,
-		B,
-		s
-	]), [q, J, oe] = S(K);
-	p(() => {
-		J(K);
-	}, [K, J]);
-	let se = d((e, t, n) => {
-		if (!c) return;
-		let r = { ...s ?? {} };
+		U,
+		V,
+		c
+	]), [de, J, fe] = re(q);
+	m(() => {
+		J(q);
+	}, [q, J]);
+	let pe = f((e, t, n) => {
+		if (!l) return;
+		let r = { ...c ?? {} };
 		for (let e of n) r[e.id] = {
 			x: e.position.x,
 			y: e.position.y
 		};
-		c(r);
-	}, [s, c]), Y = m(() => {
-		if (!(!W || !B)) return B.relations.find((e) => e.id === W);
-	}, [W, B]), X = m(() => {
-		if (!W || !v || !W.startsWith(I)) return;
-		let e = W.slice(5);
-		return v.find((t) => t.id === e);
-	}, [W, v]), ce = m(() => {
+		l(r);
+	}, [c, l]), Y = g(() => {
+		if (!(!G || !V)) return V.relations.find((e) => e.id === G);
+	}, [G, V]), X = g(() => {
+		if (!G || !b || !G.startsWith(I)) return;
+		let e = G.slice(5);
+		return b.find((t) => t.id === e);
+	}, [G, b]), me = g(() => {
 		let e = /* @__PURE__ */ new Map();
-		if (!z) return e;
+		if (!B) return e;
 		let t = (t, n) => {
 			if (!n) return;
 			let r = e.get(t) ?? /* @__PURE__ */ new Set();
@@ -412,31 +465,50 @@ function z(e) {
 	}, [
 		Y,
 		X,
-		z
-	]), Z = m(() => new Set((u ?? []).map(R)), [u]), Q = d((e, t, n) => {
-		if (!f) return;
-		let r = u ?? [];
+		B
+	]), Z = g(() => new Set((d ?? []).map(R)), [d]), Q = f((e, t, n) => {
+		if (!p) return;
+		let r = d ?? [];
 		if (n) {
 			if (r.some((n) => n.table === e && n.column === t)) return;
-			f([...r, {
+			p([...r, {
 				table: e,
 				column: t
 			}]);
-		} else f(r.filter((n) => !(n.table === e && n.column === t)));
-	}, [u, f]), le = m(() => ({
-		enabled: l ?? !1,
+		} else p(r.filter((n) => !(n.table === e && n.column === t)));
+	}, [d, p]), he = f((e, t, n) => {
+		if (!p) return;
+		let r = d ?? [];
+		if (n) {
+			let n = new Set(r.map(R)), i = [];
+			for (let r of t) n.has(`${e}.${r}`) || i.push({
+				table: e,
+				column: r
+			});
+			if (i.length === 0) return;
+			p([...r, ...i]);
+		} else {
+			let n = new Set(t);
+			p(r.filter((t) => !(t.table === e && n.has(t.column))));
+		}
+	}, [d, p]), ge = g(() => ({
+		enabled: u ?? !1,
+		showSelectAll: N ?? !1,
 		selected: Z,
-		onToggle: Q
+		onToggle: Q,
+		onToggleAll: he
 	}), [
-		l,
+		u,
+		N,
 		Z,
-		Q
-	]), ue = m(() => {
-		if (!H || !B) return [];
-		let e = new Set(B.tables.map((e) => e.name)), t = new Map(B.relations.map((e) => [e.id, e])), n = [];
-		for (let r of H.edges) {
+		Q,
+		he
+	]), _e = g(() => {
+		if (!U || !V) return [];
+		let e = new Set(V.tables.map((e) => e.name)), t = new Map(V.relations.map((e) => [e.id, e])), n = [];
+		for (let r of U.edges) {
 			if (!e.has(r.source) || !e.has(r.target)) continue;
-			let i = t.get(r.id), a = r.id === W;
+			let i = t.get(r.id), a = r.id === G;
 			n.push({
 				id: r.id,
 				source: r.source,
@@ -464,13 +536,15 @@ function z(e) {
 			});
 		}
 		let r = [];
-		for (let t of v ?? []) {
+		for (let t of b ?? []) {
 			if (!e.has(t.source.table) || !e.has(t.target.table)) continue;
-			let n = `${I}${t.id}`, i = n === W, a = ae[t.type] ?? "#3b82f6", o = {
+			let n = `${I}${t.id}`, i = n === G, a = w?.(t), o = a?.stroke ?? le[t.type] ?? "#3b82f6", s = {
 				type: t.type,
-				color: a,
+				color: o,
+				strokeWidth: a?.strokeWidth,
+				strokeDasharray: a?.strokeDasharray,
 				hovered: i,
-				onDelete: b ? () => b(t.id) : void 0
+				onDelete: S ? () => S(t.id, t.meta) : void 0
 			};
 			r.push({
 				id: n,
@@ -480,40 +554,50 @@ function z(e) {
 				targetHandle: F("target", t.target.column),
 				type: "joinEdge",
 				deletable: !0,
-				data: o
+				data: s
 			});
 		}
 		return [...n, ...r];
 	}, [
-		H,
-		B,
-		v,
-		W,
-		b
-	]), de = d((e) => {
-		y && (!e.source || !e.target || y({
+		U,
+		V,
+		b,
+		G,
+		S,
+		w
+	]), ve = f((e) => {
+		x && (!e.source || !e.target || x({
 			table: e.source,
 			column: L(e.sourceHandle)
 		}, {
 			table: e.target,
 			column: L(e.targetHandle)
 		}));
-	}, [y]), fe = d((e) => {
-		if (b) for (let t of e) t.id.startsWith(I) && b(t.id.slice(5));
-	}, [b]), $ = !!g, pe = m(() => ({
-		onTableRemove: x,
-		onColumnClick: C
-	}), [x, C]);
-	return /* @__PURE__ */ T("div", {
-		className: M,
+	}, [x]), ye = f((e) => {
+		if (S) for (let t of e) {
+			if (!t.id.startsWith(I)) continue;
+			let e = t.id.slice(5), n = b?.find((t) => t.id === e);
+			S(e, n?.meta);
+		}
+	}, [S, b]), be = f((e, t) => {
+		if (!C || !t.id.startsWith(I)) return;
+		let n = t.id.slice(5), r = b?.find((e) => e.id === n);
+		C(n, r?.meta);
+	}, [C, b]), xe = !!h, Se = g(() => ({
+		onTableRemove: T,
+		onColumnClick: E
+	}), [T, E]), $ = _(null);
+	return /* @__PURE__ */ O("div", {
+		ref: $,
+		className: P,
 		style: {
 			width: "100%",
 			height: "100%",
 			position: "relative",
-			...N
+			...z
 		},
 		children: [
-			V && /* @__PURE__ */ w("div", {
+			H && /* @__PURE__ */ D("div", {
 				style: {
 					position: "absolute",
 					top: 8,
@@ -529,9 +613,9 @@ function z(e) {
 					fontSize: 12,
 					whiteSpace: "pre-wrap"
 				},
-				children: V.message
+				children: H.message
 			}),
-			!V && !H && /* @__PURE__ */ w("div", {
+			!H && !U && /* @__PURE__ */ D("div", {
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -543,39 +627,47 @@ function z(e) {
 				},
 				children: "Computing layout…"
 			}),
-			/* @__PURE__ */ w(E.Provider, {
-				value: ce,
-				children: /* @__PURE__ */ w(D.Provider, {
-					value: le,
-					children: /* @__PURE__ */ w(O.Provider, {
-						value: $,
-						children: /* @__PURE__ */ w(k.Provider, {
-							value: pe,
-							children: /* @__PURE__ */ T(ne, {
-								nodes: q,
-								edges: ue,
-								nodeTypes: P,
-								edgeTypes: re,
+			/* @__PURE__ */ D(k.Provider, {
+				value: me,
+				children: /* @__PURE__ */ D(A.Provider, {
+					value: ge,
+					children: /* @__PURE__ */ D(ie.Provider, {
+						value: xe,
+						children: /* @__PURE__ */ D(j.Provider, {
+							value: Se,
+							children: /* @__PURE__ */ O(ne, {
+								nodes: de,
+								edges: _e,
+								nodeTypes: oe,
+								edgeTypes: se,
 								fitView: !0,
-								onNodesChange: oe,
-								onNodeDragStop: se,
-								onNodeClick: A ? (e, t) => A(t.id) : void 0,
-								onEdgeMouseEnter: (e, t) => G(t.id),
-								onEdgeMouseLeave: () => G(null),
-								onConnect: de,
-								onEdgesDelete: fe,
+								onNodesChange: fe,
+								onNodeDragStop: pe,
+								onNodeClick: M ? (e, t) => {
+									let n = t.data?.table?.meta;
+									M(t.id, n);
+								} : void 0,
+								onEdgeMouseEnter: (e, t) => K(t.id),
+								onEdgeMouseLeave: () => K(null),
+								onEdgeClick: C ? be : void 0,
+								onConnect: ve,
+								onEdgesDelete: ye,
 								nodesDraggable: !0,
-								nodesConnectable: $,
+								nodesConnectable: xe,
 								elementsSelectable: !0,
-								deleteKeyCode: j,
+								deleteKeyCode: ae,
 								minZoom: .1,
 								maxZoom: 4,
 								children: [
-									/* @__PURE__ */ w(ee, {}),
-									/* @__PURE__ */ w(_, {}),
-									/* @__PURE__ */ w(te, {
+									/* @__PURE__ */ D(y, {}),
+									/* @__PURE__ */ D(ee, {}),
+									/* @__PURE__ */ D(te, {
 										pannable: !0,
 										zoomable: !0
+									}),
+									/* @__PURE__ */ D(ue, {
+										apiRef: t,
+										wrapperRef: $
 									})
 								]
 							})
@@ -585,7 +677,7 @@ function z(e) {
 			})
 		]
 	});
-}
+});
 //#endregion
 export { s as HEADER_HEIGHT, z as MermaidER, o as MermaidERParseError, r as NODE_WIDTH, a as ROW_HEIGHT, n as VERTICAL_PADDING, e as estimateNodeHeight, i as layoutER, t as parseMermaidER };