refactor(core): implement @xyflow/system

.changeset/fifty-rockets-report.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": patch
+---
+
+Update import of `getBoundsOfRects`

.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`

.changeset/seven-ads-wait.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/minimap": minor
+---
+
+Replace d3 with xyflow minimap instance

.changeset/six-spiders-pull.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Rename transformationpane to viewport and viewport to zoompane. Also update corresponding css class names and styles.

.changeset/tame-books-cross.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Replace d3 zoom and pan with panzoom instance

.changeset/ten-snails-flash.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": minor
+---
+
+Replace existing edge utils with ones that are already provided by `@xyflow/system` and re-export them

docs/src/guide/vue-flow/config.md

@@ -500,7 +500,7 @@ const edges = ref([
 
 ### default-viewport (optional)
 
-- Type: [`ViewportTransform`](/typedocs/interfaces/ViewportTransform)
+- Type: `Viewport`
 
 - Default: `{ zoom: 1, position: { x: 0, y: 0 } }`
 

packages/core/package.json

@@ -74,15 +74,14 @@
     "@vueuse/core": "^10.5.0",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "@xyflow/system": "^0.0.39"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.3",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
     "@types/d3-drag": "^3.0.4",
     "@types/d3-selection": "^3.0.7",
-    "@types/d3-zoom": "^3.0.5",
     "@vitejs/plugin-vue": "^4.4.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.31",

packages/core/src/components/ConnectionLine/index.ts

@@ -1,10 +1,11 @@
 import { computed, defineComponent, h, inject } from 'vue'
+import { getBezierPath, getMarkerId, getSmoothStepPath } from '@xyflow/system'
 import type { HandleElement } from '../../types'
 import { ConnectionLineType, ConnectionMode, Position } from '../../types'
-import { getHandlePosition, getMarkerId, oppositePosition } from '../../utils'
+import { getHandlePosition, oppositePosition } from '../../utils'
 import { useVueFlow } from '../../composables'
 import { Slots } from '../../context'
-import { getBezierPath, getSimpleBezierPath, getSmoothStepPath } from '../Edges/utils'
+import { getSimpleBezierPath } from '../Edges/SimpleBezierEdge'
 
 const ConnectionLine = defineComponent({
   name: 'ConnectionLine',

packages/core/src/components/Edges/BezierEdge.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
+import { getBezierPath } from '@xyflow/system'
 import type { BezierEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getBezierPath } from './utils'
 
 const BezierEdge = defineComponent<BezierEdgeProps>({
   name: 'BezierEdge',

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,
-  getEdgeHandle,
-  getHandlePosition,
-  getMarkerId,
-} from '../../utils'
+import { ARIA_EDGE_DESC_KEY, ErrorCode, VueFlowError, elementSelectionKeys, getEdgeHandle, getHandlePosition } from '../../utils'
 import EdgeAnchor from './EdgeAnchor'
 
 interface Props {

packages/core/src/components/Edges/SimpleBezierEdge.ts

@@ -1,8 +1,99 @@
 import { defineComponent, h } from 'vue'
+import { getBezierEdgeCenter } from '@xyflow/system'
 import type { SimpleBezierEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getSimpleBezierPath } from './utils'
+
+export interface GetSimpleBezierPathParams {
+  sourceX: number
+  sourceY: number
+  sourcePosition?: Position
+  targetX: number
+  targetY: number
+  targetPosition?: Position
+}
+
+interface GetControlParams {
+  pos: Position
+  x1: number
+  y1: number
+  x2: number
+  y2: number
+}
+
+function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] {
+  let ctX: number, ctY: number
+  switch (pos) {
+    case Position.Left:
+    case Position.Right:
+      ctX = 0.5 * (x1 + x2)
+      ctY = y1
+      break
+    case Position.Top:
+    case Position.Bottom:
+      ctX = x1
+      ctY = 0.5 * (y1 + y2)
+      break
+  }
+  return [ctX, ctY]
+}
+
+/**
+ * Get a simple bezier path from source to target handle (no curvature)
+ * @public
+ *
+ * @param simpleBezierPathParams
+ * @param simpleBezierPathParams.sourceX - The x position of the source handle
+ * @param simpleBezierPathParams.sourceY - The y position of the source handle
+ * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom)
+ * @param simpleBezierPathParams.targetX - The x position of the target handle
+ * @param simpleBezierPathParams.targetY - The y position of the target handle
+ * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top)
+ * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label
+ */
+export function getSimpleBezierPath({
+  sourceX,
+  sourceY,
+  sourcePosition = Position.Bottom,
+  targetX,
+  targetY,
+  targetPosition = Position.Top,
+}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] {
+  const [sourceControlX, sourceControlY] = getControl({
+    pos: sourcePosition,
+    x1: sourceX,
+    y1: sourceY,
+    x2: targetX,
+    y2: targetY,
+  })
+
+  const [targetControlX, targetControlY] = getControl({
+    pos: targetPosition,
+    x1: targetX,
+    y1: targetY,
+    x2: sourceX,
+    y2: sourceY,
+  })
+
+  const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourceControlX,
+    sourceControlY,
+    targetControlX,
+    targetControlY,
+  })
+
+  return [
+    `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`,
+    labelX,
+    labelY,
+    offsetX,
+    offsetY,
+  ]
+}
 
 const SimpleBezierEdge = defineComponent<SimpleBezierEdgeProps>({
   name: 'SimpleBezierEdge',

packages/core/src/components/Edges/SmoothStepEdge.ts

@@ -1,8 +1,8 @@
 import { defineComponent, h } from 'vue'
+import { getSmoothStepPath } from '@xyflow/system'
 import type { SmoothStepEdgeProps } from '../../types'
 import { Position } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getSmoothStepPath } from './utils'
 
 const SmoothStepEdge = defineComponent<SmoothStepEdgeProps>({
   name: 'SmoothStepEdge',

packages/core/src/components/Edges/StraightEdge.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h } from 'vue'
+import { getStraightPath } from '@xyflow/system'
 import type { StraightEdgeProps } from '../../types'
 import BaseEdge from './BaseEdge.vue'
-import { getStraightPath } from './utils'
 
 const StraightEdge = defineComponent<StraightEdgeProps>({
   name: 'StraightEdge',