Align Nodes Tool | Weave.js

Align Nodes Tool action on use on the Weave.js showcase

Introduction

This action enables users to users to align selected nodes vertically or horizontally.

Dependencies

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

Nodes selection plugin

Usage

Import the Action

Start by importing the action:

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

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeaveAlignNodesToolAction(), (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("alignNodesTool");

For example on a button on React:

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

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

  const alignNodesTool = React.useCallback(() => {
    instance.triggerAction("alignNodesTool", {
      alignTo: ALIGN_NODES_ALIGN_TO.TOP_VERTICAL,
    });
  }, [instance]);

  return <button onClick={alignNodesTool}>Align selected nodes to top</button>;
};

Trigger the action

Finally a final user:

Select some elements on the stage.
trigger the UI element that launches the action.

When the tool is triggered automatically the selected nodes will be aligned according to the passed params.