Vue Flow

Appearance

Return to top
On this page

@vue-flow/core

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