@inditextech/weave-sdk 0.11.0 → 0.12.1

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;
@@ -15740,6 +15749,52 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 };
 
+//#endregion
+//#region src/utils.ts
+function resetScale(node) {
+	node.width(Math.round((Math.max(1, node.width() * node.scaleX()) + Number.EPSILON) * 100) / 100);
+	node.height(Math.round((Math.max(1, node.height() * node.scaleY()) + Number.EPSILON) * 100) / 100);
+	node.scaleX(1);
+	node.scaleY(1);
+	node.x(Math.round((node.x() + Number.EPSILON) * 100) / 100);
+	node.y(Math.round((node.y() + Number.EPSILON) * 100) / 100);
+	node.rotation(Math.round((node.rotation() + Number.EPSILON) * 100) / 100);
+}
+function clearContainerTargets(instance) {
+	const getContainers = instance.getContainerNodes();
+	for (const container of getContainers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+}
+function checkIfOverContainer(instance, node) {
+	const nodesIntersected = instance.pointIntersectsContainerElement();
+	let nodeActualContainer = node.getParent();
+	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+	let layerToMove = void 0;
+	if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+	return layerToMove;
+}
+function moveNodeToContainer(instance, node) {
+	const nodesIntersected = instance.pointIntersectsContainerElement();
+	let nodeActualContainer = node.getParent();
+	if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
+	let layerToMove = void 0;
+	if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
+	if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = instance.getMainLayer();
+	if (layerToMove) {
+		const nodePos = node.getAbsolutePosition();
+		const nodeRotation = node.getAbsoluteRotation();
+		node.moveTo(layerToMove);
+		node.setAbsolutePosition(nodePos);
+		node.rotation(nodeRotation);
+		node.x(node.x() - (layerToMove.getAttrs().containerOffsetX ?? 0));
+		node.y(node.y() - (layerToMove.getAttrs().containerOffsetY ?? 0));
+		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
+		const actualNode = nodeHandler.serialize(node);
+		instance.removeNode(actualNode);
+		instance.addNode(actualNode, layerToMove?.getAttrs().id);
+	}
+	return layerToMove;
+}
+
 //#endregion
 //#region src/plugins/nodes-selection/nodes-selection.ts
 var WeaveNodesSelectionPlugin = class extends WeavePlugin {
@@ -15860,6 +15915,22 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				e.cancelBubble = true;
 			}
 		});
