chore: release 2.0.0

.changeset/config.json

@@ -6,7 +6,7 @@
       "repo": "bcakmakoglu/vue-flow"
     }
   ],
-  "fixed": [],
+  "fixed": [["@vue-flow/*"]],
   "updateInternalDependencies": "patch",
   "snapshot": {
     "useCalculatedVersion": true

.changeset/cyan-melons-unite.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove experimental features flag

.changeset/hip-melons-peel.md

@@ -0,0 +1,5 @@
+---
+'@vue-flow/core': major
+---
+
+Update handle styles and avoid using fixed pixel positions to offset handle position and instead use transform to align handles

.changeset/nine-fishes-lick.md

@@ -0,0 +1,5 @@
+---
+"@vue-flow/core": major
+---
+
+Remove deprecated exports `addEdge`, `updateEdge` & `useZoomPanHelper`

.changeset/pre.json

@@ -0,0 +1,27 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@vue-flow/docs": "1.0.0",
+    "@vue-flow/examples-nuxt3": "0.0.0",
+    "@vue-flow/examples-quasar": "0.0.0",
+    "@vue-flow/examples-vite": "0.0.0",
+    "@vue-flow/background": "1.0.5",
+    "@vue-flow/controls": "1.0.4",
+    "@vue-flow/core": "1.16.5",
+    "@vue-flow/minimap": "1.0.4",
+    "@vue-flow/node-resizer": "1.3.0",
+    "@vue-flow/node-toolbar": "1.0.6",
+    "@vue-flow/pathfinding-edge": "1.0.5",
+    "vueflow": "1.0.0",
+    "@vue-flow/tests": "0.0.0",
+    "@tooling/eslint-config": "0.0.0",
+    "@tooling/tsconfig": "0.0.0",
+    "@tooling/vite-config": "0.0.0"
+  },
+  "changesets": [
+    "cyan-melons-unite.md",
+    "fluffy-pans-boil.md",
+    "hip-melons-peel.md"
+  ]
+}

docs/src/guide/utils/graph.md

