@inditextech/weave-sdk 0.7.0 → 0.8.0

package/dist/sdk.cjs

@@ -15754,6 +15754,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			rotationSnapTolerance: 3,
 			ignoreStroke: true,
 			flipEnabled: false,
+			keepRatio: false,
 			useSingleNodeRotation: true,
 			shouldOverdrawWholeArea: true,
 			anchorStyleFunc: (anchor) => {
@@ -17806,7 +17807,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.7.0";
+var version = "0.8.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -21348,7 +21349,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 		const userInfo = this.config.getUser();
 		store.setAwarenessInfo(WEAVE_CONNECTED_USER_INFO_KEY, userInfo);
 		this.callbacks?.onConnectedUsersChanged?.({ [userInfo.name]: userInfo });
-		store.onAwarenessChange((changes) => {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			if (!this.enabled) {
 				this.connectedUsers = {};
 				this.callbacks?.onConnectedUsersChanged?.({});
@@ -21416,7 +21417,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	onInit() {
 		const store = this.instance.getStore();
 		const stage = this.instance.getStage();
-		store.onAwarenessChange((changes) => {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			const selfUser = this.config.getUser();
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
@@ -21681,9 +21682,9 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		this.enabled = enabled;
 	}
 	evaluateGuidelines(e) {
-		const mainLayer = this.instance.getMainLayer();
+		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
-		if (!mainLayer) return;
+		if (!utilityLayer) return;
 		let node = void 0;
 		if (e.type === "dragmove" && e.target instanceof konva.default.Transformer) {
 			const actualTarget = e.target;
@@ -21691,11 +21692,11 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		}
 		if (e.type === "transform") node = e.target;
 		if (typeof node === "undefined") return;
-		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		const lineGuideStops = this.getLineGuideStops(node);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
 		if (!guides.length) return;
+		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		this.drawGuides(guides);
 		if (e.type === "dragmove") {
 			const absPos = node.absolutePosition();
@@ -21719,41 +21720,41 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				const transformer = nodesSelectionPlugin.getTransformer();
 				transformer.anchorDragBoundFunc((_, newAbsPos) => {
 					const finalPos = { ...newAbsPos };
-					guides.forEach((lg) => {
-						switch (lg.orientation) {
-							case GUIDE_ORIENTATION.VERTICAL: {
-								const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
-								if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
-								break;
-							}
-							case GUIDE_ORIENTATION.HORIZONTAL: {
-								const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
-								if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
-								break;
-							}
+					for (const lg of guides) switch (lg.orientation) {
+						case GUIDE_ORIENTATION.VERTICAL: {
+							const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
+							if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
+							break;
 						}
-					});
+						case GUIDE_ORIENTATION.HORIZONTAL: {
+							const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
+							if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
+							break;
+						}
+					}
 					return finalPos;
 				});
 			}
 		}
 	}
 	cleanupEvaluateGuidelines() {
-		const mainLayer = this.instance.getMainLayer();
+		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
-		if (!mainLayer) return;
-		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+		if (!utilityLayer) return;
+		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) {
 			stage.on("dragmove", this.evaluateGuidelines.bind(this));
 			stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
 		}
 	}
 	getLineGuideStops(skipShape) {
 		const stage = this.instance.getStage();
+		const nodesSelection = this.instance.getPlugin("nodesSelection");
+		if (nodesSelection) nodesSelection.getTransformer().hide();
 		const vertical = [
 			0,
 			stage.width() / 2,
@@ -21766,7 +21767,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		];
 		stage.find(".node").forEach((guideItem) => {
 			if (guideItem === skipShape) return;
-			const box = guideItem.getClientRect();
+			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
 				box.x + box.width,
@@ -21778,28 +21779,29 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				box.y + box.height / 2
 			]);
 		});
+		if (nodesSelection) nodesSelection.getTransformer().show();
 		return {
 			vertical: vertical.flat(),
 			horizontal: horizontal.flat()
 		};
 	}
 	getObjectSnappingEdges(node) {
-		const box = node.getClientRect();
+		const box = node.getClientRect({ skipStroke: true });
 		const absPos = node.absolutePosition();
 		const snappingEdges = {
 			vertical: [
 				{
-					guide: Math.round(box.x),
+					guide: box.x,
 					offset: Math.round(absPos.x - box.x),
 					snap: NODE_SNAP.START
 				},
 				{
-					guide: Math.round(box.x + box.width / 2),
+					guide: box.x + box.width / 2,
 					offset: Math.round(absPos.x - box.x - box.width / 2),
 					snap: NODE_SNAP.CENTER
 				},
 				{
-					guide: Math.round(box.x + box.width),
+					guide: box.x + box.width,
 					offset: Math.round(absPos.x - box.x - box.width),
 					snap: NODE_SNAP.END
 				}
@@ -21888,8 +21890,8 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	}
 	drawGuides(guides) {
 		const stage = this.instance.getStage();
-		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) guides.forEach((lg) => {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) guides.forEach((lg) => {
 			if (lg.orientation === GUIDE_ORIENTATION.HORIZONTAL) {
 				const line = new konva.default.Line({
 					...this.guideLineConfig,
@@ -21903,7 +21905,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					],
 					name: GUIDE_LINE_NAME
 				});
-				mainLayer.add(line);
+				utilityLayer.add(line);
 				line.absolutePosition({
 					x: 0,
 					y: lg.lineGuide
@@ -21922,7 +21924,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					],
 					name: GUIDE_LINE_NAME
 				});
-				mainLayer.add(line);
+				utilityLayer.add(line);
 				line.absolutePosition({
 					x: lg.lineGuide,
 					y: 0

package/dist/sdk.d.cts

@@ -52,7 +52,6 @@ type WeaveStoreOptions = {
 interface WeaveStoreBase {
   connect(): void;
   disconnect(): void;
-  onAwarenessChange<K extends string, T>(callback: (changes: WeaveAwarenessChange<K, T>[]) => void): void;
   setAwarenessInfo(field: string, value: unknown): void;
 }
 
@@ -115,7 +114,6 @@ type WeaveNodeFound = {
   parent: WeaveStateElement | null;
   index: number;
 };
-type WeaveAwarenessChange<K extends string, T> = { [key in K]: T };
 type WeaveElementInstance = Konva.Layer | Konva.Group | Konva.Shape;
 type WeaveLoggerConfig = {
   disabled?: boolean;
@@ -203,7 +201,6 @@ declare abstract class WeaveStore implements WeaveStoreBase {
   redoStateStep(): void;
   abstract connect(): void;
   abstract disconnect(): void;
-  abstract onAwarenessChange<K extends string, T>(callback: (changes: WeaveAwarenessChange<K, T>[]) => void): void;
   abstract setAwarenessInfo(field: string, value: unknown): void;
 }
 

package/dist/sdk.d.ts

@@ -52,7 +52,6 @@ type WeaveStoreOptions = {
 interface WeaveStoreBase {
   connect(): void;
   disconnect(): void;
-  onAwarenessChange<K extends string, T>(callback: (changes: WeaveAwarenessChange<K, T>[]) => void): void;
   setAwarenessInfo(field: string, value: unknown): void;
 }
 
@@ -115,7 +114,6 @@ type WeaveNodeFound = {
   parent: WeaveStateElement | null;
   index: number;
 };
-type WeaveAwarenessChange<K extends string, T> = { [key in K]: T };
 type WeaveElementInstance = Konva.Layer | Konva.Group | Konva.Shape;
 type WeaveLoggerConfig = {
   disabled?: boolean;
@@ -203,7 +201,6 @@ declare abstract class WeaveStore implements WeaveStoreBase {
   redoStateStep(): void;
   abstract connect(): void;
   abstract disconnect(): void;
-  abstract onAwarenessChange<K extends string, T>(callback: (changes: WeaveAwarenessChange<K, T>[]) => void): void;
   abstract setAwarenessInfo(field: string, value: unknown): void;
 }
 

package/dist/sdk.js

@@ -15754,6 +15754,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			rotationSnapTolerance: 3,
 			ignoreStroke: true,
 			flipEnabled: false,
+			keepRatio: false,
 			useSingleNodeRotation: true,
 			shouldOverdrawWholeArea: true,
 			anchorStyleFunc: (anchor) => {
@@ -17806,7 +17807,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.7.0";
+var version = "0.8.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -21348,7 +21349,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 		const userInfo = this.config.getUser();
 		store.setAwarenessInfo(WEAVE_CONNECTED_USER_INFO_KEY, userInfo);
 		this.callbacks?.onConnectedUsersChanged?.({ [userInfo.name]: userInfo });
-		store.onAwarenessChange((changes) => {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			if (!this.enabled) {
 				this.connectedUsers = {};
 				this.callbacks?.onConnectedUsersChanged?.({});
@@ -21416,7 +21417,7 @@ var WeaveUsersPointersPlugin = class extends WeavePlugin {
 	onInit() {
 		const store = this.instance.getStore();
 		const stage = this.instance.getStage();
-		store.onAwarenessChange((changes) => {
+		this.instance.addEventListener("onAwarenessChange", (changes) => {
 			const selfUser = this.config.getUser();
 			for (const change of changes) {
 				if (!change[WEAVE_USER_POINTER_KEY]) continue;
@@ -21681,9 +21682,9 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		this.enabled = enabled;
 	}
 	evaluateGuidelines(e) {
-		const mainLayer = this.instance.getMainLayer();
+		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
-		if (!mainLayer) return;
+		if (!utilityLayer) return;
 		let node = void 0;
 		if (e.type === "dragmove" && e.target instanceof Konva.Transformer) {
 			const actualTarget = e.target;
@@ -21691,11 +21692,11 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		}
 		if (e.type === "transform") node = e.target;
 		if (typeof node === "undefined") return;
-		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		const lineGuideStops = this.getLineGuideStops(node);
 		const itemBounds = this.getObjectSnappingEdges(node);
 		const guides = this.getGuides(lineGuideStops, itemBounds, e.type);
 		if (!guides.length) return;
+		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 		this.drawGuides(guides);
 		if (e.type === "dragmove") {
 			const absPos = node.absolutePosition();
@@ -21719,41 +21720,41 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				const transformer = nodesSelectionPlugin.getTransformer();
 				transformer.anchorDragBoundFunc((_, newAbsPos) => {
 					const finalPos = { ...newAbsPos };
-					guides.forEach((lg) => {
-						switch (lg.orientation) {
-							case GUIDE_ORIENTATION.VERTICAL: {
-								const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
-								if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
-								break;
-							}
-							case GUIDE_ORIENTATION.HORIZONTAL: {
-								const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
-								if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
-								break;
-							}
+					for (const lg of guides) switch (lg.orientation) {
+						case GUIDE_ORIENTATION.VERTICAL: {
+							const distX = Math.sqrt(Math.pow(newAbsPos.x - lg.lineGuide, 2));
+							if (distX < this.transformSnappingThreshold) finalPos.x = lg.lineGuide;
+							break;
 						}
-					});
+						case GUIDE_ORIENTATION.HORIZONTAL: {
+							const distY = Math.sqrt(Math.pow(newAbsPos.y - lg.lineGuide, 2));
+							if (distY < this.transformSnappingThreshold) finalPos.y = lg.lineGuide;
+							break;
+						}
+					}
 					return finalPos;
 				});
 			}
 		}
 	}
 	cleanupEvaluateGuidelines() {
-		const mainLayer = this.instance.getMainLayer();
+		const utilityLayer = this.instance.getUtilityLayer();
 		if (!this.enabled) return;
-		if (!mainLayer) return;
-		mainLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
+		if (!utilityLayer) return;
+		utilityLayer.find(`.${GUIDE_LINE_NAME}`).forEach((l) => l.destroy());
 	}
 	initEvents() {
 		const stage = this.instance.getStage();
-		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) {
 			stage.on("dragmove", this.evaluateGuidelines.bind(this));
 			stage.on("dragend", this.cleanupEvaluateGuidelines.bind(this));
 		}
 	}
 	getLineGuideStops(skipShape) {
 		const stage = this.instance.getStage();
+		const nodesSelection = this.instance.getPlugin("nodesSelection");
+		if (nodesSelection) nodesSelection.getTransformer().hide();
 		const vertical = [
 			0,
 			stage.width() / 2,
@@ -21766,7 +21767,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 		];
 		stage.find(".node").forEach((guideItem) => {
 			if (guideItem === skipShape) return;
-			const box = guideItem.getClientRect();
+			const box = guideItem.getClientRect({ skipStroke: true });
 			vertical.push([
 				box.x,
 				box.x + box.width,
@@ -21778,28 +21779,29 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 				box.y + box.height / 2
 			]);
 		});
+		if (nodesSelection) nodesSelection.getTransformer().show();
 		return {
 			vertical: vertical.flat(),
 			horizontal: horizontal.flat()
 		};
 	}
 	getObjectSnappingEdges(node) {
-		const box = node.getClientRect();
+		const box = node.getClientRect({ skipStroke: true });
 		const absPos = node.absolutePosition();
 		const snappingEdges = {
 			vertical: [
 				{
-					guide: Math.round(box.x),
+					guide: box.x,
 					offset: Math.round(absPos.x - box.x),
 					snap: NODE_SNAP.START
 				},
 				{
-					guide: Math.round(box.x + box.width / 2),
+					guide: box.x + box.width / 2,
 					offset: Math.round(absPos.x - box.x - box.width / 2),
 					snap: NODE_SNAP.CENTER
 				},
 				{
-					guide: Math.round(box.x + box.width),
+					guide: box.x + box.width,
 					offset: Math.round(absPos.x - box.x - box.width),
 					snap: NODE_SNAP.END
 				}
@@ -21888,8 +21890,8 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 	}
 	drawGuides(guides) {
 		const stage = this.instance.getStage();
-		const mainLayer = this.instance.getMainLayer();
-		if (mainLayer) guides.forEach((lg) => {
+		const utilityLayer = this.instance.getUtilityLayer();
+		if (utilityLayer) guides.forEach((lg) => {
 			if (lg.orientation === GUIDE_ORIENTATION.HORIZONTAL) {
 				const line = new Konva.Line({
 					...this.guideLineConfig,
@@ -21903,7 +21905,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					],
 					name: GUIDE_LINE_NAME
 				});
-				mainLayer.add(line);
+				utilityLayer.add(line);
 				line.absolutePosition({
 					x: 0,
 					y: lg.lineGuide
@@ -21922,7 +21924,7 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 					],
 					name: GUIDE_LINE_NAME
 				});
-				mainLayer.add(line);
+				utilityLayer.add(line);
 				line.absolutePosition({
 					x: lg.lineGuide,
 					y: 0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-sdk",
-  "version": "0.7.0",
+  "version": "0.8.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.7.0",
+    "@inditextech/weave-types": "0.8.0",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",