@inditextech/weave-sdk 2.18.0 → 2.19.0

package/dist/sdk.js

@@ -20080,7 +20080,8 @@ var WeaveNode = class {
 	register(instance) {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger(this.getNodeType());
-		this.instance.getChildLogger("node").debug(`Node with type [${this.getNodeType()}] registered`);
+		this.onRegister();
+		this.instance.getChildLogger(`node-${this.getNodeType()}`).debug(`Node with type [${this.getNodeType()}] registered`);
 		return this;
 	}
 	getNodeType() {
@@ -20568,6 +20569,7 @@ var WeaveNode = class {
 			}
 		};
 	}
+	onRegister() {}
 	onAdd(nodeInstance) {}
 	onDestroy(nodeInstance) {
 		nodeInstance.destroy();
@@ -22076,7 +22078,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "2.18.0";
+var version = "2.19.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22769,6 +22771,7 @@ function watchMap(onChange, map = new Map()) {
 //#endregion
 //#region src/managers/async/async.ts
 var WeaveAsyncManager = class {
+	asyncElementsLoadedEventEmitted = false;
 	constructor(instance) {
 		this.instance = instance;
 		this.logger = this.instance.getChildLogger("async-manager");
@@ -22780,6 +22783,12 @@ var WeaveAsyncManager = class {
 	asyncElementsLoaded() {
 		return [...this.asyncElements.values()].every((el) => el.status === WEAVE_ASYNC_STATUS.LOADED);
 	}
+	getAmountAsyncElements() {
+		return [...this.asyncElements.values()].length;
+	}
+	getAmountAsyncElementsLoaded() {
+		return [...this.asyncElements.values()].filter((el) => el.status === WEAVE_ASYNC_STATUS.LOADED).length;
+	}
 	loadAsyncElement(nodeId, type) {
 		let element = this.asyncElements.get(nodeId);
 		if (element) element.status = WEAVE_ASYNC_STATUS.LOADING;
@@ -22788,6 +22797,10 @@ var WeaveAsyncManager = class {
 			status: WEAVE_ASYNC_STATUS.LOADING
 		};
 		this.asyncElements.set(nodeId, element);
+		this.instance.emitEvent("onAsyncElementsLoading", {
+			loaded: this.getAmountAsyncElementsLoaded(),
+			total: this.getAmountAsyncElements()
+		});
 	}
 	resolveAsyncElement(nodeId, type) {
 		let element = this.asyncElements.get(nodeId);
@@ -22797,6 +22810,17 @@ var WeaveAsyncManager = class {
 			status: WEAVE_ASYNC_STATUS.LOADED
 		};
 		this.asyncElements.set(nodeId, element);
+		this.instance.emitEvent("onAsyncElementsLoading", {
+			loaded: this.getAmountAsyncElementsLoaded(),
+			total: this.getAmountAsyncElements()
+		});
+		if (!this.asyncElementsLoadedEventEmitted) {
+			const allLoaded = this.asyncElementsLoaded();
+			if (allLoaded) {
+				this.instance.emitEvent("onAsyncElementsLoaded");
+				this.asyncElementsLoadedEventEmitted = true;
+			}
+		}
 	}
 };
 
@@ -24455,6 +24479,10 @@ var WeaveTextNode = class extends WeaveNode {
 		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
 			if (node.id() === text.id() && node.getParent() !== text.getParent()) text.getAttr("cancelEditMode")?.();
 		});
+		if (!this.instance.isServerSide() && !this.keyPressHandler) {
+			this.keyPressHandler = this.handleKeyPress.bind(this);
+			window.addEventListener("keypress", this.keyPressHandler);
+		}
 		return text;
 	}
 	onUpdate(nodeInstance, nextProps) {
@@ -24880,6 +24908,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (nodeDistanceSnappingPlugin) nodeDistanceSnappingPlugin.disable();
 		const nodesSelectionPlugin = this.getNodesSelectionPlugin();
 		if (nodesSelectionPlugin) nodesSelectionPlugin.disable();
+		this.node.clearCache(this.image);
 		this.image.setAttrs({ cropping: true });
 		const imageAttrs = this.image.getAttrs();
 		this.internalImage.hide();
@@ -25058,6 +25087,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		if (nodesSelectionPlugin) nodesSelectionPlugin.enable();
 		stage.mode(WEAVE_STAGE_DEFAULT_MODE);
 		this.instance.releaseMutexLock();
+		this.node.cacheNode(this.image);
 		this.instance.emitEvent("onImageCropEnd", { instance: this.image });
 	}
 	drawGridLines(x, y, width, height) {
@@ -25119,6 +25149,7 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.image.setAbsolutePosition(cropImageStage);
 		this.image.attrs.cropInfo = void 0;
 		this.instance.updateNode(this.node.serialize(this.image));
+		this.node.cacheNode(this.image);
 	}
 	handleClipEnd() {
 		const clipRect = this.cropRect.getClientRect({ relativeTo: this.cropGroup });
@@ -25215,11 +25246,15 @@ const WEAVE_IMAGE_CROP_END_TYPE = {
 	["ACCEPT"]: "accept",
 	["CANCEL"]: "cancel"
 };
-const WEAVE_IMAGE_DEFAULT_CONFIG = { crossOrigin: "anonymous" };
+const WEAVE_IMAGE_DEFAULT_CONFIG = {
+	performance: { caching: false },
+	crossOrigin: "anonymous"
+};
 
 //#endregion
 //#region src/nodes/image/image.ts
 var WeaveImageNode = class extends WeaveNode {
+	imageBitmapCache = {};
 	imageSource = {};
 	imageState = {};
 	nodeType = WEAVE_IMAGE_NODE_TYPE;
@@ -25235,6 +25270,9 @@ var WeaveImageNode = class extends WeaveNode {
 		this.config = mergeExceptArrays(WEAVE_IMAGE_DEFAULT_CONFIG, config);
 		this.imageCrop = null;
 	}
+	onRegister() {
+		this.logger.info(`image caching enabled: ${this.config.performance.caching}`);
+	}
 	triggerCrop(imageNode) {
 		const stage = this.instance.getStage();
 		if (imageNode.getAttrs().cropping ?? false) return;
@@ -25384,8 +25422,9 @@ var WeaveImageNode = class extends WeaveNode {
 		};
 		if (this.imageSource[id]) {
 			imagePlaceholder.destroy();
+			const imageSource = this.imageSource[id];
 			internalImage.setAttrs({
-				image: this.imageSource[id],
+				image: imageSource,
 				visible: true
 			});
 			image.setAttr("imageInfo", {
@@ -25409,14 +25448,27 @@ var WeaveImageNode = class extends WeaveNode {
 			this.updatePlaceholderSize(image, imagePlaceholder);
 			this.loadImage(imageProps, image);
 		}
+		if (this.config.performance.caching) image.on("transformend", () => {
+			this.cacheNode(image);
+		});
 		image.setAttr("imageURL", imageProps.imageURL);
 		this.instance.addEventListener("onNodeRenderedAdded", (node) => {
 			if (node.id() === image.id() && node.getParent() !== image.getParent()) {
 				if (this.imageCrop) this.closeCrop(image, WEAVE_IMAGE_CROP_END_TYPE.CANCEL);
 			}
 		});
+		this.cacheNode(image);
 		return image;
 	}
+	clearCache(nodeInstance) {
+		if (this.config.performance.caching) nodeInstance.clearCache();
+	}
+	cacheNode(nodeInstance) {
+		if (this.config.performance.caching) {
+			nodeInstance.clearCache();
+			nodeInstance.cache();
+		}
+	}
 	onUpdate(nodeInstance, nextProps) {
 		const id = nodeInstance.getAttrs().id;
 		const node = nodeInstance;
@@ -25516,6 +25568,7 @@ var WeaveImageNode = class extends WeaveNode {
 			});
 			this.updateImageCrop(nodeInstance);
 		}
+		this.cacheNode(nodeInstance);
 	}
 	preloadImage(imageId, imageURL, { onLoad, onError }) {
 		const realImageURL = this.config.urlTransformer?.(imageURL ?? "") ?? imageURL;
@@ -25530,7 +25583,7 @@ var WeaveImageNode = class extends WeaveNode {
 			delete this.imageState[imageId];
 			onError(error);
 		};
-		this.imageSource[imageId].onload = () => {
+		this.imageSource[imageId].onload = async () => {
 			this.imageState[imageId] = {
 				loaded: true,
 				error: false
@@ -25562,10 +25615,11 @@ var WeaveImageNode = class extends WeaveNode {
 						height: imageProps.height ? imageProps.height : this.imageSource[id].height
 					});
 					imagePlaceholder.destroy();
+					const imageSource = this.imageSource[id];
 					internalImage.setAttrs({
 						width: imageProps.width ? imageProps.width : this.imageSource[id].width,
 						height: imageProps.height ? imageProps.height : this.imageSource[id].height,
-						image: this.imageSource[id],
+						image: imageSource,
 						visible: true
 					});
 					internalImage.setAttr("imageInfo", {
@@ -25588,6 +25642,7 @@ var WeaveImageNode = class extends WeaveNode {
 					};
 					this.updateImageCrop(image);
 					this.resolveAsyncElement(id);
+					this.cacheNode(image);
 				}
 			},
 			onError: (error) => {
@@ -25612,6 +25667,7 @@ var WeaveImageNode = class extends WeaveNode {
 				console.error("Error loading image", realImageURL, error);
 				imagePlaceholder?.setAttrs({ visible: true });
 				internalImage?.setAttrs({ visible: false });
+				this.cacheNode(image);
 			}
 		});
 	}
@@ -31569,6 +31625,7 @@ const BRUSH_TOOL_DEFAULT_CONFIG = { interpolationSteps: 10 };
 //#region src/actions/brush-tool/brush-tool.ts
 var WeaveBrushToolAction = class extends WeaveAction {
 	initialized = false;
+	isSpacePressed = false;
 	onPropsChange = void 0;
 	onInit = void 0;
 	constructor(params) {
@@ -31582,6 +31639,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		this.isEraser = false;
 		this.measureContainer = void 0;
 		this.props = this.initProps();
+		this.isSpacePressed = false;
 	}
 	getName() {
 		return BRUSH_TOOL_ACTION_NAME;
@@ -31599,11 +31657,15 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	}
 	setupEvents() {
 		const stage = this.instance.getStage();
+		window.addEventListener("keyup", (e) => {
+			if (e.code === "Space" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) this.isSpacePressed = false;
+		});
 		window.addEventListener("keydown", (e) => {
 			if (e.code === "Enter" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
 			}
+			if (e.code === "Space" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) this.isSpacePressed = true;
 			if (e.code === "Escape" && this.instance.getActiveAction() === BRUSH_TOOL_ACTION_NAME) {
 				this.cancelAction();
 				return;
@@ -31612,6 +31674,8 @@ var WeaveBrushToolAction = class extends WeaveAction {
 		const handlePointerDown = (e) => {
 			if (this.state !== BRUSH_TOOL_STATE.IDLE) return;
 			if (this.getZoomPlugin()?.isPinching()) return;
+			if (this.isSpacePressed) return;
+			if (e.evt.button !== 0) return;
 			const pointPressure = this.getEventPressure(e);
 			this.handleStartStroke(pointPressure);
 			e.evt.stopPropagation();
@@ -31785,6 +31849,7 @@ var WeaveBrushToolAction = class extends WeaveAction {
 	}
 	setCursor() {
 		const stage = this.instance.getStage();
+		if (this.isSpacePressed) return;
 		stage.container().style.cursor = "crosshair";
 	}
 	setFocusStage() {