Vue Flow

Appearance

@vue-flow/core ​

1.47.0 ​

Minor Changes ​

  • #1967 7828f4a Thanks @bcakmakoglu! - Replace the existing offset option for fitView with a more expressive padding option allowing users to define padding per sides.

1.46.5 ​

Patch Changes ​

  • #1962 34bcf36 Thanks @bcakmakoglu! - Unwrap connection line status ref in the connection line component to correctly append the class name.

1.46.4 ​

Patch Changes ​

  • #1954 f4cfc50 Thanks @bcakmakoglu! - Remove border related styles from the required styles and move them into the default theme stylesheet

1.46.3 ​

Patch Changes ​

1.46.2 ​

Patch Changes ​

1.46.1 ​

Patch Changes ​

  • #1935 ca54587 Thanks @bcakmakoglu! - Correctly check if an event listener was bound to the VueFlow component, using for example @node-click or if a listener was bound using the exposed event hooks from useVueFlow when determening if a listener for an event exists at all.

  • #1932 3e0442a Thanks @bcakmakoglu! - Use toHandle from valid handle check as target handle in ongoing connections

  • #1938 fd785e2 Thanks @bcakmakoglu! - Prevent multi touch from aborting connections.

  • #1936 ff6b3d2 Thanks @bcakmakoglu! - Skip resize handler if node is not visible.

1.46.0 ​

Minor Changes ​

Patch Changes ​

1.45.1 ​

Patch Changes ​

1.45.0 ​

Minor Changes ​

  • #1869 4a2427d Thanks @bcakmakoglu! - Add domAttributes prop to nodes / edges that allows passing any sort of dom attributes to the node/edge wrappers (like aria attributes etc.).

1.44.0 ​

Minor Changes ​

1.43.2 ​

Patch Changes ​

1.43.1 ​

Patch Changes ​

1.43.0 ​

Minor Changes ​

Patch Changes ​

1.42.5 ​

Patch Changes ​

1.42.4 ​

Patch Changes ​

1.42.3 ​

Patch Changes ​

1.42.2 ​

Patch Changes ​

1.42.1 ​

Patch Changes ​

1.42.0 ​

Minor Changes ​

1.41.7 ​

Patch Changes ​

1.41.6 ​

Patch Changes ​

1.41.5 ​

Patch Changes ​

1.41.4 ​

Patch Changes ​

1.41.3 ​

Patch Changes ​

1.41.2 ​

Patch Changes ​

1.41.1 ​

Patch Changes ​

  • #1608 0581cd8 Thanks @bcakmakoglu! - Prevent overwriting width/height in node styles object with node.width/node.height if width/height already exist in the styles object. Fixes NodeResizer not working when initial size was passed to a node through node.width/node.height.

  • #1609 81a81fa Thanks @bcakmakoglu! - Prevent drag-click handler when multi selection is active.

1.41.0 ​

Minor Changes ​

Patch Changes ​

  • #1600 a3c72fe Thanks @bcakmakoglu! - Don't set user selection flags on pointer down, only setting them when pointer is moved to allow pane click events to occur when selectionKeyCode is true (i.e. selection on drag).

1.40.1 ​

Patch Changes ​

1.40.0 ​

Minor Changes ​

Patch Changes ​

1.39.3 ​

Patch Changes ​

1.39.2 ​

Patch Changes ​

1.39.1 ​

Patch Changes ​

1.39.0 ​

Minor Changes ​

  • #1542 de75620 Thanks @bcakmakoglu! - Add paneClickDistance option. Allows specifying the distance between mousedown and mouseup in which a click would still be registered (by default 0)

  • #1535 1a812f3 Thanks @bcakmakoglu! - Add autoPanSpeed prop. Allows specifying at what speed the pane moves when auto-panning via node-drag, selection-drag or connection-drag

Patch Changes ​

1.38.5 ​

Patch Changes ​

1.38.4 ​

Patch Changes ​

  • #1525 e8427cf Thanks @bcakmakoglu! - Prevent duplicate node click event by checking if drag was actually aborted before emitting node-click

1.38.3 ​

Patch Changes ​

  • #1522 ccca803 Thanks @bcakmakoglu! - Emit nodeClick event when a node is dragged without exceeding the node drag threshold (i.e. no visible movement has happened)

