feat(viewport-gap): remove viewport gap and update border behavior (#4835)

platform/app/src/components/ViewportGrid.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 import { Types, MeasurementService } from '@ohif/core';
-import { ViewportGrid, ViewportPane } from '@ohif/ui';
+import { ViewportGrid, ViewportPane } from '@ohif/ui-next';
 import { useViewportGrid } from '@ohif/ui-next';
 import EmptyViewport from './EmptyViewport';
 import classNames from 'classnames';
@@ -284,6 +284,29 @@ function ViewerViewportGrid(props: withAppTypes) {
         viewportGridService.setActiveViewportId(viewportId);
       };
 
+      const getBorderStyle = viewportIndex => {
+        const style = {} as any;
+        const layoutOptions = viewportGridService.getLayoutOptionsFromState(
+          viewportGridService.getState()
+        );
+        const vp = layoutOptions[viewportIndex];
+        if (!vp) {
+          return style;
+        }
+        const { x, y, width, height } = vp;
+        const tolerance = 0.01;
+
+        if (x + width < 1 - tolerance) {
+          style.borderRight = '1px solid #3a3f99';
+        }
+
+        if (y + height < 1 - tolerance) {
+          style.borderBottom = '1px solid #3a3f99';
+        }
+
+        return style;
+      };
+
       viewportPanes[i] = (
         <ViewportPane
           // Note: It is highly important that the key is the viewportId here,
@@ -301,10 +324,11 @@ function ViewerViewportGrid(props: withAppTypes) {
           onInteraction={onInteractionHandler}
           customStyle={{
             position: 'absolute',
-            top: viewportY * 100 + 0.2 + '%',
+            top: viewportY * 100 + '%',
-            left: viewportX * 100 + 0.2 + '%',
+            left: viewportX * 100 + '%',
-            width: viewportWidth * 100 - 0.3 + '%',
+            width: viewportWidth * 100 + '%',
-            height: viewportHeight * 100 - 0.3 + '%',
+            height: viewportHeight * 100 + '%',
+            ...getBorderStyle(i),
           }}
           isActive={isActive}
         >
@@ -343,7 +367,7 @@ function ViewerViewportGrid(props: withAppTypes) {
   return (
     <div
       ref={resizeRef}
-      className="h-full w-full"
+      className="border-secondary-light h-full w-full border"
     >
       <ViewportGrid
         numRows={numRows}

platform/ui-next/src/components/Viewport/ViewportPane.tsx

@@ -58,27 +58,20 @@ function ViewportPane({
       onScroll={onInteractionHandler}
       onWheel={onInteractionHandler}
       className={classNames(
-        'group/pane h-full w-full overflow-hidden rounded-md transition duration-300',
+        'group relative h-full w-full overflow-hidden transition duration-300',
-        {
-          'border-primary-light border-2': isActive,
-          'border-2 border-transparent': !isActive,
-        },
         className
       )}
       style={customStyle}
     >
+      <div className={classNames('relative h-full w-full', className)}>{children}</div>
+
+      {/* Border overlay */}
       <div
-        className={classNames(
+        className={classNames('pointer-events-none absolute inset-0', {
-          'h-full w-full overflow-hidden rounded-md',
+          'border-primary-light border': isActive,
-          {
+          'group-hover:border-primary-light/70 border border-transparent': !isActive,
-            'border border-transparent': isActive,
+        })}
-            'border-secondary-light group-hover/pane:border-primary-light/70 border': !isActive,
+      />
-          },
-          className
-        )}
-      >
-        {children}
-      </div>
     </div>
   );
 }

platform/ui-next/src/contextProviders/ViewportGridProvider.tsx

@@ -503,6 +503,7 @@ export function ViewportGridProvider({ children, service }: ViewportGridProvider
     getActiveViewportOptionByKey,
     setViewportGridSizeChanged: props => service.setViewportGridSizeChanged(props),
     publishViewportsReady: () => service.publishViewportsReady(),
+    getLayoutOptionsFromState: state => service.getLayoutOptionsFromState(state),
   };
 
   return (