v1.31.0

What's Changed

Minor Changes

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

  🧙 Example

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

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

  🧙 Example

  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

  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

  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

  const nodeId = "1";
  
  const data = useNodesData(nodeId);
  
  console.log(data.value); // '[{ /* ... */ }]

  Array of node ids

  const nodeIds = ["1", "2", "3"];
  
  const data = useNodesData(nodeIds);
  
  console.log(data.value); // '[{ /* ... */ }]

  Asserting data type

  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

Full Changelog: v1.30.1...v1.31.0

v1.30.1

What's Changed

Patch Changes

• #1266 c571dde Thanks @bcakmakoglu! - Check if values are numeric in isRect instead of checking for truthiness of values

Full Changelog: v1.30.0...v1.30.1

v1.30.0

What's Changed

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

Full Changelog: v1.29.2...v1.30.0

@vue-flow/[email protected]

What's Changed

Patch Changes

• #1261 cff86ee Thanks @bcakmakoglu! - Set full width on control button svgs

v1.29.2

What's Changed

Patch Changes

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

Full Changelog: v1.29.1...v1.29.2

v1.29.1

What's Changed

Patch Changes

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

Full Changelog: v1.29.0...v1.29.1

v1.29.0

What's Changed

Minor Changes

• #1237 16c7d32 Thanks @bcakmakoglu! - Expose handleClick and handlePointerDown from handle components

• #1238 dd4cbe0 Thanks @bcakmakoglu! - Add useConnection composable for easy access of current connection params

Patch Changes

• #1243 b5e77a4 Thanks @bcakmakoglu! - Pass vueflow id to getMarkerId in connection line component

• #1236 be15b5a Thanks @github-actions! - Add default event handler when no handlers for a given event exist anymore

• #1250 f3c786f Thanks @bcakmakoglu! - Allow panning on scroll when selection is active

• #1236 d46ac3a Thanks @github-actions! - Merge connection line styles with options

• #1250 b71754f Thanks @bcakmakoglu! - Return false for boolean key filter and set the isPressed ref to whatever the keyFilter would be (true/false)

• #1250 4109cf1 Thanks @bcakmakoglu! - Await fitView before emitting pane-ready

• #1236 d46ac3a Thanks @github-actions! - Add fallback for connection line type (bezier as default)

⚠️ NOTICE ⚠️

Handle styles have been changed to not use fixed top/left values to position handles.
This can be a breaking change if you were repositioning handles via CSS!

Full Changelog: v1.28.0...v1.29.0

@vue-flow/[email protected]

What's Changed

Minor Changes

• #1249 a8bdb93 Thanks @bcakmakoglu! - Inherit attrs in minimap

v1.28.0

What's Changed

Minor Changes

• #1216 845d591 Thanks @bcakmakoglu! - Add source and target handle ids to removal change of edges.

@vue-flow/[email protected]

What's Changed

Minor Changes

• #1216 80924fa Thanks @bcakmakoglu! - Add minimap slot types

• #1216 2aad7c5 Thanks @bcakmakoglu! - Add MiniMapNodeEmits interface