chore(core): cleanup

Signed-off-by: braks <[email protected]>

Author: bcakmakoglu

packages/core/src/components/Nodes/NodeWrapper.ts

@@ -13,6 +13,7 @@ import {
   watch,
 } from 'vue'
 import { until } from '@vueuse/core'
+import { snapPosition } from '@xyflow/system'
 import {
   ARIA_NODE_DESC_KEY,
   ErrorCode,
@@ -22,7 +23,6 @@ import {
   elementSelectionKeys,
   getXYZPos,
   handleNodeClick,
-  snapPosition,
 } from '../../utils'
 import { NodeId, NodeRef, Slots } from '../../context'
 import { isInputDOMNode, useDrag, useNode, useNodeHooks, useUpdateNodePositions, useVueFlow } from '../../composables'

packages/core/src/composables/useDrag.ts

@@ -3,9 +3,9 @@ import { drag } from 'd3-drag'
 import { select } from 'd3-selection'
 import type { MaybeRefOrGetter, Ref } from 'vue'
 import { ref, toValue, watch } from 'vue'
-import { calcAutoPan, getEventPosition } from '@xyflow/system'
+import { calcAutoPan, getEventPosition, snapPosition } from '@xyflow/system'
 import type { MouseTouchEvent, NodeDragEvent, NodeDragItem, XYPosition } from '../types'
-import { calcNextPosition, getDragItems, getEventHandlerParams, handleNodeClick, hasSelector } from '../utils'
+import { calcNextPosition, getDragItems, getEventHandlerParams, handleNodeClick, hasSelector, isUseDragEvent } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>

packages/core/src/composables/useGetPointerPosition.ts

@@ -1,4 +1,5 @@
-import { getEventPosition, isUseDragEvent, pointToRendererPoint, snapPosition } from '../utils'
+import { getEventPosition, snapPosition } from '@xyflow/system'
+import { isUseDragEvent, pointToRendererPoint } from '../utils'
 import type { MouseTouchEvent } from '../types'
 import { useVueFlow } from './useVueFlow'
 import type { UseDragEvent } from './useDrag'

packages/core/src/composables/useHandle.ts

@@ -5,7 +5,10 @@ import type { Connection, ConnectionInProgress, HandleElement, HandleType, Mouse
 import {
   getClosestHandle,
   getConnectionStatus,
+  getHandle,
+  getHandlePosition,
   getHandleType,
+  isConnectionValid,
   isValidHandle,
   oppositePosition,
   pointToRendererPoint,
@@ -212,7 +215,11 @@ export function useHandle({
           isValid,
           to:
             closestHandle && isValid
-              ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, viewport.value)
+              ? rendererPointToPoint({ x: closestHandle.x, y: closestHandle.y }, [
+                  viewport.value.x,
+                  viewport.value.y,
+                  viewport.value.zoom,
+                ])
               : connectionPosition,
           toHandle: result.toHandle,
           toPosition: isValid && result.toHandle ? result.toHandle.position : oppositePosition[fromHandle.position],

packages/core/src/utils/drag.ts

@@ -1,4 +1,5 @@
 import { markRaw } from 'vue'
+import type { UseDragEvent } from '@xyflow/system'
 import { clampPosition } from '@xyflow/system'
 import type {
   Actions,
@@ -12,6 +13,10 @@ import type {
 } from '../types'
 import { ErrorCode, VueFlowError, isParentSelected } from '.'
 
+export function isUseDragEvent(event: any): event is UseDragEvent {
+  return 'sourceEvent' in event
+}
+
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
 

packages/core/src/utils/graph.ts

@@ -1,6 +1,6 @@
 import { markRaw } from 'vue'
 import type { Viewport } from '@xyflow/system'
-import { boxToRect, clamp, getBoundsOfBoxes, getOverlappingArea, rectToBox } from '@xyflow/system'
+import { boxToRect, clamp, getBoundsOfBoxes, getOverlappingArea, rectToBox, snapPosition } from '@xyflow/system'
 import type {
   Actions,
   Box,
@@ -20,7 +20,7 @@ import type {
   XYPosition,
   XYZPosition,
 } from '../types'
-import { isDef, snapPosition } from '.'
+import { isDef } from '.'
 
 export function nodeToRect(node: GraphNode): Rect {
   return {

packages/core/src/utils/handle.ts

@@ -1,4 +1,4 @@
-import { getEventPosition } from '@xyflow/system'
+import { getEventPosition, getOverlappingArea } from '@xyflow/system'
 import { ConnectionMode, Position } from '../types'
 import type {
   Actions,
@@ -15,7 +15,7 @@ import type {
   Result,
   XYPosition,
 } from '../types'
-import { getHandlePosition, getOverlappingArea, nodeToRect } from '.'
+import { getHandlePosition, nodeToRect } from '.'
 
 const alwaysValid = () => true