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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, ColorModeClass, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
+import { Align, AriaLabelConfig, AriaLabelConfig as AriaLabelConfig$1, ColorMode, ColorMode as ColorMode$1, Connection, Connection as Connection$1, ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, ControlLinePosition, ControlLinePosition as ControlLinePosition$1, ControlPosition, ControlPosition as ControlPosition$1, CoordinateExtent, CoordinateExtent as CoordinateExtent$1, Dimensions, Dimensions as Dimensions$1, DistributivePick, EdgeBase, EdgeRemoveChange, EdgeRemoveChange as EdgeRemoveChange$1, EdgeSelectionChange, EdgeSelectionChange as EdgeSelectionChange$1, FinalConnectionState, FinalConnectionState as FinalConnectionState$1, FitViewOptionsBase, FitViewOptionsBase as FitViewOptions, GetViewport, GetViewport as GetViewport$1, HandleType, HandleType as HandleType$1, InternalNodeBase, NodeBase, NodeConnection, NodeConnection as NodeConnection$1, NodeDimensionChange, NodeDimensionChange as NodeDimensionChange$1, NodePositionChange, NodePositionChange as NodePositionChange$1, NodeRemoveChange, NodeRemoveChange as NodeRemoveChange$1, NodeSelectionChange, NodeSelectionChange as NodeSelectionChange$1, Padding, Padding as Padding$1, PaddingUnit, PaddingWithUnit, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, PanZoomInstance, PanelPosition, Position, Position as Position$1, Project, Project as Project$1, Rect, Rect as Rect$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$1, ResizeControlVariant as ResizeControlVariant$2, ResizeDragEvent, ResizeDragEvent as ResizeDragEvent$1, ResizeParams, ResizeParams as ResizeParams$1, ResizeParamsWithDirection, ResizeParamsWithDirection as ResizeParamsWithDirection$1, SelectionMode, SelectionMode as SelectionMode$1, SelectionRect, SelectionRect as SelectionRect$1, SetCenter, SetCenter as SetCenter$1, SetCenterOptions, SetViewport, SetViewport as SetViewport$1, ShouldResize, ShouldResize as ShouldResize$1, SnapGrid, SnapGrid as SnapGrid$1, Transform, Viewport, Viewport as Viewport$1, ViewportHelperFunctionOptions, ViewportHelperFunctionOptions as ViewportHelperFunctionOptions$1, XYPosition, XYPosition as XYPosition$1, ZIndexMode, ZIndexMode as ZIndexMode$1, ZoomInOut, ZoomInOut as ZoomInOut$1, ZoomTo, ZoomTo as ZoomTo$1, clamp, getBezierEdgeCenter, getBezierPath, getBoundsOfBoxes, getBoundsOfRects, getConnectedEdges, getConnectionStatus, getIncomers, getMarkerId, getNodesBounds, getNodesInside, getOutgoers, getSmoothStepPath, getStraightPath, getViewportForBounds, isEdgeBase, isInternalNodeBase, isMacOs, isNodeBase, pointToRendererPoint, rendererPointToPoint } from "@xyflow/system";
 import { CSSProperties, Component, ComputedRef, DefineComponent, HTMLAttributes, InjectionKey, MaybeRefOrGetter, SVGAttributes, ToRefs, VNode } from "vue";
 import { KeyFilter } from "@vueuse/core";
 
@@ -671,7 +671,6 @@ interface State<NodeType extends Node = Node, EdgeType extends Edge = Edge> exte
   translateExtent: CoordinateExtent$1;
   nodeExtent: CoordinateExtent$1;
   nodeOrigin: NodeOrigin;
-  colorMode: ColorMode$1;
   /** viewport dimensions - do not change! */
   readonly dimensions: Dimensions$1;
   /** canonical viewport transform `[x, y, zoom]` (the `@xyflow/system` representation) - do not change! Read `viewport` for the `{ x, y, zoom }` shape. */