+		tr.on("dragmove", (e) => {
+			if (this.isSelecting() && tr.nodes().length > 1) {
+				clearContainerTargets(this.instance);
+				const layerToMove = checkIfOverContainer(this.instance, e.target);
+				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+			}
+		});
+		tr.on("dragend", () => {
+			if (this.isSelecting() && tr.nodes().length > 1) {
+				clearContainerTargets(this.instance);
+				for (const node of tr.nodes()) {
+					const layerToMove = moveNodeToContainer(this.instance, node);
+					if (layerToMove) continue;
+				}
+			}
+		});
 		this.tr = tr;
 		this.selectionRectangle = selectionRectangle;
 		this.tr.on("dblclick dbltap", (evt) => {
@@ -15920,7 +15991,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;
 			}
@@ -15942,6 +16013,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) => {
@@ -15967,6 +16039,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;
@@ -16342,40 +16415,6 @@ var WeaveNode = class {
 		if (selectionPlugin.getSelectedNodes().length === 1 && selectionPlugin.getSelectedNodes()[0].getAttrs().id === ele.getAttrs().id) selected = true;
 		return selected;
 	}
-	clearContainerTargets() {
-		const getContainers = this.instance.getContainerNodes();
-		for (const container of getContainers) container.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
-	}
-	checkIfOverContainer(node) {
-		const nodesIntersected = this.instance.pointIntersectsContainerElement();
-		let nodeActualContainer = node.getParent();
-		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
-		let layerToMove = void 0;
-		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
-		return layerToMove;
-	}
-	moveNodeToContainer(node) {
-		const nodesIntersected = this.instance.pointIntersectsContainerElement();
-		let nodeActualContainer = node.getParent();
-		if (nodeActualContainer?.getAttrs().nodeId) nodeActualContainer = this.instance.getStage().findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
-		let layerToMove = void 0;
-		if (!node.getAttrs().containerId && nodesIntersected && nodeActualContainer?.getAttrs().id !== nodesIntersected.getAttrs().id) layerToMove = nodesIntersected;
-		if (!nodesIntersected && nodeActualContainer?.getAttrs().id !== __inditextech_weave_types.WEAVE_NODE_LAYER_ID) layerToMove = this.instance.getMainLayer();
-		if (layerToMove) {
-			const nodePos = node.getAbsolutePosition();
-			const nodeRotation = node.getAbsoluteRotation();
-			node.moveTo(layerToMove);
-			node.setAbsolutePosition(nodePos);
-			node.rotation(nodeRotation);
-			node.x(node.x() - (layerToMove.getAttrs().containerOffsetX ?? 0));
-			node.y(node.y() - (layerToMove.getAttrs().containerOffsetY ?? 0));
-			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-			const actualNode = nodeHandler.serialize(node);
-			this.instance.removeNode(actualNode);
-			this.instance.addNode(actualNode, layerToMove?.getAttrs().id);
-		}
-		return layerToMove;
-	}
 	setupDefaultNodeEvents(node) {
 		this.previousPointer = null;
 		this.instance.addEventListener("onNodesChange", () => {
@@ -16387,16 +16426,16 @@ var WeaveNode = class {
 		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
-				this.clearContainerTargets();
-				const layerToMove = this.checkIfOverContainer(e.target);
+				clearContainerTargets(this.instance);
+				const layerToMove = checkIfOverContainer(this.instance, e.target);
 				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
 				this.instance.updateNode(this.serialize(node));
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
-				this.clearContainerTargets();
-				const layerToMove = this.moveNodeToContainer(e.target);
+				clearContainerTargets(this.instance);
+				const layerToMove = moveNodeToContainer(this.instance, e.target);
 				if (layerToMove) return;
 				this.instance.updateNode(this.serialize(node));
 			}
@@ -17750,7 +17789,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;
 	}
@@ -17844,7 +17883,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.11.0";
+var version = "0.12.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18230,6 +18269,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() {
@@ -18482,18 +18523,6 @@ var Weave = class extends Emittery {
 	}
 };
 
-//#endregion
-//#region src/utils.ts
-function resetScale(node) {
-	node.width(Math.round((Math.max(1, node.width() * node.scaleX()) + Number.EPSILON) * 100) / 100);
-	node.height(Math.round((Math.max(1, node.height() * node.scaleY()) + Number.EPSILON) * 100) / 100);
-	node.scaleX(1);
-	node.scaleY(1);
-	node.x(Math.round((node.x() + Number.EPSILON) * 100) / 100);
-	node.y(Math.round((node.y() + Number.EPSILON) * 100) / 100);
-	node.rotation(Math.round((node.rotation() + Number.EPSILON) * 100) / 100);
-}
-
 //#endregion
 //#region src/nodes/stage/constants.ts
 const WEAVE_STAGE_NODE_TYPE = "stage";
@@ -18653,8 +18682,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();
@@ -18699,24 +18739,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()}`;
@@ -18724,29 +18790,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) {
@@ -18755,20 +18834,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);
@@ -18801,7 +18884,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);
@@ -18854,6 +18937,7 @@ const IMAGE_TOOL_STATE = {
 var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
+	onPropsChange = void 0;
 	update = void 0;
 	constructor() {
 		super();
@@ -18909,13 +18993,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));
@@ -18940,6 +19019,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
 			};
@@ -18958,17 +19038,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);
 		}
@@ -19010,6 +19093,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;
@@ -19018,23 +19103,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];
@@ -19651,8 +19719,8 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new konva.default.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: borderWidth,
-			y: titleHeight + borderWidth,
+			x: borderWidth * 2,
+			y: titleHeight + borderWidth * 2,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			draggable: false,
@@ -19661,8 +19729,8 @@ var WeaveFrameNode = class extends WeaveNode {
 			borderWidth,
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth,
-			clipHeight: props.frameHeight
+			clipWidth: props.frameWidth - borderWidth * 2,
+			clipHeight: props.frameHeight - borderWidth * 2
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
@@ -19725,7 +19793,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();
@@ -19903,18 +19971,16 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		this.enabled = false;
 	}
 	initEvents() {
-		const stage = this.instance.getStage();
-		stage.container().addEventListener("keydown", (e) => {
+		window.addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 		});
-		stage.container().addEventListener("keyup", (e) => {
+		window.addEventListener("keyup", (e) => {
 			if (!(e.ctrlKey || e.metaKey)) this.isCtrlOrMetaPressed = false;
 		});
-		stage.on("wheel", (e) => {
-			e.evt.preventDefault();
+		window.addEventListener("wheel", (e) => {
 			if (!this.enabled || !this.isCtrlOrMetaPressed) return;
-			if (e.evt.deltaY > 0) this.zoomOut();
-			if (e.evt.deltaY < 0) this.zoomIn();
+			if (e.deltaY > 0) this.zoomOut();
+			if (e.deltaY < 0) this.zoomIn();
 		});
 	}
 };
@@ -20262,15 +20328,25 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		const rectangle = this.instance.getStage().findOne(`#${this.rectId}`);
 		if (this.rectId && this.clickPoint && this.container && rectangle) {
 			const { mousePoint } = this.instance.getMousePointerRelativeToContainer(this.container);
-			const deltaX = mousePoint.x - this.clickPoint?.x;
-			const deltaY = mousePoint.y - this.clickPoint?.y;
 			const nodeHandler = this.instance.getNodeHandler("rectangle");
+			const rectPos = {
+				x: this.clickPoint.x,
+				y: this.clickPoint.y
+			};
+			let rectWidth = this.props.width;
+			let rectHeight = this.props.height;
+			if (this.moved) {
+				rectPos.x = Math.min(this.clickPoint.x, mousePoint.x);
+				rectPos.y = Math.min(this.clickPoint.y, mousePoint.y);
+				rectWidth = Math.abs(this.clickPoint.x - mousePoint.x);
+				rectHeight = Math.abs(this.clickPoint.y - mousePoint.y);
+			}
 			rectangle.setAttrs({
 				...this.props,
-				x: this.moved ? rectangle.getAttrs().x : this.clickPoint.x,
-				y: this.moved ? rectangle.getAttrs().y : this.clickPoint.y,
-				width: this.moved ? Math.abs(deltaX) : this.props.width,
-				height: this.moved ? Math.abs(deltaY) : this.props.height
+				x: rectPos.x,
+				y: rectPos.y,
+				width: rectWidth,
+				height: rectHeight
 			});
 			this.instance.updateNode(nodeHandler.serialize(rectangle));
 		}
@@ -20298,6 +20374,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();
 	}
