refactor(core,utils): replace exported utils with @xyflow/system exports (#1551)

bcakmakoglu · web-flow · commit 4c516f5c50d7 · 2024-07-16T00:53:32.000+02:00
* refactor(core): replace `clamp`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `clampPosition`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getDimensions`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getHostForElement`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getOverlappingArea`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `boxToRect` &amp; `rectToBox`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getBoundsOfRects` &amp; `getBoundsOfBoxe` &amp; `rendererPointToPoint`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(minimap): update import of `getBoundsOfRects`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getMarkerId`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `isRect` &amp; `isNumeric`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `calcAutoPan`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `isMouseEvent`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): replace `getEventPosition`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* refactor(core): remove `isMacOS`

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* chore(changeset): add

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* chore(changeset): add

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

* chore(core): cleanup

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;

---------

Signed-off-by: braks &lt;78412429+bcakmakoglu@users.noreply.github.com&gt;
diff --git a/.changeset/fifty-rockets-report.md b/.changeset/fifty-rockets-report.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": patch
+---
+
+Update import of `getBoundsOfRects`
diff --git a/.changeset/fluffy-tables-wash.md b/.changeset/fluffy-tables-wash.md
@@ -0,0 +1,26 @@
+---
+"@vue-flow/core": minor
+---
+
+Replace existing graph utils exports with those already provided by `@xyflow/system`:
+
+- Replace utils
+  - `clamp`
+  - `clampPosition`
+  - `getDimensions`
+  - `getHostForElement`
+  - `getOverlappingArea`
+  - `rectToBox`
+  - `boxToRect`
+  - `getBoundsofRects`
+  - `getBoundsOfBoxes`
+  - `rendererPointToPoint`
+  - `getMarkerId`
+  - `isRect`
+  - `isNumeric`
+  - `calcAutoPan`
+  - `isMouseEvent`
+  - `getEventPosition`
+
+-Remove utils
+- `isMacOS`
diff --git a/packages/core/src/components/ConnectionLine/index.ts b/packages/core/src/components/ConnectionLine/index.ts
@@ -1,8 +1,8 @@
 import { computed, defineComponent, h, inject } from 'vue'
-import { getBezierPath, getSmoothStepPath } from '@xyflow/system'
+import { getBezierPath, getMarkerId, getSmoothStepPath } from '@xyflow/system'
 import type { HandleElement } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
-import { getHandlePosition, getMarkerId } from '../../utils'
+import { getHandlePosition } from '../../utils'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
 import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'
diff --git a/packages/core/src/components/Edges/EdgeWrapper.ts b/packages/core/src/components/Edges/EdgeWrapper.ts
@@ -1,17 +1,10 @@
 import { computed, defineComponent, getCurrentInstance, h, inject, provide, ref, resolveComponent, toRef } from 'vue'
+import { getMarkerId } from '@xyflow/system'
 import type { Connection, EdgeComponent, HandleType, MouseTouchEvent } from '../../types'
 import { ConnectionMode, Position } from '../../types'
 import { useEdgeHooks, useHandle, useVueFlow } from '../../composables'
 import { EdgeId, EdgeRef, Slots } from '../../context'
-import {
-  ARIA_EDGE_DESC_KEY,
-  ErrorCode,
-  VueFlowError,
-  elementSelectionKeys,
-  getHandle,
-  getHandlePosition,
-  getMarkerId,
-} from '../../utils'
+import { ARIA_EDGE_DESC_KEY, ErrorCode, VueFlowError, elementSelectionKeys, getHandle, getHandlePosition } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
 interface Props {
diff --git a/packages/core/src/components/Handle/Handle.vue b/packages/core/src/components/Handle/Handle.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
 import { computed, onMounted, onUnmounted, ref, toRef } from 'vue'
+import { getDimensions, isMouseEvent } from '@xyflow/system'
 import type { HandleProps } from '../../types'
 import { Position } from '../../types'
 import { useHandle, useNode, useVueFlow } from '../../composables'
-import { getDimensions, isDef, isMouseEvent } from '../../utils'
+import { isDef } from '../../utils'
 
 const {
   position = Position.Top,
diff --git a/packages/core/src/composables/useDrag.ts b/packages/core/src/composables/useDrag.ts
@@ -3,16 +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 type { NodeDragEvent, NodeDragItem, XYPosition } from '../types'
-import {
-  calcAutoPan,
-  calcNextPosition,
-  getDragItems,
-  getEventHandlerParams,
-  getEventPosition,
-  handleNodeClick,
-  hasSelector,
-} from '../utils'
+import { calcNextPosition, getDragItems, getEventHandlerParams, handleNodeClick, hasSelector } from '../utils'
 import { useGetPointerPosition, useVueFlow } from '.'
 
 export type UseDragEvent = D3DragEvent<HTMLDivElement, null, SubjectPosition>
diff --git a/packages/core/src/composables/useHandle.ts b/packages/core/src/composables/useHandle.ts
@@ -1,18 +1,14 @@
 import type { MaybeRefOrGetter } from 'vue'
 import { toValue } from 'vue'
+import { calcAutoPan, getEventPosition, getHostForElement, isMouseEvent, rendererPointToPoint } from '@xyflow/system'
 import type { Connection, ConnectionHandle, HandleType, MouseTouchEvent, ValidConnectionFunc, ValidHandleResult } from '../types'
 import {
-  calcAutoPan,
   getClosestHandle,
   getConnectionStatus,
-  getEventPosition,
   getHandleLookup,
   getHandleType,
-  getHostForElement,
-  isMouseEvent,
   isValidHandle,
   pointToRendererPoint,
-  rendererPointToPoint,
   resetRecentHandle,
 } from '../utils'
 import { Position } from '../types'
@@ -142,7 +138,8 @@ export function useHandle({
 
       emits.connectStart({ event, nodeId: toValue(nodeId), handleId: toValue(handleId), handleType })
 
-      function onPointerMove(event: MouseTouchEvent) {
+      function onPointerMove(_event: Event) {
+        const event = _event as MouseTouchEvent
         connectionPosition = getEventPosition(event, containerBounds)
 
         const { handle, validHandleResult } = getClosestHandle(
@@ -199,7 +196,7 @@ export function useHandle({
                   x: closestHandle.x,
                   y: closestHandle.y,
                 },
-                viewport.value,
+                [viewport.value.x, viewport.value.y, viewport.value.zoom],
               )
             : connectionPosition,
           validHandleResult.endHandle,
@@ -225,7 +222,8 @@ export function useHandle({
         }
       }
 
-      function onPointerUp(event: MouseTouchEvent) {
+      function onPointerUp(_event: Event) {
+        const event = _event as MouseTouchEvent
         if ((closestHandle || handleDomNode) && connection && isValid) {
           if (!onEdgeUpdate) {
             emits.connect(connection)
diff --git a/packages/core/src/composables/useResizeHandler.ts b/packages/core/src/composables/useResizeHandler.ts
@@ -1,6 +1,7 @@
 import type { Ref } from 'vue'
 import { onBeforeUnmount, onMounted } from 'vue'
-import { ErrorCode, VueFlowError, getDimensions } from '../utils'
+import { getDimensions } from '@xyflow/system'
+import { ErrorCode, VueFlowError } from '../utils'
 import { useVueFlow } from './useVueFlow'
 
 /**
diff --git a/packages/core/src/composables/useViewportHelper.ts b/packages/core/src/composables/useViewportHelper.ts
@@ -1,7 +1,8 @@
 import { zoomIdentity } from 'd3-zoom'
 import { computed } from 'vue'
+import { clampPosition, rendererPointToPoint } from '@xyflow/system'
 import type { D3Selection, GraphNode, Project, State, ViewportFunctions } from '../types'
-import { clampPosition, getRectOfNodes, getTransformForBounds, pointToRendererPoint, rendererPointToPoint, warn } from '../utils'
+import { getRectOfNodes, getTransformForBounds, pointToRendererPoint, warn } from '../utils'
 
 export interface ViewportHelper extends ViewportFunctions {
   viewportInitialized: boolean
@@ -203,7 +204,7 @@ export function useViewportHelper(state: State) {
             y: position.y + domY,
           }
 
-          return rendererPointToPoint(correctedPosition, state.viewport)
+          return rendererPointToPoint(correctedPosition, [state.viewport.x, state.viewport.y, state.viewport.zoom])
         }
 
         return { x: 0, y: 0 }
diff --git a/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue b/packages/core/src/container/EdgeRenderer/MarkerDefinitions.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
+import { getMarkerId } from '@xyflow/system'
 import type { EdgeMarkerType, MarkerProps, MarkerType } from '../../types'
 import { useVueFlow } from '../../composables'
-import { getMarkerId } from '../../utils'
 import MarkerSymbols from './MarkerSymbols.vue'
 
 const { id: vueFlowId, edges, connectionLineOptions, defaultMarkerColor: defaultColor } = useVueFlow()
diff --git a/packages/core/src/container/Pane/Pane.vue b/packages/core/src/container/Pane/Pane.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue'
+import { getEventPosition } from '@xyflow/system'
 import UserSelection from '../../components/UserSelection/UserSelection.vue'
 import NodesSelection from '../../components/NodesSelection/NodesSelection.vue'
 import type { NodeChange } from '../../types'
 import { SelectionMode } from '../../types'
 import { useKeyPress, useVueFlow } from '../../composables'
-import { getEventPosition, getNodesInside, getSelectionChanges } from '../../utils'
+import { getNodesInside, getSelectionChanges } from '../../utils'
 import { getMousePosition } from './utils'
 
 const { isSelecting, selectionKeyPressed } = defineProps<{ isSelecting: boolean; selectionKeyPressed: boolean }>()
diff --git a/packages/core/src/container/Viewport/Viewport.vue b/packages/core/src/container/Viewport/Viewport.vue
@@ -3,12 +3,13 @@ import type { D3ZoomEvent, ZoomTransform } from 'd3-zoom'
 import { zoom, zoomIdentity } from 'd3-zoom'
 import { pointer, select } from 'd3-selection'
 import { onMounted, ref, toRef, watch } from 'vue'
+import { clamp, isMacOs } from '@xyflow/system'
 import type { CoordinateExtent, D3ZoomHandler, ViewportTransform } from '../../types'
 import { PanOnScrollMode } from '../../types'
 import { useKeyPress } from '../../composables/useKeyPress'
 import { useVueFlow } from '../../composables/useVueFlow'
 import { useResizeHandler } from '../../composables/useResizeHandler'
-import { clamp, isMacOs, warn } from '../../utils'
+import { warn } from '../../utils'
 import Pane from '../Pane/Pane.vue'
 import Transform from './Transform.vue'
 
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -22,6 +22,9 @@ export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRender
 export { getBezierPath, getSmoothStepPath, getStraightPath, getBezierEdgeCenter } from '@xyflow/system'
 export { getSimpleBezierPath } from './components/Edges/SimpleBezierEdge'
 
+// re-export graph utils
+export { clamp, getBoundsOfRects, getBoundsOfBoxes, rendererPointToPoint, getMarkerId } from '@xyflow/system'
+
 export {
   isNode,
   isEdge,
@@ -33,12 +36,8 @@ export {
   getTransformForBounds,
   getRectOfNodes,
   pointToRendererPoint,
-  rendererPointToPoint,
   getNodesInside,
-  getMarkerId,
-  getBoundsofRects,
   connectionExists,
-  clamp,
 } from './utils/graph'
 
 /**
diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts
@@ -1,6 +1,7 @@
 import { zoomIdentity } from 'd3-zoom'
 import type { ComputedRef } from 'vue'
 import { until } from '@vueuse/core'
+import { clamp, getDimensions, getOverlappingArea, isRectObject } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -26,25 +27,21 @@ import type {
 import { useViewportHelper } from '../composables'
 import {
   applyChanges,
-  clamp,
   createAdditionChange,
   createEdgeRemoveChange,
   createGraphEdges,
   createGraphNodes,
   createNodeRemoveChange,
   createSelectionChange,
   getConnectedEdges as getConnectedEdgesBase,
-  getDimensions,
   getHandleBounds,
   getIncomers as getIncomersBase,
   getOutgoers as getOutgoersBase,
-  getOverlappingArea,
   getSelectionChanges,
   isDef,
   isEdge,
   isGraphNode,
   isNode,
-  isRect,
   nodeToRect,
   updateConnectionLookup,
   updateEdgeAction,
@@ -599,7 +596,7 @@ export function useActions(state: State, nodeLookup: ComputedRef<NodeLookup>, ed
   const getNodeRect = (
     nodeOrRect: (Partial<Node> & { id: Node['id'] }) | Rect,
   ): [Rect | null, Node | null | undefined, boolean] => {
-    const isRectObj = isRect(nodeOrRect)
+    const isRectObj = isRectObject(nodeOrRect)
     const node = isRectObj ? null : isGraphNode(nodeOrRect as GraphNode) ? (nodeOrRect as GraphNode) : findNode(nodeOrRect.id)
 
     if (!isRectObj && !node) {
diff --git a/packages/core/src/store/state.ts b/packages/core/src/store/state.ts
@@ -1,7 +1,7 @@
+import { isMacOs } from '@xyflow/system'
 import type { FlowOptions, State } from '../types'
 import { ConnectionLineType, ConnectionMode, PanOnScrollMode, SelectionMode } from '../types'
 
-import { isMacOs } from '../utils'
 import { createHooks } from './hooks'
 
 export function useState(): State {
diff --git a/packages/core/src/utils/autopan.ts b/packages/core/src/utils/autopan.ts
diff --git a/packages/core/src/utils/drag.ts b/packages/core/src/utils/drag.ts
@@ -1,4 +1,5 @@
 import { markRaw } from 'vue'
+import { clampPosition } from '@xyflow/system'
 import type {
   Actions,
   CoordinateExtent,
@@ -9,7 +10,7 @@ import type {
   State,
   XYPosition,
 } from '../types'
-import { ErrorCode, VueFlowError, clampPosition, isParentSelected } from '.'
+import { ErrorCode, VueFlowError, isParentSelected } from '.'
 
 export function hasSelector(target: Element, selector: string, node: Element): boolean {
   let current = target
diff --git a/packages/core/src/utils/edge.ts b/packages/core/src/utils/edge.ts
@@ -1,6 +1,7 @@
+import { rectToBox } from '@xyflow/system'
 import type { Actions, GraphEdge, GraphNode, HandleElement, ViewportTransform, XYPosition } from '../types'
 import { Position } from '../types'
-import { getNodeDimensions, rectToBox } from '.'
+import { getNodeDimensions } from '.'
 
 export function getHandlePosition(
   node: GraphNode,
diff --git a/packages/core/src/utils/general.ts b/packages/core/src/utils/general.ts
@@ -1,22 +1,5 @@
 import type { GraphNode } from '../types'
 
-export function isMouseEvent(event: MouseEvent | TouchEvent): event is MouseEvent {
-  return 'clientX' in event
-}
-
-export function getEventPosition(event: MouseEvent | TouchEvent, bounds?: DOMRect) {
-  const isMouseTriggered = isMouseEvent(event)
-  const evtX = isMouseTriggered ? event.clientX : event.touches?.[0].clientX
-  const evtY = isMouseTriggered ? event.clientY : event.touches?.[0].clientY
-
-  return {
-    x: evtX - (bounds?.left ?? 0),
-    y: evtY - (bounds?.top ?? 0),
-  }
-}
-
-export const isMacOs = () => typeof navigator !== 'undefined' && navigator?.userAgent?.indexOf('Mac') >= 0
-
 export function getNodeDimensions(node: GraphNode): { width: number; height: number } {
   return {
     width: node.dimensions?.width ?? node.width ?? 0,
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
diff --git a/packages/core/src/utils/handle.ts b/packages/core/src/utils/handle.ts
diff --git a/packages/core/src/utils/index.ts b/packages/core/src/utils/index.ts
diff --git a/packages/core/src/utils/node.ts b/packages/core/src/utils/node.ts
diff --git a/packages/minimap/src/MiniMap.vue b/packages/minimap/src/MiniMap.vue

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@vue-flow/minimap": patch
 +---
++
 +Update import of `getBoundsOfRects`