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

extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx

@@ -11,16 +11,6 @@ import dcmjs from 'dcmjs';
 import cleanDenaturalizedDataset from './utils/cleanDenaturalizedDataset';
 import MicroscopyService from './services/MicroscopyService';
 
-function transformImageTypeUnnaturalized(entry) {
-  if (entry.vr === 'CS') {
-    return {
-      vr: 'US',
-      Value: entry.Value[0].split('\\'),
-    };
-  }
-  return entry;
-}
-
 class DicomMicroscopyViewport extends Component {
   state = {
     error: null as any,
@@ -250,7 +240,6 @@ class DicomMicroscopyViewport extends Component {
 
   componentDidMount() {
     const { displaySets, viewportOptions } = this.props;
-    const { viewportId } = viewportOptions;
     // Todo-rename: this is always getting the 0
     const displaySet = displaySets[0];
     this.installOpenLayersRenderer(this.container.current, displaySet).then(() => {

extensions/dicom-microscopy/src/getCommandsModule.ts

@@ -124,7 +124,7 @@ export default function getCommandsModule({
       }
 
       // overview
-      const { activeViewportId, viewports } = viewportGridService.getState();
+      const { activeViewportId } = viewportGridService.getState();
       microscopyService.toggleOverviewMap(activeViewportId);
     },
     toggleAnnotations: () => {
@@ -135,28 +135,18 @@ export default function getCommandsModule({
   const definitions = {
     deleteMeasurement: {
       commandFn: actions.deleteMeasurement,
-      storeContexts: [] as any[],
-      options: {},
     },
     setLabel: {
       commandFn: actions.setLabel,
-      storeContexts: [] as any[],
-      options: {},
     },
     setToolActive: {
       commandFn: actions.setToolActive,
-      storeContexts: [] as any[],
-      options: {},
     },
     toggleOverlays: {
       commandFn: actions.toggleOverlays,
-      storeContexts: [] as any[],
-      options: {},
     },
     toggleAnnotations: {
       commandFn: actions.toggleAnnotations,
-      storeContexts: [] as any[],
-      options: {},
     },
   };
 

extensions/dicom-microscopy/src/index.tsx

@@ -2,6 +2,7 @@ import { id } from './id';
 import React, { Suspense, useMemo } from 'react';
 import getPanelModule from './getPanelModule';
 import getCommandsModule from './getCommandsModule';
+import { Types } from '@ohif/core';
 
 import { useViewportGrid } from '@ohif/ui';
 import getDicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler';
@@ -23,14 +24,14 @@ const MicroscopyViewport = props => {
 /**
  * You can remove any of the following modules if you don't need them.
  */
-export default {
+const extension: Types.Extensions.Extension = {
   /**
    * Only required property. Should be a unique value across all extensions.
    * You ID can be anything you want, but it should be unique.
    */
   id,
 
-  async preRegistration({ servicesManager, commandsManager, configuration = {}, appConfig }) {
+  async preRegistration({ servicesManager }) {
     servicesManager.registerService(MicroscopyService.REGISTRATION(servicesManager));
   },
 
@@ -90,6 +91,45 @@ export default {
     ];
   },
 
+  getToolbarModule({ servicesManager }) {
+    return [
+      {
+        name: 'evaluate.microscopyTool',
+        evaluate: ({ button }) => {
+          const { microscopyService } = servicesManager.services;
+
+          const activeInteractions = microscopyService.getActiveInteractions();
+
+          const isPrimaryActive = activeInteractions.find(interactions => {
+            const sameMouseButton = interactions[1].bindings.mouseButtons.includes('left');
+
+            if (!sameMouseButton) {
+              return false;
+            }
+
+            const notDraw = interactions[0] !== 'draw';
+
+            // there seems to be a custom logic for draw tool for some reason
+            return notDraw
+              ? interactions[0] === button.id
+              : interactions[1].geometryType === button.id;
+          });
+
+          return {
+            disabled: false,
+            className: isPrimaryActive
+              ? '!text-black bg-primary-light'
+              : '!text-common-bright hover:!bg-primary-dark hover:!text-primary-light',
+            // Todo: isActive right now is used for nested buttons where the primary
+            // button needs to be fully rounded (vs partial rounded) when active
+            // otherwise it does not have any other use
+            isActive: isPrimaryActive,
+          };
+        },
+      },
+    ];
+  },
+
   /**
    * SopClassHandlerModule should provide a list of sop class handlers that will be
    * available in OHIF for Modes to consume and use to create displaySets from Series.
@@ -113,3 +153,5 @@ export default {
 
   getCommandsModule,
 };
+
+export default extension;

extensions/dicom-microscopy/src/services/MicroscopyService.ts

@@ -573,6 +573,10 @@ export default class MicroscopyService extends PubSubService {
     this.activeInteractions = interactions;
   }
 
+  getActiveInteractions() {
+    return this.activeInteractions;
+  }
+
   /**
    * Triggers the relabelling process for the given RoiAnnotation instance, by
    * publishing the RELABEL event to notify the subscribers