Context Menu

Introduction

This plugin adds custom right-click menus to the canvas, enabling users to access context-specific actions—like deleting nodes, duplicating elements, or triggering custom workflows. It enhances usability by offering quick access to relevant tools based on the current selection or interaction.

Fully customizable and extensible, making it easy to tailor the experience to your application's needs.

UI Agnostic

This plugin only returns metadata that allows developers to render a context menu on the room, it doesn't provide an UI.

Usage

Import the Plugin

Start by importing the plugin:

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

Register the Plugin

Then register the plugin on the Weave class instance.

const instance = new Weave({
  ...
  plugins: [
    ...,
    new WeaveContextMenuPlugin(), 
  ]
})

Use the plugin

Once the plugin is registered you can add a listener with the Weave instance Events API that listen to the event named onNodeContextMenu.

// Import types
import type {
  WeaveContextMenuPlugin,
  WeaveStageContextMenuPluginOnNodeContextMenuEvent,
} from "@inditextech/weave-sdk";

instance.addEventListener<WeaveConnectedUsersChangeEvent>(
  "onNodeContextMenu",
  ({
    selection,
    point,
    visible,
  }: WeaveStageContextMenuPluginOnNodeContextMenuEvent) => {
    // Returns what is selected, the point where the user press the mouse button or
    // touched and if is visible or not, useful when for example the user touches
    // the stage to close the contextual menu.
    console.log({
      selection,
      point,
      visible,
    });
  }
);

With this callback you can trigger your own Context Menu UI.