Skip to content

Commit

Permalink
refactor(core)!: remove deprecated exports (#1549)
Browse files Browse the repository at this point in the history
* refactor(core)!: remove deprecated exports

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

* chore(changeset): add

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

* chore(docs): cleanup deprecated functions

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

* chore(changeset): update

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

---------

Signed-off-by: braks <[email protected]>
  • Loading branch information
bcakmakoglu committed Jul 15, 2024
1 parent bbb54be commit f6bb711
Show file tree
Hide file tree
Showing 6 changed files with 6 additions and 166 deletions.
5 changes: 5 additions & 0 deletions .changeset/nine-fishes-lick.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@vue-flow/core": major
---

Remove deprecated exports `addEdge`, `updateEdge` & `useZoomPanHelper`
65 changes: 0 additions & 65 deletions docs/src/guide/utils/graph.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
1 change: 0 additions & 1 deletion packages/core/src/composables/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,3 @@ export * from './useUpdateNodePositions'
export * from './useViewportHelper'
export * from './useVueFlow'
export * from './useWatchProps'
export * from './useZoomPanHelper'
27 changes: 0 additions & 27 deletions packages/core/src/composables/useZoomPanHelper.ts

This file was deleted.

5 changes: 0 additions & 5 deletions packages/core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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'
Expand Down
69 changes: 1 addition & 68 deletions packages/core/src/utils/graph.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import type {
XYPosition,
XYZPosition,
} from '../types'
import { isDef, warn } from '.'
import { isDef } from '.'

export function nodeToRect(node: GraphNode): Rect {
return {
Expand Down Expand Up @@ -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,
Expand Down

0 comments on commit f6bb711

Please sign in to comment.