@inditextech/weave-sdk 2.1.1 → 2.3.0

package/dist/sdk.node.js

@@ -17616,7 +17616,7 @@ function resetScale(node) {
 }
 function clearContainerTargets(instance) {
 	const containers = instance.getContainerNodes();
-	for (const container of containers) container.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+	for (const container of containers) container.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { node: void 0 });
 }
 function containerOverCursor(instance, ignoreNodes, definedCursorPosition) {
 	Konva.hitOnDragEnabled = true;
@@ -17642,6 +17642,8 @@ function moveNodeToContainer(instance, node, containerToMove, invalidOriginsType
 	const stage = instance.getStage();
 	const isLocked = instance.allNodesLocked([node]);
 	if (isLocked) return false;
+	const canMoveToLayer = containerToMove.canMoveToContainer(node);
+	if (!canMoveToLayer) return false;
 	let nodeActualContainer = node.getParent();
 	if (nodeActualContainer.getAttrs().nodeId) {
 		const realParent = stage.findOne(`#${nodeActualContainer.getAttrs().nodeId}`);
@@ -17661,6 +17663,10 @@ function moveNodeToContainer(instance, node, containerToMove, invalidOriginsType
 		node.x(node.x() - (layerToMoveAttrs.containerOffsetX ?? 0));
 		node.y(node.y() - (layerToMoveAttrs.containerOffsetY ?? 0));
 		node.movedToContainer(layerToMove);
+		instance.emitEvent("onNodeMovedToContainer", {
+			node: node.clone(),
+			container: layerToMove
+		});
 		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
 		if (nodeHandler) {
 			const actualNode = nodeHandler.serialize(node);
@@ -17902,6 +17908,16 @@ function mergeExceptArrays(object, source) {
 		return void 0;
 	});
 }
+function getStageClickPoint(instance, pointerPos) {
+	const stage = instance.getStage();
+	const scale = stage.scale();
+	const position = stage.position();
+	const stageClickPoint = {
+		x: (pointerPos.x - position.x) / scale.x,
+		y: (pointerPos.y - position.y) / scale.y
+	};
+	return stageClickPoint;
+}
 
 //#endregion
 //#region src/actions/selection-tool/constants.ts
@@ -18719,6 +18735,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.triggerSelectedNodesEvent();
 		});
 		let initialPos = null;
+		const originalNodeOpacity = {};
+		const DRAG_OPACITY = .75;
 		tr.on("dragstart", (e) => {
 			initialPos = {
 				x: e.target.x(),
@@ -18731,6 +18749,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				e.target.stopDrag();
 				return;
 			}
+			const nodes = tr.nodes();
+			if (nodes.length > 1) for (const node of nodes) {
+				originalNodeOpacity[node.getAttrs().id ?? ""] = node.opacity();
+				node.opacity(DRAG_OPACITY);
+			}
 			e.cancelBubble = true;
 			tr.forceUpdate();
 		});
@@ -18761,7 +18784,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			if (this.isSelecting() && selectedNodes.length > 1) {
 				clearContainerTargets(this.instance);
 				const layerToMove = containerOverCursor(this.instance, selectedNodes);
-				if (layerToMove && !selectionContainsFrames) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+				if (layerToMove && !selectionContainsFrames) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { node: void 0 });
 			}
 			tr.forceUpdate();
 		};
@@ -18778,6 +18801,11 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				selectionContainsFrames = selectionContainsFrames || hasFrames(node);
 				node.updatePosition(node.getAbsolutePosition());
 			}
