Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1
↑↓ navigate · ↵ select · esc close
Weave.js
Weave.js
prerelease Prerelease 5.2.2 Latest 5.2.1

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:

Property Type Required Description

config

Partial<WeaveStrokeToolActionProperties>

Required

Config parameters for the tool.

For WeaveStrokeToolActionProperties:

Property Type Required Default Description

snapAngles.angles

number

10

Array of angles (in degrees) to snap the line to when shift is pressed.

snapAngles.activateThreshold

number

5

Activation threshold for the angle snapping utility.

snapAngles.releaseThreshold

number

10

Release threshold for the angle snapping utility.

Default values

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