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

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { Fragment, Teleport, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createPropsRestProxy, createTextVNode, createVNode, defineComponent, effectScope, getCurrentInstance, h, inject, isMemoSame, isRef, markRaw, mergeModels, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeMount, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, renderList, renderSlot, resolveComponent, resolveDynamicComponent, shallowRef, toDisplayString, toRaw, toRef, toRefs, toValue, unref, useAttrs, useId, useModel, useSlots, watch, watchEffect, withCtx } from "vue";
-import { ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, Position, Position as Position$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$2, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, calcAutoPan, clamp, clampPosition, clampPositionToParent, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfBoxes, getBoundsOfRects, getBoundsOfRects as getBoundsOfRects$1, getConnectedEdges, getConnectedEdges as getConnectedEdges$1, getConnectionStatus, getDimensions, getEdgeId, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getMarkerId, getMarkerId as getMarkerId$1, getNodeDimensions, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getNodesInside as getNodesInside$1, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeBase as isEdgeBase$1, isEdgeVisible, isInternalNodeBase, isInternalNodeBase as isInternalNodeBase$1, isMacOs, isMacOs as isMacOs$1, isMouseEvent, isNodeBase, isNodeBase as isNodeBase$1, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, oppositePosition, panBy, pointToRendererPoint, pointToRendererPoint as pointToRendererPoint$1, rendererPointToPoint, rendererPointToPoint as rendererPointToPoint$1, updateAbsolutePositions } from "@xyflow/system";
-import { onKeyStroke, until, useEventListener, useMediaQuery } from "@vueuse/core";
+import { ConnectionLineType, ConnectionLineType as ConnectionLineType$1, ConnectionMode, ConnectionMode as ConnectionMode$1, PanOnScrollMode, PanOnScrollMode as PanOnScrollMode$1, Position, Position as Position$1, ResizeControlVariant, ResizeControlVariant as ResizeControlVariant$2, SelectionMode, SelectionMode as SelectionMode$1, XYDrag, XYHandle, XYMinimap, XYPanZoom, XYResizer, adoptUserNodes, areConnectionMapsEqual, areSetsEqual, calcAutoPan, calculateNodePosition, clamp, clampPosition, clampPositionToParent, evaluateAbsolutePosition, fitViewport, getBezierEdgeCenter, getBezierEdgeCenter as getBezierEdgeCenter$1, getBezierPath, getBezierPath as getBezierPath$1, getBoundsOfBoxes, getBoundsOfRects, getBoundsOfRects as getBoundsOfRects$1, getConnectedEdges, getConnectedEdges as getConnectedEdges$1, getConnectionStatus, getDimensions, getEdgeId, getElementsToRemove, getElevatedEdgeZIndex, getEventPosition, getHandleBounds, getHandlePosition, getHostForElement, getIncomers, getMarkerId, getMarkerId as getMarkerId$1, getNodeDimensions, getNodeToolbarTransform, getNodesBounds, getNodesBounds as getNodesBounds$1, getNodesInside, getNodesInside as getNodesInside$1, getOutgoers, getOverlappingArea, getSmoothStepPath, getSmoothStepPath as getSmoothStepPath$1, getStraightPath, getStraightPath as getStraightPath$1, getViewportForBounds, getViewportForBounds as getViewportForBounds$1, handleConnectionChange, handleExpandParent, infiniteExtent, isCoordinateExtent, isEdgeBase, isEdgeBase as isEdgeBase$1, isEdgeVisible, isInternalNodeBase, isInternalNodeBase as isInternalNodeBase$1, isMacOs, isMacOs as isMacOs$1, isMouseEvent, isNodeBase, isNodeBase as isNodeBase$1, isRectObject, mergeAriaLabelConfig, nodeHasDimensions, nodeToRect, oppositePosition, panBy, pointToRendererPoint, pointToRendererPoint as pointToRendererPoint$1, rendererPointToPoint, rendererPointToPoint as rendererPointToPoint$1, snapPosition, updateAbsolutePositions } from "@xyflow/system";
+import { onKeyStroke, until, useEventListener } from "@vueuse/core";
 //#region src/context/index.ts
 /** the curated instance (`useVueFlow()`) */
 const VueFlow = Symbol("vueFlow");
@@ -644,39 +644,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 = getNodeDimensions(node);
-	const clampedPos = 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;
@@ -1413,7 +1380,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;
@@ -1425,10 +1392,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 = snapPosition(nextPosition, store.snapGrid);
+			const { position, positionAbsolute } = calculateNodePosition({
+				nodeId: node.id,
+				nextPosition,
+				nodeLookup: store.nodeLookup,
+				nodeExtent: store.nodeExtent,
+				nodeOrigin: store.nodeOrigin
+			});
 			nodeUpdates.push({
 				id: node.id,
 				position,
@@ -1437,10 +1412,7 @@ function useUpdateNodePositions() {
 					y: positionDiff.y
 				},
 				measured: getNodeDimensions(internalNode),
-				internals: { positionAbsolute: {
-					x: internalNode.internals.positionAbsolute.x,
-					y: internalNode.internals.positionAbsolute.y
-				} }
+				internals: { positionAbsolute }
 			});
 		}
 		updateNodePositions(nodeUpdates, true, false);
@@ -4033,23 +4005,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 = useMediaQuery("(prefers-color-scheme: dark)");
-	return computed(() => {
-		if (state.colorMode === "system") return prefersDark.value ? "dark" : "light";
-		return state.colorMode;
-	});
-}
-//#endregion
 //#region src/store/hooks.ts
 function createHooks() {
 	return {
@@ -4167,7 +4122,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: SelectionMode$1.Full,
 		paneDragging: false,
 		preventScrolling: true,
@@ -4332,7 +4286,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
@@ -7108,7 +7062,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			type: Array,
 			required: false
 		},
-		colorMode: {
+		forceColorMode: {
 			type: String,
 			required: false,
 			default: void 0
@@ -7360,7 +7314,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		useOnInitHandler(instance);
 		useSelectionChange(instance);
 		useStylesLoadedWarning(instance);
-		const colorModeClass = useColorModeClass(state);
 		useViewportSync(modelViewport, state);
 		const stateRefs = storeToRefs(state);
 		provide(Slots$1, slots);
@@ -7379,7 +7332,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			instance,
 			state,
 			disposeWatchers,
-			colorModeClass,
 			stateRefs,
 			A11yDescriptions: A11yDescriptions_default,
 			ZoomPane: ZoomPane_default
@@ -7394,7 +7346,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	return openBlock(), createElementBlock("div", {
 		ref: $setup.stateRefs.vueFlowRef,
-		class: normalizeClass(["vue-flow", $setup.colorModeClass])
+		class: normalizeClass(["vue-flow", $setup.props.forceColorMode])
 	}, [
 		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 "),
 		createVNode($setup["ZoomPane"]),