@inditextech/weave-sdk 0.6.0 → 0.7.1

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.6.0";
+var version = "0.7.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18958,6 +18959,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
+				strokeScaleEnabled: false,
 				imageInfo: {
 					width: this.preloadImgs[this.imageId].width,
 					height: this.preloadImgs[this.imageId].height
@@ -19571,6 +19573,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth,
 			stroke: props.borderColor,
 			strokeWidth: props.borderWidth,
+			strokeScaleEnabled: false,
 			height: props.frameHeight,
 			fill: "#ffffffff",
 			draggable: false
@@ -19588,6 +19591,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			text: props.title,
 			stroke: "#000000ff",
 			strokeWidth: 1,
+			strokeScaleEnabled: false,
 			listening: false,
 			draggable: false
 		});
@@ -19601,6 +19605,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
+			strokeScaleEnabled: false,
 			borderWidth: props.borderWidth,
 			clipX: 0,
 			clipY: 0,
@@ -20179,6 +20184,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("rectangle");
 		const node = nodeHandler.create(this.rectId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			width: 0,
@@ -20343,6 +20349,7 @@ var WeavePenToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.lineId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -20352,6 +20359,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: false,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -20368,6 +20376,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: false,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -20560,6 +20569,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.strokeId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -20705,6 +20715,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			strokeEnabled: false,
 			stroke: "#000000ff",
 			strokeWidth: 1,
+			strokeScaleEnabled: false,
 			align: "left",
 			verticalAlign: "top",
 			opacity: 1,
@@ -21671,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;
@@ -21681,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();
@@ -21709,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,
@@ -21756,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,
@@ -21768,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
 				}
@@ -21878,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,
@@ -21893,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
@@ -21912,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.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.6.0";
+var version = "0.7.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18958,6 +18959,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
+				strokeScaleEnabled: false,
 				imageInfo: {
 					width: this.preloadImgs[this.imageId].width,
 					height: this.preloadImgs[this.imageId].height
@@ -19571,6 +19573,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			width: props.frameWidth,
 			stroke: props.borderColor,
 			strokeWidth: props.borderWidth,
+			strokeScaleEnabled: false,
 			height: props.frameHeight,
 			fill: "#ffffffff",
 			draggable: false
@@ -19588,6 +19591,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			text: props.title,
 			stroke: "#000000ff",
 			strokeWidth: 1,
+			strokeScaleEnabled: false,
 			listening: false,
 			draggable: false
 		});
@@ -19601,6 +19605,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			height: props.frameHeight,
 			draggable: false,
 			stroke: "transparent",
+			strokeScaleEnabled: false,
 			borderWidth: props.borderWidth,
 			clipX: 0,
 			clipY: 0,
@@ -20179,6 +20184,7 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("rectangle");
 		const node = nodeHandler.create(this.rectId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			width: 0,
@@ -20343,6 +20349,7 @@ var WeavePenToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.lineId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -20352,6 +20359,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: false,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -20368,6 +20376,7 @@ var WeavePenToolAction = class extends WeaveAction {
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			radius: 5 / stage.scaleX(),
+			strokeScaleEnabled: false,
 			stroke: "#cccccc",
 			strokeWidth: 0,
 			fill: "#cccccc"
@@ -20560,6 +20569,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const nodeHandler = this.instance.getNodeHandler("line");
 		const node = nodeHandler.create(this.strokeId, {
 			...this.props,
+			strokeScaleEnabled: false,
 			x: this.clickPoint?.x ?? 0,
 			y: this.clickPoint?.y ?? 0,
 			points: [0, 0]
@@ -20705,6 +20715,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 			strokeEnabled: false,
 			stroke: "#000000ff",
 			strokeWidth: 1,
+			strokeScaleEnabled: false,
 			align: "left",
 			verticalAlign: "top",
 			opacity: 1,
@@ -21671,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;
@@ -21681,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();
@@ -21709,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,
@@ -21756,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,
@@ -21768,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
 				}
@@ -21878,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,
@@ -21893,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
@@ -21912,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.6.0",
+  "version": "0.7.1",
   "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.6.0",
+    "@inditextech/weave-types": "0.7.1",
     "@syncedstore/core": "0.6.0",
     "canvas": "3.1.0",
     "konva": "9.3.20",