WeaveNodesSelectionPlugin

Overview

The WeaveNodesSelectionPlugin class that provides node selection capabilities on the canvas. It allows users to click to select individual nodes, multi-select with modifier keys, or drag-select multiple elements at once using a selection rectangle (marquee).

Selection is a critical foundation for enabling further interactions like moving, grouping, deleting, copying, or applying bulk actions on nodes.

The class extends the WeavePlugin class

Name

This plugin name property value is nodesSelection.

Import

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

Instantiation

new WeaveNodesSelectionPlugin(params: WeaveNodesSelectionPluginParams);

TypeScript types

type WeaveElementAttributes = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  [key: string]: any;
  id?: string;
  nodeType?: string;
  children?: WeaveStateElement[];
};

type WeaveStateElement = {
  key: string;
  type: string;
  props: WeaveElementAttributes;
};

type WeaveSelection = {
  instance: Konva.Shape | Konva.Group;
  node: WeaveStateElement;
};

type WeaveNodesSelectionPluginOnSelectionStateEvent = boolean;
type WeaveNodesSelectionPluginOnNodesChangeEvent = WeaveSelection[];
type WeaveNodesSelectionPluginOnStageSelectionEvent = undefined;

type WeaveNodesSelectionTransformationsConfig = {
  singleSelection: {
    enabled: boolean;
  };
  multipleSelection: {
    enabled: boolean;
  };
};

type WeaveNodesSelectionConfig = {
  transformer: Konva.TransformerConfig;
  transformations: WeaveNodesSelectionTransformationsConfig;
};

type WeaveNodesSelectionPluginConfig = Partial<WeaveNodesSelectionConfig>;

type WeaveNodesSelectionPluginParams = {
  config?: WeaveNodesSelectionPluginConfig;
};

Parameters

For WeaveNodesSelectionPluginParams:

Prop	Type	Default
`config?`	`WeaveNodesSelectionPluginConfig`	-

For WeaveNodesSelectionPluginConfig:

Prop	Type	Default
`transformations?`	`WeaveNodesSelectionTransformationsConfig`	-
`transformer?`	`Konva.TransformerConfig`	-

Methods

getTransformer

getTransformer(): Konva.Transformer

This method returns the underlying Transformer of the plugin.

setSelectedNodes

setSelectedNodes(nodes: Konva.Node[]): void

This method set the specified nodes as selected on the underlying Transformer of the plugin.

getSelectedNodes

getSelectedNodes(): (Konva.Group | Konva.Shape)[]

This method returns the selected nodes from the underlying Transformer of the plugin.

getSelectedNodesExtended

getSelectedNodesExtended(): WeaveSelection[]

This method returns the selected nodes but using the WeaveSelection format from the underlying Transformer of the plugin.

selectAll

selectAll(): void

This method selects all nodes using the underlying Transformer of the plugin.

selectNone

selectNone(): void

This method selects no nodes (0) using the underlying Transformer of the plugin.

removeSelectedNodes

removeSelectedNodes(): void

This method removes the selected nodes of the underlying Transformer of the plugin.

Events

onSelectionState

onSelectionState: WeaveNodesSelectionPluginOnSelectionStateEvent;

The onSelectionState event is called when the user is selecting (true) or not selecting (false).

onNodesChange

onNodesChange: WeaveNodesSelectionPluginOnNodesChangeEvent;

The onNodesChange event is called when the selected nodes changed.

onStageSelection

onStageSelection: WeaveNodesSelectionPluginOnStageSelectionEvent;

The onStageSelection event is called when an user selected the stage, meaning there is no nodes selected.

WeaveNodesSelectionPlugin

On this page