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

package/dist/index.d.mts

@@ -75,8 +75,8 @@ declare const _default: typeof __VLS_export$14;
 declare const __VLS_export$14: __VLS_WithSlots$10<import("vue").DefineComponent<BackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundProps> & Readonly<{}>, {
   x: number;
   y: number;
-  offset: number | [number, number];
   size: number;
+  offset: number | [number, number];
   variant: BackgroundVariant;
   gap: number | number[];
   lineWidth: number;

package/dist/index.d.ts

@@ -75,8 +75,8 @@ declare const _default: typeof __VLS_export$14;
 declare const __VLS_export$14: __VLS_WithSlots$10<import("vue").DefineComponent<BackgroundProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BackgroundProps> & Readonly<{}>, {
   x: number;
   y: number;
-  offset: number | [number, number];
   size: number;
+  offset: number | [number, number];
   variant: BackgroundVariant;
   gap: number | number[];
   lineWidth: number;

package/dist/index.js

@@ -2566,18 +2566,6 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 			"data-nodeid": nodeId,
 			"data-handlepos": __props.position
 		}));
-		const isConnectableStart = (0, vue.toRef)(() => typeof __props.connectableStart !== "undefined" ? __props.connectableStart : true);
-		const isConnectableEnd = (0, vue.toRef)(() => typeof __props.connectableEnd !== "undefined" ? __props.connectableEnd : true);
-		const connectionInProcess = (0, vue.toRef)(() => store.connectionStartHandle !== null);
-		const clickConnectionInProcess = (0, vue.toRef)(() => store.connectionClickStartHandle !== null);
-		const isPossibleEndHandle = (0, vue.toRef)(() => {
-			const fromHandle = store.connectionStartHandle;
-			return store.connectionMode === _xyflow_system.ConnectionMode.Strict ? fromHandle?.type !== type.value : nodeId !== fromHandle?.nodeId || __props.id !== fromHandle?.id;
-		});
-		const isClickConnecting = (0, vue.toRef)(() => store.connectionClickStartHandle?.nodeId === nodeId && store.connectionClickStartHandle?.id === __props.id && store.connectionClickStartHandle?.type === type.value);
-		const connectingFrom = (0, vue.toRef)(() => store.connectionStartHandle?.nodeId === nodeId && store.connectionStartHandle?.id === __props.id && store.connectionStartHandle?.type === type.value);
-		const connectingTo = (0, vue.toRef)(() => store.connectionEndHandle?.nodeId === nodeId && store.connectionEndHandle?.id === __props.id && store.connectionEndHandle?.type === type.value);
-		const valid = (0, vue.toRef)(() => connectingTo.value && store.connectionStatus === "valid");
 		const { handlePointerDown, handleClick } = useHandle({
 			nodeId,
 			handleId: __props.id,
@@ -2598,6 +2586,28 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.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 = (0, vue.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 === _xyflow_system.ConnectionMode.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;
+		});
 		(0, vue.onMounted)(() => {
 			const node = nodeRef.value;
 			if (!node || !(0, _xyflow_system.nodeHasDimensions)(node)) return;
@@ -2627,10 +2637,10 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 		});
 		function onPointerDown(event) {
 			const isMouseTriggered = (0, _xyflow_system.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({
@@ -2651,18 +2661,10 @@ const _sfc_main$17 = /* @__PURE__ */ (0, vue.defineComponent)({
 			connectedEdges,
 			handle,
 			handleDataIds,
-			isConnectableStart,
-			isConnectableEnd,
-			connectionInProcess,
-			clickConnectionInProcess,
-			isPossibleEndHandle,
-			isClickConnecting,
-			connectingFrom,
-			connectingTo,
-			valid,
 			handlePointerDown,
 			handleClick,
 			isHandleConnectable,
+			connectionClasses,
 			onPointerDown,
 			onClick
 		};
@@ -2683,16 +2685,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,