@inditextech/weave-react 3.3.0 → 3.4.0-SNAPSHOT.38.1

package/dist/react.d.ts

@@ -41,12 +41,14 @@ interface WeaveRuntimeState {
     status: string;
   };
   room: {
+    id: string | null;
+    switching: boolean;
     loaded: boolean;
   };
   asyncElements: {
+    state: "idle" | "loading" | "loaded";
     loaded: number;
     total: number;
-    allLoaded: boolean;
   };
   users: WeaveConnectedUsers;
   undoRedo: {
@@ -72,9 +74,11 @@ interface WeaveRuntimeState {
   setStatus: (newStatus: WeaveStatus) => void;
   setAppState: (newAppState: WeaveState) => void;
   setConnectionStatus: (newConnectionStatus: string) => void;
+  setRoomId: (newRoomId: string | null) => void;
+  setRoomSwitching: (newRoomSwitching: boolean) => void;
   setRoomLoaded: (newStatus: boolean) => void;
   setAsyncElements: (loaded: number, total: number) => void;
-  setAsyncElementsAllLoaded: (allLoaded: boolean) => void;
+  setAsyncElementsState: (newState: "idle" | "loading" | "loaded") => void;
   setUsers: (newUsers: WeaveConnectedUsers) => void;
   setCanUndo: (newCanUndo: boolean) => void;
   setCanRedo: (newCanRedo: boolean) => void;

package/dist/react.js

@@ -53,11 +53,15 @@ const useWeave = create()((set) => ({
 	instance: null,
 	appState: { weave: {} },
 	status: WEAVE_INSTANCE_STATUS.IDLE,
-	room: { loaded: false },
+	room: {
+		id: null,
+		switching: false,
+		loaded: false
+	},
 	asyncElements: {
+		state: "idle",
 		loaded: 0,
-		total: 0,
-		allLoaded: false
+		total: 0
 	},
 	connection: { status: "disconnected" },
 	users: {},
@@ -107,6 +111,20 @@ const useWeave = create()((set) => ({
 			status: newConnectionStatus
 		}
 	})),
+	setRoomId: (newRoomId) => set((state) => ({
+		...state,
+		room: {
+			...state.room,
+			id: newRoomId
+		}
+	})),
+	setRoomSwitching: (newRoomSwitching) => set((state) => ({
+		...state,
+		room: {
+			...state.room,
+			switching: newRoomSwitching
+		}
+	})),
 	setRoomLoaded: (newStatus) => set((state) => ({
 		...state,
 		room: {
@@ -122,11 +140,11 @@ const useWeave = create()((set) => ({
 			total
 		}
 	})),
-	setAsyncElementsAllLoaded: (allLoaded) => set((state) => ({
+	setAsyncElementsState: (newState) => set((state) => ({
 		...state,
 		asyncElements: {
 			...state.asyncElements,
-			allLoaded
+			state: newState
 		}
 	})),
 	setUsers: (newUsers) => set((state) => ({
@@ -217,7 +235,7 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 	const setActualAction = useWeave((state) => state.setActualAction);
 	const setConnectionStatus = useWeave((state) => state.setConnectionStatus);
 	const setAsyncElements = useWeave((state) => state.setAsyncElements);
-	const setAsyncElementsAllLoaded = useWeave((state) => state.setAsyncElementsAllLoaded);
+	const setAsyncElementsState = useWeave((state) => state.setAsyncElementsState);
 	const onInstanceStatusHandler = React.useCallback(
 		(status) => {
 			setStatus(status);
@@ -261,9 +279,17 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[selectedNodes]
+);
+	const onAsyncElementsIdleHandler = React.useCallback(
+		() => {
+			setAsyncElementsState("idle");
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[selectedNodes]
 );
 	const onAsyncElementsLoadingHandler = React.useCallback(
 		({ loaded, total }) => {
+			setAsyncElementsState("loading");
 			setAsyncElements(loaded, total);
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -271,7 +297,7 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 );
 	const onAsyncElementsLoadedHandler = React.useCallback(
 		() => {
-			setAsyncElementsAllLoaded(true);
+			setAsyncElementsState("loaded");
 		},
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[selectedNodes]
@@ -305,6 +331,7 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 				weaveInstanceRef.current.addEventListener("onStateChange", onStateChangeHandler);
 				weaveInstanceRef.current.addEventListener("onUndoManagerStatusChange", onUndoManagerStatusChangeHandler);
 				weaveInstanceRef.current.addEventListener("onActiveActionChange", onActiveActionChangeHandler);
+				weaveInstanceRef.current.addEventListener("onAsyncElementsIdle", onAsyncElementsIdleHandler);
 				weaveInstanceRef.current.addEventListener("onAsyncElementsLoading", onAsyncElementsLoadingHandler);
 				weaveInstanceRef.current.addEventListener("onAsyncElementsLoaded", onAsyncElementsLoadedHandler);
 				setInstance(weaveInstanceRef.current);
@@ -315,6 +342,7 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 		setRoomLoaded(false);
 		initWeave();
 		return () => {
+			console.log("unmounting weave provider, let's clean up");
 			weaveInstanceRef.current?.removeEventListener("onInstanceStatus", onInstanceStatusHandler);
 			weaveInstanceRef.current?.removeEventListener("onStoreConnectionStatusChange", onStoreConnectionStatusChangeHandler);
 			weaveInstanceRef.current?.removeEventListener("onRoomLoaded", onRoomLoadedHandler);
@@ -325,6 +353,7 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 			weaveInstanceRef.current?.removeEventListener("onAsyncElementsLoaded", onAsyncElementsLoadedHandler);
 			setStatus(WEAVE_INSTANCE_STATUS.IDLE);
 			setRoomLoaded(false);
+			console.log("Destroying weave instance");
 			weaveInstanceRef.current?.destroy();
 			weaveInstanceRef.current = null;
 		};
@@ -337,6 +366,8 @@ const WeaveProvider = ({ getContainer, store, renderer, nodes = [], actions = []
 const useWeaveEvents = () => {
 	const instance = useWeave((state) => state.instance);
 	const node = useWeave((state) => state.selection.node);
+	const setRoomId = useWeave((state) => state.setRoomId);
+	const setRoomSwitching = useWeave((state) => state.setRoomSwitching);
 	const setZoom = useWeave((state) => state.setZoom);
 	const setCanZoomIn = useWeave((state) => state.setCanZoomIn);
 	const setCanZoomOut = useWeave((state) => state.setCanZoomOut);
@@ -345,6 +376,29 @@ const useWeaveEvents = () => {
 	const setNode = useWeave((state) => state.setNode);
 	const setUsers = useWeave((state) => state.setUsers);
 	const setUsersLocks = useWeave((state) => state.setUsersLocks);
+	const onStoreRoomChangedHandler = React.useCallback(
+		({ room }) => {
+			setRoomId(room);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+);
+	const onRoomSwitchingStartHandler = React.useCallback(
+		({ room }) => {
+			console.log("Room switching started to room:", room);
+			setRoomSwitching(true);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+);
+	const onRoomSwitchingEndHandler = React.useCallback(
+		({ room }) => {
+			console.log("Room switching ended to room:", room);
+			setRoomSwitching(false);
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[]
+);
 	const onSelectionStateHandler = React.useCallback((active) => {
 		setSelectionActive(active);
 	}, []);
@@ -389,12 +443,18 @@ const useWeaveEvents = () => {
 );
 	React.useEffect(() => {
 		if (!instance) return;
+		instance.addEventListener("onStoreRoomChanged", onStoreRoomChangedHandler);
+		instance.addEventListener("onRoomSwitchingStart", onRoomSwitchingStartHandler);
+		instance.addEventListener("onRoomSwitchingEnd", onRoomSwitchingEndHandler);
 		instance.addEventListener("onSelectionState", onSelectionStateHandler);
 		instance.addEventListener("onZoomChange", onZoomChangeHandler);
 		instance.addEventListener("onNodesChange", onNodesChangeHandler);
 		instance.addEventListener("onConnectedUsersChange", onConnectedUsersChangedHandler);
 		instance.addEventListener("onMutexLockChange", onMutexLockChangeHandler);
 		return () => {
+			instance.removeEventListener("onStoreRoomChanged", onStoreRoomChangedHandler);
+			instance.removeEventListener("onRoomSwitchingStart", onRoomSwitchingStartHandler);
+			instance.removeEventListener("onRoomSwitchingEnd", onRoomSwitchingEndHandler);
 			instance.removeEventListener("onSelectionState", onSelectionStateHandler);
 			instance.removeEventListener("onZoomChange", onZoomChangeHandler);
 			instance.removeEventListener("onNodesChange", onNodesChangeHandler);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inditextech/weave-react",
-  "version": "3.3.0",
+  "version": "3.4.0-SNAPSHOT.38.1",
   "type": "module",
   "license": "Apache-2.0",
   "author": "Jesus Manuel Piñeiro Cid <jesusmpc@inditex.com>",
@@ -47,8 +47,8 @@
     "version:release": "npm version $RELEASE_VERSION -m \"[npm-scripts] prepare release $RELEASE_VERSION\" --tag-version-prefix \"\""
   },
   "dependencies": {
-    "@inditextech/weave-sdk": "3.3.0",
-    "@inditextech/weave-types": "3.3.0",
+    "@inditextech/weave-sdk": "3.4.0-SNAPSHOT.38.1",
+    "@inditextech/weave-types": "3.4.0-SNAPSHOT.38.1",
     "@syncedstore/core": "0.6.0"
   },
   "devDependencies": {