Vue Flow

Appearance

Return to top
On this page

@vue-flow/core

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