@inditextech/weave-sdk 0.10.2 → 0.11.0

package/dist/sdk.cjs

@@ -15871,9 +15871,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 		this.initEvents();
 		this.initialized = true;
-		this.instance.on("onRender", () => {
-			this.triggerSelectedNodesEvent();
-		});
 		this.instance.on("onActiveActionChange", (activeAction) => {
 			if (typeof activeAction !== "undefined" && activeAction !== "selectionTool") {
 				this.active = false;
@@ -16143,9 +16140,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 							weave: object.weave,
 							weaveMinPoint: object.weaveMinPoint
 						};
-						resolve();
-					} catch (ex) {
-						reject(ex);
+						resolve(true);
+					} catch (_) {
+						resolve(false);
 					}
 				}).catch((error) => {
 					reject(error);
@@ -16167,31 +16164,36 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		document.oncopy = async () => {
-			this.performCopy();
-			return;
-		};
-		document.onpaste = async (event) => {
-			if (!this.enabled) return;
-			const items = event.clipboardData?.items;
-			if (!items) return;
-			try {
-				await this.readClipboardData();
-				this.performPaste();
-			} catch (ex) {
-				this.instance.emitEvent("onPaste", ex);
+		window.addEventListener("keydown", async (e) => {
+			if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				await this.performCopy();
+				return;
 			}
-			try {
-				const items$1 = await navigator.clipboard.read();
-				if (items$1 && items$1.length === 1) {
-					const item = items$1[0];
-					this.instance.emitEvent("onPasteExternal", item);
+			if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				if (!this.enabled) return;
+				try {
+					const continueToPaste = await this.readClipboardData();
+					if (!continueToPaste) {
+						this.instance.emitEvent("onPaste", new Error("Invalid elements to paste"));
+						return;
+					}
+					this.performPaste();
+				} catch (ex) {
+					this.instance.emitEvent("onPaste", ex);
 				}
-			} catch (ex) {
-				this.instance.emitEvent("onPaste", ex);
+				try {
+					const items = await navigator.clipboard.read();
+					if (items && items.length === 1) {
+						const item = items[0];
+						this.instance.emitEvent("onPasteExternal", item);
+					}
+				} catch (ex) {
+					this.instance.emitEvent("onPaste", ex);
+				}
+				return;
 			}
-		};
-		stage.container().addEventListener("keydown", (e) => {
 			if (e.key === "Escape") {
 				this.cancel();
 				return;
@@ -16275,7 +16277,11 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		await this.performCopy();
 	}
 	async paste() {
-		await this.readClipboardData();
+		const continueToPaste = await this.readClipboardData();
+		if (!continueToPaste) {
+			this.instance.emitEvent("onPaste", new Error("Invalid elements to paste"));
+			return;
+		}
 		this.performPaste();
 	}
 	getSelectedNodes() {
@@ -17838,7 +17844,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.10.2";
+var version = "0.11.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19738,6 +19744,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			...config
 		};
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
+		this.isCtrlOrMetaPressed = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
 		this.actualScale = this.config.zoomSteps[this.actualStep];
 		this.defaultStep = this.actualStep;
@@ -19746,6 +19753,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		return WEAVE_STAGE_ZOOM_KEY;
 	}
 	onInit() {
+		this.initEvents();
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true) {
@@ -19894,6 +19902,21 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	disable() {
 		this.enabled = false;
 	}
+	initEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
+		});
+		stage.container().addEventListener("keyup", (e) => {
+			if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
+		});
+		stage.on("wheel", (e) => {
+			e.evt.preventDefault();
+			if (!this.enabled || !this.isCtrlOrMetaPressed) return;
+			if (e.evt.deltaY > 0) this.zoomOut();
+			if (e.evt.deltaY < 0) this.zoomIn();
+		});
+	}
 };
 
 //#endregion
@@ -20995,6 +21018,9 @@ const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
 //#region src/plugins/stage-grid/stage-grid.ts
+function isZeroOrClose(value, tolerance = 1e-6) {
+	return Math.abs(value) <= tolerance;
+}
 var WeaveStageGridPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
@@ -21030,10 +21056,10 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
 		});
-		stage.container().addEventListener("keyup", (e) => {
+		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		stage.on("mousedown", (e) => {
@@ -21104,11 +21130,13 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		if (!layer) return;
 		const stage = this.instance.getStage();
 		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
+		const overflowX = 10 * this.config.gridSize;
+		const overflowY = 10 * this.config.gridSize;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
 		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let index = 0; index < pointsX.length; index++) {
 			const point = pointsX[index];
 			let color = this.config.gridColor;
@@ -21116,12 +21144,12 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			layer.add(new konva_lib_shapes_Line.Line({
 				points: [
 					point,
-					(-stage.y() - 2 * this.config.gridSize) / stage.scaleY(),
+					(-stage.y() - overflowY) / stage.scaleY(),
 					point,
-					(stage.height() - stage.y() + 2 * this.config.gridSize) / stage.scaleY()
+					(-stage.y() + stage.height() + overflowY) / stage.scaleY()
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleX())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleX()))) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21131,13 +21159,13 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (point === 0) color = this.config.gridOriginColor;
 			layer.add(new konva_lib_shapes_Line.Line({
 				points: [
-					(-stage.x() - 2 * this.config.gridSize) / stage.scaleX(),
+					(-stage.x() - overflowX) / stage.scaleX(),
 					point,
-					(stage.width() - stage.x() + 2 * this.config.gridSize) / stage.scaleX(),
+					(-stage.x() + stage.width() + overflowX) / stage.scaleX(),
 					point
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleY())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleY()))) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21146,12 +21174,14 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const layer = this.getLayer();
 		if (!layer) return;
 		const stage = this.instance.getStage();
+		const overflowX = Math.max(stage.width() * .2, 10 * this.config.gridSize);
+		const overflowY = Math.max(stage.height() * .2, 10 * this.config.gridSize);
 		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
 		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let indexX = 0; indexX < pointsX.length; indexX++) {
 			const pointX = pointsX[indexX];
 			for (let indexY = 0; indexY < pointsY.length; indexY++) {
@@ -21206,6 +21236,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		this.enabled = true;
 		this.moveToolActive = false;
 		this.isMouseMiddleButtonPressed = false;
+		this.isCtrlOrMetaPressed = false;
 		this.isSpaceKeyPressed = false;
 		this.previousPointer = null;
 	}
@@ -21233,13 +21264,15 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		let previousMouseX = Infinity;
 		let previousMouseY = Infinity;
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 			if (e.code === "Space") {
 				this.isSpaceKeyPressed = true;
 				this.enableMove();
 			}
 		});
-		stage.container().addEventListener("keyup", (e) => {
+		window.addEventListener("keyup", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = false;
 			if (e.code === "Space") {
 				this.isSpaceKeyPressed = false;
 				this.disableMove();
@@ -21313,7 +21346,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		});
 		stage.on("wheel", (e) => {
 			e.evt.preventDefault();
-			if (!this.enabled || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
+			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
 			stage.x(stage.x() - e.evt.deltaX);
 			stage.y(stage.y() - e.evt.deltaY);
 		});
@@ -21442,9 +21475,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params;
-		this.renderCursors = true;
 		this.usersPointers = {};
-		this.usersPointersTimers = {};
 		this.config = config;
 	}
 	getName() {
@@ -21455,9 +21486,15 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	}
 	initLayer() {
 		const stage = this.instance.getStage();
-		const layer = new konva.default.Layer({ id: this.getLayerName() });
+		const layer = new konva.default.Layer({
+			id: this.getLayerName(),
+			listening: false
+		});
 		stage.add(layer);
 	}
+	onRender() {
+		this.renderPointers();
+	}
 	getLayer() {
 		const stage = this.instance.getStage();
 		return stage.findOne(`#${WEAVE_USERS_POINTERS_LAYER_ID}`);
@@ -21467,10 +21504,12 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		const stage = this.instance.getStage();
 		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			const selfUser = this.config.getUser();
+			const allActiveUsers = [];
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
 				if (change[WEAVE_USER_POINTER_KEY] && selfUser.name !== change[WEAVE_USER_POINTER_KEY].user) {
 					const userPointer = change[WEAVE_USER_POINTER_KEY];
+					allActiveUsers.push(userPointer.user);
 					this.usersPointers[userPointer.user] = {
 						oldPos: this.usersPointers[userPointer.user]?.actualPos ?? {
 							user: userPointer.user,
@@ -21481,6 +21520,17 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 					};
 				}
 			}
+			const allActiveUsersPointers = Object.keys(this.usersPointers).map((userPointerKey) => {
+				const pointerInfo = this.usersPointers[userPointerKey];
+				return pointerInfo.actualPos.user;
+			});
+			const inactivePointers = import_lodash.default.differenceWith(allActiveUsersPointers, allActiveUsers, import_lodash.default.isEqual);
+			const pointersLayer = this.getLayer();
+			for (const inactivePointer of inactivePointers) {
+				const userPointerNode = pointersLayer?.findOne(`#${inactivePointer}`);
+				if (userPointerNode) userPointerNode.destroy();
+				delete this.usersPointers[inactivePointer];
+			}
 			this.renderPointers();
 		});
 		stage.on("dragmove", (e) => {
@@ -21503,9 +21553,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				y: mousePos.y
 			});
 		});
-		this.instance.addEventListener("onZoomChange", () => {
-			this.renderPointers();
-		});
+		this.renderPointers();
 	}
 	stringToColour(str) {
 		let hash = 0;
@@ -21519,29 +21567,16 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		}
 		return colour;
 	}