@@ -1212,8 +1211,8 @@ interface FlowProps<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeExtent?: CoordinateExtent$1;
   /** origin of all nodes relative to their position — `[0, 0]` top-left, `[0.5, 0.5]` center, `[1, 1]` bottom-right */
   nodeOrigin?: NodeOrigin;
-  /** light/dark/system — applies the resolved `light`/`dark` class to the flow container; `system` follows `prefers-color-scheme` @default 'light' */
-  colorMode?: ColorMode$1;
+  /** Forces a color scheme on the flow container via class name. Page-level theming is typically done by setting `data-theme` on `<html>`. */
+  forceColorMode?: ColorMode$1;
   /** color of edge markers; pass `null` to drive the arrowhead color from the `--xy-edge-stroke` CSS variable @default '#b1b1b7' */
   defaultMarkerColor?: string | null;
   zoomOnScroll?: boolean;
@@ -1359,14 +1358,14 @@ interface FlowEmits<NodeType extends Node = Node, EdgeType extends Edge = Edge>
   nodeDrag: [nodeDragEvent: NodeDragEvent<NodeType>];
   nodeDragStop: [nodeDragEvent: NodeDragEvent<NodeType>];
 }
-type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? (T extends NonNullable<NodeType['type']> ? NodeType : never) : never;
-type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? (T extends NonNullable<EdgeType['type']> ? EdgeType : never) : never;
+type NodeByType<NodeType extends Node, T extends string> = NodeType extends any ? T extends NonNullable<NodeType['type']> ? NodeType : never : never;
+type EdgeByType<EdgeType extends Edge, T extends string> = EdgeType extends any ? T extends NonNullable<EdgeType['type']> ? EdgeType : never : never;
 type NodeSlots<NodeType extends Node = Node> = Partial<{ [T in NonNullable<NodeType['type']> as `node-${T}`]: (nodeProps: NodeProps<NodeByType<NodeType, T>>) => any } & Record<`node-${string}`, (nodeProps: NodeProps<NodeType>) => any>>;
 type EdgeSlots<EdgeType extends Edge = Edge> = Partial<{ [T in NonNullable<EdgeType['type']> as `edge-${T}`]: (edgeProps: EdgeProps<EdgeByType<EdgeType, T>>) => any } & Record<`edge-${string}`, (edgeProps: EdgeProps<EdgeType>) => any>>;
 type FlowSlots<NodeType extends Node = Node, EdgeType extends Edge = Edge> = NodeSlots<NodeType> & EdgeSlots<EdgeType> & {
   'connection-line'?: (connectionLineProps: ConnectionLineProps<NodeType>) => any;
   'zoom-pane'?: () => any;
-  'default'?: () => any;
+  default?: () => any;
 };
 //#endregion
 //#region src/types/node.d.ts
@@ -2204,5 +2203,5 @@ declare const NodeId: InjectionKey<string>;
 declare const defaultNodeTypes: DefaultNodeTypes;
 declare const defaultEdgeTypes: DefaultEdgeTypes;
 //#endregion
