@inditextech/weave-sdk 2.21.1 → 2.23.0

package/dist/sdk.js

@@ -17911,7 +17911,10 @@ const getPositionRelativeToContainerOnPosition = (instance) => {
 	let position = instance.getStage().getRelativePointerPosition();
 	if (!position) return position;
 	const container = containerOverCursor(instance, [], position);
-	if (container) position = container?.getRelativePointerPosition();
+	if (container) if (container.getAttrs().containerId) {
+		const containerNode = container.findOne(`#${container.getAttrs().containerId}`);
+		if (containerNode) position = containerNode?.getRelativePointerPosition();
+	} else position = container?.getRelativePointerPosition();
 	if (!position) return position;
 	return position;
 };
@@ -18649,12 +18652,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.isCtrlMetaPressed = false;
 		this.isSpaceKeyPressed = false;
 		this.isDoubleTap = false;
-		this.tapStart = {
-			x: 0,
-			y: 0,
-			time: 0
-		};
-		this.lastTapTime = 0;
+		this.tapStart = null;
+		this.previousTap = null;
 		this.active = false;
 		this.didMove = false;
 		this.selecting = false;
@@ -18662,6 +18661,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		this.enabled = false;
 		this.pointers = {};
 		this.panLoopId = null;
+		this.tapTimeoutId = null;
 	}
 	getName() {
 		return WEAVE_NODES_SELECTION_KEY;
@@ -19002,9 +19002,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 			this.active = true;
 		});
