From 4985fbf5a67fddb44723db06230a841c300c0604 Mon Sep 17 00:00:00 2001 From: Igor Octaviano <igoroctaviano@gmail.com> Date: Fri, 10 Jul 2020 16:52:17 -0300 Subject: [PATCH] Disable canvas if not active (#1890) --- .../components/ViewportPane/ViewportPane.jsx | 6 ++-- .../viewer/src/components/ViewportGrid.jsx | 31 ++++++++++++------- 2 files changed, 22 insertions(+), 15 deletions(-) diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.jsx b/platform/ui/src/components/ViewportPane/ViewportPane.jsx index 61864dcfc5d..dfeaf00ee2a 100644 --- a/platform/ui/src/components/ViewportPane/ViewportPane.jsx +++ b/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, diff --git a/platform/viewer/src/components/ViewportGrid.jsx b/platform/viewer/src/components/ViewportGrid.jsx index 3eefc6abad6..48ef18a30e6 100644 --- a/platform/viewer/src/components/ViewportGrid.jsx +++ b/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> ); }