@@ -20510,6 +20588,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();
 	}
@@ -20684,6 +20764,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";
@@ -20775,7 +20856,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",
@@ -20794,11 +20875,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;
@@ -20896,6 +20985,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();
 	}
@@ -21130,15 +21221,21 @@ 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 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 - overflowX; i < stageXRound + stage.width() + overflowX; 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 - overflowY; i < stageYRound + stage.height() + overflowY; 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({
@@ -21149,12 +21246,12 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 					(-stage.y() + stage.height() + overflowY) / stage.scaleY()
 				],
 				stroke: color,
-				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleX()))) ? 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({
@@ -21165,7 +21262,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 					point
 				],
 				stroke: color,
-				strokeWidth: (isZeroOrClose(point % (10 * (this.config.gridSize / stage.scaleY()))) ? 2.5 : .5) / stage.scaleX(),
+				strokeWidth: (isZeroOrClose(ref % (10 * this.config.gridSize)) ? 2.5 : .5) / stage.scaleX(),
 				listening: false
 			}));
 		}
@@ -21174,20 +21271,26 @@ 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 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 - overflowX; i < stageXRound + stage.width() + overflowX; 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 - overflowY; i < stageYRound + stage.height() + overflowY; 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,
@@ -21322,6 +21425,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();
@@ -21343,12 +21447,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();
+		window.addEventListener("wheel", (e) => {
 			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
-			stage.x(stage.x() - e.evt.deltaX);
-			stage.y(stage.y() - e.evt.deltaY);
+			stage.x(stage.x() - e.deltaX);
+			stage.y(stage.y() - e.deltaY);
+			this.instance.emit("stageMove", void 0);
 		});
 	}
 	enable() {
@@ -22086,4 +22191,7 @@ exports.WeaveTextToolAction = WeaveTextToolAction
 exports.WeaveUsersPointersPlugin = WeaveUsersPointersPlugin
 exports.WeaveZoomInToolAction = WeaveZoomInToolAction
 exports.WeaveZoomOutToolAction = WeaveZoomOutToolAction
+exports.checkIfOverContainer = checkIfOverContainer
+exports.clearContainerTargets = clearContainerTargets
+exports.moveNodeToContainer = moveNodeToContainer
 exports.resetScale = resetScale