WeaveImageNode

Overview

The WeaveImageNode class represents an image element on the Weave.js collaborative canvas. It allows users to upload, display, and manipulate images within a real-time shared environment, making it a key building block for visual storytelling, design workspaces, and multimedia collaboration.

Built on top of Konva’s Image class shape under the hood, the WeaveImageNode handles image loading (via callbacks), scaling, positioning, and real-time synchronization, ensuring a smooth collaborative experience even when working with dynamic media content.

Images are ideal for:

Allowing users to import visual references, mockups, icons, or photos into a collaborative canvas.
Building rich multimedia design spaces or creative whiteboards.
Enhancing collaborative diagrams with visual context and assets.

The class extends the WeaveNode class

Type

This node nodeType property value is image.

Import

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

Instantiation

new WeaveImageNode(params?: WeaveImageNodeParams);

TypeScript types

type WeaveNodeTransformerProperties = Konva.TransformerConfig;

type WeaveImageProperties = {
  transform: WeaveNodeTransformerProperties;
};

type WeaveImageNodeParams = {
  config: Partial<WeaveImageProperties>;
};

const WEAVE_IMAGE_CROP_END_TYPE = {
  ["ACCEPT"]: "accept",
  ["CANCEL"]: "cancel",
};

type WeaveImageCropEndTypeKeys = keyof typeof WEAVE_IMAGE_CROP_END_TYPE;
type WeaveImageCropEndType =
  (typeof WEAVE_IMAGE_CROP_END_TYPE)[WeaveImageCropEndTypeKeys];

type WeaveImageOnCropStartEvent = {
  instance: Konva.Group;
};

type WeaveImageOnCropEndEvent = {
  instance: Konva.Group;
};

Parameters

For WeaveImageNodeParams:

Prop	Type	Default
`config`	`Partial<WeaveImageProperties>`	-

For WeaveImageProperties:

Prop	Type	Default
`transform?`	`object`	`check default values`

Default values

const WEAVE_TRANSFORMER_ANCHORS = {
  ["TOP_LEFT"]: "top-left",
  ["TOP_CENTER"]: "top-center",
  ["TOP_RIGHT"]: "top-right",
  ["MIDDLE_RIGHT"]: "middle-right",
  ["MIDDLE_LEFT"]: "middle-left",
  ["BOTTOM_LEFT"]: "bottom-left",
  ["BOTTOM_CENTER"]: "bottom-center",
  ["BOTTOM_RIGHT"]: "bottom-right",
};

const WEAVE_DEFAULT_ENABLED_ANCHORS: string[] = Object.values(
  WEAVE_TRANSFORMER_ANCHORS
);

const WEAVE_DEFAULT_TRANSFORM_PROPERTIES: WeaveNodeTransformerProperties = {
  rotateEnabled: true,
  resizeEnabled: true,
  enabledAnchors: WEAVE_DEFAULT_ENABLED_ANCHORS,
  borderStrokeWidth: 3,
  padding: 0,
};

Konva.Node Augmentation

This Node extends the Konva.Node class to define several functions:

triggerCrop

triggerCrop(): void

Function that when is called triggers the image cropping.

closeCrop

closeCrop(type: WeaveImageCropEndType): void

Function that when is called closes the image cropping, depending on the type:

accept: accepts the cropping configuration and crops the image.
cancel: cancel the cropping configuration without changes to the image.

resetCrop

resetCrop(): void

Function that when is called resets the cropping properties of an image.

Events

onImageCropStart

onImageCropStart: WeaveImageOnCropStartEvent;

The onImageCropStart event is called when an image enters on the cropping edition mode.

onImageCropEnd

onImageCropEnd: WeaveImageOnCropEndEvent;

The onImageCropEnd event is called when an image closes the cropping edition mode.

WeaveImageNode

On this page