@inditextech/weave-sdk 0.25.0 → 0.26.1

package/dist/sdk.js

@@ -1,6 +1,6 @@
 import Konva from "konva";
 import "konva/lib/types";
-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 { 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_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 React from "react";
@@ -15612,6 +15612,9 @@ var WeaveStore = class {
 		if (!this.supportsUndoManager) throw new Error("Undo manager not supported");
 		this.undoManager.redo();
 	}
+	handleConnectionStatusChange(status) {
+		this.instance.emitEvent("onStoreConnectionStatusChange", status);
+	}
 };
 
 //#endregion
@@ -16352,12 +16355,12 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 	initEvents() {
 		const stage = this.instance.getStage();
 		window.addEventListener("keydown", async (e) => {
-			if (e.key === "c" && (e.ctrlKey || e.metaKey)) {
+			if (stage.isFocused() && e.key === "c" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
 				await this.performCopy();
 				return;
 			}
-			if (e.key === "v" && (e.ctrlKey || e.metaKey)) {
+			if (stage.isFocused() && e.key === "v" && (e.ctrlKey || e.metaKey)) {
 				e.preventDefault();
 				if (!this.enabled) return;
 				try {
@@ -16388,10 +16391,6 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 				stage.container().focus();
 				return;
 			}
-			if (e.key === "Escape") {
-				this.cancel();
-				return;
-			}
 		});
 	}
 	mapToPasteNodes() {
@@ -16514,6 +16513,9 @@ var WeaveCopyPasteNodesPlugin = class extends WeavePlugin {
 //#endregion
 //#region src/nodes/node.ts
 const augmentKonvaStageClass = () => {
+	Konva.Stage.prototype.isFocused = function() {
+		return false;
+	};
 	Konva.Stage.prototype.isMouseWheelPressed = function() {
 		return false;
 	};
@@ -16528,6 +16530,8 @@ const augmentKonvaNodeClass = (config) => {
 	};
 	Konva.Node.prototype.movedToContainer = function() {};
 	Konva.Node.prototype.updatePosition = function() {};
+	Konva.Node.prototype.triggerCrop = function() {};
+	Konva.Node.prototype.closeCrop = function() {};
 	Konva.Node.prototype.resetCrop = function() {};
 };
 var WeaveNode = class {
@@ -18132,7 +18136,7 @@ var WeaveRegisterManager = class {
 
 //#endregion
 //#region package.json
-var version = "0.25.0";
+var version = "0.26.1";
 
 //#endregion
 //#region src/managers/setup.ts
@@ -18486,11 +18490,13 @@ var WeavePluginsManager = class {
 //#endregion
 //#region src/weave.ts
 var Weave = class extends Emittery {
+	initialized = false;
 	status = WEAVE_INSTANCE_STATUS.IDLE;
 	constructor(weaveConfig, stageConfig) {
 		super();
 		Konva.showWarnings = false;
 		this.id = v4_default();
+		this.initialized = false;
 		this.config = weaveConfig;
 		this.logger = new WeaveLogger(this.config?.logger ?? {
 			disabled: false,
@@ -18521,9 +18527,11 @@ var Weave = class extends Emittery {
 	setupRenderer() {
 		this.renderer.init();
 		this.renderer.render(() => {
+			this.removeEventListener("onStoreConnectionStatusChange", this.handleStoreConnectionStatusChange.bind(this));
 			this.setupManager.setupPlugins();
 			this.setupManager.setupActions();
 			this.moduleLogger.info("Instance started");
+			this.initialized = true;
 			this.status = WEAVE_INSTANCE_STATUS.RUNNING;
 			this.emitEvent("onInstanceStatus", this.status);
 		});
@@ -18537,6 +18545,16 @@ var Weave = class extends Emittery {
 	setStore(store) {
 		this.storeManager.registerStore(store);
 	}
+	handleStoreConnectionStatusChange(status) {
+		if (!this.initialized && status === WEAVE_STORE_CONNECTION_STATUS.ERROR) {
+			this.status = WEAVE_INSTANCE_STATUS.CONNECTING_ERROR;
+			this.emitEvent("onInstanceStatus", this.status);
+		}
+		if (status === WEAVE_STORE_CONNECTION_STATUS.CONNECTED && !this.initialized) {
+			this.status = WEAVE_INSTANCE_STATUS.LOADING_ROOM;
+			this.emitEvent("onInstanceStatus", this.status);
+		}
+	}
 	async start() {
 		this.moduleLogger.info("Start instance");
 		this.emitEvent("onRoomLoaded", false);
@@ -18553,7 +18571,10 @@ var Weave = class extends Emittery {
 		await this.fontsManager.loadFonts();
 		this.setupManager.setupLog();
 		this.stageManager.initStage();
+		this.status = WEAVE_INSTANCE_STATUS.CONNECTING_TO_ROOM;
+		this.emitEvent("onInstanceStatus", this.status);
 		const store = this.storeManager.getStore();
+		this.addEventListener("onStoreConnectionStatusChange", this.handleStoreConnectionStatusChange.bind(this));
 		store.setup();
 		store.connect();
 	}
@@ -18805,11 +18826,21 @@ const WEAVE_STAGE_NODE_TYPE = "stage";
 //#region src/nodes/stage/stage.ts
 var WeaveStageNode = class extends WeaveNode {
 	nodeType = WEAVE_STAGE_NODE_TYPE;
+	stageFocused = false;
 	wheelMousePressed = false;
 	onRender(props) {
 		const stage = new Konva.Stage({ ...props });
 		this.wheelMousePressed = false;
+		stage.isFocused = () => this.stageFocused;
 		stage.isMouseWheelPressed = () => this.wheelMousePressed;
+		const container = stage.container();
+		container.setAttribute("tabindex", "0");
+		stage.container().addEventListener("focus", () => {
+			this.stageFocused = true;
+		});
+		stage.container().addEventListener("blur", () => {
+			this.stageFocused = false;
+		});
 		stage.on("mousedown", (e) => {
 			if (e.evt.button === 1) this.wheelMousePressed = true;
 		});
@@ -19716,9 +19747,11 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.image = image;
 		this.internalImage = internalImage;
 		this.cropGroup = clipGroup;
+		this.onClose = () => {};
 		this.handleHide = this.hide.bind(this);
 	}
-	show() {
+	show(onClose) {
+		this.onClose = onClose;
 		const nodeSnappingPlugin = this.instance.getPlugin("nodesSnapping");
 		if (nodeSnappingPlugin) this.instance.disablePlugin("nodesSnapping");
 		const selectionPlugin = this.instance.getPlugin("nodesSelection");
@@ -19862,10 +19895,17 @@ var WeaveImageCrop = class WeaveImageCrop {
 		this.cropGroup.show();
 		this.instance.getStage().container().addEventListener("keydown", this.handleHide);
 	}
+	accept() {
+		this.hide({ key: "Enter" });
+	}
+	cancel() {
+		this.hide({ key: "Escape" });
+	}
 	hide(e) {
 		if (!["Enter", "Escape"].includes(e.key)) return;
 		this.image.setAttrs({ cropping: false });
 		if (e.key === "Enter") this.handleClipEnd();
+		this.onClose();
 		const utilityLayer = this.instance.getUtilityLayer();
 		utilityLayer?.destroyChildren();
 		this.instance.getStage().container().removeEventListener("keydown", this.handleHide);
@@ -20025,6 +20065,10 @@ var WeaveImageCrop = class WeaveImageCrop {
 //#endregion
 //#region src/nodes/image/constants.ts
 const WEAVE_IMAGE_NODE_TYPE = "image";
+const WEAVE_IMAGE_CROP_END_TYPE = {
+	["ACCEPT"]: "accept",
+	["CANCEL"]: "cancel"
+};
 
 //#endregion
 //#region src/nodes/image/image.ts
@@ -20037,9 +20081,23 @@ var WeaveImageNode = class extends WeaveNode {
 			...WEAVE_DEFAULT_TRANSFORM_PROPERTIES,
 			...config?.transform
 		} };
+		this.imageCrop = null;
 		this.cachedCropInfo = {};
 		this.imageLoaded = false;
 	}
+	triggerCrop(imageNode) {
+		const stage = this.instance.getStage();
+		const image = stage.findOne(`#${imageNode.getAttrs().id}`);
+		const internalImage = image?.findOne(`#${image.getAttrs().id}-image`);
+		const cropGroup = image?.findOne(`#${image.getAttrs().id}-cropGroup`);
+		if (!image || !internalImage || !cropGroup) return;
+		this.imageCrop = new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup);
+		this.imageCrop.show(() => {
+			this.instance.emitEvent("onImageCropEnd", { instance: image });
+			this.imageCrop = null;
+		});
+		this.instance.emitEvent("onImageCropStart", { instance: image });
+	}
 	onRender(props) {
 		const imageProperties = props.imageProperties;
 		const imageProps = props;
@@ -20065,6 +20123,25 @@ var WeaveImageNode = class extends WeaveNode {
 			if (!image$1) return;
 			this.cachedCropInfo[image$1.getAttrs().id ?? ""] = void 0;
 		};
+		image.triggerCrop = () => {
+			const stage = this.instance.getStage();
+			const image$1 = stage.findOne(`#${id}`);
+			if (!image$1) return;
+			this.triggerCrop(image$1);
+		};
+		image.closeCrop = (type) => {
+			const stage = this.instance.getStage();
+			const image$1 = stage.findOne(`#${id}`);
+			if (!image$1 || !this.imageCrop) return;
+			if (type === WEAVE_IMAGE_CROP_END_TYPE.ACCEPT) {
+				this.imageCrop.accept();
+				this.instance.emitEvent("onImageCropEnd", { instance: image$1 });
+			}
+			if (type === WEAVE_IMAGE_CROP_END_TYPE.CANCEL) {
+				this.imageCrop.cancel();
+				this.instance.emitEvent("onImageCropEnd", { instance: image$1 });
+			}
+		};
 		image.resetCrop = () => {
 			const stage = this.instance.getStage();
 			const image$1 = stage.findOne(`#${id}`);
@@ -20105,8 +20182,6 @@ var WeaveImageNode = class extends WeaveNode {
 			rotation: 0,
 			width: 0,
 			height: 0,
-			stroke: "#ff0000ff",
-			strokeWidth: 0,
 			strokeScaleEnabled: true,
 			draggable: false,
 			visible: false
@@ -20127,8 +20202,7 @@ var WeaveImageNode = class extends WeaveNode {
 			if (image.getAttrs().cropping ?? false) return;
 			if (!internalImage.getAttr("image")) return;
 			if (!(this.isSelecting() && this.isNodeSelected(image))) return;
-			const imageCrop = new WeaveImageCrop(this.instance, this, image, internalImage, cropGroup);
-			imageCrop.show();
+			this.triggerCrop(image);
 		});
 		const imageActionTool = this.getImageToolAction();
 		const preloadImg = imageActionTool.getPreloadedImage(imageProps.id);
@@ -24455,5 +24529,5 @@ var WeaveNodesSnappingPlugin = class extends WeavePlugin {
 };
 
 //#endregion
-export { ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_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_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, 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, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };
+export { ARROW_TOOL_ACTION_NAME, ARROW_TOOL_STATE, BRUSH_TOOL_ACTION_NAME, BRUSH_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_LINE_DEFAULT_CONFIG, GUIDE_LINE_DRAG_SNAPPING_THRESHOLD, GUIDE_LINE_NAME, GUIDE_LINE_TRANSFORM_SNAPPING_THRESHOLD, GUIDE_ORIENTATION, IMAGE_TOOL_ACTION_NAME, IMAGE_TOOL_STATE, MOVE_TOOL_ACTION_NAME, MOVE_TOOL_STATE, NODE_SNAP, 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, STAR_TOOL_ACTION_NAME, STAR_TOOL_STATE, TEXT_LAYOUT, TEXT_TOOL_ACTION_NAME, TEXT_TOOL_STATE, WEAVE_ARROW_NODE_TYPE, WEAVE_COPY_PASTE_NODES_KEY, WEAVE_DEFAULT_USER_INFO_FUNCTION, WEAVE_ELLIPSE_NODE_TYPE, WEAVE_FRAME_NODE_DEFAULT_CONFIG, WEAVE_FRAME_NODE_DEFAULT_PROPS, WEAVE_FRAME_NODE_SIZES, WEAVE_FRAME_NODE_SIZES_MULTIPLIER, WEAVE_FRAME_NODE_SIZES_ORIENTATION, WEAVE_FRAME_NODE_SIZES_TYPES, WEAVE_FRAME_NODE_TYPE, WEAVE_GRID_DEFAULT_COLOR, WEAVE_GRID_DEFAULT_ORIGIN_COLOR, WEAVE_GRID_DEFAULT_SIZE, WEAVE_GRID_DEFAULT_TYPE, WEAVE_GRID_LAYER_ID, WEAVE_GRID_TYPES, WEAVE_GROUP_NODE_TYPE, WEAVE_IMAGE_CROP_END_TYPE, WEAVE_IMAGE_NODE_TYPE, WEAVE_LAYER_NODE_TYPE, WEAVE_LINE_NODE_TYPE, WEAVE_NODES_SELECTION_KEY, WEAVE_NODES_SELECTION_LAYER_ID, WEAVE_NODES_SNAPPING_KEY, WEAVE_RECTANGLE_NODE_TYPE, WEAVE_REGULAR_POLYGON_NODE_TYPE, WEAVE_STAGE_GRID_KEY, WEAVE_STAGE_NODE_TYPE, WEAVE_STAR_NODE_TYPE, WEAVE_TEXT_NODE_TYPE, WEAVE_USERS_POINTERS_KEY, WEAVE_USERS_SELECTION_KEY, WEAVE_USER_POINTERS_DEFAULT_PROPS, WEAVE_USER_POINTER_KEY, WEAVE_USER_SELECTION_KEY, Weave, WeaveAction, WeaveArrowNode, WeaveArrowToolAction, WeaveBrushToolAction, WeaveConnectedUsersPlugin, WeaveContextMenuPlugin, WeaveCopyPasteNodesPlugin, WeaveEllipseNode, WeaveEllipseToolAction, WeaveEraserToolAction, WeaveExportNodeToolAction, WeaveExportStageToolAction, WeaveFitToScreenToolAction, WeaveFitToSelectionToolAction, WeaveFrameNode, WeaveFrameToolAction, WeaveGroupNode, WeaveImageNode, WeaveImageToolAction, WeaveLayerNode, WeaveLineNode, WeaveMoveToolAction, WeaveNode, WeaveNodesSelectionPlugin, WeaveNodesSnappingPlugin, WeavePenToolAction, WeavePlugin, WeaveRectangleNode, WeaveRectangleToolAction, WeaveRegularPolygonNode, WeaveRegularPolygonToolAction, WeaveSelectionToolAction, WeaveStageDropAreaPlugin, WeaveStageGridPlugin, WeaveStageNode, WeaveStagePanningPlugin, WeaveStageResizePlugin, WeaveStageZoomPlugin, WeaveStarNode, WeaveStarToolAction, WeaveStore, WeaveTextNode, WeaveTextToolAction, WeaveUsersPointersPlugin, WeaveUsersSelectionPlugin, WeaveZoomInToolAction, WeaveZoomOutToolAction, checkIfOverContainer, clearContainerTargets, moveNodeToContainer, resetScale };
 //# sourceMappingURL=sdk.js.map