@dschz/solid-flow 0.3.0-next.3 → 0.3.0-next.5

package/dist/index/index.jsx

@@ -5,9 +5,18 @@ import { Dynamic, Portal, isServer } from "@solidjs/web";
 import { createEventListener, createEventListenerMap } from "@solid-primitives/event-listener";
 //#region src/contexts/edgeId.ts
 const EdgeIdContext = createContext(null);
+/**
+* Returns the id of the edge this component is rendered inside. Available
+* anywhere in a custom edge's subtree (provided by the edge wrapper), so
+* nested components — like a custom edge label — can learn their host edge
+* without prop drilling.
+*
+* @public
+* @returns a reactive accessor for the surrounding edge's id
+*/
 function useEdgeId() {
 	let ctx = useContext(EdgeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useEdgeId");
+	if (!ctx) throw Error("solid-flow: useEdgeId must be called inside an edge component (anywhere under a custom edge's subtree)");
 	return ctx;
 }
 //#endregion
@@ -141,11 +150,13 @@ const getEdgeId = (connection) => {
 		size: 25,
 		reconnecting: !1,
 		style: {}
-	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "children"), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
+	}), rest = omit(_props, "type", "class", "style", "position", "size", "reconnecting", "onReconnectingChange", "children"), { store, nodeLookup, edgeLookup, actions } = useInternalSolidFlow(), edgeId = useEdgeId(), [reconnecting, setReconnecting] = createSignal(!1);
 	if (!edgeId()) throw Error("[solid-flow]: EdgeReconnectAnchor must be used within an Edge component");
