diff --git a/.changeset/config.json b/.changeset/config.json index 64ae8b92e..4fc867ef5 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,7 +6,7 @@ "repo": "bcakmakoglu/vue-flow" } ], - "fixed": [], + "fixed": [["@vue-flow/*"]], "updateInternalDependencies": "patch", "snapshot": { "useCalculatedVersion": true diff --git a/.changeset/cyan-melons-unite.md b/.changeset/cyan-melons-unite.md new file mode 100644 index 000000000..b967de82a --- /dev/null +++ b/.changeset/cyan-melons-unite.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": major +--- + +Remove experimental features flag diff --git a/.changeset/hip-melons-peel.md b/.changeset/hip-melons-peel.md new file mode 100644 index 000000000..80e55c5b8 --- /dev/null +++ b/.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 diff --git a/.changeset/nine-fishes-lick.md b/.changeset/nine-fishes-lick.md new file mode 100644 index 000000000..d8df07e5d --- /dev/null +++ b/.changeset/nine-fishes-lick.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": major +--- + +Remove deprecated exports `addEdge`, `updateEdge` & `useZoomPanHelper` diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 000000000..fac142e7f --- /dev/null +++ b/.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" + ] +} diff --git a/docs/src/guide/utils/graph.md b/docs/src/guide/utils/graph.md index f6e27dbfd..36aa7e8bf 100644 --- a/docs/src/guide/utils/graph.md +++ b/docs/src/guide/utils/graph.md @@ -70,71 +70,6 @@ const toggleClass = () => { ``` -## [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} - - -``` - -## [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} - - -``` - ## [getOutgoers](/typedocs/functions/getOutgoers) - Details: diff --git a/packages/core/src/composables/index.ts b/packages/core/src/composables/index.ts index 5f6ba8c33..e7f6c2eff 100644 --- a/packages/core/src/composables/index.ts +++ b/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' diff --git a/packages/core/src/composables/useZoomPanHelper.ts b/packages/core/src/composables/useZoomPanHelper.ts deleted file mode 100644 index 17d10aa05..000000000 --- a/packages/core/src/composables/useZoomPanHelper.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { toReactive } from '@vueuse/core' -import type { ViewportFunctions } from '../types' -import { useVueFlow } from './useVueFlow' -import { useViewportHelper } from './useViewportHelper' - -/** - * @deprecated use {@link useVueFlow} instead (all viewport functions are also available in {@link useVueFlow}) - */ -export function useZoomPanHelper(vueFlowId?: string): ViewportFunctions { - const state = useVueFlow({ id: vueFlowId }) - - const viewportHelper = useViewportHelper(toReactive(state)) - - return { - fitView: (params) => viewportHelper.value.fitView(params), - zoomIn: (transitionOpts) => viewportHelper.value.zoomIn(transitionOpts), - zoomOut: (transitionOpts) => viewportHelper.value.zoomOut(transitionOpts), - zoomTo: (zoomLevel, transitionOpts) => viewportHelper.value.zoomTo(zoomLevel, transitionOpts), - setViewport: (params, transitionOpts) => viewportHelper.value.setViewport(params, transitionOpts), - setTransform: (params, transitionOpts) => viewportHelper.value.setTransform(params, transitionOpts), - getViewport: () => viewportHelper.value.getViewport(), - getTransform: () => viewportHelper.value.getTransform(), - setCenter: (x, y, opts) => viewportHelper.value.setCenter(x, y, opts), - fitBounds: (params, opts) => viewportHelper.value.fitBounds(params, opts), - project: (params) => viewportHelper.value.project(params), - } -} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 371c4dfa9..db0fb64e3 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -32,8 +32,6 @@ export { isEdge, isGraphNode, isGraphEdge, - addEdge, - updateEdge, getOutgoers, getIncomers, getConnectedEdges, @@ -41,8 +39,6 @@ export { 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' diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts index d3e834267..a3512374e 100644 --- a/packages/core/src/utils/graph.ts +++ b/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, diff --git a/packages/pathfinding-edge/.eslintrc.js b/packages/pathfinding-edge/.eslintrc.js deleted file mode 100644 index e4b0b38cc..000000000 --- a/packages/pathfinding-edge/.eslintrc.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - extends: ['@tooling/eslint-config'], -} diff --git a/packages/pathfinding-edge/CHANGELOG.md b/packages/pathfinding-edge/CHANGELOG.md deleted file mode 100644 index 73d24a0aa..000000000 --- a/packages/pathfinding-edge/CHANGELOG.md +++ /dev/null @@ -1,123 +0,0 @@ -# @vue-flow/pathfinding-edge - -## 1.0.6 - -### Patch Changes - -- [#865](https://github.com/bcakmakoglu/vue-flow/pull/865) [`9ce7bdc4`](https://github.com/bcakmakoglu/vue-flow/commit/9ce7bdc4908dda4dea299e5f469b252ac20a12ab) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add `exports` field to package.json - -## 1.0.5 - -### Patch Changes - -- [#770](https://github.com/bcakmakoglu/vue-flow/pull/770) [`baaabbe8`](https://github.com/bcakmakoglu/vue-flow/commit/baaabbe8e5cd88c9976033bca33119b1bc7a4d57) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix wrong package entries in `package.json` for pathfinding edge - -## 1.0.4 - -### Patch Changes - -- [#716](https://github.com/bcakmakoglu/vue-flow/pull/716) [`1685827d`](https://github.com/bcakmakoglu/vue-flow/commit/1685827d0ea1dc9864f95a1b3a54fbc43a296e5d) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix umd pkg names and use the correct vue flow core umd pkg name in plugins - -## 1.0.3 - -### Patch Changes - -- [#682](https://github.com/bcakmakoglu/vue-flow/pull/682) [`b08cb4d4`](https://github.com/bcakmakoglu/vue-flow/commit/b08cb4d45904c229d9ecda5e3cb477cbb7a6acaf) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Add compat mode to components to avoid breaking when used with @vue/compat - -## 1.0.2 - -### Patch Changes - -- [#616](https://github.com/bcakmakoglu/vue-flow/pull/616) [`b16e3564`](https://github.com/bcakmakoglu/vue-flow/commit/b16e3564708c5429ad594156341fa3e95f84d3b2) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Upgrade to vite 4 & update deps - -## 1.0.1 - -### Patch Changes - -- [#365](https://github.com/bcakmakoglu/vue-flow/pull/365) [`009bbdb`](https://github.com/bcakmakoglu/vue-flow/commit/009bbdba6d7e896bcfcaf8f07e7fdc8a83cc52fc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - Fix output file names for resize-rotate-node and pathfinding-edge pkgs - -## 1.0.0 - -### Major Changes - -- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed? - - - Simplify edge path calculations - - remove `getEdgeCenter` and `getSimpleEdgeCenter` - - # Breaking Changes - - - `getEdgeCenter` has been removed - - Edge center positions can now be accessed from `getBezierPath` or `getSmoothStepPath` functions - - Before: - - ```js - import { getBezierPath, getEdgeCenter } from "@braks/vue-flow"; - - // used to return the path string only - const edgePath = computed(() => getBezierPath(pathParams)); - - // was necessary to get the centerX, centerY of an edge - const centered = computed(() => getEdgeCenter(centerParams)); - ``` - - After: - - ```js - import { getBezierPath } from "@vue-flow/core"; - - // returns the path string and the center positions - const [path, centerX, centerY] = computed(() => getBezierPath(pathParams)); - ``` - -- [#305](https://github.com/bcakmakoglu/vue-flow/pull/305) [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01) Thanks [@bcakmakoglu](https://github.com/bcakmakoglu)! - # What's changed? - - - Change pkg scope from 'braks' to 'vue-flow' - - Add `@vue-flow/core` package - - Add `@vue-flow/additional-components` package - - Add `@vue-flow/pathfinding-edge` package - - Add `@vue-flow/resize-rotate-node` package - - # Features - - - `useNode` and `useEdge` composables - - can be used to access current node/edge (or by id) and their respective element refs (if used inside the elements' context, i.e. a custom node/edge) - - `selectionKeyCode` as `true` - - allows for figma style selection (i.e. create a selection rect without holding shift or any other key) - - Handles to trigger handle bounds calculation on mount - - if no handle bounds are found, a Handle will try to calculate its bounds on mount - - should remove the need for `updateNodeInternals` on dynamic handles - - Testing for various features using Cypress 10 - - # Bugfixes - - - Fix `removeSelectedEdges` and `removeSelectedNodes` actions not properly removing elements from store - - # Breaking Changes - - - `@vue-flow/core` package is now required to use vue-flow - - `@vue-flow/additional-components` package contains `Background`, `MiniMap` and `Controls` components and related types - - When switching to the new pkg scope, you need to change the import path. - - Before: - - ```js - import { VueFlow, Background, MiniMap, Controls } from "@braks/vue-flow"; - ``` - - After - - ```js - import { VueFlow } from "@vue-flow/core"; - import { - Background, - MiniMap, - Controls, - } from "@vue-flow/additional-components"; - ``` - -### Patch Changes - -- Updated dependencies [[`939bff50`](https://github.com/bcakmakoglu/vue-flow/commit/939bff503039af3b790160640548ddde984cf2bc), [`47d837aa`](https://github.com/bcakmakoglu/vue-flow/commit/47d837aac096e59e7f55213990dff2cc7eba0c01)]: - - @vue-flow/core@1.0.0 diff --git a/packages/pathfinding-edge/README.md b/packages/pathfinding-edge/README.md deleted file mode 100644 index b88c5132d..000000000 --- a/packages/pathfinding-edge/README.md +++ /dev/null @@ -1,70 +0,0 @@ -# Vue Flow Pathfinding Edge 🧲 - -⚠️ DEPRECATED - WILL BE REMOVED WITH NEXT MAJOR RELEASE ⚠️ - -__Custom edge that avoids crossing nodes__ - -## 🛠 Setup - -```bash -# install -$ yarn add @vue-flow/pathfinding-edge - -# or -$ npm i --save @vue-flow/pathfinding-edge -``` - -## 🎮 Quickstart - -```vue - - -``` - -```js -// initial-elements.js -export default [ - { - id: 'e12', - source: '1', - target: '2', - label: 'Smart Edge', - style: { stroke: 'red' }, - // assign pathfinding edge type - type: 'pathfinding' - }, - { - id: '1', - label: 'Node 1', - position: { - x: 430, - y: 0, - }, - }, - { - id: '2', - label: 'Node 2', - position: { - x: 230, - y: 90, - }, - }, -] -``` diff --git a/packages/pathfinding-edge/example/App.vue b/packages/pathfinding-edge/example/App.vue deleted file mode 100644 index c41a97ead..000000000 --- a/packages/pathfinding-edge/example/App.vue +++ /dev/null @@ -1,47 +0,0 @@ - - - - - diff --git a/packages/pathfinding-edge/example/elements.ts b/packages/pathfinding-edge/example/elements.ts deleted file mode 100644 index 3cb36864d..000000000 --- a/packages/pathfinding-edge/example/elements.ts +++ /dev/null @@ -1,129 +0,0 @@ -import type { EdgeMarkerType, Elements } from '@vue-flow/core' -import { MarkerType } from '@vue-flow/core' - -const markerEnd: EdgeMarkerType = MarkerType.Arrow - -export default [ - { - id: '1', - label: 'Node 1', - position: { - x: 430, - y: 0, - }, - }, - { - id: '2', - label: 'Node 2', - position: { - x: 230, - y: 90, - }, - }, - { - id: '2a', - label: 'Node 2a', - position: { - x: 0, - y: 180, - }, - }, - { - id: '2b', - label: 'Node 2b', - position: { - x: 230, - y: 180, - }, - }, - { - id: '2c', - label: 'Node 2c', - position: { - x: 430, - y: 180, - }, - }, - { - id: '2d', - label: 'Node 2d', - position: { - x: 475, - y: 270, - }, - }, - { - id: '3', - label: 'Node 3', - position: { - x: 430, - y: 90, - }, - }, - { - id: 'e12', - source: '1', - target: '2', - label: 'Foobar', - style: { stroke: 'red' }, - type: 'pathFinding', - markerEnd, - }, - { - id: 'e13', - source: '1', - target: '3', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e22a', - source: '2', - target: '2a', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e22b', - source: '2', - target: '2b', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e22c', - source: '2', - target: '2c', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e2c2d', - source: '2c', - target: '2d', - type: 'perfectArrow', - label: 'perfect arrow', - markerEnd, - }, - { - id: 'e2d2c', - source: '2d', - target: '2c', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e2d1', - source: '2d', - target: '1', - type: 'pathFinding', - markerEnd, - }, - { - id: 'e2a2b', - source: '2a', - target: '2b', - type: 'perfectArrow', - markerEnd, - }, -] as Elements diff --git a/packages/pathfinding-edge/example/main.ts b/packages/pathfinding-edge/example/main.ts deleted file mode 100644 index c707599b8..000000000 --- a/packages/pathfinding-edge/example/main.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { createApp } from 'vue' -import App from './App.vue' - -const app = createApp(App) - -app.config.performance = true -app.mount('#root') diff --git a/packages/pathfinding-edge/index.html b/packages/pathfinding-edge/index.html deleted file mode 100644 index 7328d10f5..000000000 --- a/packages/pathfinding-edge/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - 🌊 Vue Flow - - -
- - - diff --git a/packages/pathfinding-edge/package.json b/packages/pathfinding-edge/package.json deleted file mode 100644 index 20e133fed..000000000 --- a/packages/pathfinding-edge/package.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "name": "@vue-flow/pathfinding-edge", - "version": "1.0.6", - "private": false, - "license": "MIT", - "author": "Burak Cakmakoglu<78412429+bcakmakoglu@users.noreply.github.com>", - "repository": { - "type": "git", - "url": "git+https://github.com/bcakmakoglu/vue-flow" - }, - "homepage": "https://github.com/bcakmakoglu/vue-flow#readme", - "bugs": { - "url": "https://github.com/bcakmakoglu/vue-flow/issues" - }, - "keywords": [ - "vue", - "flow", - "diagram", - "editor", - "graph", - "node", - "link", - "port", - "slot", - "vue3", - "composition-api", - "vue-flow", - "vueflow", - "typescript" - ], - "main": "./dist/vue-flow-pathfinding-edge.js", - "types": "./dist/index.d.ts", - "module": "./dist/vue-flow-pathfinding-edge.mjs", - "unpkg": "./dist/vue-flow-pathfinding-edge.iife.js", - "jsdelivr": "./dist/vue-flow-pathfinding-edge.iife.js", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "import": "./dist/vue-flow-pathfinding-edge.mjs", - "require": "./dist/vue-flow-pathfinding-edge.js" - } - }, - "files": [ - "dist" - ], - "sideEffects": false, - "scripts": { - "dev": "pnpm types:watch & pnpm build:watch", - "build": "vite build", - "build:watch": "vite build --watch", - "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist", - "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch", - "examples": "vite", - "test": "exit 0", - "lint": "eslint --ext .js,.ts,.vue ./", - "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/* ./dist" - }, - "peerDependencies": { - "@vue-flow/core": "^1.23.0", - "vue": "^3.3.0" - }, - "dependencies": { - "pathfinding": "^0.4.18", - "perfect-arrows": "^0.3.7" - }, - "devDependencies": { - "@tooling/eslint-config": "workspace:*", - "@tooling/tsconfig": "workspace:*", - "@tooling/vite-config": "workspace:*", - "@types/pathfinding": "^0.0.6", - "@vue-flow/core": "workspace:*", - "vue-tsc": "^1.8.16" - }, - "publishConfig": { - "access": "public", - "registry": "https://registry.npmjs.org/" - } -} diff --git a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue b/packages/pathfinding-edge/src/arrow/PerfectArrow.vue deleted file mode 100644 index 7ac241c66..000000000 --- a/packages/pathfinding-edge/src/arrow/PerfectArrow.vue +++ /dev/null @@ -1,58 +0,0 @@ - - - - - diff --git a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue b/packages/pathfinding-edge/src/edge/PathFindingEdge.vue deleted file mode 100644 index 89bd03949..000000000 --- a/packages/pathfinding-edge/src/edge/PathFindingEdge.vue +++ /dev/null @@ -1,110 +0,0 @@ - - - - - diff --git a/packages/pathfinding-edge/src/edge/createGrid.ts b/packages/pathfinding-edge/src/edge/createGrid.ts deleted file mode 100644 index 5cf857031..000000000 --- a/packages/pathfinding-edge/src/edge/createGrid.ts +++ /dev/null @@ -1,70 +0,0 @@ -import { Grid } from 'pathfinding' -import type { Position } from '@vue-flow/core' -import { getNextPointFromPosition, guaranteeWalkablePath } from './guaranteeWalkablePath' -import { graphToGridPoint } from './pointConversion' -import { round } from './utils' -import type { GraphBoundingBox, NodeBoundingBox } from './getBoundingBoxes' - -export const gridRatio = 10 - -export interface PointInfo { - x: number - y: number - position: Position -} - -export function createGrid(graph: GraphBoundingBox, nodes: NodeBoundingBox[], source: PointInfo, target: PointInfo) { - const { xMin, yMin, width, height } = graph - - // Create a grid representation of the graph box, where each cell is - // equivalent to 10x10 pixels on the graph. We'll use this simplified grid - // to do pathfinding. - const mapColumns = width / gridRatio - const mapRows = height / gridRatio - const grid = new Grid(mapColumns, mapRows) - - // Update the grid representation with the space the nodes take up - nodes.forEach((node) => { - const nodeStart = graphToGridPoint(node.topLeft, xMin, yMin) - const nodeEnd = graphToGridPoint(node.bottomRight, xMin, yMin) - - for (let x = nodeStart.x; x < nodeEnd.x; x++) { - for (let y = nodeStart.y; y < nodeEnd.y; y++) { - grid.setWalkableAt(x, y, false) - } - } - }) - - // Convert the starting and ending graph points to grid points - const startGrid = graphToGridPoint( - { - x: round(source.x, gridRatio), - y: round(source.y, gridRatio), - }, - xMin, - yMin, - ) - - const endGrid = graphToGridPoint( - { - x: round(target.x, gridRatio), - y: round(target.y, gridRatio), - }, - xMin, - yMin, - ) - - // Guarantee a walkable path between the start and end points, even if the - // source or target where covered by another node or by padding - const startingNode = grid.getNodeAt(startGrid.x, startGrid.y) - guaranteeWalkablePath(grid, startingNode, source.position) - const endingNode = grid.getNodeAt(endGrid.x, endGrid.y) - guaranteeWalkablePath(grid, endingNode, target.position) - - // Use the next closest points as the start and end points, so - // pathfinding does not start too close to the nodes - const start = getNextPointFromPosition(startingNode, source.position) - const end = getNextPointFromPosition(endingNode, target.position) - - return { grid, start, end } -} diff --git a/packages/pathfinding-edge/src/edge/drawSvgPath.ts b/packages/pathfinding-edge/src/edge/drawSvgPath.ts deleted file mode 100644 index 8ee973f48..000000000 --- a/packages/pathfinding-edge/src/edge/drawSvgPath.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { XYPosition } from '@vue-flow/core' - -/** - * Draws an SVG path from a list of points, using straight lines. - */ - -function getMidPoint(Ax: number, Ay: number, Bx: number, By: number) { - const Zx = (Ax - Bx) / 2 + Bx - const Zy = (Ay - By) / 2 + By - return [Zx, Zy] -} - -export function drawStraightLinePath(source: XYPosition, target: XYPosition, path: number[][]) { - let svgPathString = `M ${source.x}, ${source.y} ` - - path.forEach((point) => { - const [x, y] = point - svgPathString += `L ${x}, ${y} ` - }) - - svgPathString += `L ${target.x}, ${target.y} ` - - return svgPathString -} - -function quadraticBezierCurve(points: number[][]) { - const X = 0 - const Y = 1 - let point = points[0] - - const first = points[0] - let svgPath = `M${first[X]},${first[Y]}M` - - for (let i = 0; i < points.length; i++) { - const next = points[i] - const midPoint = getMidPoint(point[X], point[Y], next[X], next[Y]) - - svgPath += ` ${midPoint[X]},${midPoint[Y]}` - svgPath += `Q${next[X]},${next[Y]}` - point = next - } - - const last = points[points.length - 1] - svgPath += ` ${last[0]},${last[1]}` - - return svgPath -} - -/** - * Draws a SVG path from a list of points, using rounded lines. - */ -export function drawSmoothLinePath(source: XYPosition, target: XYPosition, path: number[][]) { - const points = [[source.x, source.y], ...path, [target.x, target.y]] - return quadraticBezierCurve(points) -} diff --git a/packages/pathfinding-edge/src/edge/generatePath.ts b/packages/pathfinding-edge/src/edge/generatePath.ts deleted file mode 100644 index 447cd712f..000000000 --- a/packages/pathfinding-edge/src/edge/generatePath.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { AStarFinder, DiagonalMovement, Util } from 'pathfinding' -import type { Grid, Heuristic } from 'pathfinding' -import type { XYPosition } from '@vue-flow/core' - -// https://www.npmjs.com/package/pathfinding#advanced-usage -declare module 'pathfinding' { - interface FinderOptions extends Heuristic { - diagonalMovement?: DiagonalMovement - weight?: number - allowDiagonal?: boolean - dontCrossCorners?: boolean - } -} - -export function generatePath(grid: Grid, start: XYPosition, end: XYPosition): number[][] { - const finder = new AStarFinder({ - diagonalMovement: DiagonalMovement.Always, - allowDiagonal: true, - dontCrossCorners: true, - }) - - let path: number[][] = [] - - try { - path = finder.findPath(start.x, start.y, end.x, end.y, grid) - path = Util.smoothenPath(grid, path) - } catch { - // No path was found. This can happen if the end point is "surrounded" - // by other nodes, or if the starting and ending nodes are on top of - // each other. - } - - return path -} diff --git a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts b/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts deleted file mode 100644 index 1f16b3de1..000000000 --- a/packages/pathfinding-edge/src/edge/getBoundingBoxes.ts +++ /dev/null @@ -1,158 +0,0 @@ -import type { GraphNode, XYPosition } from '@vue-flow/core' -import { roundDown, roundUp } from './utils' - -export interface NodeBoundingBox { - id: string - width: number - height: number - topLeft: XYPosition - bottomLeft: XYPosition - topRight: XYPosition - bottomRight: XYPosition -} - -export interface GraphBoundingBox { - width: number - height: number - topLeft: XYPosition - bottomLeft: XYPosition - topRight: XYPosition - bottomRight: XYPosition - xMax: number - yMax: number - xMin: number - yMin: number -} - -/** - * Get the bounding box of all nodes and the graph itself, as X/Y coordinates - * of all corner points. - * - * @param storeNodes The node list - * @param nodePadding Optional padding to add to the node's bounding boxes - * @param graphPadding Optional padding to add to the graph's bounding box - * @param roundTo If the coordinates should be rounded to this nearest integer - * @returns Graph and nodes bounding boxes. - */ -export function getBoundingBoxes(storeNodes: GraphNode[], nodePadding = 0, graphPadding = 0, roundTo = 0) { - // Guarantee that the given parameters are positive integers - nodePadding = Math.max(Math.round(nodePadding), 0) - graphPadding = Math.max(Math.round(graphPadding), 0) - roundTo = Math.max(Math.round(roundTo), 0) - - nodePadding = Number.isInteger(nodePadding) ? nodePadding : 0 - graphPadding = Number.isInteger(graphPadding) ? graphPadding : 0 - roundTo = Number.isInteger(roundTo) ? roundTo : 0 - - let xMax = Number.MIN_SAFE_INTEGER - let yMax = Number.MIN_SAFE_INTEGER - let xMin = Number.MAX_SAFE_INTEGER - let yMin = Number.MAX_SAFE_INTEGER - - const nodes: NodeBoundingBox[] = storeNodes.map((node) => { - const { - computedPosition: { x, y }, - dimensions, - } = node - const width = Math.max(dimensions.width || 0, 1) - const height = Math.max(dimensions.height || 0, 1) - - const position: XYPosition = { - x: x || 0, - y: y || 0, - } - const topLeft: XYPosition = { - x: position.x - nodePadding, - y: position.y - nodePadding, - } - const bottomLeft: XYPosition = { - x: position.x - nodePadding, - y: position.y + height + nodePadding, - } - const topRight: XYPosition = { - x: position.x + width + nodePadding, - y: position.y - nodePadding, - } - const bottomRight: XYPosition = { - x: position.x + width + nodePadding, - y: position.y + height + nodePadding, - } - - if (roundTo > 0) { - topLeft.x = roundDown(topLeft.x, roundTo) - topLeft.y = roundDown(topLeft.y, roundTo) - bottomLeft.x = roundDown(bottomLeft.x, roundTo) - bottomLeft.y = roundUp(bottomLeft.y, roundTo) - topRight.x = roundUp(topRight.x, roundTo) - topRight.y = roundDown(topRight.y, roundTo) - bottomRight.x = roundUp(bottomRight.x, roundTo) - bottomRight.y = roundUp(bottomRight.y, roundTo) - } - - if (topLeft.y < yMin) { - yMin = topLeft.y - } - if (topLeft.x < xMin) { - xMin = topLeft.x - } - if (bottomRight.y > yMax) { - yMax = bottomRight.y - } - if (bottomRight.x > xMax) { - xMax = bottomRight.x - } - - return { - id: node.id, - width, - height, - topLeft, - bottomLeft, - topRight, - bottomRight, - } - }) - - xMax = xMax + graphPadding - yMax = yMax + graphPadding - xMin = xMin - graphPadding - yMin = yMin - graphPadding - - const topLeft: XYPosition = { - x: xMin, - y: yMin, - } - - const bottomLeft: XYPosition = { - x: xMin, - y: yMax, - } - - const topRight: XYPosition = { - x: xMax, - y: yMin, - } - - const bottomRight: XYPosition = { - x: xMax, - y: yMax, - } - - const width = Math.abs(topLeft.x - topRight.x) - const height = Math.abs(topLeft.y - bottomLeft.y) - - const graph: GraphBoundingBox = { - topLeft, - bottomLeft, - topRight, - bottomRight, - width, - height, - xMax, - yMax, - xMin, - yMin, - } - - return { nodes, graph } -} diff --git a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts b/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts deleted file mode 100644 index e163536fa..000000000 --- a/packages/pathfinding-edge/src/edge/guaranteeWalkablePath.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type { Grid } from 'pathfinding' -import type { Position, XYPosition } from '@vue-flow/core' - -type Direction = 'top' | 'bottom' | 'left' | 'right' - -export function getNextPointFromPosition(point: XYPosition, position: Direction): XYPosition { - switch (position) { - case 'top': - return { x: point.x, y: point.y - 1 } - case 'bottom': - return { x: point.x, y: point.y + 1 } - case 'left': - return { x: point.x - 1, y: point.y } - case 'right': - return { x: point.x + 1, y: point.y } - } -} - -/** - * Guarantee that the path is walkable, even if the point is inside a non - * walkable area, by adding a walkable path in the direction of the point's - * Position. - */ -export function guaranteeWalkablePath(grid: Grid, point: XYPosition, position: Position) { - let node = grid.getNodeAt(point.x, point.y) - while (!node.walkable) { - grid.setWalkableAt(node.x, node.y, true) - const next = getNextPointFromPosition(node, position) - node = grid.getNodeAt(next.x, next.y) - } -} diff --git a/packages/pathfinding-edge/src/edge/pointConversion.ts b/packages/pathfinding-edge/src/edge/pointConversion.ts deleted file mode 100644 index c1b4b29c3..000000000 --- a/packages/pathfinding-edge/src/edge/pointConversion.ts +++ /dev/null @@ -1,95 +0,0 @@ -import type { XYPosition } from '@vue-flow/core' - -const gridRatio = 10 - -/** - * Each bounding box is a collection of X/Y points in a graph, and we - * need to convert them to "occupied" cells in a 2D grid representation. - * - * The top most position of the grid (grid[0][0]) needs to be equivalent - * to the top most point in the graph (the graph.topLeft point). - * - * Since the top most point can have X/Y values different than zero, - * and each cell in a grid represents a 10x10 pixel area in the grid, - * there's need to be a conversion between a point in a graph to a point - * in the grid. - * - * We do this conversion by dividing a graph point X/Y values by 10, and - * "shifting" their values up or down, depending on the values of the top most - * point in the graph. The top most point in the graph will have the smallest - * values for X and Y. - * - * We avoid setting nodes in the border of the grid (x=0 or y=0), so there's - * always a "walkable" area around the grid. - */ -export function graphToGridPoint(graphPoint: XYPosition, smallestX: number, smallestY: number): XYPosition { - let x = graphPoint.x / gridRatio - let y = graphPoint.y / gridRatio - - let referenceX = smallestX / gridRatio - let referenceY = smallestY / gridRatio - - if (referenceX < 1) { - while (referenceX !== 1) { - referenceX++ - x++ - } - } else if (referenceX > 1) { - while (referenceX !== 1) { - referenceX-- - x-- - } - } - - if (referenceY < 1) { - while (referenceY !== 1) { - referenceY++ - y++ - } - } else if (referenceY > 1) { - while (referenceY !== 1) { - referenceY-- - y-- - } - } - - return { x, y } -} - -/** - * Converts a grid point back to a graph point, using the reverse logic of - * graphToGridPoint. - */ -export function gridToGraphPoint(gridPoint: XYPosition, smallestX: number, smallestY: number): XYPosition { - let x = gridPoint.x * gridRatio - let y = gridPoint.y * gridRatio - - let referenceX = smallestX - let referenceY = smallestY - - if (referenceX < gridRatio) { - while (referenceX !== gridRatio) { - referenceX = referenceX + gridRatio - x = x - gridRatio - } - } else if (referenceX > gridRatio) { - while (referenceX !== gridRatio) { - referenceX = referenceX - gridRatio - x = x + gridRatio - } - } - - if (referenceY < gridRatio) { - while (referenceY !== gridRatio) { - referenceY = referenceY + gridRatio - y = y - gridRatio - } - } else if (referenceY > gridRatio) { - while (referenceY !== gridRatio) { - referenceY = referenceY - gridRatio - y = y + gridRatio - } - } - - return { x, y } -} diff --git a/packages/pathfinding-edge/src/edge/utils.ts b/packages/pathfinding-edge/src/edge/utils.ts deleted file mode 100644 index fad261db5..000000000 --- a/packages/pathfinding-edge/src/edge/utils.ts +++ /dev/null @@ -1,11 +0,0 @@ -export function round(x: number, multiple = 10) { - return Math.round(x / multiple) * multiple -} - -export function roundDown(x: number, multiple = 10) { - return Math.floor(x / multiple) * multiple -} - -export function roundUp(x: number, multiple = 10) { - return Math.ceil(x / multiple) * multiple -} diff --git a/packages/pathfinding-edge/src/index.ts b/packages/pathfinding-edge/src/index.ts deleted file mode 100644 index a1fc5a0ee..000000000 --- a/packages/pathfinding-edge/src/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default as PathFindingEdge } from './edge/PathFindingEdge.vue' -export { default as PerfectArrow } from './arrow/PerfectArrow.vue' -export * from './types' diff --git a/packages/pathfinding-edge/src/types.ts b/packages/pathfinding-edge/src/types.ts deleted file mode 100644 index 62cd61f7f..000000000 --- a/packages/pathfinding-edge/src/types.ts +++ /dev/null @@ -1,54 +0,0 @@ -import type { EdgeProps, Position } from '@vue-flow/core' -import type { CSSProperties } from 'vue' -import type { ArrowOptions } from 'perfect-arrows' - -export interface PathFindingEdgeProps extends EdgeProps { - id: string - source: string - target: string - sourceX: number - sourceY: number - targetX: number - targetY: number - selected?: boolean - animated?: boolean - sourcePosition: Position - targetPosition: Position - label?: EdgeProps['label'] - labelStyle?: any - labelShowBg?: boolean - labelBgStyle?: any - labelBgPadding?: [number, number] - labelBgBorderRadius?: number - style?: CSSProperties - markerEnd: string - markerStart: string - sourceHandleId?: string - targetHandleId?: string -} - -export interface PerfectArrowProps { - id: string - source: string - target: string - sourceX: number - sourceY: number - targetX: number - targetY: number - selected?: boolean - animated?: boolean - sourcePosition: Position - targetPosition: Position - label?: EdgeProps['label'] - labelStyle?: any - labelShowBg?: boolean - labelBgStyle?: any - labelBgPadding?: [number, number] - labelBgBorderRadius?: number - style?: CSSProperties - markerEnd: string - markerStart: string - sourceHandleId?: string - targetHandleId?: string - options?: ArrowOptions -} diff --git a/packages/pathfinding-edge/tsconfig.json b/packages/pathfinding-edge/tsconfig.json deleted file mode 100644 index f02b0a03e..000000000 --- a/packages/pathfinding-edge/tsconfig.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "extends": "@tooling/tsconfig/base", - "compilerOptions": { - "baseUrl": ".", - "declarationDir": "./dist", - "types": [ - "vite/client", - "vue/macros" - ] - }, - "include": [ - "./src" - ] -} diff --git a/packages/pathfinding-edge/vite.config.ts b/packages/pathfinding-edge/vite.config.ts deleted file mode 100644 index 2b4c61720..000000000 --- a/packages/pathfinding-edge/vite.config.ts +++ /dev/null @@ -1,13 +0,0 @@ -import { resolve } from 'node:path' -import { withConfig } from '@tooling/vite-config' - -export default withConfig({ - build: { - lib: { - formats: ['es', 'cjs', 'iife'], - entry: resolve(__dirname, 'src/index.ts'), - fileName: 'vue-flow-pathfinding-edge', - name: 'VueFlowPathfindingEdge', - }, - }, -})