Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

Connector Tool

Add connectors to the canvas

Connector Tool action on use on the Weave.js showcase

Introduction

This action enables users to create new connector nodes on the canvas.

Dependencies

This action needs registered on the Weave instance the following element:

Usage

Import the Action

Start by importing the action:

import { WeaveConnectorToolAction } from "@inditextech/weave-sdk";

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveConnectorToolAction(), (1)
  ]
})
1 Added in this step.

Setup the action trigger

Setup on a button or any element on the UI the user can interact with on the action event:

instance.triggerAction("connectorTool");

For example on a button on React:

import React from "react";
import { useWeave } from "@inditextech/weave-react";

const MyConnectorToolTriggerComponent = () => {
  const instance = useWeave((state) => state.instance);

  const triggerTool = React.useCallback(() => {
    instance.triggerAction("connectorTool");
  }, [instance]);

  return <button onClick={triggerTool}>Connector Tool</button>;
};

Trigger the action

Finally a final user trigger the UI element that launches the action.

When active the user can follow this steps:

  • Hover on a node to see their anchor points.

  • Click on an anchor point, it will define the start point for the connector.

  • Click on another anchor point, it will define the end point for the connector.

Then the connector node is added to the canvas as a fully functional node. This action integrates seamlessly with Weave.js’s real-time state system, ensuring the new element appears instantly for all connected users.