@xyflow/vue 2.0.0-next.0 → 2.0.0-next.2

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 { onKeyStroke, until, useEventListener } from "@vueuse/core";
 //#region src/context/index.ts
 /** the curated instance (`useVueFlow()`) */
 const VueFlow = Symbol("vueFlow");
@@ -2565,18 +2565,6 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 			"data-nodeid": nodeId,
 			"data-handlepos": __props.position
 		}));
-		const isConnectableStart = toRef(() => typeof __props.connectableStart !== "undefined" ? __props.connectableStart : true);
-		const isConnectableEnd = toRef(() => typeof __props.connectableEnd !== "undefined" ? __props.connectableEnd : true);
-		const connectionInProcess = toRef(() => store.connectionStartHandle !== null);
-		const clickConnectionInProcess = toRef(() => store.connectionClickStartHandle !== null);
-		const isPossibleEndHandle = toRef(() => {
-			const fromHandle = store.connectionStartHandle;
-			return store.connectionMode === ConnectionMode$1.Strict ? fromHandle?.type !== type.value : nodeId !== fromHandle?.nodeId || __props.id !== fromHandle?.id;
-		});
-		const isClickConnecting = toRef(() => store.connectionClickStartHandle?.nodeId === nodeId && store.connectionClickStartHandle?.id === __props.id && store.connectionClickStartHandle?.type === type.value);
-		const connectingFrom = toRef(() => store.connectionStartHandle?.nodeId === nodeId && store.connectionStartHandle?.id === __props.id && store.connectionStartHandle?.type === type.value);
-		const connectingTo = toRef(() => store.connectionEndHandle?.nodeId === nodeId && store.connectionEndHandle?.id === __props.id && store.connectionEndHandle?.type === type.value);
-		const valid = toRef(() => connectingTo.value && store.connectionStatus === "valid");
 		const { handlePointerDown, handleClick } = useHandle({
 			nodeId,
 			handleId: __props.id,
@@ -2597,6 +2585,28 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 			if (typeof __props.isConnectable === "function") return nodeRef.value ? __props.isConnectable(nodeRef.value, connectedEdges.value) : false;
 			return isDef(__props.isConnectable) ? __props.isConnectable : store.nodesConnectable;
 		});
+		const connectionClasses = computed((prev) => {
+			const fromHandle = store.connectionStartHandle;
+			const clickFromHandle = store.connectionClickStartHandle;
+			const toHandle = store.connectionEndHandle;
+			const handleType = type.value;
+			const connectionInProcess = fromHandle !== null;
+			const clickConnectionInProcess = clickFromHandle !== null;
+			const isPossibleEndHandle = store.connectionMode === ConnectionMode$1.Strict ? fromHandle?.type !== handleType : nodeId !== fromHandle?.nodeId || __props.id !== fromHandle?.id;
+			const connectingto = toHandle?.nodeId === nodeId && toHandle?.id === __props.id && toHandle?.type === handleType;
+			const next = {
+				connectable: isHandleConnectable.value,
+				connecting: clickFromHandle?.nodeId === nodeId && clickFromHandle?.id === __props.id && clickFromHandle?.type === handleType,
+				connectablestart: __props.connectableStart,
+				connectableend: __props.connectableEnd,
+				connectingfrom: fromHandle?.nodeId === nodeId && fromHandle?.id === __props.id && fromHandle?.type === handleType,
+				connectingto,
+				valid: connectingto && store.connectionStatus === "valid",
+				connectionindicator: isHandleConnectable.value && (!connectionInProcess || isPossibleEndHandle) && (connectionInProcess || clickConnectionInProcess ? __props.connectableEnd : __props.connectableStart)
+			};
+			if (prev && prev.connectable === next.connectable && prev.connecting === next.connecting && prev.connectablestart === next.connectablestart && prev.connectableend === next.connectableend && prev.connectingfrom === next.connectingfrom && prev.connectingto === next.connectingto && prev.valid === next.valid && prev.connectionindicator === next.connectionindicator) return prev;
+			return next;
+		});
 		onMounted(() => {
 			const node = nodeRef.value;
 			if (!node || !nodeHasDimensions(node)) return;
@@ -2626,10 +2636,10 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 		});
 		function onPointerDown(event) {
 			const isMouseTriggered = isMouseEvent(event);
-			if (isHandleConnectable.value && isConnectableStart.value && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) handlePointerDown(event);
+			if (isHandleConnectable.value && __props.connectableStart && (isMouseTriggered && event.button === 0 || !isMouseTriggered)) handlePointerDown(event);
 		}
 		function onClick(event) {
-			if (!nodeId || !store.connectionClickStartHandle && !isConnectableStart.value) return;
+			if (!nodeId || !store.connectionClickStartHandle && !__props.connectableStart) return;
 			if (isHandleConnectable.value) handleClick(event);
 		}
 		__expose({
@@ -2650,18 +2660,10 @@ const _sfc_main$17 = /* @__PURE__ */ defineComponent({
 			connectedEdges,
 			handle,
 			handleDataIds,
-			isConnectableStart,
-			isConnectableEnd,
-			connectionInProcess,
-			clickConnectionInProcess,
-			isPossibleEndHandle,
-			isClickConnecting,
-			connectingFrom,
-			connectingTo,
-			valid,
 			handlePointerDown,
 			handleClick,
 			isHandleConnectable,
+			connectionClasses,
 			onPointerDown,
 			onClick
 		};
@@ -2682,16 +2684,7 @@ function _sfc_render$17(_ctx, _cache, $props, $setup, $data, $options) {
 			$setup.store.noDragClassName,
 			$setup.store.noPanClassName,
 			$setup.type,
-			{
-				connectable: $setup.isHandleConnectable,
-				connecting: $setup.isClickConnecting,
-				connectablestart: $setup.isConnectableStart,
-				connectableend: $setup.isConnectableEnd,
-				connectingfrom: $setup.connectingFrom,
-				connectingto: $setup.connectingTo,
-				valid: $setup.valid,
-				connectionindicator: $setup.isHandleConnectable && (!$setup.connectionInProcess || $setup.isPossibleEndHandle) && ($setup.connectionInProcess || $setup.clickConnectionInProcess ? $setup.isConnectableEnd : $setup.isConnectableStart)
-			}
+			$setup.connectionClasses
 		]],
 		onMousedown: $setup.onPointerDown,
 		onTouchstartPassive: $setup.onPointerDown,
@@ -4040,23 +4033,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 {
@@ -4174,7 +4150,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,
@@ -7115,7 +7090,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			type: Array,
 			required: false
 		},
-		colorMode: {
+		forceColorMode: {
 			type: String,
 			required: false,
 			default: void 0
@@ -7367,7 +7342,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);
@@ -7386,7 +7360,6 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 			instance,
 			state,
 			disposeWatchers,
-			colorModeClass,
 			stateRefs,
 			A11yDescriptions: A11yDescriptions_default,
 			ZoomPane: ZoomPane_default
@@ -7401,7 +7374,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"]),