@inditextech/weave-sdk 3.2.0-SNAPSHOT.93.1 → 3.2.0

package/dist/sdk.node.js

@@ -15151,6 +15151,7 @@ var WeaveStore = class {
 				});
 			}
 			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
+				this.instance.checkForAsyncElements();
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.emitOnRoomLoadedEvent();
@@ -17832,8 +17833,7 @@ function getTargetAndSkipNodes(instance, e, forceTransformer = false) {
 	}
 	if (e.type === "transform" && nodesSelectionPlugin) {
 		node = e.target;
-		skipNodes.push(node.getAttrs().id ?? "");
-		skipNodes.push(...nodesSelectionPlugin.getTransformer().nodes().map((node$1) => node$1.getAttrs().id ?? ""));
+		skipNodes.push(node.getAttrs().id ?? "", ...nodesSelectionPlugin.getTransformer().nodes().map((node$1) => node$1.getAttrs().id ?? ""));
 	}
 	return {
 		targetNode: forceTransformer ? nodesSelectionPlugin.getTransformer() : node,
@@ -20146,10 +20146,10 @@ const augmentKonvaNodeClass = (config) => {
 	Konva.Node.prototype.dblClick = function() {};
 };
 var WeaveNode = class {
-	register(instance) {
+	async register(instance) {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger(this.getNodeType());
-		this.onRegister();
+		await this.onRegister();
 		this.instance.getChildLogger(`node-${this.getNodeType()}`).debug(`Node with type [${this.getNodeType()}] registered`);
 		return this;
 	}
@@ -20721,7 +20721,9 @@ var WeaveNode = class {
 			}
 		};
 	}
-	onRegister() {}
+	async onRegister() {
+		return;
+	}
 	onAdd(nodeInstance) {}
 	onDestroy(nodeInstance) {
 		nodeInstance.destroy();
@@ -21909,19 +21911,19 @@ var WeaveRegisterManager = class {
 		plugin.register(this.instance);
 		this.plugins[pluginName] = plugin;
 	}
-	registerNodesHandlers() {
+	async registerNodesHandlers() {
 		const config = this.instance.getConfiguration();
-		if (config.nodes) for (const node of config.nodes) this.registerNodeHandler(node);
+		if (config.nodes) for (const node of config.nodes) await this.registerNodeHandler(node);
 		this.logger.info(`Nodes handlers registered`);
 	}
-	registerNodeHandler(node) {
+	async registerNodeHandler(node) {
 		const nodeType = node.getNodeType();
 		if (this.nodesHandlers[nodeType]) {
 			const msg = `Node handler with type [${nodeType}] already exists`;
 			this.logger.error(msg);
 			throw new Error(msg);
 		}
-		node.register(this.instance);
+		await node.register(this.instance);
 		this.nodesHandlers[nodeType] = node;
 	}
 	registerActionsHandlers() {
@@ -21953,7 +21955,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.2.0-SNAPSHOT.93.1";
+var version = "3.2.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22656,14 +22658,13 @@ var WeaveAsyncManager = class {
 		this.asyncElements = watchMap(() => {
 			this.instance.emitEvent("onAsyncElementChange");
 		}, new Map());
-		this.instance.addEventListener("onRoomLoaded", (isRoomLoaded) => {
-			if (!isRoomLoaded) return;
-			const roomHasResourcesToLoad = this.roomHasResourcesToLoad();
-			if (!roomHasResourcesToLoad && !this.asyncElementsLoadedEventEmitted) {
-				this.instance.emitEvent("onAsyncElementsLoaded");
-				this.asyncElementsLoadedEventEmitted = true;
-			}
-		});
+	}
+	checkForAsyncElements(elements) {
+		const amountAsyncResourcesExtracted = this.extractAsyncResources(elements);
+		if (amountAsyncResourcesExtracted === 0 && !this.asyncElementsLoadedEventEmitted) {
+			this.instance.emitEvent("onAsyncElementsLoaded");
+			this.asyncElementsLoadedEventEmitted = true;
+		}
 	}
 	extractAsyncElements(state) {
 		const asyncElements = [];
@@ -22679,11 +22680,20 @@ var WeaveAsyncManager = class {
 		} else for (const element of Object.values(state.weave)) traverse(element);
 		return asyncElements;
 	}
-	roomHasResourcesToLoad() {
+	extractAsyncResources(elements) {
 		const roomData = this.instance.getStore().getState();
-		const jsonRoomData = JSON.parse(JSON.stringify(roomData));
+		let jsonRoomData = JSON.parse(JSON.stringify(roomData));
+		if (elements) jsonRoomData = elements;
 		const asyncElements = this.extractAsyncElements(jsonRoomData);
-		return asyncElements.length > 0;
+		for (const element of asyncElements) {
+			const elementId = element.props?.id;
+			if (!elementId) continue;
+			if (!this.asyncElements.has(elementId)) this.asyncElements.set(elementId, {
+				type: element.type,
+				status: WEAVE_ASYNC_STATUS.NOT_LOADED
+			});
+		}
+		return asyncElements.length;
 	}
 	asyncElementsLoaded() {
 		return [...this.asyncElements.values()].every((el) => el.status === WEAVE_ASYNC_STATUS.LOADED);
@@ -22918,7 +22928,7 @@ var Weave = class {
 		this.emitEvent("onRoomLoaded", false);
 		this.status = WEAVE_INSTANCE_STATUS.STARTING;
 		this.emitEvent("onInstanceStatus", this.status);
-		this.registerManager.registerNodesHandlers();
+		await this.registerManager.registerNodesHandlers();
 		this.augmentKonvaStageClass();
 		this.augmentKonvaNodeClass();
 		this.registerManager.registerPlugins();
@@ -23502,6 +23512,9 @@ var Weave = class {
 			nodeHandler.show(node);
 		}
 	}
+	checkForAsyncElements(elements) {
+		this.asyncManager.checkForAsyncElements(elements);
+	}
 	asyncElementsLoaded() {
 		return this.asyncManager.asyncElementsLoaded();
 	}
@@ -23581,7 +23594,7 @@ function loadImageSource(image, options) {
 			const imageSource = Konva.Util.createImageElement();
 			imageSource.crossOrigin = crossOrigin;
 			imageSource.onerror = () => {
-				reject();
+				reject(new Error("Failed to load image source"));
 			};
 			imageSource.onload = async () => {
 				resolve(imageSource);
@@ -25108,7 +25121,10 @@ const WEAVE_IMAGE_CROP_ANCHOR_POSITION = {
 };
 const WEAVE_IMAGE_DEFAULT_CONFIG = {
 	performance: { cache: { enabled: false } },
-	style: { placeholder: { fill: "#aaaaaa" } },
+	style: {
+		placeholder: { fill: "#aaaaaa" },
+		cursor: { loading: "wait" }
+	},
 	imageLoading: {
 		maxRetryAttempts: 15,
 		retryDelayMs: 2e3
@@ -25679,6 +25695,57 @@ var WeaveImageCrop = class WeaveImageCrop {
 	}
 };
 
+//#endregion
+//#region src/nodes/image/utils.ts
+const extractCursorUrl = (cursor, fallback) => {
+	const lower = cursor.toLowerCase();
+	const start = lower.indexOf("url(");
+	if (start === -1) return {
+		preload: false,
+		cursor
+	};
+	let i = start + 4;
+	const len = cursor.length;
+	while (i < len && /\s/.test(cursor[i])) i++;
+	let quote = null;
+	if (cursor[i] === "\"" || cursor[i] === "'") {
+		quote = cursor[i];
+		i++;
+	}
+	let buf = "";
+	for (; i < len; i++) {
+		const ch = cursor[i];
+		if (quote) {
+			if (ch === quote) {
+				i++;
+				break;
+			}
+			buf += ch;
+		} else {
+			if (ch === ")") break;
+			buf += ch;
+		}
+	}
+	const url = buf.trim();
+	if (!url) return {
+		preload: false,
+		cursor: fallback
+	};
+	if (!isAllowedUrl(url)) return {
+		preload: false,
+		cursor: fallback
+	};
+	return {
+		preload: true,
+		cursor: url
+	};
+};
+const isAllowedUrl = (value) => {
+	if (/^https?:\/\//i.test(value)) return true;
+	if (/^(javascript|data|blob|ftp):/i.test(value)) return false;
+	return true;
+};
+
 //#endregion
 //#region src/nodes/image/image.ts
 var WeaveImageNode = class extends WeaveNode {
@@ -25706,10 +25773,41 @@ var WeaveImageNode = class extends WeaveNode {
 		this.imageTryoutAttempts = {};
 		this.imageFallback = {};
 	}
+	preloadCursors() {
+		const promiseHandler = (src) => new Promise((resolveInt, rejectInt) => {
+			const img = Konva.Util.createImageElement();
+			img.onload = () => {
+				resolveInt();
+			};
+			img.onerror = () => {
+				rejectInt(new Error(`Failed to load cursor image: ${src}`));
+			};
+			img.src = src;
+		});
+		return new Promise((resolve) => {
+			(async () => {
+				const cursors = Object.keys(this.config.style.cursor);
+				const cursorUrls = [];
+				const cursorFallback = { loading: "wait" };
+				for (const cursorKey of cursors) {
+					const cursorValue = this.config.style.cursor[cursorKey];
+					const { preload, cursor } = extractCursorUrl(cursorValue, cursorFallback[cursorKey]);
+					if (preload) cursorUrls.push({ src: cursor });
+				}
+				if (cursorUrls.length > 0) {
+					const cursorsPreloading = [];
+					for (const { src } of cursorUrls) cursorsPreloading.push(promiseHandler(src));
+					await Promise.allSettled(cursorsPreloading);
+				}
+				resolve();
+			})();
+		});
+	}
 	getConfiguration() {
 		return this.config;
 	}
-	onRegister() {
+	async onRegister() {
+		await this.preloadCursors();
 		this.logger.info(`image caching enabled: ${this.config.performance.cache.enabled}`);
 	}
 	triggerCrop(imageNode, options) {
@@ -25786,7 +25884,7 @@ var WeaveImageNode = class extends WeaveNode {
 		});
 		this.setupDefaultNodeAugmentation(image);
 		image.defineMousePointer = () => {
-			if (this.imageState[id]?.status === "loading") return "wait";
+			if (this.imageState[id]?.status === "loading") return this.config.style.cursor.loading;
 			const selectedNodes = this.getSelectionPlugin()?.getSelectedNodes() ?? [];
 			if (this.isSelecting() && selectedNodes.includes(image)) return "grab";
 			return "pointer";
@@ -26254,6 +26352,8 @@ var WeaveImageNode = class extends WeaveNode {
 			onError(error);
 		};
 		this.imageSource[imageId].onload = async () => {
+			const stage = this.instance.getStage();
+			stage.container().style.cursor = "pointer";
 			this.imageState[imageId] = {
 				status: "loaded",
 				loaded: true,
@@ -26295,7 +26395,7 @@ var WeaveImageNode = class extends WeaveNode {
 						this.loadImage(node.getAttrs(), node, false, true);
 					}
 				}, this.config.imageLoading.retryDelayMs);
-				if (loadTryout && this.imageTryoutIds[id]) {
+				if (useFallback && loadTryout && this.imageTryoutIds[id]) {
 					clearTimeout(this.imageTryoutIds[id]);
 					delete this.imageTryoutIds[id];
 				}
@@ -26332,15 +26432,11 @@ var WeaveImageNode = class extends WeaveNode {
 						width: imageRect.width,
 						height: imageRect.height
 					});
-					const stage = this.instance.getStage();
-					if (!loadFallback) {
-						if (!this.instance.isServerSide() && stage.container().style.cursor === "wait") stage.container().style.cursor = "pointer";
-						this.imageState[id] = {
-							status: "loaded",
-							loaded: true,
-							error: false
-						};
-					}
+					if (!loadFallback) this.imageState[id] = {
+						status: "loaded",
+						loaded: true,
+						error: false
+					};
 					this.updateImageCrop(image);
 					this.resolveAsyncElement(id);
 					this.cacheNode(image);
@@ -26386,12 +26482,6 @@ var WeaveImageNode = class extends WeaveNode {
 	updatePlaceholderSize(image, imagePlaceholder) {
 		const imageAttrs = image.getAttrs();
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
-		if (!imageAttrs.adding && imageAttrs.cropInfo) {
-			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
-			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
-			imagePlaceholder.width(imageAttrs.cropSize.width * (actualScale / cropScale));
-			imagePlaceholder.height(imageAttrs.cropSize.height * (actualScale / cropScale));
-		}
 		if (!imageAttrs.adding && !imageAttrs.cropInfo) {
 			imagePlaceholder.width(imageAttrs.uncroppedImage.width);
 			imagePlaceholder.height(imageAttrs.uncroppedImage.height);
@@ -28874,7 +28964,7 @@ var WeaveVideoNode = class extends WeaveNode {
 			videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
 			videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
 			const nodesSelectionPlugin = this.getNodeSelectionPlugin();
-			if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+			if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer()?.forceUpdate();
 			this.resolveAsyncElement(id);
 		};
 	}
@@ -29267,7 +29357,7 @@ var WeaveVideoNode = class extends WeaveNode {
 		videoIconGroup.x(videoWidth - videoIconGroupWidth - this.config.style.icon.external.paddingX);
 		videoIconGroup.y(videoHeight - videoIconGroupHeight - this.config.style.icon.external.paddingY);
 		const nodesSelectionPlugin = this.getNodeSelectionPlugin();
-		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer()?.forceUpdate();
 	}
 	getNodeSelectionPlugin() {
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -31884,7 +31974,7 @@ var WeaveZoomOutToolAction = class extends WeaveAction {
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		this.instance.triggerAction(this.previousAction);
+		if (this.previousAction !== void 0) this.instance.triggerAction(this.previousAction);
 		stage.container().style.cursor = "default";
 	}
 };
@@ -31918,7 +32008,7 @@ var WeaveZoomInToolAction = class extends WeaveAction {
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		this.instance.triggerAction(this.previousAction);
+		if (this.previousAction !== void 0) this.instance.triggerAction(this.previousAction);
 		stage.container().style.cursor = "default";
 	}
 };
@@ -31951,7 +32041,7 @@ var WeaveFitToScreenToolAction = class extends WeaveAction {
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		this.instance.triggerAction(this.previousAction);
+		if (this.previousAction !== void 0) this.instance.triggerAction(this.previousAction);
 		stage.container().style.cursor = "default";
 	}
 };
@@ -31993,7 +32083,7 @@ var WeaveFitToSelectionToolAction = class extends WeaveAction {
 	}
 	cleanup() {
 		const stage = this.instance.getStage();
-		if (this.previousAction) this.instance.triggerAction(this.previousAction);
+		if (this.previousAction !== void 0) this.instance.triggerAction(this.previousAction);
 		stage.container().style.cursor = "default";
 	}
 };
@@ -33234,14 +33324,19 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		});
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
 				this.cancelAction();
 				return;
 			}
 			if (e.code === "Space" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
 				this.isSpacePressed = true;
 				return;
 			}
-			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) this.cancelAction();
+			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+				e.stopPropagation();
+				this.cancelAction();
+			}
 		});
 		const handlePointerDown = (e) => {
 			if (this.state === BRUSH_TOOL_STATE.INACTIVE) return;
@@ -33600,12 +33695,9 @@ const WEAVE_IMAGE_TOOL_CONFIG_DEFAULT = { style: { cursor: {
 var WeaveImageToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
-	imageFile = null;
-	imageURL = null;
-	forceMainContainer = false;
+	imageAction = {};
 	ignoreKeyboardEvents = false;
 	ignorePointerEvents = false;
-	uploadType = null;
 	onPropsChange = void 0;
 	update = void 0;
 	constructor(params) {
@@ -33613,14 +33705,10 @@ var WeaveImageToolAction = class extends WeaveAction {
 		this.config = mergeExceptArrays(WEAVE_IMAGE_TOOL_CONFIG_DEFAULT, params?.config ?? {});
 		this.pointers = new Map();
 		this.initialized = false;
-		this.state = WEAVE_IMAGE_TOOL_STATE.IDLE;
 		this.imageId = null;
+		this.state = WEAVE_IMAGE_TOOL_STATE.IDLE;
 		this.tempImageId = null;
 		this.tempImageNode = null;
-		this.container = void 0;
-		this.imageURL = null;
-		this.uploadType = null;
-		this.clickPoint = null;
 	}
 	getName() {
 		return WEAVE_IMAGE_TOOL_ACTION_NAME;
@@ -33692,66 +33780,54 @@ var WeaveImageToolAction = class extends WeaveAction {
 		stage.on("pointerup", (e) => {
 			if (this.ignorePointerEvents) return;
 			this.pointers.delete(e.evt.pointerId);
-			if (this.state === WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+			if (this.state === WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION) this.handleAdding(this.imageId ?? "");
 		});
 		this.initialized = true;
 	}
 	setState(state) {
 		this.state = state;
 	}
-	async loadImage(params) {
+	async loadImage(nodeId, params) {
 		this.setCursor();
 		this.setFocusStage();
-		if (!this.imageId) {
-			this.cancelAction();
-			return;
-		}
 		const imageNodeHandler = this.getImageNodeHandler();
 		if (!imageNodeHandler) return;
-		const actualImageId = this.imageId;
 		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
 			const image = params.image;
 			const realImageSize = await getImageSizeFromFile(image.file);
 			const downscaledImage = await downscaleImageFile(image.file, image.downscaleRatio);
-			const reader = new FileReader();
-			reader.onloadend = () => {
-				imageNodeHandler.preloadFallbackImage(actualImageId, reader.result, {
-					onLoad: () => {
-						this.props = {
-							...this.props,
-							imageFallback: reader.result,
-							imageURL: void 0,
-							width: realImageSize.width,
-							height: realImageSize.height
-						};
-						this.addImageNode(params?.position);
-					},
-					onError: () => {
-						this.cancelAction();
-					}
-				});
-			};
-			reader.onerror = () => {};
-			reader.readAsDataURL(downscaledImage);
+			try {
+				const dataURL = await this.getDataURL(downscaledImage);
+				this.imageAction[nodeId].props = {
+					...this.imageAction[nodeId].props,
+					imageFallback: dataURL,
+					imageURL: void 0,
+					width: realImageSize.width,
+					height: realImageSize.height
+				};
+				this.addImageNode(nodeId, params?.position);
+			} catch {
+				this.cancelAction();
+			}
 		}
 		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL) {
 			const image = params.image;
 			setTimeout(() => {
-				this.saveImageUrl(actualImageId, image.url);
+				this.saveImageUrl(nodeId, image.url);
 			}, 0);
-			this.addImageNode(params?.position);
+			this.addImageNode(nodeId, params?.position);
 		}
 	}
 	isTouchDevice() {
 		return window.matchMedia("(pointer: coarse)").matches;
 	}
-	addImageNode(position) {
+	async addImageNode(nodeId, position) {
 		const stage = this.instance.getStage();
 		this.setCursor();
 		this.setFocusStage();
 		if (position) {
 			this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
-			this.handleAdding(position);
+			this.handleAdding(nodeId, position);
 			return;
 		}
 		const imageNodeHandler = this.getImageNodeHandler();
@@ -33759,11 +33835,15 @@ var WeaveImageToolAction = class extends WeaveAction {
 			this.cancelAction();
 			return;
 		}
-		if (this.imageId) {
+		if (this.imageAction[nodeId]) {
+			const { uploadType } = this.imageAction[nodeId];
 			const mousePos = stage.getRelativePointerPosition();
 			this.tempImageId = v4_default();
-			let imageSource = imageNodeHandler.getImageSource(this.imageId);
-			if (this.uploadType === "file") imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
+			let imageSource = imageNodeHandler.getImageSource(nodeId);
+			if (uploadType === "file") {
+				imageSource = imageNodeHandler.getFallbackImageSource(nodeId);
+				imageSource ??= await this.loadImageDataURL(this.imageAction[nodeId].props.imageFallback);
+			}
 			if (!imageSource) {
 				this.cancelAction();
 				return;
@@ -33797,37 +33877,41 @@ var WeaveImageToolAction = class extends WeaveAction {
 				});
 				this.instance.getMainLayer()?.add(this.tempImageNode);
 			}
-			this.instance.emitEvent("onAddingImage", { imageURL: this.props.imageURL });
+			this.instance.emitEvent("onAddingImage");
+			this.imageAction[nodeId].clickPoint = null;
 		}
-		this.clickPoint = null;
 		this.setState(WEAVE_IMAGE_TOOL_STATE.DEFINING_POSITION);
 	}
-	handleAdding(position) {
+	async handleAdding(nodeId, position) {
 		const imageNodeHandler = this.getImageNodeHandler();
 		if (!imageNodeHandler) {
 			this.cancelAction();
 			return;
 		}
-		if (this.imageId) {
-			let imageSource = imageNodeHandler.getImageSource(this.imageId);
-			if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) imageSource = imageNodeHandler.getFallbackImageSource(this.imageId);
+		if (this.imageAction[nodeId]) {
+			const { uploadType, imageURL, forceMainContainer } = this.imageAction[nodeId];
+			let imageSource = imageNodeHandler.getImageSource(nodeId);
+			if (uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
+				imageSource = imageNodeHandler.getFallbackImageSource(nodeId);
+				imageSource ??= await this.loadImageDataURL(this.imageAction[nodeId].props.imageFallback);
+			}
 			if (!imageSource && !position) {
 				this.cancelAction();
 				return;
 			}
 			const { mousePoint, container } = this.instance.getMousePointer(position);
-			this.clickPoint = mousePoint;
-			this.container = container;
+			this.imageAction[nodeId].clickPoint = mousePoint;
+			this.imageAction[nodeId].container = container;
 			const nodeHandler = this.instance.getNodeHandler("image");
-			const imageWidth = this.props.width ? this.props.width : imageSource?.width;
-			const imageHeight = this.props.height ? this.props.height : imageSource?.height;
+			const imageWidth = this.imageAction[nodeId].props.width ? this.imageAction[nodeId].props.width : imageSource?.width;
+			const imageHeight = this.imageAction[nodeId].props.height ? this.imageAction[nodeId].props.height : imageSource?.height;
 			let realImageURL = void 0;
-			if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imageURL) realImageURL = this.imageURL?.url;
+			if (uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && imageURL) realImageURL = imageURL?.url;
 			if (nodeHandler) {
-				const node = nodeHandler.create(this.imageId, {
-					...this.props,
-					x: this.clickPoint?.x ?? 0,
-					y: this.clickPoint?.y ?? 0,
+				const node = nodeHandler.create(nodeId, {
+					...this.imageAction[nodeId].props,
+					x: this.imageAction[nodeId].clickPoint.x,
+					y: this.imageAction[nodeId].clickPoint.y,
 					opacity: 1,
 					adding: false,
 					imageURL: realImageURL,
@@ -33845,23 +33929,24 @@ var WeaveImageToolAction = class extends WeaveAction {
 						height: imageHeight
 					}
 				});
-				this.instance.addNode(node, this.forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.container?.getAttrs().id);
-				this.instance.emitEvent("onAddedImage", { nodeId: this.imageId });
-				if (this.uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
-					const uploadImageFunctionInternal = async () => {
-						const nodeId = this.imageId ?? "";
+				this.instance.addNode(node, forceMainContainer ? this.instance.getMainLayer()?.getAttrs().id : this.imageAction[nodeId].container?.getAttrs().id);
+				this.instance.emitEvent("onAddedImage", { nodeId });
+				if (uploadType === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE) {
+					const uploadImageFunctionInternal = async (imageActionData) => {
+						const { uploadImageFunction, imageFile } = imageActionData;
 						try {
-							const imageURL = await this.uploadImageFunction(this.imageFile.file);
-							this.saveImageUrl(nodeId, imageURL);
+							const imageURL$1 = await uploadImageFunction?.(imageFile.file);
+							if (!imageURL$1) return;
+							this.saveImageUrl(nodeId, imageURL$1);
 							this.instance.emitEvent("onImageUploaded", {
-								imageURL,
+								imageURL: imageURL$1,
 								nodeId
 							});
 						} catch (error) {
 							this.instance.emitEvent("onImageUploadedError", { error });
 						}
 					};
-					uploadImageFunctionInternal();
+					uploadImageFunctionInternal(this.imageAction[nodeId]);
 				}
 			}
 			this.setState(WEAVE_IMAGE_TOOL_STATE.FINISHED);
@@ -33876,42 +33961,51 @@ var WeaveImageToolAction = class extends WeaveAction {
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		this.ignorePointerEvents = false;
 		this.ignoreKeyboardEvents = false;
-		this.forceMainContainer = params?.forceMainContainer ?? false;
-		this.imageFile = null;
-		this.imageURL = null;
-		this.imageId = v4_default();
-		this.props = this.initProps();
-		if (params?.imageId) this.updateProps({ imageId: params.imageId });
+		const nodeId = params?.nodeId ?? v4_default();
+		this.imageId = nodeId;
+		this.imageAction[nodeId] = {
+			props: this.initProps(),
+			imageId: nodeId,
+			clickPoint: null,
+			container: void 0,
+			imageFile: null,
+			imageURL: null,
+			forceMainContainer: params?.forceMainContainer ?? false,
+			uploadType: null,
+			uploadImageFunction: null
+		};
+		if (params?.imageId) this.imageAction[nodeId].imageId = params.imageId;
 		if (this.forceExecution) {
 			this.ignorePointerEvents = true;
 			this.ignoreKeyboardEvents = true;
 		}
 		if (params?.position) this.setState(WEAVE_IMAGE_TOOL_STATE.SELECTED_POSITION);
 		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE && params.image) {
-			this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE;
-			this.imageFile = params.image;
-			this.uploadImageFunction = params.uploadImageFunction;
-			this.loadImage({
+			this.imageAction[nodeId].uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE;
+			this.imageAction[nodeId].imageFile = params.image;
+			this.imageAction[nodeId].uploadImageFunction = params.uploadImageFunction;
+			this.loadImage(nodeId, {
 				type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE,
 				image: params.image,
 				position: params?.position
 			});
 		}
 		if (params.type === WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL && params.image) {
-			this.uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL;
-			this.imageURL = params.image;
-			this.updateProps({
+			this.imageAction[nodeId].uploadType = WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL;
+			this.imageAction[nodeId].imageURL = params.image;
+			this.imageAction[nodeId].props = {
+				...this.imageAction[nodeId].props,
 				imageFallback: params.image.fallback,
 				width: params.image.width,
 				height: params.image.height
-			});
-			this.loadImage({
+			};
+			this.loadImage(nodeId, {
 				type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
 				image: params.image,
 				position: params?.position
 			});
 		}
-		return { nodeId: this.imageId };
+		return { nodeId };
 	}
 	saveImageUrl(nodeId, imageURL) {
 		const stage = this.instance.getStage();
@@ -33937,11 +34031,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 			this.instance.endDrag(WEAVE_IMAGE_TOOL_ACTION_NAME);
 		}
 		this.initialCursor = null;
-		this.forceMainContainer = false;
-		this.container = void 0;
 		this.tempImageNode = null;
-		this.imageURL = null;
-		this.clickPoint = null;
 		this.setState(WEAVE_IMAGE_TOOL_STATE.IDLE);
 	}
 	getImageNodeHandler() {
@@ -33964,6 +34054,30 @@ var WeaveImageToolAction = class extends WeaveAction {
 	getActualState() {
 		return this.state;
 	}
+	loadImageDataURL(imageDataURL) {
+		return new Promise((resolve, reject) => {
+			const imageEle = Konva.Util.createImageElement();
+			imageEle.onerror = (error) => {
+				reject(error);
+			};
+			imageEle.onload = async () => {
+				resolve(imageEle);
+			};
+			imageEle.src = imageDataURL;
+		});
+	}
+	getDataURL(blob) {
+		return new Promise((resolve, reject) => {
+			const reader = new FileReader();
+			reader.onloadend = () => {
+				resolve(reader.result);
+			};
+			reader.onerror = () => {
+				reject(new Error("Failed to generate dataURL from file"));
+			};
+			reader.readAsDataURL(blob);
+		});
+	}
 };
 
 //#endregion
@@ -34012,18 +34126,13 @@ const WEAVE_IMAGES_TOOL_DEFAULT_CONFIG = {
 	layout: { columns: 4 }
 };
 
-//#endregion
-//#region src/internal-utils/generic.ts
-function sleep(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
 //#endregion
 //#region src/actions/images-tool/images-tool.ts
 var WeaveImagesToolAction = class extends WeaveAction {
 	initialized = false;
 	initialCursor = null;
 	nodesIds = [];
+	toAdd = 0;
 	imagesFile = [];
 	imagesURL = [];
 	forceMainContainer = false;
@@ -34111,7 +34220,10 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerup", (e) => {
 			this.pointers.delete(e.evt.pointerId);
-			if (this.state === WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION) this.handleAdding();
+			if (this.state === WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION) {
+				this.instance.emitEvent("onSelectedPositionImages");
+				this.handleAdding();
+			}
 		});
 		this.initialized = true;
 	}
@@ -34151,9 +34263,9 @@ var WeaveImagesToolAction = class extends WeaveAction {
 				const shadowBlur = this.config.style.cursor.imageThumbnails.shadowBlur;
 				const shadowOffset = this.config.style.cursor.imageThumbnails.shadowOffset;
 				const shadowOpacity = this.config.style.cursor.imageThumbnails.shadowOpacity;
-				const aspectRatio = imageSource.width / imageSource.height || 1;
-				const imageWidth = maxImageWidth * aspectRatio * (1 / stage.scaleX());
-				const imageHeight = maxImageHeight * (1 / stage.scaleY());
+				const scale = Math.min(maxImageWidth / imageSource.width, maxImageHeight / imageSource.height);
+				const imageWidth = imageSource.width * scale * (1 / stage.scaleX());
+				const imageHeight = imageSource.height * scale * (1 / stage.scaleY());
 				const imageNode = new Konva.Image({
 					x: position$1.x,
 					y: position$1.y,
@@ -34171,7 +34283,7 @@ var WeaveImagesToolAction = class extends WeaveAction {
 					shadowOffset,
 					shadowOpacity
 				});
-				maxWidth = position$1.x + imageWidth;
+				maxWidth = Math.max(maxWidth, position$1.x + imageWidth);
 				maxHeight = Math.max(maxHeight, position$1.y + imageHeight);
 				position$1 = {
 					x: position$1.x + imageThumbnailsPadding / stage.scaleX(),
@@ -34240,6 +34352,18 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		let imagePositionX = originPoint.x;
 		let imagePositionY = originPoint.y;
 		let maxHeight = 0;
+		this.nodesIds = [];
+		const images = [];
+		const checkAddedImages = ({ nodeId }) => {
+			if (this.nodesIds.includes(nodeId)) this.handleImageAdded();
+			if (this.getImagesAdded() <= 0) {
+				this.setState(WEAVE_IMAGES_TOOL_STATE.FINISHED);
+				this.cancelAction();
+				this.instance.removeEventListener("onAddedImage", checkAddedImages);
+				this.instance.emitEvent("onAddedImages", { nodesIds: this.nodesIds });
+			}
+		};
+		this.instance.addEventListener("onAddedImage", checkAddedImages);
 		if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE && this.imagesFile) {
 			const imagesToUpload = this.imagesFile.length;
 			let imagesUploaded = 0;
@@ -34253,23 +34377,35 @@ var WeaveImagesToolAction = class extends WeaveAction {
 			};
 			this.instance.addEventListener("onImageUploaded", handleUploadImage);
 			for (let i = 0; i < this.imagesFile.length; i++) {
-				const imageFile = this.imagesFile[i];
-				const { imageId, width, height,...restImageFile } = imageFile;
-				const uploadImageFunctionInternal = async () => {
-					const imageURL = await this.uploadImageFunction(imageFile.file);
-					return imageURL;
+				const nodeId = v4_default();
+				const image = this.imagesFile[i];
+				const { width, height } = image;
+				const handleImage = async (nodeId$1, imageFile, position$1) => {
+					const { imageId } = imageFile;
+					const uploadImageFunctionInternal = async () => {
+						const imageURL = await this.uploadImageFunction(imageFile.file);
+						return imageURL;
+					};
+					this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
+						type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE,
+						image: {
+							file: imageFile.file,
+							downscaleRatio: imageFile.downscaleRatio
+						},
+						uploadImageFunction: uploadImageFunctionInternal,
+						...imageId && { imageId },
+						position: {
+							x: position$1.x,
+							y: position$1.y
+						},
+						forceMainContainer: this.forceMainContainer,
+						nodeId: nodeId$1
+					}, true);
 				};
-				const { nodeId } = this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
-					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.FILE,
-					image: restImageFile,
-					uploadImageFunction: uploadImageFunctionInternal,
-					...imageId && { imageId },
-					position: {
-						x: imagePositionX,
-						y: imagePositionY
-					},
-					forceMainContainer: this.forceMainContainer
-				}, true);
+				images.push(handleImage(nodeId, image, {
+					x: imagePositionX,
+					y: imagePositionY
+				}));
 				this.nodesIds.push(nodeId);
 				maxHeight = Math.max(maxHeight, height);
 				imagePositionX += imagesPadding + width;
@@ -34278,40 +34414,51 @@ var WeaveImagesToolAction = class extends WeaveAction {
 					imagePositionY = imagePositionY + maxHeight + imagesPadding;
 					maxHeight = 0;
 				}
-				while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
 			}
-			this.instance.emitEvent("onAddedImages", { nodesIds: this.nodesIds });
 		}
-		if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imagesURL) {
-			for (let i = 0; i < this.imagesURL.length; i++) {
-				const imageURL = this.imagesURL[i];
-				const { imageId, options,...restImageURL } = imageURL;
-				const imageURLElement = restImageURL;
-				const { nodeId } = this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
+		if (this.uploadType === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL && this.imagesURL) for (let i = 0; i < this.imagesURL.length; i++) {
+			const nodeId = v4_default();
+			const image = this.imagesURL[i];
+			const handleImage = async (nodeId$1, imageURL, position$1) => {
+				const { imageId, options } = imageURL;
+				this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
 					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
-					image: imageURLElement,
+					image: {
+						url: imageURL.url,
+						fallback: imageURL.fallback,
+						width: imageURL.width,
+						height: imageURL.height
+					},
 					...imageId && { imageId },
 					...options && { options },
 					position: {
-						x: imagePositionX,
-						y: imagePositionY
+						x: position$1.x,
+						y: position$1.y
 					},
-					forceMainContainer: this.forceMainContainer
+					forceMainContainer: this.forceMainContainer,
+					nodeId: nodeId$1
 				}, true);
-				this.nodesIds.push(nodeId);
-				maxHeight = Math.max(maxHeight, imageURL.height);
-				imagePositionX += imagesPadding + imageURL.width;
-				if ((i + 1) % layoutColumns === 0) {
-					imagePositionX = originPoint.x;
-					imagePositionY = imagePositionY + maxHeight + imagesPadding;
-					maxHeight = 0;
-				}
-				while (imageToolActionHandler.getActualState() !== WEAVE_IMAGES_TOOL_STATE.IDLE) await sleep(10);
-			}
-			this.instance.emitEvent("onAddedImages", { nodesIds: this.nodesIds });
+			};
+			images.push(handleImage(nodeId, image, {
+				x: imagePositionX,
+				y: imagePositionY
+			}));
+			this.nodesIds.push(nodeId);
+			maxHeight = Math.max(maxHeight, image.height);
+			imagePositionX += imagesPadding + image.width;
+			if ((i + 1) % layoutColumns === 0) {
+				imagePositionX = originPoint.x;
+				imagePositionY = imagePositionY + maxHeight + imagesPadding;
+				maxHeight = 0;
+			}
+		}
+		if (this.nodesIds.length > 0) {
+			this.toAdd = this.nodesIds.length;
+			await Promise.allSettled(images);
+		} else {
+			this.setState(WEAVE_IMAGES_TOOL_STATE.FINISHED);
+			this.cancelAction();
 		}
-		this.setState(WEAVE_IMAGES_TOOL_STATE.FINISHED);
-		this.cancelAction();
 	}
 	trigger(cancelAction, params) {
 		if (!this.instance) throw new Error("Instance not defined");
@@ -34320,6 +34467,7 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		if (params?.position) this.setState(WEAVE_IMAGES_TOOL_STATE.SELECTED_POSITION);
+		this.nodesIds = [];
 		this.forceMainContainer = params.forceMainContainer ?? false;
 		if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
 			this.uploadType = WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE;
@@ -34367,6 +34515,7 @@ var WeaveImagesToolAction = class extends WeaveAction {
 			selectionPlugin.setSelectedNodes(addedNodes);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
+		this.instance.emitEvent("onFinishedImages");
 		this.instance.endDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
 		stage.container().style.cursor = "default";
 		this.uploadType = null;
@@ -34374,6 +34523,8 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		this.initialCursor = null;
 		this.container = void 0;
 		this.clickPoint = null;
+		this.nodesIds = [];
+		this.toAdd = 0;
 		this.setState(WEAVE_IMAGES_TOOL_STATE.IDLE);
 	}
 	setCursor() {
@@ -34389,6 +34540,12 @@ var WeaveImagesToolAction = class extends WeaveAction {
 	isTouchDevice() {
 		return window.matchMedia("(pointer: coarse)").matches;
 	}
+	getImagesAdded() {
+		return this.toAdd;
+	}
+	handleImageAdded() {
+		this.toAdd = this.toAdd - 1;
+	}
 	setDragAndDropProperties(properties) {
 		this.instance.startDrag(WEAVE_IMAGES_TOOL_ACTION_NAME);
 		this.instance.setDragProperties(properties);