Vue Flow

Appearance

Return to top
On this page

@vue-flow/core

1.11.0

Minor Changes

  • #595 0c784a2 Thanks @bcakmakoglu! - Add deletable option to nodes and edges. If set to false it will prevent nodes and edges to be removed when removeNodes or removeEdges is triggered

Patch Changes

  • #593 da65c54 Thanks @bcakmakoglu! - Prevent elements that have selectable disabled from being selected

  • #590 89d2415 Thanks @bcakmakoglu! - Skip updating positions when updateNodeInternals is triggered - it will only update node dimensions (which can trigger a position update)

  • #590 72f9f1a Thanks @bcakmakoglu! - Use flush timing pre for NodeWrapper watchers

1.10.3

Patch Changes

  • #586 c0f31a2 Thanks @bcakmakoglu! - Check if element is still in state before attempting removal when applying removal changes

1.10.2

Patch Changes

  • #584 17cd5bc Thanks @bcakmakoglu! - Set initial node position correctly after applying node extent

  • #583 0c25796 Thanks @bcakmakoglu! - Fix type exports using path alias instead of relative paths, which causes types to not be inferred on user-side

1.10.1

Patch Changes

1.10.0

Minor Changes

  • #579 b8d3241 Thanks @bcakmakoglu! - Allow setting padding option for node.extent: 'parent'

    Padding can be a number[] containing a maximum of 4 values. The values are applied in the same order as CSS padding: top, right, bottom, left. You can omit values at the end of the array, so [10, 20] is equivalent to [10, 20, 10, 20] etc.

    Usage 

    const nodes = ref([
  {
    id: '4',
    label: 'Node 4',
    position: { x: 320, y: 200 },
    style: { backgroundColor: 'rgba(255, 0, 0, 0.7)', width: '300px', height: '300px' },
  },
  {
    id: '4a',
    label: 'Node 4a',
    position: { x: 15, y: 65 },
    class: 'light',
    extent: {
      range: 'parent',
      // apply 10 px padding to all four sides
      padding: [10],
    },
    parentNode: '4',
  },
])

Patch Changes

  • #578 c0d9018 Thanks @bcakmakoglu! - Allow omitting width and height style properties for parent nodes when using expandParent on child nodes

1.9.4

Patch Changes

  • #574 1160d3d Thanks @bcakmakoglu! - Fix props being undefined on first render of custom node and edge components

  • #574 1160d3d Thanks @bcakmakoglu! - Remove nodes property from ConnectionLineProps - use getNodes inside the component instead ⚠️

1.9.3

Patch Changes

1.9.2

Patch Changes

1.9.1

Patch Changes

1.9.0

Minor Changes

  • #557 c7897a1 Thanks @bcakmakoglu! - Allow customizing the controls of the viewport and the selection box.

    Props

    • selectionKeyCode: You can now set this to MaybeRef<boolean> to enable a selection box without extra button press (need to set :pan-on-drag="false" or :pan-on-drag="[2]"[RightClick]).
    • panOnDrag: Can now be a boolean or a number[], this allows you to configure every mouse button as a drag button. [1, 2] would mean that you can drag via middle and right mouse button.
    • panActivationKeyCode: Key code (or KeyFilter) for activating dragging (useful when using selectionOnDrag).
    • selectionMode: You can choose if the selection box needs to contain a node fully (SelectionMode.Full) or partially (SelectionMode.Partial) to select.

    Events

    • onSelectionStart: Emitted when the selection box is started.
    • onSelectionEnd: Emitted when the selection box is ended.
    • onViewportChangeStart: Emitted when viewport change has started.
    • onViewportChange: Emitted when viewport is changed.
    • onViewportChangeEnd: Emitted when viewport change has ended.

Patch Changes

  • #558 bac9893 Thanks @bcakmakoglu! - ⚠️ Deprecate options API utils addEdge and updateEdge. These utils will be removed soon!

    Resolve deprecation warnings

    Instead of using these utils, use addEdges and updateEdge found on the VueFlow store instance. You receive a store instance by using either a template-ref or listening to the onPaneReady event.

    Example 

    <script>
import { VueFlow } from '@vue-flow/core'