1.38.2 ​

Patch Changes ​

1.38.1 ​

Patch Changes ​

1.38.0 ​

Minor Changes ​

Patch Changes ​

1.37.1 ​

Patch Changes ​

1.37.0 ​

Minor Changes ​

1.36.0 ​

Minor Changes ​

Patch Changes ​

1.35.0 ​

Minor Changes ​

  • #1447 acd6069 Thanks @bcakmakoglu! - Return non-nullable edge from useEdge

  • #1447 acd6069 Thanks @bcakmakoglu! - Use node/edge id as the only dependency to render nodes/edges.

  • #1446 d8bdac1 Thanks @bcakmakoglu! - Remove visibility (hidden) check from getNodes & getEdges

  • #1440 a02b9a4 Thanks @bcakmakoglu! - Remove auto-generated hanle-ids and use null as the default handle id. If you were relying on handle-ids in your code but weren't assigning them explicitly, you'll might need to update your code to handle this change. By default, if you don't provide a handle-id, it will be null and the first handle of the corresponding type will be used.

  • #1446 d8bdac1 Thanks @bcakmakoglu! - Render null if edge is hidden

  • #1433 7547ade Thanks @bcakmakoglu! - Add edgeId to handle connection objects returned by useHandleConnections

  • #1450 d64efc6 Thanks @bcakmakoglu! - Replace internally nodeIds/edgeIds array with nodeLookup/edgeLookup map

  • #1445 64a5162 Thanks @bcakmakoglu! - Render null if node is hidden but render whole list of nodes regardless of visibility

Patch Changes ​

1.34.1 ​

Patch Changes ​

1.34.0 ​

Minor Changes ​

1.33.8 ​

Patch Changes ​

1.33.7 ​

Patch Changes ​

  • #1378 58d1a36 Thanks @bcakmakoglu! - Allow wheel events to bubble up to the user if the event is not caught and used by the viewport

1.33.6 ​

Patch Changes ​

1.33.5 ​

Patch Changes ​

1.33.4 ​

Patch Changes ​

  • #1346 376d0ac Thanks @bcakmakoglu! - Revert extending FlowEmits from separate interfaces for nodes and edges as it breaks event definitions for the actual component, causing warnings that the event was emitted by isn't defined.

1.33.3 ​

Patch Changes ​

  • #1343 89b76a1 Thanks @bcakmakoglu! - Use separate interfaces for Edge- and NodeEvents and extend FlowEmit interface from them. Fixes edge events overwriting node event definitions when types are created.

1.33.2 ​

Patch Changes ​

1.33.1 ​

Patch Changes ​

1.33.0 ​

Minor Changes ​

  • #1323 ed4ccf4 Thanks @bcakmakoglu! - Add node id and node type to return of useNodesData.

    ⚠️This is a small breaking change from the previous implementation!

    Previously you would only receive the data object back, now you will receive an object with the data and the node id and type.

    ts
    const nodesData = useNodesData(nodeIds);

// Previously
nodesData.forEach((data) => {
  // ...
});

// Now
nodesData.forEach(({ id, type, data }) => {
  // ...
});

Patch Changes ​

1.32.1 ​

Patch Changes ​

1.32.0 ​

Minor Changes ​

Patch Changes ​

1.31.0 ​

Minor Changes ​

  • #1271 1e60944 Thanks @github-actions! - Add useNodeId composable

    🧙 Example ​

    ts
    const nodeId = useNodeId();

console.log("nodeId", nodeId); // '1'

  • #1271 299408f Thanks @github-actions! - Add updateNode action

    🧙 Example ​

    ts
    const { updateNode } = useVueFlow();

updateNode("1", { position: { x: 100, y: 100 } });

// or using a function to update the node
updateNode("1", (node) => ({ ...node, position: { x: 100, y: 100 } }));

