@inditextech/weave-sdk 2.1.0 → 2.2.0

package/dist/sdk.js

@@ -2,7 +2,6 @@ import Konva from "konva";
 import pino from "pino";
 import { WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_KONVA_BACKEND, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_STORE_CONNECTION_STATUS, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
-import * as Y$1 from "yjs";
 import * as Y from "yjs";
 import React from "react";
 import ReactReconciler from "react-reconciler";
@@ -15013,24 +15012,24 @@ var import_lodash = __toESM(require_lodash(), 1);
 
 //#endregion
 //#region src/yjs.ts
-var yjs_default = Y$1;
+var yjs_default = Y;
 
 //#endregion
 //#region src/stores/default-initial-state.ts
 const yjsLayer = function(id) {
-	const newLayerMap = new Y.Map();
+	const newLayerMap = new yjs_default.Map();
 	newLayerMap.set("key", id);
 	newLayerMap.set("type", "layer");
-	const newLayerMapProps = new Y.Map();
+	const newLayerMapProps = new yjs_default.Map();
 	newLayerMapProps.set("id", id);
 	newLayerMapProps.set("nodeType", "layer");
-	newLayerMapProps.set("children", new Y.Array());
+	newLayerMapProps.set("children", new yjs_default.Array());
 	newLayerMap.set("props", newLayerMapProps);
 	return newLayerMap;
 };
 function defaultInitialState(doc) {
 	doc.transact(() => {
-		const children = new Y.Array();
+		const children = new yjs_default.Array();
 		children.insert(0, [
 			yjsLayer("gridLayer"),
 			yjsLayer("mainLayer"),
@@ -15038,7 +15037,7 @@ function defaultInitialState(doc) {
 			yjsLayer("usersPointersLayer"),
 			yjsLayer("utilityLayer")
 		]);
-		const stageProps = new Y.Map();
+		const stageProps = new yjs_default.Map();
 		stageProps.set("id", "stage");
 		stageProps.set("children", children);
 		doc.getMap("weave").set("key", "stage");
@@ -19348,11 +19347,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		}
 		if (nodesSelected === 1) {
 			transformerAttrs = mergeExceptArrays(transformerAttrs, nodes[0].getTransformerProperties());
-			transformerAttrs.enabledAnchors = nodes[0].allowedAnchors();
+			transformerAttrs.enabledAnchors = nodes[0]?.allowedAnchors() ?? [];
 		}
 		if (nodesSelected > 1) {
 			const anchorsArrays = [];
-			for (const node of nodes) anchorsArrays.push(node.allowedAnchors());
+			for (const node of nodes) anchorsArrays.push(node?.allowedAnchors() ?? []);
 			transformerAttrs.enabledAnchors = intersectArrays(anchorsArrays);
 		}
 		if (this.tr && this.tr.nodes().length > 0) {
@@ -20395,29 +20394,50 @@ var WeaveReconciler = class {
 		const type = child.getAttrs().nodeType;
 		const handler = this.instance.getNodeHandler(type);
 		if (!handler) return;
+		let nodeAdded = false;
 		if (parentInstance instanceof Konva.Stage && child instanceof Konva.Layer) {
 			parentInstance.add(child);
 			handler.onAdd?.(child);
+			nodeAdded = true;
 		}
 		if (parentInstance instanceof Konva.Layer) {
 			parentInstance.add(child);
 			handler.onAdd?.(child);
+			nodeAdded = true;
 		}
 		if (parentInstance instanceof Konva.Group && typeof parentAttrs.containerId !== "undefined") {
 			const realParent = parentInstance.findOne(`#${parentAttrs.containerId}`);
 			realParent?.add(child);
 			handler.onAdd?.(child);
+			nodeAdded = true;
 		}
 		if (parentInstance instanceof Konva.Group && typeof parentAttrs.containerId === "undefined") {
 			parentInstance.add(child);
 			handler.onAdd?.(child);
+			nodeAdded = true;
 		}
 		if (childInitialZIndex) child.zIndex(childInitialZIndex);
+		if (nodeAdded) this.instance.emitEvent("onNodeRenderedAdded", child);
+	}
+	updateNode(instance, type, prevProps, nextProps) {
+		if (!(0, import_lodash.isEqual)(prevProps, nextProps)) {
+			const handler = this.instance.getNodeHandler(type);
+			if (!handler) return;
+			handler.onUpdate(instance, nextProps);
+			const childZIndex = nextProps.zIndex;
+			if (childZIndex) instance.zIndex(childZIndex);
+			this.instance.emitEvent("onNodeRenderedUpdated", instance);
+		}
+	}
+	removeNode(node) {
+		this.instance.emitEvent("onNodeRenderedRemoved", node);
 	}
 	getConfig() {
 		const weaveInstance = this.instance;
 		const logger = this.logger;
 		const addNode = this.addNode.bind(this);
+		const updateNode = this.updateNode.bind(this);
+		const removeNode = this.removeNode.bind(this);
 		return {
 			noTimeout: -1,
 			isPrimaryRenderer: true,
@@ -20611,13 +20631,7 @@ var WeaveReconciler = class {
 					nextProps
 				}, "commitUpdate");
 				if (instance instanceof Weave) return;
-				if (!(0, import_lodash.isEqual)(prevProps, nextProps)) {
-					const handler = weaveInstance.getNodeHandler(type);
-					if (!handler) return;
-					handler.onUpdate(instance, nextProps);
-					const childZIndex = nextProps.zIndex;
-					if (childZIndex) instance.zIndex(childZIndex);
-				}
+				updateNode(instance, type, prevProps, nextProps);
 			},
 			removeChildFromContainer() {
 				logger.debug("removeChildFromContainer");
@@ -20628,6 +20642,7 @@ var WeaveReconciler = class {
 				const handler = weaveInstance.getNodeHandler(type);
 				if (!handler) return;
 				handler.onDestroy(child);
+				removeNode(child);
 			}
 		};
 	}
@@ -23001,6 +23016,7 @@ var WeaveStrokeNode = class extends WeaveNode {
 		return result;
 	}
 	drawRibbonWithDash(ctx, pts, baseW, color, dash) {
+		if (!pts) return;
 		if (pts.length < 2) return;
 		const filtered = this.resamplePoints(pts, 2);
 		const centerline = this.getSplinePoints(filtered, 8);
@@ -23088,7 +23104,7 @@ var WeaveStrokeNode = class extends WeaveNode {
 	}
 	drawShape(ctx, shape) {
 		const strokeElements = shape.getAttrs().strokeElements;
-		if (strokeElements.length === 0) return;
+		if (strokeElements?.length === 0) return;
 		const color = shape.getAttrs().stroke ?? "black";
 		const strokeWidth = shape.getAttrs().strokeWidth ?? 1;
 		const dash = shape.getAttrs().dash ?? [];
@@ -23255,50 +23271,52 @@ const WEAVE_COMMENT_NODE_DEFAULTS = {
 
 //#endregion
 //#region src/nodes/comment/text-max-lines.ts
-var TextWithMaxLines = class extends Konva.Text {
-	constructor(config) {
-		super(config);
-		this._maxLines = config.maxLines;
-		this._fullText = config.text?.toString() ?? "";
-		this.on("textChange widthChange fontSizeChange fontFamilyChange fontStyleChange paddingChange alignChange letterSpacingChange lineHeightChange wrapChange", () => this._applyTruncation());
-		this._applyTruncation();
-	}
-	get maxLines() {
-		return this._maxLines;
-	}
-	set maxLines(v) {
-		this._maxLines = v;
-		this._applyTruncation();
-	}
-	setText(text) {
-		if (typeof text === "undefined") return this;
-		this._fullText = text ?? "";
-		super.setText(this._fullText);
-		this._applyTruncation();
-		return this;
-	}
-	_applyTruncation() {
-		if (!this._maxLines || this._maxLines <= 0) {
+function CreateTextWithMaxLines() {
+	return class TextWithMaxLines extends Konva.Text {
+		constructor(config) {
+			super(config);
+			this._maxLines = config.maxLines;
+			this._fullText = config.text?.toString() ?? "";
+			this.on("textChange widthChange fontSizeChange fontFamilyChange fontStyleChange paddingChange alignChange letterSpacingChange lineHeightChange wrapChange", () => this._applyTruncation());
+			this._applyTruncation();
+		}
+		get maxLines() {
+			return this._maxLines;
+		}
+		set maxLines(v) {
+			this._maxLines = v;
+			this._applyTruncation();
+		}
+		setText(text) {
+			if (typeof text === "undefined") return this;
+			this._fullText = text ?? "";
 			super.setText(this._fullText);
-			return;
+			this._applyTruncation();
+			return this;
 		}
-		super.setText(this._fullText);
-		const selfAny = this;
-		if (typeof selfAny._setTextData === "function") selfAny._setTextData();
-		let textArr = selfAny.textArr || [];
-		if (textArr.length > this._maxLines) {
-			const visible = textArr.slice(0, this._maxLines).map((l) => l.text);
-			const candidate = visible[visible.length - 1] + "…";
-			super.setText([...visible.slice(0, -1), candidate].join("\n"));
+		_applyTruncation() {
+			if (!this._maxLines || this._maxLines <= 0) {
+				super.setText(this._fullText);
+				return;
+			}
+			super.setText(this._fullText);
+			const selfAny = this;
 			if (typeof selfAny._setTextData === "function") selfAny._setTextData();
-			textArr = selfAny.textArr || [];
+			let textArr = selfAny.textArr || [];
+			if (textArr.length > this._maxLines) {
+				const visible = textArr.slice(0, this._maxLines).map((l) => l.text);
+				const candidate = visible[visible.length - 1] + "…";
+				super.setText([...visible.slice(0, -1), candidate].join("\n"));
+				if (typeof selfAny._setTextData === "function") selfAny._setTextData();
+				textArr = selfAny.textArr || [];
+			}
+			const lines = textArr.length;
+			const fontSize = this.fontSize();
+			const lineHeight = this.lineHeight() || 1;
+			this.height(fontSize * lineHeight * lines);
 		}
-		const lines = textArr.length;
-		const fontSize = this.fontSize();
-		const lineHeight = this.lineHeight() || 1;
-		this.height(fontSize * lineHeight * lines);
-	}
-};
+	};
+}
 
 //#endregion
 //#region src/nodes/comment/comment.ts
@@ -23468,7 +23486,7 @@ var WeaveCommentNode = class extends WeaveNode {
 		});
 		internalUserName.setAttrs({ width: widthExpanded - (widthContracted - 2 * circlePaddingContracted) - userNameLeftMargin - dateLeftMargin - dateWidth.width });
 		const commentContent = this.config.model.getContent(commentParams.commentModel);
-		const internalComment = new TextWithMaxLines({
+		const internalComment = new (CreateTextWithMaxLines())({
 			id: `${id}-comment`,
 			x: widthContracted - 2 * circlePaddingContracted + userNameLeftMargin,
 			text: commentContent,
@@ -31375,27 +31393,23 @@ var WeaveStateManager = class {
 			}, msg);
 			return;
 		}
-		const doc = getYjsDoc(state);
-		const userId = this.instance.getStore().getUser().id;
-		doc.transact(() => {
-			if (!parent.props.children) parent.props.children = [];
-			if (index) {
-				parent.props.children.splice(index, 0, node);
-				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
-			}
-			if (!index) {
-				const childrenAmount = parent.props.children.length;
-				const nodeToAdd = {
-					...node,
-					props: {
-						...node.props,
-						zIndex: childrenAmount
-					}
-				};
-				parent.props.children.push(nodeToAdd);
-			}
-			this.instance.emitEvent("onNodeAdded", node);
-		}, userId);
+		if (!parent.props.children) parent.props.children = [];
+		if (index) {
+			parent.props.children.splice(index, 0, node);
+			for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+		}
+		if (!index) {
+			const childrenAmount = parent.props.children.length;
+			const nodeToAdd = {
+				...node,
+				props: {
+					...node.props,
+					zIndex: childrenAmount
+				}
+			};
+			parent.props.children.push(nodeToAdd);
+		}
+		this.instance.emitEvent("onNodeAdded", node);
 	}
 	deepSyncSyncedStore(target, source) {
 		for (const key in target) if (!(key in source)) delete target[key];
@@ -31432,12 +31446,19 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
+		this.deepSyncSyncedStore(nodeState.props, node.props);
+		this.instance.emitEvent("onNodeUpdated", node);
+	}
+	updateNodes(nodes) {
+		for (const node of nodes) this.updateNode(node);
+	}
+	stateTransactional(callback) {
+		const state = this.instance.getStore().getState();
 		const doc = getYjsDoc(state);
 		const userId = this.instance.getStore().getUser().id;
 		doc.transact(() => {
-			this.deepSyncSyncedStore(nodeState.props, node.props);
+			callback();
 		}, userId);
-		this.instance.emitEvent("onNodeUpdated", node);
 	}
 	removeNode(node) {
 		const state = this.instance.getStore().getState();
@@ -31457,21 +31478,14 @@ var WeaveStateManager = class {
 			this.logger.warn({ node }, msg);
 			return;
 		}
-		const doc = getYjsDoc(state);
-		const userId = this.instance.getStore().getUser().id;
-		doc.transact(() => {
-			if (parent.props.children) {
-				for (let i = parent.props.children.length - 1; i >= 0; i--) if (parent.props.children[i].key === node.key) {
-					parent.props.children.splice(i, 1);
-					break;
-				}
-				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
-				this.instance.emitEvent("onNodeRemoved", node);
+		if (parent.props.children) {
+			for (let i = parent.props.children.length - 1; i >= 0; i--) if (parent.props.children[i].key === node.key) {
+				parent.props.children.splice(i, 1);
+				break;
 			}
-		}, userId);
-	}
-	removeNodes(nodes) {
-		for (const node of nodes) this.removeNode(node);
+			for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+			this.instance.emitEvent("onNodeRemoved", node);
+		}
 	}
 	moveNode(node, position) {
 		const state = this.instance.getStore().getState();
@@ -31499,19 +31513,15 @@ var WeaveStateManager = class {
 				this.logger.warn({ node }, msg);
 				return;
 			}
-			const doc = getYjsDoc(state);
-			const userId = this.instance.getStore().getUser().id;
-			doc.transact(() => {
-				if (parent.props.children) {
-					const item = JSON.parse(JSON.stringify(parent.props.children[nodeIndex]));
-					parent.props.children.splice(nodeIndex, 1);
-					if (item && position === WEAVE_NODE_POSITION.UP) parent.props.children.splice(nodeIndex + 1, 0, item);
-					if (item && position === WEAVE_NODE_POSITION.DOWN) parent.props.children.splice(nodeIndex - 1, 0, item);
-					if (item && position === WEAVE_NODE_POSITION.FRONT) parent.props.children.splice(childrenAmount - 1, 0, item);
-					if (item && position === WEAVE_NODE_POSITION.BACK) parent.props.children.splice(0, 0, item);
-					for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
-				}
-			}, userId);
+			if (parent.props.children) {
+				const item = JSON.parse(JSON.stringify(parent.props.children[nodeIndex]));
+				parent.props.children.splice(nodeIndex, 1);
+				if (item && position === WEAVE_NODE_POSITION.UP) parent.props.children.splice(nodeIndex + 1, 0, item);
+				if (item && position === WEAVE_NODE_POSITION.DOWN) parent.props.children.splice(nodeIndex - 1, 0, item);
+				if (item && position === WEAVE_NODE_POSITION.FRONT) parent.props.children.splice(childrenAmount - 1, 0, item);
+				if (item && position === WEAVE_NODE_POSITION.BACK) parent.props.children.splice(0, 0, item);
+				for (let i = 0; i < parent.props.children.length; i++) parent.props.children[i].props.zIndex = i;
+			}
 		}
 	}
 	getElementsTree() {
@@ -31597,7 +31607,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.1.0";
+var version = "2.2.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -32217,6 +32227,8 @@ var Weave = class {
 		store.disconnect();
 		const stage = this.getStage();
 		if (stage) stage.destroy();
+		globalThis.Konva = void 0;
+		globalThis["__ $YJS$ __"] = void 0;
 		this.moduleLogger.info(`Instance destroyed`);
 	}
 	getId() {
@@ -32377,25 +32389,59 @@ var Weave = class {
 		return this.stateManager.getNode(nodeKey);
 	}
 	addNode(node, parentId = "mainLayer", index = void 0) {
+		this.stateTransactional(() => {
+			this.stateManager.addNode(node, parentId, index);
+		});
+	}
+	addNodeNT(node, parentId = "mainLayer", index = void 0) {
 		this.stateManager.addNode(node, parentId, index);
 	}
 	updateNode(node) {
+		this.stateTransactional(() => {
+			this.stateManager.updateNode(node);
+		});
+	}
+	updateNodeNT(node) {
 		this.stateManager.updateNode(node);
 	}
 	updateNodes(nodes) {
-		for (const node of nodes) this.updateNode(node);
+		this.stateTransactional(() => {
+			this.stateManager.updateNodes(nodes);
+		});
+	}
+	updateNodesNT(nodes) {
+		this.stateManager.updateNodes(nodes);
 	}
 	removeNode(node) {
+		this.stateTransactional(() => {
+			this.stateManager.removeNode(node);
+			const selectionPlugin = this.getPlugin("nodesSelection");
+			if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		});
+	}
+	removeNodeNT(node) {
 		this.stateManager.removeNode(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
 	removeNodes(nodes) {
-		for (const node of nodes) this.removeNode(node);
+		this.stateTransactional(() => {
+			for (const node of nodes) this.removeNodeNT(node);
+			const selectionPlugin = this.getPlugin("nodesSelection");
+			if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
+		});
+	}
+	removeNodesNT(nodes) {
+		for (const node of nodes) this.removeNodeNT(node);
 		const selectionPlugin = this.getPlugin("nodesSelection");
 		if (selectionPlugin) selectionPlugin.setSelectedNodes([]);
 	}
 	moveNode(node, position) {
+		this.stateTransactional(() => {
+			this.stateManager.moveNode(node, position);
+		});
+	}
+	moveNodeNT(node, position) {
 		this.stateManager.moveNode(node, position);
 	}
 	getElementsTree() {
@@ -32425,6 +32471,9 @@ var Weave = class {
 	getBoundingBox(nodes, config) {
 		return getBoundingBox(nodes, config);
 	}
+	stateTransactional(callback) {
+		this.stateManager.stateTransactional(callback);
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}