v1.33.4

What's Changed

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.

Full Changelog: v1.32.1...v1.33.4

v1.33.3

What's Changed

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.

Full Changelog: v1.32.1...v1.33.3

v1.33.2

What's Changed

Patch Changes

• #1338 f3c09ce Thanks @bcakmakoglu! - Use nullish check to fallback to default center values in getSmoothstepPath

• #1339 eb20a0f Thanks @bcakmakoglu! - Check if node dimensions exist in useNodesInitialized

• #1335 ed5d104 Thanks @bcakmakoglu! - Remove ref prop from BaseEdge

Full Changelog: v1.32.1...v1.33.2

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