@xyflow/vue 2.0.0-next.3 → 2.0.0-next.4

package/dist/index.js

@@ -22,12 +22,14 @@ let ErrorCode = /* @__PURE__ */ function(ErrorCode) {
 	ErrorCode["NODE_MISSING_PARENT"] = "NODE_MISSING_PARENT";
 	ErrorCode["NODE_TYPE_MISSING"] = "NODE_TYPE_MISSING";
 	ErrorCode["NODE_EXTENT_INVALID"] = "NODE_EXTENT_INVALID";
+	ErrorCode["NODE_DUPLICATE_ID"] = "NODE_DUPLICATE_ID";
 	ErrorCode["EDGE_INVALID"] = "EDGE_INVALID";
 	ErrorCode["EDGE_NOT_FOUND"] = "EDGE_NOT_FOUND";
 	ErrorCode["EDGE_SOURCE_MISSING"] = "EDGE_SOURCE_MISSING";
 	ErrorCode["EDGE_TARGET_MISSING"] = "EDGE_TARGET_MISSING";
 	ErrorCode["EDGE_TYPE_MISSING"] = "EDGE_TYPE_MISSING";
 	ErrorCode["EDGE_SOURCE_TARGET_MISSING"] = "EDGE_SOURCE_TARGET_MISSING";
+	ErrorCode["EDGE_DUPLICATE_ID"] = "EDGE_DUPLICATE_ID";
 	ErrorCode["USE_VUE_FLOW_OUTSIDE_PROVIDER"] = "USE_VUE_FLOW_OUTSIDE_PROVIDER";
 	return ErrorCode;
 }({});
@@ -39,11 +41,13 @@ const messages = {
 	["NODE_MISSING_PARENT"]: (id, parentId) => `Node is missing a parent\nNode id: ${id}\nParent id: ${parentId}`,
 	["NODE_TYPE_MISSING"]: (type) => `Node type is missing\nType: ${type}`,
 	["NODE_EXTENT_INVALID"]: (id) => `Only child nodes can use a parent extent\nNode id: ${id}`,
+	["NODE_DUPLICATE_ID"]: (id) => `Node id is not unique — a later node overwrites the earlier one in the lookup\nNode id: ${id}`,
 	["EDGE_INVALID"]: (id) => `An edge needs a source and a target\nEdge id: ${id}`,
 	["EDGE_SOURCE_MISSING"]: (id, source) => `Edge source is missing\nEdge id: ${id} \nSource id: ${source}`,
 	["EDGE_TARGET_MISSING"]: (id, target) => `Edge target is missing\nEdge id: ${id} \nTarget id: ${target}`,
 	["EDGE_TYPE_MISSING"]: (type) => `Edge type is missing\nType: ${type}`,
 	["EDGE_SOURCE_TARGET_MISSING"]: (id, source, target) => `Edge source or target is missing\nEdge id: ${id} \nSource id: ${source} \nTarget id: ${target}`,
+	["EDGE_DUPLICATE_ID"]: (id) => `Edge id is not unique — a later edge overwrites the earlier one in the lookup\nEdge id: ${id}`,
 	["EDGE_NOT_FOUND"]: (id) => `Edge not found\nEdge id: ${id}`,
 	["USE_VUE_FLOW_OUTSIDE_PROVIDER"]: () => `useVueFlow() was called without a <VueFlow> or <VueFlowProvider> ancestor (or outside a component setup). Render one of them above the call, or wrap your components in <VueFlowProvider> to share a store.`
 };
