feat: draggable hamburger button, additional outline indicators

thenick775 · Jan 15, 2025 · daad9bf · daad9bf
1 parent 3f66747
commit daad9bf
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 14 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/navigation-menu/navigation-menu.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
@@ -22,6 +22,7 @@ import {
   BiMenu,
   BiFileFind
 } from 'react-icons/bi';
+import { Rnd } from 'react-rnd';
 import { styled, useTheme } from 'styled-components';
 
 import { NavigationMenuWidth } from './consts.tsx';
@@ -31,7 +32,9 @@ import {
   useEmulatorContext,
   useAuthContext,
   useModalContext,
-  useRunningContext
+  useRunningContext,
+  useDragContext,
+  useLayoutContext
 } from '../../hooks/context.tsx';
 import { useQuickReload } from '../../hooks/emulator/use-quick-reload.tsx';
 import { useLogout } from '../../hooks/use-logout.tsx';
@@ -108,7 +111,9 @@ const MenuItemWrapper = styled.ul`
   }
 `;
 
-const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
+const HamburgerButton = styled(ButtonBase)<
+  ExpandableComponentProps & { $areItemsDraggable: boolean }
+>`
   background-color: ${({ theme }) => theme.mediumBlack};
   color: ${({ theme }) => theme.pureWhite};
   z-index: 200;
@@ -117,6 +122,7 @@ const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
   top: 12px;
   transition: 0.4s ease-in-out;
   -webkit-transition: 0.4s ease-in-out;
+  transition-property: left;
   cursor: pointer;
   border-radius: 0.25rem;
   border: none;
@@ -137,6 +143,14 @@ const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
     outline: 0;
     box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
   }
+
+  ${({ $areItemsDraggable = false, theme }) =>
+    $areItemsDraggable &&
+    `
+    outline-color: ${theme.gbaThemeBlue};
+    outline-style: dashed;
+    outline-width: 2px;
+  `}
 `;
 
 const NavigationMenuClearDismiss = styled.button`
@@ -156,29 +170,43 @@ export const NavigationMenu = () => {
   const { canvas, emulator } = useEmulatorContext();
   const { isRunning } = useRunningContext();
   const { execute: executeLogout } = useLogout();
+  const { areItemsDraggable } = useDragContext();
+  const { layouts, setLayout } = useLayoutContext();
   const theme = useTheme();
   const isLargerThanPhone = useMediaQuery(theme.isLargerThanPhone);
   const isMobileLandscape = useMediaQuery(theme.isMobileLandscape);
   const menuHeaderId = useId();
   const quickReload = useQuickReload();
-
   const isMenuItemDisabledByAuth = !isAuthenticated();
   const hasApiLocation = !!import.meta.env.VITE_GBA_SERVER_LOCATION;
 
   useShowLoadPublicRoms();
 
   return (
     <>
-      <HamburgerButton
-        id="menu-btn"
-        $isExpanded={isExpanded}
-        onClick={() => setIsExpanded((prevState) => !prevState)}
-        aria-label="Menu Toggle"
+      <Rnd
+        dragAxis="y"
+        disableDragging={!areItemsDraggable}
+        enableResizing={false}
+        bounds="body"
+        position={layouts?.hamburgerButton?.position}
+        style={{ zIndex: 200 }}
+        onDragStop={(_, data) => {
+          setLayout('hamburgerButton', { position: { x: data.x, y: data.y } });
+        }}
       >
-        <BiMenu
-          style={{ height: '29px', width: '29px', verticalAlign: 'middle' }}
-        />
-      </HamburgerButton>
+        <HamburgerButton
+          id="menu-btn"
+          $isExpanded={isExpanded}
+          onClick={() => setIsExpanded((prevState) => !prevState)}
+          aria-label="Menu Toggle"
+          $areItemsDraggable={areItemsDraggable}
+        >
+          <BiMenu
+            style={{ height: '29px', width: '29px', verticalAlign: 'middle' }}
+          />
+        </HamburgerButton>
+      </Rnd>
       <NavigationMenuWrapper
         data-testid="menu-wrapper"
         id="menu-wrapper"

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,15 @@ const ScreenWrapper = styled(Rnd)<RndProps>`
     width: calc(100dvh * (3 / 2));
     height: 100dvh;
   }
+
+  ${({ $areItemsDraggable = false, theme }) =>
+    $areItemsDraggable &&
+    `
+    outline-color: ${theme.gbaThemeBlue};
+    outline-style: dashed;
+    outline-width: 2px;
+    outline-offset: -2px;
+  `}
 `;
 
 // overrides rnd styles to fallback to css
@@ -151,6 +161,7 @@ export const Screen = () => {
           position: { ...position }
         });
       }}
+      $areItemsDraggable={areItemsDraggable}
     >
       <RenderCanvas
         data-testid="screen-wrapper:render-canvas"