geonodes-web-render 0.3.0 → 0.3.2

package/dist/embed.js

@@ -8495,92 +8495,111 @@ var Kf = {
 	simulationZone: Gf
 }, qf = { padding: .08 };
 function Jf(e) {
-	let { nodes: t, edges: n, breadcrumbs: r, onNavigate: i, onSelectionIds: o } = e, { fitView: s } = ll(), [l, u, d] = fd(t), [f, p, m] = pd(n);
-	return c(() => {
-		u(t), o?.([]), s(qf);
+	let { nodes: t, edges: n, breadcrumbs: r, onNavigate: i, onSelectionIds: o, zoomOnScroll: s = !0 } = e, { fitView: l } = ll(), u = d(null), f = d(!1), [p, m, h] = fd(t), [v, y, b] = pd(n);
+	c(() => {
+		m(t), o?.([]), f.current = !1, l(qf);
 	}, [
 		t,
-		u,
+		m,
 		o,
-		s
+		l
 	]), c(() => {
-		p(n);
-	}, [n, p]), /* @__PURE__ */ _(dd, {
-		nodes: l,
-		edges: f,
-		onNodesChange: d,
-		onEdgesChange: m,
-		onSelectionChange: a(({ nodes: e }) => {
-			o?.(e.map((e) => e.id));
-		}, [o]),
-		nodeTypes: Kf,
-		fitView: !0,
-		fitViewOptions: qf,
-		minZoom: .2,
-		nodesDraggable: !1,
-		nodesConnectable: !1,
-		elementsSelectable: !0,
-		nodesFocusable: !1,
-		edgesFocusable: !1,
-		selectNodesOnDrag: !1,
-		selectionOnDrag: !0,
-		selectionMode: va.Partial,
-		connectOnClick: !1,
-		panOnDrag: [1, 2],
-		panOnScroll: !1,
-		zoomOnScroll: !0,
-		zoomOnDoubleClick: !1,
-		children: [
-			/* @__PURE__ */ g(bd, {
-				gap: 20,
-				size: 1
-			}),
-			/* @__PURE__ */ g(kd, { showInteractive: !1 }),
-			r.length > 1 ? /* @__PURE__ */ g(Sc, {
-				position: "top-left",
-				children: /* @__PURE__ */ g("nav", {
-					className: "gn-breadcrumbs",
-					"aria-label": "Node group path",
-					children: r.map((e, t) => {
-						let n = t === r.length - 1;
-						return /* @__PURE__ */ _("span", {
-							className: "gn-breadcrumbs__item",
-							children: [t > 0 ? /* @__PURE__ */ g("span", {
-								className: "gn-breadcrumbs__sep",
-								"aria-hidden": "true",
-								children: "›"
-							}) : null, n ? /* @__PURE__ */ g("span", {
-								className: "gn-breadcrumbs__current",
-								"aria-current": "page",
-								children: e.label
-							}) : /* @__PURE__ */ g("button", {
-								type: "button",
-								className: "gn-breadcrumbs__link",
-								onClick: () => i(t),
-								children: e.label
-							})]
-						}, `${e.id}-${t}`);
+		y(n);
+	}, [n, y]), c(() => {
+		let e = u.current;
+		if (!e) return;
+		let t = new ResizeObserver(() => {
+			f.current || l(qf);
+		});
+		return t.observe(e), () => t.disconnect();
+	}, [l]);
+	let x = a((e) => {
+		e && (f.current = !0);
+	}, []);
+	return /* @__PURE__ */ g("div", {
+		ref: u,
+		style: {
+			width: "100%",
+			height: "100%"
+		},
+		children: /* @__PURE__ */ _(dd, {
+			nodes: p,
+			edges: v,
+			onNodesChange: h,
+			onEdgesChange: b,
+			onSelectionChange: a(({ nodes: e }) => {
+				o?.(e.map((e) => e.id));
+			}, [o]),
+			onMoveStart: x,
+			nodeTypes: Kf,
+			fitView: !0,
+			fitViewOptions: qf,
+			minZoom: .2,
+			nodesDraggable: !1,
+			nodesConnectable: !1,
+			elementsSelectable: !0,
+			nodesFocusable: !1,
+			edgesFocusable: !1,
+			selectNodesOnDrag: !1,
+			selectionOnDrag: !0,
+			selectionMode: va.Partial,
+			connectOnClick: !1,
+			panOnDrag: [1, 2],
+			panOnScroll: !1,
+			zoomOnScroll: s,
+			zoomOnDoubleClick: !1,
+			children: [
+				/* @__PURE__ */ g(bd, {
+					gap: 20,
+					size: 1
+				}),
+				/* @__PURE__ */ g(kd, { showInteractive: !1 }),
+				r.length > 1 ? /* @__PURE__ */ g(Sc, {
+					position: "top-left",
+					children: /* @__PURE__ */ g("nav", {
+						className: "gn-breadcrumbs",
+						"aria-label": "Node group path",
+						children: r.map((e, t) => {
+							let n = t === r.length - 1;
+							return /* @__PURE__ */ _("span", {
+								className: "gn-breadcrumbs__item",
+								children: [t > 0 ? /* @__PURE__ */ g("span", {
+									className: "gn-breadcrumbs__sep",
+									"aria-hidden": "true",
+									children: "›"
+								}) : null, n ? /* @__PURE__ */ g("span", {
+									className: "gn-breadcrumbs__current",
+									"aria-current": "page",
+									children: e.label
+								}) : /* @__PURE__ */ g("button", {
+									type: "button",
+									className: "gn-breadcrumbs__link",
+									onClick: () => i(t),
+									children: e.label
+								})]
+							}, `${e.id}-${t}`);
+						})
+					})
+				}) : null,
+				/* @__PURE__ */ g(Sc, {
+					position: "bottom-right",
+					children: /* @__PURE__ */ g("a", {
+						href: "https://extensions.blender.org/add-ons/tree-clipper/",
+						target: "_blank",
+						rel: "noopener noreferrer",
+						className: "tree-clipper-badge",
+						children: "Exported from Blender using Tree Clipper ↗"
 					})
 				})
-			}) : null,
-			/* @__PURE__ */ g(Sc, {
-				position: "bottom-right",
-				children: /* @__PURE__ */ g("a", {
-					href: "https://extensions.blender.org/add-ons/tree-clipper/",
-					target: "_blank",
-					rel: "noopener noreferrer",
-					className: "tree-clipper-badge",
-					children: "Exported from Blender using Tree Clipper ↗"
-				})
-			})
-		]
+			]
+		})
 	});
 }
 function Yf(e) {
-	let { jsonText: t, showHeader: n = !0, onSelectionChange: r } = e, [i, o] = f({
+	let { jsonText: t, showHeader: n = !0, onSelectionChange: r, zoomOnScroll: i = !0 } = e, [o, s] = f({
 		json: t,
 		ids: []
-	}), s = u(() => {
+	}), l = u(() => {
 		if (!t.trim()) return null;
 		try {
 			let { rootId: e, trees: n } = ff(JSON.parse(t)), r = {};
@@ -8603,36 +8622,36 @@ function Yf(e) {
 				error: e instanceof Error ? e.message : String(e)
 			};
 		}
-	}, [t]), l = u(() => {
-		if (!s?.views) return [];
-		let e = i.json === t ? i.ids : [], n = [s.rootId];
-		for (let t of e) s.views[t] && n.push(t);
+	}, [t]), d = u(() => {
+		if (!l?.views) return [];
+		let e = o.json === t ? o.ids : [], n = [l.rootId];
+		for (let t of e) l.views[t] && n.push(t);
 		return n;
 	}, [
-		s,
-		i,
+		l,
+		o,
 		t
-	]), d = s?.views ? s.views[l[l.length - 1]] : null, p = a((e) => {
-		o((n) => ({
+	]), p = l?.views ? l.views[d[d.length - 1]] : null, m = a((e) => {
+		s((n) => ({
 			json: t,
 			ids: n.json === t ? [...n.ids, e] : [e]
 		}));
-	}, [t]), m = u(() => ({ openGroup: p }), [p]);
+	}, [t]), h = u(() => ({ openGroup: m }), [m]);
 	c(() => {
-		if (l.length <= 1) return;
+		if (d.length <= 1) return;
 		function e(e) {
 			if (e.key !== "Tab" && e.key !== "Escape" || e.ctrlKey || e.metaKey || e.altKey) return;
 			let n = e.target;
-			n && (n.isContentEditable || n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.closest(".cm-editor")) || (e.preventDefault(), o({
+			n && (n.isContentEditable || n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.closest(".cm-editor")) || (e.preventDefault(), s({
 				json: t,
-				ids: l.slice(1, -1)
+				ids: d.slice(1, -1)
 			}));
 		}
 		return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
-	}, [l, t]);
-	let h = s?.views ? l.map((e) => ({
+	}, [d, t]);
+	let v = l?.views ? d.map((e) => ({
 		id: e,
-		label: s.views[e].graph.label
+		label: l.views[e].graph.label
 	})) : [];
 	return /* @__PURE__ */ _("div", {
 		className: "panel flow-panel",
@@ -8644,25 +8663,26 @@ function Yf(e) {
 			}), /* @__PURE__ */ g("div", {
 				className: "panel-status",
 				"aria-live": "polite",
-				children: d ? `${d.graph.nodes.length} nodes, ${d.graph.edges.length} links` : null
+				children: p ? `${p.graph.nodes.length} nodes, ${p.graph.edges.length} links` : null
 			})]
 		}) : null, /* @__PURE__ */ g("div", {
 			className: "panel-body flow-panel__body",
-			children: s?.error ? /* @__PURE__ */ _("div", {
+			children: l?.error ? /* @__PURE__ */ _("div", {
 				className: "flow-error",
 				role: "alert",
-				children: [/* @__PURE__ */ g("strong", { children: "Parse error" }), /* @__PURE__ */ g("span", { children: s.error })]
-			}) : d ? /* @__PURE__ */ g(Cf.Provider, {
-				value: m,
+				children: [/* @__PURE__ */ g("strong", { children: "Parse error" }), /* @__PURE__ */ g("span", { children: l.error })]
+			}) : p ? /* @__PURE__ */ g(Cf.Provider, {
+				value: h,
 				children: /* @__PURE__ */ g(sd, { children: /* @__PURE__ */ g(Jf, {
-					nodes: d.flow.nodes,
-					edges: d.flow.edges,
-					breadcrumbs: h,
-					onNavigate: (e) => o({
+					nodes: p.flow.nodes,
+					edges: p.flow.edges,
+					breadcrumbs: v,
+					onNavigate: (e) => s({
 						json: t,
-						ids: l.slice(1, e + 1)
+						ids: d.slice(1, e + 1)
 					}),
-					onSelectionIds: r
+					onSelectionIds: r,
+					zoomOnScroll: i
 				}) })
 			}) : /* @__PURE__ */ g("div", {
 				className: "flow-empty",
@@ -8697,7 +8717,8 @@ function Xf(e) {
 				children: [/* @__PURE__ */ g("strong", { children: "Decode error" }), /* @__PURE__ */ g("span", { children: i })]
 			}) : /* @__PURE__ */ g(Yf, {
 				jsonText: n,
-				showHeader: !1
+				showHeader: !1,
+				zoomOnScroll: !1
 			})
 		})
 	});

package/dist/types/gn/components/GeometryNodesFlow.d.ts

@@ -4,4 +4,7 @@ export declare function GeometryNodesFlow(props: {
     showHeader?: boolean;
     /** Reports the currently selected node ids (raw Tree Clipper node ids as strings). */
     onSelectionChange?: (nodeIds: string[]) => void;
+    /** Zoom the canvas on mouse-wheel. Default true; set false (e.g. in an embed)
+     *  so the wheel scrolls the host page instead of the node tree. */
+    zoomOnScroll?: boolean;
 }): import("react").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "geonodes-web-render",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "Browser-based viewer for Blender Geometry Nodes exported via Tree Clipper. Renders node trees as a read-only, Blender-styled graph.",
   "type": "module",
   "exports": {