@inditextech/weave-sdk 3.9.0-SNAPSHOT.186.1 → 3.9.0

package/dist/sdk.js

@@ -20755,8 +20755,8 @@ var WeaveNode = class {
 		return cancelBubble;
 	}
 	handleMouseout(e, node) {
-		const isCtrlOrMetaPressed = e.evt.ctrlKey || e.evt.metaKey;
-		if (isCtrlOrMetaPressed) return;
+		const isCtrlOrMetaPressed = e.evt?.ctrlKey || e.evt?.metaKey;
+		if (isCtrlOrMetaPressed) return false;
 		const realNode = this.instance.getInstanceRecursive(node);
 		if (realNode) this.hideHoverState();
 	}
@@ -21410,10 +21410,16 @@ var WeaveTargetingManager = class {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (utilityLayer) utilityLayer.visible(false);
 		let containerAlt = containerOverCursor(this.instance, [], relativeMousePointer);
-		if (!containerAlt) containerAlt = this.instance.getMainLayer();
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
 		if (nodesSelection) nodesSelection.getTransformer().visible(false);
-		relativeMousePointer = containerAlt?.getRelativePointerPosition() ?? relativeMousePointer;
+		if (containerAlt && point === void 0) relativeMousePointer = containerAlt.getRelativePointerPosition() ?? relativeMousePointer;
+		if (!containerAlt && point === void 0) {
+			containerAlt = this.instance.getMainLayer();
+			relativeMousePointer = containerAlt?.getRelativePointerPosition() ?? {
+				x: 0,
+				y: 0
+			};
+		}
 		if (utilityLayer) utilityLayer.visible(true);
 		if (nodesSelection) nodesSelection.getTransformer().visible(true);
 		return {
@@ -22008,7 +22014,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "3.9.0-SNAPSHOT.186.1";
+var version = "3.9.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -25709,7 +25715,7 @@ const WEAVE_IMAGE_DEFAULT_CONFIG = {
 		cursor: { loading: "wait" }
 	},
 	imageLoading: {
-		maxRetryAttempts: 15,
+		maxRetryAttempts: 3,
 		retryDelayMs: 2e3
 	},
 	crossOrigin: "anonymous",
@@ -25759,19 +25765,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.onClose = () => {};
 		this.handleHide = this.hide.bind(this);
 	}
