@inditextech/weave-sdk 3.6.0-SNAPSHOT.112.1 → 3.7.0-SNAPSHOT.134.1

package/dist/sdk.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 import pino from "pino";
-import { WEAVE_ASYNC_STATUS, WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_KONVA_BACKEND, WEAVE_LOG_LEVEL, WEAVE_NODE_CHANGE_TYPE, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_STORE_CONNECTION_STATUS, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
+import { WEAVE_ASYNC_STATUS, WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FORMATS, WEAVE_EXPORT_RETURN_FORMAT, WEAVE_INSTANCE_STATUS, WEAVE_KONVA_BACKEND, WEAVE_LOG_LEVEL, WEAVE_NODE_CHANGE_TYPE, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_STORE_CONNECTION_STATUS, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
 import * as Y$1 from "yjs";
 import * as Y from "yjs";
@@ -19236,6 +19236,10 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 	initEvents() {
 		this.selecting = false;
 		const stage = this.instance.getStage();
+		window.addEventListener("blur", () => {
+			this.isCtrlMetaPressed = false;
+			this.isSpaceKeyPressed = false;
+		}, { signal: this.instance.getEventsController()?.signal });
 		stage.container().addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = true;
 			if (e.code === "Space") this.isSpaceKeyPressed = true;
@@ -22018,7 +22022,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.6.0-SNAPSHOT.112.1";
+var version = "3.7.0-SNAPSHOT.134.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22350,6 +22354,172 @@ var WeaveExportManager = class {
 			}
 		});
 	}