-		this.instance.addEventListener("onStateChange", () => {
-			this.triggerSelectedNodesEvent();
-		});
 		this.instance.addEventListener("onNodeRemoved", (node) => {
 			const selectedNodes = this.getSelectedNodes();
 			const newSelectedNodes = selectedNodes.filter((actNode) => {
@@ -19052,14 +19049,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			return handler?.serialize(node);
 		}).filter((node) => typeof node !== "undefined");
 		this.instance.removeNodes(mappedSelectedNodes);
-		this.tr.nodes([]);
+		this.selectNone();
 		this.triggerSelectedNodesEvent();
 	}
 	updateSelectionRect() {
 		const stage = this.instance.getStage();
 		this.x2 = stage.getRelativePointerPosition()?.x ?? 0;
 		this.y2 = stage.getRelativePointerPosition()?.y ?? 0;
-		this.getTransformer().nodes([]);
+		this.selectNone();
 		this.selectionRectangle.setAttrs({
 			visible: true,
 			x: Math.min(this.x1, this.x2),
@@ -19132,6 +19129,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (this.isAreaSelecting()) this.panLoopId = requestAnimationFrame(() => this.panLoop());
 	}
 	setTapStart(e) {
+		this.taps = this.taps + 1;
 		this.tapStart = {
 			x: e.evt.clientX,
 			y: e.evt.clientY,
@@ -19157,28 +19155,22 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		return true;
 	}
 	checkDoubleTap(e) {
-		if (!this.tapStart) return;
+		if (!this.previousTap) return;
 		const now$2 = performance.now();
-		const dx = e.evt.clientX - this.tapStart.x;
-		const dy = e.evt.clientY - this.tapStart.y;
+		const dx = e.evt.clientX - this.previousTap.x;
+		const dy = e.evt.clientY - this.previousTap.y;
 		const dist = Math.hypot(dx, dy);
 		const DOUBLE_TAP_DISTANCE = 10;
 		const DOUBLE_TAP_TIME = 300;
-		this.isDoubleTap = false;
-		if (this.taps >= 1 && now$2 - this.lastTapTime < DOUBLE_TAP_TIME && dist < DOUBLE_TAP_DISTANCE) {
+		if (this.tapTimeoutId) clearTimeout(this.tapTimeoutId);
+		this.tapTimeoutId = setTimeout(() => {
 			this.taps = 0;
-			this.lastTapTime = 0;
-			this.tapStart = {
-				x: 0,
-				y: 0,
-				time: 0
-			};
+			this.tapStart = null;
+		}, DOUBLE_TAP_TIME + 5);
+		if (this.taps > 1 && now$2 - this.previousTap.time < DOUBLE_TAP_TIME && dist < DOUBLE_TAP_DISTANCE) {
+			this.taps = 0;
+			this.tapStart = null;
 			this.isDoubleTap = true;
-		} else {
-			this.setTapStart(e);
-			this.taps = this.taps + 1;
-			this.lastTapTime = now$2;
-			this.isDoubleTap = false;
 		}
 	}
 	hideSelectorArea() {
@@ -19258,7 +19250,7 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				const nodesSelected = this.tr.nodes();
 				for (const node of nodesSelected) node.fire("onSelectionCleared", { bubbles: true });
 			}
-			this.tr.nodes([]);
+			this.selectNone();
 			this.instance.emitEvent("onSelectionState", true);
 			this.panLoopId = requestAnimationFrame(() => this.panLoop());
 		});
@@ -19288,6 +19280,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			const moved = this.checkMoved(e);
 			this.checkDoubleTap(e);
 			delete this.pointers[e.evt.pointerId];
+			this.previousTap = this.tapStart;
+			if (stage.mode() !== WEAVE_STAGE_DEFAULT_MODE) return;
 			if (stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 				this.getNodesEdgeSnappingPlugin()?.cleanupGuidelines();
 				this.getNodesDistanceSnappingPlugin()?.cleanupGuidelines();
@@ -19303,13 +19297,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			}
 			this.instance.emitEvent("onSelectionState", false);
 			if (this.isDoubleTap) {
-				this.taps = 0;
-				this.lastTapTime = 0;
-				this.tapStart = {
-					x: 0,
-					y: 0,
-					time: 0
-				};
 				this.hideSelectorArea();
 				this.handleClickOrTap(e);
 				return;
@@ -19404,6 +19391,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		}
 	}
 	syncSelection() {
+		const stageMode = this.instance.getStage().mode();
+		if (![WEAVE_STAGE_DEFAULT_MODE].includes(stageMode)) return;
 		const newSelectedNodes = [];
 		const actualSelectedNodes = this.tr.nodes();
 		for (const node of actualSelectedNodes) {
@@ -19437,15 +19426,15 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		if (e.evt.pointerType === "mouse" && e.evt.button && e.evt.button !== 0) return;
 		let areNodesSelected = false;
 		let nodeTargeted = selectedGroup && !(selectedGroup.getAttrs().active ?? false) ? selectedGroup : e.target;
-		if (nodeTargeted.getParent() instanceof Konva.Transformer) {
-			const mousePos = stage.getPointerPosition();
-			const intersections = stage.getAllIntersections(mousePos);
-			const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
-			let targetNode = null;
-			if (nodesIntersected.length > 0) targetNode = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
-			if (targetNode && targetNode.getAttrs().nodeType) nodeTargeted = targetNode;
+		if (e.target === this.instance.getStage()) {
+			this.getNodesSelectionFeedbackPlugin()?.cleanupSelectedHalos();
+			return;
+		}
+		nodeTargeted = this.instance.getRealSelectedNode(nodeTargeted);
+		if (!nodeTargeted.getAttrs().nodeType) {
+			this.isDoubleTap = false;
+			return;
 		}
-		if (!nodeTargeted.getAttrs().nodeType) return;
 		const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
 		const nodeSelectedIndex = this.tr.nodes().findIndex((node) => {
 			return node.getAttrs().id === nodeTargeted.getAttrs().id;
@@ -20755,19 +20744,7 @@ var WeaveNode = class {
 		};
 	}
 	getRealSelectedNode(nodeTarget) {
-		const stage = this.instance.getStage();
-		let realNodeTarget = nodeTarget;
-		if (nodeTarget.getParent() instanceof Konva.Transformer) {
-			const mousePos = stage.getPointerPosition();
-			const intersections = stage.getAllIntersections(mousePos);
-			const nodesIntersected = intersections.filter((ele) => ele.getAttrs().nodeType);
-			if (nodesIntersected.length > 0) realNodeTarget = this.instance.getInstanceRecursive(nodesIntersected[nodesIntersected.length - 1]);
-		}
-		if (realNodeTarget.getAttrs().nodeId) {
-			const realNode = stage.findOne(`#${realNodeTarget.getAttrs().nodeId}`);
-			if (realNode) realNodeTarget = realNode;
-		}
-		return realNodeTarget;
+		return this.instance.getRealSelectedNode(nodeTarget);
 	}
 	getNodesSelectionFeedbackPlugin() {
 		const selectionFeedbackPlugin = this.instance.getPlugin(WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY);
@@ -21637,6 +21614,26 @@ var WeaveTargetingManager = class {
 			container
 		};
 	}
+	getRealSelectedNode = (nodeTarget) => {
+		const stage = this.instance.getStage();
+		let realNodeTarget = nodeTarget;
+		if (nodeTarget.getParent() instanceof Konva.Transformer) {
+			const mousePos = stage.getPointerPosition();
+			const transformerLayer = nodeTarget.getParent()?.getParent();
+			transformerLayer?.listening(false);
+			const nodeIntersected = stage.getIntersection(mousePos ?? {
+				x: 0,
+				y: 0
+			});
+			transformerLayer?.listening(true);
+			if (nodeIntersected) realNodeTarget = nodeIntersected;
+		}
+		if (realNodeTarget.getAttrs().nodeId) {
+			const realNode = stage.findOne(`#${realNodeTarget.getAttrs().nodeId}`);
+			if (realNode) realNodeTarget = realNode;
+		}
+		return realNodeTarget;
+	};
 };
 
 //#endregion
@@ -22171,7 +22168,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.21.1";
+var version = "2.23.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -23563,6 +23560,9 @@ var Weave = class {
 			selectionPlugin.setSelectedNodes(instanceNodes);
 		}
 	}
+	getRealSelectedNode = (nodeTarget) => {
+		return this.targetingManager.getRealSelectedNode(nodeTarget);
+	};
 	getCloningManager() {
 		return this.cloningManager;
 	}
@@ -23770,7 +23770,10 @@ var WeaveStageNode = class extends WeaveNode {
 	isCmdCtrlPressed = false;
 	globalEventsInitialized = false;
 	onRender(props) {
-		const stage = new Konva.Stage({ ...props });
+		const stage = new Konva.Stage({
+			...props,
+			mode: "default"
+		});
 		setupUpscaleStage(this.instance, stage);
 		this.wheelMousePressed = false;
 		stage.isFocused = () => this.stageFocused;
@@ -24497,6 +24500,11 @@ var WeaveLineNode = class extends WeaveNode {
 //#endregion
 //#region src/nodes/text/constants.ts
 const WEAVE_TEXT_NODE_TYPE = "text";
+const WEAVE_STAGE_TEXT_EDITION_MODE = "text-edition";
+const WEAVE_TEXT_NODE_DEFAULT_CONFIG = {
+	transform: { ...WEAVE_NODES_SELECTION_DEFAULT_CONFIG.selection },
+	outline: { enabled: false }
+};
 
 //#endregion
 //#region src/actions/text-tool/constants.ts
@@ -24523,7 +24531,7 @@ var WeaveTextNode = class extends WeaveNode {
 	constructor(params) {
 		super();
 		const { config } = params ?? {};
-		this.config = { transform: { ...config?.transform } };
+		this.config = (0, import_lodash.merge)({}, WEAVE_TEXT_NODE_DEFAULT_CONFIG, config);
 		this.keyPressHandler = void 0;
 		this.editing = false;
 		this.textArea = null;
@@ -24558,7 +24566,14 @@ var WeaveTextNode = class extends WeaveNode {
 	onRender(props) {
 		const text = new Konva.Text({
 			...props,
-			name: "node"
+			name: "node",
+			...!this.config.outline.enabled && { strokeEnabled: false },
+			...this.config.outline.enabled && {
+				strokeEnabled: true,
+				stroke: this.config.outline.color,
+				strokeWidth: this.config.outline.width,
+				fillAfterStrokeEnabled: true
+			}
 		});
 		this.setupDefaultNodeAugmentation(text);
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
@@ -24607,13 +24622,7 @@ var WeaveTextNode = class extends WeaveNode {
 		text.dblClick = () => {
 			if (this.editing) return;
 			if (!(this.isSelecting() && this.isNodeSelected(text))) return;
-			const stage = this.instance.getStage();
-			const mousePos = stage.getPointerPosition();
-			if (mousePos) {
-				const elements = stage.getAllIntersections(mousePos);
-				const onlyTextElements = elements.filter((ele) => ele.getAttrs().nodeType === WEAVE_TEXT_NODE_TYPE);
-				if (onlyTextElements.length > 0) this.triggerEditMode(onlyTextElements[0]);
-			}
+			this.triggerEditMode(text);
 		};
 		text.on("transform", (e) => {
 			if (this.isSelecting() && this.isNodeSelected(text)) {
@@ -24645,7 +24654,16 @@ var WeaveTextNode = class extends WeaveNode {
 		const actualLineHeight = nodeInstance.getAttrs().lineHeight;
 		let updateNeeded = false;
 		if (actualFontFamily !== nextProps.fontFamily || actualFontSize !== nextProps.fontSize || actualFontStyle !== nextProps.fontStyle || actualFontVariant !== nextProps.fontVariant || actualTextDecoration !== nextProps.textDecoration || actualLineHeight !== nextProps.lineHeight) updateNeeded = true;
-		nodeInstance.setAttrs({ ...nextProps });
+		nodeInstance.setAttrs({
+			...nextProps,
+			...!this.config.outline.enabled && { strokeEnabled: false },
+			...this.config.outline.enabled && {
+				strokeEnabled: true,
+				stroke: this.config.outline.color,
+				strokeWidth: this.config.outline.width,
+				fillAfterStrokeEnabled: true
+			}
+		});
 		let width = nextProps.width;
 		let height = nextProps.height;
 		if (nextProps.layout === TEXT_LAYOUT.AUTO_ALL) {
@@ -24664,10 +24682,12 @@ var WeaveTextNode = class extends WeaveNode {
 		});
 		if (updateNeeded) this.instance.updateNode(this.serialize(nodeInstance));
 		if (this.editing) this.updateTextAreaDOM(nodeInstance);
-		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (nodesSelectionPlugin) {
-			const actualSelectedNodes = nodesSelectionPlugin.getSelectedNodes();
-			nodesSelectionPlugin.setSelectedNodes(actualSelectedNodes);
+		if (!this.editing) {
+			const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
+			if (nodesSelectionPlugin) {
+				const actualSelectedNodes = nodesSelectionPlugin.getSelectedNodes();
+				nodesSelectionPlugin.setSelectedNodes(actualSelectedNodes);
+			}
 		}
 	}
 	serialize(instance) {
@@ -24842,6 +24862,7 @@ var WeaveTextNode = class extends WeaveNode {
 			textNode.visible(true);
 			this.instance.updateNode(this.serialize(textNode));
 		};
+		const throttledUpdateTextNode = (0, import_lodash.throttle)(updateTextNode, 300);
 		this.textArea.onfocus = () => {
 			this.textAreaDomResize(textNode);
 		};
@@ -24853,11 +24874,11 @@ var WeaveTextNode = class extends WeaveNode {
 		};
 		this.textArea.onpaste = () => {
 			this.textAreaDomResize(textNode);
-			updateTextNode();
+			throttledUpdateTextNode();
 		};
 		this.textArea.oninput = () => {
 			this.textAreaDomResize(textNode);
-			updateTextNode();
+			throttledUpdateTextNode();
 		};
 		this.textAreaSuperContainer.addEventListener("scroll", () => {
 			if (this.textAreaSuperContainer) {
@@ -24946,14 +24967,13 @@ var WeaveTextNode = class extends WeaveNode {
 				this.textArea.removeEventListener("keydown", handleKeyDown);
 				this.textArea.removeEventListener("keyup", handleKeyUp);
 				window.removeEventListener("pointerup", handleOutsideClick);
-				window.removeEventListener("pointerdown", handleOutsideClick);
 				return;
 			}
 		};
 		setTimeout(() => {
 			window.addEventListener("pointerup", handleOutsideClick);
-			window.addEventListener("pointerdown", handleOutsideClick);
 		}, 0);
+		this.instance.getStage().mode(WEAVE_STAGE_TEXT_EDITION_MODE);
 		this.editing = true;
 	}
 	updateTextAreaDOM(textNode) {
@@ -24987,6 +25007,7 @@ var WeaveTextNode = class extends WeaveNode {
 	}
 	removeTextAreaDOM(textNode) {
 		this.instance.releaseMutexLock();
+		this.instance.getStage().mode(WEAVE_STAGE_DEFAULT_MODE);
 		this.editing = false;
 		const stage = this.instance.getStage();
 		delete window.weaveTextEditing[textNode.id()];
@@ -24996,11 +25017,7 @@ var WeaveTextNode = class extends WeaveNode {
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
 		if (selectionPlugin) {
 			this.instance.enablePlugin("nodesSelection");
-			const tr = selectionPlugin.getTransformer();
-			if (tr) {
-				tr.nodes([textNode]);
-				tr.show();
-			}
+			selectionPlugin.setSelectedNodes([textNode]);
 			this.instance.triggerAction(SELECTION_TOOL_ACTION_NAME);
 		}
 		stage.container().tabIndex = 1;
@@ -25042,6 +25059,7 @@ var WeaveTextNode = class extends WeaveNode {
 //#endregion
 //#region src/nodes/image/constants.ts
 const WEAVE_IMAGE_NODE_TYPE = "image";
+const WEAVE_STAGE_IMAGE_CROPPING_MODE = "image-cropping";
 const WEAVE_IMAGE_CROP_END_TYPE = {
 	["ACCEPT"]: "accept",
 	["CANCEL"]: "cancel"
@@ -25651,13 +25669,13 @@ var WeaveImageNode = class extends WeaveNode {
 	triggerCrop(imageNode, options) {
 		const stage = this.instance.getStage();
 		if (imageNode.getAttrs().cropping ?? false) return;
-		if (!(this.isSelecting() && this.isNodeSelected(imageNode)) && !options.cmdCtrl.triggered) return;
+		if (!(this.isSelecting() && this.isNodeSelected(imageNode))) return;
 		const lockAcquired = this.instance.setMutexLock({
 			nodeIds: [imageNode.id()],
 			operation: "image-crop"
 		});
 		if (!lockAcquired) return;
-		stage.mode("cropping");
+		stage.mode(WEAVE_STAGE_IMAGE_CROPPING_MODE);
 		const image = stage.findOne(`#${imageNode.getAttrs().id}`);
 		const internalImage = image?.findOne(`#${image.getAttrs().id}-image`);
 		const cropGroup = image?.findOne(`#${image.getAttrs().id}-cropGroup`);
@@ -25806,17 +25824,23 @@ var WeaveImageNode = class extends WeaveNode {
 				image: imageSource,
 				visible: true
 			});
+			let sourceImageWidth = this.imageSource[id].width;
+			let sourceImageHeight = this.imageSource[id].height;
+			if (image.getAttrs().imageInfo) {
+				sourceImageWidth = image.getAttrs().imageInfo.width;
+				sourceImageHeight = image.getAttrs().imageInfo.height;
+			}
 			image.setAttr("imageInfo", {
-				width: this.imageSource[id].width,
-				height: this.imageSource[id].height
+				width: sourceImageWidth,
+				height: sourceImageHeight
 			});
 			internalImage.setAttr("imageInfo", {
-				width: this.imageSource[id].width,
-				height: this.imageSource[id].height
+				width: sourceImageWidth,
+				height: sourceImageHeight
 			});
 			if (!image.getAttrs().uncroppedImage) image.setAttr("uncroppedImage", {
-				width: this.imageSource[id].width,
-				height: this.imageSource[id].height
+				width: sourceImageWidth,
+				height: sourceImageHeight
 			});
 			this.imageState[id] = {
 				loaded: true,
@@ -26132,8 +26156,7 @@ var WeaveImageNode = class extends WeaveNode {
 		}
 		this.cacheNode(nodeInstance);
 	}
-	preloadImage(imageId, imageURL, { node, onLoad, onError }) {
-		const realImageURL = this.config.urlTransformer?.(imageURL ?? "", node) ?? imageURL;
+	preloadImage(imageId, imageURL, { onLoad, onError }) {
 		this.imageSource[imageId] = Konva.Util.createImageElement();
 		this.imageSource[imageId].crossOrigin = this.config.crossOrigin;
 		this.imageSource[imageId].onerror = (error) => {
@@ -26157,7 +26180,7 @@ var WeaveImageNode = class extends WeaveNode {
 			error: false
 		};
 		try {
-			if (realImageURL) this.imageSource[imageId].src = realImageURL;
+			if (imageURL) this.imageSource[imageId].src = imageURL;
 		} catch (ex) {
 			console.error(ex);
 		}
@@ -26170,7 +26193,6 @@ var WeaveImageNode = class extends WeaveNode {
 		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "", image) ?? imageProps.imageURL;
 		this.loadAsyncElement(id);
 		this.preloadImage(id, realImageURL ?? "", {
-			node: image,
 			onLoad: () => {
 				if (image && imagePlaceholder && internalImage) {
 					image.setAttrs({
@@ -26185,14 +26207,20 @@ var WeaveImageNode = class extends WeaveNode {
 						image: imageSource,
 						visible: true
 					});
+					let sourceImageWidth = this.imageSource[id].width;
+					let sourceImageHeight = this.imageSource[id].height;
+					if (image.getAttrs().imageInfo) {
+						sourceImageWidth = image.getAttrs().imageInfo.width;
+						sourceImageHeight = image.getAttrs().imageInfo.height;
+					}
 					internalImage.setAttr("imageInfo", {
-						width: this.imageSource[id].width,
-						height: this.imageSource[id].height
+						width: sourceImageWidth,
+						height: sourceImageHeight
 					});
 					internalImage.zIndex(0);
 					image.setAttr("imageInfo", {
-						width: this.imageSource[id].width,
-						height: this.imageSource[id].height
+						width: sourceImageWidth,
+						height: sourceImageHeight
 					});
 					const imageRect = image.getClientRect({ relativeTo: this.instance.getStage() });
 					if (!imageProps.cropInfo && !imageProps.uncroppedImage) image.setAttr("uncroppedImage", {
@@ -26253,6 +26281,9 @@ var WeaveImageNode = class extends WeaveNode {
 		const internalImage = image?.findOne(`#${imageAttrs.id}-image`);
 		if (!this.imageState[imageAttrs.id ?? ""]?.loaded) return;
 		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo && imageAttrs.uncroppedImage) {
+			const originalImageInfo = imageAttrs.imageInfo;
+			const actualImageInfo = this.imageSource[imageAttrs.id ?? ""];
+			const originalActualDiffScale = originalImageInfo ? actualImageInfo.width / originalImageInfo.width : 1;
 			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
 			internalImage.width(imageAttrs.uncroppedImage.width);
@@ -26261,10 +26292,10 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage.scaleX(1);
 			internalImage.scaleY(1);
 			internalImage.crop({
-				x: imageAttrs.cropInfo.x / cropScale,
-				y: imageAttrs.cropInfo.y / cropScale,
-				width: imageAttrs.cropInfo.width / cropScale,
-				height: imageAttrs.cropInfo.height / cropScale
+				x: imageAttrs.cropInfo.x / cropScale * originalActualDiffScale,
+				y: imageAttrs.cropInfo.y / cropScale * originalActualDiffScale,
+				width: imageAttrs.cropInfo.width / cropScale * originalActualDiffScale,
+				height: imageAttrs.cropInfo.height / cropScale * originalActualDiffScale
 			});
 			internalImage.width(imageAttrs.cropSize.width * (actualScale / cropScale));
 			internalImage.height(imageAttrs.cropSize.height * (actualScale / cropScale));
@@ -34359,7 +34390,6 @@ var WeaveStrokeToolAction = class extends WeaveAction {
 					hitStrokeWidth: 16
 				});
 				delete finalLine.props.dragBoundFunc;
-				console.log("node", finalLine);
 				this.instance.addNode(finalLine, this.container?.getAttrs().id);
 				this.instance.emitEvent("onAddedStroke", { actionName: this.instance.getActiveAction() ?? WEAVE_STROKE_TOOL_ACTION_NAME });
 				nodeCreated = true;
@@ -38818,5 +38848,5 @@ function getJSONFromYjsBinary(actualState) {
 }
 
 //#endregion
-export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
+export { ALIGN_NODES_ALIGN_TO, ALIGN_NODES_TOOL_ACTION_NAME, ALIGN_NODES_TOOL_STATE, ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_TOOL_DEFAULT_CONFIG, BRUSH_TOOL_STATE, CONNECTOR_TOOL_ACTION_NAME, CONNECTOR_TOOL_DEFAULT_CONFIG, CONNECTOR_TOOL_STATE, COPY_PASTE_NODES_PLUGIN_STATE, ELLIPSE_TOOL_ACTION_NAME, ELLIPSE_TOOL_STATE, ERASER_TOOL_ACTION_NAME, ERASER_TOOL_STATE, FRAME_TOOL_ACTION_NAME, FRAME_TOOL_STATE, GUIDE_DISTANCE_LINE_DEFAULT_CONFIG, GUIDE_ENTER_SNAPPING_TOLERANCE, GUIDE_EXIT_SNAPPING_TOLERANCE, GUIDE_HORIZONTAL_LINE_NAME, GUIDE_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, GUIDE_VERTICAL_LINE_NAME, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, LINE_TOOL_ACTION_NAME, LINE_TOOL_DEFAULT_CONFIG, LINE_TOOL_STATE, MEASURE_TOOL_ACTION_NAME, MEASURE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, NODE_SNAP_HORIZONTAL, NODE_SNAP_VERTICAL, PEN_TOOL_ACTION_NAME, PEN_TOOL_STATE, RECTANGLE_TOOL_ACTION_NAME, RECTANGLE_TOOL_STATE, REGULAR_POLYGON_TOOL_ACTION_NAME, REGULAR_POLYGON_TOOL_STATE, SELECTION_TOOL_ACTION_NAME, SELECTION_TOOL_STATE, STAGE_MINIMAP_DEFAULT_CONFIG, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, VIDEO_TOOL_ACTION_NAME, VIDEO_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COMMENTS_RENDERER_KEY, WEAVE_COMMENTS_TOOL_LAYER_ID, WEAVE_COMMENT_CREATE_ACTION, WEAVE_COMMENT_NODE_ACTION, WEAVE_COMMENT_NODE_DEFAULTS, WEAVE_COMMENT_NODE_TYPE, WEAVE_COMMENT_STATUS, WEAVE_COMMENT_TOOL_ACTION_NAME, WEAVE_COMMENT_TOOL_DEFAULT_CONFIG, WEAVE_COMMENT_TOOL_STATE, WEAVE_COMMENT_VIEW_ACTION, WEAVE_CONNECTOR_NODE_ANCHOR_ORIGIN, WEAVE_CONNECTOR_NODE_DECORATOR_TYPE, WEAVE_CONNECTOR_NODE_DEFAULT_CONFIG, WEAVE_CONNECTOR_NODE_LINE_ORIGIN, WEAVE_CONNECTOR_NODE_LINE_TYPE, WEAVE_CONNECTOR_NODE_TYPE, WEAVE_COPY_PASTE_CONFIG_DEFAULT, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_COPY_PASTE_PASTE_CATCHER_ID, WEAVE_COPY_PASTE_PASTE_MODES, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_DEFAULT_BACKGROUND_COLOR, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_DOT_MAX_DOTS_PER_AXIS, WEAVE_GRID_DEFAULT_MAJOR_DOT_RATIO, WEAVE_GRID_DEFAULT_MAJOR_EVERY, WEAVE_GRID_DEFAULT_MAJOR_LINE_RATIO, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_RADIUS, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_STROKE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_ANCHOR_POSITION, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_DEFAULT_CONFIG, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_DEFAULT_CONFIG, WEAVE_LINE_NODE_TYPE, WEAVE_MEASURE_NODE_DEFAULT_CONFIG, WEAVE_MEASURE_NODE_TYPE, WEAVE_MEASURE_TOOL_DEFAULT_CONFIG, WEAVE_NODES_DISTANCE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_EDGE_SNAPPING_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_DEFAULT_CONFIG, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_KEY, WEAVE_NODES_MULTI_SELECTION_FEEDBACK_PLUGIN_LAYER_ID, WEAVE_NODES_SELECTION_DEFAULT_CONFIG, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_DEFAULT_MODE, WEAVE_STAGE_GRID_PLUGIN_KEY, WEAVE_STAGE_IMAGE_CROPPING_MODE, WEAVE_STAGE_KEYBOARD_MOVE_DEFAULT_CONFIG, WEAVE_STAGE_KEYBOARD_MOVE_KEY, WEAVE_STAGE_MINIMAP_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAGE_PANNING_DEFAULT_CONFIG, WEAVE_STAGE_PANNING_KEY, WEAVE_STAGE_PANNING_THROTTLE_MS, WEAVE_STAGE_TEXT_EDITION_MODE, WEAVE_STAR_NODE_TYPE, WEAVE_STROKE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_NODE_TYPE, WEAVE_STROKE_SINGLE_NODE_DEFAULT_CONFIG, WEAVE_STROKE_SINGLE_NODE_TIP_SIDE, WEAVE_STROKE_SINGLE_NODE_TIP_TYPE, WEAVE_STROKE_SINGLE_NODE_TYPE, WEAVE_STROKE_TOOL_ACTION_NAME, WEAVE_STROKE_TOOL_ACTION_NAME_ALIASES, WEAVE_STROKE_TOOL_DEFAULT_CONFIG, WEAVE_STROKE_TOOL_STATE, WEAVE_TEXT_NODE_DEFAULT_CONFIG, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_CONFIG_DEFAULT_PROPS, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_PRESENCE_CONFIG_DEFAULT_PROPS, WEAVE_USERS_PRESENCE_PLUGIN_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTER_KEY, WEAVE_USER_PRESENCE_KEY, WEAVE_USER_SELECTION_KEY, WEAVE_VIDEO_DEFAULT_CONFIG, WEAVE_VIDEO_NODE_TYPE, Weave, WeaveAction, WeaveAlignNodesToolAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveCommentNode, WeaveCommentToolAction, WeaveCommentsRendererPlugin, WeaveConnectedUsersPlugin, WeaveConnectorNode, WeaveConnectorToolAction, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodesToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveLineToolAction, WeaveMeasureNode, WeaveMeasureToolAction, WeaveMoveToolAction, WeaveNode, WeaveNodesDistanceSnappingPlugin, WeaveNodesEdgeSnappingPlugin, WeaveNodesMultiSelectionFeedbackPlugin, WeaveNodesSelectionPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageKeyboardMovePlugin, WeaveStageMinimapPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveStrokeNode, WeaveStrokeSingleNode, WeaveStrokeToolAction, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersPresencePlugin, WeaveUsersSelectionPlugin, WeaveVideoNode, WeaveVideoToolAction, WeaveZoomInToolAction, WeaveZoomOutToolAction, canComposite, clearContainerTargets, containerOverCursor, containsNodeDeep, defaultInitialState, getBoundingBox, getExportBoundingBox, getJSONFromYjsBinary, getPositionRelativeToContainerOnPosition, getSelectedNodesMetadata, getStageClickPoint, getTargetAndSkipNodes, getTargetedNode, getTopmostShadowHost, getVisibleNodes, getVisibleNodesInViewport, hasFrames, hasImages, intersectArrays, isArray, isIOS, isInShadowDOM, isNodeInSelection, isObject, isServer, mapJsonToYjsArray, mapJsonToYjsElements, mapJsonToYjsMap, memoize, mergeExceptArrays, moveNodeToContainer, resetScale, weavejsToYjsBinary };
 //# sourceMappingURL=sdk.js.map