-	setUserMovementTimer(userPointer) {
-		const pointersLayer = this.getLayer();
-		if (this.usersPointersTimers[`${userPointer.user}-opacity`]) clearTimeout(this.usersPointersTimers[`${userPointer.user}-opacity`]);
-		this.usersPointersTimers[`${userPointer.user}-opacity`] = setTimeout(() => {
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.user}`);
-			if (userPointerNode) userPointerNode.opacity(.5);
-		}, 5e3);
-		if (this.usersPointersTimers[`${userPointer.user}-destroy`]) clearTimeout(this.usersPointersTimers[`${userPointer.user}-destroy`]);
-		this.usersPointersTimers[`${userPointer.user}-destroy`] = setTimeout(() => {
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.user}`);
-			if (userPointerNode) userPointerNode.destroy();
-		}, 3e4);
-	}
 	renderPointers() {
 		const stage = this.instance.getStage();
 		const pointersLayer = this.getLayer();
-		pointersLayer?.clear();
 		if (!this.enabled) return;
-		if (this.renderCursors) for (const userPointerKey of Object.keys(this.usersPointers)) {
+		for (const userPointerKey of Object.keys(this.usersPointers)) {
 			const userPointer = this.usersPointers[userPointerKey];
 			const userPointerNode = pointersLayer?.findOne(`#${userPointer.actualPos.user}`);
 			if (!userPointerNode) {
 				const userPointerNode$1 = new konva.default.Group({
+					name: "pointer",
 					id: userPointer.actualPos.user,
 					x: userPointer.actualPos.x,
 					y: userPointer.actualPos.y,
@@ -21587,7 +21622,6 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				userPointerNode$1.add(userNameBackground);
 				userPointerNode$1.add(userNameNode);
 				pointersLayer?.add(userPointerNode$1);
-				this.setUserMovementTimer(userPointer.actualPos);
 				continue;
 			}
 			const oldPos = {
@@ -21620,22 +21654,13 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				height: userPointNodeText[0]?.height() + this.userPointerBackgroundPaddingY * 2
 			});
 			userPointNode[0]?.setAttrs({ y: userPointNodeBackground[0]?.y() + userPointNodeBackground[0]?.height() / 2 });
-			if (hasChanged) {
-				userPointerNode.setAttrs({
-					x: userPointer.actualPos.x,
-					y: userPointer.actualPos.y,
-					opacity: 1
-				});
-				if (hasChanged) this.setUserMovementTimer(userPointer.actualPos);
-			}
+			if (hasChanged) userPointerNode.setAttrs({
+				x: userPointer.actualPos.x,
+				y: userPointer.actualPos.y,
+				opacity: 1
+			});
 		}
 	}
-	toggleRenderCursors() {
-		this.renderCursors = !this.renderCursors;
-	}
-	setRenderCursors(render) {
-		this.renderCursors = render;
-	}
 	enable() {
 		this.getLayer()?.show();
 		this.enabled = true;

package/dist/sdk.d.cts

@@ -1166,6 +1166,7 @@ declare class WeaveStageGridPlugin extends WeavePlugin {
 declare class WeaveStagePanningPlugin extends WeavePlugin {
   private moveToolActive;
   private isMouseMiddleButtonPressed;
+  private isCtrlOrMetaPressed;
   private isSpaceKeyPressed;
   protected previousPointer: string | null;
   getLayerName: undefined;
@@ -1216,6 +1217,8 @@ type WeaveStageZoomPluginParams = {
 //#endregion
 //#region src/plugins/stage-zoom/stage-zoom.d.ts
 declare class WeaveStageZoomPlugin extends WeavePlugin {
+  private isCtrlOrMetaPressed;
+  protected previousPointer: string | null;
   getLayerName: undefined;
   initLayer: undefined;
   onRender: undefined;
@@ -1238,6 +1241,7 @@ declare class WeaveStageZoomPlugin extends WeavePlugin {
   fitToSelection(): void;
   enable(): void;
   disable(): void;
+  private initEvents;
 }
 
 //#endregion
@@ -1301,9 +1305,7 @@ type WeaveUserPointerKey = typeof WEAVE_USER_POINTER_KEY;
 //#region src/plugins/users-pointers/users-pointers.d.ts
 declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private usersPointers;
-  private usersPointersTimers;
   private config;
-  private renderCursors;
   private userPointerCircleRadius;
   private userPointerSeparation;
   private userPointerCircleStrokeWidth;
@@ -1311,18 +1313,15 @@ declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private userPointerBackgroundCornerRadius;
   private userPointerBackgroundPaddingX;
   private userPointerBackgroundPaddingY;
-  onRender: undefined;
   constructor(params: WeaveUsersPointersPluginParams);
   getName(): string;
   getLayerName(): string;
   initLayer(): void;
+  onRender(): void;
   getLayer(): Konva.Layer | undefined;
   onInit(): void;
   private stringToColour;
-  private setUserMovementTimer;
   private renderPointers;
-  toggleRenderCursors(): void;
-  setRenderCursors(render: boolean): void;
   enable(): void;
   disable(): void;
 }
@@ -1417,7 +1416,7 @@ declare class WeaveCopyPasteNodesPlugin extends WeavePlugin {
   onInit(): void;
   private readClipboardData;
   private writeClipboardData;
-  private initEvents;
+  initEvents(): void;
   private mapToPasteNodes;
   private setState;
   private handlePaste;

package/dist/sdk.d.ts

@@ -1166,6 +1166,7 @@ declare class WeaveStageGridPlugin extends WeavePlugin {
 declare class WeaveStagePanningPlugin extends WeavePlugin {
   private moveToolActive;
   private isMouseMiddleButtonPressed;
+  private isCtrlOrMetaPressed;
   private isSpaceKeyPressed;
   protected previousPointer: string | null;
   getLayerName: undefined;
@@ -1216,6 +1217,8 @@ type WeaveStageZoomPluginParams = {
 //#endregion
 //#region src/plugins/stage-zoom/stage-zoom.d.ts
 declare class WeaveStageZoomPlugin extends WeavePlugin {
+  private isCtrlOrMetaPressed;
+  protected previousPointer: string | null;
   getLayerName: undefined;
   initLayer: undefined;
   onRender: undefined;
@@ -1238,6 +1241,7 @@ declare class WeaveStageZoomPlugin extends WeavePlugin {
   fitToSelection(): void;
   enable(): void;
   disable(): void;
+  private initEvents;
 }
 
 //#endregion
@@ -1301,9 +1305,7 @@ type WeaveUserPointerKey = typeof WEAVE_USER_POINTER_KEY;
 //#region src/plugins/users-pointers/users-pointers.d.ts
 declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private usersPointers;
-  private usersPointersTimers;
   private config;
-  private renderCursors;
   private userPointerCircleRadius;
   private userPointerSeparation;
   private userPointerCircleStrokeWidth;
@@ -1311,18 +1313,15 @@ declare class WeaveUsersPointersPlugin extends WeavePlugin {
   private userPointerBackgroundCornerRadius;
   private userPointerBackgroundPaddingX;
   private userPointerBackgroundPaddingY;
-  onRender: undefined;
   constructor(params: WeaveUsersPointersPluginParams);
   getName(): string;
   getLayerName(): string;
   initLayer(): void;
+  onRender(): void;
   getLayer(): Konva.Layer | undefined;
   onInit(): void;
   private stringToColour;
-  private setUserMovementTimer;
   private renderPointers;
-  toggleRenderCursors(): void;
-  setRenderCursors(render: boolean): void;
   enable(): void;
   disable(): void;
 }
@@ -1417,7 +1416,7 @@ declare class WeaveCopyPasteNodesPlugin extends WeavePlugin {
   onInit(): void;
   private readClipboardData;
   private writeClipboardData;
-  private initEvents;
+  initEvents(): void;
   private mapToPasteNodes;
   private setState;
   private handlePaste;

package/dist/sdk.js

@@ -15871,9 +15871,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		});
 		this.initEvents();
 		this.initialized = true;
-		this.instance.on("onRender", () => {
-			this.triggerSelectedNodesEvent();
-		});
 		this.instance.on("onActiveActionChange", (activeAction) => {
 			if (typeof activeAction !== "undefined" && activeAction !== "selectionTool") {
 				this.active = false;
@@ -16143,9 +16140,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 							weave: object.weave,
 							weaveMinPoint: object.weaveMinPoint
 						};
-						resolve();
-					} catch (ex) {
-						reject(ex);
+						resolve(true);
+					} catch (_) {
+						resolve(false);
 					}
 				}).catch((error) => {
 					reject(error);
@@ -16167,31 +16164,36 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		document.oncopy = async () => {
-			this.performCopy();
-			return;
-		};
-		document.onpaste = async (event) => {
-			if (!this.enabled) return;
-			const items = event.clipboardData?.items;
-			if (!items) return;
-			try {
-				await this.readClipboardData();
-				this.performPaste();
-			} catch (ex) {
-				this.instance.emitEvent("onPaste", ex);
+		window.addEventListener("keydown", async (e) => {
+			if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				await this.performCopy();
+				return;
 			}
-			try {
-				const items$1 = await navigator.clipboard.read();
-				if (items$1 && items$1.length === 1) {
-					const item = items$1[0];
-					this.instance.emitEvent("onPasteExternal", item);
+			if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+				e.preventDefault();
+				if (!this.enabled) return;
+				try {
+					const continueToPaste = await this.readClipboardData();
+					if (!continueToPaste) {
+						this.instance.emitEvent("onPaste", new Error("Invalid elements to paste"));
+						return;
+					}
+					this.performPaste();
+				} catch (ex) {
+					this.instance.emitEvent("onPaste", ex);
 				}
-			} catch (ex) {
-				this.instance.emitEvent("onPaste", ex);
+				try {
+					const items = await navigator.clipboard.read();
+					if (items && items.length === 1) {
+						const item = items[0];
+						this.instance.emitEvent("onPasteExternal", item);
+					}
+				} catch (ex) {
+					this.instance.emitEvent("onPaste", ex);
+				}
+				return;
 			}
-		};
-		stage.container().addEventListener("keydown", (e) => {
 			if (e.key === "Escape") {
 				this.cancel();
 				return;
@@ -16275,7 +16277,11 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		await this.performCopy();
 	}
 	async paste() {
-		await this.readClipboardData();
+		const continueToPaste = await this.readClipboardData();
+		if (!continueToPaste) {
+			this.instance.emitEvent("onPaste", new Error("Invalid elements to paste"));
+			return;
+		}
 		this.performPaste();
 	}
 	getSelectedNodes() {
@@ -17838,7 +17844,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.10.2";
+var version = "0.11.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -19738,6 +19744,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			...config
 		};
 		if (!this.config.zoomSteps.includes(this.config.defaultZoom)) throw new Error(`Default zoom ${this.config.defaultZoom} is not in zoom steps`);
+		this.isCtrlOrMetaPressed = false;
 		this.actualStep = this.config.zoomSteps.findIndex((step) => step === this.config.defaultZoom);
 		this.actualScale = this.config.zoomSteps[this.actualStep];
 		this.defaultStep = this.actualStep;
@@ -19746,6 +19753,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		return WEAVE_STAGE_ZOOM_KEY;
 	}
 	onInit() {
+		this.initEvents();
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true) {
@@ -19894,6 +19902,21 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	disable() {
 		this.enabled = false;
 	}
+	initEvents() {
+		const stage = this.instance.getStage();
+		stage.container().addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
+		});
+		stage.container().addEventListener("keyup", (e) => {
+			if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
+		});
+		stage.on("wheel", (e) => {
+			e.evt.preventDefault();
+			if (!this.enabled || !this.isCtrlOrMetaPressed) return;
+			if (e.evt.deltaY > 0) this.zoomOut();
+			if (e.evt.deltaY < 0) this.zoomIn();
+		});
+	}
 };
 
 //#endregion
@@ -20995,6 +21018,9 @@ const WEAVE_GRID_LAYER_ID = "gridLayer";
 
 //#endregion
 //#region src/plugins/stage-grid/stage-grid.ts
+function isZeroOrClose(value, tolerance = 1e-6) {
+	return Math.abs(value) <= tolerance;
+}
 var WeaveStageGridPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
@@ -21030,10 +21056,10 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
 		});
-		stage.container().addEventListener("keyup", (e) => {
+		window.addEventListener("keyup", (e) => {
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		stage.on("mousedown", (e) => {
@@ -21104,11 +21130,13 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		if (!layer) return;
 		const stage = this.instance.getStage();
 		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
+		const overflowX = 10 * this.config.gridSize;
+		const overflowY = 10 * this.config.gridSize;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
 		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let index = 0; index < pointsX.length; index++) {
 			const point = pointsX[index];
 			let color = this.config.gridColor;
@@ -21116,12 +21144,12 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			layer.add(new Line({
 				points: [
 					point,
-					(-stage.y() - 2 * this.config.gridSize) / stage.scaleY(),
+					(-stage.y() - overflowY) / stage.scaleY(),
 					point,
-					(stage.height() - stage.y() + 2 * this.config.gridSize) / stage.scaleY()
+					(-stage.y() + stage.height() + overflowY) / stage.scaleY()
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleX())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleX()))) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21131,13 +21159,13 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (point === 0) color = this.config.gridOriginColor;
 			layer.add(new Line({
 				points: [
-					(-stage.x() - 2 * this.config.gridSize) / stage.scaleX(),
+					(-stage.x() - overflowX) / stage.scaleX(),
 					point,
-					(stage.width() - stage.x() + 2 * this.config.gridSize) / stage.scaleX(),
+					(-stage.x() + stage.width() + overflowX) / stage.scaleX(),
 					point
 				],
 				stroke: color,
-				strokeWidth: (point % (10 * (this.config.gridSize / stage.scaleY())) === 0 ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleY()))) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21146,12 +21174,14 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const layer = this.getLayer();
 		if (!layer) return;
 		const stage = this.instance.getStage();
+		const overflowX = Math.max(stage.width() * .2, 10 * this.config.gridSize);
+		const overflowY = Math.max(stage.height() * .2, 10 * this.config.gridSize);
 		const stageXRound = this.round(stage.x(), this.config.gridSize) * -1;
 		const pointsX = [];
-		for (let i = stageXRound; i < stageXRound + stage.width(); i += this.config.gridSize) pointsX.push(i / stage.scaleX());
+		for (let i = stageXRound - overflowX; i < stageXRound + stage.width() + overflowX; i += this.config.gridSize) pointsX.push(i / stage.scaleX());
 		const stageYRound = this.round(stage.y(), this.config.gridSize) * -1;
 		const pointsY = [];
-		for (let i = stageYRound; i < stageYRound + stage.height(); i += this.config.gridSize) pointsY.push(i / stage.scaleY());
+		for (let i = stageYRound - overflowY; i < stageYRound + stage.height() + overflowY; i += this.config.gridSize) pointsY.push(i / stage.scaleY());
 		for (let indexX = 0; indexX < pointsX.length; indexX++) {
 			const pointX = pointsX[indexX];
 			for (let indexY = 0; indexY < pointsY.length; indexY++) {
@@ -21206,6 +21236,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		this.enabled = true;
 		this.moveToolActive = false;
 		this.isMouseMiddleButtonPressed = false;
+		this.isCtrlOrMetaPressed = false;
 		this.isSpaceKeyPressed = false;
 		this.previousPointer = null;
 	}
@@ -21233,13 +21264,15 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		let previousMouseX = Infinity;
 		let previousMouseY = Infinity;
 		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 			if (e.code === "Space") {
 				this.isSpaceKeyPressed = true;
 				this.enableMove();
 			}
 		});
-		stage.container().addEventListener("keyup", (e) => {
+		window.addEventListener("keyup", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = false;
 			if (e.code === "Space") {
 				this.isSpaceKeyPressed = false;
 				this.disableMove();
@@ -21313,7 +21346,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		});
 		stage.on("wheel", (e) => {
 			e.evt.preventDefault();
-			if (!this.enabled || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
+			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
 			stage.x(stage.x() - e.evt.deltaX);
 			stage.y(stage.y() - e.evt.deltaY);
 		});
@@ -21442,9 +21475,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	constructor(params) {
 		super();
 		const { config } = params;
-		this.renderCursors = true;
 		this.usersPointers = {};
-		this.usersPointersTimers = {};
 		this.config = config;
 	}
 	getName() {
@@ -21455,9 +21486,15 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	}
 	initLayer() {
 		const stage = this.instance.getStage();
-		const layer = new Konva.Layer({ id: this.getLayerName() });
+		const layer = new Konva.Layer({
+			id: this.getLayerName(),
+			listening: false
+		});
 		stage.add(layer);
 	}
+	onRender() {
+		this.renderPointers();
+	}
 	getLayer() {
 		const stage = this.instance.getStage();
 		return stage.findOne(`#${WEAVE_USERS_POINTERS_LAYER_ID}`);
@@ -21467,10 +21504,12 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		const stage = this.instance.getStage();
 		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			const selfUser = this.config.getUser();
+			const allActiveUsers = [];
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
 				if (change[WEAVE_USER_POINTER_KEY] && selfUser.name !== change[WEAVE_USER_POINTER_KEY].user) {
 					const userPointer = change[WEAVE_USER_POINTER_KEY];
+					allActiveUsers.push(userPointer.user);
 					this.usersPointers[userPointer.user] = {
 						oldPos: this.usersPointers[userPointer.user]?.actualPos ?? {
 							user: userPointer.user,
@@ -21481,6 +21520,17 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 					};
 				}
 			}
+			const allActiveUsersPointers = Object.keys(this.usersPointers).map((userPointerKey) => {
+				const pointerInfo = this.usersPointers[userPointerKey];
+				return pointerInfo.actualPos.user;
+			});
+			const inactivePointers = import_lodash.default.differenceWith(allActiveUsersPointers, allActiveUsers, import_lodash.default.isEqual);
+			const pointersLayer = this.getLayer();
+			for (const inactivePointer of inactivePointers) {
+				const userPointerNode = pointersLayer?.findOne(`#${inactivePointer}`);
+				if (userPointerNode) userPointerNode.destroy();
+				delete this.usersPointers[inactivePointer];
+			}
 			this.renderPointers();
 		});
 		stage.on("dragmove", (e) => {
@@ -21503,9 +21553,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				y: mousePos.y
 			});
 		});
-		this.instance.addEventListener("onZoomChange", () => {
-			this.renderPointers();
-		});
+		this.renderPointers();
 	}
 	stringToColour(str) {
 		let hash = 0;
@@ -21519,29 +21567,16 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 		}
 		return colour;
 	}
-	setUserMovementTimer(userPointer) {
-		const pointersLayer = this.getLayer();
-		if (this.usersPointersTimers[`${userPointer.user}-opacity`]) clearTimeout(this.usersPointersTimers[`${userPointer.user}-opacity`]);
-		this.usersPointersTimers[`${userPointer.user}-opacity`] = setTimeout(() => {
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.user}`);
-			if (userPointerNode) userPointerNode.opacity(.5);
-		}, 5e3);
-		if (this.usersPointersTimers[`${userPointer.user}-destroy`]) clearTimeout(this.usersPointersTimers[`${userPointer.user}-destroy`]);
-		this.usersPointersTimers[`${userPointer.user}-destroy`] = setTimeout(() => {
-			const userPointerNode = pointersLayer?.findOne(`#${userPointer.user}`);
-			if (userPointerNode) userPointerNode.destroy();
-		}, 3e4);
-	}
 	renderPointers() {
 		const stage = this.instance.getStage();
 		const pointersLayer = this.getLayer();
-		pointersLayer?.clear();
 		if (!this.enabled) return;
-		if (this.renderCursors) for (const userPointerKey of Object.keys(this.usersPointers)) {
+		for (const userPointerKey of Object.keys(this.usersPointers)) {
 			const userPointer = this.usersPointers[userPointerKey];
 			const userPointerNode = pointersLayer?.findOne(`#${userPointer.actualPos.user}`);
 			if (!userPointerNode) {
 				const userPointerNode$1 = new Konva.Group({
+					name: "pointer",
 					id: userPointer.actualPos.user,
 					x: userPointer.actualPos.x,
 					y: userPointer.actualPos.y,
@@ -21587,7 +21622,6 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				userPointerNode$1.add(userNameBackground);
 				userPointerNode$1.add(userNameNode);
 				pointersLayer?.add(userPointerNode$1);
-				this.setUserMovementTimer(userPointer.actualPos);
 				continue;
 			}
 			const oldPos = {
@@ -21620,22 +21654,13 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				height: userPointNodeText[0]?.height() + this.userPointerBackgroundPaddingY * 2
 			});
 			userPointNode[0]?.setAttrs({ y: userPointNodeBackground[0]?.y() + userPointNodeBackground[0]?.height() / 2 });
-			if (hasChanged) {
-				userPointerNode.setAttrs({
-					x: userPointer.actualPos.x,
-					y: userPointer.actualPos.y,
-					opacity: 1
-				});
-				if (hasChanged) this.setUserMovementTimer(userPointer.actualPos);
-			}
+			if (hasChanged) userPointerNode.setAttrs({
+				x: userPointer.actualPos.x,
+				y: userPointer.actualPos.y,
+				opacity: 1
+			});
 		}
 	}
-	toggleRenderCursors() {
-		this.renderCursors = !this.renderCursors;
-	}
-	setRenderCursors(render) {
-		this.renderCursors = render;
-	}
 	enable() {
 		this.getLayer()?.show();
 		this.enabled = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-sdk",
-  "version": "0.10.2",
+  "version": "0.11.0",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -43,7 +43,7 @@
     "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
   },
   "dependencies": {
-    "@inditextech/weave-types": "0.10.2",
+    "@inditextech/weave-types": "0.11.0",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",