@msdshsk/react-er-canvas 0.0.2 → 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, forwardRef as u, memo as d, useCallback as f, useContext as p, useEffect as m, useImperativeHandle as h, useMemo as g, useRef as ee, useState as _ } from "react";
-import { Background as v, BaseEdge as y, Controls as te, EdgeLabelRenderer as b, Handle as x, MiniMap as S, Position as C, ReactFlow as ne, getSmoothStepPath as w, useNodesState as re, useReactFlow as T } from "@xyflow/react";
+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 k = l(/* @__PURE__ */ new Map()), A = l({
 	enabled: !1,
+	showSelectAll: !1,
 	selected: /* @__PURE__ */ new Set(),
-	onToggle: () => void 0
-}), j = l(!1), M = l({}), N = {
+	onToggle: () => void 0,
+	onToggleAll: () => void 0
+}), ie = l(!1), j = l({}), M = {
 	pk: {
 		label: "PK",
 		bg: "#f59e0b"
@@ -21,9 +23,9 @@ var k = l(/* @__PURE__ */ new Map()), A = l({
 		bg: "#10b981"
 	}
 };
-function P({ 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(N.pk), t.keys.fk && s.push(N.fk), t.keys.uk && s.push(N.uk), /* @__PURE__ */ O("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: {
@@ -98,8 +100,22 @@ function P({ tableName: e, column: t, highlighted: n, onClick: r, selectionEnabl
 		]
 	});
 }
-var F = d(function({ data: e }) {
-	let { table: t } = e, n = p(k), r = p(A), i = p(j), a = p(M), 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,
@@ -124,17 +140,17 @@ var F = d(function({ data: e }) {
 			position: "relative"
 		},
 		children: [
-			/* @__PURE__ */ D(x, {
+			/* @__PURE__ */ D(S, {
 				id: "__default-target",
 				type: "target",
 				position: C.Left,
-				style: u({ top: 32 / 2 })
+				style: b({ top: 32 / 2 })
 			}),
-			/* @__PURE__ */ D(x, {
+			/* @__PURE__ */ D(S, {
 				id: "__default-source",
 				type: "source",
 				position: C.Right,
-				style: u({ top: 32 / 2 })
+				style: b({ top: 32 / 2 })
 			}),
 			/* @__PURE__ */ O("div", {
 				style: {
@@ -152,13 +168,39 @@ var F = d(function({ data: e }) {
 					borderTopLeftRadius: 6,
 					borderTopRightRadius: 6
 				},
-				children: [/* @__PURE__ */ D("span", {
+				children: [/* @__PURE__ */ O("span", {
 					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6,
 						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap"
+						minWidth: 0
 					},
-					children: t.name
+					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",
@@ -179,7 +221,7 @@ var F = d(function({ data: e }) {
 					}), 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,34 +246,34 @@ var F = d(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);
+				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(x, {
+					/* @__PURE__ */ D(S, {
 						id: `${e.name}__target`,
 						type: "target",
 						position: C.Left,
-						style: u({ top: i })
+						style: b({ top: i })
 					}),
-					/* @__PURE__ */ D(x, {
+					/* @__PURE__ */ D(S, {
 						id: `${e.name}__source`,
 						type: "source",
 						position: C.Right,
-						style: u({ top: i })
+						style: b({ top: i })
 					}),
-					/* @__PURE__ */ D(P, {
+					/* @__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}`);
 			})
 		]
 	});
-}), I = d(function({ id: e, sourceX: t, sourceY: n, targetX: r, targetY: i, sourcePosition: a, targetPosition: o, data: s, selected: c }) {
+}), 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,
@@ -240,15 +282,15 @@ var F = d(function({ data: e }) {
 		targetY: i,
 		targetPosition: o
 	}), f = s ?? {}, p = !!c || !!f.hovered, m = f.color || "#3b82f6";
-	return /* @__PURE__ */ O(E, { children: [/* @__PURE__ */ D(y, {
+	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__ */ D(b, { children: /* @__PURE__ */ O("div", {
+	}), /* @__PURE__ */ D(x, { children: /* @__PURE__ */ O("div", {
 		className: "nodrag nopan",
 		style: {
 			position: "absolute",
@@ -293,8 +335,8 @@ var F = d(function({ data: e }) {
 			children: "×"
 		})]
 	}) })] });
-}), ie = { table: F }, L = { joinEdge: I };
-function ae(e) {
+}), oe = { table: ae }, se = { joinEdge: P };
+function ce(e) {
 	try {
 		return {
 			model: t(e),
@@ -308,26 +350,26 @@ function ae(e) {
 		throw e;
 	}
 }
-function R(e, t) {
+function F(e, t) {
 	return t ? `${t}__${e}` : `__default-${e}`;
 }
-var z = "join:";
-function B(e) {
+var I = "join:";
+function L(e) {
 	if (!e || e.startsWith("__default-")) return;
 	let t = /^(.+)__(?:source|target)$/.exec(e);
 	return t ? t[1] : void 0;
 }
-function oe(e) {
+function R(e) {
 	return `${e.table}.${e.column}`;
 }
-var se = {
+var le = {
 	INNER: "#3b82f6",
 	LEFT: "#8b5cf6",
 	RIGHT: "#a855f7",
 	FULL: "#ec4899",
 	CROSS: "#6b7280"
 };
-function ce({ apiRef: e, wrapperRef: t }) {
+function ue({ apiRef: e, wrapperRef: t }) {
 	let n = T();
 	return h(e, () => ({
 		fitView: (e) => n.fitView(e),
@@ -338,39 +380,39 @@ function ce({ apiRef: e, wrapperRef: t }) {
 		getViewportElement: () => t.current?.querySelector(".react-flow__viewport") ?? null
 	}), [n, t]), null;
 }
-var V = 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: y, onJoinConnect: b, onJoinDelete: x, onTableRemove: C, onColumnClick: w, onTableClick: T, deleteKeyCode: E = "Delete", className: N, style: P, highlightReferencesOnHover: F = !0 } = e, { model: I, error: V } = g(() => r ? {
+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
 	} : n == null ? {
 		model: null,
 		error: null
-	} : ae(n), [n, r]), [H, U] = _(null), [W, G] = _(null);
+	} : ce(n), [n, r]), [U, W] = v(null), [G, K] = v(null);
 	m(() => {
-		if (!I) {
-			U(null);
+		if (!V) {
+			W(null);
 			return;
 		}
 		let e = !1;
-		return i(I, {
+		return i(V, {
 			algorithm: a,
 			direction: o,
 			aspectRatio: s
 		}).then((t) => {
-			e || U(t);
+			e || W(t);
 		}), () => {
 			e = !0;
 		};
 	}, [
-		I,
+		V,
 		a,
 		o,
 		s
 	]);
-	let K = g(() => {
-		if (!H || !I) return [];
-		let e = new Map(I.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 = c?.[n.id], a = { table: r };
@@ -390,14 +432,14 @@ var V = u(function(e, t) {
 		}
 		return t;
 	}, [
-		H,
-		I,
+		U,
+		V,
 		c
-	]), [le, q, ue] = re(K);
+	]), [de, J, fe] = re(q);
 	m(() => {
-		q(K);
-	}, [K, q]);
-	let de = f((e, t, n) => {
+		J(q);
+	}, [q, J]);
+	let pe = f((e, t, n) => {
 		if (!l) return;
 		let r = { ...c ?? {} };
 		for (let e of n) r[e.id] = {
@@ -405,26 +447,26 @@ var V = u(function(e, t) {
 			y: e.position.y
 		};
 		l(r);
-	}, [c, l]), J = g(() => {
-		if (!(!W || !I)) return I.relations.find((e) => e.id === W);
-	}, [W, I]), Y = g(() => {
-		if (!W || !y || !W.startsWith(z)) return;
-		let e = W.slice(5);
-		return y.find((t) => t.id === e);
-	}, [W, y]), fe = g(() => {
+	}, [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 (!F) return e;
+		if (!B) return e;
 		let t = (t, n) => {
 			if (!n) return;
 			let r = e.get(t) ?? /* @__PURE__ */ new Set();
 			r.add(n), e.set(t, r);
 		};
-		return J && (t(J.from, J.fromColumn), t(J.to, J.toColumn)), Y && (t(Y.source.table, Y.source.column), t(Y.target.table, Y.target.column)), e;
+		return Y && (t(Y.from, Y.fromColumn), t(Y.to, Y.toColumn)), X && (t(X.source.table, X.source.column), t(X.target.table, X.target.column)), e;
 	}, [
-		J,
 		Y,
-		F
-	]), X = g(() => new Set((d ?? []).map(oe)), [d]), Z = f((e, t, n) => {
+		X,
+		B
+	]), Z = g(() => new Set((d ?? []).map(R)), [d]), Q = f((e, t, n) => {
 		if (!p) return;
 		let r = d ?? [];
 		if (n) {
@@ -434,26 +476,45 @@ var V = u(function(e, t) {
 				column: t
 			}]);
 		} else p(r.filter((n) => !(n.table === e && n.column === t)));
-	}, [d, p]), pe = g(() => ({
+	}, [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,
-		selected: X,
-		onToggle: Z
+		showSelectAll: N ?? !1,
+		selected: Z,
+		onToggle: Q,
+		onToggleAll: he
 	}), [
 		u,
-		X,
-		Z
-	]), me = g(() => {
-		if (!H || !I) return [];
-		let e = new Set(I.tables.map((e) => e.name)), t = new Map(I.relations.map((e) => [e.id, e])), n = [];
-		for (let r of H.edges) {
+		N,
+		Z,
+		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,
 				target: r.target,
-				sourceHandle: R("source", i?.fromColumn),
-				targetHandle: R("target", i?.toColumn),
+				sourceHandle: F("source", i?.fromColumn),
+				targetHandle: F("target", i?.toColumn),
 				type: "smoothstep",
 				animated: a,
 				deletable: !1,
@@ -475,57 +536,68 @@ var V = u(function(e, t) {
 			});
 		}
 		let r = [];
-		for (let t of y ?? []) {
+		for (let t of b ?? []) {
 			if (!e.has(t.source.table) || !e.has(t.target.table)) continue;
-			let n = `${z}${t.id}`, i = n === W, a = se[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: x ? () => x(t.id) : void 0
+				onDelete: S ? () => S(t.id, t.meta) : void 0
 			};
 			r.push({
 				id: n,
 				source: t.source.table,
 				target: t.target.table,
-				sourceHandle: R("source", t.source.column),
-				targetHandle: R("target", t.target.column),
+				sourceHandle: F("source", t.source.column),
+				targetHandle: F("target", t.target.column),
 				type: "joinEdge",
 				deletable: !0,
-				data: o
+				data: s
 			});
 		}
 		return [...n, ...r];
 	}, [
-		H,
-		I,
-		y,
-		W,
-		x
-	]), he = f((e) => {
-		b && (!e.source || !e.target || b({
+		U,
+		V,
+		b,
+		G,
+		S,
+		w
+	]), ve = f((e) => {
+		x && (!e.source || !e.target || x({
 			table: e.source,
-			column: B(e.sourceHandle)
+			column: L(e.sourceHandle)
 		}, {
 			table: e.target,
-			column: B(e.targetHandle)
+			column: L(e.targetHandle)
 		}));
-	}, [b]), ge = f((e) => {
-		if (x) for (let t of e) t.id.startsWith(z) && x(t.id.slice(5));
-	}, [x]), Q = !!h, _e = g(() => ({
-		onTableRemove: C,
-		onColumnClick: w
-	}), [C, w]), $ = ee(null);
+	}, [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: N,
+		className: P,
 		style: {
 			width: "100%",
 			height: "100%",
 			position: "relative",
-			...P
+			...z
 		},
 		children: [
-			V && /* @__PURE__ */ D("div", {
+			H && /* @__PURE__ */ D("div", {
 				style: {
 					position: "absolute",
 					top: 8,
@@ -541,9 +613,9 @@ var V = u(function(e, t) {
 					fontSize: 12,
 					whiteSpace: "pre-wrap"
 				},
-				children: V.message
+				children: H.message
 			}),
-			!V && !H && /* @__PURE__ */ D("div", {
+			!H && !U && /* @__PURE__ */ D("div", {
 				style: {
 					position: "absolute",
 					inset: 0,
@@ -556,40 +628,44 @@ var V = u(function(e, t) {
 				children: "Computing layout…"
 			}),
 			/* @__PURE__ */ D(k.Provider, {
-				value: fe,
+				value: me,
 				children: /* @__PURE__ */ D(A.Provider, {
-					value: pe,
-					children: /* @__PURE__ */ D(j.Provider, {
-						value: Q,
-						children: /* @__PURE__ */ D(M.Provider, {
-							value: _e,
+					value: ge,
+					children: /* @__PURE__ */ D(ie.Provider, {
+						value: xe,
+						children: /* @__PURE__ */ D(j.Provider, {
+							value: Se,
 							children: /* @__PURE__ */ O(ne, {
-								nodes: le,
-								edges: me,
-								nodeTypes: ie,
-								edgeTypes: L,
+								nodes: de,
+								edges: _e,
+								nodeTypes: oe,
+								edgeTypes: se,
 								fitView: !0,
-								onNodesChange: ue,
-								onNodeDragStop: de,
-								onNodeClick: T ? (e, t) => T(t.id) : void 0,
-								onEdgeMouseEnter: (e, t) => G(t.id),
-								onEdgeMouseLeave: () => G(null),
-								onConnect: he,
-								onEdgesDelete: ge,
+								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: Q,
+								nodesConnectable: xe,
 								elementsSelectable: !0,
-								deleteKeyCode: E,
+								deleteKeyCode: ae,
 								minZoom: .1,
 								maxZoom: 4,
 								children: [
-									/* @__PURE__ */ D(v, {}),
-									/* @__PURE__ */ D(te, {}),
-									/* @__PURE__ */ D(S, {
+									/* @__PURE__ */ D(y, {}),
+									/* @__PURE__ */ D(ee, {}),
+									/* @__PURE__ */ D(te, {
 										pannable: !0,
 										zoomable: !0
 									}),
-									/* @__PURE__ */ D(ce, {
+									/* @__PURE__ */ D(ue, {
 										apiRef: t,
 										wrapperRef: $
 									})
@@ -603,6 +679,6 @@ var V = u(function(e, t) {
 	});
 });
 //#endregion
-export { s as HEADER_HEIGHT, V 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 };
+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 };
 
 //# sourceMappingURL=index.js.map