@inditextech/weave-sdk 0.29.1 → 0.30.1

package/dist/sdk.cjs

@@ -16195,6 +16195,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (!this.initialized) return;
 			if (!this.active) return;
 			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
+			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
+			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
+				this.selecting = false;
+				return;
+			}
 			if (!this.selecting) {
 				this.cameFromSelectingMultiple = false;
 				return;
@@ -16217,7 +16222,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (!this.active) return;
 			if (e.evt instanceof TouchEvent && e.evt.touches && e.evt.touches.length > 1) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) return;
+			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
+				this.selecting = false;
+				return;
+			}
 			this.selecting = false;
 			this.instance.emitEvent("onSelectionState", false);
 			if (!this.selectionRectangle.visible()) {
@@ -16263,7 +16271,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		stage.on("click tap", (e) => {
 			if (!this.enabled) return;
 			const contextMenuPlugin = this.instance.getPlugin("contextMenu");
-			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) return;
+			if (contextMenuPlugin && contextMenuPlugin.isContextMenuVisible()) {
+				this.selecting = false;
+				return;
+			}
 			if (this.cameFromSelectingMultiple) {
 				this.cameFromSelectingMultiple = false;
 				return;
@@ -18218,7 +18229,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.29.1";
+var version = "0.30.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18482,6 +18493,17 @@ var WeaveExportManager = class {
 			}
 		});
 	}
+	imageToBase64(img, mimeType) {
+		const canvas = document.createElement("canvas");
+		canvas.width = img.naturalWidth;
+		canvas.height = img.naturalHeight;
+		const ctx = canvas.getContext("2d");
+		if (!ctx) throw new Error("Could not get canvas context");
+		ctx.drawImage(img, 0, 0);
+		const URL = canvas.toDataURL(mimeType);
+		canvas.remove();
+		return URL;
+	}
 };
 
 //#endregion
@@ -18844,6 +18866,9 @@ var Weave = class extends Emittery {
 	getFonts() {
 		return this.fontsManager.getFonts();
 	}
+	imageToBase64(img, mimeType) {
+		return this.exportManager.imageToBase64(img, mimeType);
+	}
 	async exportNodes(nodes, options) {
 		return await this.exportManager.exportNodes(nodes, options);
 	}
@@ -19154,6 +19179,7 @@ const TEXT_LAYOUT = {
 var WeaveTextNode = class extends WeaveNode {
 	nodeType = WEAVE_TEXT_NODE_TYPE;
 	editing = false;
+	textArea = null;
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
@@ -19162,6 +19188,7 @@ var WeaveTextNode = class extends WeaveNode {
 			...config?.transform
 		} };
 		this.editing = false;
+		this.textArea = null;
 	}
 	updateNode(nodeInstance) {
 		const clonedText = nodeInstance.clone();
@@ -19199,14 +19226,11 @@ var WeaveTextNode = class extends WeaveNode {
 		};
 		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
 		window.addEventListener("keypress", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing) {
+			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
 				e.preventDefault();
 				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]);
-					}
+					if (nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1 && nodesSelectionPlugin.getSelectedNodes()[0].getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE && !window.weaveTextEditing[nodesSelectionPlugin.getSelectedNodes()[0].id()]) this.triggerEditMode(nodesSelectionPlugin.getSelectedNodes()[0]);
 				}
 			}
 		});
@@ -19320,6 +19344,25 @@ var WeaveTextNode = class extends WeaveNode {
 			height
 		};
 	}