-	let edge = () => edgeLookup[edgeId()], onPointerDown = (event) => {
+	let edge = () => edgeLookup[edgeId()], isReconnecting = () => _props.reconnecting || reconnecting(), setReconnectingState = (next) => {
+		setReconnecting(next), _props.onReconnectingChange?.(next);
+	}, onPointerDown = (event) => {
 		if (event.button !== 0) return;
-		setReconnecting(!0), store.onReconnectStart?.(event, edge(), _props.type);
+		setReconnectingState(!0), store.onReconnectStart?.(event, edge(), _props.type);
 		let opposite = _props.type === "target" ? {
 			nodeId: edge().source,
 			handleId: edge().sourceHandle ?? null,
@@ -169,7 +180,9 @@ const getEdgeId = (connection) => {
 			edgeUpdaterType: opposite.type,
 			cancelConnection: actions.cancelConnection,
 			panBy: actions.panBy,
-			updateConnection: actions.setConnection,
+			updateConnection: (connection) => {
+				actions.setConnection(connection), flush();
+			},
 			isValidConnection: store.isValidConnection,
 			onConnectStart: store.onConnectStart,
 			onConnectEnd: store.onConnectEnd,
@@ -181,7 +194,7 @@ const getEdgeId = (connection) => {
 				newEdge = store.onBeforeReconnect?.(newEdge, edge()) ?? newEdge, newEdge && actions.setEdges((edges) => edges.map((e) => e.id === edge().id ? newEdge : e)), store.onReconnect?.(edge(), connection);
 			},
 			onReconnectEnd: (event, connectionState) => {
-				setReconnecting(!1), store.onReconnectEnd?.(event, edge(), opposite.type, connectionState);
+				setReconnectingState(!1), store.onReconnectEnd?.(event, edge(), opposite.type, connectionState);
 			},
 			getTransform: () => store.transform,
 			getFromHandle: () => store.connection.fromHandle,
@@ -204,7 +217,7 @@ const getEdgeId = (connection) => {
 		cursor: "move",
 		..._props.style
 	}}>
-        <Show when={!reconnecting()}>{_props.children}</Show>
+        <Show when={!isReconnecting()}>{_props.children}</Show>
       </div>
     </EdgeLabel>;
 }, ARIA_NODE_DESC_KEY = "solid-flow__node-desc", ARIA_EDGE_DESC_KEY = "solid-flow__edge-desc", A11yDescriptions = () => {
@@ -227,7 +240,6 @@ const getEdgeId = (connection) => {
 	let [store, setStore] = createStore(edges);
 	return [store, setStore];
 }, STEP = .5 / 2, rectsEqual = (a, b) => a === b || !!a && !!b && a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height, rectsOverlap = (a, b) => a.x <= b.x + b.width && a.x + a.width >= b.x && a.y <= b.y + b.height && a.y + a.height >= b.y, createCullingViewport = (source) => createMemo(() => {
-	if (!source.onlyRenderVisibleElements) return null;
 	let { width, height } = source;
 	if (!width || !height) return null;
 	let [tx, ty, zoom] = source.transform, zoomBucket = 2 ** Math.floor(Math.log2(zoom)), bucketWidth = width / zoomBucket, bucketHeight = height / zoomBucket, stepX = bucketWidth * STEP, stepY = bucketHeight * STEP, centerX = (width / 2 - tx) / zoom, centerY = (height / 2 - ty) / zoom, quantizedX = Math.round(centerX / stepX) * stepX, quantizedY = Math.round(centerY / stepY) * stepY, halfWidth = bucketWidth * 1, halfHeight = bucketHeight * 1;
@@ -238,9 +250,9 @@ const getEdgeId = (connection) => {
 		height: 2 * halfHeight
 	};
 }, { equals: rectsEqual }), isNodeCulled = (node, cullingViewport) => {
-	if (!cullingViewport || node.selected) return !1;
+	if (!cullingViewport || node.selected || node.cullable === !1) return !1;
 	let { width, height } = node.measured;
-	if (!width || !height) return !1;
+	if (!width || !height || !node.internals.handleBounds) return !1;
 	let { x, y } = node.internals.positionAbsolute;
 	return !rectsOverlap({
 		x,
@@ -249,7 +261,7 @@ const getEdgeId = (connection) => {
 		height
 	}, cullingViewport);
 }, isEdgeCulled = (row, cullingViewport) => {
-	if (!cullingViewport || row.selected) return !1;
+	if (!cullingViewport || row.selected || row.cullable === !1) return !1;
 	let x = Math.min(row.sourceX, row.targetX), y = Math.min(row.sourceY, row.targetY);
 	return !rectsOverlap({
 		x,
@@ -291,7 +303,7 @@ const getEdgeId = (connection) => {
 	selectNodesOnDrag: !0,
 	elevateNodesOnSelect: !0,
 	zIndexMode: "basic",
-	onlyRenderVisibleElements: !0,
+	onlyRenderVisibleElements: !1,
 	disableKeyboardA11y: !1,
 	defaultMarkerColor: "#b1b1b7",
 	ariaLiveMessage: "",
@@ -581,9 +593,17 @@ const createLayoutedEdges = (source) => {
 			return config().zIndexMode;
 		}
 	}), nodeLookup = new RecordMapFacade(internalNodes), initialViewport = getInitialViewport(_props.fitView, _props.initialViewport, _props.width ?? 0, _props.height ?? 0, nodeLookup), [viewportStore, setViewportStore] = createStore(_props.viewport ?? initialViewport);
-	createEffect(() => config().nodes, (next) => {
+	createEffect(() => {
+		let next = config().nodes;
+		for (let node of next);
+		return { next };
+	}, ({ next }) => {
 		setNodesStore(() => next);
-	}, { defer: !0 }), createEffect(() => config().edges, (next) => {
+	}, { defer: !0 }), createEffect(() => {
+		let next = config().edges;
+		for (let edge of next);
+		return { next };
+	}, ({ next }) => {
 		setEdgesStore(() => next);
 	}, { defer: !0 }), createEffect(() => config().viewport, (next) => {
 		next && setViewportStore(() => next);
@@ -744,9 +764,6 @@ const createLayoutedEdges = (source) => {
 			return zoomActivationKeyPressed();
 		}
 	}), cullingViewport = createCullingViewport({
-		get onlyRenderVisibleElements() {
-			return store.onlyRenderVisibleElements;
-		},
 		get width() {
 			return store.width;
 		},
@@ -1572,16 +1589,30 @@ const Handle = (props) => {
 		};
 	}), dragging;
 }, NodeIdContext = createContext(null);
+/**
+* Returns the id of the node this component is rendered inside. Available
+* anywhere in a custom node's subtree (provided by the node wrapper), so
+* nested components — like a custom `Handle` — can learn their host node
+* without prop drilling.
+*
+* @public
+* @returns a reactive accessor for the surrounding node's id
+*/
 function useNodeId() {
 	let ctx = useContext(NodeIdContext);
-	if (!ctx) throw Error("solid-flow: Your application must be wrapped with <SolidFlow> in order to invoke useNodeId");
+	if (!ctx) throw Error("solid-flow: useNodeId must be called inside a node component (anywhere under a custom node's subtree)");
 	return ctx;
 }
 //#endregion
 //#region src/components/node/NodeWrapper.tsx
 /** Internal per-node wrapper: dragging, selection, a11y, measurement, viewport culling, and the dynamic node component. */
 const NodeWrapper = (props) => {
-	let { store, nodeLookup, parentIds, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId), nodeId = () => node().id, nodeType = () => node().type ?? "default", deletable = () => node().deletable ?? !0, selectable = () => node().selectable ?? store.elementsSelectable, focusable = () => node().focusable ?? store.nodesFocusable, draggable = () => node().draggable ?? store.nodesDraggable, connectable = () => node().connectable ?? store.nodesConnectable, userNode = () => node().internals.userNode, nodeTypeValid = () => nodeType() in store.nodeTypes, nodeComponent = () => store.nodeTypes[nodeType()], isParentNode = () => !!parentIds[node().id], transform = () => {
+	let { store, nodeLookup, parentIds, actions } = useInternalSolidFlow(), [nodeRef, setNodeRef] = createSignal(), node = () => nodeLookup.get(props.nodeId);
+	onCleanup(() => {
+		let el = nodeRef();
+		el && props.resizeObserver?.unobserve(el);
+	});
+	let nodeId = () => node().id, nodeType = () => node().type ?? "default", deletable = () => node().deletable ?? !0, selectable = () => node().selectable ?? store.elementsSelectable, focusable = () => node().focusable ?? store.nodesFocusable, draggable = () => node().draggable ?? store.nodesDraggable, connectable = () => node().connectable ?? store.nodesConnectable, userNode = () => node().internals.userNode, nodeTypeValid = () => nodeType() in store.nodeTypes, nodeComponent = () => store.nodeTypes[nodeType()], isParentNode = () => !!parentIds[node().id], transform = () => {
 		let { x, y } = node().internals.positionAbsolute;
 		return `translate(${x}px, ${y}px)`;
 	}, sizeStyle = () => {
@@ -1950,16 +1981,28 @@ const ConnectionLine = (props) => {
       </svg>
     </Show>;
 }, EdgeRenderer = (props) => {
-	let { store } = useInternalSolidFlow();
-	return <div class="solid-flow__edges">
+	let { store, actions } = useInternalSolidFlow(), [focusedEdgeId, setFocusedEdgeId] = createSignal(null), onFocusIn = (event) => {
+		let edgeElement = event.target.closest("[data-id]");
+		setFocusedEdgeId(edgeElement?.getAttribute("data-id") ?? null);
+	};
+	return <div class="solid-flow__edges" onFocusIn={onFocusIn} onFocusOut={() => setFocusedEdgeId(null)}>
       <MarkerDefinition />
 
       <For each={store.visibleEdgeIds}>
-        {(edgeId) => <EdgeWrapper edgeId={edgeId} onEdgeClick={props.onEdgeClick} onEdgeContextMenu={props.onEdgeContextMenu} onEdgePointerEnter={props.onEdgePointerEnter} onEdgePointerLeave={props.onEdgePointerLeave} />}
+        {(edgeId) => {
+		let unmounted = createMemo(() => {
+			if (!store.onlyRenderVisibleElements || focusedEdgeId() === edgeId) return !1;
+			let edge = actions.getEdge(edgeId);
+			return !!edge && isEdgeCulled(edge, store.cullingViewport);
+		});
+		return <Show when={!unmounted()}>
+              <EdgeWrapper edgeId={edgeId} onEdgeClick={props.onEdgeClick} onEdgeContextMenu={props.onEdgeContextMenu} onEdgePointerEnter={props.onEdgePointerEnter} onEdgePointerLeave={props.onEdgePointerLeave} />
+            </Show>;
+	}}
       </For>
     </div>;
 }, NodeRenderer = (props) => {
-	let { actions, store } = useInternalSolidFlow(), resizeObserver = isServer ? void 0 : new ResizeObserver((entries) => {
+	let { actions, store, nodeLookup } = useInternalSolidFlow(), resizeObserver = isServer ? void 0 : new ResizeObserver((entries) => {
 		actions.requestUpdateNodeInternals(entries.map((entry) => {
 			let id = entry.target.getAttribute("data-id");
 			return [id, {
@@ -1969,11 +2012,25 @@ const ConnectionLine = (props) => {
 			}];
 		}));
 	});
-	return onCleanup(() => {
+	onCleanup(() => {
 		resizeObserver?.disconnect();
-	}), <div class="solid-flow__container solid-flow__nodes">
+	});
+	let [focusedNodeId, setFocusedNodeId] = createSignal(null), onFocusIn = (event) => {
+		let nodeElement = event.target.closest("[data-id]");
+		setFocusedNodeId(nodeElement?.getAttribute("data-id") ?? null);
+	};
+	return <div class="solid-flow__container solid-flow__nodes" onFocusIn={onFocusIn} onFocusOut={() => setFocusedNodeId(null)}>
       <For each={store.visibleNodeIds}>
-        {(nodeId) => <NodeWrapper nodeId={nodeId} resizeObserver={resizeObserver} nodeClickDistance={props.nodeClickDistance} onNodeClick={props.onNodeClick} onNodePointerEnter={props.onNodePointerEnter} onNodePointerMove={props.onNodePointerMove} onNodePointerLeave={props.onNodePointerLeave} onNodeDrag={props.onNodeDrag} onNodeDragStart={props.onNodeDragStart} onNodeDragStop={props.onNodeDragStop} onNodeContextMenu={props.onNodeContextMenu} />}
+        {(nodeId) => {
+		let unmounted = createMemo(() => {
+			if (!store.onlyRenderVisibleElements || focusedNodeId() === nodeId) return !1;
+			let node = nodeLookup.get(nodeId);
+			return !!node && isNodeCulled(node, store.cullingViewport);
+		});
+		return <Show when={!unmounted()}>
+              <NodeWrapper nodeId={nodeId} resizeObserver={resizeObserver} nodeClickDistance={props.nodeClickDistance} onNodeClick={props.onNodeClick} onNodePointerEnter={props.onNodePointerEnter} onNodePointerMove={props.onNodePointerMove} onNodePointerLeave={props.onNodePointerLeave} onNodeDrag={props.onNodeDrag} onNodeDragStart={props.onNodeDragStart} onNodeDragStop={props.onNodeDragStop} onNodeContextMenu={props.onNodeContextMenu} />
+            </Show>;
+	}}
       </For>
     </div>;
 }, isSetEqual = (a, b) => {
@@ -2285,25 +2342,14 @@ const ConnectionLine = (props) => {
 * `const { flow, commands } = useSolidFlow()`.
 *
 * @public
-* @returns the flow's read struct, write surface, and deprecated aliases
+* @returns the flow's read struct and write surface
 */
 function useSolidFlow() {
-	let { flow, commands, store, edgeLookup } = useInternalSolidFlow(), getInternalNode = (id) => flow.internalNodes[id];
+	let { flow, commands } = useInternalSolidFlow();
 	return {
 		...commands,
 		flow,
-		commands,
-		getInternalNode,
-		getNode: (id) => getInternalNode(id)?.internals.userNode,
-		getNodes: (ids) => ids ? ids.flatMap((id) => {
-			let userNode = flow.internalNodes[id]?.internals.userNode;
-			return userNode ? [userNode] : [];
-		}) : [...flow.nodes],
-		getEdge: (id) => edgeLookup[id],
-		getEdges: (ids) => ids ? ids.flatMap((id) => edgeLookup[id] ? [edgeLookup[id]] : []) : [...flow.edges],
-		getViewport: () => snapshot(store.viewport),
-		getZoom: () => flow.viewport.zoom,
-		getHandleConnections: ({ type, id, nodeId }) => Object.values(flow.connections[connectionKey(nodeId, type, id ?? null)] ?? {})
+		commands
 	};
 }
 //#endregion
@@ -2339,6 +2385,34 @@ function matchesKey(event, keyDef) {
 function matchesKeyArray(event, keyDefs) {
 	return keyDefs ? (Array.isArray(keyDefs) ? keyDefs : [keyDefs]).some((keyDef) => matchesKey(event, keyDef)) : !1;
 }
+const MODIFIER_FLAG = {
+	alt: "altKey",
+	control: "ctrlKey",
+	ctrl: "ctrlKey",
+	meta: "metaKey",
+	shift: "shiftKey"
+};
+/**
+* Whether an event's modifier flags PROVE this key definition cannot be held
+* right now: the key itself is a modifier whose flag is off, or one of its
+* required modifiers is off. Definitions built on non-modifier keys are never
+* contradicted (their state isn't derivable from flags).
+*/
+function isContradicted(flags, keyDef) {
+	let keyFlag = MODIFIER_FLAG[getKeyString(keyDef).toLowerCase()];
+	if (keyFlag && !flags[keyFlag]) return !0;
+	let modifiers = getModifier(keyDef);
+	return (Array.isArray(modifiers) ? modifiers.flatMap((mod) => mod) : [modifiers]).some((mod) => {
+		let modFlag = MODIFIER_FLAG[mod.toLowerCase()];
+		return !!modFlag && !flags[modFlag];
+	});
+}
+/** True only when EVERY definition for this key state is contradicted. */
+function allContradicted(flags, keyDefs) {
+	if (!keyDefs) return !1;
+	let keys = Array.isArray(keyDefs) ? keyDefs : [keyDefs];
+	return keys.length > 0 && keys.every((keyDef) => isContradicted(flags, keyDef));
+}
 const KeyHandler = (props) => {
 	let { store, actions } = useInternalSolidFlow(), { deleteElements } = useSolidFlow(), _props = {
 		get selectionKey() {
@@ -2358,6 +2432,20 @@ const KeyHandler = (props) => {
 		}
 	}, resetKeysAndSelection = () => {
 		actions.setSelectionRect(void 0), actions.setSelectionKeyPressed(!1), actions.setMultiselectionKeyPressed(!1), actions.setDeleteKeyPressed(!1), actions.setPanActivationKeyPressed(!1), actions.setZoomActivationKeyPressed(!1);
+	}, reconcileModifiers = (event) => {
+		let changed = !1;
+		store.selectionKeyPressed && allContradicted(event, _props.selectionKey) && (actions.setSelectionKeyPressed(!1), changed = !0), store.multiselectionKeyPressed && allContradicted(event, _props.multiSelectionKey) && (actions.setMultiselectionKeyPressed(!1), changed = !0), store.panActivationKeyPressed && allContradicted(event, _props.panActivationKey) && (actions.setPanActivationKeyPressed(!1), changed = !0), store.zoomActivationKeyPressed && allContradicted(event, _props.zoomActivationKey) && (actions.setZoomActivationKeyPressed(!1), changed = !0), changed && flush();
+	}, cancelPointerGestures = () => {
+		let release = (Ctor, type) => {
+			try {
+				window.dispatchEvent(new Ctor(type, { view: window }));
+			} catch {
+				window.dispatchEvent(new Ctor(type));
+			}
+		};
+		release(MouseEvent, "mouseup"), typeof PointerEvent < "u" && release(PointerEvent, "pointerup");
+	}, handleWindowBlur = () => {
+		resetKeysAndSelection(), cancelPointerGestures();
 	}, handleDelete = async () => {
 		let selectedNodes = store.nodes.filter((node) => node.selected), selectedEdges = store.edges.filter((edge) => edge.selected), { deletedNodes, deletedEdges } = await deleteElements({
 			nodes: selectedNodes,
@@ -2368,16 +2456,22 @@ const KeyHandler = (props) => {
 			edges: deletedEdges
 		});
 	};
-	return isServer || createEventListenerMap(window, {
+	return isServer || (createEventListenerMap(window, {
 		keydown: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
+			reconcileModifiers(event), matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!0), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!0), matchesKeyArray(event, _props.deleteKey) && !isInputDOMNode(event) && (event.ctrlKey || event.metaKey || event.shiftKey || (actions.setDeleteKeyPressed(!0), handleDelete())), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!0), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!0), flush();
 		},
 		keyup: (event) => {
-			matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
+			reconcileModifiers(event), matchesKeyArray(event, _props.selectionKey) && actions.setSelectionKeyPressed(!1), matchesKeyArray(event, _props.multiSelectionKey) && actions.setMultiselectionKeyPressed(!1), matchesKeyArray(event, _props.deleteKey) && actions.setDeleteKeyPressed(!1), matchesKeyArray(event, _props.panActivationKey) && actions.setPanActivationKeyPressed(!1), matchesKeyArray(event, _props.zoomActivationKey) && actions.setZoomActivationKeyPressed(!1), flush();
 		},
-		blur: resetKeysAndSelection,
+		blur: handleWindowBlur,
 		contextmenu: resetKeysAndSelection
-	}), null;
+	}), createEventListenerMap(window, {
+		pointerdown: reconcileModifiers,
+		wheel: reconcileModifiers
+	}, {
+		capture: !0,
+		passive: !0
+	})), null;
 }, SolidFlow = (props) => {
 	let [domNodeRef, setDomNodeRef] = createSignal(), domNode, _props = merge({
 		...getDefaultFlowStateProps(),
@@ -2534,19 +2628,6 @@ function useViewport() {
 	return () => flow.viewport;
 }
 //#endregion
-//#region src/hooks/useHandleEdgeSelect.ts
-/** Returns a callback applying edge-selection semantics for the given edge id. */
-function useHandleEdgeSelect() {
-	let { store, edgeLookup, actions } = useInternalSolidFlow();
-	return (id) => {
-		let edge = edgeLookup[id];
-		edge && (edge.selectable || store.elementsSelectable && edge.selectable === void 0) && (actions.setSelectionRect(void 0), actions.setSelectionRectMode(void 0), edge.selected ? edge.selected && store.multiselectionKeyPressed && actions.unselectNodesAndEdges({
-			nodes: [],
-			edges: [edge]
-		}) : actions.addSelectedEdges([id]));
-	};
-}
-//#endregion
 //#region src/hooks/useInitialized.ts
 /**
 * Hook for seeing if all nodes have been measured.
@@ -2576,11 +2657,16 @@ function useViewportInitialized() {
 //#endregion
 //#region src/hooks/useInternalNode.ts
 /**
-* Hook to get an internal node by id.
+* Hook to get an internal node (the node enriched with measured dimensions,
+* absolute position, and z-order) by id.
+*
+* The id is an accessor (not a plain string) on purpose: passing a raw
+* reactive read like `props.nodeId` would capture the value once and silently
+* lose reactivity — `useInternalNode(() => props.nodeId)` keeps it live.
 *
 * @public
-* @param id - the node id
-* @returns an accessor with an internal node or undefined
+* @param id - a reactive accessor for the node id
+* @returns an accessor with the internal node, or undefined while absent
 */
 function useInternalNode(id) {
 	let { flow } = useInternalSolidFlow();
@@ -2667,7 +2753,6 @@ const DotPattern = (props) => {
 	let _props = propDefaults(props, {
 		variant: "dots",
 		gap: 20,
-		size: 1,
 		lineWidth: 1,
 		style: {}
 	}), { store } = useInternalSolidFlow(), isDots = () => _props.variant === "dots", isCross = () => _props.variant === "cross", patternId = () => `background-pattern-${store.id}-${_props.id ?? ""}`, scaledSize = () => (_props.size ?? DEFAULT_SIZE[_props.variant]) * store.viewport.zoom, gapXY = () => Array.isArray(_props.gap) ? _props.gap : [_props.gap, _props.gap], scaledGap = () => [gapXY()[0] * store.viewport.zoom || 1, gapXY()[1] * store.viewport.zoom || 1], patternDimensions = () => isCross() ? [scaledSize(), scaledSize()] : scaledGap(), patternOffset = () => isDots() ? [scaledSize() / 2, scaledSize() / 2] : [patternDimensions()[0] / 2, patternDimensions()[1] / 2];
@@ -2763,8 +2848,8 @@ const DotPattern = (props) => {
 		borderRadius: 5,
 		width: 0,
 		height: 0
-	}), style = () => Object.entries({
-		fill: _props.color,
+	}), fill = () => _props.color ?? _props.style?.background ?? _props.style?.["background-color"], style = () => Object.entries({
+		fill: fill(),
 		stroke: _props.strokeColor,
 		"stroke-width": _props.strokeWidth
 	}).filter(([_, value]) => value !== void 0).reduce((acc, [key, value]) => (acc[key] = value, acc), {});
@@ -2772,7 +2857,7 @@ const DotPattern = (props) => {
 		"solid-flow__minimap-node",
 		{ selected: !!_props.selected },
 		_props.class
-	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} />;
+	]} x={_props.x} y={_props.y} rx={_props.borderRadius} ry={_props.borderRadius} width={_props.width} height={_props.height} shape-rendering={_props.shapeRendering} style={style()} onClick={_props.onClick ? (event) => _props.onClick(event, _props.id) : void 0} />;
 }, getAttrFunction = (func) => func instanceof Function ? func : () => func, MiniMap = (props) => {
 	let { store, nodeLookup } = useInternalSolidFlow(), _props = propDefaults(props, {
 		position: "bottom-right",
@@ -2785,7 +2870,7 @@ const DotPattern = (props) => {
 		nodeBorderRadius: 5,
 		nodeStrokeWidth: 2,
 		style: {}
-	}), paneProps = omit(_props, "class", "style", "position", "nodeClass", "nodeStrokeColor", "nodeColor", "pannable", "zoomable", "inversePan", "zoomStep", "bgColor", "width", "height", "maskColor", "maskStrokeColor", "maskStrokeWidth", "nodeBorderRadius", "nodeStrokeWidth"), nodeColorFunc = () => _props.nodeColor === void 0 ? void 0 : getAttrFunction(_props.nodeColor), nodeStrokeColorFunc = () => getAttrFunction(_props.nodeStrokeColor), nodeClassFunc = () => getAttrFunction(_props.nodeClass), shapeRendering = () => typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision", labelledBy = createMemo(() => `solid-flow__minimap-desc-${store.id}`), getViewBB = () => ({
+	}), paneProps = omit(_props, "class", "style", "position", "nodeClass", "nodeStrokeColor", "nodeColor", "pannable", "zoomable", "inversePan", "zoomStep", "bgColor", "width", "height", "maskColor", "maskStrokeColor", "maskStrokeWidth", "nodeBorderRadius", "nodeStrokeWidth", "nodeComponent", "onClick", "onNodeClick"), nodeColorFunc = () => _props.nodeColor === void 0 ? void 0 : getAttrFunction(_props.nodeColor), nodeStrokeColorFunc = () => getAttrFunction(_props.nodeStrokeColor), nodeClassFunc = () => getAttrFunction(_props.nodeClass), shapeRendering = () => typeof window > "u" || window.chrome ? "crispEdges" : "geometricPrecision", labelledBy = createMemo(() => `solid-flow__minimap-desc-${store.id}`), getViewBB = () => ({
 		x: -store.viewport.x / store.viewport.zoom,
 		y: -store.viewport.y / store.viewport.zoom,
 		width: store.width / store.viewport.zoom,
@@ -2810,7 +2895,7 @@ const DotPattern = (props) => {
       <Show when={store.panZoom}>
         {(panZoom) => {
 		let [ref, setRef] = createSignal(), [minimap, setMinimap] = createSignal();
-		return createEffect(() => ({
+		createEffect(() => ({
 			el: ref(),
 			panZoom: panZoom()
 		}), ({ el, panZoom }) => {
@@ -2837,7 +2922,19 @@ const DotPattern = (props) => {
 			}
 		}), ({ instance, options }) => {
 			instance?.update(options);
-		}), <svg ref={setRef} width={_props.width} height={_props.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} style={{
+		});
+		let onSvgClick = (event) => {
+			if (!_props.onClick) return;
+			let [x, y] = minimap()?.pointer(event) ?? [0, 0];
+			_props.onClick(event, {
+				x,
+				y
+			});
+		}, onSvgNodeClick = (event, nodeId) => {
+			let node = nodeLookup.get(nodeId)?.internals.userNode;
+			node && _props.onNodeClick?.(event, node);
+		};
+		return <svg ref={setRef} width={_props.width} height={_props.height} viewBox={`${getX()} ${getY()} ${getViewboxWidth()} ${getViewboxHeight()}`} class="solid-flow__minimap-svg" role="img" aria-labelledby={labelledBy()} onClick={_props.onClick ? onSvgClick : void 0} style={{
 			"--xy-minimap-mask-background-color-props": _props.maskColor,
 			"--xy-minimap-mask-stroke-color-props": _props.maskStrokeColor,
 			"--xy-minimap-mask-stroke-width-props": strokeWidth()
@@ -2847,7 +2944,7 @@ const DotPattern = (props) => {
                 {(nodeId) => {
 			let node = createMemo(() => nodeLookup.get(nodeId())), nodeVisible = () => !!(node() && nodeHasDimensions(node()) && !node().hidden);
 			return <Show when={nodeVisible() && getNodeDimensions(node())}>
-                      {(nodeDimensions) => <MiniMapNode x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} />}
+                      {(nodeDimensions) => <Dynamic component={_props.nodeComponent ?? MiniMapNode} id={nodeId()} x={node().internals.positionAbsolute.x} y={node().internals.positionAbsolute.y} borderRadius={_props.nodeBorderRadius} strokeWidth={_props.nodeStrokeWidth} shapeRendering={shapeRendering()} width={nodeDimensions().width} height={nodeDimensions().height} selected={node().selected} color={nodeColorFunc()?.call(null, node())} strokeColor={nodeStrokeColorFunc().call(null, node())} class={nodeClassFunc().call(null, node())} style={node().style} onClick={_props.onNodeClick ? onSvgNodeClick : void 0} />}
                     </Show>;
 		}}
               </For>
@@ -2964,7 +3061,7 @@ const DotPattern = (props) => {
       </EdgeLabel>
     </Show>;
 }, NodeToolbar = (props) => {
-	let { store } = useInternalSolidFlow(), { getNodes, getNodesBounds, getInternalNode } = useSolidFlow(), _props = propDefaults(props, {
+	let { store } = useInternalSolidFlow(), { flow, getNodesBounds } = useSolidFlow(), _props = propDefaults(props, {
 		offset: 10,
 		position: "top",
 		align: "center",
@@ -2973,7 +3070,7 @@ const DotPattern = (props) => {
 		let id = useContext(NodeIdContext);
 		return id ? id() : "";
 	}, toolbarNodes = () => (Array.isArray(_props.nodeId) ? _props.nodeId : [_props.nodeId ?? ctxNodeId()]).reduce((res, nodeId) => {
-		let node = getInternalNode(nodeId);
+		let node = flow.internalNodes[nodeId];
 		return node && res.push(node), res;
 	}, []), transform = () => {
 		let nodeRect = getNodesBounds(toolbarNodes());
@@ -2981,7 +3078,7 @@ const DotPattern = (props) => {
 	}, zIndex = () => {
 		let nodes = toolbarNodes();
 		return nodes.length === 0 ? 1 : Math.max(...nodes.map((node) => (node.internals.z || 5) + 1));
-	}, selectedNodesCount = () => getNodes().filter((node) => node.selected).length, isActive = () => {
+	}, selectedNodesCount = () => flow.selection.nodes.length, isActive = () => {
 		let nodes = toolbarNodes();
 		return typeof _props.isVisible == "boolean" ? _props.isVisible : nodes.length === 1 && !!nodes[0].selected && selectedNodesCount() === 1;
 	}, showPortal = () => !!(store.domNode && isActive() && toolbarNodes().length > 0);
@@ -2999,4 +3096,4 @@ const DotPattern = (props) => {
     </Show>;
 }, SelectionMode = SelectionMode$1, getEdgeCenter = getEdgeCenter$1, getBezierEdgeCenter = getBezierEdgeCenter$1;
 //#endregion
-export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine, ConnectionLineType, ConnectionMode, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MarkerType, MiniMap, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdges, useHandleEdgeSelect, useInternalNode, useNodeConnections, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };
+export { Background, BaseEdge, BezierEdge, BezierEdgeInternal, ConnectionLine, ConnectionLineType, ConnectionMode, ControlButton, Controls, DefaultNode, EdgeLabel, EdgeLabelRenderer, EdgeReconnectAnchor, EdgeRenderer, EdgeToolbar, EdgeWrapper, GroupNode, Handle, InputNode, Marker, MarkerDefinition, MarkerType, MiniMap, MiniMapNode, NodeRenderer, NodeResizer, NodeSelection, NodeToolbar, NodeWrapper, OutputNode, PanOnScrollMode, Pane, Panel, Position, ResizeControl, ResizeControlVariant, Selection, SelectionMode, SmoothStepEdge, SmoothStepEdgeInternal, SolidFlow, SolidFlowProvider, StepEdge, StepEdgeInternal, StraightEdge, StraightEdgeInternal, Viewport, ViewportPortal, Zoom, addEdge, connectionKey, createEdgeStore, createNodeStore, getBezierEdgeCenter, getBezierPath, getConnectedEdges, getEdgeCenter, getIncomers, getNodesBounds, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, useColorMode, useConnection, useEdgeId, useEdges, useInternalNode, useNodeConnections, useNodeId, useNodes, useNodesData, useNodesInitialized, useSolidFlow, useUpdateNodeInternals, useViewport, useViewportInitialized };

package/dist/styles/index.css

@@ -93,7 +93,7 @@
   --xy-connectionline-stroke-width-default: 1;
 }
 
-connectionline {
+.solid-flow__connectionline {
   z-index: 1001;
   overflow: visible;
   position: absolute;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dschz/solid-flow",
-  "version": "0.3.0-next.3",
+  "version": "0.3.0-next.5",
   "description": "Solid Flow - A highly customizable Solid library for building node-based editors, workflow systems, diagrams and more.",
   "keywords": [
     "ai workflows",
@@ -87,6 +87,7 @@
     "start": "vite",
     "test": "vitest run",
     "test:cov": "vitest run --coverage",
+    "test:e2e": "playwright test",
     "typecheck": "tsc --noEmit",
     "test:ssr": "vitest run --config vite.config.ssr.ts"
   },
@@ -100,6 +101,7 @@
     "@changesets/cli": "2.31.1",
     "@dagrejs/dagre": "^1.1.5",
     "@dom-expressions/compiler": "0.50.0-next.43",
+    "@playwright/test": "1.62.1",
     "@solidjs/testing-library": "1.0.0-beta.2",
     "@solidjs/vite-plugin": "3.0.0-next.28",
     "@testing-library/jest-dom": "7.0.0",