Polygon Tool

Introduction

This action enables users to create new polygon nodes on the canvas by clicking or touching it. The shape drawn is determined by a preset — one of the six built-in polygon shapes.

Dependencies

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

Polygon node

Usage

Import the Action

Start by importing the action:

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

Register the Action

Then register the action on the Weave class instance.

const instance = new Weave({
  ...
  actions: [
    ...,
    new WeavePolygonToolAction(), 
  ]
})

You can pass an optional preset ID to the constructor to set the default preset:

new WeavePolygonToolAction("hexagon")

Available preset IDs: triangle, diamond, pentagon (default), hexagon, octagon, decagon.

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("polygonTool");

You can also pass a presetId at trigger time to override the constructor default:

instance.triggerAction("polygonTool", { presetId: "hexagon" });

For example on a button on React:

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

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

  const triggerTool = React.useCallback(() => {
    instance.triggerAction("polygonTool", { presetId: "hexagon" });
  }, [instance]);

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

Trigger the action

Finally a user triggers the UI element that launches the action.

When active the user can:

Click on the canvas, it will place the selected preset polygon at the cursor position with its default size.
Touch on the canvas, it will place the selected preset polygon at the touch position with its default size.

Once placed, the polygon 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.