@inditextech/weave-sdk 0.34.0 → 0.36.0

package/dist/sdk.js

@@ -15493,6 +15493,7 @@ var require_lodash = __commonJS({ "../../node_modules/lodash/lodash.js"(exports,
 		} else root._ = _;
 	}).call(exports);
 } });
+var import_lodash$1 = __toESM(require_lodash());
 var import_lodash = __toESM(require_lodash(), 1);
 
 //#endregion
@@ -15586,12 +15587,12 @@ var WeaveStore = class {
 					node: JSON.parse(JSON.stringify(nodeInfo.node))
 				});
 			}
-			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
+			if (!this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
-			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
+			if (this.isRoomLoaded && !(0, import_lodash$1.isEmpty)(this.state.weave)) this.instance.render();
 		});
 	}
 	canUndoStateStep() {
@@ -15729,19 +15730,34 @@ var WeaveContextMenuPlugin = class extends WeavePlugin {
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
+		this.instance.addEventListener("onDrag", (node) => {
+			if (node) this.dragging = true;
+			else this.dragging = false;
+		});
+		this.instance.addEventListener("onTransform", (node) => {
+			if (node) this.transforming = true;
+			else this.transforming = false;
+		});
 		stage.on("pointerdown", (e) => {
 			this.pointers[e.evt.pointerId] = e.evt;
+			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length > 1) return;
 			this.touchTimer = setTimeout(() => {
 				this.tapHold = true;
+				if (this.touchTimer && (this.dragging || this.transforming)) {
+					clearTimeout(this.touchTimer);
+					return;
+				}
 				this.triggerContextMenu(e.target);
 			}, this.tapHoldTimeout);
 		});
-		stage.on("pointermove", () => {
+		stage.on("pointermove", (e) => {
+			if (e.evt.pointerType === "mouse") return;
 			if (this.touchTimer) clearTimeout(this.touchTimer);
 		});
 		stage.on("pointerup", (e) => {
 			delete this.pointers[e.evt.pointerId];
+			if (e.evt.pointerType === "mouse") return;
 			if (e.evt.pointerType === "touch" && Object.keys(this.pointers).length + 1 > 1) return;
 			if (this.touchTimer) {
 				clearTimeout(this.touchTimer);
@@ -16023,7 +16039,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const handleTransform = () => {
 			this.triggerSelectedNodesEvent();
 		};
-		tr.on("transform", (0, import_lodash.throttle)(handleTransform, 50));
+		tr.on("transform", (0, import_lodash$1.throttle)(handleTransform, 50));
 		tr.on("transformend", () => {
 			this.triggerSelectedNodesEvent();
 		});
@@ -16063,7 +16079,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 			tr.forceUpdate();
 		};
-		tr.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 50));
+		tr.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 50));
 		tr.on("dragend", (e) => {
 			this.dragging = false;
 			e.cancelBubble = true;
@@ -16213,7 +16229,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				height: Math.abs(y2 - y1)
 			});
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
 		stage.on("pointerup", (e) => {
 			delete this.pointers[e.evt.pointerId];
 			if (!this.initialized) return;
@@ -16250,13 +16266,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return false;
 			});
 			const selectedNodes = new Set();
-			const framesNodes = selected.map((shape) => {
+			const framesNodes = selected.filter((shape) => {
+				return shape.getAttrs().nodeType === "frame";
+			});
+			const framesNodesIds = framesNodes.map((shape) => {
 				if (shape.getAttrs().nodeType === "frame" && shape.getAttrs().nodeId) return stage.findOne(`#${shape.getAttrs().nodeId}`);
 				return shape;
 			}).filter((shape) => {
 				return shape.getAttrs().nodeType === "frame";
-			});
-			const framesNodesIds = framesNodes.map((shape) => {
+			}).map((shape) => {
 				return shape.getAttrs().id;
 			});
 			const otherNodes = selected.filter((shape) => shape.getAttrs().nodeType !== "frame");
@@ -16701,8 +16719,9 @@ var WeaveNode = class {
 			node.off("pointerleave");
 		} else {
 			let transforming = false;
-			node.on("transformstart", () => {
+			node.on("transformstart", (e) => {
 				transforming = true;
+				this.instance.emitEvent("onTransform", e.target);
 			});
 			const handleTransform = (e) => {
 				const node$1 = e.target;
@@ -16716,9 +16735,10 @@ var WeaveNode = class {
 					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node$1));
 				}
 			};
-			node.on("transform", (0, import_lodash.throttle)(handleTransform, 100));
+			node.on("transform", (0, import_lodash$1.throttle)(handleTransform, 100));
 			node.on("transformend", (e) => {
 				const node$1 = e.target;
+				this.instance.emitEvent("onTransform", null);
 				transforming = false;
 				const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
@@ -16729,6 +16749,7 @@ var WeaveNode = class {
 			});
 			node.on("dragstart", (e) => {
 				const stage = this.instance.getStage();
+				this.instance.emitEvent("onDrag", e.target);
 				if (stage.isMouseWheelPressed()) {
 					e.cancelBubble = true;
 					e.target.stopDrag();
@@ -16749,8 +16770,9 @@ var WeaveNode = class {
 					if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
 				}
 			};
-			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
+			node.on("dragmove", (0, import_lodash$1.throttle)(handleDragMove, 100));
 			node.on("dragend", (e) => {
+				this.instance.emitEvent("onDrag", null);
 				if (this.isSelecting() && this.isNodeSelected(node)) {
 					clearContainerTargets(this.instance);
 					const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
@@ -16807,6 +16829,35 @@ var WeaveNode = class {
 			}
 		};
 	}
+	show(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ visible: true });
+		this.instance.updateNode(this.serialize(instance));
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	hide(instance) {
+		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
+		instance.setAttrs({ visible: false });
+		const selectionPlugin = this.getSelectionPlugin();
+		if (selectionPlugin) {
+			const ids = [instance.getAttrs().id];
+			if (instance.getAttrs().nodeType === "frame") ids.push(`${instance.getAttrs().id}-selector-area`);
+			const selectedNodes = selectionPlugin.getSelectedNodes();
+			const newSelectedNodes = selectedNodes.filter((node) => !ids.includes(node.getAttrs().id));
+			selectionPlugin.setSelectedNodes(newSelectedNodes);
+			selectionPlugin.getTransformer().forceUpdate();
+		}
+		this.instance.updateNode(this.serialize(instance));
+		this.setupDefaultNodeEvents(instance);
+		const stage = this.instance.getStage();
+		stage.container().style.cursor = "default";
+	}
+	isVisible(instance) {
+		if (typeof instance.getAttrs().visible === "undefined") return true;
+		return instance.getAttrs().visible ?? false;
+	}
 	lock(instance) {
 		if (instance.getAttrs().nodeType !== this.getNodeType()) return;
 		instance.setAttrs({ locked: true });
@@ -18267,7 +18318,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.34.0";
+var version = "0.36.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18945,6 +18996,48 @@ var Weave = class {
 			nodeHandler.unlock(node);
 		}
 	}
+	allNodesVisible(nodes) {
+		let allNodesVisible = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesVisible = allNodesVisible && nodeHandler.isVisible(node);
+		}
+		return allNodesVisible;
+	}
+	allNodesHidden(nodes) {
+		let allNodesHidden = true;
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			allNodesHidden = allNodesHidden && !nodeHandler.isVisible(node);
+		}
+		return allNodesHidden;
+	}
+	hideNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.hide(node);
+	}
+	hideNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.hide(node);
+		}
+	}
+	showNode(node) {
+		const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+		if (!nodeHandler) return;
+		nodeHandler.show(node);
+	}
+	showNodes(nodes) {
+		for (const node of nodes) {
+			const nodeHandler = this.getNodeHandler(node.getAttrs().nodeType);
+			if (!nodeHandler) continue;
+			nodeHandler.show(node);
+		}
+	}
 };
 
 //#endregion
