@inditextech/weave-sdk 0.10.3 → 0.12.0

package/dist/sdk.cjs

@@ -15571,6 +15571,15 @@ var WeaveStore = class {
 			const newState = JSON.parse(JSON.stringify(this.getState()));
 			config.callbacks?.onStateChange?.(newState);
 			this.instance.emitEvent("onStateChange", newState);
+			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (this.isRoomLoaded && nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1) {
+				const selectedNode = nodesSelectionPlugin.getSelectedNodes()[0];
+				const nodeInfo = this.instance.getNode(selectedNode.getAttrs().id ?? "");
+				if (nodeInfo && nodeInfo.node) this.instance.emitEvent("onNodeChange", {
+					instance: selectedNode,
+					node: JSON.parse(JSON.stringify(nodeInfo.node))
+				});
+			}
 			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
@@ -15871,9 +15880,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;
@@ -15923,7 +15929,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.selecting = false;
 		const stage = this.instance.getStage();
 		stage.container().addEventListener("keydown", (e) => {
-			if (e.key === "Backspace" || e.key === "Delete") {
+			if ((e.key === "Backspace" || e.key === "Delete") && Object.keys(window.weaveTextEditing).length === 0) {
 				this.removeSelectedNodes();
 				return;
 			}
@@ -15945,6 +15951,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selectionRectangle.width(0);
 			this.selectionRectangle.height(0);
 			this.selecting = true;
+			this.instance.emitEvent("onSelectionState", true);
 			if (!(e.target instanceof konva.default.Stage)) this.cameFromSelectingMultiple = true;
 		});
 		stage.on("mousemove touchmove", (e) => {
@@ -15970,6 +15977,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (!this.initialized) return;
 			if (!this.active) return;
 			this.selecting = false;
+			this.instance.emitEvent("onSelectionState", false);
 			if (!this.selectionRectangle.visible()) {
 				this.cameFromSelectingMultiple = false;
 				return;
@@ -16143,9 +16151,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 +16175,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 +16288,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() {
@@ -17744,7 +17761,7 @@ var WeaveStateManager = class {
 	getElementsTree() {
 		const state = this.instance.getStore().getState().weave;
 		const jsonState = JSON.parse(JSON.stringify(state, null, 2));
-		const mainLayer = jsonState.props.children.find((node) => node.key === "mainLayer");
+		const mainLayer = jsonState.props?.children.find((node) => node.key === "mainLayer");
 		if (!mainLayer) return [];
 		return mainLayer.props.children;
 	}
@@ -17838,7 +17855,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.10.3";
+var version = "0.12.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18224,6 +18241,8 @@ var Weave = class extends Emittery {
 		this.actionsManager = new WeaveActionsManager(this);
 		this.pluginsManager = new WeavePluginsManager(this);
 		if (!window.weave) window.weave = this;
+		window.weaveTextEditing = {};
+		window.weaveDragImageURL = void 0;
 		this.setupManager.welcomeLog();
 	}
 	setupRenderer() {
@@ -18647,8 +18666,19 @@ var WeaveTextNode = class extends WeaveNode {
 			name: "node"
 		});
 		this.setupDefaultNodeEvents(text);
-		text.on("dblclick dbltap", (evt) => {
-			evt.cancelBubble = true;
+		window.addEventListener("keypress", (e) => {
+			if (this.editing) return;
+			if (e.key !== "Enter" && !e.shiftKey) return;
+			if (this.isSelecting() && this.isNodeSelected(text)) {
+				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+				if (nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1 && nodesSelectionPlugin.getSelectedNodes()[0].getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE && !window.weaveTextEditing[nodesSelectionPlugin.getSelectedNodes()[0].id()]) {
+					e.preventDefault();
+					this.triggerEditMode(nodesSelectionPlugin.getSelectedNodes()[0]);
+				}
+			}
+		});
+		text.on("dblclick dbltap", (e) => {
+			e.cancelBubble = true;
 			if (this.editing) return;
 			if (!(this.isSelecting() && this.isNodeSelected(text))) return;
 			const stage = this.instance.getStage();
@@ -18693,24 +18723,50 @@ var WeaveTextNode = class extends WeaveNode {
 			}
 		};
 	}
+	resizeTextAreaDOM(textNode) {
+		const textArea = document.getElementById(textNode.id());
+		if (!textArea) return;
+		const stage = this.instance.getStage();
+		const textPosition = textNode.absolutePosition();
+		const position = {
+			x: stage.container().offsetLeft + textPosition.x,
+			y: stage.container().offsetTop + textPosition.y
+		};
+		textArea.style.top = position.y + "px";
+		textArea.style.left = position.x + "px";
+		textArea.style.width = textNode.getWidth() * textNode.getAbsoluteScale().x + "px";
+		textArea.style.height = textNode.getHeight() * textNode.getAbsoluteScale().x + "px";
+		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
+	}
+	onZoomChangeHandler = (textNode) => () => {
+		if (!this.editing) return;
+		this.resizeTextAreaDOM(textNode);
+	};
+	onStageMoveHandler = (textNode) => () => {
+		if (!this.editing) return;
+		this.resizeTextAreaDOM(textNode);
+	};
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
 		const textArea = document.createElement("textarea");
+		textArea.id = textNode.id();
 		stage.container().appendChild(textArea);
-		window.weaveTextEditing = true;
+		this.instance.addEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
+		this.instance.addEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
+		window.weaveTextEditing[textNode.id()] = "editing";
 		textArea.value = textNode.text();
 		textArea.id = textNode.id();
 		textArea.style.position = "fixed";
 		textArea.style.top = position.y + "px";
 		textArea.style.left = position.x + "px";
 		textArea.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
-		textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+		textArea.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-		textArea.style.border = "solid 1px rgba(0,0,255,0.5)";
-		textArea.style.padding = "0px";
+		textArea.style.border = "solid 1px #1e40af";
+		textArea.style.minHeight = "auto";
 		textArea.style.margin = "0px";
 		textArea.style.overflow = "hidden";
-		textArea.style.background = "rgba(255,255,255,0.5)";
+		textArea.style.background = "transparent";
 		textArea.style.outline = "none";
 		textArea.style.resize = "none";
 		textArea.style.lineHeight = `${textNode.lineHeight()}`;
@@ -18718,29 +18774,42 @@ var WeaveTextNode = class extends WeaveNode {
 		textArea.style.transformOrigin = "left top";
 		textArea.style.textAlign = textNode.align();
 		textArea.style.color = `${textNode.fill()}`;
+		textArea.onfocus = () => {
+			textArea.style.height = "auto";
+			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+			textArea.setSelectionRange(textArea.value.length, textArea.value.length);
+		};
+		textArea.onkeydown = () => {
+			textArea.style.height = "auto";
+			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		};
+		textArea.onkeyup = () => {
+			textArea.style.height = "auto";
+			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		};
+		textArea.onwheel = (e) => {
+			e.preventDefault();
+		};
+		textArea.oninput = () => {
+			textArea.style.height = "auto";
+			textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		};
 		const rotation = textNode.rotation();
 		let transform = "";
 		if (rotation) transform += "rotateZ(" + rotation + "deg)";
-		const px = 1;
-		const py = 2;
-		transform += "translateX(-" + px + "px)";
-		transform += "translateY(-" + py + "px)";
+		const px = 0;
+		const py = -3 * textNode.getAbsoluteScale().x;
+		transform += "translateX(" + px + "px)";
+		transform += "translateY(" + py + "px)";
 		textArea.style.transform = transform;
 		const handleKeyDown = (e) => {
 			if (textArea && textNode) {
-				if (e.key === "Enter" && !e.shiftKey) {
-					textNode.text(textArea.value);
-					this.updateNode(textNode);
-					this.removeTextAreaDOM(textNode);
-					window.removeEventListener("click", handleOutsideClick);
-					return;
-				}
-				if (e.key === "Enter" && e.shiftKey) {
+				if (e.key === "Enter") {
 					if (textArea && textNode) try {
 						textNode.text(textArea.value);
 						textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
 						textArea.style.height = "auto";
-						textArea.style.height = textArea.scrollHeight + textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
+						textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
 						textArea.tabIndex = 1;
 						textArea.focus();
 					} catch (ex) {
@@ -18749,20 +18818,24 @@ var WeaveTextNode = class extends WeaveNode {
 					return;
 				}
 				if (e.key === "Escape") {
+					textNode.width(parseFloat(textArea.style.width) * (1 / textNode.getAbsoluteScale().x));
+					textNode.height((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
+					textNode.text(textArea.value);
+					this.updateNode(textNode);
 					this.removeTextAreaDOM(textNode);
+					this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
+					this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
 					window.removeEventListener("click", handleOutsideClick);
 					return;
 				}
 			}
 		};
-		const handleKeyUp = (e) => {
+		const handleKeyUp = () => {
 			textNode.text(textArea.value);
 			if (textArea && textNode) {
 				textArea.style.width = textNode.width() * textNode.getAbsoluteScale().x + "px";
-				if (!(e.key === "Enter" && e.shiftKey)) {
-					textArea.style.height = "auto";
-					textArea.style.height = textArea.scrollHeight + "px";
-				}
+				textArea.style.height = "auto";
+				textArea.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
 			}
 		};
 		textArea.addEventListener("keydown", handleKeyDown);
@@ -18795,7 +18868,7 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	removeTextAreaDOM(textNode) {
 		const stage = this.instance.getStage();
-		window.weaveTextEditing = false;
+		delete window.weaveTextEditing[textNode.id()];
 		const textArea = document.getElementById(textNode.id());
 		if (textArea) textArea.remove();
 		textNode.visible(true);
@@ -18848,6 +18921,7 @@ const IMAGE_TOOL_STATE = {
 var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
+	onPropsChange = void 0;
 	update = void 0;
 	constructor() {
 		super();
@@ -18903,13 +18977,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 			if (this.state === IMAGE_TOOL_STATE.ADDING && tempImage) {
 				const mousePos = stage.getRelativePointerPosition();
 				tempImage.setAttrs({
-					...this.props,
-					name: void 0,
 					x: (mousePos?.x ?? 0) + 2,
-					y: (mousePos?.y ?? 0) + 2,
-					fill: "#ccccccff",
-					stroke: "#000000ff",
-					strokeWidth: 1
+					y: (mousePos?.y ?? 0) + 2
 				});
 				const nodeHandler = this.instance.getNodeHandler("rectangle");
 				this.instance.updateNode(nodeHandler.serialize(tempImage));
@@ -18934,6 +19003,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 			this.instance.emitEvent("onImageLoadEnd", void 0);
 			if (this.imageId) this.props = {
 				...this.props,
+				imageURL: this.imageURL,
 				width: this.preloadImgs[this.imageId].width,
 				height: this.preloadImgs[this.imageId].height
 			};
@@ -18952,17 +19022,20 @@ var WeaveImageToolAction = class extends WeaveAction {
 		stage.container().focus();
 		if (this.imageId) {
 			const mousePos = stage.getRelativePointerPosition();
-			const nodeHandler = this.instance.getNodeHandler("rectangle");
+			const nodeHandler = this.instance.getNodeHandler("image");
 			this.tempImageId = v4_default();
+			const aspectRatio = this.preloadImgs[this.imageId].width / this.preloadImgs[this.imageId].height;
 			const node = nodeHandler.create(this.tempImageId, {
-				...this.props,
 				x: (mousePos?.x ?? 0) + 5,
 				y: (mousePos?.y ?? 0) + 5,
-				width: this.preloadImgs[this.imageId].width,
-				height: this.preloadImgs[this.imageId].height,
-				fill: "#ccccccff",
+				width: 100 * aspectRatio,
+				height: 100,
+				opacity: 1,
+				imageURL: this.imageURL,
 				stroke: "#000000ff",
-				strokeWidth: 1
+				strokeWidth: 0,
+				strokeScaleEnabled: false,
+				listening: false
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
 		}
@@ -19004,6 +19077,8 @@ var WeaveImageToolAction = class extends WeaveAction {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
 		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		if (params?.imageURL) {
 			this.loadImage(params.imageURL);
 			return;
@@ -19012,23 +19087,6 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.addImage();
 		return { finishUploadCallback: this.loadImage.bind(this) };
 	}
-	onPropsChange() {
-		const stage = this.instance?.getStage();
-		if (stage) {
-			const tempImage = this.instance.getStage().findOne(`#${this.tempImageId}`);
-			if (tempImage) {
-				tempImage.setAttrs({
-					...this.props,
-					name: void 0,
-					fill: "#ccccccff",
-					stroke: "#000000ff",
-					strokeWidth: 1
-				});
-				const nodeHandler = this.instance.getNodeHandler("rectangle");
-				this.instance.updateNode(nodeHandler.serialize(tempImage));
-			}
-		}
-	}
 	cleanup() {
 		const stage = this.instance.getStage();
 		if (this.imageId) delete this.preloadImgs[this.imageId];
@@ -19719,7 +19777,7 @@ const WEAVE_STAGE_ZOOM_KEY = "stageZoom";
 var WeaveStageZoomPlugin = class extends WeavePlugin {
 	getLayerName = void 0;
 	initLayer = void 0;
-	padding = 100;
+	padding = 175;
 	defaultStep = 3;
 	constructor(params) {
 		super();
@@ -19738,6 +19796,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 +19805,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 +19954,19 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 	disable() {
 		this.enabled = false;
 	}
+	initEvents() {
+		window.addEventListener("keydown", (e) => {
+			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
+		});
+		window.addEventListener("keyup", (e) => {
+			if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
+		});
+		window.addEventListener("wheel", (e) => {
+			if (!this.enabled || !this.isCtrlOrMetaPressed) return;
+			if (e.deltaY > 0) this.zoomOut();
+			if (e.deltaY < 0) this.zoomIn();
+		});
+	}
 };
 
 //#endregion
@@ -20275,6 +20348,8 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		stage.container().tabIndex = 1;
 		stage.container().focus();
 		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.props = this.initProps();
 		this.addRectangle();
 	}
@@ -20487,6 +20562,8 @@ var WeavePenToolAction = class extends WeaveAction {
 		stage.container().tabIndex = 1;
 		stage.container().focus();
 		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.props = this.initProps();
 		this.addLine();
 	}
@@ -20661,6 +20738,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		stage.container().tabIndex = 1;
 		stage.container().focus();
 		this.cancelAction = cancel;
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.props = this.initProps();
 		this.setState(BRUSH_TOOL_STATE.IDLE);
 		stage.container().style.cursor = "crosshair";
@@ -20752,7 +20830,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			text: "Your text here...",
 			width: 300,
 			fontSize: 20,
-			fontFamily: "NotoSansMono, monospace",
+			fontFamily: "Arial, sans-serif",
 			fill: "#000000ff",
 			strokeEnabled: false,
 			stroke: "#000000ff",
@@ -20771,11 +20849,19 @@ var WeaveTextToolAction = class extends WeaveAction {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
 		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.addText();
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) {
+			const node$1 = stage.findOne(`#${this.textId}`);
+			if (node$1) selectionPlugin.setSelectedNodes([node$1]);
+			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		}
 		const node = stage.findOne(`#${this.textId}`);
 		if (node) node.getAttr("triggerEditMode")(node);
 		this.initialCursor = null;
@@ -20873,6 +20959,8 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		stage.container().tabIndex = 1;
 		stage.container().focus();
 		this.cancelAction = cancelAction;
+		const selectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.props = this.initProps(params);
 		this.addFrame();
 	}
@@ -20995,6 +21083,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 +21121,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,40 +21195,48 @@ 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 = this.round(10 * this.config.gridSize, this.config.gridSize);
+		const overflowY = this.round(10 * this.config.gridSize, 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({
+			real: i / stage.scaleX(),
+			ref: i
+		});
 		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({
+			real: i / stage.scaleY(),
+			ref: i
+		});
 		for (let index = 0; index < pointsX.length; index++) {
-			const point = pointsX[index];
+			const { real: point, ref } = pointsX[index];
 			let color = this.config.gridColor;
 			if (point === 0) color = this.config.gridOriginColor;
 			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(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
 		for (let index = 0; index < pointsY.length; index++) {
-			const point = pointsY[index];
+			const { real: point, ref } = pointsY[index];
 			let color = this.config.gridColor;
 			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(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21146,18 +21245,26 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		const layer = this.getLayer();
 		if (!layer) return;
 		const stage = this.instance.getStage();
+		const overflowX = 10 * this.config.gridSize;
+		const overflowY = 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({
+			real: i / stage.scaleX(),
+			ref: i
+		});
 		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({
+			real: i / stage.scaleY(),
+			ref: i
+		});
 		for (let indexX = 0; indexX < pointsX.length; indexX++) {
-			const pointX = pointsX[indexX];
+			const { real: pointX, ref: refX } = pointsX[indexX];
 			for (let indexY = 0; indexY < pointsY.length; indexY++) {
-				const pointY = pointsY[indexY];
+				const { real: pointY, ref: refY } = pointsY[indexY];
 				let color = this.config.gridColor;
-				if (pointX === 0 || pointY === 0) color = this.config.gridOriginColor;
+				if (refX === 0 || refY === 0) color = this.config.gridOriginColor;
 				layer.add(new konva_lib_shapes_Circle.Circle({
 					x: pointX,
 					y: pointY,
@@ -21206,6 +21313,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 +21341,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();
@@ -21289,6 +21399,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			stage.x(stage.x() - deltaX);
 			stage.y(stage.y() - deltaY);
+			this.instance.emit("onStageMove", void 0);
 		});
 		stage.on("touchstart", (e) => {
 			e.evt.preventDefault();
@@ -21310,12 +21421,13 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			if (!this.enabled) return;
 			stage.x(stage.x() - deltaX);
 			stage.y(stage.y() - deltaY);
+			this.instance.emit("onStageMove", void 0);
 		});
-		stage.on("wheel", (e) => {
-			e.evt.preventDefault();
-			if (!this.enabled || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
-			stage.x(stage.x() - e.evt.deltaX);
-			stage.y(stage.y() - e.evt.deltaY);
+		window.addEventListener("wheel", (e) => {
+			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
+			stage.x(stage.x() - e.deltaX);
+			stage.y(stage.y() - e.deltaY);
+			this.instance.emit("stageMove", void 0);
 		});
 	}
 	enable() {
@@ -21442,9 +21554,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 +21565,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 +21583,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 +21599,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 +21632,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 				y: mousePos.y
 			});
 		});
-		this.instance.addEventListener("onZoomChange", () => {
-			this.renderPointers();
-		});
+		this.renderPointers();
 	}
 	stringToColour(str) {
 		let hash = 0;
@@ -21519,29 +21646,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 +21701,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 +21733,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;