@@ -826,12 +830,15 @@ function reconnectEdgeAction(edge, newConnection, prevEdge, shouldReplaceId, tri
 */
 function adoptNodes(nodes, nodeLookup, parentLookup, triggerError, options) {
 	const validNodes = [];
+	const seenNodeIds = /* @__PURE__ */ new Set();
 	for (let i = 0; i < nodes.length; ++i) {
 		const node = nodes[i];
 		if (!isNode(node)) {
 			triggerError(new VueFlowError("NODE_INVALID", node?.id ?? `[ID UNKNOWN|INDEX ${i}]`));
 			continue;
 		}
+		if (seenNodeIds.has(node.id)) triggerError(new VueFlowError("NODE_DUPLICATE_ID", node.id));
+		else seenNodeIds.add(node.id);
 		validNodes.push((0, vue.markRaw)((0, vue.toRaw)(node)));
 	}
 	const priorInternals = /* @__PURE__ */ new Map();
@@ -1554,9 +1561,10 @@ function useViewportHelper(state, nodeLookup) {
 /**
 * Two-way bind a `v-model` array ref to the store, identity-in / snapshot-out, with native `watch`.
 *
-* Used only when `<VueFlow>` does NOT own its store (it reuses a `<VueFlowProvider>`'s), so the model
-* refs can't back the store directly. The owned-store path is single-source instead — the model refs
-* ARE the store's nodes/edges (see `createStore`'s `StoreSignals` binding), needing no sync here.
+* Runs for BOTH the owned- and reused-store paths: the store's canonical nodes/edges are always an
+* internal `shallowRef` (see `createStore`), never the v-model ref, so this is the single place the model
+* ref is bridged to the store. Both directions flush synchronously so the model ref and the store's
+* synchronous reads (`getNodes`/`state.nodes`) never disagree within a tick.
 *
 * - **out** (store → model): snapshot on every membership change; element refs are shared, so per-node
 *   field mutations surface without a copy.
@@ -1569,24 +1577,29 @@ function syncModelArray(model, storeItems, setItems) {
 	(0, vue.watch)([storeItems, () => storeItems.value.length], () => {
 		lastSnapshot = [...storeItems.value];
 		model.value = lastSnapshot;
-	}, { immediate: storeItems.value.length > 0 });
+	}, {
+		immediate: storeItems.value.length > 0,
+		flush: "sync"
+	});
 	(0, vue.watch)([model, () => model.value?.length], ([next]) => {
 		if (!Array.isArray(next)) return;
 		const nextRaw = (0, vue.toRaw)(next);
 		if (nextRaw === lastSnapshot) return;
 		setItems(nextRaw);
-	}, { immediate: true });
+	}, {
+		immediate: true,
+		flush: "sync"
+	});
 }
 /**
 * Watches props and updates the store accordingly
 *
 * @internal
-* @param models v-model refs for nodes/edges (bound only when `ownsStore` is false — see {@link syncModelArray})
+* @param models v-model refs for nodes/edges — bridged to the store here (see {@link syncModelArray})
 * @param props the `<VueFlow>` props
 * @param handle the created store handle ({@link VueFlowStoreHandle}) — instance (actions) + reactive state
-* @param ownsStore whether this `<VueFlow>` created the store (then nodes/edges are signal-backed and skipped here)
 */
-function useWatchProps(models, props, handle, ownsStore = false) {
+function useWatchProps(models, props, handle) {
 	const { instance, state } = handle;
 	const storeRefs = storeToRefs(state);
 	const scope = (0, vue.effectScope)(true);
@@ -1690,10 +1703,8 @@ function useWatchProps(models, props, handle, ownsStore = false) {
 			}
 		};
 		const runAll = () => {
-			if (!ownsStore) {
-				watchNodesValue();
-				watchEdgesValue();
-			}
+			watchNodesValue();
+			watchEdgesValue();
 			watchMinZoom();
 			watchMaxZoom();
 			watchTranslateExtent();
@@ -1715,7 +1726,8 @@ const _sfc_main$22 = /* @__PURE__ */ (0, vue.defineComponent)({
 	props: {
 		position: {
 			type: String,
-			required: true
+			required: false,
+			default: "top-left"
 		},
 		label: {
 			type: [String, null],
@@ -3307,14 +3319,16 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 		const { nodeLookup, parentLookup } = useStore();
 		const { transform, nodeOrigin, snapGrid, snapToGrid, vueFlowRef, noDragClassName } = storeToRefs(useStore());
 		const resizeControlRef = (0, vue.shallowRef)();
+		const contextNodeId = (0, vue.inject)(NodeId, null);
+		const nodeId = (0, vue.toRef)(() => typeof props.nodeId === "string" ? props.nodeId : contextNodeId ?? void 0);
 		const controlPosition = (0, vue.toRef)(() => props.position ?? DefaultPositions[props.variant]);
 		const positionClassNames = (0, vue.computed)(() => controlPosition.value.split("-"));
 		const controlStyle = (0, vue.toRef)(() => props.color ? { [StylingProperty[props.variant]]: props.color } : {});
 		(0, vue.watchEffect)((onCleanup) => {
-			if (!resizeControlRef.value || !props.nodeId) return;
+			if (!resizeControlRef.value || !nodeId.value) return;
 			const resizerInstance = (0, _xyflow_system.XYResizer)({
 				domNode: resizeControlRef.value,
-				nodeId: props.nodeId,
+				nodeId: nodeId.value,
 				getStoreItems: () => ({
 					nodeLookup,
 					transform: transform.value,
@@ -3325,7 +3339,7 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 				}),
 				onChange: (changes, childChanges) => {
 					const nodeChanges = [];
-					const node = nodeLookup.get(props.nodeId);
+					const node = nodeLookup.get(nodeId.value);
 					let nextX = changes.x;
 					let nextY = changes.y;
 					if (node?.expandParent && node.parentId) {
@@ -3357,14 +3371,14 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 							y: nextY ?? node?.position.y ?? 0
 						};
 						nodeChanges.push({
-							id: props.nodeId,
+							id: nodeId.value,
 							type: "position",
 							position,
 							positionAbsolute: position
 						});
 					}
 					if (typeof changes.width !== "undefined" || typeof changes.height !== "undefined") nodeChanges.push({
-						id: props.nodeId,
+						id: nodeId.value,
 						type: "dimensions",
 						setAttributes: true,
 						resizing: true,
@@ -3383,7 +3397,7 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 				},
 				onEnd: ({ width, height }) => {
 					triggerEmits.nodesChange([{
-						id: props.nodeId,
+						id: nodeId.value,
 						type: "dimensions",
 						resizing: false,
 						dimensions: {
@@ -3434,6 +3448,8 @@ const _sfc_main$14 = /* @__PURE__ */ (0, vue.defineComponent)({
 			vueFlowRef,
 			noDragClassName,
 			resizeControlRef,
+			contextNodeId,
+			nodeId,
 			controlPosition,
 			positionClassNames,
 			controlStyle,
@@ -4277,8 +4293,11 @@ function useActions(state, nodeLookup, parentLookup, edgeLookup) {
 	*/
 	function commitEdges(next) {
 		const rawEdgeLookup = (0, vue.toRaw)(edgeLookup);
+		const seenEdgeIds = /* @__PURE__ */ new Set();
 		for (let i = 0; i < next.length; i++) {
 			const edge = next[i] = (0, vue.markRaw)((0, vue.toRaw)(next[i]));
+			if (seenEdgeIds.has(edge.id)) state.hooks.error.trigger(new VueFlowError("EDGE_DUPLICATE_ID", edge.id));
+			else seenEdgeIds.add(edge.id);
 			if (rawEdgeLookup.get(edge.id) !== edge) edgeLookup.set(edge.id, edge);
 		}
 		if (rawEdgeLookup.size !== next.length) {
@@ -4962,17 +4981,14 @@ function useGetters(state, nodeLookup) {
 * @internal
 */
 function createVueFlowStore(id, preloadedState, onDestroy, signals) {
-	const nodesSignal = signals?.nodes ?? (0, vue.shallowRef)([]);
-	const edgesSignal = signals?.edges ?? (0, vue.shallowRef)([]);
-	let lastWriteNodes;
-	let lastWriteEdges;
+	const nodesSignal = (0, vue.shallowRef)(signals?.nodes?.value ?? []);
+	const edgesSignal = (0, vue.shallowRef)(signals?.edges?.value ?? []);
 	const emptyNodes = [];
 	const emptyEdges = [];
 	const state = useState();
 	Object.defineProperty(state, "nodes", {
 		get: () => nodesSignal.value ?? emptyNodes,
 		set: (value) => {
-			lastWriteNodes = (0, vue.toRaw)(value);
 			nodesSignal.value = value;
 		},
 		enumerable: true,
@@ -4981,7 +4997,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 	Object.defineProperty(state, "edges", {
 		get: () => edgesSignal.value ?? emptyEdges,
 		set: (value) => {
-			lastWriteEdges = (0, vue.toRaw)(value);
 			edgesSignal.value = value;
 		},
 		enumerable: true,
@@ -5004,14 +5019,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 		...reactiveState,
 		...preloadedState
 	});
-	if (signals?.nodes) (0, vue.watch)(nodesSignal, (next) => {
-		const nextRaw = next && (0, vue.toRaw)(next);
-		if (nextRaw && nextRaw !== lastWriteNodes) actions.setNodes(nextRaw);
-	});
-	if (signals?.edges) (0, vue.watch)(edgesSignal, (next) => {
-		const nextRaw = next && (0, vue.toRaw)(next);
-		if (nextRaw && nextRaw !== lastWriteEdges) actions.setEdges(nextRaw);
-	});
 	return {
 		instance: {
 			...hooksOn,
@@ -5162,7 +5169,7 @@ function useViewportSync(model, state = useStore()) {
 		};
 		if (sameViewport(viewport, model.value)) return;
 		model.value = viewport;
-	});
+	}, { flush: "sync" });
 }
 //#endregion
 //#region src/components/ConnectionLine/index.ts
@@ -5195,13 +5202,13 @@ const ConnectionLine = (0, vue.defineComponent)({
 			}
 			const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null;
 			const fromPosition = fromHandle?.position ?? _xyflow_system.Position.Top;
-			const { x: fromX, y: fromY } = (0, _xyflow_system.getHandlePosition)(fromNode.value, fromHandle, fromPosition);
+			const { x: fromX, y: fromY } = (0, _xyflow_system.getHandlePosition)(fromNode.value, fromHandle, fromPosition, true);
 			let toHandle = null;
 			if (toNode.value) if (connectionMode.value === _xyflow_system.ConnectionMode.Strict) toHandle = toNode.value.internals.handleBounds?.[handleType === "source" ? "target" : "source"]?.find((d) => d.id === connectionEndHandle.value?.id) || null;
 			else toHandle = [...toNode.value.internals.handleBounds?.source ?? [], ...toNode.value.internals.handleBounds?.target ?? []].find((d) => d.id === connectionEndHandle.value?.id) || null;
 			const toPosition = connectionEndHandle.value?.position ?? (fromPosition ? _xyflow_system.oppositePosition[fromPosition] : null);
 			if (!fromPosition || !toPosition) return null;
-			const { x: toX, y: toY } = toHandle && toNode.value ? (0, _xyflow_system.getHandlePosition)(toNode.value, toHandle, toPosition) : pointer.value;
+			const { x: toX, y: toY } = toHandle && toNode.value ? (0, _xyflow_system.getHandlePosition)(toNode.value, toHandle, toPosition, true) : pointer.value;
 			const type = connectionLineOptions.value.type ?? _xyflow_system.ConnectionLineType.Bezier;
 			let dAttr = "";
 			const pathParams = {
@@ -5942,6 +5949,8 @@ const NodeWrapper = (0, vue.defineComponent)({
 		const getStyle = (0, vue.computed)(() => {
 			const node = nodeRef.value;
 			const styles = { ...node?.style };
+			if (typeof styles.width === "number") styles.width = `${styles.width}px`;
+			if (typeof styles.height === "number") styles.height = `${styles.height}px`;
 			const isMeasured = !!node?.internals.handleBounds;
 			const width = node?.width ?? (isMeasured ? void 0 : node?.initialWidth);
 			const height = node?.height ?? (isMeasured ? void 0 : node?.initialHeight);
@@ -7310,7 +7319,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 		}, props, {
 			instance,
 			state
-		}, ownsStore);
+		});
 		useHooks(emit, state.hooks);
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
@@ -7383,6 +7392,89 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var VueFlowProvider_default = /* @__PURE__ */ export_helper_default(_sfc_main, [["render", _sfc_render], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/container/VueFlowProvider/VueFlowProvider.vue"]]);
 //#endregion
+//#region src/utils/prop-of.ts
+function propOf(required = false) {
+	return {
+		type: null,
+		required
+	};
+}
+//#endregion
+//#region src/props-objects.gen.ts
+function nodeProps() {
+	return {
+		data: propOf(true),
+		deletable: propOf(true),
+		dragHandle: propOf(),
+		draggable: propOf(true),
+		dragging: propOf(true),
+		height: propOf(),
+		id: propOf(true),
+		isConnectable: propOf(true),
+		parentId: propOf(),
+		positionAbsoluteX: propOf(true),
+		positionAbsoluteY: propOf(true),
+		selectable: propOf(true),
+		selected: propOf(true),
+		sourcePosition: propOf(),
+		targetPosition: propOf(),
+		type: propOf(true),
+		width: propOf(),
+		zIndex: propOf(true)
+	};
+}
+function edgeProps() {
+	return {
+		animated: propOf(),
+		curvature: propOf(),
+		data: propOf(),
+		deletable: propOf(),
+		id: propOf(true),
+		interactionWidth: propOf(),
+		label: propOf(),
+		labelBgBorderRadius: propOf(),
+		labelBgPadding: propOf(),
+		labelBgStyle: propOf(),
+		labelShowBg: propOf(),
+		labelStyle: propOf(),
+		markerEnd: propOf(),
+		markerStart: propOf(),
+		reconnectable: propOf(),
+		selectable: propOf(),
+		selected: propOf(),
+		source: propOf(true),
+		sourceHandleId: propOf(),
+		sourcePosition: propOf(true),
+		sourceX: propOf(true),
+		sourceY: propOf(true),
+		style: propOf(),
+		target: propOf(true),
+		targetHandleId: propOf(),
+		targetPosition: propOf(true),
+		targetX: propOf(true),
+		targetY: propOf(true),
+		type: propOf()
+	};
+}
+function connectionLineProps() {
+	return {
+		connectionStatus: propOf(true),
+		fromHandle: propOf(true),
+		fromNode: propOf(true),
+		fromPosition: propOf(true),
+		fromX: propOf(true),
+		fromY: propOf(true),
+		markerEnd: propOf(),
+		markerStart: propOf(),
+		pointer: propOf(true),
+		toHandle: propOf(true),
+		toNode: propOf(true),
+		toPosition: propOf(true),
+		toX: propOf(true),
+		toY: propOf(true)
+	};
+}
+//#endregion
 exports.Background = Background_default;
 exports.BaseEdge = BaseEdge_default;
 exports.BezierEdge = BezierEdge;
@@ -7455,8 +7547,10 @@ Object.defineProperty(exports, "clamp", {
 	}
 });
 exports.connectionExists = connectionExists;
+exports.connectionLineProps = connectionLineProps;
 exports.defaultEdgeTypes = defaultEdgeTypes;
 exports.defaultNodeTypes = defaultNodeTypes;
+exports.edgeProps = edgeProps;
 Object.defineProperty(exports, "getBezierEdgeCenter", {
 	enumerable: true,
 	get: function() {
@@ -7570,6 +7664,7 @@ Object.defineProperty(exports, "isNodeBase", {
 		return _xyflow_system.isNodeBase;
 	}
 });
+exports.nodeProps = nodeProps;
 Object.defineProperty(exports, "pointToRendererPoint", {
 	enumerable: true,
 	get: function() {