@inditextech/weave-sdk 0.14.2 → 0.15.0

package/dist/sdk.cjs

@@ -15506,6 +15506,7 @@ var WeaveStore = class {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger(this.getName());
 		this.instance.getMainLogger().info(`Store with name [${this.getName()}] registered`);
+		this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 		return this;
 	}
 	getUser() {
@@ -15530,8 +15531,7 @@ var WeaveStore = class {
 		return JSON.parse(JSON.stringify(this.state, void 0, 2));
 	}
 	setup() {
-		const config = this.instance.getConfiguration();
-		config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
+		this.isRoomLoaded = false;
 		this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 		if (this.supportsUndoManager) {
 			const weaveStateValues = (0, __syncedstore_core.getYjsValue)(
@@ -15552,7 +15552,6 @@ var WeaveStore = class {
 						redoStackLength: this.undoManager.redoStack.length,
 						undoStackLength: this.undoManager.undoStack.length
 					};
-					config.callbacks?.onUndoManagerStatusChange?.(change);
 					this.instance.emitEvent("onUndoManagerStatusChange", change);
 				});
 				this.undoManager.on("stack-item-popped", () => {
@@ -15562,14 +15561,12 @@ var WeaveStore = class {
 						redoStackLength: this.undoManager.redoStack.length,
 						undoStackLength: this.undoManager.undoStack.length
 					};
-					config.callbacks?.onUndoManagerStatusChange?.(change);
 					this.instance.emitEvent("onUndoManagerStatusChange", change);
 				});
 			}
 		}
 		(0, __syncedstore_core.observeDeep)(this.getState(), () => {
 			const newState = JSON.parse(JSON.stringify(this.getState()));
-			config.callbacks?.onStateChange?.(newState);
 			this.instance.emitEvent("onStateChange", newState);
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			if (this.isRoomLoaded && nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1) {
@@ -15583,7 +15580,6 @@ var WeaveStore = class {
 			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
-				config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
 			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
@@ -15790,7 +15786,7 @@ function moveNodeToContainer(instance, node) {
 		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
 		const actualNode = nodeHandler.serialize(node);
 		instance.removeNode(actualNode);
-		instance.addNode(actualNode, layerToMove?.getAttrs().id);
+		instance.addNode(actualNode, layerToMove.getAttrs().id);
 	}
 	return layerToMove;
 }
@@ -16459,14 +16455,14 @@ var WeaveNode = class {
 				clearContainerTargets(this.instance);
 				const layerToMove = checkIfOverContainer(this.instance, e.target);
 				if (layerToMove) layerToMove.fire(__inditextech_weave_types.WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
-				this.instance.updateNode(this.serialize(node));
+				this.instance.updateNode(this.serialize(e.target));
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
 				clearContainerTargets(this.instance);
-				const layerToMove = moveNodeToContainer(this.instance, e.target);
-				if (layerToMove) return;
+				const containerToMove = moveNodeToContainer(this.instance, e.target);
+				if (containerToMove) return;
 				this.instance.updateNode(this.serialize(node));
 			}
 		});
@@ -17166,6 +17162,8 @@ var WeaveTargetingManager = class {
 		};
 		let measureContainer = mainLayer;
 		let container = mainLayer;
+		const nodesSelection = this.instance.getPlugin("nodesSelection");
+		if (nodesSelection) nodesSelection.disable();
 		const intersectedNode = stage.getIntersection(relativeMousePointer);
 		if (intersectedNode) {
 			const node = this.instance.getInstanceRecursive(intersectedNode, ["group"]);
@@ -17185,6 +17183,7 @@ var WeaveTargetingManager = class {
 			x: 0,
 			y: 0
 		};
+		if (nodesSelection) nodesSelection.enable();
 		return {
 			mousePoint: relativeMousePointer,
 			container,
@@ -17913,7 +17912,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.14.2";
+var version = "0.15.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18032,7 +18031,6 @@ var WeaveActionsManager = class {
 		return this.activeAction;
 	}
 	triggerAction(actionName, params) {
-		const config = this.instance.getConfiguration();
 		const actionsHandlers = this.instance.getActionsHandlers();
 		if (!actionsHandlers[actionName]) {
 			const msg = `Action handler with name [${actionName}] not registered`;
@@ -18042,7 +18040,6 @@ var WeaveActionsManager = class {
 		if (typeof this.activeAction !== "undefined") this.cancelAction(this.activeAction);
 		this.activeAction = actionName;
 		const payload = actionsHandlers[actionName].trigger(this.cancelActionCallback(actionName), params);
-		config.callbacks?.onActiveActionChange?.(this.activeAction);
 		this.instance.emitEvent("onActiveActionChange", this.activeAction);
 		return payload;
 	}
@@ -18077,7 +18074,6 @@ var WeaveActionsManager = class {
 		return actionsHandlers[actionName].getProps?.();
 	}
 	cancelAction(actionName) {
-		const config = this.instance.getConfiguration();
 		const actionsHandlers = this.instance.getActionsHandlers();
 		if (!actionsHandlers[actionName]) {
 			const msg = `Action handler with name [${actionName}] not registered`;
@@ -18086,7 +18082,6 @@ var WeaveActionsManager = class {
 		}
 		this.activeAction = void 0;
 		actionsHandlers[actionName].cleanup?.();
-		config.callbacks?.onActiveActionChange?.(this.activeAction);
 		this.instance.emitEvent("onActiveActionChange", this.activeAction);
 	}
 	cancelActionCallback(actionName) {
@@ -18310,7 +18305,6 @@ var Weave = class extends Emittery {
 			this.setupManager.setupActions();
 			this.moduleLogger.info("Instance started");
 			this.status = __inditextech_weave_types.WEAVE_INSTANCE_STATUS.RUNNING;
-			this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 			this.emitEvent("onInstanceStatus", this.status);
 		});
 	}
@@ -18325,15 +18319,14 @@ var Weave = class extends Emittery {
 	}
 	async start() {
 		this.moduleLogger.info("Start instance");
+		this.emitEvent("onRoomLoaded", false);
 		this.status = __inditextech_weave_types.WEAVE_INSTANCE_STATUS.STARTING;
-		this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 		this.emitEvent("onInstanceStatus", this.status);
 		this.registerManager.registerNodesHandlers();
 		this.registerManager.registerPlugins();
 		this.registerManager.registerActionsHandlers();
 		this.storeManager.registerStore(this.config.store);
 		this.status = __inditextech_weave_types.WEAVE_INSTANCE_STATUS.LOADING_FONTS;
-		this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 		this.emitEvent("onInstanceStatus", this.status);
 		await this.fontsManager.loadFonts();
 		this.setupManager.setupLog();
@@ -18342,6 +18335,17 @@ var Weave = class extends Emittery {
 		store.setup();
 		store.connect();
 	}
+	destroy() {
+		this.moduleLogger.info(`Destroying the instance`);
+		this.clearListeners();
+		this.status = __inditextech_weave_types.WEAVE_INSTANCE_STATUS.IDLE;
+		this.emitEvent("onInstanceStatus", this.status);
+		const store = this.storeManager.getStore();
+		store.disconnect();
+		const stage = this.getStage();
+		if (stage) stage.destroy();
+		this.moduleLogger.info(`Instance destroyed`);
+	}
 	getId() {
 		return this.id;
 	}
@@ -18456,13 +18460,11 @@ var Weave = class extends Emittery {
 	update(newState) {
 		this.getStore().setState(newState);
 		this.renderer.render(() => {
-			this.config.callbacks?.onRender?.();
 			this.emitEvent("onRender", {});
 		});
 	}
 	render() {
 		this.renderer.render(() => {
-			this.config.callbacks?.onRender?.();
 			this.emitEvent("onRender", {});
 		});
 	}
@@ -19648,7 +19650,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	},
 	onTargetEnter: {
 		borderColor: "#ff6863ff",
-		fill: "#ecececff"
+		fill: "#ffffffff"
 	}
 };
 const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
@@ -19699,21 +19701,21 @@ var WeaveFrameNode = class extends WeaveNode {
 			id,
 			containerId: `${id}-group-internal`,
 			containerOffsetX: 0,
-			containerOffsetY: titleHeight + borderWidth,
-			width: props.frameWidth + borderWidth * 2,
-			height: props.frameHeight + titleHeight + borderWidth * 2,
+			containerOffsetY: titleHeight,
+			width: props.frameWidth,
+			height: props.frameHeight + titleHeight,
 			fill: "#ffffffff",
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth + borderWidth * 2,
-			clipHeight: props.frameHeight + titleHeight + borderWidth * 2,
+			clipWidth: props.frameWidth,
+			clipHeight: props.frameHeight + titleHeight,
 			name: "node"
 		});
 		const background = new konva.default.Rect({
 			id: `${id}-bg`,
 			nodeId: id,
-			x: borderWidth,
-			y: titleHeight + borderWidth,
+			x: 0,
+			y: titleHeight,
 			width: props.frameWidth,
 			stroke: borderColor,
 			strokeWidth: borderWidth,
@@ -19744,18 +19746,18 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new konva.default.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: borderWidth * 2,
-			y: titleHeight + borderWidth * 2,
+			x: 0,
+			y: titleHeight,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
 			strokeScaleEnabled: false,
-			borderWidth,
+			borderWidth: 0,
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth - borderWidth * 2,
-			clipHeight: props.frameHeight - borderWidth * 2
+			clipWidth: props.frameWidth,
+			clipHeight: props.frameHeight
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
@@ -21386,6 +21388,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		this.isMouseMiddleButtonPressed = false;
 		this.isCtrlOrMetaPressed = false;
 		this.isSpaceKeyPressed = false;
+		this.overStage = false;
 		this.previousPointer = null;
 	}
 	getName() {
@@ -21426,6 +21429,12 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
+		stage.on("mouseenter", () => {
+			this.overStage = true;
+		});
+		stage.on("mouseleave", () => {
+			this.overStage = false;
+		});
 		stage.on("mousedown", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			let enableMove = false;
@@ -21495,7 +21504,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			this.instance.emit("onStageMove", void 0);
 		});
 		window.addEventListener("wheel", (e) => {
-			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
+			if (!this.enabled || !this.overStage || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
 			stage.x(stage.x() - e.deltaX);
 			stage.y(stage.y() - e.deltaY);
 			this.instance.emit("stageMove", void 0);
@@ -21901,24 +21910,60 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	setEnabled(enabled) {
 		this.enabled = enabled;
 	}
+	getSelectedNodesMetadata(transformer) {
+		const firstNode = transformer.getNodes()[0];
+		const firstNodeClientRect = firstNode.getClientRect();
+		const rectCoordsMin = {
+			x: firstNodeClientRect.x,
+			y: firstNodeClientRect.y
+		};
+		const rectCoordsMax = {
+			x: firstNodeClientRect.x + firstNodeClientRect.width,
+			y: firstNodeClientRect.y + firstNodeClientRect.height
+		};
+		const nodes = [];
+		for (const node of transformer.getNodes()) {
+			const clientRect = node.getClientRect();
+			if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
+			if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
+			if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
+			if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
+			nodes.push(node.getAttrs().id);
+		}
+		return {
+			width: rectCoordsMax.x - rectCoordsMin.x,
+			height: rectCoordsMax.y - rectCoordsMin.y,
+			nodes
+		};
+	}
 	evaluateGuidelines(e) {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		let skipNodes = [];
 		let node = void 0;
-		if (e.type === "dragmove" && e.target instanceof konva.default.Transformer) {
+		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof konva.default.Transformer && e.target.getNodes().length === 1) {
 			const actualTarget = e.target;
 			node = actualTarget.getNodes()[0];
+			skipNodes.push(node.getAttrs().id ?? "");
+		}
+		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof konva.default.Transformer && e.target.getNodes().length > 1) {
+			const { nodes } = this.getSelectedNodesMetadata(e.target);
+			node = e.target;
+			skipNodes = [...nodes];
 		}
 		if (e.type === "transform") node = e.target;
 		if (typeof node === "undefined") return;
-		const lineGuideStops = this.getLineGuideStops(node);
+		const lineGuideStops = this.getLineGuideStops(skipNodes);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
+		utilityLayer.destroyChildren();
 		if (!guides.length) return;
 		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		this.drawGuides(guides);
 		if (e.type === "dragmove") {
+			const orgAbsPos = node.absolutePosition();
 			const absPos = node.absolutePosition();
 			guides.forEach((lg) => {
 				switch (lg.orientation) {
@@ -21932,12 +21977,24 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					}
 				}
 			});
-			node.absolutePosition(absPos);
+			const vecDiff = {
+				x: orgAbsPos.x - absPos.x,
+				y: orgAbsPos.y - absPos.y
+			};
+			if (node instanceof konva.default.Transformer) node.getNodes().forEach((n) => {
+				const nodeAbsPos = n.getAbsolutePosition();
+				const newPos = {
+					x: nodeAbsPos.x - vecDiff.x,
+					y: nodeAbsPos.y - vecDiff.y
+				};
+				n.setAbsolutePosition(newPos);
+			});
+			else node.absolutePosition(absPos);
 		}
 		if (e.type === "transform") {
-			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-			if (nodesSelectionPlugin) {
-				const transformer = nodesSelectionPlugin.getTransformer();
+			const nodesSelectionPlugin$1 = this.instance.getPlugin("nodesSelection");
+			if (nodesSelectionPlugin$1) {
+				const transformer = nodesSelectionPlugin$1.getTransformer();
 				transformer.anchorDragBoundFunc((_, newAbsPos) => {
 					const finalPos = { ...newAbsPos };
 					for (const lg of guides) switch (lg.orientation) {
@@ -21961,7 +22018,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
-		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+		utilityLayer.destroyChildren();
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
@@ -21971,7 +22028,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
 		}
 	}
-	getLineGuideStops(skipShape) {
+	getLineGuideStops(skipNodes) {
 		const stage = this.instance.getStage();
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
 		if (nodesSelection) nodesSelection.getTransformer().hide();
@@ -21986,7 +22043,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			stage.height()
 		];
 		stage.find(".node").forEach((guideItem) => {
-			if (guideItem === skipShape) return;
+			if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
 			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
@@ -22006,7 +22063,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		};
 	}
 	getObjectSnappingEdges(node) {
-		const box = node.getClientRect({ skipStroke: true });
+		let box = node.getClientRect({ skipStroke: true });
+		if (node instanceof konva.default.Transformer) {
+			const transformerRect = node.getChildren((node$1) => {
+				return node$1.getAttrs().name === "back";
+			})[0];
+			box = transformerRect.getClientRect({ skipStroke: true });
+		}
 		const absPos = node.absolutePosition();
 		const snappingEdges = {
 			vertical: [

package/dist/sdk.d.cts

@@ -63,7 +63,6 @@ type WeaveConfig = {
   actions?: WeaveActionBase[];
   plugins?: WeavePluginBase[];
   fonts?: WeaveFont[];
-  callbacks?: WeaveCallbacks;
   logger?: WeaveLoggerConfig;
 };
 type WeaveStatusKeys = keyof typeof WEAVE_INSTANCE_STATUS;
@@ -141,20 +140,6 @@ type WeaveUndoManagerOptions = {
   captureTimeout?: number;
   trackedOrigins?: Set<any>;
 };
-type WeaveUndoRedoChange = {
-  canRedo: boolean;
-  canUndo: boolean;
-  redoStackLength: number;
-  undoStackLength: number;
-};
-type WeaveCallbacks = {
-  onRender?: () => void;
-  onRoomLoaded?: (loaded: boolean) => void;
-  onInstanceStatus?: (status: WeaveStatus) => void;
-  onActiveActionChange?: (actionName: string | undefined) => void;
-  onStateChange?: (state: WeaveState) => void;
-  onUndoManagerStatusChange?: (undoManagerStatus: WeaveUndoRedoChange) => void;
-};
 declare type docElementTypeDescription = "xml" | "text" | Array<any> | object;
 declare type DocTypeDescription = {
   [key: string]: docElementTypeDescription;
@@ -393,6 +378,7 @@ declare class Weave extends Emittery {
   getStatus(): WeaveStatus;
   setStore(store: WeaveStore): void;
   start(): Promise<void>;
+  destroy(): void;
   getId(): string;
   getConfiguration(): WeaveConfig;
   emitEvent<T>(event: string, payload?: T): void;
@@ -1177,6 +1163,7 @@ declare class WeaveStagePanningPlugin extends WeavePlugin {
   private isMouseMiddleButtonPressed;
   private isCtrlOrMetaPressed;
   private isSpaceKeyPressed;
+  private overStage;
   protected previousPointer: string | null;
   getLayerName: undefined;
   initLayer: undefined;
@@ -1510,10 +1497,15 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
   getName(): string;
   onInit(): void;
   setEnabled(enabled: boolean): void;
+  getSelectedNodesMetadata(transformer: Konva.Transformer): {
+    width: number;
+    height: number;
+    nodes: string[];
+  };
   evaluateGuidelines(e: KonvaEventObject<any>): void;
   cleanupEvaluateGuidelines(): void;
   private initEvents;
-  getLineGuideStops(skipShape: Konva.Node): LineGuideStop;
+  getLineGuideStops(skipNodes: string[]): LineGuideStop;
   getObjectSnappingEdges(node: Konva.Node): NodeSnappingEdges;
   getGuides(lineGuideStops: LineGuideStop, itemBounds: NodeSnappingEdges, type: string): Guide[];
   drawGuides(guides: Guide[]): void;

package/dist/sdk.d.ts

@@ -63,7 +63,6 @@ type WeaveConfig = {
   actions?: WeaveActionBase[];
   plugins?: WeavePluginBase[];
   fonts?: WeaveFont[];
-  callbacks?: WeaveCallbacks;
   logger?: WeaveLoggerConfig;
 };
 type WeaveStatusKeys = keyof typeof WEAVE_INSTANCE_STATUS;
@@ -141,20 +140,6 @@ type WeaveUndoManagerOptions = {
   captureTimeout?: number;
   trackedOrigins?: Set<any>;
 };
-type WeaveUndoRedoChange = {
-  canRedo: boolean;
-  canUndo: boolean;
-  redoStackLength: number;
-  undoStackLength: number;
-};
-type WeaveCallbacks = {
-  onRender?: () => void;
-  onRoomLoaded?: (loaded: boolean) => void;
-  onInstanceStatus?: (status: WeaveStatus) => void;
-  onActiveActionChange?: (actionName: string | undefined) => void;
-  onStateChange?: (state: WeaveState) => void;
-  onUndoManagerStatusChange?: (undoManagerStatus: WeaveUndoRedoChange) => void;
-};
 declare type docElementTypeDescription = "xml" | "text" | Array<any> | object;
 declare type DocTypeDescription = {
   [key: string]: docElementTypeDescription;
@@ -393,6 +378,7 @@ declare class Weave extends Emittery {
   getStatus(): WeaveStatus;
   setStore(store: WeaveStore): void;
   start(): Promise<void>;
+  destroy(): void;
   getId(): string;
   getConfiguration(): WeaveConfig;
   emitEvent<T>(event: string, payload?: T): void;
@@ -1177,6 +1163,7 @@ declare class WeaveStagePanningPlugin extends WeavePlugin {
   private isMouseMiddleButtonPressed;
   private isCtrlOrMetaPressed;
   private isSpaceKeyPressed;
+  private overStage;
   protected previousPointer: string | null;
   getLayerName: undefined;
   initLayer: undefined;
@@ -1510,10 +1497,15 @@ declare class WeaveNodesSnappingPlugin extends WeavePlugin {
   getName(): string;
   onInit(): void;
   setEnabled(enabled: boolean): void;
+  getSelectedNodesMetadata(transformer: Konva.Transformer): {
+    width: number;
+    height: number;
+    nodes: string[];
+  };
   evaluateGuidelines(e: KonvaEventObject<any>): void;
   cleanupEvaluateGuidelines(): void;
   private initEvents;
-  getLineGuideStops(skipShape: Konva.Node): LineGuideStop;
+  getLineGuideStops(skipNodes: string[]): LineGuideStop;
   getObjectSnappingEdges(node: Konva.Node): NodeSnappingEdges;
   getGuides(lineGuideStops: LineGuideStop, itemBounds: NodeSnappingEdges, type: string): Guide[];
   drawGuides(guides: Guide[]): void;

package/dist/sdk.js

@@ -15506,6 +15506,7 @@ var WeaveStore = class {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger(this.getName());
 		this.instance.getMainLogger().info(`Store with name [${this.getName()}] registered`);
+		this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 		return this;
 	}
 	getUser() {
@@ -15530,8 +15531,7 @@ var WeaveStore = class {
 		return JSON.parse(JSON.stringify(this.state, void 0, 2));
 	}
 	setup() {
-		const config = this.instance.getConfiguration();
-		config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
+		this.isRoomLoaded = false;
 		this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 		if (this.supportsUndoManager) {
 			const weaveStateValues = getYjsValue(
@@ -15552,7 +15552,6 @@ var WeaveStore = class {
 						redoStackLength: this.undoManager.redoStack.length,
 						undoStackLength: this.undoManager.undoStack.length
 					};
-					config.callbacks?.onUndoManagerStatusChange?.(change);
 					this.instance.emitEvent("onUndoManagerStatusChange", change);
 				});
 				this.undoManager.on("stack-item-popped", () => {
@@ -15562,14 +15561,12 @@ var WeaveStore = class {
 						redoStackLength: this.undoManager.redoStack.length,
 						undoStackLength: this.undoManager.undoStack.length
 					};
-					config.callbacks?.onUndoManagerStatusChange?.(change);
 					this.instance.emitEvent("onUndoManagerStatusChange", change);
 				});
 			}
 		}
 		observeDeep(this.getState(), () => {
 			const newState = JSON.parse(JSON.stringify(this.getState()));
-			config.callbacks?.onStateChange?.(newState);
 			this.instance.emitEvent("onStateChange", newState);
 			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			if (this.isRoomLoaded && nodesSelectionPlugin && nodesSelectionPlugin.getSelectedNodes().length === 1) {
@@ -15583,7 +15580,6 @@ var WeaveStore = class {
 			if (!this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) {
 				this.instance.setupRenderer();
 				this.isRoomLoaded = true;
-				config.callbacks?.onRoomLoaded?.(this.isRoomLoaded);
 				this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
 			}
 			if (this.isRoomLoaded && !(0, import_lodash.isEmpty)(this.state.weave)) this.instance.render();
@@ -15790,7 +15786,7 @@ function moveNodeToContainer(instance, node) {
 		const nodeHandler = instance.getNodeHandler(node.getAttrs().nodeType);
 		const actualNode = nodeHandler.serialize(node);
 		instance.removeNode(actualNode);
-		instance.addNode(actualNode, layerToMove?.getAttrs().id);
+		instance.addNode(actualNode, layerToMove.getAttrs().id);
 	}
 	return layerToMove;
 }
@@ -16459,14 +16455,14 @@ var WeaveNode = class {
 				clearContainerTargets(this.instance);
 				const layerToMove = checkIfOverContainer(this.instance, e.target);
 				if (layerToMove) layerToMove.fire(WEAVE_NODE_CUSTOM_EVENTS.onTargetEnter, { bubbles: true });
-				this.instance.updateNode(this.serialize(node));
+				this.instance.updateNode(this.serialize(e.target));
 			}
 		});
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
 				clearContainerTargets(this.instance);
-				const layerToMove = moveNodeToContainer(this.instance, e.target);
-				if (layerToMove) return;
+				const containerToMove = moveNodeToContainer(this.instance, e.target);
+				if (containerToMove) return;
 				this.instance.updateNode(this.serialize(node));
 			}
 		});
@@ -17166,6 +17162,8 @@ var WeaveTargetingManager = class {
 		};
 		let measureContainer = mainLayer;
 		let container = mainLayer;
+		const nodesSelection = this.instance.getPlugin("nodesSelection");
+		if (nodesSelection) nodesSelection.disable();
 		const intersectedNode = stage.getIntersection(relativeMousePointer);
 		if (intersectedNode) {
 			const node = this.instance.getInstanceRecursive(intersectedNode, ["group"]);
@@ -17185,6 +17183,7 @@ var WeaveTargetingManager = class {
 			x: 0,
 			y: 0
 		};
+		if (nodesSelection) nodesSelection.enable();
 		return {
 			mousePoint: relativeMousePointer,
 			container,
@@ -17913,7 +17912,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.14.2";
+var version = "0.15.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18032,7 +18031,6 @@ var WeaveActionsManager = class {
 		return this.activeAction;
 	}
 	triggerAction(actionName, params) {
-		const config = this.instance.getConfiguration();
 		const actionsHandlers = this.instance.getActionsHandlers();
 		if (!actionsHandlers[actionName]) {
 			const msg = `Action handler with name [${actionName}] not registered`;
@@ -18042,7 +18040,6 @@ var WeaveActionsManager = class {
 		if (typeof this.activeAction !== "undefined") this.cancelAction(this.activeAction);
 		this.activeAction = actionName;
 		const payload = actionsHandlers[actionName].trigger(this.cancelActionCallback(actionName), params);
-		config.callbacks?.onActiveActionChange?.(this.activeAction);
 		this.instance.emitEvent("onActiveActionChange", this.activeAction);
 		return payload;
 	}
@@ -18077,7 +18074,6 @@ var WeaveActionsManager = class {
 		return actionsHandlers[actionName].getProps?.();
 	}
 	cancelAction(actionName) {
-		const config = this.instance.getConfiguration();
 		const actionsHandlers = this.instance.getActionsHandlers();
 		if (!actionsHandlers[actionName]) {
 			const msg = `Action handler with name [${actionName}] not registered`;
@@ -18086,7 +18082,6 @@ var WeaveActionsManager = class {
 		}
 		this.activeAction = void 0;
 		actionsHandlers[actionName].cleanup?.();
-		config.callbacks?.onActiveActionChange?.(this.activeAction);
 		this.instance.emitEvent("onActiveActionChange", this.activeAction);
 	}
 	cancelActionCallback(actionName) {
@@ -18310,7 +18305,6 @@ var Weave = class extends Emittery {
 			this.setupManager.setupActions();
 			this.moduleLogger.info("Instance started");
 			this.status = WEAVE_INSTANCE_STATUS.RUNNING;
-			this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 			this.emitEvent("onInstanceStatus", this.status);
 		});
 	}
@@ -18325,15 +18319,14 @@ var Weave = class extends Emittery {
 	}
 	async start() {
 		this.moduleLogger.info("Start instance");
+		this.emitEvent("onRoomLoaded", false);
 		this.status = WEAVE_INSTANCE_STATUS.STARTING;
-		this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 		this.emitEvent("onInstanceStatus", this.status);
 		this.registerManager.registerNodesHandlers();
 		this.registerManager.registerPlugins();
 		this.registerManager.registerActionsHandlers();
 		this.storeManager.registerStore(this.config.store);
 		this.status = WEAVE_INSTANCE_STATUS.LOADING_FONTS;
-		this.getConfiguration().callbacks?.onInstanceStatus?.(this.status);
 		this.emitEvent("onInstanceStatus", this.status);
 		await this.fontsManager.loadFonts();
 		this.setupManager.setupLog();
@@ -18342,6 +18335,17 @@ var Weave = class extends Emittery {
 		store.setup();
 		store.connect();
 	}
+	destroy() {
+		this.moduleLogger.info(`Destroying the instance`);
+		this.clearListeners();
+		this.status = WEAVE_INSTANCE_STATUS.IDLE;
+		this.emitEvent("onInstanceStatus", this.status);
+		const store = this.storeManager.getStore();
+		store.disconnect();
+		const stage = this.getStage();
+		if (stage) stage.destroy();
+		this.moduleLogger.info(`Instance destroyed`);
+	}
 	getId() {
 		return this.id;
 	}
@@ -18456,13 +18460,11 @@ var Weave = class extends Emittery {
 	update(newState) {
 		this.getStore().setState(newState);
 		this.renderer.render(() => {
-			this.config.callbacks?.onRender?.();
 			this.emitEvent("onRender", {});
 		});
 	}
 	render() {
 		this.renderer.render(() => {
-			this.config.callbacks?.onRender?.();
 			this.emitEvent("onRender", {});
 		});
 	}
@@ -19648,7 +19650,7 @@ const WEAVE_FRAME_NODE_DEFAULT_CONFIG = {
 	},
 	onTargetEnter: {
 		borderColor: "#ff6863ff",
-		fill: "#ecececff"
+		fill: "#ffffffff"
 	}
 };
 const WEAVE_FRAME_NODE_DEFAULT_PROPS = {
@@ -19699,21 +19701,21 @@ var WeaveFrameNode = class extends WeaveNode {
 			id,
 			containerId: `${id}-group-internal`,
 			containerOffsetX: 0,
-			containerOffsetY: titleHeight + borderWidth,
-			width: props.frameWidth + borderWidth * 2,
-			height: props.frameHeight + titleHeight + borderWidth * 2,
+			containerOffsetY: titleHeight,
+			width: props.frameWidth,
+			height: props.frameHeight + titleHeight,
 			fill: "#ffffffff",
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth + borderWidth * 2,
-			clipHeight: props.frameHeight + titleHeight + borderWidth * 2,
+			clipWidth: props.frameWidth,
+			clipHeight: props.frameHeight + titleHeight,
 			name: "node"
 		});
 		const background = new Konva.Rect({
 			id: `${id}-bg`,
 			nodeId: id,
-			x: borderWidth,
-			y: titleHeight + borderWidth,
+			x: 0,
+			y: titleHeight,
 			width: props.frameWidth,
 			stroke: borderColor,
 			strokeWidth: borderWidth,
@@ -19744,18 +19746,18 @@ var WeaveFrameNode = class extends WeaveNode {
 		const frameInternal = new Konva.Group({
 			id: `${id}-group-internal`,
 			nodeId: id,
-			x: borderWidth * 2,
-			y: titleHeight + borderWidth * 2,
+			x: 0,
+			y: titleHeight,
 			width: props.frameWidth,
 			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
 			strokeScaleEnabled: false,
-			borderWidth,
+			borderWidth: 0,
 			clipX: 0,
 			clipY: 0,
-			clipWidth: props.frameWidth - borderWidth * 2,
-			clipHeight: props.frameHeight - borderWidth * 2
+			clipWidth: props.frameWidth,
+			clipHeight: props.frameHeight
 		});
 		frame.add(frameInternal);
 		this.setupDefaultNodeEvents(frame);
@@ -21386,6 +21388,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 		this.isMouseMiddleButtonPressed = false;
 		this.isCtrlOrMetaPressed = false;
 		this.isSpaceKeyPressed = false;
+		this.overStage = false;
 		this.previousPointer = null;
 	}
 	getName() {
@@ -21426,6 +21429,12 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 				this.disableMove();
 			}
 		});
+		stage.on("mouseenter", () => {
+			this.overStage = true;
+		});
+		stage.on("mouseleave", () => {
+			this.overStage = false;
+		});
 		stage.on("mousedown", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			let enableMove = false;
@@ -21495,7 +21504,7 @@ var WeaveStagePanningPlugin = class extends WeavePlugin {
 			this.instance.emit("onStageMove", void 0);
 		});
 		window.addEventListener("wheel", (e) => {
-			if (!this.enabled || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
+			if (!this.enabled || !this.overStage || this.isCtrlOrMetaPressed || this.isSpaceKeyPressed || this.isMouseMiddleButtonPressed) return;
 			stage.x(stage.x() - e.deltaX);
 			stage.y(stage.y() - e.deltaY);
 			this.instance.emit("stageMove", void 0);
@@ -21901,24 +21910,60 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	setEnabled(enabled) {
 		this.enabled = enabled;
 	}
+	getSelectedNodesMetadata(transformer) {
+		const firstNode = transformer.getNodes()[0];
+		const firstNodeClientRect = firstNode.getClientRect();
+		const rectCoordsMin = {
+			x: firstNodeClientRect.x,
+			y: firstNodeClientRect.y
+		};
+		const rectCoordsMax = {
+			x: firstNodeClientRect.x + firstNodeClientRect.width,
+			y: firstNodeClientRect.y + firstNodeClientRect.height
+		};
+		const nodes = [];
+		for (const node of transformer.getNodes()) {
+			const clientRect = node.getClientRect();
+			if (clientRect.x < rectCoordsMin.x) rectCoordsMin.x = clientRect.x;
+			if (clientRect.y < rectCoordsMin.y) rectCoordsMin.y = clientRect.y;
+			if (clientRect.x + clientRect.width > rectCoordsMax.x) rectCoordsMax.x = clientRect.x + clientRect.width;
+			if (clientRect.y + clientRect.height > rectCoordsMax.y) rectCoordsMax.y = clientRect.y + clientRect.height;
+			nodes.push(node.getAttrs().id);
+		}
+		return {
+			width: rectCoordsMax.x - rectCoordsMin.x,
+			height: rectCoordsMax.y - rectCoordsMin.y,
+			nodes
+		};
+	}
 	evaluateGuidelines(e) {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		let skipNodes = [];
 		let node = void 0;
-		if (e.type === "dragmove" && e.target instanceof Konva.Transformer) {
+		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length === 1) {
 			const actualTarget = e.target;
 			node = actualTarget.getNodes()[0];
+			skipNodes.push(node.getAttrs().id ?? "");
+		}
+		if (e.type === "dragmove" && nodesSelectionPlugin && e.target instanceof Konva.Transformer && e.target.getNodes().length > 1) {
+			const { nodes } = this.getSelectedNodesMetadata(e.target);
+			node = e.target;
+			skipNodes = [...nodes];
 		}
 		if (e.type === "transform") node = e.target;
 		if (typeof node === "undefined") return;
-		const lineGuideStops = this.getLineGuideStops(node);
+		const lineGuideStops = this.getLineGuideStops(skipNodes);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
+		utilityLayer.destroyChildren();
 		if (!guides.length) return;
 		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		this.drawGuides(guides);
 		if (e.type === "dragmove") {
+			const orgAbsPos = node.absolutePosition();
 			const absPos = node.absolutePosition();
 			guides.forEach((lg) => {
 				switch (lg.orientation) {
@@ -21932,12 +21977,24 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					}
 				}
 			});
-			node.absolutePosition(absPos);
+			const vecDiff = {
+				x: orgAbsPos.x - absPos.x,
+				y: orgAbsPos.y - absPos.y
+			};
+			if (node instanceof Konva.Transformer) node.getNodes().forEach((n) => {
+				const nodeAbsPos = n.getAbsolutePosition();
+				const newPos = {
+					x: nodeAbsPos.x - vecDiff.x,
+					y: nodeAbsPos.y - vecDiff.y
+				};
+				n.setAbsolutePosition(newPos);
+			});
+			else node.absolutePosition(absPos);
 		}
 		if (e.type === "transform") {
-			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-			if (nodesSelectionPlugin) {
-				const transformer = nodesSelectionPlugin.getTransformer();
+			const nodesSelectionPlugin$1 = this.instance.getPlugin("nodesSelection");
+			if (nodesSelectionPlugin$1) {
+				const transformer = nodesSelectionPlugin$1.getTransformer();
 				transformer.anchorDragBoundFunc((_, newAbsPos) => {
 					const finalPos = { ...newAbsPos };
 					for (const lg of guides) switch (lg.orientation) {
@@ -21961,7 +22018,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
 		if (!utilityLayer) return;
-		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+		utilityLayer.destroyChildren();
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
@@ -21971,7 +22028,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
 		}
 	}
-	getLineGuideStops(skipShape) {
+	getLineGuideStops(skipNodes) {
 		const stage = this.instance.getStage();
 		const nodesSelection = this.instance.getPlugin("nodesSelection");
 		if (nodesSelection) nodesSelection.getTransformer().hide();
@@ -21986,7 +22043,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 			stage.height()
 		];
 		stage.find(".node").forEach((guideItem) => {
-			if (guideItem === skipShape) return;
+			if (skipNodes.includes(guideItem.getAttrs().id ?? "")) return;
 			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
@@ -22006,7 +22063,13 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		};
 	}
 	getObjectSnappingEdges(node) {
-		const box = node.getClientRect({ skipStroke: true });
+		let box = node.getClientRect({ skipStroke: true });
+		if (node instanceof Konva.Transformer) {
+			const transformerRect = node.getChildren((node$1) => {
+				return node$1.getAttrs().name === "back";
+			})[0];
+			box = transformerRect.getClientRect({ skipStroke: true });
+		}
 		const absPos = node.absolutePosition();
 		const snappingEdges = {
 			vertical: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-sdk",
-  "version": "0.14.2",
+  "version": "0.15.0",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -43,7 +43,7 @@
     "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
   },
   "dependencies": {
-    "@inditextech/weave-types": "0.14.2",
+    "@inditextech/weave-types": "0.15.0",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",