Fix issue where scene context menu "Set Starting Scene Direction" inp…

…ut wasn't working as expected
chrismaltby · Oct 15, 2024 · d911e5c · d911e5c
1 parent 05026d3
commit d911e5c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git a/src/components/ui/lists/EntityListItem.tsx b/src/components/ui/lists/EntityListItem.tsx
@@ -63,7 +63,10 @@ type EntityListItemProps<T extends EntityListItemData> = {
   collapsable?: boolean;
   onToggleCollapse?: () => void;
   onContextMenu?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-  renderContextMenu?: (item: T) => JSX.Element[] | undefined;
+  renderContextMenu?: (
+    item: T,
+    closeMenu: () => void
+  ) => JSX.Element[] | undefined;
   renderLabel?: (item: T) => React.ReactNode;
 } & (
   | {
@@ -111,22 +114,24 @@ export const EntityListItem = <T extends EntityListItemData>({
       y: number;
       menu: JSX.Element[];
     }>();
+
+  const onContextMenuClose = useCallback(() => {
+    setContextMenu(undefined);
+  }, []);
+
   const onContextMenu = useCallback(
     (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
       if (!renderContextMenu) {
         return;
       }
-      const menu = renderContextMenu(item);
+      const menu = renderContextMenu(item, onContextMenuClose);
       if (!menu) {
         return;
       }
       setContextMenu({ x: e.pageX, y: e.pageY, menu });
     },
-    [item, renderContextMenu]
+    [item, renderContextMenu, onContextMenuClose]
   );
-  const onContextMenuClose = useCallback(() => {
-    setContextMenu(undefined);
-  }, []);
 
   const onRenameComplete = useCallback(
     (newValue: string) => {

diff --git a/src/components/ui/menu/Menu.tsx b/src/components/ui/menu/Menu.tsx
@@ -14,7 +14,7 @@ import {
 export const Menu = forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
->((props, outerRef) => <StyledMenu ref={outerRef} {...props} />);
+>((props, outerRef) => <StyledMenu ref={outerRef} role="menu" {...props} />);
 
 export interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
   readonly "data-index"?: number;

diff --git a/src/components/world/NavigatorScenes.tsx b/src/components/world/NavigatorScenes.tsx
@@ -229,7 +229,7 @@ export const NavigatorScenes: FC<NavigatorScenesProps> = ({
   }, []);
 
   const renderContextMenu = useCallback(
-    (item: SceneNavigatorItem) => {
+    (item: SceneNavigatorItem, onClose: () => void) => {
       if (item.type === "scene") {
         return renderSceneContextMenu({
           dispatch,
@@ -240,6 +240,7 @@ export const NavigatorScenes: FC<NavigatorScenesProps> = ({
           hoverX: 0,
           hoverY: 0,
           onRename: () => setRenameId(item.id),
+          onClose,
         });
       } else if (item.type === "actor") {
         return renderActorContextMenu({

diff --git a/src/components/world/SceneView.tsx b/src/components/world/SceneView.tsx
@@ -573,6 +573,10 @@ const SceneView = memo(
         menu: JSX.Element[];
       }>();
 
+    const onContextMenuClose = useCallback(() => {
+      setContextMenu(undefined);
+    }, []);
+
     const renderContextMenu = useCallback(() => {
       return renderSceneContextMenu({
         dispatch,
@@ -582,6 +586,7 @@ const SceneView = memo(
         startDirection,
         hoverX,
         hoverY,
+        onClose: onContextMenuClose,
       });
     }, [
       dispatch,
@@ -591,6 +596,7 @@ const SceneView = memo(
       sceneSelectionIds,
       startDirection,
       startSceneId,
+      onContextMenuClose,
     ]);
 
     const onContextMenu = useCallback(
@@ -610,10 +616,6 @@ const SceneView = memo(
       [renderContextMenu, tool]
     );
 
-    const onContextMenuClose = useCallback(() => {
-      setContextMenu(undefined);
-    }, []);
-
     const onToggleSelection = useCallback(() => {
       dispatch(editorActions.toggleSceneSelectedId(id));
     }, [dispatch, id]);

diff --git a/src/components/world/renderSceneContextMenu.tsx b/src/components/world/renderSceneContextMenu.tsx
@@ -17,6 +17,7 @@ interface SceneContextMenuProps {
   hoverX: number;
   hoverY: number;
   onRename?: () => void;
+  onClose?: () => void;
 }
 
 const renderSceneContextMenu = ({
@@ -28,6 +29,7 @@ const renderSceneContextMenu = ({
   startDirection,
   hoverX,
   hoverY,
+  onClose,
 }: SceneContextMenuProps) => {
   return [
     <MenuSection key="label" style={{ paddingRight: 10, marginBottom: 5 }}>
@@ -60,7 +62,7 @@ const renderSceneContextMenu = ({
             <div key={color} style={{ marginRight: color === "gray" ? 0 : 5 }}>
               <LabelButton
                 color={color}
-                onClick={() =>
+                onClick={() => {
                   dispatch(
                     additionalSceneIds.length > 1
                       ? entitiesActions.editScenes(
@@ -77,8 +79,9 @@ const renderSceneContextMenu = ({
                             labelColor: color,
                           },
                         })
-                  )
-                }
+                  );
+                  onClose?.();
+                }}
               />
             </div>
           )
@@ -114,6 +117,7 @@ const renderSceneContextMenu = ({
                 startY: hoverY,
               })
             );
+            onClose?.();
           }}
         />
       </div>