Align Nodes Tool
Select nodes and align among them
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(),
]
})
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.