v1.33.1

What's Changed

Patch Changes

• #1329 9b5d496 Thanks @bcakmakoglu! - Correct return type of useNodesData

Full Changelog: v1.33.0...v1.33.1

v1.33.0

What's Changed

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.

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

Patch Changes

• #1326 78a604c Thanks @bcakmakoglu! - Use default cursor for nodes and use grab cursor if node is draggable

• #1324 c964220 Thanks @bcakmakoglu! - Prevent esc keypress triggers when keyboard a11y is disabled

New Contributors

• @Robin-Hoodie made their first contribution in #1321

Full Changelog: v1.32.1...v1.33.0

v1.32.1

What's Changed

Patch Changes

• #1314 14c4253 Thanks @bcakmakoglu! - Correct smoothstep edge pathing

Full Changelog: v1.32.0...v1.32.1

v1.32.0

What's Changed

Minor Changes

• #1301 1c8d15e Thanks @github-actions! - Use data obj in default nodes to get label

• #1307 290bca3 Thanks @bcakmakoglu! - Add edgeId to useHandleConnections return value

Patch Changes

• #1301 1c8d15e Thanks @github-actions! - Update composables jsdocs

• #1313 ce98113 Thanks @bcakmakoglu! - Wrap edge marker urls with single quotes to allow for css vars as color

New Contributors

• @Lehoczky made their first contribution in #1311

Full Changelog: v1.31.0...v1.32.0

@vue-flow/background@1.3.0

chore: update CHANGELOG.md

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/controls@1.1.1

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