@inditextech/weave-sdk 3.7.1 → 3.7.2

package/dist/sdk.js

@@ -22022,7 +22022,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.7.1";
+var version = "3.7.2";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25125,7 +25125,14 @@ var WeaveTextNode = class extends WeaveNode {
 			const clonedText = actNode.clone();
 			clonedText.setAttr("triggerEditMode", void 0);
 			clonedText.setAttr("cancelEditMode", void 0);
-			this.instance.updateNode(this.serialize(clonedText));
+			if (this.createNode && actNode.getAttrs().text !== "") {
+				const actualContainer = actNode.getParent();
+				actNode.destroy();
+				const serializedNode = this.serialize(clonedText);
+				this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
+			} else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
+			else this.instance.updateNode(this.serialize(clonedText));
+			this.createNode = false;
 			clonedText.destroy();
 		}
 	}
@@ -25225,6 +25232,7 @@ var WeaveTextNode = class extends WeaveNode {
 			else this.getNodesSelectionPlugin()?.getTransformer()?.keepRatio(false);
 			if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "")) {
 				text.wrap("word");
+				text.scaleY(1);
 				text.height(void 0);
 			}
 			e.cancelBubble = true;
@@ -25250,7 +25258,7 @@ var WeaveTextNode = class extends WeaveNode {
 			text.setAttr("shouldUpdateOnTransform", false);
 			text.getLayer()?.batchDraw();
 		};
-		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
+		text.on("transform", handleTextTransform);
 		const handleTransformEnd = () => {
 			this.instance.emitEvent("onTransform", null);
 			let definedSmartWidth = false;
@@ -25279,6 +25287,7 @@ var WeaveTextNode = class extends WeaveNode {
 				definedSmartWidth = true;
 				text.width(Math.ceil(text.width() * text.scaleX()));
 				text.scaleX(1);
+				text.scaleY(1);
 				text.height(void 0);
 				text.getLayer()?.batchDraw();
 				text.height(Math.ceil(text.height()));
@@ -25293,7 +25302,7 @@ var WeaveTextNode = class extends WeaveNode {
 			handleTransformEnd();
 		});
 		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
-			if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
+			if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
 		});
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
@@ -25302,14 +25311,6 @@ var WeaveTextNode = class extends WeaveNode {
 		return text;
 	}
 	onUpdate(nodeInstance, nextProps) {
-		const actualFontFamily = nodeInstance.getAttrs().fontFamily;
-		const actualFontSize = nodeInstance.getAttrs().fontSize;
-		const actualFontStyle = nodeInstance.getAttrs().fontStyle;
-		const actualFontVariant = nodeInstance.getAttrs().fontVariant;
-		const actualTextDecoration = nodeInstance.getAttrs().textDecoration;
-		const actualLineHeight = nodeInstance.getAttrs().lineHeight;
-		let updateNeeded = false;
-		if (actualFontFamily !== nextProps.fontFamily || actualFontSize !== nextProps.fontSize || actualFontStyle !== nextProps.fontStyle || actualFontVariant !== nextProps.fontVariant || actualTextDecoration !== nextProps.textDecoration || actualLineHeight !== nextProps.lineHeight) updateNeeded = true;
 		nodeInstance.setAttrs({
 			...nextProps,
 			...!this.config.outline.enabled && { strokeEnabled: false },
@@ -25324,22 +25325,20 @@ var WeaveTextNode = class extends WeaveNode {
 		let height = nextProps.height;
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
 			const { width: textAreaWidth, height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
-			width = textAreaWidth;
-			height = textAreaHeight;
+			width = (textAreaWidth + 2) * nodeInstance.getAbsoluteScale().x;
+			height = (textAreaHeight + 2) * nodeInstance.getAbsoluteScale().x;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.SMART && !nextProps.smartFixedWidth) {
 			const { width: textAreaWidth } = this.textRenderedSize(nextProps.text, nodeInstance);
-			width = textAreaWidth;
+			width = textAreaWidth / this.instance.getStage().scaleX();
 			height = void 0;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.SMART && nextProps.smartFixedWidth) height = void 0;
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) height = void 0;
-		if (nextProps.layout === TEXT_LAYOUT.FIXED) updateNeeded = false;
 		nodeInstance.setAttrs({
 			width,
 			height
 		});
-		if (updateNeeded) this.instance.updateNode(this.serialize(nodeInstance));
 		if (this.editing) this.updateTextAreaDOM(nodeInstance);
 		if (!this.editing) {
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -25387,14 +25386,17 @@ var WeaveTextNode = class extends WeaveNode {
 		if (!this.textArea || !this.textAreaContainer) return;
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 			const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
-			this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 1 + "px";
+			const width = (textAreaWidth + 2) * textNode.getAbsoluteScale().x / this.instance.getStage().scaleX();
+			this.textAreaContainer.style.width = width + "px";
 		}
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) {
 			this.textAreaContainer.style.height = "auto";
-			this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y + "px";
+			const height$1 = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
+			this.textAreaContainer.style.height = height$1 + "px";
 		}
 		this.textArea.style.height = "auto";
-		this.textArea.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
+		const height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
+		this.textArea.style.height = height + "px";
 		this.textArea.rows = this.textArea.value.split("\n").length;
 	}
 	measureMultilineText(textNode) {
@@ -25416,8 +25418,8 @@ var WeaveTextNode = class extends WeaveNode {
 			height = height + textSize.height * (textNode.lineHeight() ?? 1);
 		}
 		return {
-			width: width * 1.01,
-			height
+			width: width * this.instance.getStage().scaleX() * 1.01,
+			height: height * this.instance.getStage().scaleX() * 1.01
 		};
 	}
 	mimicTextNode(textNode) {
@@ -25426,7 +25428,7 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.rows = textNode.text().split("\n").length;
 		this.textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
 		this.textArea.style.opacity = `${textNode.getAttrs().opacity}`;
-		this.textArea.style.lineHeight = `${textNode.lineHeight()}`;
+		this.textArea.style.lineHeight = `${textNode.lineHeight()}em`;
 		this.textArea.style.fontFamily = textNode.fontFamily();
 		let fontWeight = "normal";
 		let fontStyle = "normal";
@@ -25439,6 +25441,10 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.textDecoration = textNode.textDecoration();
 		this.textArea.style.textAlign = textNode.align();
 		this.textArea.style.color = `${textNode.fill()}`;
+		if (this.config.outline.enabled) {
+			this.textArea.style.paintOrder = "stroke fill";
+			this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
+		}
 	}
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
@@ -25477,19 +25483,19 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer.style.left = position.x * upscaleScale + "px";
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && textNode.getAttrs().smartFixedWidth) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 10) * stage.scaleX() + "px";
-			if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 10) * textNode.getAbsoluteScale().x + "px";
+			if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
 			this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
