Stage Drop Area

Introduction

This plugin enables drag-and-drop support on the canvas, allowing users to drop elements—such as shapes, files, or custom components—directly onto the Stage. It captures drop events, calculates drop positions, and can trigger custom Actions or workflows based on the dropped content.

This plugin is ideal for building intuitive drag-to-create interfaces, asset import features, or external integrations (e.g., dropping images or nodes from a sidebar). It integrates smoothly with Weave.js's action system for precise and flexible drop handling.

Usage

Import the Plugin

Start by importing the plugin:

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

Register the Plugin

Then register the plugin on the Weave class instance.

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

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 onStageDrop.

// Import types
import type { WeaveStageDropPluginOnStageDropEvent } from "@inditextech/weave-sdk";

instance.addEventListener<WeaveStageDropPluginOnStageDropEvent>(
  "onStageDrop",
  () => {
    console.log("user dropped something");
  }
);

With this callback you can know when the users drops something to the stage, now to specifically know what the user dropped, you can for example, on the onDragStart event define on the window object (being global) a property with metadata of the element that started dragging and retrieve / perform and action / clean it on the callback.