feat: additional outline indicators (#246)

thenick775 · Jan 19, 2025 · 50aab09 · 50aab09
1 parent 3b3c223
commit 50aab09
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 4 deletions.
diff --git a/gbajs3/src/components/controls/control-panel.tsx b/gbajs3/src/components/controls/control-panel.tsx
@@ -54,6 +54,7 @@ import type { IconType } from 'react-icons';
 type PanelProps = {
   $controlled: boolean;
   $isLargerThanPhone: boolean;
+  $areItemsDraggable: boolean;
 };
 
 type SliderIconButtonProps = {
@@ -110,6 +111,15 @@ const Panel = styled.ul<PanelProps>`
     justify-content: space-evenly;
     gap: 10px;
   `}
+
+  ${({ $areItemsDraggable = false, theme }) =>
+    $areItemsDraggable &&
+    `
+    outline-color: ${theme.gbaThemeBlue};
+    outline-style: dashed;
+    outline-width: 2px;
+    outline-offset: -2px;
+  `}
 `;
 
 const PanelControlWrapper = styled.li`
@@ -509,6 +519,7 @@ export const ControlPanel = () => {
         <Panel
           $controlled={isControlled}
           $isLargerThanPhone={isLargerThanPhone}
+          $areItemsDraggable={areItemsDraggable}
         >
           <IconContext.Provider value={{ size: '2em' }}>
             <PanelButton

diff --git a/gbajs3/src/components/screen/__snapshots__/screen.spec.tsx.snap b/gbajs3/src/components/screen/__snapshots__/screen.spec.tsx.snap
@@ -18,12 +18,24 @@ exports[`<Screen /> > renders with default desktop position and size 1`] = `
 
 .c0 {
   background-color: #000;
-  border: solid 1px #000;
   overflow: visible;
   width: 100dvw;
   height: calc(100dvw * 2 / 3);
 }
 
+.c0::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  margin: 2px;
+  pointer-events: none;
+  border: 2px dashed #1c76fd;
+  visibility: hidden;
+}
+
 @media only screen and (min-width: 600px) {
   .c0 {
     width: min(       calc(100dvw - 285px),       calc(85dvh * 3 / 2)     );
@@ -71,12 +83,24 @@ exports[`<Screen /> > renders with default mobile position and size 1`] = `
 
 .c0 {
   background-color: #000;
-  border: solid 1px #000;
   overflow: visible;
   width: 100dvw;
   height: calc(100dvw * 2 / 3);
 }
 
+.c0::after {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  margin: 2px;
+  pointer-events: none;
+  border: 2px dashed #1c76fd;
+  visibility: hidden;
+}
+
 @media only screen and (min-width: 600px) {
   .c0 {
     width: min(       calc(100dvw - 285px),       calc(85dvh * 3 / 2)     );

diff --git a/gbajs3/src/components/screen/screen.tsx b/gbajs3/src/components/screen/screen.tsx
@@ -13,6 +13,8 @@ import {
 import { NavigationMenuWidth } from '../navigation-menu/consts.tsx';
 import { GripperHandle } from '../shared/gripper-handle.tsx';
 
+type ScreenWrapperProps = RndProps & { $areItemsDraggable: boolean };
+
 const defaultGBACanvasWidth = 240;
 const defaultGBACanvasHeight = 160;
 
@@ -31,9 +33,8 @@ const RenderCanvas = styled.canvas`
   image-rendering: pixelated;
 `;
 
-const ScreenWrapper = styled(Rnd)<RndProps>`
+const ScreenWrapper = styled(Rnd)<ScreenWrapperProps>`
   background-color: ${({ theme }) => theme.pureBlack};
-  border: solid 1px ${({ theme }) => theme.pureBlack};
   overflow: visible;
   width: 100dvw;
   height: calc(100dvw * 2 / 3);
@@ -50,6 +51,20 @@ const ScreenWrapper = styled(Rnd)<RndProps>`
     width: calc(100dvh * (3 / 2));
     height: 100dvh;
   }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    margin: 2px;
+    pointer-events: none;
+    border: 2px dashed ${({ theme }) => theme.gbaThemeBlue};
+    visibility: ${({ $areItemsDraggable }) =>
+      $areItemsDraggable ? 'visible' : 'hidden'};
+  }
 `;
 
 // overrides rnd styles to fallback to css
@@ -151,6 +166,7 @@ export const Screen = () => {
           position: { ...position }
         });
       }}
+      $areItemsDraggable={areItemsDraggable}
     >
       <RenderCanvas
         data-testid="screen-wrapper:render-canvas"