@inditextech/weave-sdk 0.20.1 → 0.20.3

package/dist/sdk.js

@@ -1,8 +1,9 @@
+import "./extensions.d-NOtVg64R.d.ts";
 import Konva from "konva";
 import "konva/lib/types";
+import { Doc, UndoManager } from "yjs";
 import { WEAVE_AWARENESS_LAYER_ID, WEAVE_DEFAULT_TRANSFORM_PROPERTIES, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FILE_FORMAT, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
-import { Doc, UndoManager } from "yjs";
 import React from "react";
 import ReactReconciler from "react-reconciler";
 import { Line } from "konva/lib/shapes/Line";
@@ -16462,6 +16463,7 @@ const setNodesDefaultConfiguration = (config) => {
 		};
 	};
 	Konva.Node.prototype.updatePosition = function() {};
+	Konva.Node.prototype.resetCrop = function() {};
 };
 var WeaveNode = class {
 	register(instance) {
@@ -16509,6 +16511,10 @@ var WeaveNode = class {
 		}
 		node.width(Math.max(5, node.width() * node.scaleX()));
 		node.height(Math.max(5, node.height() * node.scaleY()));
+		if (node.getAttrs().nodeType === "image") node.setAttrs({ uncroppedImage: {
+			width: node.getAttrs().uncroppedImage.width * node.scaleX(),
+			height: node.getAttrs().uncroppedImage.height * node.scaleY()
+		} });
 		node.scaleX(1);
 		node.scaleY(1);
 	}
@@ -16523,7 +16529,9 @@ var WeaveNode = class {
 		});
 		node.on("transform", (e) => {
 			const node$1 = e.target;
+			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+			if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
 			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.evaluateGuidelines(e);
 			if (this.isSelecting() && this.isNodeSelected(node$1)) {
 				this.scaleReset(node$1);
@@ -16534,8 +16542,10 @@ var WeaveNode = class {
 		});
 		node.on("transformend", (e) => {
 			const node$1 = e.target;
+			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
 			const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 			if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSnappingPlugin.cleanupEvaluateGuidelines();
+			if (nodesSelectionPlugin && this.isSelecting() && this.isNodeSelected(node$1)) nodesSelectionPlugin.getTransformer().forceUpdate();
 		});
 		node.on("dragmove", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
@@ -16548,6 +16558,8 @@ var WeaveNode = class {
 		node.on("dragend", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(node)) {
 				clearContainerTargets(this.instance);
+				const nodesSnappingPlugin = this.instance.getPlugin("nodesSnapping");
+				if (nodesSnappingPlugin && this.isSelecting() && this.isNodeSelected(node)) nodesSnappingPlugin.cleanupEvaluateGuidelines();
 				const containerToMove = moveNodeToContainer(this.instance, e.target);
 				if (containerToMove) return;
 				this.instance.updateNode(this.serialize(node));
@@ -18024,7 +18036,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.20.1";
+var version = "0.20.3";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18760,6 +18772,8 @@ var WeaveGroupNode = class extends WeaveNode {
 	}
 	onUpdate(nodeInstance, nextProps) {
 		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
 	serialize(instance) {
 		const attrs = instance.getAttrs();
@@ -18811,6 +18825,8 @@ var WeaveRectangleNode = class extends WeaveNode {
 	}
 	onUpdate(nodeInstance, nextProps) {
 		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
 };
 
@@ -18843,6 +18859,8 @@ var WeaveLineNode = class extends WeaveNode {
 	}
 	onUpdate(nodeInstance, nextProps) {
 		nodeInstance.setAttrs({ ...nextProps });
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
 };
 
@@ -19378,6 +19396,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 				width: 100 * aspectRatio,
 				height: 100,
 				opacity: 1,
+				adding: true,
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
@@ -19404,18 +19423,21 @@ var WeaveImageToolAction = class extends WeaveAction {
 				x: this.clickPoint?.x ?? 0,
 				y: this.clickPoint?.y ?? 0,
 				opacity: 1,
+				adding: false,
 				imageURL: this.imageURL,
 				stroke: "#000000ff",
 				strokeWidth: 0,
 				strokeScaleEnabled: false,
+				imageWidth: this.preloadImgs[this.imageId].width,
+				imageHeight: this.preloadImgs[this.imageId].height,
 				imageInfo: {
 					width: this.preloadImgs[this.imageId].width,
 					height: this.preloadImgs[this.imageId].height
 				}
 			});
 			this.instance.addNode(node, this.container?.getAttrs().id);
-			const rectangleNodeHandler = this.instance.getNodeHandler("rectangle");
-			this.instance.removeNode(rectangleNodeHandler.serialize(tempImage));
+			const imageNodeHandler = this.instance.getNodeHandler("image");
+			this.instance.removeNode(imageNodeHandler.serialize(tempImage));
 			this.setState(IMAGE_TOOL_STATE.FINISHED);
 		}
 		this.cancelAction();
@@ -19459,20 +19481,17 @@ var WeaveImageToolAction = class extends WeaveAction {
 };
 
 //#endregion
-//#region src/nodes/image/clip.ts
-var WeaveImageClip = class {
+//#region src/nodes/image/crop.ts
+var WeaveImageCrop = class WeaveImageCrop {
 	constructor(instance, node, image, internalImage, clipGroup) {
 		this.instance = instance;
 		this.node = node;
 		this.image = image;
 		this.internalImage = internalImage;
-		this.clipGroup = clipGroup;
+		this.cropGroup = clipGroup;
 		this.handleHide = this.hide.bind(this);
-		this.handleCrop = this.handleClipTransform.bind(this);
-		this.handleDrag = this.handleClipDrag.bind(this);
 	}
 	show() {
-		const originalImage = this.internalImage.getAttr("image");
 		const nodeSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 		if (nodeSnappingPlugin) this.instance.disablePlugin("nodesSnapping");
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -19481,74 +19500,153 @@ var WeaveImageClip = class {
 			selectionPlugin.getTransformer().nodes([]);
 			selectionPlugin.getTransformer().hide();
 		}
-		const ratio = this.internalImage.cropWidth() === 0 ? this.image.width() / this.image.width() : this.image.width() / this.internalImage.cropWidth();
-		const originWidth = ratio * originalImage.width;
-		const originHeight = ratio * originalImage.height;
-		const cropX = this.internalImage.cropX() * ratio;
-		const cropY = this.internalImage.cropY() * ratio;
+		this.image.setAttrs({ cropping: true });
+		const imageAttrs = this.image.getAttrs();
 		this.internalImage.hide();
-		const clipImage = this.internalImage.clone({
-			width: originWidth,
-			height: originHeight,
-			cropX: 0,
-			cropY: 0,
-			cropWidth: 0,
-			cropHeight: 0,
+		this.cropGroup.destroyChildren();
+		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
+		const realScale = actualScale / cropScale;
+		this.cropImage = new Konva.Image({
+			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
+			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
+			width: imageAttrs.uncroppedImage.width,
+			height: imageAttrs.uncroppedImage.height,
+			scaleX: 1,
+			scaleY: 1,
+			image: this.internalImage.image(),
+			crop: void 0,
 			visible: true,
-			draggable: false,
-			rotation: 0
+			listening: false,
+			draggable: false
 		});
-		this.clipRect = new Konva.Rect({
-			width: this.internalImage.width(),
-			height: this.internalImage.height(),
-			fill: "rgba(0,0,0,0.5)",
+		this.imageOffsetX = imageAttrs.cropInfo ? imageAttrs.cropInfo.x * realScale : 0;
+		this.imageOffsetY = imageAttrs.cropInfo ? imageAttrs.cropInfo.y * realScale : 0;
+		this.cropRect = new Konva.Rect({
 			x: 0,
 			y: 0,
+			width: imageAttrs.cropInfo ? imageAttrs.cropInfo.width * realScale : imageAttrs.uncroppedImage.width,
+			height: imageAttrs.cropInfo ? imageAttrs.cropInfo.height * realScale : imageAttrs.uncroppedImage.height,
+			fill: "rgba(0,0,0,0.2)",
+			stroke: "#ff0000ff",
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
 			draggable: true,
 			rotation: 0
 		});
 		this.transformer = new Konva.Transformer({
+			id: `${this.image.getAttrs().id}_transformer`,
+			x: 0,
+			y: 0,
 			flipEnabled: false,
 			keepRatio: false,
+			ignoreStroke: false,
 			rotateEnabled: false,
 			enabledAnchors: [
 				"top-left",
+				"top-center",
 				"top-right",
+				"middle-right",
 				"bottom-left",
-				"bottom-right"
+				"middle-left",
+				"bottom-right",
+				"bottom-center"
 			],
+			anchorDragBoundFunc: (_, newPos) => {
+				let closestSnap = newPos;
+				let minDist = 10;
+				const nodeRotation = this.image.getAbsoluteRotation();
+				const stage = this.instance.getStage();
+				const rotation = nodeRotation * (Math.PI / 180);
+				const center = this.cropImage.getAbsolutePosition();
+				const width = this.cropImage.width() * stage.scaleX();
+				const height = this.cropImage.height() * stage.scaleY();
+				const offset = this.cropImage.offset();
+				const corners = [
+					{
+						x: -offset.x,
+						y: -offset.y
+					},
+					{
+						x: width - offset.x,
+						y: -offset.y
+					},
+					{
+						x: width - offset.x,
+						y: height - offset.y
+					},
+					{
+						x: -offset.x,
+						y: height - offset.y
+					}
+				].map((pt) => {
+					const cos = Math.cos(rotation);
+					const sin = Math.sin(rotation);
+					return {
+						x: center.x + pt.x * cos - pt.y * sin,
+						y: center.y + pt.x * sin + pt.y * cos
+					};
+				});
+				const edges = [
+					[corners[0], corners[1]],
+					[corners[1], corners[2]],
+					[corners[2], corners[3]],
+					[corners[3], corners[0]]
+				];
+				for (const [a, b] of edges) {
+					const candidate = this.closestPointOnLine(newPos, a, b);
+					const dist = Math.hypot(newPos.x - candidate.x, newPos.y - candidate.y);
+					if (dist < minDist) {
+						closestSnap = candidate;
+						minDist = dist;
+					}
+				}
+				return closestSnap;
+			},
 			rotation: 0
 		});
 		this.grid = new Konva.Group();
-		this.transformer.on("dragmove", this.handleDrag);
-		this.transformer.on("transform", this.handleCrop);
-		this.transformer.nodes([this.clipRect]);
-		this.clipGroup.add(clipImage);
-		this.clipGroup.add(this.clipRect);
-		this.clipGroup.add(this.grid);
-		this.clipGroup.add(this.transformer);
-		this.clipGroup.setPosition({
-			x: -cropX,
-			y: -cropY
+		const cropRect = this.cropRect.getClientRect({
+			relativeTo: this.cropGroup,
+			skipStroke: true
 		});
-		this.clipRect.position({
-			x: cropX,
-			y: cropY
+		this.drawGridLines(0, 0, cropRect.width, cropRect.height);
+		this.cropRect.on("dragmove", () => {
+			const cropRect$1 = this.cropRect.getClientRect({
+				relativeTo: this.cropGroup,
+				skipStroke: true
+			});
+			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
 		});
-		this.handleClipTransform();
-		this.clipGroup.show();
+		this.cropRect.on("transform", () => {
+			const cropRect$1 = this.cropRect.getClientRect({
+				relativeTo: this.cropGroup,
+				skipStroke: true
+			});
+			this.drawGridLines(cropRect$1.x, cropRect$1.y, cropRect$1.width, cropRect$1.height);
+		});
+		this.transformer.nodes([this.cropRect]);
+		this.cropGroup.add(this.cropImage);
+		this.cropGroup.add(this.cropRect);
+		this.cropGroup.add(this.grid);
+		const utilityLayer = this.instance.getUtilityLayer();
+		utilityLayer?.add(this.transformer);
+		this.transformer.forceUpdate();
+		this.cropGroup.show();
 		this.instance.getStage().container().addEventListener("keydown", this.handleHide);
 	}
-	hide() {
-		this.handleClipEnd();
-		this.node.cropping = false;
+	hide(e) {
+		if (!["Enter", "Escape"].includes(e.key)) return;
+		this.image.setAttrs({ cropping: false });
+		if (e.key === "Enter") this.handleClipEnd();
+		const utilityLayer = this.instance.getUtilityLayer();
+		utilityLayer?.destroyChildren();
 		this.instance.getStage().container().removeEventListener("keydown", this.handleHide);
-		this.transformer.off("dragmove", this.handleDrag);
-		this.transformer.off("transform", this.handleCrop);
-		this.clipGroup.destroyChildren();
-		this.clipGroup.hide();
+		this.cropGroup.destroyChildren();
+		this.cropGroup.hide();
 		const nodeSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 		if (nodeSnappingPlugin) this.instance.enablePlugin("nodesSnapping");
+		this.internalImage.show();
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			this.instance.enablePlugin("nodesSelection");
@@ -19556,126 +19654,145 @@ var WeaveImageClip = class {
 			selectionTransformer.nodes([this.image]);
 			selectionTransformer.show();
 			setTimeout(() => {
+				selectionPlugin.triggerSelectedNodesEvent();
 				selectionTransformer.forceUpdate();
 			}, 0);
 		}
-		this.internalImage.show();
-	}
-	handleClipTransform() {
-		if (!this.node.cropping) return;
-		const originalImage = this.internalImage.getAttr("image");
-		let x = this.clipRect.x();
-		let y = this.clipRect.y();
-		let width = this.clipRect.width() * this.clipRect.scaleX();
-		let height = this.clipRect.height() * this.clipRect.scaleY();
-		if (x < 0) {
-			width += x;
-			x = 0;
-		}
-		if (x + width > originalImage.width) width = originalImage.width - x;
-		if (y < 0) {
-			height += y;
-			y = 0;
-		}
-		if (y + height > originalImage.height) height = originalImage.height - y;
-		this.clipRect.setAttrs({
-			x,
-			y,
-			width,
-			height,
-			scaleX: 1,
-			scaleY: 1
-		});
-		this.transformer.absolutePosition(this.clipRect.absolutePosition());
-		this.grid.position({
-			x,
-			y
-		});
-		this.drawGridLines(width, height);
-	}
-	handleClipDrag() {
-		if (!this.node.cropping) return;
-		const originalImage = this.internalImage.getAttr("image");
-		let x = this.clipRect.x();
-		let y = this.clipRect.y();
-		let width = this.clipRect.width();
-		let height = this.clipRect.height();
-		const originWidth = originalImage.width;
-		const originHeight = originalImage.height;
-		if (x < 0) x = 0;
-		if (x + width > originWidth) {
-			x = originWidth - width;
-			width = originWidth - x;
-		}
-		if (y < 0) y = 0;
-		if (y + height > originHeight) {
-			y = originHeight - height;
-			height = originHeight - y;
-		}
-		this.clipRect.setAttrs({
-			x,
-			y,
-			width,
-			height
-		});
-		this.grid.position({
-			x,
-			y
-		});
-		this.drawGridLines(width, height);
 	}
-	drawGridLines(width, height) {
-		if (!this.node.cropping) return;
+	drawGridLines(x, y, width, height) {
+		if (!this.image.getAttrs().cropping) return;
 		this.grid.destroyChildren();
 		const stepX = width / 3;
 		const stepY = height / 3;
 		for (let i = 1; i <= 2; i++) {
 			const vLine = new Konva.Line({
 				points: [
-					stepX * i,
-					0,
-					stepX * i,
-					height
+					x + stepX * i,
+					y,
+					x + stepX * i,
+					y + height
 				],
-				stroke: "#ffffff",
-				strokeWidth: 1
+				stroke: "#0074ffcc",
+				strokeWidth: 1,
+				strokeScaleEnabled: false
 			});
 			const hLine = new Konva.Line({
 				points: [
-					0,
-					stepY * i,
-					width,
-					stepY * i
+					x,
+					y + stepY * i,
+					x + width,
+					y + stepY * i
 				],
-				stroke: "#ffffff",
-				strokeWidth: 1
+				stroke: "#0074ffcc",
+				strokeWidth: 1,
+				strokeScaleEnabled: false
 			});
 			this.grid.add(vLine, hLine);
 		}
 	}
+	unCrop() {
+		const imageAttrs = this.image.getAttrs();
+		this.cropGroup.destroyChildren();
+		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
+		const realScale = actualScale / cropScale;
+		this.cropImage = new Konva.Image({
+			x: imageAttrs.cropInfo ? -imageAttrs.cropInfo.x * realScale : 0,
+			y: imageAttrs.cropInfo ? -imageAttrs.cropInfo.y * realScale : 0,
+			width: imageAttrs.uncroppedImage.width,
+			height: imageAttrs.uncroppedImage.height,
+			scaleX: 1,
+			scaleY: 1,
+			image: this.internalImage.image(),
+			crop: void 0,
+			visible: false,
+			listening: false,
+			draggable: false
+		});
+		this.cropGroup.add(this.cropImage);
+		const cropImageStage = this.cropImage.getAbsolutePosition();
+		this.image.setAttrs({
+			width: imageAttrs.uncroppedImage.width,
+			height: imageAttrs.uncroppedImage.height
+		});
+		this.image.setAbsolutePosition(cropImageStage);
+		this.image.attrs.cropInfo = void 0;
+		this.instance.updateNode(this.node.serialize(this.image));
+	}
 	handleClipEnd() {
-		if (!this.node.cropping) return;
-		const cropX = this.clipRect.x();
-		const cropY = this.clipRect.y();
-		const width = this.clipRect.width();
-		const height = this.clipRect.height();
-		if (this.image) {
+		const clipRect = this.cropRect.getClientRect({ relativeTo: this.cropGroup });
+		const originalRotation = this.image.getAbsoluteRotation();
+		this.cropImage.rotation(-originalRotation);
+		this.cropRect.rotation(-originalRotation);
+		const intersectionRect = this.getIntersectionRect(this.cropImage, this.cropRect);
+		this.cropImage.rotation(0);
+		this.cropRect.rotation(0);
+		const clipRectGroup = this.cropRect.getClientRect({ relativeTo: this.cropGroup });
+		if (!intersectionRect) return;
+		const imageAttrs = this.internalImage.getAttrs();
+		const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+		const realClipRect = {
+			scaleX: actualScale,
+			scaleY: actualScale,
+			x: WeaveImageCrop.roundTo6Decimals(clipRectGroup.x + this.imageOffsetX),
+			y: WeaveImageCrop.roundTo6Decimals(clipRectGroup.y + this.imageOffsetY),
+			width: WeaveImageCrop.roundTo6Decimals(clipRectGroup.width),
+			height: WeaveImageCrop.roundTo6Decimals(clipRectGroup.height)
+		};
+		if (this.image && clipRect) {
+			const clipRectStage = this.cropRect.getAbsolutePosition();
+			const clipRectGroup$1 = this.cropRect.getClientRect({ relativeTo: this.cropGroup });
 			this.image.setAttrs({
-				width,
-				height,
-				cropX,
-				cropY,
-				cropWidth: width,
-				cropHeight: height
-			});
-			const clipRectPos = this.clipRect.getAbsolutePosition();
-			this.image.setPosition({
-				x: clipRectPos.x,
-				y: clipRectPos.y
+				width: clipRectGroup$1.width,
+				height: clipRectGroup$1.height,
+				cropInfo: realClipRect,
+				cropSize: clipRectGroup$1,
+				uncroppedImage: {
+					width: imageAttrs.uncroppedImage.width,
+					height: imageAttrs.uncroppedImage.height
+				}
 			});
+			this.image.setAbsolutePosition(clipRectStage);
 			this.instance.updateNode(this.node.serialize(this.image));
 		}
 	}
+	static roundTo6Decimals(value) {
+		return parseFloat(value.toFixed(6));
+	}
+	getIntersectionRect(a, b) {
+		const rectA = a.getClientRect({ skipStroke: true });
+		const rectB = b.getClientRect({ skipStroke: true });
+		const x1 = WeaveImageCrop.roundTo6Decimals(Math.max(rectA.x, rectB.x));
+		const y1 = WeaveImageCrop.roundTo6Decimals(Math.max(rectA.y, rectB.y));
+		const x2 = WeaveImageCrop.roundTo6Decimals(Math.min(rectA.x + rectA.width, rectB.x + rectB.width));
+		const y2 = WeaveImageCrop.roundTo6Decimals(Math.min(rectA.y + rectA.height, rectB.y + rectB.height));
+		const width = WeaveImageCrop.roundTo6Decimals(x2 - x1);
+		const height = WeaveImageCrop.roundTo6Decimals(y2 - y1);
+		if (width <= 0 || height <= 0) return null;
+		return {
+			x: x1,
+			y: y1,
+			width,
+			height
+		};
+	}
+	closestPointOnLine(p, a, b) {
+		const ab = {
+			x: b.x - a.x,
+			y: b.y - a.y
+		};
+		const abLengthSquared = ab.x ** 2 + ab.y ** 2;
+		if (abLengthSquared === 0) return a;
+		const ap = {
+			x: p.x - a.x,
+			y: p.y - a.y
+		};
+		const t = Math.max(0, Math.min(1, (ap.x * ab.x + ap.y * ab.y) / abLengthSquared));
+		return {
+			x: a.x + t * ab.x,
+			y: a.y + t * ab.y
+		};
+	}
 };
 
 //#endregion
@@ -19693,8 +19810,8 @@ var WeaveImageNode = class extends WeaveNode {
 			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
 			...config?.transform
 		} };
+		this.cachedCropInfo = {};
 		this.imageLoaded = false;
-		this.cropping = false;
 	}
 	onRender(props) {
 		const imageProperties = props.imageProperties;
@@ -19710,9 +19827,18 @@ var WeaveImageNode = class extends WeaveNode {
 		delete internalImageProps.zIndex;
 		const image = new Konva.Group({
 			...groupImageProps,
+			...internalImageProps,
 			id,
 			name: "node"
 		});
+		image.resetCrop = () => {
+			const stage = this.instance.getStage();
+			const image$1 = stage.findOne(`#${id}`);
+			if (!image$1) return;
+			const imageCrop = new WeaveImageCrop(this.instance, this, image$1, internalImage, cropGroup);
+			imageCrop.unCrop();
+			this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
+		};
 		image.getTransformerProperties = () => {
 			return this.config.transform;
 		};
@@ -19745,25 +19871,30 @@ var WeaveImageNode = class extends WeaveNode {
 			rotation: 0,
 			width: 0,
 			height: 0,
+			stroke: "#ff0000ff",
+			strokeWidth: 0,
+			strokeScaleEnabled: false,
 			draggable: false,
 			visible: false
 		});
 		image.add(internalImage);
-		const clipGroup = new Konva.Group({
+		const cropGroup = new Konva.Group({
+			id: `${id}-cropGroup`,
 			x: 0,
 			y: 0,
+			scaleX: 1,
+			scaleY: 1,
 			visible: false
 		});
-		image.add(clipGroup);
+		image.add(cropGroup);
 		this.setupDefaultNodeEvents(image);
 		image.on("dblclick dbltap", (evt) => {
 			evt.cancelBubble = true;
-			if (this.cropping) return;
+			if (image.getAttrs().cropping ?? false) return;
 			if (!internalImage.getAttr("image")) return;
 			if (!(this.isSelecting() && this.isNodeSelected(image))) return;
-			this.cropping = true;
-			const imageClip = new WeaveImageClip(this.instance, this, image, internalImage, clipGroup);
-			imageClip.show();
+			const imageCrop = new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup);
+			imageCrop.show();
 		});
 		const imageActionTool = this.getImageToolAction();
 		const preloadImg = imageActionTool.getPreloadedImage(imageProps.id);
@@ -19782,6 +19913,12 @@ var WeaveImageNode = class extends WeaveNode {
 			this.imageLoaded = true;
 			image.setAttr("width", image.width() ? image.width() : preloadImg.width);
 			image.setAttr("height", image.height() ? image.height() : preloadImg.height);
+			const imageRect = image.getClientRect();
+			image.setAttr("cropInfo", void 0);
+			image.setAttr("uncroppedImage", {
+				width: imageRect.width,
+				height: imageRect.height
+			});
 			image.setAttr("imageInfo", {
 				width: preloadImg.width,
 				height: preloadImg.height
@@ -19837,25 +19974,33 @@ var WeaveImageNode = class extends WeaveNode {
 				zIndex: 1
 			});
 		}
-		if (this.imageLoaded) internalImage?.setAttrs({
-			...internalImageProps,
-			...nodeAttrs.imageProperties ?? {},
-			name: void 0,
-			id: `${id}-image`,
-			nodeId: id,
-			x: 0,
-			y: 0,
-			scaleX: 1,
-			scaleY: 1,
-			rotation: 0,
-			visible: true,
-			draggable: false,
-			zIndex: 0
-		});
+		if (this.imageLoaded) {
+			internalImage?.setAttrs({
+				...internalImageProps,
+				...nodeAttrs.imageProperties ?? {},
+				name: void 0,
+				id: `${id}-image`,
+				nodeId: id,
+				x: 0,
+				y: 0,
+				scaleX: 1,
+				scaleY: 1,
+				rotation: 0,
+				visible: true,
+				draggable: false,
+				zIndex: 0
+			});
+			this.updateCrop(nextProps);
+		}
+		try {
+			const selectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (selectionPlugin) selectionPlugin.getTransformer().forceUpdate();
+		} catch (error) {
+			console.error("Error updating transformer", error);
+		}
 	}
 	loadImage(params, image) {
 		const imageProps = params;
-		const imageGroup = image.findOne(`#${imageProps.id}`);
 		const imagePlaceholder = image.findOne(`#${imageProps.id}-placeholder`);
 		const internalImage = image.findOne(`#${imageProps.id}-image`);
 		const imageObj = new Image();
@@ -19865,29 +20010,71 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage?.setAttrs({ visible: false });
 		};
 		imageObj.onload = () => {
-			imageGroup?.setAttrs({
-				width: imageProps.width ? imageProps.width : imageObj.width,
-				height: imageProps.height ? imageProps.height : imageObj.height
-			});
-			imagePlaceholder?.destroy();
-			internalImage?.setAttrs({
-				width: imageProps.width ? imageProps.width : imageObj.width,
-				height: imageProps.height ? imageProps.height : imageObj.height,
-				image: imageObj,
-				visible: true
-			});
-			internalImage?.zIndex(0);
-			this.imageLoaded = true;
-			image.setAttr("width", imageProps.width ? imageProps.width : imageObj.width);
-			image.setAttr("height", imageProps.height ? imageProps.height : imageObj.height);
-			image.setAttr("imageInfo", {
-				width: imageObj.width,
-				height: imageObj.height
-			});
-			this.instance.updateNode(this.serialize(image));
+			if (image && imagePlaceholder && internalImage) {
+				image.setAttrs({
+					width: imageProps.width ? imageProps.width : imageObj.width,
+					height: imageProps.height ? imageProps.height : imageObj.height
+				});
+				imagePlaceholder.destroy();
+				internalImage.setAttrs({
+					width: imageProps.width ? imageProps.width : imageObj.width,
+					height: imageProps.height ? imageProps.height : imageObj.height,
+					image: imageObj,
+					visible: true
+				});
+				internalImage.setAttr("imageInfo", {
+					width: imageObj.width,
+					height: imageObj.height
+				});
+				internalImage.zIndex(0);
+				this.imageLoaded = true;
+				image.setAttrs({
+					width: imageProps.width ? imageProps.width : imageObj.width,
+					height: imageProps.height ? imageProps.height : imageObj.height
+				});
+				image.setAttr("imageInfo", {
+					width: imageObj.width,
+					height: imageObj.height
+				});
+				this.updateCrop(imageProps);
+			}
 		};
 		if (imageProps.imageURL) imageObj.src = imageProps.imageURL;
 	}
+	updateCrop(nextProps) {
+		const imageAttrs = nextProps;
+		const stage = this.instance.getStage();
+		const image = stage.findOne(`#${imageAttrs.id}`);
+		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+			internalImage.width(imageAttrs.uncroppedImage.width);
+			internalImage.height(imageAttrs.uncroppedImage.height);
+			internalImage.rotation(0);
+			internalImage.scaleX(1);
+			internalImage.scaleY(1);
+			internalImage.crop({
+				x: imageAttrs.cropInfo.x / actualScale,
+				y: imageAttrs.cropInfo.y / actualScale,
+				width: imageAttrs.cropInfo.width / actualScale,
+				height: imageAttrs.cropInfo.height / actualScale
+			});
+			internalImage.width(imageAttrs.cropSize.width);
+			internalImage.height(imageAttrs.cropSize.height);
+			this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
+		}
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+			internalImage.width(imageAttrs.uncroppedImage.width);
+			internalImage.height(imageAttrs.uncroppedImage.height);
+			internalImage.rotation(0);
+			internalImage.scaleX(1);
+			internalImage.scaleY(1);
+			internalImage.crop(void 0);
+			internalImage.width(imageAttrs.uncroppedImage.width);
+			internalImage.height(imageAttrs.uncroppedImage.height);
+			this.cachedCropInfo[imageAttrs.id ?? ""] = void 0;
+		}
+	}
 	getImageToolAction() {
 		const imageToolAction = this.instance.getActionHandler("imageTool");
 		if (!imageToolAction) throw new Error("Image Tool action not found");
@@ -20201,41 +20388,45 @@ var WeaveFrameNode = class extends WeaveNode {
 		nodeInstance.setAttrs({ ...newProps });
 		const selectorArea = frameNode.findOne(`#${id}-selector-area`);
 		if (selectorArea) {
+			const width = nextProps.width ? nextProps.width : nextProps.frameWidth;
+			const height = nextProps.height ? nextProps.height : nextProps.frameHeight;
 			selectorArea.setAttrs({
 				x: 0,
 				y: 0,
-				width: nextProps.width,
-				height: nextProps.height
+				width,
+				height
 			});
 			const frameInternalGroup = frameNode.findOne(`#${id}-selector`);
 			if (frameInternalGroup) frameInternalGroup.setAttrs({
 				x: 0,
 				y: 0,
-				width: nextProps.width * selectorArea.scaleX(),
-				height: nextProps.height * selectorArea.scaleY()
+				width: width * selectorArea.scaleX(),
+				height: height * selectorArea.scaleY()
 			});
 			const background = frameNode.findOne(`#${id}-bg`);
 			if (background) background.setAttrs({
 				x: 0,
 				y: 0,
-				width: nextProps.width * selectorArea.scaleX(),
-				height: nextProps.height * selectorArea.scaleY()
+				width: width * selectorArea.scaleX(),
+				height: height * selectorArea.scaleY()
 			});
 			const text = frameNode.findOne(`#${id}-title`);
 			if (text) text.setAttrs({
 				x: 0,
 				y: -titleHeight,
 				text: nextProps.title,
-				width: nextProps.width * selectorArea.scaleX()
+				width: width * selectorArea.scaleX()
 			});
 			const frameInternal = frameNode.findOne(`#${id}-group-internal`);
 			if (frameInternal) frameInternal.setAttrs({
 				x: 0,
 				y: titleHeight,
-				width: nextProps.width * selectorArea.scaleX(),
-				height: nextProps.height * selectorArea.scaleY()
+				width: width * selectorArea.scaleX(),
+				height: height * selectorArea.scaleY()
 			});
 		}
+		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
 	}
 	serialize(instance) {
 		const stage = this.instance.getStage();
@@ -22194,6 +22385,7 @@ var WeaveConnectedUsersPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/plugins/users-selection/users-selection.ts
 var WeaveUsersSelectionPlugin = class extends WeavePlugin {
+	padding = 1;
 	constructor(params) {
 		super();
 		const { config } = params;
@@ -22311,17 +22503,15 @@ var WeaveUsersSelectionPlugin = class extends WeavePlugin {
 				id: `selector_${userSelector.actualNodes.user}`,
 				x: selectionRect.x,
 				y: selectionRect.y,
-				width: selectionRect.width / stage.scaleX(),
-				height: selectionRect.height / stage.scaleY(),
 				listening: false
 			});
 			userSelectorNode.moveToBottom();
 			const userSelectorRect = new Konva.Rect({
-				x: 0,
-				y: 0,
+				x: -this.padding / stage.scaleX(),
+				y: -this.padding / stage.scaleY(),
 				id: `selector_${userSelector.actualNodes.user}_rect`,
-				width: selectionRect.width / stage.scaleX(),
-				height: selectionRect.height / stage.scaleY(),
+				width: (selectionRect.width + 2 * this.padding) / stage.scaleX(),
+				height: (selectionRect.height + 2 * this.padding) / stage.scaleY(),
 				fill: "transparent",
 				stroke: this.stringToColor(userSelector.actualNodes.user),
 				strokeWidth: 3,