vue-flow/.changeset/twenty-walls-cheer.md

@vue-flow/additional-components, @vue-flow/pathfinding-edge, @vue-flow/resize-rotate-node, @vue-flow/core

@vue-flow/additional-components	@vue-flow/pathfinding-edge	@vue-flow/resize-rotate-node	@vue-flow/core
major	major	major	major

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

Package scope & name

• @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:

import { VueFlow, Background, MiniMap, Controls } from '@braks/vue-flow'

After

import { VueFlow } from '@vue-flow/core'
import { Background, MiniMap, Controls } from '@vue-flow/additional-components'

Edges

• getEdgeCenter has been removed
  • Edge center positions can now be accessed from getBezierPath or getSmoothStepPath functions

Before:

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:

import { getBezierPath } from '@vue-flow/core'

// returns the path string and the center positions
const [path, centerX, centerY] = computed(() => getBezierPath(pathParams),)