@@ -25499,6 +25505,7 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.position = "absolute";
 		this.textArea.style.top = "0px";
 		this.textArea.style.left = "0px";
+		this.textArea.style.lineHeight = "1em";
 		this.textArea.style.overscrollBehavior = "contains";
 		this.textArea.style.scrollBehavior = "auto";
 		this.textArea.style.caretColor = "black";
@@ -25507,31 +25514,22 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.margin = "0px";
 		this.textArea.style.padding = "0px";
 		this.textArea.style.paddingTop = "0px";
-		this.textArea.style.boxSizing = "content-box";
+		this.textArea.style.boxSizing = "border-box";
 		this.textArea.style.overflow = "hidden";
 		this.textArea.style.background = "transparent";
 		this.textArea.style.border = "none";
 		this.textArea.style.outline = "none";
 		this.textArea.style.resize = "none";
 		this.textArea.style.overflow = "hidden";
+		if (this.config.outline.enabled) {
+			this.textArea.style.paintOrder = "stroke fill";
+			this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
+		}
 		this.textArea.style.backgroundColor = "transparent";
 		this.textAreaContainer.style.transformOrigin = "left top";
 		this.mimicTextNode(textNode);
-		const loadedFonts = this.instance.getFonts();
-		const fontFamily = this.textArea.style.fontFamily;
-		const actualFont = loadedFonts.find((f) => f.name === fontFamily);
-		const correctionX = (actualFont === void 0 ? 0 : actualFont.offsetX ?? 0) * stage.scaleX();
-		const correctionY = (actualFont === void 0 ? 0 : actualFont.offsetY ?? 0) * stage.scaleX();
-		this.textArea.style.left = `${correctionX - 1}px`;
-		this.textArea.style.top = `${correctionY}px`;
-		const updateTextNode = () => {
-			if (!this.textArea) return;
-			updateTextNodeSize();
-			textNode.text(this.textArea.value);
-			textNode.visible(true);
-			this.instance.updateNode(this.serialize(textNode));
-		};
-		const throttledUpdateTextNode = (0, import_lodash.throttle)(updateTextNode, 300);
+		this.textArea.style.left = `-1px`;
+		this.textArea.style.top = `-1px`;
 		this.textArea.onfocus = () => {
 			this.textAreaDomResize(textNode);
 		};
