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

package/dist/index.mjs

@@ -21,12 +21,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;
 }({});
@@ -38,11 +40,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.`
 };
@@ -825,12 +829,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(markRaw(toRaw(node)));
 	}
 	const priorInternals = /* @__PURE__ */ new Map();
@@ -1553,9 +1560,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.
@@ -1568,24 +1576,29 @@ function syncModelArray(model, storeItems, setItems) {
 	watch([storeItems, () => storeItems.value.length], () => {
 		lastSnapshot = [...storeItems.value];
 		model.value = lastSnapshot;
-	}, { immediate: storeItems.value.length > 0 });
+	}, {
+		immediate: storeItems.value.length > 0,
+		flush: "sync"
+	});
 	watch([model, () => model.value?.length], ([next]) => {
 		if (!Array.isArray(next)) return;
 		const nextRaw = 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 = effectScope(true);
@@ -1689,10 +1702,8 @@ function useWatchProps(models, props, handle, ownsStore = false) {
 			}
 		};
 		const runAll = () => {
-			if (!ownsStore) {
-				watchNodesValue();
-				watchEdgesValue();
-			}
+			watchNodesValue();
+			watchEdgesValue();
 			watchMinZoom();
 			watchMaxZoom();
 			watchTranslateExtent();
@@ -1714,7 +1725,8 @@ const _sfc_main$22 = /* @__PURE__ */ defineComponent({
 	props: {
 		position: {
 			type: String,
-			required: true
+			required: false,
+			default: "top-left"
 		},
 		label: {
 			type: [String, null],
@@ -3306,14 +3318,16 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 		const { nodeLookup, parentLookup } = useStore();
 		const { transform, nodeOrigin, snapGrid, snapToGrid, vueFlowRef, noDragClassName } = storeToRefs(useStore());
 		const resizeControlRef = shallowRef();
+		const contextNodeId = inject(NodeId, null);
+		const nodeId = toRef(() => typeof props.nodeId === "string" ? props.nodeId : contextNodeId ?? void 0);
 		const controlPosition = toRef(() => props.position ?? DefaultPositions[props.variant]);
 		const positionClassNames = computed(() => controlPosition.value.split("-"));
 		const controlStyle = toRef(() => props.color ? { [StylingProperty[props.variant]]: props.color } : {});
 		watchEffect((onCleanup) => {
-			if (!resizeControlRef.value || !props.nodeId) return;
+			if (!resizeControlRef.value || !nodeId.value) return;
 			const resizerInstance = XYResizer({
 				domNode: resizeControlRef.value,
-				nodeId: props.nodeId,
+				nodeId: nodeId.value,
 				getStoreItems: () => ({
 					nodeLookup,
 					transform: transform.value,
@@ -3324,7 +3338,7 @@ const _sfc_main$14 = /* @__PURE__ */ 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) {
@@ -3356,14 +3370,14 @@ const _sfc_main$14 = /* @__PURE__ */ 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,
@@ -3382,7 +3396,7 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 				},
 				onEnd: ({ width, height }) => {
 					triggerEmits.nodesChange([{
-						id: props.nodeId,
+						id: nodeId.value,
 						type: "dimensions",
 						resizing: false,
 						dimensions: {
@@ -3433,6 +3447,8 @@ const _sfc_main$14 = /* @__PURE__ */ defineComponent({
 			vueFlowRef,
 			noDragClassName,
 			resizeControlRef,
+			contextNodeId,
+			nodeId,
 			controlPosition,
 			positionClassNames,
 			controlStyle,
@@ -4276,8 +4292,11 @@ function useActions(state, nodeLookup, parentLookup, edgeLookup) {
 	*/
 	function commitEdges(next) {
 		const rawEdgeLookup = toRaw(edgeLookup);
+		const seenEdgeIds = /* @__PURE__ */ new Set();
 		for (let i = 0; i < next.length; i++) {
 			const edge = next[i] = markRaw(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) {
@@ -4961,17 +4980,14 @@ function useGetters(state, nodeLookup) {
 * @internal
 */
 function createVueFlowStore(id, preloadedState, onDestroy, signals) {
-	const nodesSignal = signals?.nodes ?? shallowRef([]);
-	const edgesSignal = signals?.edges ?? shallowRef([]);
-	let lastWriteNodes;
-	let lastWriteEdges;
+	const nodesSignal = shallowRef(signals?.nodes?.value ?? []);
+	const edgesSignal = shallowRef(signals?.edges?.value ?? []);
 	const emptyNodes = [];
 	const emptyEdges = [];
 	const state = useState();
 	Object.defineProperty(state, "nodes", {
 		get: () => nodesSignal.value ?? emptyNodes,
 		set: (value) => {
-			lastWriteNodes = toRaw(value);
 			nodesSignal.value = value;
 		},
 		enumerable: true,
@@ -4980,7 +4996,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 	Object.defineProperty(state, "edges", {
 		get: () => edgesSignal.value ?? emptyEdges,
 		set: (value) => {
-			lastWriteEdges = toRaw(value);
 			edgesSignal.value = value;
 		},
 		enumerable: true,
@@ -5003,14 +5018,6 @@ function createVueFlowStore(id, preloadedState, onDestroy, signals) {
 		...reactiveState,
 		...preloadedState
 	});
-	if (signals?.nodes) watch(nodesSignal, (next) => {
-		const nextRaw = next && toRaw(next);
-		if (nextRaw && nextRaw !== lastWriteNodes) actions.setNodes(nextRaw);
-	});
-	if (signals?.edges) watch(edgesSignal, (next) => {
-		const nextRaw = next && toRaw(next);
-		if (nextRaw && nextRaw !== lastWriteEdges) actions.setEdges(nextRaw);
-	});
 	return {
 		instance: {
 			...hooksOn,
@@ -5161,7 +5168,7 @@ function useViewportSync(model, state = useStore()) {
 		};
 		if (sameViewport(viewport, model.value)) return;
 		model.value = viewport;
-	});
+	}, { flush: "sync" });
 }
 //#endregion
 //#region src/components/ConnectionLine/index.ts
@@ -5194,13 +5201,13 @@ const ConnectionLine = defineComponent({
 			}
 			const fromHandle = (startHandleId ? handleBounds.find((d) => d.id === startHandleId) : handleBounds[0]) ?? null;
 			const fromPosition = fromHandle?.position ?? Position$1.Top;
-			const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition);
+			const { x: fromX, y: fromY } = getHandlePosition(fromNode.value, fromHandle, fromPosition, true);
 			let toHandle = null;
 			if (toNode.value) if (connectionMode.value === ConnectionMode$1.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 ? oppositePosition[fromPosition] : null);
 			if (!fromPosition || !toPosition) return null;
-			const { x: toX, y: toY } = toHandle && toNode.value ? getHandlePosition(toNode.value, toHandle, toPosition) : pointer.value;
+			const { x: toX, y: toY } = toHandle && toNode.value ? getHandlePosition(toNode.value, toHandle, toPosition, true) : pointer.value;
 			const type = connectionLineOptions.value.type ?? ConnectionLineType$1.Bezier;
 			let dAttr = "";
 			const pathParams = {
@@ -5941,6 +5948,8 @@ const NodeWrapper = defineComponent({
 		const getStyle = 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);
@@ -7309,7 +7318,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		}, props, {
 			instance,
 			state
-		}, ownsStore);
+		});
 		useHooks(emit, state.hooks);
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
@@ -7382,6 +7391,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
-export { Background_default as Background, BaseEdge_default as BaseEdge, BezierEdge, ConnectionLineType, ConnectionMode, ControlButton_default as ControlButton, Controls_default as Controls, EdgeLabelRenderer_default as EdgeLabelRenderer, EdgeText_default as EdgeText, ErrorCode, Handle_default as Handle, MarkerType, MiniMap_default as MiniMap, MiniMapNode_default as MiniMapNode, NodeId as NodeIdInjection, ResizeControl_default as NodeResizeControl, NodeResizer_default as NodeResizer, NodeToolbar_default as NodeToolbar, PanOnScrollMode, Panel_default as Panel, Position, ResizeControlVariant, SelectionMode, SimpleBezierEdge, Slots, SmoothStepEdge, StepEdge, StraightEdge, VueFlow_default as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowProvider_default as VueFlowProvider, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, defaultEdgeTypes, defaultNodeTypes, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
+//#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
+export { Background_default as Background, BaseEdge_default as BaseEdge, BezierEdge, ConnectionLineType, ConnectionMode, ControlButton_default as ControlButton, Controls_default as Controls, EdgeLabelRenderer_default as EdgeLabelRenderer, EdgeText_default as EdgeText, ErrorCode, Handle_default as Handle, MarkerType, MiniMap_default as MiniMap, MiniMapNode_default as MiniMapNode, NodeId as NodeIdInjection, ResizeControl_default as NodeResizeControl, NodeResizer_default as NodeResizer, NodeToolbar_default as NodeToolbar, PanOnScrollMode, Panel_default as Panel, Position, ResizeControlVariant, SelectionMode, SimpleBezierEdge, Slots, SmoothStepEdge, StepEdge, StraightEdge, VueFlow_default as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowProvider_default as VueFlowProvider, applyChanges, applyEdgeChanges, applyNodeChanges, clamp, connectionExists, connectionLineProps, defaultEdgeTypes, defaultNodeTypes, edgeProps, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSimpleBezierPath, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdge, isEdgeBase, isErrorOfType, isInternalNode, isInternalNodeBase, isMacOs, isNode, isNodeBase, nodeProps, pointToRendererPoint, rendererPointToPoint, storeToRefs, useConnection, useEdge, useEdgesData, useHandle, useInternalNode, useKeyPress, useNode, useNodeConnections, useNodeId, useNodesData, useNodesInitialized, useStore, useVueFlow };
 
 //# sourceMappingURL=index.mjs.map