+	exportNodesAsBlob(nodes, boundingNodes, options) {
+		return new Promise((resolve) => {
+			const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
+			const nodesSelectionPluginPrev = this.getNodesSelectionPlugin()?.isEnabled();
+			const nodesDistanceSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesEdgeSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesStageGridPluginPrev = this.getStageGridPlugin()?.isEnabled();
+			this.getNodesSelectionPlugin()?.disable();
+			this.getNodesDistanceSnappingPlugin()?.disable();
+			this.getNodesEdgeSnappingPlugin()?.disable();
+			this.getStageGridPlugin()?.disable();
+			const stage = this.instance.getStage();
+			const mainLayer = this.instance.getMainLayer();
+			const originalPosition = {
+				x: stage.x(),
+				y: stage.y()
+			};
+			const originalScale = {
+				x: stage.scaleX(),
+				y: stage.scaleY()
+			};
+			stage.scale({
+				x: 1,
+				y: 1
+			});
+			if (mainLayer) {
+				const bounds = getExportBoundingBox(boundingNodes(nodes));
+				const scaleX = stage.scaleX();
+				const scaleY = stage.scaleY();
+				const unscaledBounds = {
+					x: bounds.x / scaleX,
+					y: bounds.y / scaleY,
+					width: bounds.width / scaleX,
+					height: bounds.height / scaleY
+				};
+				const exportGroup = new Konva.Group();
+				const background = new Konva.Rect({
+					x: unscaledBounds.x - padding,
+					y: unscaledBounds.y - padding,
+					width: unscaledBounds.width + 2 * padding,
+					height: unscaledBounds.height + 2 * padding,
+					strokeWidth: 0,
+					fill: backgroundColor
+				});
+				exportGroup.add(background);
+				for (const node of nodes) {
+					const clonedNode = node.clone({ id: v4_default() });
+					const absPos = node.getAbsolutePosition();
+					clonedNode.absolutePosition({
+						x: absPos.x / scaleX,
+						y: absPos.y / scaleY
+					});
+					exportGroup.add(clonedNode);
+				}
+				mainLayer.add(exportGroup);
+				const backgroundRect = background.getClientRect();
+				stage.batchDraw();
+				const { pixelRatio: finalPixelRatio } = this.fitKonvaPixelRatio(Math.round(backgroundRect.width), Math.round(backgroundRect.height), pixelRatio);
+				exportGroup.toBlob({
+					x: Math.round(backgroundRect.x),
+					y: Math.round(backgroundRect.y),
+					width: Math.round(backgroundRect.width),
+					height: Math.round(backgroundRect.height),
+					mimeType: format,
+					pixelRatio: finalPixelRatio,
+					quality: options.quality ?? 1,
+					callback: (blob) => {
+						exportGroup.destroy();
+						stage.position(originalPosition);
+						stage.scale(originalScale);
+						stage.batchDraw();
+						if (nodesSelectionPluginPrev) this.getNodesSelectionPlugin()?.enable();
+						if (nodesDistanceSnappingPluginPrev) this.getNodesDistanceSnappingPlugin()?.enable();
+						if (nodesEdgeSnappingPluginPrev) this.getNodesEdgeSnappingPlugin()?.enable();
+						if (nodesStageGridPluginPrev) this.getStageGridPlugin()?.enable();
+						if (!blob) {
+							(0, import_lodash.reject)(new Error("Failed to generate image blob"));
+							return;
+						}
+						resolve(blob);
+					}
+				});
+			}
+		});
+	}
+	exportNodesAsCanvas(nodes, boundingNodes, options) {
+		return new Promise((resolve) => {
+			const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
+			const nodesSelectionPluginPrev = this.getNodesSelectionPlugin()?.isEnabled();
+			const nodesDistanceSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesEdgeSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesStageGridPluginPrev = this.getStageGridPlugin()?.isEnabled();
+			this.getNodesSelectionPlugin()?.disable();
+			this.getNodesDistanceSnappingPlugin()?.disable();
+			this.getNodesEdgeSnappingPlugin()?.disable();
+			this.getStageGridPlugin()?.disable();
+			const stage = this.instance.getStage();
+			const mainLayer = this.instance.getMainLayer();
+			const originalPosition = {
+				x: stage.x(),
+				y: stage.y()
+			};
+			const originalScale = {
+				x: stage.scaleX(),
+				y: stage.scaleY()
+			};
+			stage.scale({
+				x: 1,
+				y: 1
+			});
+			if (mainLayer) {
+				const bounds = getExportBoundingBox(boundingNodes(nodes));
+				const scaleX = stage.scaleX();
+				const scaleY = stage.scaleY();
+				const unscaledBounds = {
+					x: bounds.x / scaleX,
+					y: bounds.y / scaleY,
+					width: bounds.width / scaleX,
+					height: bounds.height / scaleY
+				};
+				const exportGroup = new Konva.Group();
+				const background = new Konva.Rect({
+					x: unscaledBounds.x - padding,
+					y: unscaledBounds.y - padding,
+					width: unscaledBounds.width + 2 * padding,
+					height: unscaledBounds.height + 2 * padding,
+					strokeWidth: 0,
+					fill: backgroundColor
+				});
+				exportGroup.add(background);
+				for (const node of nodes) {
+					const clonedNode = node.clone({ id: v4_default() });
+					const absPos = node.getAbsolutePosition();
+					clonedNode.absolutePosition({
+						x: absPos.x / scaleX,
+						y: absPos.y / scaleY
+					});
+					exportGroup.add(clonedNode);
+				}
+				mainLayer.add(exportGroup);
+				const backgroundRect = background.getClientRect();
+				stage.batchDraw();
+				const { pixelRatio: finalPixelRatio } = this.fitKonvaPixelRatio(Math.round(backgroundRect.width), Math.round(backgroundRect.height), pixelRatio);
+				exportGroup.toCanvas({
+					x: Math.round(backgroundRect.x),
+					y: Math.round(backgroundRect.y),
+					width: Math.round(backgroundRect.width),
+					height: Math.round(backgroundRect.height),
+					mimeType: format,
+					pixelRatio: finalPixelRatio,
+					quality: options.quality ?? 1,
+					callback: (canvas) => {
+						exportGroup.destroy();
+						stage.position(originalPosition);
+						stage.scale(originalScale);
+						stage.batchDraw();
+						if (nodesSelectionPluginPrev) this.getNodesSelectionPlugin()?.enable();
+						if (nodesDistanceSnappingPluginPrev) this.getNodesDistanceSnappingPlugin()?.enable();
+						if (nodesEdgeSnappingPluginPrev) this.getNodesEdgeSnappingPlugin()?.enable();
+						if (nodesStageGridPluginPrev) this.getStageGridPlugin()?.enable();
+						resolve(canvas);
+					}
+				});
+			}
+		});
+	}
 	exportAreaAsImage(area, options) {
 		return new Promise((resolve) => {
 			const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
@@ -22414,6 +22584,138 @@ var WeaveExportManager = class {
 			});
 		});
 	}
