WeaveImageToolAction

Overview

The WeaveImageToolAction class that enables users to insert image nodes into the canvas. It provides an intuitive way to add visual content—either by selecting an image file, dragging and dropping, or integrating with an image picker—allowing users to enhance their collaborative workspace with rich media.

Each interaction results in the creation of a WeaveImageNode, which can be resized, moved, and synchronized across all connected users.

The class extends the WeaveAction class.

Name

This action name property value is imageTool.

Import

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

Instantiation

new WeaveImageToolAction();

TypeScript types

type WeaveImageToolActionLoadFromKeys = keyof typeof IMAGE_TOOL_LOAD_FROM;
type WeaveImageToolActionLoadFrom =
  (typeof IMAGE_TOOL_LOAD_FROM)[WeaveImageToolActionLoadFromKeys];

type WeaveImageToolActionStateKeys = keyof typeof IMAGE_TOOL_STATE;
type WeaveImageToolActionState =
  (typeof IMAGE_TOOL_STATE)[WeaveImageToolActionStateKeys];

type WeaveImageToolActionOnStartLoadImageEvent = undefined;
type WeaveImageToolActionOnEndLoadImageEvent = Error | undefined;
type WeaveImageToolActionOnAddingEvent = { imageURL: string };
type WeaveImageToolActionOnAddedEvent = {
  imageURL: string;
  nodeId: string;
};

type WeaveImageToolActionTriggerParams = {
  imageData?: string;
  imageURL?: string;
  imageWidth?: number;
  imageHeight?: number;
  imageId?: string;
  options?: ImageOptions;
  position?: Konva.Vector2d;
  forceMainContainer?: boolean;
};

type ImageOptions = {
  crossOrigin: ImageCrossOrigin;
};

type WeaveImageToolActionTriggerReturn =
  | {
      nodeId: string;
      finishUploadCallback: (nodeId: string, imageURL: string) => void;
    }
  | undefined;

type WeaveImageToolDragAndDropProperties = {
  imageURL: string;
  imageWidth: number;
  imageHeight: number;
  imageId?: string;
};

Trigger function params

trigger(cancelAction: () => void, params?: WeaveImageToolActionTriggerParams): WeaveImageToolActionTriggerReturn;

For WeaveImageToolActionTriggerParams:

Prop	Type	Default
`forceMainContainer?`	`boolean`	-
`position?`	`Vector2d`	-
`options?`	`any`	-
`imageId?`	`string`	-
`imageHeight?`	`string`	-
`imageWidth?`	`string`	-
`imageURL?`	`string`	-
`imageData?`	`string`	-

When triggering the tool, a WeaveImageToolActionTriggerReturn object is returned, this object contains:

nodeId: is the Id of the node added to the canvas.
finishUploadCallback: a callback function to call to save on the node the persisted Image URL. This function receives the nodeId and the persisted image URL.

Drag & Drop from the same application

When you implement drag & drop of an image loaded on a HTMLImageElement that is located on the same application, on the onDragStart event you must call the setDragAndDropProperties method of the tool and define the following properties:

imageURL: the image URL to add to the canvas.
imageId: the image id (external resource id) associated to the image.
imageWidth: the image real width (without any transformations).
imageHeight: the image real height (without any transformations).

Events

onImageLoadStart

onImageLoadStart: WeaveNodesSelectionPluginOnNodesChangeEvent;

The onImageLoadStart event is called when the image is stated to load onto the canvas.

onImageLoadEnd

onImageLoadEnd: WeaveNodesSelectionPluginOnNodesChangeEvent;

The onImageLoadEnd event is called when the image ended loading into the canvas.

Methods

setDragAndDropProperties

setDragAndDropProperties(properties: WeaveImageToolDragAndDropProperties): void

The setDragAndDropProperties method set the necessary properties when drag & drop images that are inside the application.

WeaveImageToolAction

On this page