@inditextech/weave-sdk 0.76.0 → 0.76.2

package/dist/sdk.cjs

@@ -19875,7 +19875,8 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 		const tr = new konva.default.Transformer({
 			id: "selectionTransformer",
 			...this.config.selection,
-			listening: true
+			listening: true,
+			shouldOverdrawWholeArea: true
 		});
 		selectionLayer?.add(tr);
 		const trHover = new konva.default.Transformer({
@@ -19922,15 +19923,29 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 			this.enable();
 			if (shape) {
 				const targetNode = this.instance.getInstanceRecursive(shape);
+				if (targetNode && targetNode !== nodeHovered) {
+					this.instance.getStage().handleMouseover();
+					nodeHovered?.handleMouseout();
+					targetNode?.handleMouseover();
+					nodeHovered = targetNode;
+				}
 				targetNode?.handleMouseover();
-				if (targetNode) nodeHovered = targetNode;
 			}
 		});
+		tr.on("mouseover", () => {
+			stage.container().style.cursor = "grab";
+		});
 		tr.on("mouseout", () => {
 			this.instance.getStage().handleMouseover();
-			nodeHovered?.handleMouseout();
 			nodeHovered = void 0;
 		});
+		window.addEventListener("mouseout", () => {
+			if (nodeHovered) {
+				nodeHovered.handleMouseout();
+				nodeHovered = void 0;
+			}
+			this.instance.getStage().handleMouseover();
+		});
 		const handleTransform = (e) => {
 			const moved = this.checkMoved(e);
 			if (moved) this.getContextMenuPlugin()?.cancelLongPressTimer();
@@ -20263,7 +20278,6 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				this.selecting = false;
 				this.stopPanLoop();
 				this.hideSelectorArea();
-				this.handleClickOrTap(e);
 				return;
 			}
 			const isStage = e.target instanceof konva.default.Stage;
@@ -20366,6 +20380,14 @@ var WeaveNodesSelectionPlugin = class extends WeavePlugin {
 				return;
 			}
 			if (contextMenuPlugin?.isContextMenuVisible()) this.stopPanLoop();