-	show(onClose, options) {
-		this.onClose = onClose;
-		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
-		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
-		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
-		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
-		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
-		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
-		this.node.clearCache(this.image);
-		this.image.setAttrs({ cropping: true });
-		this.image.listening(false);
-		const imageAttrs = this.image.getAttrs();
-		this.internalImage.hide();
+	setupCropImage(imageAttrs, visible) {
 		this.cropGroup.destroyChildren();
 		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
@@ -25785,10 +25779,26 @@ var WeaveImageCrop = class WeaveImageCrop {
 			scaleY: 1,
 			image: this.internalImage.image(),
 			crop: void 0,
-			visible: true,
+			visible,
 			listening: false,
 			draggable: false
 		});
+		return { realScale };
+	}
+	show(onClose, options) {
+		this.onClose = onClose;
+		const nodeEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+		if (nodeEdgeSnappingPlugin) nodeEdgeSnappingPlugin.disable();
+		const nodeDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
+		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
+		this.node.clearCache(this.image);
+		this.image.setAttrs({ cropping: true });
+		this.image.listening(false);
+		const imageAttrs = this.image.getAttrs();
+		this.internalImage.hide();
+		const { realScale } = this.setupCropImage(imageAttrs, true);
 		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
 		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
 		const cropModeConfiguration = this.node.getConfiguration().cropMode;
@@ -26165,23 +26175,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 	}
 	unCrop() {
 		const imageAttrs = this.image.getAttrs();
-		this.cropGroup.destroyChildren();
-		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
-		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
-		const realScale = actualScale / cropScale;
-		this.cropImage = new Konva.Image({
-			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
-			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
-			width: imageAttrs.uncroppedImage.width,
-			height: imageAttrs.uncroppedImage.height,
-			scaleX: 1,
-			scaleY: 1,
-			image: this.internalImage.image(),
-			crop: void 0,
-			visible: false,
-			listening: false,
-			draggable: false
-		});
+		this.setupCropImage(imageAttrs, false);
 		this.cropGroup.add(this.cropImage);
 		const cropImageStage = this.cropImage.getAbsolutePosition();
 		this.image.setAttrs({
@@ -26230,12 +26224,80 @@ var WeaveImageCrop = class WeaveImageCrop {
 			this.instance.updateNode(this.node.serialize(this.image));
 		}
 	}
+	handleClipExternal(image, reference) {
+		const stage = this.instance.getStage();
+		const originalRotation = image.getAbsoluteRotation();
+		if (image.getAbsoluteRotation() !== reference.getAbsoluteRotation()) throw new Error("Image and reference must have the same rotation", { cause: "RotationNotAligned" });
+		const originalContainer = image.getParent();
+		const group = new Konva.Group();
+		image.moveTo(group);
+		reference.moveTo(group);
+		originalContainer?.add(group);
+		group.rotate(-originalRotation);
+		const dImage = group.findOne("#" + image.getAttrs().id);
+		const dReference = group.findOne("#" + reference.getAttrs().id);
+		const intersectionRectAbs = this.getIntersectionRect(dImage, dReference);
+		const intersectionRect = this.getIntersectionRect(dImage, dReference, stage);
+		const imageRect = dImage.getClientRect({
+			relativeTo: stage,
+			skipStroke: true
+		});
+		if (!intersectionRect || !intersectionRectAbs) return;
+		const imageAttrs = this.image.getAttrs();
+		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
+		const realScale = actualScale / cropScale;
+		const imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
+		const imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		const diffX = intersectionRect.x - imageRect.x;
+		const diffY = intersectionRect.y - imageRect.y;
+		const realClipRect = {
+			scaleX: actualScale,
+			scaleY: actualScale,
+			x: WeaveImageCrop.roundTo6Decimals(diffX + imageOffsetX),
+			y: WeaveImageCrop.roundTo6Decimals(diffY + imageOffsetY),
+			width: WeaveImageCrop.roundTo6Decimals(intersectionRect.width),
+			height: WeaveImageCrop.roundTo6Decimals(intersectionRect.height)
+		};
+		if (dImage) {
+			const cropSize = {
+				x: diffX,
+				y: diffY,
+				width: intersectionRect.width,
+				height: intersectionRect.height
+			};
+			dImage.setAttrs({
+				width: intersectionRect.width,
+				height: intersectionRect.height,
+				cropInfo: realClipRect,
+				cropSize,
+				uncroppedImage: {
+					width: imageAttrs.uncroppedImage.width,
+					height: imageAttrs.uncroppedImage.height
+				}
+			});
+			dImage.setAbsolutePosition(intersectionRectAbs);
+			group.rotate(originalRotation);
+			group.getChildren().forEach((child) => {
+				child.moveTo(originalContainer);
+			});
+			group.destroy();
+			const fImage = stage.findOne("#" + image.getAttrs().id);
+			if (fImage) this.instance.updateNodeNT(this.node.serialize(fImage));
+		}
+	}
 	static roundTo6Decimals(value) {
 		return parseFloat(value.toFixed(6));
 	}
-	getIntersectionRect(a, b) {
-		const rectA = a.getClientRect({ skipStroke: true });
-		const rectB = b.getClientRect({ skipStroke: true });
+	getIntersectionRect(a, b, relativeTo) {
+		const rectA = a.getClientRect({
+			skipStroke: true,
+			relativeTo
+		});
+		const rectB = b.getClientRect({
+			skipStroke: true,
+			relativeTo
+		});
 		const x1 = WeaveImageCrop.roundTo6Decimals(Math.max(rectA.x, rectB.x));
 		const y1 = WeaveImageCrop.roundTo6Decimals(Math.max(rectA.y, rectB.y));
 		const x2 = WeaveImageCrop.roundTo6Decimals(Math.min(rectA.x + rectA.width, rectB.x + rectB.width));
@@ -26727,8 +26789,8 @@ var WeaveImageNode = class extends WeaveNode {
 			y: p.y - offsetY
 		}));
 		const rect = new Konva.Rect({
-			width: absoluteCorners[1].x - absoluteCorners[0].x,
-			height: absoluteCorners[2].y - absoluteCorners[0].y,
+			width: Math.hypot(absoluteCorners[1].x - absoluteCorners[0].x, absoluteCorners[1].y - absoluteCorners[0].y),
+			height: Math.hypot(absoluteCorners[3].x - absoluteCorners[0].x, absoluteCorners[3].y - absoluteCorners[0].y),
 			fill: "transparent",
 			strokeScaleEnabled: false,
 			strokeWidth: 2,
@@ -26853,7 +26915,11 @@ var WeaveImageNode = class extends WeaveNode {
 	onUpdate(nodeInstance, nextProps) {
 		const id = nodeInstance.getAttrs().id;
 		const node = nodeInstance;
-		nodeInstance.setAttrs({ ...nextProps });
+		nodeInstance.setAttrs({
+			...nextProps,
+			...nextProps.cropInfo ? { cropInfo: nextProps.cropInfo } : { cropInfo: void 0 },
+			...nextProps.cropSize ? { cropSize: nextProps.cropSize } : { cropSize: void 0 }
+		});
 		const imagePlaceholder = node.findOne(`#${id}-placeholder`);
 		const internalImage = node.findOne(`#${id}-image`);
 		const nodeAttrs = node.getAttrs();
@@ -26897,29 +26963,12 @@ var WeaveImageNode = class extends WeaveNode {
 			});
 		}
 		if (this.imageState[id ?? ""]?.loaded && this.imageState[id ?? ""]?.error) {
-			imagePlaceholder?.setAttrs({
-				...internalImageProps,
-				...nodeAttrs.imageProperties ?? {},
-				name: void 0,
-				id: `${id}-placeholder`,
-				nodeId: id,
-				x: 0,
-				y: 0,
-				scaleX: 1,
-				scaleY: 1,
-				rotation: 0,
-				visible: true,
-				fill: this.config.style.placeholder.fill,
-				strokeWidth: 0,
-				draggable: false,
-				zIndex: 0
-			});
 			internalImage?.setAttrs({
 				...internalImageProps,
 				...nodeAttrs.imageProperties ?? {},
 				name: void 0,
 				id: `${id}-image`,
-				image: void 0,
+				image: this.imageFallback[id ?? ""],
 				nodeId: id,
 				x: 0,
 				y: 0,
@@ -26930,6 +26979,8 @@ var WeaveImageNode = class extends WeaveNode {
 				draggable: false,
 				zIndex: 1
 			});
+			internalImage?.visible(true);
+			this.updateImageCrop(nodeInstance);
 		}
 		if (this.imageState[id ?? ""]?.loaded && !this.imageState[id ?? ""]?.error) {
 			internalImage?.setAttrs({
@@ -26984,14 +27035,18 @@ var WeaveImageNode = class extends WeaveNode {
 	}
 	preloadImage(imageId, imageURL, { onLoad, onError }, loadingTryout = false) {
 		const imageURLToLoad = imageURL ?? "http://localhost/false-image";
+		if (imageURLToLoad === "") {
+			this.setErrorState(imageId);
+			return;
+		}
 		this.imageSource[imageId] = Konva.Util.createImageElement();
 		this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
 		this.imageSource[imageId].onerror = (error) => {
-			if (!loadingTryout) this.imageState[imageId] = {
-				status: "error",
-				loaded: false,
-				error: true
-			};
+			if (!loadingTryout) {
+				const stage = this.instance.getStage();
+				const image = stage.findOne(`#${imageId}`);
+				if (image) this.setErrorState(imageId, image);
+			}
 			onError(error);
 		};
 		this.imageSource[imageId].onload = async () => {
@@ -27086,36 +27141,29 @@ var WeaveImageNode = class extends WeaveNode {
 				}
 			},
 			onError: (error) => {
-				if (!this.config.useFallbackImage) this.imageTryoutIds[id] = setTimeout(() => {
-					const node = this.instance.getStage().findOne(`#${id}`);
-					if (node) {
-						this.imageTryoutAttempts[id] = (this.imageTryoutAttempts[id] ?? 0) + 1;
-						this.loadImage(node.getAttrs(), node, false, true);
-					}
-				}, this.config.imageLoading.retryDelayMs);
+				if (!this.config.useFallbackImage) {
+					const tryoutAttempts = this.imageTryoutAttempts[id] ?? 0;
+					if (tryoutAttempts - 1 < this.config.imageLoading.maxRetryAttempts) {
+						this.loadImageTryout(id);
+						return;
+					} else this.setErrorState(id, image);
+				}
 				if (loadTryout) {
 					const tryoutAttempts = this.imageTryoutAttempts[id] ?? 0;
-					if (tryoutAttempts < this.config.imageLoading.maxRetryAttempts) this.imageTryoutIds[id] = setTimeout(() => {
-						const node = this.instance.getStage().findOne(`#${id}`);
-						if (node) {
-							this.imageTryoutAttempts[id] = tryoutAttempts + 1;
-							this.loadImage(node.getAttrs(), node, false, true);
-						}
-					}, this.config.imageLoading.retryDelayMs);
+					if (tryoutAttempts - 1 < this.config.imageLoading.maxRetryAttempts) {
+						this.loadImageTryout(id);
+						return;
+					} else this.setErrorState(id, image);
 					return;
 				}
 				if (this.config.useFallbackImage && !useFallback && !loadTryout && imageProps.imageFallback) {
 					this.loadImage({ ...params }, image, true);
 					return;
 				}
-				this.imageState[id] = {
-					status: "error",
-					loaded: false,
-					error: true
-				};
+				this.setErrorState(id, image);
 				image.setAttrs({ image: void 0 });
+				console.error("Error loading image", error);
 				this.resolveAsyncElement(id);
-				console.error("Error loading image", realImageURL, error);
 				imagePlaceholder?.setAttrs({ visible: true });
 				internalImage?.setAttrs({ visible: false });
 				this.cacheNode(image);
@@ -27245,6 +27293,41 @@ var WeaveImageNode = class extends WeaveNode {
 		}
 		nodeInstance.destroy();
 	}
+	loadImageTryout(imageId) {
+		this.imageTryoutIds[imageId] = setTimeout(() => {
+			const node = this.instance.getStage().findOne(`#${imageId}`);
+			if (node) {
+				const tryoutAttempts = this.imageTryoutAttempts[imageId] ?? 0;
+				this.imageTryoutAttempts[imageId] = tryoutAttempts + 1;
+				this.loadImage(node.getAttrs(), node, false, true);
+			}
+		}, this.config.imageLoading.retryDelayMs);
+	}
+	setErrorState(imageId, image) {
+		this.imageState[imageId] = {
+			status: "loaded",
+			loaded: true,
+			error: true
+		};
+		this.resolveAsyncElement(imageId);
+		if (image) this.cacheNode(image);
+	}
+	cropImageWithReference(image, reference) {
+		const internalImage = image?.findOne(`#${image.getAttrs().id}-image`);
+		const cropGroup = image?.findOne(`#${image.getAttrs().id}-cropGroup`);
+		if (!internalImage || !cropGroup) throw new Error("Provided element is not a valid image node.", { cause: "InvalidImageNode" });
+		this.imageCrop = new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup);
+		this.instance.stateTransactional(() => {
+			this.imageCrop?.handleClipExternal(image, reference);
+			const nodeHandler = this.instance.getNodeHandler(reference.getAttrs().nodeType);
+			if (nodeHandler) {
+				const rectangleState = nodeHandler.serialize(reference);
+				this.instance.removeNodeNT(rectangleState);
+			}
+		});
+		this.getNodesSelectionPlugin()?.setSelectedNodes([image]);
+		this.getNodesSelectionPlugin()?.getHoverTransformer().forceUpdate();
+	}
 };
 
 //#endregion
@@ -34417,14 +34500,15 @@ var WeaveImageToolAction = class extends WeaveAction {
 			const dragProperties = this.instance.getDragProperties();
 			if (dragProperties && dragId === WEAVE_IMAGE_TOOL_ACTION_NAME) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
-				if (!position) return;
+				const { mousePoint, container } = this.instance.getMousePointer();
+				if (!mousePoint) return;
 				this.instance.triggerAction(WEAVE_IMAGE_TOOL_ACTION_NAME, {
 					type: WEAVE_IMAGE_TOOL_UPLOAD_TYPE.IMAGE_URL,
 					image: dragProperties.imageURL,
 					...dragProperties.imageId ? { imageId: dragProperties.imageId } : {},
 					...dragProperties.forceMainContainer && { forceMainContainer: dragProperties.forceMainContainer },
-					position
+					container,
+					position: mousePoint
 				});
 			}
 		});
@@ -34591,7 +34675,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 			}
 			const { mousePoint, container } = this.instance.getMousePointer(position);
 			this.imageAction[nodeId].clickPoint = mousePoint;
-			this.imageAction[nodeId].container = container;
+			this.imageAction[nodeId].container = this.imageAction[nodeId].container ?? container;
 			const nodeHandler = this.instance.getNodeHandler("image");
 			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;
@@ -34658,9 +34742,9 @@ var WeaveImageToolAction = class extends WeaveAction {
 			props: this.initProps(),
 			imageId: nodeId,
 			clickPoint: null,
-			container: void 0,
 			imageFile: null,
 			imageURL: null,
+			container: params?.container,
 			forceMainContainer: params?.forceMainContainer ?? false,
 			uploadType: null,
 			uploadImageFunction: null
@@ -34867,12 +34951,13 @@ var WeaveImagesToolAction = class extends WeaveAction {
 			const dragProperties = this.instance.getDragProperties();
 			if (dragProperties && dragId === WEAVE_IMAGES_TOOL_ACTION_NAME) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
-				if (!position) return;
+				const { mousePoint, container } = this.instance.getMousePointer();
+				if (!mousePoint) return;
 				this.instance.triggerAction(WEAVE_IMAGES_TOOL_ACTION_NAME, {
 					type: WEAVE_IMAGES_TOOL_UPLOAD_TYPE.IMAGE_URL,
 					images: dragProperties.imagesURL,
-					position,
+					container,
+					position: mousePoint,
 					...dragProperties.forceMainContainer && { forceMainContainer: dragProperties.forceMainContainer }
 				});
 			}
@@ -35033,7 +35118,7 @@ var WeaveImagesToolAction = class extends WeaveAction {
 		stage.container().style.cursor = "default";
 		const { mousePoint, container } = this.instance.getMousePointer(position);
 		this.clickPoint = mousePoint;
-		this.container = container;
+		this.container = this.container ?? container;
 		const originPoint = {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0
@@ -35088,10 +35173,8 @@ var WeaveImagesToolAction = class extends WeaveAction {
 						},
 						uploadImageFunction: uploadImageFunctionInternal,
 						...imageId && { imageId },
-						position: {
-							x: position$1.x,
-							y: position$1.y
-						},
+						position: position$1,
+						container: this.container,
 						forceMainContainer: this.forceMainContainer,
 						nodeId: nodeId$1
 					}, true);
@@ -35125,10 +35208,8 @@ var WeaveImagesToolAction = class extends WeaveAction {
 					},
 					...imageId && { imageId },
 					...options && { options },
-					position: {
-						x: position$1.x,
-						y: position$1.y
-					},
+					position: position$1,
+					container: this.container,
 					forceMainContainer: this.forceMainContainer,
 					nodeId: nodeId$1
 				}, true);
@@ -35161,6 +35242,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);
+		if (params?.container) this.container = params.container;
 		this.nodesIds = [];
 		this.forceMainContainer = params.forceMainContainer ?? false;
 		if (params.type === WEAVE_IMAGES_TOOL_UPLOAD_TYPE.FILE) {
@@ -36978,11 +37060,13 @@ var WeaveVideoToolAction = class extends WeaveAction {
 			const dragProperties = this.instance.getDragProperties();
 			if (dragProperties && dragId === VIDEO_TOOL_ACTION_NAME) {
 				this.instance.getStage().setPointersPositions(e);
-				const position = this.instance.getStage().getRelativePointerPosition();
+				const { mousePoint, container } = this.instance.getMousePointer();
+				if (!mousePoint) return;
 				this.instance.triggerAction(VIDEO_TOOL_ACTION_NAME, {
 					videoId: dragProperties.videoId,
 					videoParams: dragProperties.videoParams,
-					position
+					container,
+					position: mousePoint
 				});
 			}
 		});
@@ -37033,7 +37117,7 @@ var WeaveVideoToolAction = class extends WeaveAction {
 		if (this.videoId && this.videoParams) {
 			const { mousePoint, container } = this.instance.getMousePointer(position);
 			this.clickPoint = mousePoint;
-			this.container = container;
+			this.container = this.container ?? container;
 			const nodeHandler = this.instance.getNodeHandler("video");
 			if (nodeHandler) {
 				const node = nodeHandler.create(this.videoId, {
@@ -37064,6 +37148,7 @@ var WeaveVideoToolAction = class extends WeaveAction {
 		this.cancelAction = cancelAction;
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		this.container = params?.container;
 		this.forceMainContainer = params?.forceMainContainer ?? false;
 		if (params?.videoId) this.updateProps({ videoId: params.videoId });
 		if (params?.videoParams) {