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
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 = {
canPasteOnto: (node: WeaveStateElement, atTarget: Konva.Container) => {
const targetType = atTarget.getAttrs().nodeType;
if (targetType === "frame" && node.type === "frame") {
return false;
}
return true;
},
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;
};
export type WeaveCanPasteOntoFunction = (
node: WeaveStateElement,
atTarget: Konva.Container,
) => boolean;
type WeaveCopyPasteNodesPluginConfig = {
canPasteOnto: WeaveCanPasteOntoFunction;
paddingOnPaste: PaddingOnPaste;
};
type WeaveCopyPasteNodesPluginParams = {
config?: Partial<WeaveCopyPasteNodesPluginConfig>;
getImageBase64: (instance: Weave, nodes: Konva.Node[]) => Promise<string>;
};Parameters
For WeaveCopyPasteNodesPlugin:
| Property | Type | Required | Description |
|---|---|---|---|
|
|
Config parameters for the plugin. |
|
|
|
A function that is called to get the image (as Base64 URL) from the nodes provided, used to set the image onto the clipboard to it can be pasted on external apps. |
For WeaveCopyPasteNodesPluginConfig:
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
|
|
|
Function that returns when a node to be pasted can be pasted onto the specified target |
|
|
|
|
Allows to add a padding when pasting internally. |
Methods
paste
paste(): voidThis 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.