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/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

CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.48.1] - 2025-12-17
+
+[09cb136](09cb136ab7326da269f2e97f926880be0605cff6)...[87b2d2c](87b2d2c4e8b8e1e321a9cb0795987672b13de913)
+
+### Bug Fixes
+
+- Add missing `ts` script type to getting started example (#1971) ([1b15e24](1b15e24bb3d9e3dcc2f6b0f45be875098a71df18))
+- Use connecting handle to update connection (#1996) ([474e830](474e830d081f548777cf5518961fde5dc68a8039))
+
+### Reverts
+
+- Block pane ctx menu if panOnDrag includes [2] (right-click) (#2001) ([d98d3b5](d98d3b57c2a6721b1de66acbedac7cb5128712ae))
+
 ## [1.48.0] - 2025-11-21
 
 [ff69823](ff69823b9db45da9dd012852b8b7ec50bb45c6a9)...[09cb136](09cb136ab7326da269f2e97f926880be0605cff6)

docs/src/guide/getting-started.md

@@ -436,7 +436,7 @@ const props = defineProps<EdgeProps>()
 const path = computed(() => getBezierPath(props))
 </script>
 
-<script>
+<script lang="ts">
 export default {
   inheritAttrs: false,
 }

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

examples/vite/src/Basic/Basic.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
 import type { Edge, Node } from '@vue-flow/core'
-import { Background, MiniMap, Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, isNode, useVueFlow } from '@vue-flow/core'
+
+import { Background } from '@vue-flow/background'
+import { Controls } from '@vue-flow/controls'
+import { MiniMap } from '@vue-flow/minimap'
 
 const nodes = ref<Node[]>([
   { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },

examples/vite/src/CustomNode/ColorSelectorNode.vue

@@ -1,18 +1,13 @@
 <script lang="ts" setup>
 import type { CSSProperties } from 'vue'
-import type { NodeProps } from '@vue-flow/core'
 import { Handle, Position } from '@vue-flow/core'
+import type { ColorSelectorNodeProps } from './types'
 
-interface Data {
-  color: string
-  onChange: (event: InputEvent) => void
-}
-
-interface ColorSelectorNodeProps extends Pick<NodeProps<Data, {}, 'selectorNode'>, 'data'> {
-  data: Data
-}
+defineProps<ColorSelectorNodeProps>()
 
-const props = defineProps<ColorSelectorNodeProps>()
+const emits = defineEmits<{
+  change: [color: string]
+}>()
 
 const targetHandleStyle: CSSProperties = { background: '#555' }
 const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: '10px' }
@@ -31,11 +26,12 @@ export default {
       <circle cx="8" cy="8" r="7" fill="hotpink" />
     </svg>
   </Handle>
+
   <div>
     Custom Color Picker Node: <strong>{{ data.color }}</strong>
   </div>
 
-  <input class="nodrag" type="color" :value="data.color" @input="props.data.onChange" />
+  <input class="nodrag" type="color" :value="data.color" @input="emits('change', ($event.target as HTMLInputElement).value)" />
   <Handle id="a" type="source" :position="Position.Right" :style="sourceHandleStyleA" />
   <Handle id="b" type="source" :position="Position.Right" :style="sourceHandleStyleB" />
 </template>

examples/vite/src/CustomNode/CustomNode.vue

@@ -1,59 +1,53 @@
 <script lang="ts" setup>
-import type { Elements, Node, SnapGrid } from '@vue-flow/core'
-import { Controls, MiniMap, Position, VueFlow, isEdge, useVueFlow } from '@vue-flow/core'
+import type { Edge, Node } from '@vue-flow/core'
+import { Controls, MiniMap, Position, VueFlow, useVueFlow } from '@vue-flow/core'
 
 import ColorSelectorNode from './ColorSelectorNode.vue'
 
-const bgColor = ref('#1A192B')
-const connectionLineStyle = { stroke: '#fff' }
-const snapGrid: SnapGrid = [16, 16]
+const bgColor = shallowRef('#1A192B')
 
-const elements = ref<Elements>([
+const nodes = ref<Node[]>([
   {
     id: '1',
     type: 'input',
-    label: 'An input node',
+    data: { label: 'An input node' },
     position: { x: 0, y: 50 },
     sourcePosition: Position.Right,
   },
   {
     id: '2',
-    type: 'selectorNode',
-    data: { onChange, color: bgColor },
+    type: 'colorSelector',
+    data: { color: bgColor },
     style: { border: '1px solid #777', padding: '10px' },
     position: { x: 250, y: 50 },
   },
   {
     id: '3',
     type: 'output',
-    label: 'Output A',
+    data: { label: 'Output A' },
     position: { x: 650, y: 25 },
     targetPosition: Position.Left,
   },
   {
     id: '4',
     type: 'output',
-    label: 'Output B',
+    data: { label: 'Output B' },
     position: { x: 650, y: 100 },
     targetPosition: Position.Left,
   },
+])
 
+const edges = ref<Edge[]>([
   { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
   { id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
   { id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
 ])
 
-useVueFlow({
-  connectionLineOptions: {
-    style: connectionLineStyle,
-  },
-  snapToGrid: true,
-  snapGrid,
-})
+useVueFlow()
 
 function nodeStroke(n: Node) {
   switch (n.type) {
-    case 'selectorNode':
+    case 'colorSelector':
       return bgColor.value
     case 'input':
       return '#0041d0'
@@ -65,28 +59,18 @@ function nodeStroke(n: Node) {
 }
 
 function nodeColor(n: Node) {
-  if (n.type === 'selectorNode') {
+  if (n.type === 'colorSelector') {
     return bgColor.value
   }
 
   return '#fff'
 }
-
-function onChange(event: InputEvent) {
-  elements.value.forEach((e) => {
-    if (isEdge(e) || e.id !== '2') {
-      return e
-    }
-
-    bgColor.value = (event.target as HTMLInputElement).value
-  })
-}
 </script>
 
 <template>
-  <VueFlow v-model="elements" fit-view-on-init :style="{ backgroundColor: bgColor }">
-    <template #node-selectorNode="props">
-      <ColorSelectorNode :data="props.data" />
+  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init :style="{ backgroundColor: bgColor }">
+    <template #node-colorSelector="props">
+      <ColorSelectorNode :data="props.data" @change="bgColor = $event" />
     </template>
     <MiniMap :node-stroke-color="nodeStroke" :node-color="nodeColor" />
     <Controls />

examples/vite/src/CustomNode/types.ts

@@ -0,0 +1,3 @@
+import type { Node } from '@vue-flow/core'
+
+export type ColorSelectorNodeProps = NodeProps<Node<{ color: string }, 'colorSelector'>>

packages/core/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vue-flow/core
 
+## 1.48.1
+
+### Patch Changes
+
+- [#1996](https://github.com/bcakmakoglu/vue-flow/pull/1996) [`1c9732a`](https://github.com/bcakmakoglu/vue-flow/commit/1c9732ae99313cce9d8125571b51440931f9a9b0) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Use the connecting handle result when updating a connection, so we get an accurate connection position for `toPosition`.
+
+- [#2001](https://github.com/bcakmakoglu/vue-flow/pull/2001) [`08d57fa`](https://github.com/bcakmakoglu/vue-flow/commit/08d57fa1609e1fc7b966fb08a99fbf4756bc11b5) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Block pane ctx-menu from triggering if panOnDrag includes btn 2 (right-click) and let viewport emit pane ctx menu.
+
 ## 1.48.0
 
 ### Minor Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-flow/core",
-  "version": "1.48.0",
+  "version": "1.48.1",
   "private": false,
   "license": "MIT",
   "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>",
@@ -72,18 +72,14 @@
   },
   "dependencies": {
     "@vueuse/core": "^10.5.0",
-    "d3-drag": "^3.0.0",
     "d3-interpolate": "^3.0.1",
-    "d3-selection": "^3.0.0",
-    "d3-zoom": "^3.0.0"
+    "@xyflow/system": "^0.0.73"
   },
   "devDependencies": {
     "@rollup/plugin-replace": "^5.0.3",
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@types/d3-drag": "^3.0.7",
     "@types/d3-interpolate": "^3.0.4",
-    "@types/d3-selection": "^3.0.11",
     "@types/d3-transition": "^3.0.9",
     "@types/d3-zoom": "^3.0.8",
     "@vitejs/plugin-vue": "^4.4.0",

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 {
@@ -46,7 +39,7 @@ const EdgeWrapper = defineComponent({
 
     const edge = computed(() => findEdge(props.id)!)
 
-    const { emit, on } = useEdgeHooks(edge.value, emits)
+    const { emit } = useEdgeHooks(emits)
 
     const slots = inject(Slots)
 
@@ -229,7 +222,6 @@ const EdgeWrapper = defineComponent({
                 labelBgPadding: edge.value.labelBgPadding,
                 labelBgBorderRadius: edge.value.labelBgBorderRadius,
                 data: edge.value.data,
-                events: { ...edge.value.events, ...on },
                 style: edgeStyle.value,
                 markerStart: `url('#${getMarkerId(edge.value.markerStart, vueFlowId)}')`,
                 markerEnd: `url('#${getMarkerId(edge.value.markerEnd, vueFlowId)}')`,