WeaveImagesToolAction

Overview

The WeaveImagesToolAction class that enables users to:

Selecting multiple files and add it to the canvas on a position of its choice.
Drag & Drop multiple Images from the same application to the canvas.
Drag & Drop multiple external Image to the canvas.

When adding multiple images the images are added on a grid format, the amount of columns is fixed and configurable.

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

Import

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

Instantiation

new WeaveImagesToolAction();

TypeScript types

type WeaveImagesToolActionUploadTypeKeys =
  keyof typeof WEAVE_IMAGES_TOOL_UPLOAD_TYPE;
type WeaveImagesToolActionUploadType =
  (typeof WEAVE_IMAGES_TOOL_UPLOAD_TYPE)[WeaveImagesToolActionUploadTypeKeys];

type WeaveImagesToolActionStateKeys = keyof typeof WEAVE_IMAGES_TOOL_STATE;
type WeaveImagesToolActionState =
  (typeof WEAVE_IMAGES_TOOL_STATE)[WeaveImagesToolActionStateKeys];

type WeaveImagesToolActionOnAddedEvent = {
  nodesIds: string[];
};

type ImageInfo = {
  imageId: string;
  url: string;
};

type WeaveImagesToolActionTriggerCommonParams = {
  position?: Vector2d;
  forceMainContainer?: boolean;
};

type WeaveImagesToolActionInternalUploadFunction = () => Promise<void>;
type WeaveImagesToolActionUploadFunction = (file: File) => Promise<string>;
type WeaveImagesToolActionOnStartUploadingFunction = () => void | Promise<void>;
type WeaveImagesToolActionOnFinishedUploadingFunction =
  () => void | Promise<void>;

type WeaveImagesFile = {
  file: File;
  downscaleRatio: number;
  width: number;
  height: number;
  imageId?: string;
};

type WeaveImagesURL = {
  url: string;
  fallback: string;
  width: number;
  height: number;
  options?: ImageOptions;
  imageId?: string;
};

type WeaveImagesToolActionTriggerParams = (
  | {
      type: typeof WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE;
      images: WeaveImagesFile[];
      uploadImageFunction: WeaveImagesToolActionUploadFunction;
      onStartUploading: WeaveImagesToolActionOnStartUploadingFunction;
      onFinishedUploading: WeaveImagesToolActionOnFinishedUploadingFunction;
    }
  | {
      type: typeof WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL;
      images: WeaveImagesURL[];
    }
) &
  WeaveImagesToolActionTriggerCommonParams;

type WeaveImagesToolActionParams = {
  style: {
    cursor: {
      padding: number;
      imageThumbnails: {
        padding: number;
        width: number;
        height: number;

        shadowColor: string;
        shadowBlur: number;
        shadowOffset: Konva.Vector2d;
        shadowOpacity: number;
      };
    };
    moreImages: {
      paddingX: number;
      paddingY: number;
      fontSize: number;
      fontFamily: string;
      textColor: string;
      backgroundColor: string;
      backgroundOpacity: number;
    };
    images: {
      padding: number;
    };
  };
  layout: {
    columns: number;
  };
};

type WeaveImagesToolDragAndDropProperties = {
  imagesURL: WeaveImagesURL[];
} & Omit<WeaveImagesToolActionTriggerCommonParams, "position">;

Trigger function params

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

For WeaveImagesToolActionTriggerParams:

Prop	Type	Default
`forceMainContainer?`	`boolean`	-
`position?`	`Vector2d`	-
`onFinishedUploading?`	`WeaveImagesToolActionOnFinishedUploadingFunction`	-
`onStartUploading?`	`WeaveImagesToolActionOnStartUploadingFunction`	-
`uploadImageFunction?`	`WeaveImagesToolActionUploadFunction`	-
`images?`	`WeaveImagesFile[] \| WeaveImagesURL[]`	-
`type?`	`string`	-

When triggering the tool nothing is returned.

Drag & Drop from the same application

When you implement drag & drop of multiple images 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:

imagesURL: an array WeaveImagesURL[] of images metadata to add to the canvas.
forceMainContainer: (optional) defines if we should force to add the images on the main stage instead for example A frame.

Events

onAddingImages

onAddingImages: undefined;

The onAddingImage event is called previously the image is added to the canvas, when the user is selecting its position.

onAddedImages

onAddedImages: WeaveImagesToolActionOnAddedEvent;

The onAddedImage event is called when the image is added to the canvas.

Methods

setDragAndDropProperties

setDragAndDropProperties(properties: WeaveImageToolDragAndDropProperties): void

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

WeaveImagesToolAction

On this page