@@ -70,71 +70,6 @@ const toggleClass = () => {
 </template>
 ```
 
-## [addEdge](/typedocs/functions/isEdge) (deprecated)
-
-::: warning
-In the composition API you should use [`addEdges`](/typedocs/types/AddEdges) of [`useVueFlow`](/guide/composables#usevueflow/)
-:::
-
-- Details:
-
-  Adds an edge to the elements array.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { ref } from 'vue'
-import { VueFlow, addEdge } from '@vue-flow/core'
-
-const elements = ref([
-  { id: '1', position: { x: 250, y: 5 } },
-  { id: '2', position: { x: 100, y: 100 } },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onConnect = (params) => {
-  addEdge(params, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @connect="onConnect" />
-</template>
-```
-
-## [updateEdge](/typedocs/functions/updateEdge-1) (deprecated)
-
-::: warning
-In the composition API you should use [`updateEdge`](/typedocs/types/UpdateEdge) of [`useVueFlow`](/guide/composables#usevueflow/)
-:::
-
-- Details:
-
-  Updates an edge to a new source or target node.
-
-- Example:
-
-```vue{12}
-<script setup>
-import { VueFlow, updateEdge } from '@vue-flow/core'
-
-const elements = ref([
-  { id: '1', label: 'Node 1', position: { x: 250, y: 5 } },
-  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
-
-  { id: 'e1-2', source: '1', target: '2' },
-])
-
-const onEdgeUpdate = ({ edge, connection }) => {
-  elements.value = updateEdge(edge, connection, elements.value)
-}
-</script>
-<template>
-  <VueFlow v-model="elements" @edge-update="onEdgeUpdate" />
-</template>
-```
-
 ## [getOutgoers](/typedocs/functions/getOutgoers)
 
 - Details:

packages/core/src/composables/index.ts

@@ -10,4 +10,3 @@ export * from './useUpdateNodePositions'
 export * from './useViewportHelper'
 export * from './useVueFlow'
 export * from './useWatchProps'
-export * from './useZoomPanHelper'

packages/core/src/index.ts

@@ -32,17 +32,13 @@ export {
   isEdge,
   isGraphNode,
   isGraphEdge,
-  addEdge,
-  updateEdge,
   getOutgoers,
   getIncomers,
   getConnectedEdges,
   getTransformForBounds,
   getRectOfNodes,
   pointToRendererPoint,
   rendererPointToPoint,
-  /** @deprecated - will be removed in the next major version, use `rendererPointToPoint` instead */
-  rendererPointToPoint as graphPosToZoomedPos,
   getNodesInside,
   getMarkerId,
   getBoundsofRects,
@@ -61,7 +57,6 @@ export { defaultEdgeTypes, defaultNodeTypes } from './utils/defaultNodesEdges'
 
 export { VueFlow as VueFlowInjection, NodeId as NodeIdInjection } from './context'
 
-export { useZoomPanHelper } from './composables/useZoomPanHelper'
 export { useVueFlow } from './composables/useVueFlow'
 export { useHandle } from './composables/useHandle'
 export { useNode } from './composables/useNode'

packages/core/src/utils/graph.ts

@@ -21,7 +21,7 @@ import type {
   XYPosition,
   XYZPosition,
 } from '../types'
-import { isDef, warn } from '.'
+import { isDef } from '.'
 
 export function nodeToRect(node: GraphNode): Rect {
   return {
@@ -222,73 +222,6 @@ export function connectionExists(edge: Edge | Connection, elements: Elements) {
   )
 }
 
-/**
- * @deprecated Use store instance and call `addEdges` with template-ref or the one received by `onPaneReady` instead
- *
- * Intended for options API
- * In composition API you can access utilities from `useVueFlow`
- */
-export function addEdge(edgeParams: Edge | Connection, elements: Elements, defaults?: DefaultEdgeOptions) {
-  if (!edgeParams.source || !edgeParams.target) {
-    warn("Can't create edge. An edge needs a source and a target.")
-    return elements
-  }
-
-  let edge
-
-  if (isEdge(edgeParams)) {
-    edge = { ...edgeParams }
-  } else {
-    edge = {
-      ...edgeParams,
-      id: getEdgeId(edgeParams),
-    } as Edge
-  }
-
-  edge = parseEdge(edge, undefined, defaults)
-
-  if (connectionExists(edge, elements)) {
-    return elements
-  }
-
-  elements.push(edge)
-
-  return elements
-}
-
-/**
- * @deprecated Use store instance and call `updateEdge` with template-ref or the one received by `onPaneReady` instead
- *
- * Intended for options API
- * In composition API you can access utilities from `useVueFlow`
- */
-export function updateEdge(oldEdge: Edge, newConnection: Connection, elements: Elements) {
-  if (!newConnection.source || !newConnection.target) {
-    warn("Can't create new edge. An edge needs a source and a target.")
-    return elements
-  }
-
-  const foundEdge = elements.find((e) => isEdge(e) && e.id === oldEdge.id)
-
-  if (!foundEdge) {
-    warn(`The old edge with id=${oldEdge.id} does not exist.`)
-    return elements
-  }
-
-  // Remove old edge and create the new edge with parameters of old edge.
-  const edge: Edge = {
-    ...oldEdge,
-    id: getEdgeId(newConnection),
-    source: newConnection.source,
-    target: newConnection.target,
-    sourceHandle: newConnection.sourceHandle,
-    targetHandle: newConnection.targetHandle,
-  }
-  elements.splice(elements.indexOf(foundEdge), 1, edge)
-
-  return elements.filter((e) => e.id !== oldEdge.id)
-}
-
 export function rendererPointToPoint({ x, y }: XYPosition, { x: tx, y: ty, zoom: tScale }: ViewportTransform): XYPosition {
   return {
     x: x * tScale + tx,