Disable canvas if not active (#1890)

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -41,9 +41,9 @@ function ViewportPane({
     }
   };
 
-  const onInteractionHandler = () => {
-    onInteraction();
+  const onInteractionHandler = (event) => {
     focus();
+    onInteraction(event);
   };
 
   const refHandler = element => {
@@ -101,7 +101,7 @@ ViewportPane.propTypes = {
   onDoubleClick: PropTypes.func,
 };
 
-const noop = () => {};
+const noop = () => { };
 
 ViewportPane.defaultProps = {
   onInteraction: noop,

platform/viewer/src/components/ViewportGrid.jsx

@@ -7,6 +7,7 @@ import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
 import EmptyViewport from './EmptyViewport';
 import { classes } from '@ohif/core';
 const { ImageSet } = classes;
+import classNames from 'classnames';
 
 function ViewerViewportGrid(props) {
   const { servicesManager, viewportComponents, dataSource } = props;
@@ -15,10 +16,6 @@ function ViewerViewportGrid(props) {
     viewportGridService,
   ] = useViewportGrid();
 
-  const setActiveViewportIndex = index => {
-    viewportGridService.setActiveViewportIndex(index);
-  };
-
   // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { DisplaySetService } = servicesManager.services;
 
@@ -148,6 +145,7 @@ function ViewerViewportGrid(props) {
 
     for (let i = 0; i < numViewportPanes; i++) {
       const viewportIndex = i;
+      const isActive = activeViewportIndex === viewportIndex;
       const paneMetadata = viewports[i] || {};
       const { displaySetInstanceUID } = paneMetadata;
 
@@ -159,8 +157,15 @@ function ViewerViewportGrid(props) {
         viewportComponents
       );
 
-      const onInterationHandler = () => {
-        setActiveViewportIndex(viewportIndex);
+      const onInterationHandler = (event) => {
+        if (isActive) return;
+
+        if (event) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        viewportGridService.setActiveViewportIndex(viewportIndex);
       };
 
       // TEMP -> Double click disabled for now
@@ -173,13 +178,15 @@ function ViewerViewportGrid(props) {
           acceptDropsFor="displayset"
           onDrop={onDropHandler.bind(null, viewportIndex)}
           onInteraction={onInterationHandler}
-          isActive={activeViewportIndex === viewportIndex}
+          isActive={isActive}
         >
-          <ViewportComponent
-            displaySet={displaySet}
-            viewportIndex={viewportIndex}
-            dataSource={dataSource}
-          />
+          <div className={classNames('h-full w-full flex flex-col align-center', { 'pointer-events-none': !isActive })}>
+            <ViewportComponent
+              displaySet={displaySet}
+              viewportIndex={viewportIndex}
+              dataSource={dataSource}
+            />
+          </div>
         </ViewportPane>
       );
     }