wimui 0.23.15 → 0.23.16

package/dist/components/data-display/NodeGraph/NodeGraph.cjs

@@ -1,2 +1,2 @@
 "use client";
-const e=require("../../../_virtual/_rolldown/runtime.cjs");;/* empty css                                               */const t=require("./node-graph.module.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("classnames");r=e.__toESM(r,1);let i=require("react/jsx-runtime"),a=require("@xyflow/react");var o=n.default.forwardRef(({nodes:e,edges:n,onNodesChange:o,onEdgesChange:s,onConnect:c,nodeTypes:l,edgeTypes:u,nodesDraggable:d=!0,nodesConnectable:f=!0,deleteKeyCode:p=`Backspace`,showMiniMap:m=!1,showControls:h=!0,backgroundVariant:g=a.BackgroundVariant.Dots,fitView:_=!0,fitViewOptions:v,defaultEdgeOptions:y,className:b,"aria-label":x=`Node graph`,...S},C)=>(0,i.jsx)(`div`,{ref:C,className:(0,r.default)(`wim-node-graph`,t.default.root,b),role:`region`,"aria-label":x,...S,children:(0,i.jsxs)(a.ReactFlow,{nodes:e,edges:n,onNodesChange:o,onEdgesChange:s,onConnect:c,nodeTypes:l,edgeTypes:u,nodesDraggable:d,nodesConnectable:f,deleteKeyCode:p,fitView:_,fitViewOptions:v,defaultEdgeOptions:y,className:t.default.flow,children:[(0,i.jsx)(a.Background,{variant:g,className:t.default.background}),h&&(0,i.jsx)(a.Controls,{className:t.default.controls}),m&&(0,i.jsx)(a.MiniMap,{className:t.default.miniMap})]})}));o.displayName=`NodeGraph`,exports.NodeGraph=o;
+const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../../i18n/useWimTranslation.cjs"),n=require("../../../icon/plus.cjs"),r=require("../../../icon/trash.cjs"),i=require("../../media/Icon/Icon.cjs");;/* empty css                                               */const a=require("./node-graph.module.cjs");let o=require("react");o=e.__toESM(o,1);let s=require("classnames");s=e.__toESM(s,1);let c=require("react/jsx-runtime"),l=require("@xyflow/react");var u=[`Backspace`,`Delete`],d=180,f=80;function p(e){let t=1,n=new Set(e.map(e=>e.id));for(;n.has(`node-${t}`);)t+=1;return`node-${t}`}function m(e){if(e.length===0)return{x:f,y:f};let t=Math.max(...e.map(e=>e.position.x)),n=e[e.length-1]?.position.y??f;return{x:t+d,y:n}}var h=o.default.forwardRef(({nodes:e,edges:d,onNodesChange:f,onEdgesChange:h,onConnect:g,nodeTypes:_,edgeTypes:v,nodesDraggable:y=!0,nodesConnectable:b=!0,deleteKeyCode:x,showMiniMap:S=!1,showControls:C=!0,backgroundVariant:w=l.BackgroundVariant.Dots,fitView:T=!0,fitViewOptions:E,defaultEdgeOptions:D,className:O,"aria-label":k=`Node graph`,...A},j)=>{let{t:M}=t.useWimTranslation(`common`),N=M(`nodeGraph.add_node`),P=M(`nodeGraph.node_name`),F=M(`nodeGraph.new_node`),I=M(`a11y.delete`),L=x===void 0?[...u]:x,R=L!=null,[z,B]=(0,o.useState)(!1),[V,H]=(0,o.useState)(``),U=(0,o.useRef)(null),W=(0,o.useMemo)(()=>e.filter(e=>e.selected),[e]),G=(0,o.useMemo)(()=>d.filter(e=>e.selected),[d]),K=W.length>0||G.length>0,q=V.trim(),J=L==null?void 0:Array.isArray(L)?L.join(` `):L;(0,o.useEffect)(()=>{z&&U.current?.focus()},[z]);let Y=(0,o.useCallback)(()=>{!R||!q||(f([{type:`add`,item:{id:p(e),position:m(e),data:{label:q}}}]),B(!1),H(``))},[R,q,e,f]),X=(0,o.useCallback)(()=>{if(R){if(!z){B(!0);return}Y()}},[R,z,Y]),Z=(0,o.useCallback)(e=>{e.stopPropagation(),e.key===`Enter`&&(e.preventDefault(),Y()),e.key===`Escape`&&(e.preventDefault(),B(!1),H(``))},[Y]),Q=(0,o.useCallback)(()=>{if(!R||!K)return;let e=new Set(W.map(e=>e.id)),t=new Set(G.map(e=>e.id));for(let n of d)(e.has(n.source)||e.has(n.target))&&t.add(n.id);t.size>0&&h([...t].map(e=>({type:`remove`,id:e}))),e.size>0&&f([...e].map(e=>({type:`remove`,id:e})))},[R,K,W,G,d,h,f]),$=(0,o.useCallback)(e=>{e.stopPropagation()},[]);return(0,c.jsxs)(`div`,{ref:j,className:(0,s.default)(`wim-node-graph`,a.default.root,O),role:`region`,"aria-label":k,...A,children:[(0,c.jsxs)(l.ReactFlow,{nodes:e,edges:d,onNodesChange:f,onEdgesChange:h,onConnect:g,nodeTypes:_,edgeTypes:v,nodesDraggable:y,nodesConnectable:b,deleteKeyCode:L,fitView:T,fitViewOptions:E,defaultEdgeOptions:D,className:a.default.flow,children:[(0,c.jsx)(l.Background,{variant:w,className:a.default.background}),C&&(0,c.jsx)(l.Controls,{className:a.default.controls}),S&&(0,c.jsx)(l.MiniMap,{className:a.default.miniMap})]}),R&&(0,c.jsxs)(`div`,{className:a.default.tools,children:[z&&(0,c.jsx)(`input`,{ref:U,className:(0,s.default)(`nodrag`,`nopan`,a.default.name),value:V,onChange:e=>H(e.target.value),onKeyDown:Z,onPointerDown:$,onMouseDown:$,"aria-label":P,placeholder:F}),(0,c.jsxs)(`div`,{className:a.default.toolRow,children:[(0,c.jsxs)(`button`,{type:`button`,className:(0,s.default)(`nodrag`,`nopan`,a.default.tool),disabled:z&&!q,onClick:X,onPointerDown:$,onMouseDown:$,"aria-label":N,"aria-expanded":z,children:[(0,c.jsx)(i.Icon,{component:n.default,size:`sm`}),N]}),(0,c.jsxs)(`button`,{type:`button`,className:(0,s.default)(`nodrag`,`nopan`,a.default.tool),disabled:!K,onClick:Q,onPointerDown:$,onMouseDown:$,"aria-label":I,"aria-keyshortcuts":J,children:[(0,c.jsx)(i.Icon,{component:r.default,size:`sm`}),I]})]})]})]})});h.displayName=`NodeGraph`,exports.NodeGraph=h;

package/dist/components/data-display/NodeGraph/NodeGraph.d.ts

@@ -6,7 +6,7 @@ export interface NodeGraphProps {
     nodes: Node[];
     /** Controlled edges */
     edges: Edge[];
-    /** Called when nodes change (position, selection, removal) */
+    /** Called when nodes change (position, selection, add, removal) */
     onNodesChange: OnNodesChange;
     /** Called when edges change */
     onEdgesChange: OnEdgesChange;
@@ -20,7 +20,11 @@ export interface NodeGraphProps {
     nodesDraggable?: boolean;
     /** Whether nodes can be connected */
     nodesConnectable?: boolean;
-    /** Whether elements can be deleted with Backspace/Delete */
+    /**
+     * Keys that delete the selection, and whether the on-canvas add/delete controls are shown.
+     * `null` hides the controls and disables key deletion (read-only).
+     * When omitted, both Backspace and Delete work.
+     */
     deleteKeyCode?: string | null;
     /** Show the minimap panel */
     showMiniMap?: boolean;

package/dist/components/data-display/NodeGraph/NodeGraph.js

@@ -1,42 +1,161 @@
 "use client";
+import { useWimTranslation as e } from "../../../i18n/useWimTranslation.js";
+import t from "../../../icon/plus.js";
+import n from "../../../icon/trash.js";
+import { Icon as r } from "../../media/Icon/Icon.js";
 /* empty css                                             */
-import e from "./node-graph.module.js";
-import t from "react";
-import n from "classnames";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { Background as a, BackgroundVariant as o, Controls as s, MiniMap as c, ReactFlow as l } from "@xyflow/react";
+import i from "./node-graph.module.js";
+import a, { useCallback as o, useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import d from "classnames";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Background as m, BackgroundVariant as h, Controls as g, MiniMap as ee, ReactFlow as te } from "@xyflow/react";
 //#region src/components/data-display/NodeGraph/NodeGraph.tsx
-var u = t.forwardRef(({ nodes: t, edges: u, onNodesChange: d, onEdgesChange: f, onConnect: p, nodeTypes: m, edgeTypes: h, nodesDraggable: g = !0, nodesConnectable: _ = !0, deleteKeyCode: v = "Backspace", showMiniMap: y = !1, showControls: b = !0, backgroundVariant: x = o.Dots, fitView: S = !0, fitViewOptions: C, defaultEdgeOptions: w, className: T, "aria-label": E = "Node graph", ...D }, O) => /* @__PURE__ */ r("div", {
-	ref: O,
-	className: n("wim-node-graph", e.root, T),
-	role: "region",
-	"aria-label": E,
-	...D,
-	children: /* @__PURE__ */ i(l, {
-		nodes: t,
-		edges: u,
-		onNodesChange: d,
-		onEdgesChange: f,
-		onConnect: p,
-		nodeTypes: m,
-		edgeTypes: h,
-		nodesDraggable: g,
-		nodesConnectable: _,
-		deleteKeyCode: v,
-		fitView: S,
-		fitViewOptions: C,
-		defaultEdgeOptions: w,
-		className: e.flow,
-		children: [
-			/* @__PURE__ */ r(a, {
-				variant: x,
-				className: e.background
-			}),
-			b && /* @__PURE__ */ r(s, { className: e.controls }),
-			y && /* @__PURE__ */ r(c, { className: e.miniMap })
-		]
-	})
-}));
-u.displayName = "NodeGraph";
+var ne = ["Backspace", "Delete"], _ = 180, v = 80;
+function y(e) {
+	let t = 1, n = new Set(e.map((e) => e.id));
+	for (; n.has(`node-${t}`);) t += 1;
+	return `node-${t}`;
+}
+function b(e) {
+	if (e.length === 0) return {
+		x: v,
+		y: v
+	};
+	let t = Math.max(...e.map((e) => e.position.x)), n = e[e.length - 1]?.position.y ?? v;
+	return {
+		x: t + _,
+		y: n
+	};
+}
+var x = a.forwardRef(({ nodes: a, edges: _, onNodesChange: v, onEdgesChange: x, onConnect: S, nodeTypes: C, edgeTypes: w, nodesDraggable: T = !0, nodesConnectable: E = !0, deleteKeyCode: D, showMiniMap: re = !1, showControls: ie = !0, backgroundVariant: O = h.Dots, fitView: k = !0, fitViewOptions: A, defaultEdgeOptions: j, className: M, "aria-label": N = "Node graph", ...P }, F) => {
+	let { t: I } = e("common"), L = I("nodeGraph.add_node"), R = I("nodeGraph.node_name"), z = I("nodeGraph.new_node"), B = I("a11y.delete"), V = D === void 0 ? [...ne] : D, H = V != null, [U, W] = u(!1), [G, K] = u(""), q = l(null), J = c(() => a.filter((e) => e.selected), [a]), Y = c(() => _.filter((e) => e.selected), [_]), X = J.length > 0 || Y.length > 0, Z = G.trim(), ae = V == null ? void 0 : Array.isArray(V) ? V.join(" ") : V;
+	s(() => {
+		U && q.current?.focus();
+	}, [U]);
+	let Q = o(() => {
+		!H || !Z || (v([{
+			type: "add",
+			item: {
+				id: y(a),
+				position: b(a),
+				data: { label: Z }
+			}
+		}]), W(!1), K(""));
+	}, [
+		H,
+		Z,
+		a,
+		v
+	]), oe = o(() => {
+		if (H) {
+			if (!U) {
+				W(!0);
+				return;
+			}
+			Q();
+		}
+	}, [
+		H,
+		U,
+		Q
+	]), se = o((e) => {
+		e.stopPropagation(), e.key === "Enter" && (e.preventDefault(), Q()), e.key === "Escape" && (e.preventDefault(), W(!1), K(""));
+	}, [Q]), ce = o(() => {
+		if (!H || !X) return;
+		let e = new Set(J.map((e) => e.id)), t = new Set(Y.map((e) => e.id));
+		for (let n of _) (e.has(n.source) || e.has(n.target)) && t.add(n.id);
+		t.size > 0 && x([...t].map((e) => ({
+			type: "remove",
+			id: e
+		}))), e.size > 0 && v([...e].map((e) => ({
+			type: "remove",
+			id: e
+		})));
+	}, [
+		H,
+		X,
+		J,
+		Y,
+		_,
+		x,
+		v
+	]), $ = o((e) => {
+		e.stopPropagation();
+	}, []);
+	return /* @__PURE__ */ p("div", {
+		ref: F,
+		className: d("wim-node-graph", i.root, M),
+		role: "region",
+		"aria-label": N,
+		...P,
+		children: [/* @__PURE__ */ p(te, {
+			nodes: a,
+			edges: _,
+			onNodesChange: v,
+			onEdgesChange: x,
+			onConnect: S,
+			nodeTypes: C,
+			edgeTypes: w,
+			nodesDraggable: T,
+			nodesConnectable: E,
+			deleteKeyCode: V,
+			fitView: k,
+			fitViewOptions: A,
+			defaultEdgeOptions: j,
+			className: i.flow,
+			children: [
+				/* @__PURE__ */ f(m, {
+					variant: O,
+					className: i.background
+				}),
+				ie && /* @__PURE__ */ f(g, { className: i.controls }),
+				re && /* @__PURE__ */ f(ee, { className: i.miniMap })
+			]
+		}), H && /* @__PURE__ */ p("div", {
+			className: i.tools,
+			children: [U && /* @__PURE__ */ f("input", {
+				ref: q,
+				className: d("nodrag", "nopan", i.name),
+				value: G,
+				onChange: (e) => K(e.target.value),
+				onKeyDown: se,
+				onPointerDown: $,
+				onMouseDown: $,
+				"aria-label": R,
+				placeholder: z
+			}), /* @__PURE__ */ p("div", {
+				className: i.toolRow,
+				children: [/* @__PURE__ */ p("button", {
+					type: "button",
+					className: d("nodrag", "nopan", i.tool),
+					disabled: U && !Z,
+					onClick: oe,
+					onPointerDown: $,
+					onMouseDown: $,
+					"aria-label": L,
+					"aria-expanded": U,
+					children: [/* @__PURE__ */ f(r, {
+						component: t,
+						size: "sm"
+					}), L]
+				}), /* @__PURE__ */ p("button", {
+					type: "button",
+					className: d("nodrag", "nopan", i.tool),
+					disabled: !X,
+					onClick: ce,
+					onPointerDown: $,
+					onMouseDown: $,
+					"aria-label": B,
+					"aria-keyshortcuts": ae,
+					children: [/* @__PURE__ */ f(r, {
+						component: n,
+						size: "sm"
+					}), B]
+				})]
+			})]
+		})]
+	});
+});
+x.displayName = "NodeGraph";
 //#endregion
-export { u as NodeGraph };
+export { x as NodeGraph };

package/dist/components/data-display/NodeGraph/node-graph.module.cjs

@@ -1,2 +1,2 @@
 "use client";
-var e=`_root_1le7n_2`,t=`_flow_1le7n_52`,n=`_background_1le7n_57`,r=`_controls_1le7n_72`,i=`_miniMap_1le7n_82`,a={root:e,flow:t,background:n,controls:r,miniMap:i};exports.background=n,exports.controls=r,exports.default=a,exports.flow=t,exports.miniMap=i,exports.root=e;
+var e=`_root_1pnfy_2`,t=`_flow_1pnfy_52`,n=`_background_1pnfy_57`,r=`_controls_1pnfy_72`,i=`_miniMap_1pnfy_82`,a=`_tools_1pnfy_87`,o=`_toolRow_1pnfy_99`,s=`_name_1pnfy_104`,c=`_tool_1pnfy_87`,l={root:e,flow:t,background:n,controls:r,miniMap:i,tools:a,toolRow:o,name:s,tool:c};exports.background=n,exports.controls=r,exports.default=l,exports.flow=t,exports.miniMap=i,exports.name=s,exports.root=e,exports.tool=c,exports.toolRow=o,exports.tools=a;

package/dist/components/data-display/NodeGraph/node-graph.module.js

@@ -1,11 +1,15 @@
 "use client";
 //#region src/components/data-display/NodeGraph/node-graph.module.scss
-var e = "_root_1le7n_2", t = "_flow_1le7n_52", n = "_background_1le7n_57", r = "_controls_1le7n_72", i = "_miniMap_1le7n_82", a = {
+var e = "_root_1pnfy_2", t = "_flow_1pnfy_52", n = "_background_1pnfy_57", r = "_controls_1pnfy_72", i = "_miniMap_1pnfy_82", a = "_tools_1pnfy_87", o = "_toolRow_1pnfy_99", s = "_name_1pnfy_104", c = "_tool_1pnfy_87", l = {
 	root: e,
 	flow: t,
 	background: n,
 	controls: r,
-	miniMap: i
+	miniMap: i,
+	tools: a,
+	toolRow: o,
+	name: s,
+	tool: c
 };
 //#endregion
-export { n as background, r as controls, a as default, t as flow, i as miniMap, e as root };
+export { n as background, r as controls, l as default, t as flow, i as miniMap, s as name, e as root, c as tool, o as toolRow, a as tools };