+			const nodes = tr.nodes();
+			if (nodes.length > 1) for (const node of nodes) {
+				node.opacity(originalNodeOpacity[node.getAttrs().id ?? ""]);
+				delete originalNodeOpacity[node.getAttrs().id ?? ""];
+			}
 			if (this.isSelecting() && tr.nodes().length > 1) {
 				const actualCursor = stage.container().style.cursor;
 				stage.container().style.cursor = "wait";
@@ -18788,6 +18816,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const nodeUpdatePromise = (node) => {
 					return new Promise((resolve) => {
 						setTimeout(() => {
+							if (node.getAttrs().lockToContainer === void 0 || !node.getAttrs().lockToContainer) return resolve();
 							clearContainerTargets(this.instance);
 							const nodeHandler = this.instance.getNodeHandler(node.getAttrs().nodeType);
 							if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(node));
@@ -18795,7 +18824,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 							if (layerToMove) containerToMove = layerToMove;
 							let moved = false;
 							if (containerToMove && !selectionContainsFrames) moved = moveNodeToContainer(this.instance, node, containerToMove);
-							if (containerToMove) containerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+							if (containerToMove) containerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { node: void 0 });
 							if (!nodeHandler) return resolve();
 							toSelect.push(node.getAttrs().id ?? "");
 							if (!moved) toUpdate.push(nodeHandler.serialize(node));
@@ -19347,11 +19376,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) {
@@ -19923,6 +19952,9 @@ var WeaveNode = class {
 		node.handleMouseout = function() {};
 		node.handleSelectNode = function() {};
 		node.handleDeselectNode = function() {};
+		node.canMoveToContainer = function() {
+			return true;
+		};
 	}
 	isNodeSelected(ele) {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -19941,7 +19973,7 @@ var WeaveNode = class {
 	setHoverState(node) {
 		const selectionPlugin = this.getSelectionPlugin();
 		if (!selectionPlugin) return;
-		if (selectionPlugin.isAreaSelecting()) {
+		if (selectionPlugin.getSelectedNodes().length === 1 && node === selectionPlugin.getSelectedNodes()[0] || selectionPlugin.isAreaSelecting()) {
 			this.hideHoverState();
 			return;
 		}
@@ -20011,6 +20043,8 @@ var WeaveNode = class {
 				const nodeTarget = e.target;
 				originalPosition = nodeTarget.getAbsolutePosition();
 			});
+			let originalOpacity = void 0;
+			const DRAG_OPACITY = .75;
 			node.on("dragstart", (e) => {
 				const nodeTarget = e.target;
 				this.getNodesSelectionFeedbackPlugin()?.hideSelectionHalo(nodeTarget);
@@ -20031,6 +20065,8 @@ var WeaveNode = class {
 				}
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
 				if (realNodeTarget.getAttrs().isCloned) return;
+				originalOpacity = realNodeTarget.opacity();
+				realNodeTarget.opacity(DRAG_OPACITY);
 				if (e.evt?.altKey) {
 					nodeTarget.setAttrs({ isCloneOrigin: true });
 					nodeTarget.setAttrs({ isCloned: false });
@@ -20074,7 +20110,7 @@ var WeaveNode = class {
 				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
 					clearContainerTargets(this.instance);
 					const layerToMove = containerOverCursor(this.instance, [realNodeTarget]);
-					if (layerToMove && !hasFrames(realNodeTarget) && realNodeTarget.isDragging()) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
+					if (layerToMove && !hasFrames(realNodeTarget) && realNodeTarget.isDragging() && !realNodeTarget.getAttrs().lockToContainer) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { node: realNodeTarget });
 				}
 			};
 			node.on("dragmove", (0, import_lodash.throttle)(handleDragMove, 100));
@@ -20097,7 +20133,9 @@ var WeaveNode = class {
 				}
 				this.instance.emitEvent("onDrag", null);
 				const realNodeTarget = this.getRealSelectedNode(nodeTarget);
-				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1) {
+				realNodeTarget.setAttrs({ opacity: originalOpacity });
+				originalOpacity = void 0;
+				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1 && (realNodeTarget.getAttrs().lockToContainer === void 0 || !realNodeTarget.getAttrs().lockToContainer)) {
 					clearContainerTargets(this.instance);
 					const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
 					const nodesDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
@@ -20109,9 +20147,17 @@ var WeaveNode = class {
 					let moved = false;
 					if (containerToMove && !hasFrames(node)) moved = moveNodeToContainer(this.instance, realNodeTarget, containerToMove);
 					if (realNodeTarget.getAttrs().isCloned) this.instance.getCloningManager().removeClone(realNodeTarget);
-					if (containerToMove) containerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { bubbles: true });
+					if (containerToMove) containerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetLeave, { node: realNodeTarget });
 					if (!moved) this.instance.updateNode(this.serialize(realNodeTarget));
 				}
+				if (this.isSelecting() && this.getSelectionPlugin()?.getSelectedNodes().length === 1 && realNodeTarget.getAttrs().lockToContainer) {
+					clearContainerTargets(this.instance);
+					const nodesEdgeSnappingPlugin = this.getNodesEdgeSnappingPlugin();
+					const nodesDistanceSnappingPlugin = this.getNodesDistanceSnappingPlugin();
+					if (nodesEdgeSnappingPlugin) nodesEdgeSnappingPlugin.cleanupGuidelines();
+					if (nodesDistanceSnappingPlugin) nodesDistanceSnappingPlugin.cleanupGuidelines();
+					this.instance.updateNode(this.serialize(realNodeTarget));
+				}
 				nodeTarget.setAttrs({ isCloned: void 0 });
 				nodeTarget.setAttrs({ isCloneOrigin: void 0 });
 				realNodeTarget.setAttrs({ isCloned: void 0 });
@@ -20394,29 +20440,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,
@@ -20610,13 +20677,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");
@@ -20627,6 +20688,7 @@ var WeaveReconciler = class {
 				const handler = weaveInstance.getNodeHandler(type);
 				if (!handler) return;
 				handler.onDestroy(child);
+				removeNode(child);
 			}
 		};
 	}
@@ -21527,27 +21589,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];
@@ -21584,12 +21642,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();
@@ -21609,21 +21674,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();
@@ -21651,19 +21709,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() {
@@ -21749,7 +21803,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.1.1";
+var version = "2.3.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22536,25 +22590,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() {
@@ -22584,6 +22672,9 @@ var Weave = class {
 	getBoundingBox(nodes, config) {
 		return getBoundingBox(nodes, config);
 	}
+	stateTransactional(callback) {
+		this.stateManager.stateTransactional(callback);
+	}
 	moveUp(node) {
 		this.zIndexManager.moveUp(node);
 	}
@@ -22863,6 +22954,9 @@ var WeaveLayerNode = class extends WeaveNode {
 	nodeType = WEAVE_LAYER_NODE_TYPE;
 	onRender(props) {
 		const layer = new Konva.Layer({ ...props });
+		layer.canMoveToContainer = function() {
+			return true;
+		};
 		return layer;
 	}
 	onUpdate(nodeInstance, nextProps) {
@@ -24946,6 +25040,9 @@ var WeaveFrameNode = class extends WeaveNode {
 				fill: onTargetEnterFill
 			});
 		});
+		frame.canMoveToContainer = function() {
+			return true;
+		};
 		return frame;
 	}
 	onUpdate(nodeInstance, nextProps) {
@@ -29320,6 +29417,7 @@ const FRAME_TOOL_STATE = {
 //#region src/actions/frame-tool/frame-tool.ts
 var WeaveFrameToolAction = class extends WeaveAction {
 	initialized = false;
+	templateId = null;
 	onPropsChange = void 0;
 	onInit = void 0;
 	constructor() {
@@ -29341,6 +29439,9 @@ var WeaveFrameToolAction = class extends WeaveAction {
 			opacity: 1
 		};
 	}
+	setTemplateToUse(templateId) {
+		this.templateId = templateId;
+	}
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
@@ -29355,7 +29456,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		});
 		stage.on("pointerclick", () => {
 			if (this.state === FRAME_TOOL_STATE.IDLE) return;
-			if (this.state === FRAME_TOOL_STATE.ADDING) {
+			if (this.state === FRAME_TOOL_STATE.ADDING && this.templateId === null) {
 				this.handleAdding();
 				return;
 			}
@@ -29369,6 +29470,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		this.setCursor();
 		this.setFocusStage();
 		this.instance.emitEvent("onAddingFrame");
+		this.templateId = null;
 		this.frameId = null;
 		this.clickPoint = null;
 		this.setState(FRAME_TOOL_STATE.ADDING);
@@ -29418,6 +29520,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 		this.frameId = null;
 		this.container = void 0;
 		this.clickPoint = null;
+		this.templateId = null;
 		this.setState(FRAME_TOOL_STATE.IDLE);
 	}
 	setCursor() {
@@ -32619,5 +32722,5 @@ if (typeof window === "undefined") {
 }
 
 //#endregion
-export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, setupCanvasBackend, setupSkiaBackend };
+export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isIOS, isInShadowDOM, isNodeInSelection, isServer, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, setupCanvasBackend, setupSkiaBackend };
 //# sourceMappingURL=sdk.node.js.map