@inditextech/weave-sdk 2.14.0 → 2.15.0

package/dist/sdk.node.js

@@ -1,7 +1,7 @@
 import Konva from "konva";
 import { randomFillSync, randomUUID } from "crypto";
 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_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_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 from "yjs";
 import React from "react";
@@ -15141,7 +15141,6 @@ var WeaveStore = class {
 		}
 		observeDeep(this.getState(), () => {
 			const newState = JSON.parse(JSON.stringify(this.getState()));
-			this.logger.debug({ newState }, "State changed");
 			this.instance.emitEvent("onStateChange", newState);
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			if (this.isRoomLoaded && nodesSelectionPlugin?.getSelectedNodes().length === 1) {
@@ -17675,8 +17674,11 @@ function moveNodeToContainer(instance, node, containerToMove, originalNode, orig
 		if (nodeHandler) {
 			instance.stateTransactional(() => {
 				const actualNode = nodeHandler.serialize(node);
-				instance.removeNodeNT(actualNode);
-				instance.addNodeNT(actualNode, layerToMoveAttrs.id);
+				instance.removeNodeNT(actualNode, { emitUserChangeEvent: false });
+				instance.addNodeNT(actualNode, layerToMoveAttrs.id, {
+					emitUserChangeEvent: true,
+					overrideUserChangeType: WEAVE_NODE_CHANGE_TYPE.UPDATE
+				});
 			});
 			return true;
 		}
@@ -18591,6 +18593,10 @@ const WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG = { style: {
 //#endregion
 //#region src/constants.ts
 const DEFAULT_THROTTLE_MS = 50;
+const DEFAULT_ADD_NODE_OPTIONS = { emitUserChangeEvent: true };
+const DEFAULT_UPDATE_NODE_OPTIONS = { emitUserChangeEvent: true };
+const DEFAULT_REMOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
+const DEFAULT_MOVE_NODE_OPTIONS = { emitUserChangeEvent: true };
 
 //#endregion
 //#region src/plugins/users-presence/constants.ts
@@ -21148,7 +21154,7 @@ var WeaveGroupsManager = class {
 		const groupHandler = this.instance.getNodeHandler("group");
 		if (groupHandler) {
 			const groupNode$1 = groupHandler.create(groupId, { draggable: true });
-			this.instance.addNode(groupNode$1, parentNodeId);
+			this.instance.addNode(groupNode$1, parentNodeId, { emitUserChangeEvent: false });
 		}
 		const nodesWithZIndex = realNodes.map((node) => {
 			const instance = mainLayer?.findOne(`#${node.key}`);
@@ -21174,7 +21180,7 @@ var WeaveGroupsManager = class {
 					const handler = this.instance.getNodeHandler("group");
 					if (handler) {
 						const stateNode = handler.serialize(konvaGroup);
-						this.instance.addNode(stateNode, groupId);
+						this.instance.addNode(stateNode, groupId, { emitUserChangeEvent: false });
 					}
 				}
 				continue;
@@ -21192,7 +21198,7 @@ var WeaveGroupsManager = class {
 				const handler = this.instance.getNodeHandler(konvaNode.getAttrs().nodeType);
 				if (handler) {
 					const stateNode = handler.serialize(konvaNode);
-					this.instance.addNode(stateNode, groupId);
+					this.instance.addNode(stateNode, groupId, { emitUserChangeEvent: false });
 				}
 			}
 		}
@@ -21277,7 +21283,7 @@ var WeaveGroupsManager = class {
 		const groupHandler = this.instance.getNodeHandler("group");
 		if (groupHandler) {
 			const groupNode = groupHandler.serialize(konvaGroup);
-			this.instance.removeNode(groupNode);
+			this.instance.removeNode(groupNode, { emitUserChangeEvent: false });
 		}
 		setTimeout(() => {
 			this.getNodesMultiSelectionFeedbackPlugin()?.cleanupSelectedHalos();
@@ -21622,76 +21628,6 @@ var WeaveCloningManager = class {
 			minPoint
 		};
 	}
-	cloneNodes(instancesToClone, targetContainer, onPoint) {
-		if (instancesToClone.length === 0) return;
-		if (!targetContainer) return;
-		const groupId = v4_default();
-		const newGroup = new Konva.Group({ id: groupId });
-		targetContainer.add(newGroup);
-		const nodesWithZIndex = instancesToClone.map((node) => ({
-			node,
-			zIndex: node.zIndex()
-		})).filter((node) => node.zIndex !== -1);
-		const sortedNodesByZIndex = (0, import_lodash.orderBy)(nodesWithZIndex, ["zIndex"], ["asc"]).map((node) => node.node);
-		for (const [index, node] of sortedNodesByZIndex.entries()) {
-			const nodeAttrs = node.getAttrs();
-			if (nodeAttrs.type === "group") {
-				const clonedNode$1 = node.clone({
-					id: v4_default(),
-					type: "group"
-				});
-				const nodePos$1 = clonedNode$1.getAbsolutePosition();
-				const nodeRotation$1 = clonedNode$1.getAbsoluteRotation();
-				const parent$1 = node.getParent();
-				if (parent$1 && parent$1.getAttrs().nodeId && !parent$1.getAttrs().containerId) {
-					const realParent = this.instance.getStage().findOne(`#${parent$1.getAttrs().nodeId}`);
-					if (realParent) {
-						nodePos$1.x += realParent.x();
-						nodePos$1.y += realParent.y();
-					}
-				}
-				clonedNode$1.moveTo(newGroup);
-				clonedNode$1.zIndex(index);
-				clonedNode$1.setAbsolutePosition(nodePos$1);
-				clonedNode$1.rotation(nodeRotation$1);
-				continue;
-			}
-			const clonedNode = node.clone({ id: v4_default() });
-			const nodePos = clonedNode.getAbsolutePosition();
-			const nodeRotation = clonedNode.getAbsoluteRotation();
-			const parent = node.getParent();
-			if (parent && parent.getAttrs().nodeId && !parent.getAttrs().containerId) {
-				const realParent = this.instance.getStage().findOne(`#${parent.getAttrs().nodeId}`);
-				if (realParent) {
-					nodePos.x += realParent.x();
-					nodePos.y += realParent.y();
-				}
-			}
-			clonedNode.moveTo(newGroup);
-			clonedNode.zIndex(index);
-			clonedNode.setAbsolutePosition(nodePos);
-			clonedNode.rotation(nodeRotation);
-		}
-		const actualPos = newGroup.getClientRect({ relativeTo: targetContainer });
-		newGroup.x(onPoint.x - actualPos.x);
-		newGroup.y(onPoint.y - actualPos.y);
-		const groupChildren = [...newGroup.getChildren()];
-		for (const [index, node] of groupChildren.entries()) {
-			const nodePos = node.getAbsolutePosition();
-			const nodeRotation = node.getAbsoluteRotation();
-			node.moveTo(targetContainer);
-			node.zIndex(index);
-			node.setAbsolutePosition(nodePos);
-			node.rotation(nodeRotation);
-			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
-			if (handler) {
-				const stateNode = handler.serialize(node);
-				this.instance.addNode(stateNode, targetContainer.getAttrs().id);
-			}
-			node.destroy();
-		}
-		newGroup.destroy();
-	}
 	recursivelyUpdateKeys(nodes) {
 		for (const child of nodes) {
 			const newNodeId = v4_default();
@@ -21710,7 +21646,7 @@ var WeaveCloningManager = class {
 		serializedNode.key = newNodeId;
 		serializedNode.props.id = newNodeId;
 		const realParent = this.instance.getInstanceRecursive(parent);
-		this.instance.addNode(serializedNode, realParent?.getAttrs().id);
+		this.instance.addNode(serializedNode, realParent?.getAttrs().id, { emitUserChangeEvent: false });
 		return this.instance.getStage().findOne(`#${newNodeId}`);
 	}
 	addClone(node) {
@@ -21775,7 +21711,7 @@ var WeaveZIndexManager = class {
 		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
 		if (handler) {
 			const nodeState = handler.serialize(instance);
-			this.instance.moveNode(nodeState, WEAVE_NODE_POSITION.UP);
+			this.instance.zMoveNode(nodeState, WEAVE_NODE_POSITION.UP);
 		}
 	}
 	moveDown(instance) {
@@ -21783,7 +21719,7 @@ var WeaveZIndexManager = class {
 		const handler = this.instance.getNodeHandler(instance.getAttrs().nodeType);
 		if (handler) {
 			const nodeState = handler.serialize(instance);
-			this.instance.moveNode(nodeState, WEAVE_NODE_POSITION.DOWN);
+			this.instance.zMoveNode(nodeState, WEAVE_NODE_POSITION.DOWN);
 		}
 	}
 	sendToBack(instances) {
@@ -21793,7 +21729,7 @@ var WeaveZIndexManager = class {
 			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 			if (handler) {
 				const nodeState = handler.serialize(node);
-				this.instance.moveNode(nodeState, WEAVE_NODE_POSITION.BACK);
+				this.instance.zMoveNode(nodeState, WEAVE_NODE_POSITION.BACK);
 			}
 		}
 	}
@@ -21804,7 +21740,7 @@ var WeaveZIndexManager = class {
 			const handler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 			if (handler) {
 				const nodeState = handler.serialize(node);
-				this.instance.moveNode(nodeState, WEAVE_NODE_POSITION.FRONT);
+				this.instance.zMoveNode(nodeState, WEAVE_NODE_POSITION.FRONT);
 			}
 		}
 	}
@@ -21999,7 +21935,7 @@ var WeaveStateManager = class {
 			this.instance.emitEvent("onNodeRemoved", node);
 		}
 	}
-	moveNode(node, position) {
+	zMoveNode(node, position) {
 		const state = this.instance.getStore().getState();
 		if ((0, import_lodash.isEmpty)(state.weave)) {
 			const msg = `State is empty, cannot update the node`;
@@ -22121,7 +22057,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.14.0";
+var version = "2.15.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -23067,6 +23003,52 @@ var Weave = class {
 		this.moduleLogger.debug(`Removing listening to event [${event}]`);
 		this.emitter.off(event, callback);
 	}
+	emitUserChangeEvent(data, changeType) {
+		const stage = this.getStage();
+		const user = this.getStore().getUser();
+		const node = data.node;
+		let parent = void 0;
+		let nodeParent = void 0;
+		if (nodeParent === void 0 && data?.parentId !== void 0 && stage) nodeParent = stage.findOne(`#${data.parentId}`);
+		if (nodeParent === void 0 && data?.parentId === void 0 && stage) {
+			const parentNode = stage.findOne(`#${node.key}`);
+			if (parentNode) nodeParent = this.getNodeContainer(parentNode);
+		}
+		if (nodeParent !== void 0) {
+			const handler = this.getNodeHandler(nodeParent?.getAttrs().nodeType);
+			if (handler) parent = handler.serialize(nodeParent);
+		}
+		if (!parent) return;
+		this.emitEvent("onUserChange", {
+			user,
+			changeType,
+			parent,
+			node
+		});
+		this.cleanupTransactionIdToInstance(node);
+	}
+	setTransactionIdToInstance(node) {
+		const realNode = this.getStage().findOne(`#${node.key}`);
+		if (realNode) {
+			node.props.transactionId = v4_default();
+			realNode.setAttr("transactionId", node.props.transactionId);
+		}
+	}
+	cleanupTransactionIdToInstance(node) {
+		const realNode = this.getStage().findOne(`#${node.key}`);
+		if (realNode) realNode.setAttr("transactionId", void 0);
+	}
+	decorateWithZIndex(node) {
+		const realNode = this.getStage().findOne(`#${node.key}`);
+		if (realNode) {
+			const zIndex = realNode.zIndex();
+			node.props = {
+				...node.props,
+				zIndex
+			};
+		}
+		return node;
+	}
 	getLogger() {
 		return this.logger;
 	}
@@ -23183,12 +23165,12 @@ var Weave = class {
 	update(newState) {
 		this.getStore().setState(newState);
 		this.renderer.render(() => {
-			this.emitEvent("onRender", {});
+			this.emitEvent("onRender");
 		});
 	}
 	render() {
 		this.renderer.render(() => {
-			this.emitEvent("onRender", {});
+			this.emitEvent("onRender");
 		});
 	}
 	findNodeById(tree, key, parent = null, index = -1) {
@@ -23200,43 +23182,102 @@ var Weave = class {
 	getNode(nodeKey) {
 		return this.stateManager.getNode(nodeKey);
 	}
-	addNode(node, parentId = "mainLayer", index = void 0) {
+	addNode(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			this.stateManager.addNode(node, parentId, index);
+			this.addNodeNT(node, parentId, options);
 		});
 	}
-	addNodeNT(node, parentId = "mainLayer", index = void 0) {
+	addNodeNT(node, parentId = "mainLayer", options = DEFAULT_ADD_NODE_OPTIONS) {
+		const { index, emitUserChangeEvent, overrideUserChangeType } = mergeExceptArrays(DEFAULT_ADD_NODE_OPTIONS, options);
+		if (emitUserChangeEvent) this.setTransactionIdToInstance(node);
 		this.stateManager.addNode(node, parentId, index);
+		if (emitUserChangeEvent) {
+			const handleSendEvent = (addedNode) => {
+				if (node.props.transactionId === addedNode.getAttrs().transactionId) {
+					const decoratedNode = this.decorateWithZIndex(node);
+					this.emitUserChangeEvent({
+						node: decoratedNode,
+						parentId
+					}, overrideUserChangeType ?? WEAVE_NODE_CHANGE_TYPE.CREATE);
+					this.removeEventListener("onNodeRenderedAdded", handleSendEvent);
+				}
+			};
+			this.addEventListener("onNodeRenderedAdded", handleSendEvent);
+		}
 	}
-	updateNode(node) {
+	updateNode(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			this.stateManager.updateNode(node);
+			this.updateNodeNT(node, options);
 		});
 	}
-	updateNodeNT(node) {
+	updateNodeNT(node, options = DEFAULT_UPDATE_NODE_OPTIONS) {
+		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
+		if (emitUserChangeEvent) this.setTransactionIdToInstance(node);
 		this.stateManager.updateNode(node);
+		if (emitUserChangeEvent) {
+			const handleSendEvent = (updatedNode) => {
+				if (node.props.transactionId === updatedNode.getAttrs().transactionId) {
+					const decoratedNode = this.decorateWithZIndex(node);
+					this.emitUserChangeEvent({ node: decoratedNode }, WEAVE_NODE_CHANGE_TYPE.UPDATE);
+					this.removeEventListener("onNodeRenderedUpdated", handleSendEvent);
+				}
+			};
+			this.addEventListener("onNodeRenderedUpdated", handleSendEvent);
+		}
 	}
-	updateNodes(nodes) {
+	updateNodes(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			this.stateManager.updateNodes(nodes);
+			this.updateNodesNT(nodes, options);
 		});
 	}
-	updateNodesNT(nodes) {
+	updateNodesNT(nodes, options = DEFAULT_UPDATE_NODE_OPTIONS) {
+		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_UPDATE_NODE_OPTIONS, options);
+		const transactionsIds = {};
+		if (emitUserChangeEvent) for (const node of nodes) {
+			this.setTransactionIdToInstance(node);
+			transactionsIds[node.key] = node.props.transactionId;
+		}
 		this.stateManager.updateNodes(nodes);
+		if (emitUserChangeEvent) {
+			const handleSendEvent = (updatedNode) => {
+				for (const node of nodes) if (transactionsIds[node.key] === updatedNode.getAttrs().transactionId) {
+					const decoratedNode = this.decorateWithZIndex(node);
+					this.emitUserChangeEvent({ node: decoratedNode }, WEAVE_NODE_CHANGE_TYPE.UPDATE);
+					delete transactionsIds[node.key];
+					if (Object.keys(transactionsIds).length === 0) this.removeEventListener("onNodeRenderedUpdated", handleSendEvent);
+					break;
+				}
+			};
+			this.addEventListener("onNodeRenderedUpdated", handleSendEvent);
+		}
 	}
-	removeNode(node) {
+	removeNode(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			this.stateManager.removeNode(node);
-			this.runPhaseHooks("onRemoveNode", (hook) => {
-				const nodeInstance = this.getStage().findOne(`#${node.key}`);
-				if (nodeInstance) hook({ node: nodeInstance });
-			});
-			const selectionPlugin = this.getPlugin("nodesSelection");
-			if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+			this.removeNodeNT(node, options);
 		});
 	}
-	removeNodeNT(node) {
+	removeNodeNT(node, options = DEFAULT_REMOVE_NODE_OPTIONS) {
+		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_REMOVE_NODE_OPTIONS, options);
+		let parentId = void 0;
+		let decoratedNode = void 0;
+		if (emitUserChangeEvent) {
+			this.setTransactionIdToInstance(node);
+			decoratedNode = this.decorateWithZIndex(node);
+			parentId = this.getContainerByNodeId(node.key);
+		}
 		this.stateManager.removeNode(node);
+		if (decoratedNode && emitUserChangeEvent) {
+			const handleSendEvent = (removedNode) => {
+				if (node.props.transactionId === removedNode.getAttrs().transactionId) {
+					this.emitUserChangeEvent({
+						node: decoratedNode,
+						parentId
+					}, WEAVE_NODE_CHANGE_TYPE.DELETE);
+					this.removeEventListener("onNodeRenderedRemoved", handleSendEvent);
+				}
+			};
+			this.addEventListener("onNodeRenderedRemoved", handleSendEvent);
+		}
 		this.runPhaseHooks("onRemoveNode", (hook) => {
 			const nodeInstance = this.getStage().findOne(`#${node.key}`);
 			if (nodeInstance) hook({ node: nodeInstance });
@@ -23244,25 +23285,36 @@ var Weave = class {
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
-	removeNodes(nodes) {
+	removeNodes(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			for (const node of nodes) this.removeNodeNT(node);
-			const selectionPlugin = this.getPlugin("nodesSelection");
-			if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+			this.removeNodesNT(nodes, options);
 		});
 	}
-	removeNodesNT(nodes) {
-		for (const node of nodes) this.removeNodeNT(node);
+	removeNodesNT(nodes, options = DEFAULT_REMOVE_NODE_OPTIONS) {
+		for (const node of nodes) this.removeNodeNT(node, options);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
-	moveNode(node, position) {
+	zMoveNode(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
 		this.stateTransactional(() => {
-			this.stateManager.moveNode(node, position);
-		});
-	}
-	moveNodeNT(node, position) {
-		this.stateManager.moveNode(node, position);
+			this.zMoveNodeNT(node, position, options);
+		});
+	}
+	zMoveNodeNT(node, position, options = DEFAULT_MOVE_NODE_OPTIONS) {
+		const { emitUserChangeEvent } = mergeExceptArrays(DEFAULT_MOVE_NODE_OPTIONS, options);
+		if (emitUserChangeEvent) this.setTransactionIdToInstance(node);
+		this.updateNodeNT(node, { emitUserChangeEvent: false });
+		this.stateManager.zMoveNode(node, position);
+		if (emitUserChangeEvent) {
+			const handleSendEvent = (movedNode) => {
+				if (node.props.transactionId === movedNode.getAttrs().transactionId) {
+					const decoratedNode = this.decorateWithZIndex(node);
+					this.emitUserChangeEvent({ node: decoratedNode }, WEAVE_NODE_CHANGE_TYPE.UPDATE);
+					this.removeEventListener("onNodeRenderedUpdated", handleSendEvent);
+				}
+			};
+			this.addEventListener("onNodeRenderedUpdated", handleSendEvent);
+		}
 	}
 	getElementsTree() {
 		return this.stateManager.getElementsTree();
@@ -23270,6 +23322,15 @@ var Weave = class {
 	isEmpty() {
 		return this.getElementsTree().length === 0;
 	}
+	getContainerByNodeId(nodeId) {
+		let parentId = void 0;
+		const nodeParent = this.getStage().findOne(`#${nodeId}`);
+		if (nodeParent) {
+			const parent = this.getNodeContainer(nodeParent);
+			if (parent) parentId = parent.getAttrs().id;
+		}
+		return parentId;
+	}
 	getNodeContainerId(node) {
 		const stage = this.getStage();
 		let nodeContainer = node.getParent()?.getAttrs().id ?? "";
@@ -23346,9 +23407,6 @@ var Weave = class {
 	nodesToGroupSerialized(instancesToClone) {
 		return this.cloningManager.nodesToGroupSerialized(instancesToClone);
 	}
-	cloneNodes(instancesToClone, targetContainer, onPoint) {
-		this.cloningManager.cloneNodes(instancesToClone, targetContainer, onPoint);
-	}
 	getFonts() {
 		return this.fontsManager.getFonts();
 	}