Weave.js

WeaveCopyPasteNodesPlugin

Activate support to copy & paste the nodes

Overview

The WeaveCopyPasteNodesPlugin class that enables copying and pasting nodes within the collaborative canvas environment.

It provides users with familiar keyboard shortcuts:

Ctrl
/
Cmd
+
C
to copy and
Ctrl
/
Cmd
+
V
to paste, helping them duplicate nodes or selections easily while keeping all changes synchronized in real-time across connected users.

This plugin improves productivity and usability, especially in complex design, diagramming, or whiteboard-style applications.

The class extends the WeavePlugin class

Name

This plugin name property value is copyPasteNodes.

Import

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

Instantiation

new WeaveCopyPasteNodesPlugin(params?: WeaveCopyPasteNodesPluginParams);

TypeScript types

const WEAVE_COPY_PASTE_PASTE_MODES = {
  ["INTERNAL"]: "internal",
  ["EXTERNAL"]: "external",
  ["NOT_ALLOWED"]: "not-allowed",
  ["CLIPBOARD_API_ERROR"]: "clipboard-api-error",
  ["CLIPBOARD_API_NOT_SUPPORTED"]: "clipboard-api-not-supported",
} as const;

const WEAVE_COPY_PASTE_CONFIG_DEFAULT = {
  paddingOnPaste: {
    enabled: false,
    paddingX: 0,
    paddingY: 0,
  },
} as const;

type WeaveCopyPasteNodesPluginOnCopyEvent = { error?: Error } | undefined;
type WeaveCopyPasteNodesPluginOnPasteEvent = {
  error?: Error;
  pastedNodes?: string[];
};
type WeaveCopyPasteNodesPluginOnPasteExternalEvent = {
  items?: ClipboardItems;
  dataList?: DataTransferItemList;
  positionCalculated: boolean;
  position: Vector2d;
};

type WeaveCopyPastePasteModeKeys = keyof typeof WEAVE_COPY_PASTE_PASTE_MODES;
type WeaveCopyPastePasteMode =
  | (typeof WEAVE_COPY_PASTE_PASTE_MODES)[WeaveCopyPastePasteModeKeys]
  | undefined;

type WeavePasteModel = {
  weaveInstanceId: string;
  weave: Record<string, WeaveStateElement>;
  weaveMinPoint: Vector2d;
};

type WeaveToPasteNode = {
  konvaNode: Konva.Node;
  node: NodeSerializable;
};

type PaddingOnPaste = {
  enabled: boolean;
  paddingX: number;
  paddingY: number;
};

type WeaveCopyPasteNodesPluginConfig = {
  paddingOnPaste: PaddingOnPaste;
};

type WeaveCopyPasteNodesPluginParams = {
  config?: Partial<WeaveCopyPasteNodesPluginConfig>;
};

Parameters

For WeaveCopyPasteNodesPlugin:

PropTypeDefault
config?
WeaveCopyPasteNodesPluginConfig
-

For WeaveCopyPasteNodesPluginConfig:

PropTypeDefault
paddingOnPaste?
PaddingOnPaste
{ enabled: false, paddingX: 0, paddingY: 0 }

Methods

copy

async copy(): void

This method copy the selected nodes to the clipboard.

paste

paste(): void

This method paste onto the stage the contents of the clipboard ir are supported by Weave.js.

getAvailablePasteMode

async getAvailablePasteMode(
  canHandleExternal: (items: ClipboardItems) => Promise<boolean>
): Promise<WeaveCopyPastePasteMode>

This method determines the paste mode based on what's on the clipboard.

If there is something on the Weave clipboard (meaning an user copy something on Weave or on other tab) will return internal.

If there is something on the clipboard copied from an external site (not a Weave app), it will provide the clipboard items to the provided callback in order to determine if our app can manage the external elements on the clipboard, if the callback returns true then the method will return external.

If there is nothing on the clipboard (internal or external), the method will return not-allowed

If there is an error using the clipboard API, then the method will return clipboard-api-error.

If the Clipboard API is no supported the method will return clipboard-api-not-supported.

Events

onCopy

onCopy: WeaveCopyPasteNodesPluginOnCopyEvent;

The onCopy event is called when an user triggered a copy action and the copy finished.

onPaste

onPaste: WeaveCopyPasteNodesPluginOnPasteEvent;

The onPaste event is called when an user triggered a paste action and the paste finished.

onPasteExternal

onPasteExternal: WeaveCopyPasteNodesPluginOnPasteExternalEvent;

The onPasteExternal event is called when an user triggers a paste action from elements external to the actual tab of the browser.