@@ -25545,11 +25543,9 @@ var WeaveTextNode = class extends WeaveNode {
 		};
 		this.textArea.onpaste = () => {
 			this.textAreaDomResize(textNode);
-			throttledUpdateTextNode();
 		};
 		this.textArea.oninput = () => {
 			this.textAreaDomResize(textNode);
-			throttledUpdateTextNode();
 		};
 		this.textAreaSuperContainer.addEventListener("scroll", () => {
 			if (this.textAreaSuperContainer) {
@@ -25576,7 +25572,8 @@ var WeaveTextNode = class extends WeaveNode {
 			if (!this.textArea) return;
 			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 				const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
-				textNode.width(textAreaWidth);
+				const width = textAreaWidth / this.instance.getStage().scaleX();
+				textNode.width(width);
 			}
 			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
 		};
@@ -25697,7 +25694,8 @@ var WeaveTextNode = class extends WeaveNode {
 		stage.container().focus();
 		this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
 	}
-	triggerEditMode(textNode) {
+	triggerEditMode(textNode, create = false) {
+		if (create) this.createNode = true;
 		const lockAcquired = this.instance.setMutexLock({
 			nodeIds: [textNode.id()],
 			operation: "text-edit"
@@ -27255,6 +27253,8 @@ var WeaveImageNode = class extends WeaveNode {
 		const nodeId = nodeInstance.getAttrs().id ?? "";
 		const isMoveContainer = nodeInstance.getAttr("onMoveContainer");
 		nodeInstance.setAttr("onMoveContainer", void 0);
+		const utilityLayer = this.instance.getUtilityLayer();
+		utilityLayer?.destroyChildren();
 		if (this.imageTryoutIds[nodeId]) {
 			clearTimeout(this.imageTryoutIds[nodeId]);
 			delete this.imageTryoutIds[nodeId];
@@ -34282,6 +34282,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			fontFamily: "Arial, sans-serif",
 			fill: "#000000",
 			align: "left",
+			lineHeight: 1,
 			verticalAlign: "top",
 			strokeEnabled: false
 		};
@@ -34335,7 +34336,8 @@ var WeaveTextToolAction = class extends WeaveAction {
 				y: this.clickPoint?.y ?? 0,
 				draggable: true
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
+			const renderedNode = nodeHandler.onRender(node.props);
+			this.container.add(renderedNode);
 			this.instance.emitEvent("onAddedArrow");
 		}
 		this.setState(TEXT_TOOL_STATE.FINISHED);
@@ -34360,7 +34362,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		const node = stage.findOne(`#${this.textId}`);
-		if (node) node.getAttr("triggerEditMode")(node);
+		if (node) node.getAttr("triggerEditMode")(node, true);
 		this.initialCursor = null;
 		this.textId = null;
 		this.container = void 0;

package/dist/sdk.node.js

@@ -22021,7 +22021,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.7.1";
+var version = "3.7.2";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25124,7 +25124,14 @@ var WeaveTextNode = class extends WeaveNode {
 			const clonedText = actNode.clone();
 			clonedText.setAttr("triggerEditMode", void 0);
 			clonedText.setAttr("cancelEditMode", void 0);
-			this.instance.updateNode(this.serialize(clonedText));
+			if (this.createNode && actNode.getAttrs().text !== "") {
+				const actualContainer = actNode.getParent();
+				actNode.destroy();
+				const serializedNode = this.serialize(clonedText);
+				this.instance.addNode(serializedNode, actualContainer?.getAttrs().id);
+			} else if (this.createNode && actNode.getAttrs().text === "") actNode.destroy();
+			else this.instance.updateNode(this.serialize(clonedText));
+			this.createNode = false;
 			clonedText.destroy();
 		}
 	}
@@ -25224,6 +25231,7 @@ var WeaveTextNode = class extends WeaveNode {
 			else this.getNodesSelectionPlugin()?.getTransformer()?.keepRatio(false);
 			if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "")) {
 				text.wrap("word");
+				text.scaleY(1);
 				text.height(void 0);
 			}
 			e.cancelBubble = true;
@@ -25249,7 +25257,7 @@ var WeaveTextNode = class extends WeaveNode {
 			text.setAttr("shouldUpdateOnTransform", false);
 			text.getLayer()?.batchDraw();
 		};
-		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
+		text.on("transform", handleTextTransform);
 		const handleTransformEnd = () => {
 			this.instance.emitEvent("onTransform", null);
 			let definedSmartWidth = false;
@@ -25278,6 +25286,7 @@ var WeaveTextNode = class extends WeaveNode {
 				definedSmartWidth = true;
 				text.width(Math.ceil(text.width() * text.scaleX()));
 				text.scaleX(1);
+				text.scaleY(1);
 				text.height(void 0);
 				text.getLayer()?.batchDraw();
 				text.height(Math.ceil(text.height()));
@@ -25292,7 +25301,7 @@ var WeaveTextNode = class extends WeaveNode {
 			handleTransformEnd();
 		});
 		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
-			if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
+			if (node.id() === text.id() && node.getParent() !== text.getParent() && this.editing) text.getAttr("cancelEditMode")?.();
 		});
 		if (!this.instance.isServerSide() && !this.keyPressHandler) {
 			this.keyPressHandler = this.handleKeyPress.bind(this);
@@ -25301,14 +25310,6 @@ var WeaveTextNode = class extends WeaveNode {
 		return text;
 	}
 	onUpdate(nodeInstance, nextProps) {
-		const actualFontFamily = nodeInstance.getAttrs().fontFamily;
-		const actualFontSize = nodeInstance.getAttrs().fontSize;
-		const actualFontStyle = nodeInstance.getAttrs().fontStyle;
-		const actualFontVariant = nodeInstance.getAttrs().fontVariant;
-		const actualTextDecoration = nodeInstance.getAttrs().textDecoration;
-		const actualLineHeight = nodeInstance.getAttrs().lineHeight;
-		let updateNeeded = false;
-		if (actualFontFamily !== nextProps.fontFamily || actualFontSize !== nextProps.fontSize || actualFontStyle !== nextProps.fontStyle || actualFontVariant !== nextProps.fontVariant || actualTextDecoration !== nextProps.textDecoration || actualLineHeight !== nextProps.lineHeight) updateNeeded = true;
 		nodeInstance.setAttrs({
 			...nextProps,
 			...!this.config.outline.enabled && { strokeEnabled: false },
@@ -25323,22 +25324,20 @@ var WeaveTextNode = class extends WeaveNode {
 		let height = nextProps.height;
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
 			const { width: textAreaWidth, height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
-			width = textAreaWidth;
-			height = textAreaHeight;
+			width = (textAreaWidth + 2) * nodeInstance.getAbsoluteScale().x;
+			height = (textAreaHeight + 2) * nodeInstance.getAbsoluteScale().x;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.SMART && !nextProps.smartFixedWidth) {
 			const { width: textAreaWidth } = this.textRenderedSize(nextProps.text, nodeInstance);
-			width = textAreaWidth;
+			width = textAreaWidth / this.instance.getStage().scaleX();
 			height = void 0;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.SMART && nextProps.smartFixedWidth) height = void 0;
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) height = void 0;
-		if (nextProps.layout === TEXT_LAYOUT.FIXED) updateNeeded = false;
 		nodeInstance.setAttrs({
 			width,
 			height
 		});
-		if (updateNeeded) this.instance.updateNode(this.serialize(nodeInstance));
 		if (this.editing) this.updateTextAreaDOM(nodeInstance);
 		if (!this.editing) {
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -25386,14 +25385,17 @@ var WeaveTextNode = class extends WeaveNode {
 		if (!this.textArea || !this.textAreaContainer) return;
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 			const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
-			this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 1 + "px";
+			const width = (textAreaWidth + 2) * textNode.getAbsoluteScale().x / this.instance.getStage().scaleX();
+			this.textAreaContainer.style.width = width + "px";
 		}
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) {
 			this.textAreaContainer.style.height = "auto";
-			this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y + "px";
+			const height$1 = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
+			this.textAreaContainer.style.height = height$1 + "px";
 		}
 		this.textArea.style.height = "auto";
-		this.textArea.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
+		const height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y;
+		this.textArea.style.height = height + "px";
 		this.textArea.rows = this.textArea.value.split("\n").length;
 	}
 	measureMultilineText(textNode) {
@@ -25415,8 +25417,8 @@ var WeaveTextNode = class extends WeaveNode {
 			height = height + textSize.height * (textNode.lineHeight() ?? 1);
 		}
 		return {
-			width: width * 1.01,
-			height
+			width: width * this.instance.getStage().scaleX() * 1.01,
+			height: height * this.instance.getStage().scaleX() * 1.01
 		};
 	}
 	mimicTextNode(textNode) {
@@ -25425,7 +25427,7 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.rows = textNode.text().split("\n").length;
 		this.textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
 		this.textArea.style.opacity = `${textNode.getAttrs().opacity}`;
-		this.textArea.style.lineHeight = `${textNode.lineHeight()}`;
+		this.textArea.style.lineHeight = `${textNode.lineHeight()}em`;
 		this.textArea.style.fontFamily = textNode.fontFamily();
 		let fontWeight = "normal";
 		let fontStyle = "normal";
@@ -25438,6 +25440,10 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.textDecoration = textNode.textDecoration();
 		this.textArea.style.textAlign = textNode.align();
 		this.textArea.style.color = `${textNode.fill()}`;
+		if (this.config.outline.enabled) {
+			this.textArea.style.paintOrder = "stroke fill";
+			this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
+		}
 	}
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
@@ -25476,19 +25482,19 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer.style.left = position.x * upscaleScale + "px";
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && textNode.getAttrs().smartFixedWidth) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 10) * stage.scaleX() + "px";
-			if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 10) * textNode.getAbsoluteScale().x + "px";
+			if (textNode.getAttrs().smartFixedWidth) this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
 			this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
@@ -25498,6 +25504,7 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.position = "absolute";
 		this.textArea.style.top = "0px";
 		this.textArea.style.left = "0px";
+		this.textArea.style.lineHeight = "1em";
 		this.textArea.style.overscrollBehavior = "contains";
 		this.textArea.style.scrollBehavior = "auto";
 		this.textArea.style.caretColor = "black";
@@ -25506,31 +25513,22 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.margin = "0px";
 		this.textArea.style.padding = "0px";
 		this.textArea.style.paddingTop = "0px";
-		this.textArea.style.boxSizing = "content-box";
+		this.textArea.style.boxSizing = "border-box";
 		this.textArea.style.overflow = "hidden";
 		this.textArea.style.background = "transparent";
 		this.textArea.style.border = "none";
 		this.textArea.style.outline = "none";
 		this.textArea.style.resize = "none";
 		this.textArea.style.overflow = "hidden";
+		if (this.config.outline.enabled) {
+			this.textArea.style.paintOrder = "stroke fill";
+			this.textArea.style.webkitTextStroke = `${this.config.outline.width * this.instance.getStage().scaleX()}px ${this.config.outline.color}`;
+		}
 		this.textArea.style.backgroundColor = "transparent";
 		this.textAreaContainer.style.transformOrigin = "left top";
 		this.mimicTextNode(textNode);
-		const loadedFonts = this.instance.getFonts();
-		const fontFamily = this.textArea.style.fontFamily;
-		const actualFont = loadedFonts.find((f) => f.name === fontFamily);
-		const correctionX = (actualFont === void 0 ? 0 : actualFont.offsetX ?? 0) * stage.scaleX();
-		const correctionY = (actualFont === void 0 ? 0 : actualFont.offsetY ?? 0) * stage.scaleX();
-		this.textArea.style.left = `${correctionX - 1}px`;
-		this.textArea.style.top = `${correctionY}px`;
-		const updateTextNode = () => {
-			if (!this.textArea) return;
-			updateTextNodeSize();
-			textNode.text(this.textArea.value);
-			textNode.visible(true);
-			this.instance.updateNode(this.serialize(textNode));
-		};
-		const throttledUpdateTextNode = (0, import_lodash.throttle)(updateTextNode, 300);
+		this.textArea.style.left = `-1px`;
+		this.textArea.style.top = `-1px`;
 		this.textArea.onfocus = () => {
 			this.textAreaDomResize(textNode);
 		};
@@ -25544,11 +25542,9 @@ var WeaveTextNode = class extends WeaveNode {
 		};
 		this.textArea.onpaste = () => {
 			this.textAreaDomResize(textNode);
-			throttledUpdateTextNode();
 		};
 		this.textArea.oninput = () => {
 			this.textAreaDomResize(textNode);
-			throttledUpdateTextNode();
 		};
 		this.textAreaSuperContainer.addEventListener("scroll", () => {
 			if (this.textAreaSuperContainer) {
@@ -25575,7 +25571,8 @@ var WeaveTextNode = class extends WeaveNode {
 			if (!this.textArea) return;
 			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART && !textNode.getAttrs().smartFixedWidth) {
 				const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
-				textNode.width(textAreaWidth);
+				const width = textAreaWidth / this.instance.getStage().scaleX();
+				textNode.width(width);
 			}
 			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.SMART) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
 		};
@@ -25696,7 +25693,8 @@ var WeaveTextNode = class extends WeaveNode {
 		stage.container().focus();
 		this.instance.emitEvent("onExitTextNodeEditMode", { node: textNode });
 	}
-	triggerEditMode(textNode) {
+	triggerEditMode(textNode, create = false) {
+		if (create) this.createNode = true;
 		const lockAcquired = this.instance.setMutexLock({
 			nodeIds: [textNode.id()],
 			operation: "text-edit"
@@ -27254,6 +27252,8 @@ var WeaveImageNode = class extends WeaveNode {
 		const nodeId = nodeInstance.getAttrs().id ?? "";
 		const isMoveContainer = nodeInstance.getAttr("onMoveContainer");
 		nodeInstance.setAttr("onMoveContainer", void 0);
+		const utilityLayer = this.instance.getUtilityLayer();
+		utilityLayer?.destroyChildren();
 		if (this.imageTryoutIds[nodeId]) {
 			clearTimeout(this.imageTryoutIds[nodeId]);
 			delete this.imageTryoutIds[nodeId];
@@ -34281,6 +34281,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			fontFamily: "Arial, sans-serif",
 			fill: "#000000",
 			align: "left",
+			lineHeight: 1,
 			verticalAlign: "top",
 			strokeEnabled: false
 		};
@@ -34334,7 +34335,8 @@ var WeaveTextToolAction = class extends WeaveAction {
 				y: this.clickPoint?.y ?? 0,
 				draggable: true
 			});
-			this.instance.addNode(node, this.container?.getAttrs().id);
+			const renderedNode = nodeHandler.onRender(node.props);
+			this.container.add(renderedNode);
 			this.instance.emitEvent("onAddedArrow");
 		}
 		this.setState(TEXT_TOOL_STATE.FINISHED);
@@ -34359,7 +34361,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		const node = stage.findOne(`#${this.textId}`);
-		if (node) node.getAttr("triggerEditMode")(node);
+		if (node) node.getAttr("triggerEditMode")(node, true);
 		this.initialCursor = null;
 		this.textId = null;
 		this.container = void 0;

package/dist/types.d.ts

@@ -5,15 +5,15 @@ import * as Y$1 from "yjs";
 import * as Y from "yjs";
 import { Doc } from "yjs";
 import * as konva_lib_types8 from "konva/lib/types";
-import * as konva_lib_types16 from "konva/lib/types";
-import * as konva_lib_types17 from "konva/lib/types";
+import * as konva_lib_types22 from "konva/lib/types";
+import * as konva_lib_types23 from "konva/lib/types";
 import { Vector2d } from "konva/lib/types";
+import * as konva_lib_Node14 from "konva/lib/Node";
+import * as konva_lib_Node15 from "konva/lib/Node";
+import * as konva_lib_Node16 from "konva/lib/Node";
+import * as konva_lib_Node17 from "konva/lib/Node";
 import * as konva_lib_Node18 from "konva/lib/Node";
 import * as konva_lib_Node19 from "konva/lib/Node";
-import * as konva_lib_Node20 from "konva/lib/Node";
-import * as konva_lib_Node21 from "konva/lib/Node";
-import * as konva_lib_Node22 from "konva/lib/Node";
-import * as konva_lib_Node23 from "konva/lib/Node";
 import * as konva_lib_Node0 from "konva/lib/Node";
 import * as konva_lib_Node1 from "konva/lib/Node";
 import * as konva_lib_Node2 from "konva/lib/Node";
@@ -29,8 +29,8 @@ import { Stage, StageConfig } from "konva/lib/Stage";
 import * as konva_lib_shapes_Transformer4 from "konva/lib/shapes/Transformer";
 import { TransformerConfig } from "konva/lib/shapes/Transformer";
 import * as konva_lib_shapes_Rect12 from "konva/lib/shapes/Rect";
-import * as konva_lib_shapes_Line14 from "konva/lib/shapes/Line";
-import * as konva_lib_shapes_Line15 from "konva/lib/shapes/Line";
+import * as konva_lib_shapes_Line20 from "konva/lib/shapes/Line";
+import * as konva_lib_shapes_Line21 from "konva/lib/shapes/Line";
 import * as konva_lib_Layer13 from "konva/lib/Layer";
 
 //#region src/stores/store.d.ts
@@ -952,7 +952,7 @@ declare class WeaveTargetingManager {
   nodeIntersectsContainerElement(node: Konva.Node | Konva.Transformer, actualLayer?: Konva.Layer | Konva.Group): Konva.Node | undefined;
   getMousePointer(point?: Konva.Vector2d): WeaveMousePointInfo;
   getMousePointerRelativeToContainer(container: Konva.Node | Konva.Layer): WeaveMousePointInfoSimple;
-  getRealSelectedNode: (nodeTarget: Konva.Node) => konva_lib_Node19.Node<konva_lib_Node18.NodeConfig>;
+  getRealSelectedNode: (nodeTarget: Konva.Node) => konva_lib_Node15.Node<konva_lib_Node14.NodeConfig>;
 }
 
 //#endregion
@@ -971,8 +971,8 @@ declare class WeaveCloningManager {
   cloneNode(targetNode: Konva.Node): Konva.Node | undefined;
   addClone(node: Konva.Node): void;
   removeClone(node: Konva.Node): void;
-  getClones(): konva_lib_Node21.Node<konva_lib_Node20.NodeConfig>[];
-  isClone(node: Konva.Node): konva_lib_Node23.Node<konva_lib_Node22.NodeConfig> | undefined;
+  getClones(): konva_lib_Node17.Node<konva_lib_Node16.NodeConfig>[];
+  isClone(node: Konva.Node): konva_lib_Node19.Node<konva_lib_Node18.NodeConfig> | undefined;
   cleanupClones(): void;
 }
 
@@ -1698,6 +1698,7 @@ type WeaveTextLayout = (typeof TEXT_LAYOUT)[WeaveTextLayoutKeys];
 declare class WeaveTextNode extends WeaveNode {
   private config;
   protected nodeType: string;
+  private createNode;
   private editing;
   private textAreaSuperContainer;
   private textAreaContainer;
@@ -2188,10 +2189,10 @@ declare class WeaveBaseLineTipManager {
   render(instance: Konva.Group, point: WeaveStrokeSingleNodeTipSide): void;
   update(instance: Konva.Group, point: WeaveStrokeSingleNodeTipSide): void;
   protected getTip(instance: Konva.Group, point: WeaveStrokeSingleNodeTipSide): Konva.Node | undefined;
-  protected getInternalLine(instance: Konva.Group): konva_lib_shapes_Line15.Line<konva_lib_shapes_Line14.LineConfig> | undefined;
+  protected getInternalLine(instance: Konva.Group): konva_lib_shapes_Line21.Line<konva_lib_shapes_Line20.LineConfig> | undefined;
   protected getLinePoints(instance: Konva.Group): {
-    lineStartPoint: konva_lib_types16.Vector2d;
-    lineEndPoint: konva_lib_types17.Vector2d;
+    lineStartPoint: konva_lib_types22.Vector2d;
+    lineEndPoint: konva_lib_types23.Vector2d;
   };
 }
 
@@ -3361,6 +3362,7 @@ declare class WeaveTextToolAction extends WeaveAction {
     fontFamily: string;
     fill: string;
     align: string;
+    lineHeight: number;
     verticalAlign: string;
     strokeEnabled: boolean;
   };