+			const selectedGroup = getTargetedNode(this.instance);
+			if (!moved && selectedGroup?.getParent() instanceof konva.default.Transformer) {
+				this.selecting = false;
+				this.stopPanLoop();
+				this.hideSelectorArea();
+				this.handleClickOrTap(e);
+				return;
+			}
 			if (!this.selectionRectangle.visible()) {
 				this.hideSelectorArea();
 				return;
@@ -20717,12 +20739,12 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 		this.createPasteCatcher();
 		const catcher = this.getCatcherElement();
 		window.addEventListener("keydown", async (e) => {
-			if (stage.isFocused() && e.key === "c" && (e.ctrlKey || e.metaKey)) {
+			if (stage.isFocused() && e.code === "KeyC" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
 				await this.performCopy();
 				return;
 			}
-			if (stage.isFocused() && e.key === "v" && (e.ctrlKey || e.metaKey)) {
+			if (stage.isFocused() && e.code === "KeyV" && (e.ctrlKey || e.metaKey)) {
 				this.focusPasteCatcher();
 				if (!this.enabled) return;
 			}
@@ -21295,6 +21317,9 @@ var WeaveNode = class {
 			node.handleMouseover = () => {
 				this.handleMouseOver(node);
 			};
+			node.handleMouseout = () => {
+				this.handleMouseout(node);
+			};
 			node.on("pointerover", (e) => {
 				const doCancelBubble = this.handleMouseOver(e.target);
 				if (doCancelBubble) e.cancelBubble = true;
@@ -21309,34 +21334,39 @@ var WeaveNode = class {
 		const isTargetable = node.getAttrs().isTargetable !== false;
 		const isLocked = node.getAttrs().locked ?? false;
 		if ([MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) return false;
+		let showHover = false;
 		let cancelBubble = false;
-		if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(node) && !this.isPasting() && isLocked) {
+		if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isLocked) {
 			const stage$1 = this.instance.getStage();
 			stage$1.container().style.cursor = "default";
 			cancelBubble = true;
 		}
-		if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(node) && !this.isPasting() && isTargetable && !isLocked && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+		if (isNodeSelectionEnabled && this.isSelecting() && !this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 			const stage$1 = this.instance.getStage();
-			this.setHoverState(realNode);
+			showHover = true;
 			stage$1.container().style.cursor = "pointer";
 			cancelBubble = true;
 		}
-		if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(node) && !this.isPasting() && isTargetable && !isLocked && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
+		if (isNodeSelectionEnabled && this.isSelecting() && this.isNodeSelected(realNode) && !this.isPasting() && isTargetable && !isLocked && stage.mode() === WEAVE_STAGE_DEFAULT_MODE) {
 			const stage$1 = this.instance.getStage();
+			showHover = true;
 			stage$1.container().style.cursor = "grab";
 			cancelBubble = true;
 		}
-		if (!isTargetable) {
-			this.hideHoverState();
-			cancelBubble = true;
-		}
+		if (!isTargetable) cancelBubble = true;
 		if (this.isPasting()) {
 			const stage$1 = this.instance.getStage();
 			stage$1.container().style.cursor = "crosshair";
 			cancelBubble = true;
 		}
+		if (showHover) this.setHoverState(realNode);
+		else this.hideHoverState();
 		return cancelBubble;
 	}
+	handleMouseout(node) {
+		const realNode = this.instance.getInstanceRecursive(node);
+		if (realNode) this.hideHoverState();
+	}
 	create(key, props) {
 		return {
 			key,
@@ -22900,7 +22930,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.76.0";
+var version = "0.76.2";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -23216,6 +23246,17 @@ var WeaveExportManager = class {
 			}
 		});
 	}
+	unpremultiply(data) {
+		for (let i = 0; i < data.length; i += 4) {
+			const a = data[i + 3];
+			if (a && a < 255) {
+				const alpha = a / 255;
+				data[i] = Math.min(255, Math.round(data[i] / alpha));
+				data[i + 1] = Math.min(255, Math.round(data[i + 1] / alpha));
+				data[i + 2] = Math.min(255, Math.round(data[i + 2] / alpha));
+			}
+		}
+	}
 	async exportNodesAsBuffer(nodes, boundingNodes, options) {
 		const { format: format$2 = __inditextech_weave_types.WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = __inditextech_weave_types.WEAVE_EXPORT_BACKGROUND_COLOR } = options;
 		this.getNodesSelectionPlugin()?.disable();
@@ -23274,7 +23315,6 @@ var WeaveExportManager = class {
 			}
 			mainLayer.add(exportGroup);
 			const backgroundRect = background.getClientRect();
-			stage.batchDraw();
 			const composites = [];
 			const imageWidth = Math.round(backgroundRect.width);
 			const imageHeight = Math.round(backgroundRect.height);
@@ -24380,7 +24420,7 @@ var WeaveTextNode = class extends WeaveNode {
 			this.instance.emitEvent("onTransform", null);
 		});
 		if (!this.instance.getConfiguration().serverSide) window.addEventListener("keypress", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === SELECTION_TOOL_ACTION_NAME && !this.editing && e.target !== this.textArea) {
 				e.preventDefault();
 				if (this.isSelecting() && this.isNodeSelected(text)) {
 					const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -24651,7 +24691,7 @@ var WeaveTextNode = class extends WeaveNode {
 			if (!textNode.getAttrs().layout || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_HEIGHT || textNode.getAttrs().layout === TEXT_LAYOUT.AUTO_ALL) textNode.height(this.textArea.scrollHeight * (1 / textNode.getAbsoluteScale().x));
 		};
 		const handleKeyDown = (e) => {
-			if (this.textArea && textNode && e.key === "Escape") {
+			if (this.textArea && textNode && e.code === "Escape") {
 				e.stopPropagation();
 				updateTextNodeSize();
 				textNode.text(this.textArea.value);
@@ -24963,7 +25003,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (!["Enter", "Escape"].includes(e.key)) return;
 		this.cropping = false;
 		this.image.setAttrs({ cropping: false });
-		if (e.key === "Enter") this.handleClipEnd();
+		if (e.code === "Enter") this.handleClipEnd();
 		const stage = this.instance.getStage();
 		this.onClose();
 		const utilityLayer = this.instance.getUtilityLayer();
@@ -25155,7 +25195,6 @@ var WeaveImageNode = class extends WeaveNode {
 		this.lastTapTime = 0;
 		this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
 		this.imageCrop = null;
-		this.cachedCropInfo = {};
 		this.imageLoaded = false;
 	}
 	triggerCrop(imageNode) {
@@ -25194,7 +25233,6 @@ var WeaveImageNode = class extends WeaveNode {
 		if (!internalImage || !cropGroup) return;
 		const imageCrop = new WeaveImageCrop(this.instance, this, imageNode, internalImage, cropGroup);
 		imageCrop.unCrop();
-		this.cachedCropInfo[imageNode.getAttrs().id ?? ""] = void 0;
 	};
 	loadAsyncElement(nodeId) {
 		this.instance.loadAsyncElement(nodeId, "image");
@@ -25225,7 +25263,6 @@ var WeaveImageNode = class extends WeaveNode {
 			const stage = this.instance.getStage();
 			const image$1 = stage.findOne(`#${id}`);
 			if (!image$1) return;
-			this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
 		};
 		image.triggerCrop = () => {
 			this.triggerCrop(image);
@@ -25239,7 +25276,6 @@ var WeaveImageNode = class extends WeaveNode {
 			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;
 		};
 		const defaultTransformerProperties = this.defaultGetTransformerProperties(this.config.transform);
 		image.getTransformerProperties = function() {
@@ -25302,31 +25338,30 @@ var WeaveImageNode = class extends WeaveNode {
 			this.config.onDblClick?.(this, image);
 		};
 		if (this.imageSource[id]) {
-			imagePlaceholder?.setAttrs({
-				width: imageProps.width ? imageProps.width : this.imageSource[id].width,
-				height: imageProps.height ? imageProps.height : this.imageSource[id].height,
-				visible: false
-			});
-			internalImage?.setAttrs({
-				width: imageProps.width ? imageProps.width : this.imageSource[id].width,
-				height: imageProps.height ? imageProps.height : this.imageSource[id].height,
+			imagePlaceholder.destroy();
+			internalImage.setAttrs({
+				width: this.imageSource[id].width,
+				height: this.imageSource[id].height,
 				image: this.imageSource[id],
 				visible: true
 			});
 			this.imageLoaded = true;
-			image.setAttr("width", image.width() ? image.width() : this.imageSource[id].width);
-			image.setAttr("height", image.height() ? image.height() : this.imageSource[id].height);
-			image.setAttr("cropInfo", void 0);
-			image.setAttr("uncroppedImage", {
-				width: image.width() ? image.width() : this.imageSource[id].width,
-				height: image.height() ? image.height() : this.imageSource[id].height
+			image.setAttr("width", this.imageSource[id].width);
+			image.setAttr("height", this.imageSource[id].height);
+			image.setAttr("cropInfo", props.cropInfo ?? void 0);
+			image.setAttr("uncroppedImage", props.uncroppedImage ?? {
+				width: this.imageSource[id].width,
+				height: this.imageSource[id].height
 			});
 			image.setAttr("imageInfo", {
 				width: this.imageSource[id].width,
 				height: this.imageSource[id].height
 			});
 			this.instance.updateNode(this.serialize(image));
-		} else this.loadImage(imageProps, image);
+		} else {
+			this.updatePlaceholderSize(image, imagePlaceholder);
+			this.loadImage(imageProps, image);
+		}
 		image.setAttr("imageURL", imageProps.imageURL);
 		return image;
 	}
@@ -25486,12 +25521,25 @@ var WeaveImageNode = class extends WeaveNode {
 			}
 		});
 	}
+	updatePlaceholderSize(image, imagePlaceholder) {
+		const imageAttrs = image.getAttrs();
+		if (!imageAttrs.adding && imageAttrs.cropInfo) {
+			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
+			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
+			imagePlaceholder.width(imageAttrs.cropSize.width * (actualScale / cropScale));
+			imagePlaceholder.height(imageAttrs.cropSize.height * (actualScale / cropScale));
+		}
+		if (!imageAttrs.adding && !imageAttrs.cropInfo) {
+			imagePlaceholder.width(imageAttrs.uncroppedImage.width);
+			imagePlaceholder.height(imageAttrs.uncroppedImage.height);
+		}
+	}
 	updateImageCrop(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 ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && imageAttrs.cropInfo) {
 			const actualScale = imageAttrs.uncroppedImage.width / imageAttrs.imageInfo.width;
 			const cropScale = imageAttrs.cropInfo ? imageAttrs.cropInfo.scaleX : actualScale;
 			internalImage.width(imageAttrs.uncroppedImage.width);
@@ -25507,9 +25555,8 @@ var WeaveImageNode = class extends WeaveNode {
 			});
 			internalImage.width(imageAttrs.cropSize.width * (actualScale / cropScale));
 			internalImage.height(imageAttrs.cropSize.height * (actualScale / cropScale));
-			this.cachedCropInfo[imageAttrs.id ?? ""] = imageAttrs.cropInfo;
 		}
-		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo && !(0, import_lodash.isEqual)(imageAttrs.cropInfo, this.cachedCropInfo[imageAttrs.id ?? ""])) {
+		if (image && internalImage && !imageAttrs.adding && !imageAttrs.cropInfo) {
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
 			internalImage.rotation(0);
@@ -25518,7 +25565,6 @@ var WeaveImageNode = class extends WeaveNode {
 			internalImage.crop(void 0);
 			internalImage.width(imageAttrs.uncroppedImage.width);
 			internalImage.height(imageAttrs.uncroppedImage.height);
-			this.cachedCropInfo[imageAttrs.id ?? ""] = void 0;
 		}
 	}
 	getImageSource(imageId) {
@@ -26051,7 +26097,7 @@ var WeaveFrameNode = class extends WeaveNode {
 			});
 		}
 		const nodesSelectionPlugin = this.instance.getPlugin("nodesSelection");
-		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer().forceUpdate();
+		if (nodesSelectionPlugin) nodesSelectionPlugin.getTransformer()?.forceUpdate();
 	}
 	serialize(instance) {
 		const stage = this.instance.getStage();
@@ -27369,12 +27415,6 @@ var WeaveVideoNode = class extends WeaveNode {
 				videoProgress?.hide();
 			}
 		};
-		videoGroup.on("mouseover", () => {
-			videoGroup.handleMouseover();
-		});
-		videoGroup.on("mouseout", () => {
-			videoGroup.handleMouseout();
-		});
 		videoGroup.dblClick = () => {
 			if (this.config.style.playPauseOnDblClick && this.videoState[id].loaded && !this.videoState[id].playing) {
 				this.play(id);
@@ -28168,7 +28208,7 @@ var WeaveMoveToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === MOVE_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === MOVE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -28323,7 +28363,7 @@ var WeaveEraserToolAction = class extends WeaveAction {
 			}
 		});
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === ERASER_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === ERASER_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -28421,11 +28461,11 @@ var WeaveRectangleToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === RECTANGLE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -28630,11 +28670,11 @@ var WeaveEllipseToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === ELLIPSE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -28846,11 +28886,11 @@ var WeavePenToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === PEN_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -29098,11 +29138,11 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -29327,7 +29367,7 @@ var WeaveTextToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === TEXT_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === TEXT_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -29479,7 +29519,7 @@ var WeaveImageToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === IMAGE_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -29741,11 +29781,11 @@ var WeaveStarToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === STAR_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -29963,11 +30003,11 @@ var WeaveArrowToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === ARROW_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -30214,11 +30254,11 @@ var WeaveRegularPolygonToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Enter" && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
+			if (e.code === "Enter" && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === REGULAR_POLYGON_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -30415,7 +30455,7 @@ var WeaveFrameToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === FRAME_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === FRAME_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -30972,11 +31012,11 @@ var WeaveCommentToolAction = class extends WeaveAction {
 		window.addEventListener("keydown", (e) => {
 			if (this.instance.getActiveAction() !== WEAVE_COMMENT_TOOL_ACTION_NAME) return;
 			if (commentNodeHandler?.isCommentViewing()) return;
-			if (e.key === "Escape" && this.state == WEAVE_COMMENT_TOOL_STATE.ADDING) {
+			if (e.code === "Escape" && this.state == WEAVE_COMMENT_TOOL_STATE.ADDING) {
 				this.cancelAction();
 				return;
 			}
-			if (e.key === "Escape" && this.state === WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
+			if (e.code === "Escape" && this.state === WEAVE_COMMENT_TOOL_STATE.CREATING_COMMENT) this.setState(WEAVE_COMMENT_TOOL_STATE.ADDING);
 		});
 		stage.on("pointermove", (e) => {
 			if (this.state === WEAVE_COMMENT_TOOL_STATE.IDLE) return;
@@ -31170,7 +31210,7 @@ var WeaveVideoToolAction = class extends WeaveAction {
 	setupEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "Escape" && this.instance.getActiveAction() === VIDEO_TOOL_ACTION_NAME) {
+			if (e.code === "Escape" && this.instance.getActiveAction() === VIDEO_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
@@ -33538,10 +33578,10 @@ var WeaveStageKeyboardMovePlugin = class extends WeavePlugin {
 	}
 	onInit() {
 		window.addEventListener("keydown", (e) => {
-			if (e.key === "ArrowUp" && e.shiftKey) this.handleNodesMovement("up");
-			if (e.key === "ArrowLeft" && e.shiftKey) this.handleNodesMovement("left");
-			if (e.key === "ArrowRight" && e.shiftKey) this.handleNodesMovement("right");
-			if (e.key === "ArrowDown" && e.shiftKey) this.handleNodesMovement("down");
+			if (e.code === "ArrowUp" && e.shiftKey) this.handleNodesMovement("up");
+			if (e.code === "ArrowLeft" && e.shiftKey) this.handleNodesMovement("left");
+			if (e.code === "ArrowRight" && e.shiftKey) this.handleNodesMovement("right");
+			if (e.code === "ArrowDown" && e.shiftKey) this.handleNodesMovement("down");
 		});
 	}
 	enable() {

package/dist/sdk.d.cts

@@ -865,6 +865,7 @@ declare abstract class WeaveNode implements WeaveNodeBase {
   protected hideHoverState(): void;
   setupDefaultNodeEvents(node: Konva.Node): void;
   handleMouseOver(node: Konva.Node): boolean;
+  handleMouseout(node: Konva.Node): void;
   create(key: string, props: WeaveElementAttributes): WeaveStateElement;
   onAdd(nodeInstance: WeaveElementInstance): void;
   abstract onRender(props: WeaveElementAttributes): WeaveElementInstance;
@@ -1477,7 +1478,6 @@ declare class WeaveImageNode extends WeaveNode {
   protected lastTapTime: number;
   protected nodeType: string;
   private imageCrop;
-  private cachedCropInfo;
   private imageLoaded;
   constructor(params?: WeaveImageNodeParams);
   triggerCrop(imageNode: Konva.Group): void;
@@ -1495,6 +1495,7 @@ declare class WeaveImageNode extends WeaveNode {
     onError: (error: string | Event) => void;
   }): void;
   private loadImage;
+  updatePlaceholderSize(image: Konva.Group, imagePlaceholder: Konva.Rect): void;
   updateImageCrop(nextProps: WeaveElementAttributes): void;
   getImageSource(imageId: string): HTMLImageElement | undefined;
   scaleReset(node: Konva.Group): void;