Stroke Tool

Stroke Tool action on use on the Weave.js showcase

Introduction

This action allows users to draw a single-segment line on the canvas by click-and-drag. Also when the user press shift, the line is snapped to a defined set of angles.

Each line is captured as a StrokeV2 Node with configurable styling, and is instantly synchronized across all connected users. Support to define the stroke tips are possible.

Dependencies

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

Stroke Single node

Usage

Import the Action

Start by importing the action:

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

Register the Action

Then register the action on the Weave class instance.

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

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

For example on a button on React:

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

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

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

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

Trigger the action

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

When active the user will follow this steps:

Click or Touch on the canvas and drag to define the line.
Release Click or Touch to add the defined line to the canvas.

You can also press Shift to snap the line to a set of predefined angles.

This action integrates seamlessly with Weave.js's real-time state system, ensuring the new element appears instantly for all connected users.