bcakmakoglu/vue-flow v1.31.0 on GitHub

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