@inditextech/weave-sdk 0.69.2 → 0.71.0

package/dist/sdk.js

@@ -18064,7 +18064,7 @@ function containerOverCursor(instance, ignoreNodes, definedCursorPosition) {
 	stage.find(".containerCapable").reverse().forEach((node) => {
 		if (!node.isVisible()) return;
 		if (containsNodeDeep(ignoreNodes, node)) return;
-		const shapeRect = getBoundingBox(stage, [node]);
+		const shapeRect = getBoundingBox([node], { relativeTo: stage });
 		if (cursorPosition.x >= shapeRect.x && cursorPosition.x <= shapeRect.x + shapeRect.width && cursorPosition.y >= shapeRect.y && cursorPosition.y <= shapeRect.y + shapeRect.height) {
 			if (node?.getAttrs().isContainerPrincipal) containerUnderPointer.add(node);
 		}
@@ -18108,7 +18108,7 @@ function moveNodeToContainer(instance, node, containerToMove, invalidOriginsType
 	}
 	return false;
 }
-function getExportBoundingBox(stage, nodes) {
+function getExportBoundingBox(nodes) {
 	if (nodes.length === 0) return {
 		x: 0,
 		y: 0,
@@ -18133,7 +18133,7 @@ function getExportBoundingBox(stage, nodes) {
 		height: maxY - minY
 	};
 }
-function getBoundingBox(stage, nodes) {
+function getBoundingBox(nodes, config) {
 	if (nodes.length === 0) return {
 		x: 0,
 		y: 0,
@@ -18145,10 +18145,7 @@ function getBoundingBox(stage, nodes) {
 	let maxX = -Infinity;
 	let maxY = -Infinity;
 	for (const node of nodes) {
-		const box = node.getRealClientRect({
-			relativeTo: stage,
-			skipTransform: false
-		});
+		const box = node.getRealClientRect(config);
 		minX = Math.min(minX, box.x);
 		minY = Math.min(minY, box.y);
 		maxX = Math.max(maxX, box.x + box.width);
@@ -19323,7 +19320,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.getStageGridPlugin()?.onRender();
 			this.updateSelectionRect();
 		}
-		this.panLoopId = requestAnimationFrame(() => this.panLoop());
+		if (this.isAreaSelecting()) this.panLoopId = requestAnimationFrame(() => this.panLoop());
 	}
 	setTapStart(e) {
 		this.tapStart = {
@@ -19445,7 +19442,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.selecting = true;
 			this.tr.nodes([]);
 			this.instance.emitEvent("onSelectionState", true);
-			if (!this.panLoopId) this.panLoopId = requestAnimationFrame(() => this.panLoop());
+			this.panLoopId = requestAnimationFrame(() => this.panLoop());
 		});
 		const handleMouseMove = (e) => {
 			const moved = this.checkMoved(e);
@@ -20034,7 +20031,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
 		const selectedNodes = nodesSelectionPlugin?.getSelectedNodes();
 		if (!selectedNodes || selectedNodes.length === 0) return;
-		const box = getBoundingBox(stage, selectedNodes);
+		const box = getBoundingBox(selectedNodes, { relativeTo: stage });
 		const copyClipboard = {
 			weaveInstanceId: this.instance.getId(),
 			weave: {},
@@ -21249,7 +21246,7 @@ var WeaveTargetingManager = class {
 	}
 	isNodesBoundingBoxIntersecting(nodes, nodeB) {
 		const stage = this.instance.getStage();
-		const a = getBoundingBox(stage, nodes);
+		const a = getBoundingBox(nodes, { relativeTo: stage });
 		const b = nodeB.getClientRect({ relativeTo: stage });
 		return !(a.x + a.width < b.x || a.x > b.x + b.width || a.y + a.height < b.y || a.y > b.y + b.height);
 	}
@@ -21913,7 +21910,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.69.2";
+var version = "0.71.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22174,7 +22171,7 @@ var WeaveExportManager = class {
 				y: 1
 			});
 			if (mainLayer) {
-				const bounds = getExportBoundingBox(stage, boundingNodes(nodes));
+				const bounds = getExportBoundingBox(boundingNodes(nodes));
 				const scaleX = stage.scaleX();
 				const scaleY = stage.scaleY();
 				const unscaledBounds = {
@@ -22257,7 +22254,7 @@ var WeaveExportManager = class {
 			if (node) konvaNodes.push(node);
 		}
 		if (mainLayer) {
-			const bounds = getExportBoundingBox(stage, boundingNodes(konvaNodes));
+			const bounds = getExportBoundingBox(boundingNodes(konvaNodes));
 			const scaleX = stage.scaleX();
 			const scaleY = stage.scaleY();
 			const unscaledBounds = {
@@ -22746,6 +22743,9 @@ var Weave = class {
 		}
 		return nodeContainer;
 	}
+	getBoundingBox(nodes, config) {
+		return getBoundingBox(nodes, config);
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -23425,12 +23425,12 @@ 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 + 3.2;
-			height = textAreaHeight + 3.2;
+			width = textAreaWidth;
+			height = textAreaHeight;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_HEIGHT) {
 			const { height: textAreaHeight } = this.textRenderedSize(nextProps.text, nodeInstance);
-			height = textAreaHeight + 3.2;
+			height = textAreaHeight;
 		}
 		if (nextProps.layout === TEXT_LAYOUT.FIXED) updateNeeded = false;
 		nodeInstance.setAttrs({
@@ -23479,10 +23479,10 @@ var WeaveTextNode = class extends WeaveNode {
 		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) {
 			this.textAreaContainer.style.height = "auto";
-			this.textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().y + "px";
+			this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().y + "px";
 		}
 		this.textArea.style.height = "auto";
-		this.textArea.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+		this.textArea.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
 		this.textArea.rows = this.textArea.value.split("\n").length;
 	}
 	measureMultilineText(textNode) {
@@ -23560,16 +23560,18 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaContainer.style.top = position.y + "px";
 		this.textAreaContainer.style.left = position.x + "px";
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
-			this.textAreaContainer.style.width = this.textArea.scrollWidth + "px";
-			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
+			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";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
-			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 + 2 + "px";
+			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";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.FIXED) {
 			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 + 2 + "px";
+			this.textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 		}
 		this.textAreaContainer.style.border = "solid 1px #1e40af";
 		this.textArea.style.position = "absolute";
@@ -23589,9 +23591,17 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textArea.style.border = "none";
 		this.textArea.style.outline = "none";
 		this.textArea.style.resize = "none";
+		this.textArea.style.overflow = "hidden";
 		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`;
 		this.textArea.onfocus = () => {
 			this.textAreaDomResize(textNode);
 		};
@@ -23628,19 +23638,24 @@ var WeaveTextNode = class extends WeaveNode {
 			const transform = "rotate(" + rotation + "deg)";
 			this.textAreaContainer.style.transform = transform;
 		}
+		const updateTextNodeSize = () => {
+			if (!this.textArea) return;
+			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
+				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));
+		};
 		const handleKeyDown = (e) => {
 			if (this.textArea && textNode && e.key === "Escape") {
 				e.stopPropagation();
-				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
-					const { width: textAreaWidth } = this.textRenderedSize(this.textArea.value, textNode);
-					textNode.width(textAreaWidth + 3.2);
-				}
-				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) textNode.height((this.textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
+				updateTextNodeSize();
 				textNode.text(this.textArea.value);
 				this.removeTextAreaDOM(textNode);
 				this.instance.removeEventListener("onZoomChange", this.onZoomChangeHandler(textNode).bind(this));
 				this.instance.removeEventListener("onStageMove", this.onStageMoveHandler(textNode).bind(this));
 				window.removeEventListener("pointerup", handleOutsideClick);
+				window.removeEventListener("pointerdown", handleOutsideClick);
 				return;
 			}
 		};
@@ -23651,7 +23666,7 @@ var WeaveTextNode = class extends WeaveNode {
 				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
 					if (this.textAreaContainer) {
 						this.textAreaContainer.style.height = "auto";
-						this.textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+						this.textAreaContainer.style.height = this.textArea.scrollHeight + textNode.getAbsoluteScale().x + "px";
 					}
 				}
 				this.textAreaDomResize(textNode);
@@ -23674,6 +23689,7 @@ var WeaveTextNode = class extends WeaveNode {
 			let clickedOnCanvas = false;
 			if (elementUnderMouse?.id !== `${textNode.id()}`) clickedOnCanvas = true;
 			if (clickedOnCanvas) {
+				updateTextNodeSize();
 				textNode.text(this.textArea.value);
 				this.removeTextAreaDOM(textNode);
 				this.textArea.removeEventListener("keydown", handleKeyDown);
@@ -23691,7 +23707,6 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	updateTextAreaDOM(textNode) {
 		if (!this.textAreaContainer || !this.textArea) return;
-		const stage = this.instance.getStage();
 		const textPosition = textNode.getClientRect();
 		const position = {
 			x: textPosition.x,
@@ -23707,15 +23722,9 @@ var WeaveTextNode = class extends WeaveNode {
 		this.textAreaDomResize(textNode);
 		const rotation = textNode.getAbsoluteRotation();
 		if (rotation) {
-			const transform$1 = "rotate(" + rotation + "deg)";
-			this.textAreaContainer.style.transform = transform$1;
-		}
-		const px = 0;
-		const py = -3 * stage.scaleY();
-		let transform = "";
-		transform += "translateX(" + px + "px)";
-		transform += "translateY(" + py + "px)";
-		this.textArea.style.transform = transform;
+			const transform = "rotate(" + rotation + "deg)";
+			this.textAreaContainer.style.transform = transform;
+		}
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			const tr = selectionPlugin.getTransformer();
@@ -26456,7 +26465,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		});
 		let realNodes = mainLayer.getChildren();
 		realNodes = realNodes.filter((node) => typeof node.getAttrs().visible === "undefined" || node.getAttrs().visible);
-		const bounds = getBoundingBox(stage, realNodes);
+		const bounds = getBoundingBox(realNodes, { relativeTo: stage });
 		if (bounds.width === 0 || bounds.height === 0) {
 			stage.position(centerPoint);
 			this.setZoom(this.config.zoomSteps[this.defaultStep]);
@@ -26486,7 +26495,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		if (!selectionPlugin) return;
 		const nodes = selectionPlugin.getTransformer().getNodes();
 		if (nodes.length === 0) return;
-		const box = getBoundingBox(stage, selectionPlugin.getTransformer().getNodes());
+		const box = getBoundingBox(selectionPlugin.getTransformer().getNodes(), { relativeTo: stage });
 		if (box.width === 0 || box.height === 0) return;
 		const container = stage.container();
 		const scale = stage.scale();