@@ -18970,8 +19063,24 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.container().addEventListener("blur", () => {
 			this.stageFocused = false;
 		});
+		Konva.Stage.prototype.allowActions = function(actions) {
+			if (typeof actions !== "undefined") this._allowActions = actions;
+			return this._allowActions;
+		};
+		Konva.Stage.prototype.allowSelectNodes = function(nodeTypes) {
+			if (typeof nodeTypes !== "undefined") this._allowSelectNodeTypes = nodeTypes;
+			return this._allowSelectNodeTypes;
+		};
+		Konva.Stage.prototype.allowSelection = function(allowSelection) {
+			if (typeof allowSelection !== "undefined") this._allowSelection = allowSelection;
+			return this._allowSelection;
+		};
 		stage.on("pointermove", (e) => {
-			if (e.target === stage) {
+			if (stage.allowSelection() && !stage.allowActions().includes(this.instance.getActiveAction() ?? "") && !stage.allowSelectNodes().includes(e.target.getAttrs()?.nodeType ?? "")) {
+				const stage$1 = this.instance.getStage();
+				stage$1.container().style.cursor = "default";
+			}
+			if (e.target === stage && this.instance.getActiveAction() === "selectionTool") {
 				const stage$1 = this.instance.getStage();
 				stage$1.container().style.cursor = "default";
 			}
@@ -19305,7 +19414,13 @@ var WeaveTextNode = class extends WeaveNode {
 			const node = e.target;
 			if (this.isSelecting() && this.isNodeSelected(node)) e.cancelBubble = true;
 		};
-		text.on("transform", (0, import_lodash.throttle)(handleTextTransform, 50));
+		text.on("transformstart", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
+		text.on("transform", (0, import_lodash$1.throttle)(handleTextTransform, 50));
+		text.on("transformend", () => {
+			this.instance.emitEvent("onTransform", null);
+		});
 		window.addEventListener("keypress", (e) => {
 			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
 				e.preventDefault();
@@ -19776,13 +19891,18 @@ var WeaveImageToolAction = class extends WeaveAction {
 	setState(state) {
 		this.state = state;
 	}
-	loadImage(imageURL, position) {
+	loadImage(imageURL, options, position) {
 		const stage = this.instance.getStage();
+		const imageOptions = {
+			crossOrigin: "anonymous",
+			...options
+		};
 		stage.container().style.cursor = "crosshair";
 		stage.container().focus();
 		this.imageId = v4_default();
 		this.imageURL = imageURL;
 		this.preloadImgs[this.imageId] = new Image();
+		this.preloadImgs[this.imageId].crossOrigin = imageOptions.crossOrigin;
 		this.preloadImgs[this.imageId].onerror = () => {
 			this.instance.emitEvent("onImageLoadEnd", new Error("Error loading image"));
 			this.cancelAction();
@@ -19880,7 +20000,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 		if (params?.imageURL) {
-			this.loadImage(params.imageURL, params?.position ?? void 0);
+			this.loadImage(params.imageURL, params?.options ?? void 0, params?.position ?? void 0);
 			return;
 		}
 		this.props = this.initProps();
@@ -20044,19 +20164,26 @@ var WeaveImageCrop = class WeaveImageCrop {
 			skipStroke: true
 		});
 		this.drawGridLines(0, 0, cropRect.width, cropRect.height);
-		this.cropRect.on("dragmove", () => {
+		const handleGridLines = () => {
 			const cropRect$1 = this.cropRect.getClientRect({
 				relativeTo: this.cropGroup,
 				skipStroke: true
 			});
 			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+		};
+		this.cropRect.on("dragstart", (e) => {
+			this.instance.emitEvent("onDrag", e.target);
 		});
-		this.cropRect.on("transform", () => {
-			const cropRect$1 = this.cropRect.getClientRect({
-				relativeTo: this.cropGroup,
-				skipStroke: true
-			});
-			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+		this.cropRect.on("dragmove", handleGridLines);
+		this.cropRect.on("dragend", () => {
+			this.instance.emitEvent("onDrag", null);
+		});
+		this.cropRect.on("transformstart", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
+		this.cropRect.on("transform", handleGridLines);
+		this.cropRect.on("transformend", () => {
+			this.instance.emitEvent("onTransform", null);
 		});
 		this.transformer.nodes([this.cropRect]);
 		this.cropGroup.add(this.cropImage);
@@ -20250,10 +20377,13 @@ var WeaveImageNode = class extends WeaveNode {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = { transform: {
-			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
-			...config?.transform
-		} };
+		this.config = {
+			crossOrigin: config?.crossOrigin ?? "anonymous",
+			transform: {
+				...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
+				...config?.transform
+			}
+		};
 		this.imageCrop = null;
 		this.cachedCropInfo = {};
 		this.imageLoaded = false;
@@ -20483,7 +20613,9 @@ var WeaveImageNode = class extends WeaveNode {
 		const imageProps = params;
 		const imagePlaceholder = image.findOne(`#${imageProps.id}-placeholder`);
 		const internalImage = image.findOne(`#${imageProps.id}-image`);
+		console.log("crossOrigin", this.config.crossOrigin);
 		const imageObj = new Image();
+		imageObj.crossOrigin = this.config.crossOrigin;
 		imageObj.onerror = (error) => {
 			console.error("Error loading image", imageProps.imageURL, error);
 			imagePlaceholder?.setAttrs({ visible: true });
@@ -20538,7 +20670,7 @@ var WeaveImageNode = class extends WeaveNode {
 		const stage = this.instance.getStage();
 		const image = stage.findOne(`#${imageAttrs.id}`);
 		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
-		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
@@ -20555,7 +20687,7 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage.height(imageAttrs.cropSize.height);
 			this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
 		}
-		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash$1.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
 			internalImage.rotation(0);
@@ -20970,8 +21102,12 @@ var WeaveFrameNode = class extends WeaveNode {
 			clonedSA.scaleY(1);
 			e.cancelBubble = true;
 		};
-		selectorArea.on("transform", (0, import_lodash.throttle)(handleSelectorAreaTransform, 50));
 		selectorArea.on("transformend", (e) => {
+			this.instance.emitEvent("onTransform", e.target);
+		});
+		selectorArea.on("transform", (0, import_lodash$1.throttle)(handleSelectorAreaTransform, 50));
+		selectorArea.on("transformend", (e) => {
+			this.instance.emitEvent("onTransform", null);
 			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 			if (nodesSnappingPlugin) nodesSnappingPlugin.cleanupEvaluateGuidelines();
 			const scaleX = selectorArea.scaleX();
@@ -22812,7 +22948,7 @@ var require_hammer = __commonJS({ "../../node_modules/hammerjs/hammer.js"(export
 		else window$1[exportName] = Hammer;
 	})(window, document, "Hammer");
 } });
-var import_hammer = __toESM(require_hammer(), 1);
+var import_hammer = __toESM(require_hammer());
 
 //#endregion
 //#region src/plugins/stage-zoom/stage-zoom.ts
@@ -22852,7 +22988,7 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 				this.config.zoomSteps = [minimumZoom, ...this.config.zoomSteps];
 			}
 		};
-		mainLayer?.on("draw", (0, import_lodash.throttle)(handleDraw, 50));
+		mainLayer?.on("draw", (0, import_lodash$1.throttle)(handleDraw, 50));
 		this.setZoom(this.config.zoomSteps[this.actualStep]);
 	}
 	setZoom(scale, centered = true, pointer) {
@@ -22983,7 +23119,9 @@ var WeaveStageZoomPlugin = class extends WeavePlugin {
 			x: 0,
 			y: 0
 		});
-		const bounds = getBoundingBox(stage, mainLayer.getChildren());
+		let realNodes = mainLayer.getChildren();
+		realNodes = realNodes.filter((node) => typeof node.getAttrs().visible === "undefined" || node.getAttrs().visible);
+		const bounds = getBoundingBox(stage, realNodes);
 		const stageWidth = stage.width();
 		const stageHeight = stage.height();
 		const scaleX = (stageWidth - this.config.fitToScreen.padding * 2) / bounds.width;
@@ -23293,12 +23431,14 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		stage.container().focus();
 		this.setState(MOVE_TOOL_STATE.MOVING);
 	}
-	trigger(cancelAction) {
+	trigger(cancelAction, params) {
 		if (!this.instance) throw new Error("Instance not defined");
 		if (!this.initialized) this.setupEvents();
 		const stage = this.instance.getStage();
 		stage.container().tabIndex = 1;
 		stage.container().focus();
+		const { triggerSelectionTool = true } = params ?? {};
+		this.triggerSelectionTool = triggerSelectionTool;
 		this.cancelAction = cancelAction;
 		this.setMoving();
 	}
@@ -23306,7 +23446,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 		const stage = this.instance.getStage();
 		stage.container().style.cursor = "default";
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (selectionPlugin) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
+		if (selectionPlugin && this.triggerSelectionTool) this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		this.setState(MOVE_TOOL_STATE.IDLE);
 	}
 };
@@ -25453,7 +25593,7 @@ var WeaveStageGridPlugin = class extends WeavePlugin {
 			if (!this.enabled || !(this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed || this.moveToolActive)) return;
 			this.onRender();
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
 		stage.on("pointermove", () => {
 			if (!this.enabled) return;
 			this.onRender();
@@ -25748,7 +25888,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			stage.y(stage.y() - deltaY);
 			this.instance.emitEvent("onStageMove");
 		};
-		stage.on("pointermove", (0, import_lodash.throttle)(handleMouseMove, 50));
+		stage.on("pointermove", (0, import_lodash$1.throttle)(handleMouseMove, 50));
 		stage.on("pointerdown", () => {
 			const mousePos = stage.getPointerPosition();
 			previousMouseX = mousePos?.x ?? 0;
@@ -25864,7 +26004,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 					newConnectedUsers[userInformation.name] = userInformation;
 				}
 			}
-			if (!(0, import_lodash.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
+			if (!(0, import_lodash$1.isEqual)(this.connectedUsers, newConnectedUsers)) this.instance.emitEvent("onConnectedUsersChange", newConnectedUsers);
 			this.connectedUsers = newConnectedUsers;
 		});
 	}