@inditextech/weave-sdk 0.62.4 → 0.64.0

package/dist/sdk.js

@@ -2,7 +2,7 @@ import Konva from "konva";
 import "konva/lib/types";
 import { WEAVE_AWARENESS_LAYER_ID, WEAVE_EXPORT_BACKGROUND_COLOR, WEAVE_EXPORT_FORMATS, WEAVE_INSTANCE_STATUS, WEAVE_NODE_CUSTOM_EVENTS, WEAVE_NODE_LAYER_ID, WEAVE_NODE_POSITION, WEAVE_STORE_CONNECTION_STATUS, WEAVE_UTILITY_LAYER_ID } from "@inditextech/weave-types";
 import { getYjsDoc, getYjsValue, observeDeep, syncedStore } from "@syncedstore/core";
-import { Doc, UndoManager } from "yjs";
+import * as Y from "yjs";
 import { Transformer } from "konva/lib/shapes/Transformer";
 import React from "react";
 import ReactReconciler from "react-reconciler";
@@ -15540,6 +15540,10 @@ var WeaveStore = class {
 	getStateJson() {
 		return JSON.parse(JSON.stringify(this.state, void 0, 2));
 	}
+	getStateSnapshot() {
+		const doc = this.getDocument();
+		return Y.encodeStateAsUpdate(doc);
+	}
 	setup() {
 		this.isRoomLoaded = false;
 		this.instance.emitEvent("onRoomLoaded", this.isRoomLoaded);
@@ -15549,7 +15553,7 @@ var WeaveStore = class {
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 );
 			if (weaveStateValues) {
-				this.undoManager = new UndoManager([weaveStateValues], {
+				this.undoManager = new Y.UndoManager([weaveStateValues], {
 					captureTimeout: 250,
 					trackedOrigins: new Set([this.config.getUser().id]),
 					...this.config?.undoManagerOptions
@@ -20112,7 +20116,7 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 			const items = await navigator.clipboard.read();
 			if (await canHandleExternal(items)) return WEAVE_COPY_PASTE_PASTE_MODES.EXTERNAL;
 		} catch (e) {
-			this.getLogger().error("Error reading clipboard data", e);
+			this.getLogger().error({ error: e }, "Error reading clipboard data");
 			return WEAVE_COPY_PASTE_PASTE_MODES.CLIPBOARD_API_ERROR;
 		}
 		return WEAVE_COPY_PASTE_PASTE_MODES.NOT_ALLOWED;
@@ -22049,7 +22053,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.62.4";
+var version = "0.64.0";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -22307,7 +22311,7 @@ var WeaveExportManager = class {
 			outH
 		};
 	}
-	exportNodes(nodes, boundingNodes, options) {
+	exportNodesAsImage(nodes, boundingNodes, options) {
 		return new Promise((resolve) => {
 			const { format: format$2 = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
 			this.getNodesSelectionPlugin()?.disable();
@@ -22384,6 +22388,112 @@ var WeaveExportManager = class {
 			}
 		});
 	}
+	async exportNodesAsBuffer(nodes, boundingNodes, options) {
+		const { format: format$2 = WEAVE_EXPORT_FORMATS.PNG, padding = 0, pixelRatio = 1, backgroundColor = WEAVE_EXPORT_BACKGROUND_COLOR } = options;
+		this.getNodesSelectionPlugin()?.disable();
+		this.getNodesDistanceSnappingPlugin()?.disable();
+		this.getNodesEdgeSnappingPlugin()?.disable();
+		this.getStageGridPlugin()?.disable();
+		const stage = this.instance.getStage();
+		const mainLayer = this.instance.getMainLayer();
+		const originalPosition = {
+			x: stage.x(),
+			y: stage.y()
+		};
+		const originalScale = {
+			x: stage.scaleX(),
+			y: stage.scaleY()
+		};
+		stage.scale({
+			x: 1,
+			y: 1
+		});
+		let realNodes = [...nodes];
+		if (nodes.length === 0) realNodes = mainLayer?.getChildren().map((node) => node.getAttrs().id ?? "") ?? [];
+		const konvaNodes = [];
+		for (const nodeId of realNodes) {
+			const node = stage.findOne(`#${nodeId}`);
+			if (node) konvaNodes.push(node);
+		}
+		if (mainLayer) {
+			const bounds = getExportBoundingBox(stage, boundingNodes(konvaNodes));
+			const scaleX = stage.scaleX();
+			const scaleY = stage.scaleY();
+			const unscaledBounds = {
+				x: bounds.x / scaleX,
+				y: bounds.y / scaleY,
+				width: bounds.width / scaleX,
+				height: bounds.height / scaleY
+			};
+			const exportGroup = new Konva.Group();
+			const background = new Konva.Rect({
+				x: unscaledBounds.x - padding,
+				y: unscaledBounds.y - padding,
+				width: unscaledBounds.width + 2 * padding,
+				height: unscaledBounds.height + 2 * padding,
+				strokeWidth: 0,
+				fill: backgroundColor
+			});
+			exportGroup.add(background);
+			for (const node of konvaNodes) {
+				const clonedNode = node.clone({ id: v4_default() });
+				const absPos = node.getAbsolutePosition();
+				clonedNode.absolutePosition({
+					x: absPos.x / scaleX,
+					y: absPos.y / scaleY
+				});
+				exportGroup.add(clonedNode);
+			}
+			mainLayer.add(exportGroup);
+			const backgroundRect = background.getClientRect();
+			stage.batchDraw();
+			const composites = [];
+			const maxRenderSize = 1920;
+			const tileSize = Math.floor(maxRenderSize / pixelRatio);
+			const imageWidth = Math.round(backgroundRect.width);
+			const imageHeight = Math.round(backgroundRect.height);
+			let compositeX = 0;
+			let compositeY = 0;
+			for (let y = Math.round(backgroundRect.y); y < imageHeight; y += tileSize) {
+				compositeX = 0;
+				for (let x = Math.round(backgroundRect.x); x < imageWidth; x += tileSize) {
+					const width = Math.min(tileSize, imageWidth - x);
+					const height = Math.min(tileSize, imageHeight - y);
+					const canvas = await exportGroup.toCanvas({
+						x,
+						y,
+						width,
+						height,
+						mimeType: format$2,
+						pixelRatio,
+						quality: options.quality ?? 1
+					});
+					const buffer = canvas.toBuffer();
+					composites.push({
+						top: compositeY * pixelRatio,
+						left: compositeX * pixelRatio,
+						input: buffer
+					});
+					compositeX = compositeX + tileSize;
+				}
+				compositeY = compositeY + tileSize;
+			}
+			exportGroup.destroy();
+			stage.position(originalPosition);
+			stage.scale(originalScale);
+			stage.batchDraw();
+			this.getNodesSelectionPlugin()?.enable();
+			this.getNodesDistanceSnappingPlugin()?.enable();
+			this.getNodesEdgeSnappingPlugin()?.enable();
+			this.getStageGridPlugin()?.enable();
+			return {
+				composites,
+				width: imageWidth * pixelRatio,
+				height: imageHeight * pixelRatio
+			};
+		}
+		throw new Error("Failed to export nodes as data URL");
+	}
 	imageToBase64(img, mimeType) {
 		const canvas = document.createElement("canvas");
 		canvas.width = img.naturalWidth;
@@ -22436,6 +22546,51 @@ var WeavePluginsManager = class {
 	}
 };
 
+//#endregion
+//#region src/watch-map.ts
+function watchMap(onChange, map = new Map()) {
+	const handler = { get(target, prop, receiver) {
+		if (prop === "set") return (key, value$1) => {
+			const had = target.has(key);
+			const prev = had ? target.get(key) : void 0;
+			target.set(key, value$1);
+			onChange({
+				type: had ? "update" : "add",
+				key,
+				value: value$1,
+				prevValue: prev,
+				size: target.size
+			});
+			return receiver;
+		};
+		if (prop === "delete") return (key) => {
+			const had = target.has(key);
+			const prev = had ? target.get(key) : void 0;
+			const ok = target.delete(key);
+			if (ok && had) onChange({
+				type: "delete",
+				key,
+				prevValue: prev,
+				size: target.size
+			});
+			return ok;
+		};
+		if (prop === "clear") return () => {
+			if (target.size > 0) {
+				target.clear();
+				onChange({
+					type: "clear",
+					size: 0
+				});
+			}
+		};
+		const value = Reflect.get(target, prop, receiver);
+		if (typeof value === "function") return value.bind(target);
+		return value;
+	} };
+	return new Proxy(map, handler);
+}
+
 //#endregion
 //#region src/weave.ts
 var Weave = class {
@@ -22446,7 +22601,10 @@ var Weave = class {
 		Konva.showWarnings = false;
 		this.id = v4_default();
 		this.initialized = false;
-		this.config = weaveConfig;
+		this.asyncElements = watchMap(() => {
+			this.emitEvent("onAsyncElementChange");
+		}, new Map());
+		this.config = (0, import_lodash.merge)({ serverSide: false }, weaveConfig);
 		this.logger = new WeaveLogger(this.config?.logger ?? {
 			disabled: false,
 			level: "error"
@@ -22468,9 +22626,6 @@ var Weave = class {
 		this.exportManager = new WeaveExportManager(this);
 		this.actionsManager = new WeaveActionsManager(this);
 		this.pluginsManager = new WeavePluginsManager(this);
-		if (!window.weave) window.weave = this;
-		window.weaveTextEditing = {};
-		window.weaveDragImageURL = void 0;
 		this.setupManager.welcomeLog();
 	}
 	setupRenderer() {
@@ -22506,6 +22661,19 @@ var Weave = class {
 	}
 	async start() {
 		this.moduleLogger.info("Start instance");
+		if (!this.config.serverSide) {
+			if (!window.weave) window.weave = this;
+			window.weaveTextEditing = {};
+			window.weaveDragImageURL = void 0;
+		}
+		if (this.config.serverSide) {
+			const { createCanvas, Image: Image$1 } = await import("canvas");
+			globalThis.Image = Image$1;
+			globalThis.document = { createElement(tag) {
+				if (tag === "canvas") return createCanvas(1, 1);
+				throw new Error(`Unsupported element: ${tag}`);
+			} };
+		}
 		this.emitEvent("onRoomLoaded", false);
 		this.status = WEAVE_INSTANCE_STATUS.STARTING;
 		this.emitEvent("onInstanceStatus", this.status);
@@ -22800,7 +22968,10 @@ var Weave = class {
 		return this.exportManager.imageToBase64(img, mimeType);
 	}
 	async exportNodes(nodes, boundingNodes, options) {
-		return await this.exportManager.exportNodes(nodes, boundingNodes, options);
+		return await this.exportManager.exportNodesAsImage(nodes, boundingNodes, options);
+	}
+	async exportNodesAsBuffer(nodes, boundingNodes, options) {
+		return await this.exportManager.exportNodesAsBuffer(nodes, boundingNodes, options);
 	}
 	allNodesLocked(nodes) {
 		let allNodesLocked = true;
@@ -22886,6 +23057,30 @@ var Weave = class {
 			nodeHandler.show(node);
 		}
 	}
+	asyncElementsLoaded() {
+		return [...this.asyncElements.values()].every((el) => el.status === "loaded");
+	}
+	loadAsyncElement(nodeId, type) {
+		let element = this.asyncElements.get(nodeId);
+		if (element) element.status = "loading";
+		else element = {
+			type,
+			status: "loading"
+		};
+		this.asyncElements.set(nodeId, element);
+	}
+	resolveAsyncElement(nodeId, type) {
+		let element = this.asyncElements.get(nodeId);
+		if (element) element.status = "loaded";
+		else element = {
+			type,
+			status: "loaded"
+		};
+		this.asyncElements.set(nodeId, element);
+	}
+	isServerSide() {
+		return this.config.serverSide ?? false;
+	}
 };
 
 //#endregion
@@ -22903,14 +23098,16 @@ var WeaveStageNode = class extends WeaveNode {
 			x: 0,
 			y: 0
 		});
-		const container = stage.container();
-		container.setAttribute("tabindex", "0");
-		stage.container().addEventListener("focus", () => {
-			this.stageFocused = true;
-		});
-		stage.container().addEventListener("blur", () => {
-			this.stageFocused = false;
-		});
+		if (!this.instance.isServerSide()) {
+			const container = stage.container();
+			container.setAttribute("tabindex", "0");
+			stage.container().addEventListener("focus", () => {
+				this.stageFocused = true;
+			});
+			stage.container().addEventListener("blur", () => {
+				this.stageFocused = false;
+			});
+		}
 		Konva.Stage.prototype.mode = function(mode) {
 			if (typeof mode !== "undefined") this._mode = mode;
 			return this._mode;
@@ -22930,11 +23127,11 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.mode(WEAVE_STAGE_DEFAULT_MODE);
 		stage.on("pointerdown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
-			if ([MOVE_TOOL_ACTION_NAME].includes(this.instance.getActiveAction() ?? "")) stage.container().style.cursor = "grabbing";
+			if (!this.instance.isServerSide() && [MOVE_TOOL_ACTION_NAME].includes(this.instance.getActiveAction() ?? "")) stage.container().style.cursor = "grabbing";
 		});
 		stage.on("pointermove", (e) => {
 			const activeAction = this.instance.getActiveAction();
-			if (![MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "") && stage.allowSelection() && !stage.allowActions().includes(this.instance.getActiveAction() ?? "") && !stage.allowSelectNodes().includes(e.target.getAttrs()?.nodeType ?? "")) {
+			if (!this.instance.isServerSide() && ![MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "") && stage.allowSelection() && !stage.allowActions().includes(this.instance.getActiveAction() ?? "") && !stage.allowSelectNodes().includes(e.target.getAttrs()?.nodeType ?? "")) {
 				const stage$1 = this.instance.getStage();
 				stage$1.container().style.cursor = "default";
 			}
@@ -22946,7 +23143,7 @@ var WeaveStageNode = class extends WeaveNode {
 		stage.on("pointerup", (e) => {
 			const activeAction = this.instance.getActiveAction();
 			if (e.evt.button === 1) this.wheelMousePressed = false;
-			if ([MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) stage.container().style.cursor = "grab";
+			if (!this.instance.isServerSide() && [MOVE_TOOL_ACTION_NAME].includes(activeAction ?? "")) stage.container().style.cursor = "grab";
 		});
 		stage.on("pointerover", (e) => {
 			const activeAction = this.instance.getActiveAction();
@@ -22955,7 +23152,7 @@ var WeaveStageNode = class extends WeaveNode {
 			const parent = e.target.getParent();
 			if (parent && parent instanceof Konva.Transformer) return;
 			this.hideHoverState();
-			stage.container().style.cursor = "default";
+			if (!this.instance.isServerSide()) stage.container().style.cursor = "default";
 		});
 		return stage;
 	}
@@ -23343,7 +23540,7 @@ var WeaveTextNode = class extends WeaveNode {
 		text.on("transformend", () => {
 			this.instance.emitEvent("onTransform", null);
 		});
-		window.addEventListener("keypress", (e) => {
+		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) {
 				e.preventDefault();
 				if (this.isSelecting() && this.isNodeSelected(text)) {
@@ -24402,6 +24599,12 @@ var WeaveImageNode = class extends WeaveNode {
 		imageCrop.unCrop();
 		this.cachedCropInfo[imageNode.getAttrs().id ?? ""] = void 0;
 	};
+	loadAsyncElement(nodeId) {
+		this.instance.loadAsyncElement(nodeId, "image");
+	}
+	resolveAsyncElement(nodeId) {
+		this.instance.resolveAsyncElement(nodeId, "image");
+	}
 	onRender(props) {
 		const imageProperties = props.imageProperties;
 		const imageProps = props;
@@ -24601,13 +24804,15 @@ var WeaveImageNode = class extends WeaveNode {
 		const imageProps = params;
 		const imagePlaceholder = image.findOne(`#${imageProps.id}-placeholder`);
 		const internalImage = image.findOne(`#${imageProps.id}-image`);
+		const realImageURL = this.config.urlTransformer?.(imageProps.imageURL ?? "") ?? imageProps.imageURL;
 		const imageObj = new Image();
 		imageObj.crossOrigin = this.config.crossOrigin;
 		imageObj.onerror = (error) => {
-			console.error("Error loading image", imageProps.imageURL, error);
+			console.error("Error loading image", realImageURL, error);
 			imagePlaceholder?.setAttrs({ visible: true });
 			internalImage?.setAttrs({ visible: false });
 		};
+		this.loadAsyncElement(imageProps.id);
 		imageObj.onload = () => {
 			if (image && imagePlaceholder && internalImage) {
 				image.setAttrs({
@@ -24646,11 +24851,12 @@ var WeaveImageNode = class extends WeaveNode {
 					height: imageRect.height
 				});
 				this.updateImageCrop(imageProps);
+				this.resolveAsyncElement(imageProps.id);
 				const nodeHandler = this.instance.getNodeHandler(image.getAttrs().nodeType);
 				if (nodeHandler) this.instance.updateNode(nodeHandler.serialize(image));
 			}
 		};
-		if (imageProps.imageURL) imageObj.src = imageProps.imageURL;
+		if (realImageURL) imageObj.src = realImageURL;
 	}
 	updateImageCrop(nextProps) {
 		const imageAttrs = nextProps;
@@ -28882,12 +29088,7 @@ var WeaveExportStageToolAction = class extends WeaveAction {
 	}
 	async exportStage(boundingNodes) {
 		const mainLayer = this.instance.getMainLayer();
-		const img = await this.instance.exportNodes(
-			// mainLayer?.find('.node') ?? [],
-			mainLayer?.getChildren() ?? [],
-			boundingNodes,
-			this.options
-);
+		const img = await this.instance.exportNodes(mainLayer?.getChildren() ?? [], boundingNodes, this.options);
 		return img;
 	}
 	async trigger(cancelAction, { boundingNodes, options }) {