Vue Flow

Appearance

Return to top
On this page

@vue-flow/core

2.0.0-next.0

Major Changes

1.17.1

Patch Changes

1.17.0

Minor Changes

  • #785 7667aa60 Thanks @bcakmakoglu! - Allow passing objects with only id to getConnectedEdges nodes arg

  • #781 ad8c7897 Thanks @bcakmakoglu! - Add onError hook which allows handling vue flow errors by users. Will default to console.warn if no handler is passed

Patch Changes

  • #783 b864c436 Thanks @bcakmakoglu! - Remove stop from EdgeRenderer as watcher has been removed and stop refers to window.stop which causes requests to be cancelled when VueFlow is unmounted

1.16.5

Patch Changes

1.16.4

Patch Changes

  • #765 12c84a80 Thanks @bcakmakoglu! - Unwrap refs in node wrapper

  • #765 12c84a80 Thanks @bcakmakoglu! - Rename parentNode prop for custom nodes to parent to avoid TypeError which occurs as div already has parentNode defined which cannot be overwritten

1.16.3

Patch Changes

  • #756 47b03e75 Thanks @bcakmakoglu! - Add missing source and target position values on GraphEdge type objects if available

  • #759 35b0a0ac Thanks @bcakmakoglu! - Use render fn for node wrapper. Fixes props being hyphanated instead of camelcase when passed to custom components.

1.16.2

Patch Changes

1.16.1

Patch Changes

1.16.0

Minor Changes

Patch Changes

1.15.5

Patch Changes

1.15.4

Patch Changes

  • #728 6b149ca6 Thanks @bcakmakoglu! - Compare internal node dimensions against calculated ones when trying to update node dimensions

1.15.3

Patch Changes

1.15.2

Patch Changes

1.15.1

Patch Changes

1.15.0

Minor Changes

Patch Changes

  • #667 231271a Thanks @bcakmakoglu! - Prevent layout shift on initial render by hiding viewport until initial nodes have width/height

  • #667 89198bd Thanks @bcakmakoglu! - Remove Promises from viewport helper functions, will not await viewport anymore but instead return no-op functions if called too early

  • #695 616e795 Thanks @bcakmakoglu! - Use snapGrid values to clamp initial node positions

1.14.3

Patch Changes

1.14.2

Patch Changes

1.14.1

Patch Changes

1.14.0

Minor Changes

  • #654 99909f16 Thanks @bcakmakoglu! - Add VueFlowError class which is used when throwing

  • #649 47bc8280 Thanks @bcakmakoglu! - Add connectionStatus to connection lines, which can be used to check if the connection line is used on a valid handle.

Patch Changes

1.13.2

Patch Changes

1.13.1

Patch Changes

1.13.0

Minor Changes

  • #639 ad2b09f1 Thanks @bcakmakoglu! - Allow setting GraphNode or GraphEdge type with a generic type

  • #629 c7cfcec7 Thanks @bcakmakoglu! - Add connectionRadius option to global options and handle props. You can use this option to set the radius at which a connection line will snap to the closest available handle.

  • #613 7abd0bfd Thanks @bcakmakoglu! - Export edge center utils getSimpleEdgeCenter & getBezierEdgeCenter from core

  • #634 b59dd6a7 Thanks @bcakmakoglu! - Add autopan options. Pans viewport on node drag and/or when drawing a connection line.

    Usage 

    useVueFlow({
  autoPanOnNodeDrag: true,
  autoPanOnConnect: true,
});

    <VueFlow
  v-model="elements"
  :autoPanOnNodeDrag="true"
  :autoPanOnConnect="true"
/>

  • #636 e1628ec6 Thanks @bcakmakoglu! - Export isGraphNode and isGraphEdge typeguards

Patch Changes

1.12.7

Patch Changes

1.12.6

Patch Changes

  • #624 0bddb524 Thanks @bcakmakoglu! - Add warning when trying to duplicate an element or remove an element that does not exist

  • #626 449a3f2a Thanks @bcakmakoglu! - Remove extent option from setNodes & addNodes action. Extent should be passed to a node or set with the global option.

  • #626 449a3f2a Thanks @bcakmakoglu! - Use computed var to get current node in useDrag. Fixes issue where overwriting a node breaks drag handler.

1.12.5

Patch Changes

1.12.4

Patch Changes

1.12.3

Patch Changes

  • #616 b16e3564 Thanks @bcakmakoglu! - Upgrade to vite 4 & update deps

  • #615 d8fe5432 Thanks @bcakmakoglu! - Support key combinations for keycodes. Combinations can be passed using an array of keycodes and concatenated with a plus sign. For example: ['A+B'] will trigger when A and B are pressed at the same time.

  • #614 580de340 Thanks @bcakmakoglu! - Keep user selection on right click

1.12.2

Patch Changes

  • #610 01040099 Thanks @bcakmakoglu! - Always handle keyup events, instead of cancelling when focusing an input dom node

  • #611 8dbdcae2 Thanks @bcakmakoglu! - Check if position is a number when updating, instead of checking if the value is truthy. Fixes 0 values not being used when updating.

1.12.1

Patch Changes

1.12.0

Minor Changes

1.11.1

Patch Changes

  • #597 749175b9 Thanks @bcakmakoglu! - Add focus and focus-visible styles to avoid browser specific styles on default nodes

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