+	mimicTextNode(textNode, textArea) {
+		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
+		textArea.rows = textNode.text().split("\n").length;
+		textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
+		textArea.style.opacity = `${textNode.getAttrs().opacity}`;
+		textArea.style.lineHeight = `${textNode.lineHeight()}`;
+		textArea.style.fontFamily = textNode.fontFamily();
+		let fontWeight = "normal";
+		let fontStyle = "normal";
+		if ((textNode.fontStyle() ?? "normal").indexOf("bold") !== -1) fontWeight = "bold";
+		if ((textNode.fontStyle() ?? "normal").indexOf("italic") !== -1) fontStyle = "italic";
+		textArea.style.fontWeight = fontWeight;
+		textArea.style.backgroundColor = "transparent";
+		textArea.style.fontStyle = fontStyle;
+		textArea.style.fontVariant = textNode.fontVariant();
+		textArea.style.textDecoration = textNode.textDecoration();
+		textArea.style.textAlign = textNode.align();
+		textArea.style.color = `${textNode.fill()}`;
+	}
 	createTextAreaDOM(textNode, position) {
 		const stage = this.instance.getStage();
 		const textAreaSuperContainer = document.createElement("div");
@@ -19333,19 +19376,19 @@ var WeaveTextNode = class extends WeaveNode {
 		textAreaSuperContainer.style.pointerEvents = "none";
 		const textAreaContainer = document.createElement("div");
 		textAreaContainer.id = `${textNode.id()}_container`;
-		const textArea = document.createElement("textarea");
-		textArea.id = textNode.id();
-		textAreaContainer.appendChild(textArea);
+		this.textArea = document.createElement("textarea");
+		this.textArea.id = textNode.id();
+		textAreaContainer.appendChild(this.textArea);
 		textAreaSuperContainer.appendChild(textAreaContainer);
 		stage.container().appendChild(textAreaSuperContainer);
 		textAreaContainer.style.pointerEvents = "auto";
 		textAreaContainer.style.backgroundColor = "transparent";
-		textArea.style.pointerEvents = "auto";
+		this.textArea.style.pointerEvents = "auto";
 		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();
+		this.textArea.value = textNode.text();
+		this.textArea.id = textNode.id();
 		textAreaContainer.style.overflow = "hidden";
 		textAreaContainer.style.display = "flex";
 		textAreaContainer.style.justifyContent = "start";
@@ -19356,7 +19399,7 @@ var WeaveTextNode = class extends WeaveNode {
 		textAreaContainer.style.top = position.y + "px";
 		textAreaContainer.style.left = position.x + "px";
 		if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) {
-			textAreaContainer.style.width = textArea.scrollWidth + "px";
+			textAreaContainer.style.width = this.textArea.scrollWidth + "px";
 			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		}
 		if (textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
@@ -19367,54 +19410,40 @@ var WeaveTextNode = class extends WeaveNode {
 			textAreaContainer.style.width = (textNode.width() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + "px";
 			textAreaContainer.style.height = (textNode.height() - textNode.padding() * 2) * textNode.getAbsoluteScale().x + 2 + "px";
 		}
-		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-		textArea.rows = textNode.text().split("\n").length;
 		textAreaContainer.style.border = "solid 1px #1e40af";
-		textArea.style.position = "absolute";
-		textArea.style.top = "0px";
-		textArea.style.left = "0px";
-		textArea.style.overscrollBehavior = "contains";
-		textArea.style.scrollBehavior = "auto";
-		textArea.style.caretColor = "black";
-		textArea.style.width = "100%";
-		textArea.style.letterSpacing = `${textNode.letterSpacing()}`;
-		textArea.style.minHeight = "auto";
-		textArea.style.margin = "0px";
-		textArea.style.padding = "0px";
-		textArea.style.boxSizing = "content-box";
-		textArea.style.overflow = "hidden";
-		textArea.style.background = "transparent";
-		textArea.style.border = "none";
-		textArea.style.outline = "none";
-		textArea.style.resize = "none";
-		textArea.style.lineHeight = `${textNode.lineHeight()}`;
-		textArea.style.fontFamily = textNode.fontFamily();
-		let fontWeight = "normal";
-		let fontStyle = "normal";
-		if ((textNode.fontStyle() ?? "normal").indexOf("bold") !== -1) fontWeight = "bold";
-		if ((textNode.fontStyle() ?? "normal").indexOf("italic") !== -1) fontStyle = "italic";
-		textArea.style.fontWeight = fontWeight;
-		textArea.style.backgroundColor = "transparent";
-		textArea.style.fontStyle = fontStyle;
-		textArea.style.fontVariant = textNode.fontVariant();
-		textArea.style.textDecoration = textNode.textDecoration();
+		this.textArea.style.position = "absolute";
+		this.textArea.style.top = "0px";
+		this.textArea.style.left = "0px";
+		this.textArea.style.overscrollBehavior = "contains";
+		this.textArea.style.scrollBehavior = "auto";
+		this.textArea.style.caretColor = "black";
+		this.textArea.style.width = "100%";
+		this.textArea.style.minHeight = "auto";
+		this.textArea.style.margin = "0px";
+		this.textArea.style.padding = "0px";
+		this.textArea.style.boxSizing = "content-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.backgroundColor = "transparent";
 		textAreaContainer.style.transformOrigin = "left top";
-		textArea.style.textAlign = textNode.align();
-		textArea.style.color = `${textNode.fill()}`;
-		textArea.onfocus = () => {
-			this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.mimicTextNode(textNode, this.textArea);
+		this.textArea.onfocus = () => {
+			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 		};
-		textArea.onkeydown = () => {
-			this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textArea.onkeydown = () => {
+			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 		};
-		textArea.onkeyup = () => {
-			this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textArea.onkeyup = () => {
+			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 		};
-		textArea.onpaste = () => {
-			this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textArea.onpaste = () => {
+			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 		};
-		textArea.oninput = () => {
-			this.textAreaDomResize(textAreaContainer, textArea, textNode);
+		this.textArea.oninput = () => {
+			this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 		};
 		textAreaSuperContainer.addEventListener("scroll", () => {
 			textAreaSuperContainer.scrollTop = 0;
@@ -19424,28 +19453,32 @@ var WeaveTextNode = class extends WeaveNode {
 			textAreaContainer.scrollTop = 0;
 			textAreaContainer.scrollLeft = 0;
 		});
-		textArea.addEventListener("scroll", () => {
-			textArea.scrollTop = 0;
-			textArea.scrollLeft = 0;
+		this.textArea.addEventListener("scroll", () => {
+			if (!this.textArea) return;
+			this.textArea.scrollTop = 0;
+			this.textArea.scrollLeft = 0;
 		});
-		const rotation = textNode.rotation();
-		let transform = "";
-		if (rotation) transform += "rotateZ(" + rotation + "deg)";
+		const rotation = textNode.getAbsoluteRotation();
+		if (rotation) {
+			const transform$1 = "rotate(" + rotation + "deg)";
+			textAreaContainer.style.transform = transform$1;
+		}
 		const measures = textNode.measureSize(textNode.text());
 		const px = 0 * stage.scaleX();
 		const py = 2 * (measures.fontBoundingBoxAscent - measures.hangingBaseline - measures.fontBoundingBoxDescent) * stage.scaleY();
+		let transform = "";
 		transform += "translateX(" + px + "px)";
 		transform += "translateY(" + py + "px)";
-		textArea.style.transform = transform;
+		this.textArea.style.transform = transform;
 		const handleKeyDown = (e) => {
-			if (textArea && textNode && e.key === "Escape") {
+			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(textArea.value, textNode);
+					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((textArea.scrollHeight + 1.6) * (1 / textNode.getAbsoluteScale().x));
-				textNode.text(textArea.value);
+				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));
+				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));
@@ -19454,28 +19487,30 @@ var WeaveTextNode = class extends WeaveNode {
 			}
 		};
 		const handleKeyUp = () => {
-			textNode.text(textArea.value);
-			if (textArea && textNode) {
+			if (!this.textArea) return;
+			textNode.text(this.textArea.value);
+			if (this.textArea && textNode) {
 				if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT) {
 					textAreaContainer.style.height = "auto";
-					textAreaContainer.style.height = textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
+					textAreaContainer.style.height = this.textArea.scrollHeight + 1.6 * textNode.getAbsoluteScale().x + "px";
 				}
-				this.textAreaDomResize(textAreaContainer, textArea, textNode);
+				this.textAreaDomResize(textAreaContainer, this.textArea, textNode);
 			}
 		};
-		textArea.addEventListener("keydown", handleKeyDown);
-		textArea.addEventListener("keyup", handleKeyUp);
-		textArea.tabIndex = 1;
-		textArea.focus();
+		this.textArea.addEventListener("keydown", handleKeyDown);
+		this.textArea.addEventListener("keyup", handleKeyUp);
+		this.textArea.tabIndex = 1;
+		this.textArea.focus();
 		const handleOutsideClick = (e) => {
 			e.stopPropagation();
+			if (!this.textArea) return;
 			let clickedOnCanvas = false;
 			if (e.target?.id !== `${textNode.id()}`) clickedOnCanvas = true;
 			if (clickedOnCanvas) {
-				textNode.text(textArea.value);
+				textNode.text(this.textArea.value);
 				this.removeTextAreaDOM(textNode);
-				textArea.removeEventListener("keydown", handleKeyDown);
-				textArea.removeEventListener("keyup", handleKeyUp);
+				this.textArea.removeEventListener("keydown", handleKeyDown);
+				this.textArea.removeEventListener("keyup", handleKeyUp);
 				window.removeEventListener("click", handleOutsideClick);
 				window.removeEventListener("touchstart", handleOutsideClick);
 				return;
@@ -19502,19 +19537,17 @@ var WeaveTextNode = class extends WeaveNode {
 		if (textNode.getAttrs().verticalAlign === "top") textAreaContainer.style.alignItems = "start";
 		if (textNode.getAttrs().verticalAlign === "middle") textAreaContainer.style.alignItems = "center";
 		if (textNode.getAttrs().verticalAlign === "bottom") textAreaContainer.style.alignItems = "end";
-		textArea.style.fontSize = textNode.fontSize() * textNode.getAbsoluteScale().x + "px";
-		textArea.rows = textNode.text().split("\n").length;
-		textArea.style.lineHeight = `${textNode.lineHeight()}`;
-		textArea.style.fontFamily = textNode.fontFamily();
-		textArea.style.textAlign = textNode.align();
-		textArea.style.color = `${textNode.fill()}`;
+		this.mimicTextNode(textNode, textArea);
 		this.textAreaDomResize(textAreaContainer, textArea, textNode);
 		this.textAreaDomResize(textAreaContainer, textArea, textNode);
-		const rotation = textNode.rotation();
-		let transform = "";
-		if (rotation) transform += "rotateZ(" + rotation + "deg)";
+		const rotation = textNode.getAbsoluteRotation();
+		if (rotation) {
+			const transform$1 = "rotate(" + rotation + "deg)";
+			textAreaContainer.style.transform = transform$1;
+		}
 		const px = 0;
 		const py = -3 * stage.scaleY();
+		let transform = "";
 		transform += "translateX(" + px + "px)";
 		transform += "translateY(" + py + "px)";
 		textArea.style.transform = transform;
@@ -24984,7 +25017,7 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 		link.click();
 		this.cancelAction?.();
 	}
-	async trigger(cancelAction, { nodes, options }) {
+	async trigger(cancelAction, { nodes, options, download = true }) {
 		if (!this.instance) throw new Error("Instance not defined");
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
@@ -24994,6 +25027,12 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 			...this.defaultFormatOptions,
 			...options
 		};
+		if (!download) {
+			const img = await this.instance.exportNodes(nodes, this.options);
+			const base64URL = this.instance.imageToBase64(img, this.options.format ?? "image/png");
+			this.cancelAction?.();
+			return base64URL;
+		}
 		await this.exportNodes(nodes);
 	}
 	cleanup() {

package/dist/sdk.d.cts

@@ -500,6 +500,7 @@ declare class Weave extends Emittery {
   nodesToGroupSerialized(instancesToClone: Konva.Node[]): WeaveSerializedGroup;
   cloneNodes(instancesToClone: Konva.Node[], targetContainer: Konva.Layer | Konva.Group | undefined, onPoint: Vector2d): void;
   getFonts(): WeaveFont[];
+  imageToBase64(img: HTMLImageElement, mimeType: string): string;
   exportNodes(nodes: WeaveElementInstance[], options: WeaveExportNodesOptions): Promise<HTMLImageElement>;
 }
 
@@ -694,6 +695,7 @@ declare class WeaveTextNode extends WeaveNode {
   private config;
   protected nodeType: string;
   private editing;
+  private textArea;
   constructor(params?: WeaveTextNodeParams);
   private updateNode;
   onRender(props: WeaveElementAttributes): WeaveElementInstance;
@@ -710,6 +712,7 @@ declare class WeaveTextNode extends WeaveNode {
     width: number;
     height: number;
   };
+  private mimicTextNode;
   private createTextAreaDOM;
   private updateTextAreaDOM;
   private removeTextAreaDOM;
@@ -1654,6 +1657,7 @@ declare class WeaveFrameToolAction extends WeaveAction {
 type WeaveExportNodesActionParams = {
   nodes: WeaveElementInstance[];
   options?: WeaveExportNodesOptions;
+  download?: boolean;
 };
 
 //#endregion
@@ -1693,8 +1697,9 @@ declare class WeaveExportNodesToolAction extends WeaveAction {
   private exportNodes;
   trigger(cancelAction: () => void, {
     nodes,
-    options
-  }: WeaveExportNodesActionParams): Promise<void>;
+    options,
+    download
+  }: WeaveExportNodesActionParams): Promise<void | string>;
   cleanup(): void;
 }