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 WeaveNodesSelectionPluginOnGroupContextChangeEvent = string | null;

type WeaveNodesSelectionOnSelectionParams = {
  resizeEnabled: boolean;
  rotateEnabled: boolean;
  enabledAnchors: string[];
};

type WeaveNodesSelectionBehaviorsConfig = {
  singleSelection: {
    enabled: boolean;
  };
  multipleSelection: {
    enabled: boolean;
  };
  onMultipleSelection?: (
    selectedNodes: Konva.Node[]
  ) => Partial<WeaveNodesSelectionOnSelectionParams>;
};

type WeaveNodesSelectionPanningOnSelectionConfig = {
  edgeThreshold: number;
  minScrollSpeed: number;
  maxScrollSpeed: number;
};

type WeaveNodesSelectionConfig = {
  selection: Konva.TransformerConfig;
  hover: Konva.TransformerConfig;
  selectionArea: Konva.RectConfig;
  panningWhenSelection: WeaveNodesSelectionPanningOnSelectionConfig;
  behaviors: WeaveNodesSelectionBehaviorsConfig;
};

type WeaveNodesSelectionPluginConfig = Partial<WeaveNodesSelectionConfig>;

type WeaveNodesSelectionPluginParams = {
  config?: WeaveNodesSelectionPluginConfig;
};

Parameters

For WeaveNodesSelectionPluginParams:

Prop	Type	Default
`config?`	`WeaveNodesSelectionPluginConfig`	-

For WeaveNodesSelectionPluginConfig:

Prop	Type	Default
`behaviors?`	`WeaveNodesSelectionBehaviorsConfig`	-
`panningWhenSelection?`	`WeaveNodesSelectionPanningOnSelectionConfig`	-
`selectionArea?`	`Konva.RectConfig`	-
`hover?`	`Konva.TransformerConfig`	-
`selection?`	`Konva.TransformerConfig`	-

For WeaveNodesSelectionPanningOnSelectionConfig:

Prop	Type	Default
`maxScrollSpeed?`	`number`	`15`
`minScrollSpeed?`	`number`	`1`
`edgeThreshold?`	`number`	`50`

For WeaveNodesSelectionBehaviorsConfig:

Prop	Type	Default
`onMultipleSelection?`	`(selectedNodes: Konva.Node[]) => Partial<WeaveNodesSelectionOnSelectionParams>`	-
`multipleSelection.enabled?`	`boolean`	`false`
`singleSelection.enabled?`	`boolean`	`true`

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.

Group context

getActiveGroupContext

getActiveGroupContext(): string | null

This method returns the ID of the group currently in edit context, or null if no group context is active.

enterGroupContext

enterGroupContext(groupId: string): void

This method enters edit context for the group with the given ID. Direct children of the group become individually draggable and the current selection is cleared. An onGroupContextChange event is emitted with the groupId.

exitGroupContext

exitGroupContext(): void

This method exits the active group edit context, restoring children to their default non-draggable state and clearing the selection. An onGroupContextChange event is emitted with null.

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.

onGroupContextChange

onGroupContextChange: WeaveNodesSelectionPluginOnGroupContextChangeEvent;

The onGroupContextChange event is called when the active group edit context changes. The payload is the groupId of the group that was entered, or null when the context was exited.

WeaveNodesSelectionPlugin

On this page