Revert "feat: draggable menu button (#250)"

This reverts commit a2a4944.
thenick775 · Jan 27, 2025 · 76d2a7f · 76d2a7f
1 parent 8116bb7
commit 76d2a7f
Show file tree

Hide file tree

Showing 13 changed files with 104 additions and 204 deletions.
diff --git a/gbajs3/src/components/controls/control-panel.spec.tsx b/gbajs3/src/components/controls/control-panel.spec.tsx
@@ -32,9 +32,9 @@ describe('<ControlPanel />', () => {
 
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
       ...original(),
-      initialBounds: {
-        ...original().initialBounds,
-        screen: { left: 0, bottom: 0 } as DOMRect
+      layouts: {
+        ...original().layouts,
+        screen: { initialBounds: { left: 0, bottom: 0 } as DOMRect }
       }
     }));
   });
@@ -95,28 +95,21 @@ describe('<ControlPanel />', () => {
   });
 
   it('sets initial bounds when rendered', async () => {
-    const setInitialBoundSpy = vi.fn();
+    const setLayoutSpy = vi.fn();
 
     const { useLayoutContext: originalLayout } = await vi.importActual<
       typeof contextHooks
     >('../../hooks/context.tsx');
 
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
       ...originalLayout(),
-      setInitialBound: setInitialBoundSpy
+      setLayout: setLayoutSpy
     }));
 
     renderWithContext(<ControlPanel />);
 
-    expect(setInitialBoundSpy).toHaveBeenCalledWith('controlPanel', {
-      bottom: 0,
-      height: 0,
-      left: 0,
-      right: 0,
-      top: 0,
-      width: 0,
-      x: 0,
-      y: 0
+    expect(setLayoutSpy).toHaveBeenCalledWith('controlPanel', {
+      initialBounds: expect.anything()
     });
   });
 
@@ -133,11 +126,14 @@ describe('<ControlPanel />', () => {
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
       ...originalLayout(),
       setLayout: setLayoutSpy,
-      initialBounds: { screen: new DOMRect() }
+      hasSetLayout: true,
+      layouts: { screen: { initialBounds: new DOMRect() } }
     }));
 
     renderWithContext(<ControlPanel />);
 