+	exportAreaAsBlob(area, options) {
+		return new Promise((resolve) => {
+			const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
+			const nodesSelectionPluginPrev = this.getNodesSelectionPlugin()?.isEnabled();
+			const nodesDistanceSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesEdgeSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesStageGridPluginPrev = this.getStageGridPlugin()?.isEnabled();
+			this.getNodesSelectionPlugin()?.disable();
+			this.getNodesDistanceSnappingPlugin()?.disable();
+			this.getNodesEdgeSnappingPlugin()?.disable();
+			this.getStageGridPlugin()?.disable();
+			const stage = this.instance.getStage();
+			const mainLayer = this.instance.getMainLayer();
+			if (!mainLayer) throw new Error("Main layer not found");
+			const originalPosition = {
+				x: stage.x(),
+				y: stage.y()
+			};
+			const originalScale = {
+				x: stage.scaleX(),
+				y: stage.scaleY()
+			};
+			stage.scale({
+				x: 1,
+				y: 1
+			});
+			stage.position({
+				x: 0,
+				y: 0
+			});
+			const bounds = area;
+			const background = new Konva.Rect({
+				x: bounds.x - padding,
+				y: bounds.y - padding,
+				width: bounds.width + 2 * padding,
+				height: bounds.height + 2 * padding,
+				strokeWidth: 0,
+				fill: backgroundColor
+			});
+			mainLayer.add(background);
+			background.moveToBottom();
+			stage.batchDraw();
+			stage.toBlob({
+				x: area.x,
+				y: area.y,
+				width: area.width,
+				height: area.height,
+				mimeType: format,
+				pixelRatio,
+				quality: options.quality ?? 1,
+				callback: (blob) => {
+					background.destroy();
+					stage.position(originalPosition);
+					stage.scale(originalScale);
+					stage.batchDraw();
+					if (nodesSelectionPluginPrev) this.getNodesSelectionPlugin()?.enable();
+					if (nodesDistanceSnappingPluginPrev) this.getNodesDistanceSnappingPlugin()?.enable();
+					if (nodesEdgeSnappingPluginPrev) this.getNodesEdgeSnappingPlugin()?.enable();
+					if (nodesStageGridPluginPrev) this.getStageGridPlugin()?.enable();
+					if (!blob) {
+						(0, import_lodash.reject)(new Error("Failed to generate image blob"));
+						return;
+					}
+					resolve(blob);
+				}
+			});
+		});
+	}
+	exportAreaAsCanvas(area, options) {
+		return new Promise((resolve) => {
+			const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
+			const nodesSelectionPluginPrev = this.getNodesSelectionPlugin()?.isEnabled();
+			const nodesDistanceSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesEdgeSnappingPluginPrev = this.getNodesDistanceSnappingPlugin()?.isEnabled();
+			const nodesStageGridPluginPrev = this.getStageGridPlugin()?.isEnabled();
+			this.getNodesSelectionPlugin()?.disable();
+			this.getNodesDistanceSnappingPlugin()?.disable();
+			this.getNodesEdgeSnappingPlugin()?.disable();
+			this.getStageGridPlugin()?.disable();
+			const stage = this.instance.getStage();
+			const mainLayer = this.instance.getMainLayer();
+			if (!mainLayer) throw new Error("Main layer not found");
+			const originalPosition = {
+				x: stage.x(),
+				y: stage.y()
+			};
+			const originalScale = {
+				x: stage.scaleX(),
+				y: stage.scaleY()
+			};
+			stage.scale({
+				x: 1,
+				y: 1
+			});
+			stage.position({
+				x: 0,
+				y: 0
+			});
+			const bounds = area;
+			const background = new Konva.Rect({
+				x: bounds.x - padding,
+				y: bounds.y - padding,
+				width: bounds.width + 2 * padding,
+				height: bounds.height + 2 * padding,
+				strokeWidth: 0,
+				fill: backgroundColor
+			});
+			mainLayer.add(background);
+			background.moveToBottom();
+			stage.batchDraw();
+			stage.toCanvas({
+				x: area.x,
+				y: area.y,
+				width: area.width,
+				height: area.height,
+				mimeType: format,
+				pixelRatio,
+				quality: options.quality ?? 1,
+				callback: (canvas) => {
+					background.destroy();
+					stage.position(originalPosition);
+					stage.scale(originalScale);
+					stage.batchDraw();
+					if (nodesSelectionPluginPrev) this.getNodesSelectionPlugin()?.enable();
+					if (nodesDistanceSnappingPluginPrev) this.getNodesDistanceSnappingPlugin()?.enable();
+					if (nodesEdgeSnappingPluginPrev) this.getNodesEdgeSnappingPlugin()?.enable();
+					if (nodesStageGridPluginPrev) this.getStageGridPlugin()?.enable();
+					resolve(canvas);
+				}
+			});
+		});
+	}
 	async exportNodesServerSide(nodes, boundingNodes, options) {
 		const { format = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
 		this.getNodesSelectionPlugin()?.disable();
@@ -22629,6 +22931,14 @@ var WeaveExportManager = class {
 		const snappingPlugin = this.instance.getPlugin(WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY);
 		return snappingPlugin;
 	}
+	blobToDataURL(blob) {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onloadend = () => resolve(reader.result);
+			reader.onerror = () => reject(new Error("Failed to convert blob to data URL"));
+			reader.readAsDataURL(blob);
+		});
+	}
 };
 
 //#endregion