export default defineComponent({
  name: 'OptionsAPIExample',
  components: { VueFlow },
  data() {
    return {
      vueFlow: null,
      instance: null,
      elements: [
        { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 }, class: 'light' },
        { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, class: 'light' },
        { id: '3', label: 'Node 3', position: { x: 400, y: 100 }, class: 'light' },
        { id: '4', label: 'Node 4', position: { x: 400, y: 200 }, class: 'light' },
        { id: 'e1-2', source: '1', target: '2', animated: true },
        { id: 'e1-3', source: '1', target: '3' },
      ],
    }
  },
  methods: {
    // You can listen to `onPaneReady` to get the instance
    onPaneReady(instance) {
      instance.fitView()
      this.instance = instance
    },
    onConnect(params) {
      // either use the instance you have saved in `onPaneReady`
      this.instance?.addEdges([params])

      // or use the template-ref
      this.$refs.vueFlow?.addEdges([params])
    },
  },
})
</script>

<template>
  <VueFlow
    v-model="elements"
    ref="vueFlow"
    class="vue-flow-basic-example"
    :default-zoom="1.5"
    :min-zoom="0.2"
    :max-zoom="4"
    :zoom-on-scroll="false"
    @connect="onConnect"
    @pane-ready="onPaneReady"
  />
</template>

  • #557 c7897a1 Thanks @bcakmakoglu! - Add a11y support to selection box

1.8.0

Minor Changes

Patch Changes

A11y

This release brings A11y support to Vue Flow. All nodes and edges can now receive a focusable and ariaLabel prop, which can be used to enhance A11y experience. You can also enable focusable globally by using nodesFocusable or edgesFocusable. Additionally, nodes can be moved using keyboard controls (Arrow-Keys).

Props

  • disableKeyboardA11y: Use this prop to disable Keyboard controls on the graph.
  • defaultViewport: The old defaultZoom and defaultPosition props have been merged into a single object called defaultViewport.
  • nodesFocusable: Globally enable that nodes can be focused.
  • edgesFocusable: Globally enable that edges can be focused.

Elements

  • focusable: Enable focusing for a single node/edge by setting this option.
  • ariaLabel: Specify an aria label for a node/edge

1.7.2

Patch Changes

1.7.1

Patch Changes

  • #545 54c93b9 Thanks @bcakmakoglu! - Remove immediate watch of VueFlow props and set prop values via state initalizer

  • #545 54c93b9 Thanks @bcakmakoglu! - Only trigger store watcher immediate when elements were set, otherwise wait for changes in store to overwrite model-value

1.7.0

Minor Changes

Patch Changes

1.6.4

Patch Changes

1.6.3

Patch Changes

  • #534 f0f7e7e4 Thanks @bcakmakoglu! - Add missing edge class to edge wrapper

  • #534 02c945e8 Thanks @bcakmakoglu! - Pass attributes to edge components (i.e. style and class forwarded to BaseEdge)

  • #532 cd778715 Thanks @bcakmakoglu! - Use vue-flow__handle in handle bounds selector to avoid selecting elements with the source or target class names that aren't handles

1.6.2

Patch Changes

1.6.1

Patch Changes

1.6.0

Minor Changes

Patch Changes

1.5.11

Patch Changes

1.5.10

Patch Changes

1.5.9

Patch Changes

1.5.8

Patch Changes

1.5.7

Patch Changes

1.5.6

Patch Changes

  • #497 50e59604 Thanks @bcakmakoglu! - Separate store and model watchers from each other and allow them to be triggered after init

  • #496 1ca8c2a9 Thanks @bcakmakoglu! - Make nodes and edges deeply reactive objects, so that data changes can trigger v-model changes as well

1.5.5

Patch Changes

1.5.4

Patch Changes

1.5.3

Patch Changes

  • #474 9568794 Thanks @bcakmakoglu! - Fix untyped connection line, node and edge slots props by patching type definition after build

1.5.2

Patch Changes

1.5.1

Patch Changes

1.5.0

Minor Changes

Patch Changes

1.4.2

Patch Changes

1.4.1

Patch Changes

1.4.0

Minor Changes

  • #360 a11edae Thanks @bcakmakoglu! - Add interactionWidth prop to edges. Sets radius of pointer interactivity for edges

