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

package/dist/index.mjs

@@ -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,