@@ -23680,11 +23990,27 @@ var Weave = class {
 	async exportAreaServerSide(area, options) {
 		return await this.exportManager.exportAreaServerSide(area, options);
 	}
-	async exportNodes(nodes, boundingNodes, options) {
-		return await this.exportManager.exportNodesAsImage(nodes, boundingNodes, options);
+	async exportNodes(nodes, boundingNodes, options, returnFormat = WEAVE_EXPORT_RETURN_FORMAT.IMAGE) {
+		switch (returnFormat) {
+			case WEAVE_EXPORT_RETURN_FORMAT.BLOB: return await this.exportManager.exportNodesAsBlob(nodes, boundingNodes, options);
+			case WEAVE_EXPORT_RETURN_FORMAT.CANVAS: return await this.exportManager.exportNodesAsCanvas(nodes, boundingNodes, options);
+			case WEAVE_EXPORT_RETURN_FORMAT.DATA_URL: {
+				const blob = await this.exportManager.exportNodesAsBlob(nodes, boundingNodes, options);
+				return await this.exportManager.blobToDataURL(blob);
+			}
+			case WEAVE_EXPORT_RETURN_FORMAT.IMAGE: return await this.exportManager.exportNodesAsImage(nodes, boundingNodes, options);
+		}
 	}
-	async exportArea(area, options) {
-		return await this.exportManager.exportAreaAsImage(area, options);
+	async exportArea(area, options, returnFormat = WEAVE_EXPORT_RETURN_FORMAT.IMAGE) {
+		switch (returnFormat) {
+			case WEAVE_EXPORT_RETURN_FORMAT.BLOB: return await this.exportManager.exportAreaAsBlob(area, options);
+			case WEAVE_EXPORT_RETURN_FORMAT.CANVAS: return await this.exportManager.exportAreaAsCanvas(area, options);
+			case WEAVE_EXPORT_RETURN_FORMAT.DATA_URL: {
+				const blob = await this.exportManager.exportAreaAsBlob(area, options);
+				return await this.exportManager.blobToDataURL(blob);
+			}
+			case WEAVE_EXPORT_RETURN_FORMAT.IMAGE: return await this.exportManager.exportAreaAsImage(area, options);
+		}
 	}
 	getExportBoundingBox(nodesIds) {
 		const nodes = [];
@@ -24074,6 +24400,9 @@ var WeaveStageNode = class extends WeaveNode {
 	setupEvents() {
 		if (this.globalEventsInitialized) return;
 		if (this.instance.isServerSide()) return;
+		window.addEventListener("blur", () => {
+			this.isCmdCtrlPressed = false;
+		}, { signal: this.instance.getEventsController()?.signal });
 		window.addEventListener("keydown", (e) => {
 			if (this.isOnlyCtrlOrMeta(e)) {
 				this.isCmdCtrlPressed = true;
@@ -24778,6 +25107,9 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	initEvents() {
 		if (!this.eventsInitialized && !globalThis._weave_isServerSide) {
+			window.addEventListener("blur", () => {
+				this.isCtrlMetaPressed = false;
+			}, { signal: this.instance.getEventsController()?.signal });
 			window.addEventListener("keydown", (e) => {
 				if (e.ctrlKey || e.metaKey) this.isCtrlMetaPressed = true;
 			}, { signal: this.instance.getEventsController()?.signal });
@@ -27311,15 +27643,16 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth - borderWidth * 2,
 			height: props.frameHeight - borderWidth * 2,
 			strokeScaleEnabled: true,
-			clipFunc: (ctx) => {
-				const width = (frameInternal.width() + borderWidth) * frameInternal.scaleX();
-				const height = (frameInternal.height() + borderWidth) * frameInternal.scaleY();
-				ctx.rect(-(borderWidth / 2) * frameInternal.scaleX(), -(borderWidth / 2) * frameInternal.scaleY(), width, height);
-			},
 			listening: true,
 			draggable: false,
 			isTargetable: false
 		});
+		frameInternal.clip({
+			x: -(borderWidth / 2) * frameInternal.scaleX(),
+			y: -(borderWidth / 2) * frameInternal.scaleX(),
+			width: (frameInternal.width() + borderWidth) * frameInternal.scaleX(),
+			height: (frameInternal.height() + borderWidth) * frameInternal.scaleY()
+		});
 		frame.add(frameInternal);
 		const selectionArea = new Konva.Rect({
 			...frameParams,
@@ -27419,6 +27752,12 @@ var WeaveFrameNode = class extends WeaveNode {
 		frame.getNodeAnchors = function() {
 			return [];
 		};
+		frame.clip({
+			x: 0,
+			y: text.y(),
+			width: frame.width(),
+			height: frame.height() + text.height()
+		});
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {
@@ -32110,6 +32449,9 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 		};
 	}
 	initEvents() {
+		window.addEventListener("blur", () => {
+			this.isCtrlOrMetaPressed = false;
+		}, { signal: this.instance.getEventsController()?.signal });
 		window.addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 		}, { signal: this.instance.getEventsController()?.signal });
@@ -36053,7 +36395,7 @@ var WeaveExportStageToolAction = class extends WeaveAction {
 	}
 	async exportStage(boundingNodes) {
 		const mainLayer = this.instance.getMainLayer();
-		const img = await this.instance.exportNodes(mainLayer?.getChildren() ?? [], boundingNodes, this.options);
+		const img = await this.instance.exportNodes(mainLayer?.getChildren() ?? [], boundingNodes, this.options, WEAVE_EXPORT_RETURN_FORMAT.IMAGE);
 		return img;
 	}
 	async trigger(cancelAction, { boundingNodes, options }) {
@@ -36103,7 +36445,7 @@ var WeaveExportNodesToolAction = class extends WeaveAction {
 		return EXPORT_NODES_TOOL_ACTION_NAME;
 	}
 	async exportNodes(nodes, boundingNodes) {
-		const img = await this.instance.exportNodes(nodes, boundingNodes ?? ((nodes$1) => nodes$1), this.options);
+		const img = await this.instance.exportNodes(nodes, boundingNodes ?? ((nodes$1) => nodes$1), this.options, WEAVE_EXPORT_RETURN_FORMAT.IMAGE);
 		return img;
 	}
 	async trigger(cancelAction, { nodes, boundingNodes, options, triggerSelectionTool = true }) {
@@ -37828,6 +38170,9 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		window.addEventListener("blur", () => {
+			this.isCtrlOrMetaPressed = false;
+		}, { signal: this.instance.getEventsController()?.signal });
 		window.addEventListener("keydown", (e) => {
 			if (e.ctrlKey || e.metaKey) this.isCtrlOrMetaPressed = true;
 			if (e.code === "Space") {