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

WeaveMeasureNode

Measure node API Reference

Overview

The WeaveMeasureNode class represents visually the distance (scaled) between two points on a Weave.js canvas.

In order to render a scaled distance from pixels to real distance on the real world, it needs:

  • A measure unit, e.g. meters, centimeters, milimeters, or inches.

  • A reference measure. A distance you previously know based on the measure unit.

  • A reference distance. The distance between two points on the canvas that represent the reference

The class extends the WeaveNode class

Type

This node nodeType property value is measure.

Import

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

Instantiation

new WeaveMeasureNode(params?: WeaveMeasureNodeParams);

TypeScript types

type WeaveMeasureNodeProperties = {
  style: {
    separationLine: {
      padding: number;
      strokeWidth: number;
      dash: number[];
      stroke: string;
    };
    text: {
      padding: number;
      fontSize: number;
      fontFamily: string;
      fill: string;
    };
    intersectionCircle: {
      radius: number;
      fill: string;
    };
    measureLine: {
      stroke: string;
      dash: number[];
      strokeWidth: number;
    };
    handler: {
      noSpaceSeparationMultiplier: number;
      spaceSeparationMultiplier: number;
    };
  };
};

type WeaveMeasureNodeParams = {
  config: DeepPartial<WeaveMeasureNodeProperties>;
};

Parameters

For WeaveMeasureNodeParams:

Property Type Required Description

config

Partial<WeaveMeasureProperties>

Required

Config parameters for the node.

For WeaveMeasureProperties:

Property Type Required Default Description

style.separationLine.padding

number

0

Defines the padding (in px) from the separator end to put the measure line

style.separationLine.strokeWidth

number

1

Width of the separation line

style.separationLine.dash

number[]

[]

Defines the dashing properties of the separation line as Konva does

style.separationLine.stroke

string

#FF3366

Defines the line color

style.text.padding

number

10

Defines the padding from the measure line to the measure text

style.text.frontSize

number

14

Defines the measure text font size

style.text.frontFamily

string

monospace

Defines the measure text font family

style.text.fill

string

#FF3366

Defines the measure text color

style.intersectionCircle.radius

number

3

Defines the intersection circle between the separator line and the measure line radius

style.intersectionCircle.fill

string

#FF3366

Defines the intersection circle between the separator line and the measure line color

style.measureLine.stroke

string

#FF3366

Defines the measure line color

style.measureLine.dash

string

#FF3366

Defines the dashing properties of the measure line as Konva does

style.measureLine.strokeWidth

number

1

Width of the measure line

style.handler.noSpaceSeparationMultiplier

number

2.5

Multiplier of separation for the separation handler when the text doesn’t fit on the measure line space

style.handler.spaceSeparationMultiplier

number

1.5

Multiplier of separation for the separation handler when the text fit on the measure line space

Default values

const WEAVE_MEASURE_NODE_DEFAULT_CONFIG: WeaveMeasureNodeProperties = {
  style: {
    separationLine: {
      padding: 0,
      strokeWidth: 1,
      dash: [],
      stroke: "#FF3366",
    },
    text: {
      padding: 10,
      fontSize: 14,
      fontFamily: "monospace",
      fill: "#FF3366",
    },
    intersectionCircle: {
      radius: 3,
      fill: "#FF3366",
    },
    measureLine: {
      stroke: "#FF3366",
      dash: [4, 4],
      strokeWidth: 1,
    },
    handler: {
      noSpaceSeparationMultiplier: 2.5,
      spaceSeparationMultiplier: 1.5,
    },
  },
};