-export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, type ColorModeClass, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, 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 };
+export { Actions, AddEdges, AddNodes, type Align, type AriaLabelConfig, _default as Background, BackgroundProps, BackgroundVariant, _default$1 as BaseEdge, BaseEdgeProps, BezierEdge, BezierEdgeProps, BezierEdgeType, BezierPathOptions, BuiltInNode, CSSVars, ClassValue, type ColorMode, ComputedGetters, ConnectEndEvent, ConnectingHandle, type Connection, ConnectionInProgress, ConnectionLineOptions, ConnectionLineProps, ConnectionLineType, ConnectionLookup, ConnectionMode, ConnectionState, ConnectionStatus, Connector, _default$2 as ControlButton, ControlEmits, type ControlLinePosition, type ControlPosition, ControlProps, _default$3 as Controls, type CoordinateExtent, CustomThemeVars, DefaultEdge, DefaultEdgeOptions, DefaultEdgeTypes, DefaultNodeTypes, DeleteElements, type Dimensions, Edge, EdgeAddChange, EdgeChange, EdgeComponent, EdgeEventsHandler, EdgeEventsOn, EdgeLabelOptions, _default$4 as EdgeLabelRenderer, EdgeLookup, EdgeMarker, EdgeMarkerType, EdgeMouseEvent, EdgePositions, EdgeProps, EdgeReconnectEndEvent, EdgeReconnectEvent, EdgeReconnectStartEvent, EdgeReconnectable, type EdgeRemoveChange, type EdgeSelectionChange, EdgeSlots, _default$5 as EdgeText, EdgeTextProps, EdgeTypesObject, ElementChange, ErrorCode, type FinalConnectionState, FitBounds, FitBoundsOptions, FitView, type FitViewOptions, FlowEmits, FlowEvents, FlowExportObject, FlowHooks, FlowHooksEmit, FlowHooksOn, FlowOptions, FlowProps, FlowSlots, GetEdge, GetInternalNode, GetIntersectingNodes, GetNode, type GetViewport, Getters, _default$6 as Handle, HandleConnectable, HandleConnectableFunc, HandleElement, HandleProps, type HandleType, InternalNode, IsNodeIntersecting, IsValidParams, MarkerProps, MarkerType, _default$7 as MiniMap, MiniMapEmits, _default$8 as MiniMapNode, MiniMapNodeEmits, MiniMapNodeFunc, MiniMapNodeProps, MiniMapProps, MiniMapSlots, MouseTouchEvent, NoConnection, Node, NodeAddChange, NodeChange, NodeComponent, type NodeConnection, type NodeDimensionChange, NodeDragEvent, NodeDragItem, NodeEventsHandler, NodeEventsOn, NodeHandleBounds, NodeId as NodeIdInjection, NodeLookup, NodeMouseEvent, NodeOrigin, type NodePositionChange, NodeProps, type NodeRemoveChange, _default$9 as NodeResizeControl, _default$10 as NodeResizer, NodeResizerEmits, NodeResizerProps, type NodeSelectionChange, NodeSlots, _default$11 as NodeToolbar, NodeToolbarProps, NodeTypesObject, OnBeforeDelete, OnConnectStartParams, OnResize, OnResizeEnd, OnResizeStart, type Padding, type PaddingUnit, type PaddingWithUnit, PanOnScrollMode, _default$12 as Panel, PanelProps, Position, type Project, ReconnectEdge, type Rect, RemoveEdges, RemoveNodes, ResizeControlLineProps, ResizeControlProps, ResizeControlVariant, type ResizeDragEvent, type ResizeParams, type ResizeParamsWithDirection, Result, SelectionChangeEvent, SelectionMode, type SelectionRect, type SetCenter, type SetCenterOptions, SetEdges, SetNodes, SetState, SetStateOptions, type SetViewport, ShapeRendering, type ShouldResize, SimpleBezierEdge, SimpleBezierEdgeProps, Slots, SmoothStepEdge, SmoothStepEdgeProps, SmoothStepEdgeType, SmoothStepPathOptions, type SnapGrid, State, StepEdge, StepEdgeProps, StraightEdge, StraightEdgeProps, Styles, ThemeVars, UpdateEdge, UpdateEdgeData, UpdateNode, UpdateNodeData, UpdateNodeDimensions, UpdateNodeDimensionsParams, UpdateNodeInternals, UpdateNodePosition, ValidConnectionFunc, type Viewport, ViewportFunctions, type ViewportHelperFunctionOptions, _default$13 as VueFlow, VueFlowError, VueFlow as VueFlowInjection, VueFlowInstance, _default$14 as VueFlowProvider, VueFlowState, VueFlowStoreHandle, type XYPosition, type ZIndexMode, type ZoomInOut, type ZoomTo, 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 };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -645,39 +645,6 @@ function createExtendedEventHook(defaultHandler) {
 	};
 }
 //#endregion
