WeaveEllipseNode

Overview

The WeaveEllipseNode class represents a basic ellipse shape within the Weave.js canvas.

Built on top of Konva’s Ellipse class shape under the hood, the WeaveEllipseNode offers a simple yet powerful primitive that supports full interaction, styling, and real-time synchronization.

Ellipse nodes support an optional text label that is displayed centred inside the shape. The label can be edited interactively by double-clicking the ellipse while it is selected. All label appearance properties (font, colour, alignment, padding, …) are configurable via the label* props described below.

The class extends the WeaveNode class

Type

This node nodeType property value is ellipse.

Import

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

Instantiation

new WeaveEllipseNode(params?: WeaveEllipseNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveEllipseProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveEllipseNodeParams = {
  config: Partial<WeaveEllipseProperties>;
};

type WeaveShapeLabelProps = {
  labelText?: string;
  labelFontFamily?: string;
  labelFontSize?: number;
  labelFontStyle?: string;
  labelFontVariant?: string;
  labelTextDecoration?: string;
  labelFill?: string;
  labelAlign?: string;
  labelVerticalAlign?: string;
  labelLetterSpacing?: number;
  labelLineHeight?: number;
  labelPaddingX?: number;
  labelPaddingY?: number;
};

Parameters

For WeaveEllipseNodeParams:

Prop	Type	Default
`config`	`Partial<WeaveEllipseProperties>`	-

For WeaveEllipseProperties:

Prop	Type	Default
`transform?`	`object`	`check default values`

Label properties

The following props control the optional text label rendered inside the ellipse. They map directly to WeaveShapeLabelProps and are all optional — omit them to use the defaults.

Prop	Type	Default
`labelPaddingY?`	`number`	`8`
`labelPaddingX?`	`number`	`8`
`labelLineHeight?`	`number`	`1`
`labelLetterSpacing?`	`number`	`0`
`labelVerticalAlign?`	`string`	`"middle"`
`labelAlign?`	`string`	`"center"`
`labelFill?`	`string`	`"#000000"`
`labelTextDecoration?`	`string`	`""`
`labelFontVariant?`	`string`	`"normal"`
`labelFontStyle?`	`string`	`"normal"`
`labelFontSize?`	`number`	`14`
`labelFontFamily?`	`string`	`"Arial, sans-serif"`
`labelText?`	`string`	`""`

Default values

const WEAVE_TRANSFORMER_ANCHORS = {
  ["TOP_LEFT"]: "top-left",
  ["TOP_CENTER"]: "top-center",
  ["TOP_RIGHT"]: "top-right",
  ["MIDDLE_RIGHT"]: "middle-right",
  ["MIDDLE_LEFT"]: "middle-left",
  ["BOTTOM_LEFT"]: "bottom-left",
  ["BOTTOM_CENTER"]: "bottom-center",
  ["BOTTOM_RIGHT"]: "bottom-right",
};

const WEAVE_DEFAULT_ENABLED_ANCHORS: string[] = Object.values(
  WEAVE_TRANSFORMER_ANCHORS
);

const WEAVE_DEFAULT_TRANSFORM_PROPERTIES: WeaveNodeTransformerProperties = {
  rotateEnabled: true,
  resizeEnabled: true,
  enabledAnchors: WEAVE_DEFAULT_ENABLED_ANCHORS,
  borderStrokeWidth: 3,
  padding: 0,
};

const WEAVE_SHAPE_LABEL_DEFAULTS: WeaveShapeLabelProps = {
  labelText: "",
  labelFontFamily: "Arial, sans-serif",
  labelFontSize: 14,
  labelFontStyle: "normal",
  labelFontVariant: "normal",
  labelTextDecoration: "",
  labelFill: "#000000",
  labelAlign: "center",
  labelVerticalAlign: "middle",
  labelLetterSpacing: 0,
  labelLineHeight: 1,
  labelPaddingX: 8,
  labelPaddingY: 8,
};

WeaveEllipseNode

On this page