+    setLayoutSpy.mockClear(); // clear calls from initial render
+
     // simulate mouse events on wrapper
     fireEvent.mouseDown(
       screen.getByTestId('control-panel-wrapper'),
@@ -168,12 +164,11 @@ describe('<ControlPanel />', () => {
 
     // needs to be a consistent object
     const testLayout = {
-      clearLayoutsAndBounds: vi.fn(),
+      clearLayouts: vi.fn(),
       setLayout: setLayoutSpy,
       setLayouts: vi.fn(),
-      setInitialBound: vi.fn(),
-      layouts: {},
-      initialBounds: { screen: new DOMRect() }
+      hasSetLayout: true,
+      layouts: { screen: { initialBounds: new DOMRect() } }
     };
 
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(
@@ -182,6 +177,8 @@ describe('<ControlPanel />', () => {
 
     renderWithContext(<ControlPanel />);
 
+    setLayoutSpy.mockClear(); // clear calls from initial render
+
     fireEvent.resize(screen.getByTestId('control-panel-wrapper'));
 
     // simulate mouse events on a resize handle

diff --git a/gbajs3/src/components/controls/control-panel.tsx b/gbajs3/src/components/controls/control-panel.tsx
@@ -81,8 +81,7 @@ export const ControlPanel = () => {
   const { isRunning } = useRunningContext();
   const { areItemsDraggable, setAreItemsDraggable } = useDragContext();
   const { areItemsResizable, setAreItemsResizable } = useResizeContext();
-  const { layouts, setLayout, initialBounds, setInitialBound } =
-    useLayoutContext();
+  const { layouts, setLayout, hasSetLayout } = useLayoutContext();
   const theme = useTheme();
   const isLargerThanPhone = useMediaQuery(theme.isLargerThanPhone);
   const isMobileLandscape = useMediaQuery(theme.isMobileLandscape);
@@ -105,16 +104,15 @@ export const ControlPanel = () => {
 
   const refSetLayout = useCallback(
     (node: Rnd | null) => {
-      if (!initialBounds?.controlPanel && node)
-        setInitialBound(
-          'controlPanel',
-          node?.resizableElement.current?.getBoundingClientRect()
-        );
+      if (!hasSetLayout && node)
+        setLayout('controlPanel', {
+          initialBounds: node.resizableElement.current?.getBoundingClientRect()
+        });
     },
-    [initialBounds?.controlPanel, setInitialBound]
+    [setLayout, hasSetLayout]
   );
 
-  const canvasBounds = initialBounds?.screen;
+  const canvasBounds = layouts?.screen?.initialBounds;
 
   if (!canvasBounds) return null;
 

diff --git a/gbajs3/src/components/controls/virtual-controls.spec.tsx b/gbajs3/src/components/controls/virtual-controls.spec.tsx
@@ -22,9 +22,9 @@ describe('<VirtualControls />', () => {
 
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
       ...original(),
-      initialBounds: {
-        ...original().initialBounds,
-        controlPanel: { left: 0, bottom: 0 } as DOMRect
+      layouts: {
+        ...original().layouts,
+        controlPanel: { initialBounds: { left: 0, bottom: 0 } as DOMRect }
       }
     }));
   });

diff --git a/gbajs3/src/components/controls/virtual-controls.tsx b/gbajs3/src/components/controls/virtual-controls.tsx
@@ -61,7 +61,7 @@ export const VirtualControls = () => {
   const { isRunning } = useRunningContext();
   const { isAuthenticated } = useAuthContext();
   const { setModalContent, setIsModalOpen } = useModalContext();
-  const { initialBounds } = useLayoutContext();
+  const { layouts } = useLayoutContext();
   const virtualControlToastId = useId();
   const quickReload = useQuickReload();
   const { syncActionIfEnabled } = useAddCallbacks();
@@ -73,8 +73,8 @@ export const VirtualControls = () => {
     AreVirtualControlsEnabledProps | undefined
   >(virtualControlsLocalStorageKey);
 
-  const controlPanelBounds = initialBounds?.controlPanel;
-  const canvasBounds = initialBounds?.screen;
+  const controlPanelBounds = layouts?.controlPanel?.initialBounds;
+  const canvasBounds = layouts?.screen?.initialBounds;
 
   if (!controlPanelBounds) return null;
 

diff --git a/gbajs3/src/components/modals/controls.spec.tsx b/gbajs3/src/components/modals/controls.spec.tsx
@@ -95,14 +95,14 @@ describe('<ControlsModal />', () => {
   });
 
   it('resets movable control layouts', async () => {
-    const clearLayoutsAndBoundsSpy = vi.fn();
+    const clearLayoutsSpy = vi.fn();
     const { useLayoutContext: original } = await vi.importActual<
       typeof contextHooks
     >('../../hooks/context.tsx');
 
     vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
       ...original(),
-      clearLayoutsAndBounds: clearLayoutsAndBoundsSpy
+      clearLayouts: clearLayoutsSpy
     }));
 
     renderWithContext(<ControlsModal />);
@@ -115,7 +115,7 @@ describe('<ControlsModal />', () => {
 
     await userEvent.click(resetPositionsButton);
 
-    expect(clearLayoutsAndBoundsSpy).toHaveBeenCalledOnce();
+    expect(clearLayoutsSpy).toHaveBeenCalledOnce();
   });
 
   it('closes modal using the close button', async () => {

diff --git a/gbajs3/src/components/modals/controls.tsx b/gbajs3/src/components/modals/controls.tsx
@@ -71,7 +71,7 @@ const ControlTabs = ({
   resetPositionsButtonId,
   setIsSuccessfulSubmit
 }: ControlTabsProps) => {
-  const { clearLayoutsAndBounds } = useLayoutContext();
+  const { clearLayouts } = useLayoutContext();
   const [value, setValue] = useState(0);
 
   const tabIndexToFormId = (tabIndex: number) => {
@@ -116,7 +116,7 @@ const ControlTabs = ({
         <Button
           id={resetPositionsButtonId}
           sx={{ marginTop: '10px' }}
-          onClick={clearLayoutsAndBounds}
+          onClick={clearLayouts}
         >
           Reset All Positions
         </Button>

diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.spec.tsx
@@ -1,4 +1,4 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as toast from 'react-hot-toast';
 import { describe, expect, it, vi } from 'vitest';
@@ -433,66 +433,4 @@ describe('<NavigationMenu />', () => {
       }
     );
   });
-
-  describe('menu button', () => {
-    const initialPos = {
-      clientX: 0,
-      clientY: 0
-    };
-    const movements = [
-      { clientX: 0, clientY: 220 },
-      { clientX: 0, clientY: 120 }
-    ];
-
-    it('sets layout on drag', async () => {
-      const setLayoutSpy = vi.fn();
-      const { useLayoutContext: originalLayout, useDragContext: originalDrag } =
-        await vi.importActual<typeof contextHooks>('../../hooks/context.tsx');
-
-      vi.spyOn(contextHooks, 'useDragContext').mockImplementation(() => ({
-        ...originalDrag(),
-        areItemsDraggable: true
-      }));
-
-      vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
-        ...originalLayout(),
-        setLayout: setLayoutSpy
-      }));
-
-      renderWithContext(<NavigationMenu />);
-
-      fireEvent.mouseDown(screen.getByLabelText('Menu Toggle'), initialPos);
-      fireEvent.mouseMove(document, movements[0]);
-      fireEvent.mouseUp(document, movements[1]);
-
-      expect(setLayoutSpy).toHaveBeenCalledOnce();
-      expect(setLayoutSpy).toHaveBeenCalledWith('menuButton', {
-        position: {
-          x: movements[1].clientX,
-          y: movements[1].clientY
-        }
-      });
-    });
-
-    it('renders with existing layout', async () => {
-      const { useLayoutContext: originalLayout, useDragContext: originalDrag } =
-        await vi.importActual<typeof contextHooks>('../../hooks/context.tsx');
-
-      vi.spyOn(contextHooks, 'useDragContext').mockImplementation(() => ({
-        ...originalDrag(),
-        areItemsDraggable: true
-      }));
-
-      vi.spyOn(contextHooks, 'useLayoutContext').mockImplementation(() => ({
-        ...originalLayout(),
-        layouts: { menuButton: { position: { x: 0, y: 200 } } }
-      }));
-
-      renderWithContext(<NavigationMenu />);
-
-      expect(screen.getByLabelText('Menu Toggle')).toHaveStyle({
-        transform: 'translate(0px,200px)'
-      });
-    });
-  });
 });
diff --git a/gbajs3/src/components/navigation-menu/navigation-menu.tsx b/gbajs3/src/components/navigation-menu/navigation-menu.tsx
@@ -1,6 +1,5 @@
 import { useMediaQuery } from '@mui/material';
-import { useId, useRef, useState } from 'react';
-import Draggable from 'react-draggable';
+import { useId, useState } from 'react';
 import toast from 'react-hot-toast';
 import {
   BiInfoCircle,
@@ -32,9 +31,7 @@ import {
   useEmulatorContext,
   useAuthContext,
   useModalContext,
-  useRunningContext,
-  useDragContext,
-  useLayoutContext
+  useRunningContext
 } from '../../hooks/context.tsx';
 import { useQuickReload } from '../../hooks/emulator/use-quick-reload.tsx';
 import { useLogout } from '../../hooks/use-logout.tsx';
@@ -111,9 +108,7 @@ const MenuItemWrapper = styled.ul`
   }
 `;
 
-const HamburgerButton = styled(ButtonBase)<
-  ExpandableComponentProps & { $areItemsDraggable: boolean }
->`
+const HamburgerButton = styled(ButtonBase)<ExpandableComponentProps>`
   background-color: ${({ theme }) => theme.mediumBlack};
   color: ${({ theme }) => theme.pureWhite};
   z-index: 200;
@@ -122,7 +117,6 @@ const HamburgerButton = styled(ButtonBase)<
   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;
@@ -143,14 +137,6 @@ const HamburgerButton = styled(ButtonBase)<
     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`
@@ -165,14 +151,11 @@ const NavigationMenuClearDismiss = styled.button`
 
 export const NavigationMenu = () => {
   const [isExpanded, setIsExpanded] = useState(true);
-  const menuButtonRef = useRef<HTMLButtonElement | null>(null);
   const { setModalContent, setIsModalOpen } = useModalContext();
   const { isAuthenticated } = useAuthContext();
   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);
@@ -186,29 +169,16 @@ export const NavigationMenu = () => {
 
   return (
     <>
-      <Draggable
-        nodeRef={menuButtonRef}
-        bounds="parent"
-        axis="y"
-        position={layouts?.menuButton?.position ?? { x: 0, y: 0 }}
-        disabled={!areItemsDraggable}
-        onStop={(_, data) =>
-          setLayout('menuButton', { position: { x: 0, y: data.y } })
-        }
+      <HamburgerButton
+        id="menu-btn"
+        $isExpanded={isExpanded}
+        onClick={() => setIsExpanded((prevState) => !prevState)}
+        aria-label="Menu Toggle"
       >
-        <HamburgerButton
-          ref={menuButtonRef}
-          id="menu-btn"
-          $isExpanded={isExpanded}
-          onClick={() => setIsExpanded((prevState) => !prevState)}
-          aria-label="Menu Toggle"
-          $areItemsDraggable={areItemsDraggable}
-        >
-          <BiMenu
-            style={{ height: '29px', width: '29px', verticalAlign: 'middle' }}
-          />
-        </HamburgerButton>
-      </Draggable>
+        <BiMenu
+          style={{ height: '29px', width: '29px', verticalAlign: 'middle' }}
+        />
+      </HamburgerButton>
       <NavigationMenuWrapper
         data-testid="menu-wrapper"
         id="menu-wrapper"