feat(toolbar): new Toolbar to enable reactive state synchronization (#3983)

platform/ui/src/contextProviders/ViewportGridProvider.tsx

@@ -16,6 +16,7 @@ interface Viewport {
   width: number;
   height: number;
   viewportLabel: any;
+  isReady: boolean;
 }
 
 interface Layout {
@@ -45,6 +46,7 @@ const DEFAULT_STATE: DefaultState = {
       default: {
         viewportId: 'default',
         displaySetInstanceUIDs: [],
+        isReady: false,
         viewportOptions: {
           viewportId: 'default',
         },
@@ -252,6 +254,7 @@ export function ViewportGridProvider({ children, service }) {
             });
 
             viewport.viewportLabel = getViewportLabel(viewports, viewport.viewportId);
+            viewport.isReady = false;
 
             if (!viewport.viewportOptions.presentationIds) {
               viewport.viewportOptions.presentationIds = ViewportGridService.getPresentationIds(
@@ -289,6 +292,25 @@ export function ViewportGridProvider({ children, service }) {
         };
       }
 
+      case 'VIEWPORT_IS_READY': {
+        const { viewportId, isReady } = action.payload;
+        const viewports = new Map(state.viewports);
+        const viewport = viewports.get(viewportId);
+        if (!viewport) {
+          return;
+        }
+
+        viewports.set(viewportId, {
+          ...viewport,
+          isReady,
+        });
+
+        return {
+          ...state,
+          viewports,
+        };
+      }
+
       default:
         return action.payload;
     }
@@ -319,6 +341,25 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
 
+  const setViewportIsReady = useCallback(
+    (viewportId, isReady) => {
+      dispatch({
+        type: 'VIEWPORT_IS_READY',
+        payload: {
+          viewportId,
+          isReady,
+        },
+      });
+    },
+    [dispatch, viewportGridState]
+  );
+
+  const getGridViewportsReady = useCallback(() => {
+    const { viewports } = viewportGridState;
+    const readyViewports = Array.from(viewports.values()).filter(viewport => viewport.isReady);
+    return readyViewports.length === viewports.size;
+  }, [viewportGridState]);
+
   const setLayout = useCallback(
     ({
       layoutType,
@@ -382,6 +423,8 @@ export function ViewportGridProvider({ children, service }) {
         onModeExit: reset,
         set,
         getNumViewportPanes,
+        setViewportIsReady,
+        getGridViewportsReady,
       });
     }
   }, [
@@ -393,6 +436,8 @@ export function ViewportGridProvider({ children, service }) {
     reset,
     set,
     getNumViewportPanes,
+    setViewportIsReady,
+    getGridViewportsReady,
   ]);
 
   // run many of the calls through the service itself since we want to publish events
@@ -405,8 +450,11 @@ export function ViewportGridProvider({ children, service }) {
     reset: () => service.reset(),
     set: gridLayoutState => service.setState(gridLayoutState), // run it through the service itself since we want to publish events
     getNumViewportPanes,
+    setViewportIsReady,
+    getGridViewportsReady,
     getActiveViewportOptionByKey,
     setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props),
+    publishViewportsReady: () => service.publishViewportsReady(),
   };
 
   return (