// passing options - `replace` will replace the node instead of merging it
updateNode(
  "1",
  { id: "1", label: "Node 1", position: { x: 100, y: 100 } },
  { replace: true }
);

  • #1271 eae2118 Thanks @github-actions! - Call onNodesInitialized whenever areNodesInitialized is true instead of only once

  • #1271 36ffa3f Thanks @github-actions! - Omit events in nodes and edges when returning them from toObject

  • #1271 85536ed Thanks @github-actions! - Add useHandleConnections composable

    🧙 Example ​

    ts
    const connections = useHandleConnections({
  // type of the handle you are looking for - accepts a `MaybeRefOrGetter<string>`
  type: "source",

  // the id of the handle you are looking for - accepts a `MaybeRefOrGetter<string | undefined> | undefined` [OPTIONAL]
  id: "a",

  // if not provided, the node id from the NodeIdContext is used - accepts a `MaybeRefOrGetter<string | undefined> | undefined`
  nodeId: "1",

  // a cb that is called when a new connection is added
  onConnect: (params) => {
    console.log("onConnect", params);
  },

  // a cb that is called when a connection is removed
  onDisconnect: (params) => {
    console.log("onDisconnect", params);
  },
});

watch(
  connections,
  (next) => {
    console.log("connections", next);
  },
  { immediate: true }
);

  • #1271 4bce8c9 Thanks @github-actions! - Find handle by id regardless of number of handles that exist

  • #1271 85536ed Thanks @github-actions! - Add connectionLookup to state

  • #1271 3b02809 Thanks @github-actions! - Add onInit hook and deprecate onPaneReady

  • #1271 299408f Thanks @github-actions! - Add updateNodeData action

    🧙 Example ​

    ts
    const { updateNodeData } = useVueFlow();

updateNodeData("1", { foo: "bar" });

// or using a function to update the data
updateNodeData("1", (data) => ({ ...data, foo: "bar" }));

// passing options - `replace` will replace the data instead of merging it
updateNodeData("1", { foo: "bar" }, { replace: true });

  • #1271 823956e Thanks @github-actions! - Add useNodesData composable

    🧙 Example ​

    Single node id ​

    ts
    const nodeId = "1";

const data = useNodesData(nodeId);

console.log(data.value); // '[{ /* ... */ }]

    Array of node ids ​

    ts
    const nodeIds = ["1", "2", "3"];

const data = useNodesData(nodeIds);

console.log(data.value); // '[{ /* ... */ }]

    Asserting data type ​

    ts
    import type { Node } from "@vue-flow/core";

interface Data {
  foo: string;
  bar: string;
}

type MyNode = Node<CustomNodeData>;

const nodeId = "1";

const data = useNodesData([nodeId], (node): node is MyNode => {
  return "foo" in node.data && "bar" in node.data;
});

console.log(data.value); // '[{ /* foo: string; bar: string */ }]

  • #1271 99fa4fd Thanks @github-actions! - Call fitViewOnInit when initial node dimensions are available

  • #1271 9f8607f Thanks @github-actions! - Deprecate events property on nodes and edges

  • #1278 ecff6f6 Thanks @bcakmakoglu! - Add error args to VueFlowError

  • #1271 3f60a80 Thanks @github-actions! - Replace Array.forEach loops with for...of

  • #1278 ecff6f6 Thanks @bcakmakoglu! - Export isErrorOfType typeguard to narrow the type of a VueFlowError and infer it's args

Patch Changes ​

  • #1295 4a5aa14 Thanks @bcakmakoglu! - When updating nodes or edges by overwriting the original array, update the nodes and edges in the state by using them as the target for Object.assign. This keeps reference in-tact and ensures reactivity when these objects are changed/updated

  • #1271 bbee266 Thanks @github-actions! - Update node dimensions on next tick

1.30.1 ​

Patch Changes ​

1.30.0 ​

Minor Changes ​

  • #1261 427bfac Thanks @bcakmakoglu! - Hide viewport until fitViewOnInitDone is true (if fitViewOnInit is not used, this value will automatically become true the first time node dimensions are set

  • #1261 427bfac Thanks @bcakmakoglu! - Emit paneReady event after 1ms timeout

1.29.2 ​

Patch Changes ​

  • #1257 31817d3 Thanks @bcakmakoglu! - Check if event.key or event.code exists before trying to match keyfilter against keys

1.29.1 ​

Patch Changes ​

  • #1252 734d2ba Thanks @bcakmakoglu! - Watch shouldPanOnDrag & shouldPanOnScroll to determine whether listeners should be bound or not