-//#region src/utils/drag.ts
-function getParentExtent(parent) {
-	if (parent && typeof parent.internals.positionAbsolute.x !== "undefined" && typeof parent.internals.positionAbsolute.y !== "undefined" && typeof parent.measured.width !== "undefined" && typeof parent.measured.height !== "undefined") return [[parent.internals.positionAbsolute.x, parent.internals.positionAbsolute.y], [parent.internals.positionAbsolute.x + parent.measured.width, parent.internals.positionAbsolute.y + parent.measured.height]];
-	return false;
-}
-function getExtent(item, triggerError, extent, parent) {
-	let currentExtent = item.extent || extent;
-	if (currentExtent === "parent" && !item.expandParent) if (item.parentId && parent && item.measured.width && item.measured.height) {
-		const parentExtent = getParentExtent(parent);
-		if (parentExtent) currentExtent = parentExtent;
-	} else {
-		triggerError(new VueFlowError("NODE_EXTENT_INVALID", item.id));
-		currentExtent = extent;
-	}
-	else if (Array.isArray(currentExtent)) {
-		const parentX = parent?.internals.positionAbsolute.x || 0;
-		const parentY = parent?.internals.positionAbsolute.y || 0;
-		currentExtent = [[currentExtent[0][0] + parentX, currentExtent[0][1] + parentY], [currentExtent[1][0] + parentX, currentExtent[1][1] + parentY]];
-	}
-	return currentExtent === "parent" ? [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]] : currentExtent;
-}
-function calcNextPosition(node, nextPosition, triggerError, nodeExtent, parentNode) {
-	const measured = (0, _xyflow_system.getNodeDimensions)(node);
-	const clampedPos = (0, _xyflow_system.clampPosition)(nextPosition, getExtent(node, triggerError, nodeExtent, parentNode), measured);
-	return {
-		position: {
-			x: clampedPos.x - (parentNode?.internals.positionAbsolute.x || 0),
-			y: clampedPos.y - (parentNode?.internals.positionAbsolute.y || 0)
-		},
-		computedPosition: clampedPos
-	};
-}
-//#endregion
 //#region src/utils/edge.ts
 function getEdgeHandle(bounds, handleId) {
 	if (!bounds) return null;
@@ -1414,7 +1381,7 @@ function useNode(id) {
 * @internal
 */
 function useUpdateNodePositions() {
-	const { getSelectedNodes, updateNodePositions, getInternalNode, emits } = useVueFlow();
+	const { getSelectedNodes, updateNodePositions, getInternalNode } = useVueFlow();
 	const store = useStore();
 	return (positionDiff, isShiftPressed = false) => {
 		const xVelo = store.snapToGrid ? store.snapGrid[0] : 5;
@@ -1426,10 +1393,18 @@ function useUpdateNodePositions() {
 		for (const node of getSelectedNodes.value) if (node.draggable || store.nodesDraggable && typeof node.draggable === "undefined") {
 			const internalNode = getInternalNode(node.id);
 			if (!internalNode) continue;
-			const { position } = calcNextPosition(internalNode, {
+			let nextPosition = {
 				x: internalNode.internals.positionAbsolute.x + positionDiffX,
 				y: internalNode.internals.positionAbsolute.y + positionDiffY
-			}, emits.error, store.nodeExtent, node.parentId ? getInternalNode(node.parentId) : void 0);
+			};
+			if (store.snapToGrid) nextPosition = (0, _xyflow_system.snapPosition)(nextPosition, store.snapGrid);
+			const { position, positionAbsolute } = (0, _xyflow_system.calculateNodePosition)({
+				nodeId: node.id,
+				nextPosition,
+				nodeLookup: store.nodeLookup,
+				nodeExtent: store.nodeExtent,
+				nodeOrigin: store.nodeOrigin
+			});
 			nodeUpdates.push({
 				id: node.id,
 				position,
@@ -1438,10 +1413,7 @@ function useUpdateNodePositions() {
 					y: positionDiff.y
 				},
 				measured: (0, _xyflow_system.getNodeDimensions)(internalNode),
-				internals: { positionAbsolute: {
-					x: internalNode.internals.positionAbsolute.x,
-					y: internalNode.internals.positionAbsolute.y
-				} }
+				internals: { positionAbsolute }
 			});
 		}
 		updateNodePositions(nodeUpdates, true, false);
@@ -4034,23 +4006,6 @@ function _sfc_render$11(_ctx, _cache, $props, $setup, $data, $options) {
 }
 var A11yDescriptions_default = /* @__PURE__ */ export_helper_default(_sfc_main$11, [["render", _sfc_render$11], ["__file", "/Users/moritz/xyflow/xyflow/packages/vue/src/components/A11y/A11yDescriptions.vue"]]);
 //#endregion
-//#region src/composables/useColorModeClass.ts
-/**
-* Resolves the `colorMode` prop to the `light`/`dark` class applied to the flow container, tracking
-* `prefers-color-scheme` reactively when `colorMode` is `system` (matching xyflow/react+svelte).
-*
-* Takes the state explicitly because it runs inside `<VueFlow>`'s own setup; defaults to `useStore()`.
-*
-* @internal
-*/
-function useColorModeClass(state = useStore()) {
-	const prefersDark = (0, _vueuse_core.useMediaQuery)("(prefers-color-scheme: dark)");
-	return (0, vue.computed)(() => {
-		if (state.colorMode === "system") return prefersDark.value ? "dark" : "light";
-		return state.colorMode;
-	});
-}
-//#endregion
 //#region src/store/hooks.ts
 function createHooks() {
 	return {
@@ -4168,7 +4123,6 @@ function useState() {
 		translateExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeExtent: [[Number.NEGATIVE_INFINITY, Number.NEGATIVE_INFINITY], [Number.POSITIVE_INFINITY, Number.POSITIVE_INFINITY]],
 		nodeOrigin: [0, 0],
-		colorMode: "light",
 		selectionMode: _xyflow_system.SelectionMode.Full,
 		paneDragging: false,
 		preventScrolling: true,
@@ -4333,7 +4287,7 @@ function useActions(state, nodeLookup, parentLookup, edgeLookup) {
 			for (const id of rawEdgeLookup.keys()) if (!nextIds.has(id)) edgeLookup.delete(id);
 		}
 		state.edges = next;
-		updateConnectionLookup(state.connectionLookup, state.edges);
+		updateConnectionLookup(state.connectionLookup, next);
 	}
 	/**
 	* Recompute parent-aware `internals.positionAbsolute` on the system lookup, then mirror into the
@@ -7109,7 +7063,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 			type: Array,
 			required: false
 		},
-		colorMode: {
+		forceColorMode: {
 			type: String,
 			required: false,
 			default: void 0
@@ -7361,7 +7315,6 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
 		useStylesLoadedWarning(instance);
-		const colorModeClass = useColorModeClass(state);
 		useViewportSync(modelViewport, state);
 		const stateRefs = storeToRefs(state);
 		(0, vue.provide)(Slots$1, slots);
@@ -7380,7 +7333,6 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 			instance,
 			state,
 			disposeWatchers,
-			colorModeClass,
 			stateRefs,
 			A11yDescriptions: A11yDescriptions_default,
 			ZoomPane: ZoomPane_default
@@ -7395,7 +7347,7 @@ const _sfc_main$1 = /* @__PURE__ */ (0, vue.defineComponent)({
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	return (0, vue.openBlock)(), (0, vue.createElementBlock)("div", {
 		ref: $setup.stateRefs.vueFlowRef,
-		class: (0, vue.normalizeClass)(["vue-flow", $setup.colorModeClass])
+		class: (0, vue.normalizeClass)(["vue-flow", $setup.props.forceColorMode])
 	}, [
 		(0, vue.createCommentVNode)(" the `zoom-pane` slot (affected by zooming & panning) renders inside the transformed Viewport via\n    the provided `Slots` (see ZoomPaneSlot), not drilled through ZoomPane → Pane → Viewport "),
 		(0, vue.createVNode)($setup["ZoomPane"]),