1.3.3

Patch Changes

1.3.2

Patch Changes

1.3.1

Patch Changes

1.3.0

Minor Changes

  • #394 1403b65 Thanks @bcakmakoglu! - Add nodesInitialized event hook

  • #387 9530290 Thanks @bcakmakoglu! - Pass node intersections to node drag events (on single node drag)

  • #387 a19b458 Thanks @bcakmakoglu! - Add intersection utils to help with checking if a node intersects with either other nodes or a given area

    Usage

    • You can either use the action getIntersectingNodes to find all nodes that intersect with a given node
    const { onNodeDrag, getIntersectingNodes, getNodes } = useVueFlow()

onNodeDrag(({ node }) => {
  const intersections = getIntersectingNodes(node).map((n) => n.id)

  getNodes.value.forEach((n) => {
    // highlight nodes that are intersecting with the dragged node
    n.class = intersections.includes(n.id) ? 'highlight' : ''
  })
})
    • Node drag events will provide you with the intersecting nodes without having to call the action explicitly.
    onNodeDrag(({ intersections }) => {
  getNodes.value.forEach((n) => {
    n.class = intersections?.some((i) => i.id === n.id) ? 'highlight' : ''
  })
})
    • Or you can use the isIntersecting util to check if a node intersects with a given area
    const { onNodeDrag, isNodeIntersecting } = useVueFlow()

onNodeDrag(({ node }) => {
  // highlight the node if it is intersecting with the given area
  node.class = isNodeIntersecting(node, { x: 0, y: 0, width: 100, height: 100 }) ? 'highlight' : ''
})

  • #396 03412ac Thanks @bcakmakoglu! - Add zoomable and pannable to MiniMap

    Usage

    • Set zoomable and pannable to true in MiniMap component to enable interactions with the MiniMap
    <template>
  <VueFlow v-model="elements">
    <MiniMap :zoomable="true" :pannable="true" />
  </VueFlow>
</template>

Patch Changes

  • #361 43ff2a4 Thanks @bcakmakoglu! - Add EdgeLabelRenderer component export

    Usage

    • You can use the EdgeLabelRenderer component to render the label of an edge outside the SVG context of edges.
    • The EdgeLabelRenderer component is a component that handles teleporting your edge label into a HTML context
    • This is useful if you want to use HTML elements in your edge label, like buttons
    <script lang="ts" setup>
import type { EdgeProps, Position } from '@vue-flow/core'
import { EdgeLabelRenderer, getBezierPath, useVueFlow } from '@vue-flow/core'
import type { CSSProperties } from 'vue'

interface CustomEdgeProps<T = any> extends EdgeProps<T> {
  id: string
  sourceX: number
  sourceY: number
  targetX: number
  targetY: number
  sourcePosition: Position
  targetPosition: Position
  data: T
  markerEnd: string
  style: CSSProperties
}

const props = defineProps<CustomEdgeProps>()

const { removeEdges } = useVueFlow()

const path = $computed(() => getBezierPath(props))
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
}
</script>

<template>
  <path :id="id" :style="style" class="vue-flow__edge-path" :d="path[0]" :marker-end="markerEnd" />

  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
      class="nodrag nopan"
    >
      <button class="edgebutton" @click="removeEdges([id])">×</button>
    </div>
  </EdgeLabelRenderer>
</template>