1.29.0 ​

Minor Changes ​

Patch Changes ​

1.28.0 ​

Minor Changes ​

1.27.1 ​

Patch Changes ​

1.27.0 ​

Minor Changes ​

Patch Changes ​

1.26.0 ​

Minor Changes ​

Patch Changes ​

  • #1196 1aa69c59 Thanks @bcakmakoglu! - Use correct prop value when prop watcher is executed instead of using prop key as value

1.25.3 ​

Patch Changes ​

1.25.2 ​

Patch Changes ​

  • #1178 29c01f42 Thanks @bcakmakoglu! - Revert importing types from vue instead of vueuse/core as it causes handle position to be messed up

1.25.1 ​

Patch Changes ​

1.25.0 ​

Minor Changes ​

1.24.2 ​

Patch Changes ​

1.24.1 ​

Patch Changes ​

1.24.0 ​

Minor Changes ​

  • #1149 d11e59f1 Thanks @bcakmakoglu! - Allow adding edges with missing source or target node to state but don't render them unless source and target exist

  • #1146 6f93bbbb Thanks @bcakmakoglu! - Use viewport and vueflow refs directly from store instead of assigning valuesafter mount

  • #1128 0ff65bf2 Thanks @github-actions! - Use nodes from state as the default third arg for getIntersectingNodes

Patch Changes ​

1.23.0 ​

Minor Changes ​

Patch Changes ​

1.22.3 ​

Patch Changes ​

1.22.2 ​

Patch Changes ​

1.22.1 ​

Patch Changes ​

1.22.0 ​

Minor Changes ​

Patch Changes ​

  • #1034 080d8f41 Thanks @bcakmakoglu! - Do not wait for the nodes initialized hook to trigger for viewport helper to become ready

  • #1034 5e1802ca Thanks @bcakmakoglu! - Destroy state when the creating scope is disposed.

  • #1034 afd1d235 Thanks @bcakmakoglu! - Watch applyDefault state in useVueFlow scope instead of component scope otherwise adding nodes/edges to the state is impossible until the VueFlow component has mounted unless the changes handlers are explicitly bound by the user.

1.21.3 ​

Patch Changes ​

1.21.2 ​

Patch Changes ​

1.21.1 ​

Patch Changes ​

1.21.0 ​

Minor Changes ​

Patch Changes ​

1.20.2 ​

Patch Changes ​

1.20.1 ​

Patch Changes ​

1.20.0 ​

Minor Changes ​

Patch Changes ​

1.19.4 ​

Patch Changes ​

1.19.3 ​

Patch Changes ​

1.19.2 ​

Patch Changes ​

1.19.1 ​

Patch Changes ​

  • #883 ae7bd5a Thanks @bcakmakoglu! - Remove defining css var in node type and use the default color of nodes as fallback for css var value

  • #876 e3de507 Thanks @bcakmakoglu! - Set default edge options prior to setting elements so the options are applied on initial render of edges as well.

1.19.0 ​

Minor Changes ​

Patch Changes ​

1.18.2 ​

Patch Changes ​

1.18.1 ​

Patch Changes ​

1.18.0 ​

Minor Changes ​

1.17.6 ​

Patch Changes ​

  • #833 02125c1 Thanks @bcakmakoglu! - Prevent flickering of graph by hiding transformation pane until next frame

  • #835 58d75b0 Thanks @bcakmakoglu! - Reset node and edge state before the rest of the state when calling $reset to avoid throwing error

1.17.5 ​

Patch Changes ​

1.17.4 ​

Patch Changes ​

1.17.3 ​

Patch Changes ​

1.17.2 ​

Patch 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 ​

    ts
    useVueFlow({
  autoPanOnNodeDrag: true,
  autoPanOnConnect: true,
});
    vue
    <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 ​

    js
    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 ​

    vue
    <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
    js
    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.
    js
    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
    js
    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
    vue
    <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
    vue
    <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:

    vue
    <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:

    js
    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
    vue
    <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:

    vue
    <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:

    vue
    <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:

    js
    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:

    js
    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:

    js
    import { VueFlow, Background, MiniMap, Controls } from "@braks/vue-flow";

    After

    js
    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