Weave.js

WeaveStrokeToolAction

Add a single segment stroke to the canvas

Overview

The WeaveStrokeToolAction class that allows users to draw a precise, vector-based line by click-and-drag to define the line.

The line becomes a WeaveStrokeSingleNode, synced in real time across all collaborators.

The class extends the WeaveAction class.

Name

This action name property value is strokeTool.

Aliases

This action name property value is arrowTool.

Import

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

Instantiation

new WeaveStrokeToolAction(params?: WeaveStrokeToolActionParams);

TypeScript types

type WeaveStrokeToolActionStateKeys = keyof typeof WEAVE_STROKE_TOOL_STATE;
type WeaveStrokeToolActionState =
  (typeof WEAVE_STROKE_TOOL_STATE)[WeaveStrokeToolActionStateKeys];

type WeaveStrokeToolActionProperties = {
  snapAngles: {
    angles: number[]; // Angles for snapping in degrees
    activateThreshold: number;
    releaseThreshold: number;
  };
};

type WeaveStrokeToolActionParams = {
  config: Partial<WeaveStrokeToolActionProperties>;
};

type WeaveStrokeToolActionOnAddingEvent = { actionName: string };
type WeaveStrokeToolActionOnAddedEvent = { actionName: string };

Parameters

For WeaveStrokeToolActionParams:

PropTypeDefault
config
Partial<WeaveStrokeToolActionProperties>
-

For WeaveStrokeToolActionProperties:

PropTypeDefault
snapAngles.releaseThreshold?
number
10
snapAngles.activateThreshold?
number
5
snapAngles.angles?
number
10

Default values

const WEAVE_STROKE_TOOL_DEFAULT_CONFIG = {
  snapAngles: {
    angles: [0, 45, 90, 135, 180, 225, 270, 315],
    activateThreshold: 5,
    releaseThreshold: 10,
  },
};