<style>
.edgebutton {
  border-radius: 999px;
  cursor: pointer;
}
.edgebutton:hover {
  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
</style>

1.2.2

Patch Changes

1.2.1

Patch Changes

1.2.0

Minor Changes

1.1.4

Patch Changes

  • #353 8f95187 Thanks @bcakmakoglu! - Allow undefined as custom theme var value

  • #349 61d2b88 Thanks @bcakmakoglu! - Node and Edge data and events to be definitely typed when passed as NodeProps or EdgeProps

  • #352 bff576b Thanks @bcakmakoglu! - Add overflow: visible to control btn svgs (fixes safari bug where svgs aren't showing up)

  • #349 61d2b88 Thanks @bcakmakoglu! - Extend Elements/FlowElements generics to differentiate between Node and Edge data and custom events

  • #349 61d2b88 Thanks @bcakmakoglu! - Add Generic to isNode and isEdge helpers

  • #350 92a69a6 Thanks @bcakmakoglu! - Set nodes' dragging prop on drag start and end (fixes grabbing hand not showing on mousedown / not disappearing on mouseup)

1.1.3

Patch Changes

1.1.2

Patch Changes

1.1.1

Patch Changes

  • #328 1e5a77d6 Thanks @bcakmakoglu! - Prevent mouseup handler from resetting startHandle before connections can be made when using connectOnClick

  • #328 18a812db Thanks @bcakmakoglu! - Passing single option breaks connectable check when no handle ids are set

    • Pass connectable to correct handle prop in default node types

  • #328 a415353b Thanks @bcakmakoglu! - Add dragging class name to pane on drag

1.1.0

Minor Changes

  • #311 78f9ee1c Thanks @bcakmakoglu! - # What's changed?

    • Add HandleConnectable type
    • Update connectable prop of Handle to HandleConnectable type
    • Allow to specify if Handles are connectable
      • any number of connections
      • none
      • single connection
      • or a cb to determine whether the Handle is connectable

    Example:

    <script lang="ts" setup>
import { Handle, HandleConnectable } from '@vue-flow/core'

const handleConnectable: HandleConnectable = (node, connectedEdges) => {
  console.log(node, connectedEdges)
  return true
}
</script>
<template>
  <!-- single connection -->
  <Handle type="target" position="left" connectable="single" />
  <div>Custom Node</div>
  <!-- cb -->
  <Handle id="a" position="right" :connectable="handleConnectable" />
</template>
    • Update node.connectable prop to HandleConnectable

    For Example:

    const nodes = ref([
  {
    id: '1',
    position: { x: 0, y: 0 },
    connectable: 'single', // each handle is only connectable once (default node for example)
  },
  {
    id: '2',
    position: { x: 200, y: 0 },
    connectable: (node, connectedEdges) => {
      return true // will allow any number of connections
    },
  },
  {
    id: '3',
    position: { x: 400, y: 0 },
    connectable: true, // will allow any number of connections
  },
  {
    id: '4',
    position: { x: 200, y: 0 },
    connectable: false, // will disable handles
  },
])

Patch Changes

  • #311 e175cf81 Thanks @bcakmakoglu! - # What's changed?

    • Add vueflow pkg that exports all features
    <script setup>
// `vueflow` pkg exports all features, i.e. core + additional components
import { VueFlow, Background, MiniMap, Controls } from 'vueflow'
</script>

<template>
  <VueFlow>
    <Background />
    <MiniMap />
    <Controls />
  </VueFlow>
</template>

    Chores

    • Rename core pkg directory to core from vue-flow
    • Rename bundle outputs

  • #311 e1c28a26 Thanks @bcakmakoglu! - # What's changed?

    • Simplify useHandle usage
    • Pass props to the composable as possible refs
      • Still returns onClick & onMouseDown handlers but only expects mouse event now

    Before:

    <script lang="ts" setup>
import { useHandle, NodeId } from '@vue-flow/core'

const nodeId = inject(NodeId)

const handleId = 'my-handle'

const type = 'source'

const isValidConnection = () => true

const { onMouseDown } = useHandle()

const onMouseDownHandler = (event: MouseEvent) => {
  onMouseDown(event, handleId, nodeId, type === 'target', isValidConnection, undefined)
}
</script>

<template>
  <div @mousedown="onMouseDownHandler" />
</template>

    After:

    <script lang="ts" setup>
import { useHandle, useNode } from '@vue-flow/core'

const { nodeId } = useNode()

const handleId = 'my-handle'

const type = 'source'

const isValidConnection = () => true

const { onMouseDown } = useHandle({
  nodeId,
  handleId,
  isValidConnection,
  type,
})
</script>

<template>
  <div @mousedown="onMouseDown" />
</template>

  • #311 08ad1735 Thanks @bcakmakoglu! - # Bugfixes

    • Edges not returned by getter when paneReady event is triggered

1.0.0

Major Changes

  • #305 939bff50 Thanks @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:

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

  • #305 47d837aa Thanks @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:

    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'

Released under the MIT License.

Copyright © 2021-present Burak Cakmakoglu