@inditextech/weave-sdk 3.0.0 → 3.1.0

package/dist/sdk.node.js

@@ -17878,6 +17878,8 @@ function getTopmostShadowHost(el) {
 	return current?.shadowRoot || null;
 }
 function getVisibleNodes({ instance, stage, nodeParent, skipNodes, referenceLayer }) {
+	const nodesSelection = instance.getPlugin("nodesSelection");
+	if (nodesSelection) nodesSelection.getTransformer().hide();
 	const nodes = getVisibleNodesInViewport(stage, referenceLayer);
 	const finalVisibleNodes = [];
 	nodes.forEach((node) => {
@@ -17890,6 +17892,7 @@ function getVisibleNodes({ instance, stage, nodeParent, skipNodes, referenceLaye
 		if (node.getParent() !== referenceLayer && !node.getParent()?.getAttrs().nodeId) return;
 		finalVisibleNodes.push(node);
 	});
+	if (nodesSelection) nodesSelection.getTransformer().show();
 	return finalVisibleNodes;
 }
 function memoize(fn) {
@@ -18754,8 +18757,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("transformstart", () => {
 			this.transformInProcess = true;
 			this.triggerSelectedNodesEvent();
-			tr.visible(false);
-			tr.forceUpdate();
 			const selectedNodes$1 = tr.nodes();
 			for (const node of selectedNodes$1) {
 				node.handleMouseout();
@@ -18823,8 +18824,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("transform", (0, import_throttle.default)(handleTransform, DEFAULT_THROTTLE_MS));
 		tr.on("transformend", () => {
 			this.transformInProcess = false;
-			tr.visible(true);
-			tr.forceUpdate();
 			if (this.getSelectedNodes().length > 1) this.instance.releaseMutexLock();
 			const selectedNodes$1 = tr.nodes();
 			for (const node of selectedNodes$1) {
@@ -18842,8 +18841,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		let selectedNodes = [];
 		tr.on("dragstart", (e) => {
 			this.dragInProcess = true;
-			tr.visible(false);
-			tr.forceUpdate();
 			const mainLayer = this.instance.getMainLayer();
 			if (!mainLayer) return;
 			initialPos = {
@@ -18918,8 +18915,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		tr.on("dragmove", (0, import_throttle.default)(handleDragMove, DEFAULT_THROTTLE_MS));
 		tr.on("dragend", (e) => {
 			this.dragInProcess = false;
-			tr.visible(true);
-			tr.forceUpdate();
 			const mainLayer = this.instance.getMainLayer();
 			if (!mainLayer) return;
 			this.instance.getSelectionLayer()?.hitGraphEnabled(true);
@@ -19224,7 +19219,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 		});
 		stage.container().addEventListener("keyup", (e) => {
-			if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = false;
+			if (!(e.ctrlKey || e.metaKey)) this.isCtrlMetaPressed = false;
 			if (e.code === "Space") this.isSpaceKeyPressed = false;
 		});
 		stage.on("pointerdown", (e) => {
@@ -19401,8 +19396,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selecting = false;
 			this.stopPanLoop();
 			this.tr.nodes([...selectedNodes]);
-			this.handleBehaviors();
 			this.handleMultipleSelectionBehavior();
+			this.handleBehaviors();
 			if (this.tr.nodes().length > 0) {
 				stage.container().tabIndex = 1;
 				stage.container().focus();
@@ -19513,8 +19508,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.tr.nodes(nodes);
 			areNodesSelected = true;
 		}
-		this.handleBehaviors();
 		this.handleMultipleSelectionBehavior();
+		this.handleBehaviors();
 		if (areNodesSelected) {
 			stage.container().tabIndex = 1;
 			stage.container().focus();
@@ -19550,11 +19545,12 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			for (const node of nodes) anchorsArrays.push(node?.allowedAnchors() ?? []);
 			const enabledAnchors = intersectArrays(anchorsArrays);
 			transformerAttrs.enabledAnchors = enabledAnchors;
-			this.tr.enabledAnchors(transformerAttrs.enabledAnchors);
 		}
 		if (this.tr && this.tr.nodes().length > 0) {
+			if (transformerAttrs.enabledAnchors?.length === 0) transformerAttrs.resizeEnabled = false;
 			this.tr.setAttrs(transformerAttrs);
 			this.tr.forceUpdate();
+			this.tr.getLayer()?.batchDraw();
 		}
 	}
 	setSelectedNodes(nodes) {
@@ -19871,8 +19867,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		}
 	}
 	handlePaste(position, relativePosition) {
-		const stage = this.instance.getStage();
-		if (this.toPaste) {
+		this.instance.stateTransactional(() => {
+			const stage = this.instance.getStage();
+			if (!this.toPaste) return;
 			const nodesToSelect = [];
 			const newElements = this.checkIfInternalElementsAreNew(JSON.stringify(this.toPaste));
 			if (this.config.paddingOnPaste.enabled && newElements) {
@@ -19883,7 +19880,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			for (const element of Object.keys(this.toPaste.weave)) {
 				const node = this.toPaste.weave[element].element;
 				const posRelativeToSelection = this.toPaste.weave[element].posRelativeToSelection;
-				let containerId = this.toPaste.weave[element].containerId;
+				let containerId = this.toPaste.weave[element]?.containerId;
+				const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
+				if (!nodeHandler) continue;
 				if (node.props.children) this.recursivelyUpdateKeys(node.props.children);
 				const newNodeId = v4_default();
 				delete node.props.containerId;
@@ -19905,24 +19904,24 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 						containerId = container.getAttrs().id ?? "";
 						localPos = container.getAbsoluteTransform().copy().invert().point(position);
 					}
-					const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
-					if (nodeHandler) {
-						const realOffset = nodeHandler.realOffset(node);
-						node.props.x = localPos.x + realOffset.x + posRelativeToSelection.x;
-						node.props.y = localPos.y + realOffset.y + posRelativeToSelection.y;
-					}
-				} else {
-					const nodeHandler = this.instance.getNodeHandler(node.props.nodeType ?? "");
-					if (nodeHandler) {
-						node.props.x = node.props.x + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingX : 0);
-						node.props.y = node.props.y + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingY : 0);
-					}
+					const realOffset = nodeHandler.realOffset(node);
+					node.props.x = localPos.x + realOffset.x + posRelativeToSelection.x;
+					node.props.y = localPos.y + realOffset.y + posRelativeToSelection.y;
+				}
+				if (!position) {
+					node.props.x = node.props.x + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingX : 0);
+					node.props.y = node.props.y + (this.config.paddingOnPaste.enabled ? this.actualInternalPaddingY : 0);
+				}
+				let containerNode = this.instance.getStage().findOne(`#${containerId}`);
+				if (!containerNode) {
+					containerId = this.instance.getMainLayer()?.getAttrs().id ?? "";
+					containerNode = this.instance.getMainLayer();
+				}
+				if (containerId) {
+					this.instance.addNodeNT(node, containerId);
+					const realNode = this.instance.getStage().findOne(`#${newNodeId}`);
+					if (realNode) nodesToSelect.push(realNode);
 				}
-				const containerNode = this.instance.getStage().findOne(`#${containerId}`);
-				if (!containerNode) containerId = this.instance.getMainLayer()?.getAttrs().id ?? "";
-				this.instance.addNode(node, containerId);
-				const realNode = this.instance.getStage().findOne(`#${newNodeId}`);
-				if (realNode) nodesToSelect.push(realNode);
 				this.getStageGridPlugin()?.onRender();
 			}
 			this.instance.emitEvent("onPaste", {
@@ -19936,8 +19935,8 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				smartZoom: true
 			});
 			this.toPaste = void 0;
-		}
-		this.cancel();
+			this.cancel();
+		});
 	}
 	async finishHandleCopy() {
 		this.actualInternalPaddingX = 0;
@@ -19965,7 +19964,12 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				y: 0
 			}
 		};
-		for (const node of selectedNodes) {
+		const selectedNodesSortedByZIndexAsc = [...selectedNodes].sort((a, b) => {
+			const aZ = a.getZIndex() ?? 0;
+			const bZ = b.getZIndex() ?? 0;
+			return aZ - bZ;
+		});
+		for (const node of selectedNodesSortedByZIndexAsc) {
 			const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 			if (!nodeHandler) continue;
 			const parentNode = node.getParent();
@@ -20327,7 +20331,8 @@ var WeaveNode = class {
 		if (!selectionPlugin) return;
 		selectionPlugin.getHoverTransformer().nodes([]);
 	}
-	setupDefaultNodeEvents(node) {
+	setupDefaultNodeEvents(node, options = { performScaleReset: true }) {
+		const { performScaleReset } = mergeExceptArrays({ performScaleReset: true }, options);
 		const handleNodesChange = () => {
 			if (!this.isLocked(node) && this.isSelecting() && this.isNodeSelected(node)) {
 				node.draggable(true);
@@ -20394,13 +20399,16 @@ var WeaveNode = class {
 				const nodesSnappingPlugin = this.getNodesEdgeSnappingPlugin();
 				if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupGuidelines();
 				if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
-				this.scaleReset(node$1);
+				if (performScaleReset) this.scaleReset(node$1);
 				if (this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					this.getNodesSelectionFeedbackPlugin()?.showSelectionHalo(node$1);
 					this.getNodesSelectionFeedbackPlugin()?.updateSelectionHalo(node$1);
 				}
 				const nodeHandler = this.instance.getNodeHandler(node$1.getAttrs().nodeType);
-				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
+				if (nodeHandler) {
+					const shouldUpdateOnTransform = node$1.getAttrs().shouldUpdateOnTransform ?? true;
+					if (shouldUpdateOnTransform) this.instance.updateNode(nodeHandler.serialize(node$1));
+				}
 				this.getNodesSelectionPlugin()?.getHoverTransformer().forceUpdate();
 			});
 			const stage = this.instance.getStage();
@@ -20636,7 +20644,9 @@ var WeaveNode = class {
 				}
 			});
 			node.handleSelectNode = () => {
-				this.getNodesSelectionFeedbackPlugin()?.createSelectionHalo(node);
+				const transformer = this.getNodesSelectionPlugin()?.getTransformer();
+				if (!transformer) return;
+				if (transformer.nodes().length > 1) this.getNodesSelectionFeedbackPlugin()?.createSelectionHalo(node);
 			};
 			node.handleDeselectNode = () => {
 				this.getNodesSelectionFeedbackPlugin()?.destroySelectionHalo(node);
@@ -21935,7 +21945,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.0.0";
+var version = "3.1.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -23684,7 +23694,7 @@ var WeaveStageNode = class extends WeaveNode {
 			}
 		});
 		window.addEventListener("keyup", (e) => {
-			if (!e.ctrlKey && !e.metaKey) {
+			if (!(e.ctrlKey || e.metaKey)) {
 				this.isCmdCtrlPressed = false;
 				this.instance.getStage().container().style.cursor = "default";
 				const transformer = this.getSelectionPlugin()?.getTransformer();
@@ -24327,16 +24337,8 @@ const WEAVE_TEXT_NODE_DEFAULT_CONFIG = {
 	transform: { ...WEAVE_NODES_SELECTION_DEFAULT_CONFIG.selection },
 	outline: { enabled: false }
 };
-
-//#endregion
-//#region src/actions/text-tool/constants.ts
-const TEXT_TOOL_ACTION_NAME = "textTool";
-const TEXT_TOOL_STATE = {
-	["IDLE"]: "idle",
-	["ADDING"]: "adding",
-	["FINISHED"]: "finished"
-};
 const TEXT_LAYOUT = {
+	["SMART"]: "smart",
 	["AUTO_ALL"]: "auto-all",
 	["AUTO_HEIGHT"]: "auto-height",
 	["FIXED"]: "fixed"
@@ -24350,6 +24352,8 @@ var WeaveTextNode = class extends WeaveNode {
 	textAreaSuperContainer = null;
 	textAreaContainer = null;
 	textArea = null;
+	eventsInitialized = false;
+	isCtrlMetaPressed = false;
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
@@ -24358,6 +24362,17 @@ var WeaveTextNode = class extends WeaveNode {
 		this.editing = false;
 		this.textArea = null;
 	}
+	initEvents() {
+		if (!this.eventsInitialized && !globalThis._weave_isServerSide) {
+			window.addEventListener("keydown", (e) => {
+				if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = true;
+			});
+			window.addEventListener("keyup", (e) => {
+				if (!(e.ctrlKey || e.metaKey)) this.isCtrlMetaPressed = false;
+			});
+			this.eventsInitialized = true;
+		}
+	}
 	updateNode(nodeInstance) {
 		const actNode = this.instance.getStage().findOne(`#${nodeInstance.id()}`);
 		if (actNode) {
@@ -24386,6 +24401,7 @@ var WeaveTextNode = class extends WeaveNode {
 		}
 	}
 	onRender(props) {
+		this.initEvents();
 		const text = new Konva.Text({
 			...props,
 			name: "node",
@@ -24401,6 +24417,12 @@ var WeaveTextNode = class extends WeaveNode {
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
 		text.getTransformerProperties = function() {
 			const actualAttrs = this.getAttrs();
+			if (actualAttrs.layout === TEXT_LAYOUT.SMART) return {
+				...defaultTransformerProperties,
+				resizeEnabled: true,
+				keepRatio: false,
+				enabledAnchors: []
+			};
 			if (actualAttrs.layout === TEXT_LAYOUT.AUTO_ALL) return {
 				...defaultTransformerProperties,
 				resizeEnabled: false,
@@ -24415,6 +24437,14 @@ var WeaveTextNode = class extends WeaveNode {
 		};
 		text.allowedAnchors = function() {
 			const actualAttrs = this.getAttrs();
+			if (actualAttrs.layout === TEXT_LAYOUT.SMART) return [
+				"top-left",
+				"top-right",
+				"middle-right",
+				"middle-left",
+				"bottom-left",
+				"bottom-right"
+			];
 			if (actualAttrs.layout === TEXT_LAYOUT.AUTO_ALL) return [];
 			if (actualAttrs.layout === TEXT_LAYOUT.AUTO_HEIGHT) return ["middle-right", "middle-left"];
 			return [
@@ -24429,35 +24459,93 @@ var WeaveTextNode = class extends WeaveNode {
 			];
 		};
 		text.setAttrs({ measureMultilineText: this.measureMultilineText(text) });
-		this.setupDefaultNodeEvents(text);
-		const handleTextTransform = (e) => {
-			const node = e.target;
-			if (this.isSelecting() && this.isNodeSelected(node)) e.cancelBubble = true;
-		};
-		text.on("transformstart", (e) => {
-			this.instance.emitEvent("onTransform", e.target);
-		});
-		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
-		text.on("transformend", () => {
-			this.instance.emitEvent("onTransform", null);
-		});
+		this.setupDefaultNodeEvents(text, { performScaleReset: false });
 		text.dblClick = () => {
 			if (this.editing) return;
 			if (!(this.isSelecting() && this.isNodeSelected(text))) return;
 			this.triggerEditMode(text);
 		};
-		text.on("transform", (e) => {
-			if (this.isSelecting() && this.isNodeSelected(text)) {
-				text.setAttrs({
-					width: text.width() * text.scaleX(),
-					scaleX: 1
-				});
+		text.setAttr("triggerEditMode", this.triggerEditMode.bind(this));
+		let actualAnchor = void 0;
+		text.on("transformstart", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+			actualAnchor = this.getNodesSelectionPlugin()?.getTransformer()?.getActiveAnchor();
+			if (text.getAttrs().layout === TEXT_LAYOUT.SMART && [
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			].includes(actualAnchor ?? "") || text.getAttrs().layout === TEXT_LAYOUT.FIXED && this.isCtrlMetaPressed) this.getNodesSelectionPlugin()?.getTransformer()?.keepRatio(true);
+			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.height(void 0);
+			}
+			e.cancelBubble = true;
+		});
+		const handleTextTransform = () => {
+			if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "")) {
+				text.width(text.width() * text.scaleX());
+				text.scaleX(1);
+				text.scaleY(1);
+				text.height(void 0);
+				text.getLayer()?.batchDraw();
+			}
+			if (this.isSelecting() && this.isNodeSelected(text) && ![TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) || this.isSelecting() && this.isNodeSelected(text) && [TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ![
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			].includes(actualAnchor ?? "")) {
+				text.width(text.width() * text.scaleX());
 				resetScale(text);
 				text.fontSize(text.fontSize() * text.scaleY());
-				e.cancelBubble = true;
 			}
+			text.setAttr("shouldUpdateOnTransform", false);
+			text.getLayer()?.batchDraw();
+		};
+		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, DEFAULT_THROTTLE_MS));
+		const handleTransformEnd = () => {
+			this.instance.emitEvent("onTransform", null);
+			let definedSmartWidth = false;
+			let smartFixedWidth = text.getAttr("smartFixedWidth") ?? false;
+			if (![TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ![
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			].includes(actualAnchor ?? "")) this.scaleReset(text);
+			if ([TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && [
+				"top-left",
+				"top-right",
+				"bottom-left",
+				"bottom-right"
+			].includes(actualAnchor ?? "")) text.setAttrs({
+				width: Math.ceil(text.width() * text.scaleX()),
+				height: Math.ceil(text.height() * text.scaleY()),
+				fontSize: text.fontSize() * text.scaleY(),
+				scaleX: 1,
+				scaleY: 1
+			});
+			if ([TEXT_LAYOUT.AUTO_HEIGHT, TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "") && !smartFixedWidth && !definedSmartWidth) {
+				text.setAttr("smartFixedWidth", true);
+				smartFixedWidth = true;
+				definedSmartWidth = true;
+				text.width(Math.ceil(text.width() * text.scaleX()));
+				text.scaleX(1);
+				text.height(void 0);
+				text.getLayer()?.batchDraw();
+				text.height(Math.ceil(text.height()));
+			}
+			if ([TEXT_LAYOUT.SMART].includes(text.getAttrs().layout) && ["middle-right", "middle-left"].includes(actualAnchor ?? "") && smartFixedWidth && !definedSmartWidth) {
+				text.width(Math.ceil(text.width() * text.scaleX()));
+				text.scaleX(1);
+			}
+			this.instance.updateNode(this.serialize(text));
+		};
+		text.on("transformend", () => {
+			handleTransformEnd();
 		});
-		text.setAttr("triggerEditMode", this.triggerEditMode.bind(this));
 		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
 			if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
 		});
@@ -24493,10 +24581,13 @@ var WeaveTextNode = class extends WeaveNode {
 			width = textAreaWidth;
 			height = textAreaHeight;
 		}
-		if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) {
-			const { height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
-			height = textAreaHeight;
+		if (nextProps.layout === TEXT_LAYOUT.SMART && !nextProps.smartFixedWidth) {
+			const { width: textAreaWidth } = this.textRenderedSize(nextProps.text, nodeInstance);
+			width = textAreaWidth;
+			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,
@@ -24522,6 +24613,7 @@ var WeaveTextNode = class extends WeaveNode {
 		delete cleanedAttrs.cancelEditMode;
 		delete cleanedAttrs.measureMultilineText;
 		delete cleanedAttrs.overridesMouseControl;
+		delete cleanedAttrs.shouldUpdateOnTransform;
 		delete cleanedAttrs.dragBoundFunc;
 		return {
 			key: attrs.id ?? "",
@@ -24546,12 +24638,11 @@ var WeaveTextNode = class extends WeaveNode {
 	};
 	textAreaDomResize(textNode) {
 		if (!this.textArea || !this.textAreaContainer) return;
-		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+		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 + 2 + "px";
+			this.textAreaContainer.style.width = textAreaWidth * textNode.getAbsoluteScale().x + 1 + "px";
 		}
-		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) this.textAreaContainer.style.height = "auto";
-		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+		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";
 		}
@@ -24637,15 +24728,21 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer.style.position = "absolute";
 		this.textAreaContainer.style.top = position.y * upscaleScale + "px";
 		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";
+		}
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
 			const rect = textNode.getClientRect({ relativeTo: stage });
-			this.textAreaContainer.style.width = (rect.width + 1) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			this.textAreaContainer.style.width = (rect.width + 2) * stage.scaleX() + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2 + 1) * textNode.getAbsoluteScale().x + "px";
 		}
-		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
+		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 + 1) * stage.scaleX() + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
+			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";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
 			this.textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
@@ -24730,11 +24827,11 @@ var WeaveTextNode = class extends WeaveNode {
 		}
 		const updateTextNodeSize = () => {
 			if (!this.textArea) return;
-			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+			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);
 			}
-			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
+			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));
 		};
 		const handleKeyDown = (e) => {
 			if (this.textArea && textNode && e.code === "Escape") {
@@ -24805,13 +24902,15 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	updateTextAreaDOM(textNode) {
 		if (!this.textAreaContainer || !this.textArea) return;
-		const textPosition = textNode.getClientRect();
+		const stage = this.instance.getStage();
+		const upscaleScale = stage.getAttr("upscaleScale");
+		const textPosition = textNode.absolutePosition();
 		const position = {
 			x: textPosition.x,
 			y: textPosition.y
 		};
-		this.textAreaContainer.style.top = position.y + "px";
-		this.textAreaContainer.style.left = position.x + "px";
+		this.textAreaContainer.style.top = position.y * upscaleScale + "px";
+		this.textAreaContainer.style.left = position.x * upscaleScale + "px";
 		if (textNode.getAttrs().verticalAlign === "top") this.textAreaContainer.style.alignItems = "start";
 		if (textNode.getAttrs().verticalAlign === "middle") this.textAreaContainer.style.alignItems = "center";
 		if (textNode.getAttrs().verticalAlign === "bottom") this.textAreaContainer.style.alignItems = "end";
@@ -24880,6 +24979,12 @@ var WeaveTextNode = class extends WeaveNode {
 			this.keyPressHandler = void 0;
 		}
 	}
+	resetSmartLayout(textNode) {
+		textNode.setAttr("smartFixedWidth", void 0);
+		const { width: textAreaWidth } = this.textRenderedSize(textNode.text(), textNode);
+		textNode.width(textAreaWidth);
+		this.instance.updateNode(this.serialize(textNode));
+	}
 };
 
 //#endregion
@@ -33112,6 +33217,15 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	}
 };
 
+//#endregion
+//#region src/actions/text-tool/constants.ts
+const TEXT_TOOL_ACTION_NAME = "textTool";
+const TEXT_TOOL_STATE = {
+	["IDLE"]: "idle",
+	["ADDING"]: "adding",
+	["FINISHED"]: "finished"
+};
+
 //#endregion
 //#region src/actions/text-tool/text-tool.ts
 var WeaveTextToolAction = class extends WeaveAction {
@@ -33134,7 +33248,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 	initProps() {
 		return {
 			text: "",
-			layout: TEXT_LAYOUT.AUTO_ALL,
+			layout: TEXT_LAYOUT.SMART,
 			fontSize: 20,
 			fontFamily: "Arial, sans-serif",
 			fill: "#000000",
@@ -36108,6 +36222,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			gridDotMaxDotsPerAxis: WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS,
 			...config
 		};
+		this.forceStageChange = false;
 	}
 	getName() {
 		return WEAVE_STAGE_GRID_PLUGIN_KEY;
@@ -36315,6 +36430,10 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 		gridLayer.add(originShape);
 	}
 	hasStageChanged() {
+		if (this.forceStageChange) {
+			this.forceStageChange = false;
+			return true;
+		}
 		const stage = this.instance.getStage();
 		const actualScaleX = stage.scaleX();
 		const actualScaleY = stage.scaleY();
@@ -36357,6 +36476,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 	}
 	setType(type) {
 		this.config.type = type;
+		this.forceStageChange = true;
 		this.onRender();
 	}
 };