WeaveStrokeNode | Weave.js

Overview

The WeaveStrokeNode class represents a multi-point continuous line or path on the Weave.js canvas. It is a versatile and essential node type for building tools like freehand drawing.

Built on top of Konva’s Shape class shape under the hood, the WeaveStrokeNode offers full control over the line’s geometry, style, and behavior—all synchronized in real time across users.

The class extends the WeaveNode class

Type

This node nodeType property value is stroke.

Import

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

Instantiation

new WeaveStrokeNode(params?: WeaveStrokeNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveStrokeProperties = {
  splineResolution: number; // Minimum subdivisions per curved spline span
  splineTargetEdge: number; // Target rendered edge length, in canvas units
  splineMaxSteps: number; // Upper bound on subdivisions for a single span
  resamplingSpacing: number; // Spacing for resampling points
  isEraser?: boolean; // Whether the stroke is an eraser
  transform?: WeaveNodeTransformerProperties;
};

type WeaveStrokeNodeParams = {
  config: Partial<WeaveStrokeProperties>;
};

type WeaveStrokePoint = {
  x: number;
  y: number;
  pressure: number;
};

Parameters

For WeaveStrokeNodeParams:

Property Type Required Description

Property	Type	Required	Description
`config`	`Partial<WeaveStrokeProperties>`	Required	Config parameters for the node.

config

Partial<WeaveStrokeProperties>

Required

Config parameters for the node.

For WeaveStrokeProperties:

Property Type Required Default Description

Property	Type	Default	Description
`splineResolution`	`number`	`8`	Minimum number of subdivisions used for a curved span of the smoothed curve. Longer spans are subdivided further, by arc length, so that rendered smoothness does not depend on how far apart the recorded points happen to be.
`splineTargetEdge`	`number`	`1`	Target length, in canvas units, of a single rendered edge. Lower values produce a smoother silhouette at the cost of proportionally more rendered vertices.
`splineMaxSteps`	`number`	`48`	Upper bound on the subdivisions used for one span, so an unusually long span cannot inflate the vertex count without limit.
`resamplingSpacing`	`number`	`2`	Minimum spacing between the control points fed to the spline. Applied after simplification, so it mainly guards against duplicate and near-duplicate samples.
`isEraser`	`boolean`	`false`	Whether the stroke behaves as an eraser.

splineResolution

number

8

Minimum number of subdivisions used for a curved span of the smoothed curve. Longer spans are subdivided further, by arc length, so that rendered smoothness does not depend on how far apart the recorded points happen to be.

splineTargetEdge

number

1

Target length, in canvas units, of a single rendered edge. Lower values produce a smoother silhouette at the cost of proportionally more rendered vertices.

splineMaxSteps

number

48

Upper bound on the subdivisions used for one span, so an unusually long span cannot inflate the vertex count without limit.

resamplingSpacing

number

2

Minimum spacing between the control points fed to the spline. Applied after simplification, so it mainly guards against duplicate and near-duplicate samples.

isEraser

boolean

false

Whether the stroke behaves as an eraser.

splineResolution and resamplingSpacing were previously accepted but ignored — the renderer used hardcoded values regardless. They now take effect, so a node that passed non-default values will render differently than it did before.

Default values

const WEAVE_STROKE_NODE_DEFAULT_CONFIG = {
  splineResolution: 8,
  splineTargetEdge: 1,
  splineMaxSteps: 48,
  resamplingSpacing: 2,
  isEraser: false,
};