Add additional sub grouping in Add Event menu

chrismaltby · Apr 10, 2024 · c2b27fe · c2b27fe
1 parent d018ccf
commit c2b27fe
Show file tree

Hide file tree

Showing 61 changed files with 364 additions and 49 deletions.
diff --git a/src/components/script/AddScriptEventMenu.tsx b/src/components/script/AddScriptEventMenu.tsx
@@ -33,9 +33,7 @@ import { useDebounce } from "ui/hooks/use-debounce";
 import { ScriptEditorContext } from "./ScriptEditorContext";
 import { defaultVariableForContext } from "shared/lib/scripts/context";
 import { EVENT_TEXT } from "consts";
-import {
-  selectScriptEventDefsWithPresets,
-} from "store/features/scriptEventDefs/scriptEventDefsState";
+import { selectScriptEventDefsWithPresets } from "store/features/scriptEventDefs/scriptEventDefsState";
 import type { ScriptEventDef } from "lib/project/loadScriptEventHandlers";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 import { mapScriptValueLeafNodes } from "shared/lib/scriptValue/helpers";
@@ -59,6 +57,8 @@ interface EventOption {
   value: string;
   group?: string;
   groupLabel?: string;
+  subGroup?: string;
+  subGroupLabel?: string;
   isFavorite: boolean;
   defaultArgs?: Record<string, unknown>;
   event: ScriptEventDef;
@@ -215,29 +215,23 @@ const instanciateScriptEvent = (
 };
 
 const eventToOption =
-  (favorites: string[]) =>
+  (favorites: string[], group?: string) =>
   (event: ScriptEventDef): EventOption => {
     const localisedKey = l10n(event.id as L10NKey); //.replace(/[^:*]*:[ ]*/g, "");
     const name =
       localisedKey !== event.id ? localisedKey : event.name || event.id;
-
-    let eventGroups: string[] = [];
-    if ("groups" in event) {
-      if (Array.isArray(event.groups)) {
-        eventGroups = event.groups;
-      } else if (typeof event.groups === "string") {
-        eventGroups = [event.groups];
-      }
-    }
-
-    const groupName = eventGroups.map((key) => l10n(key as L10NKey)).join(" ");
-
+    const groupName = group ? l10n(group as L10NKey) : undefined;
+    const subGroup =
+      group && event.subGroups?.[group]
+        ? l10n(event.subGroups?.[group] as L10NKey)
+        : undefined;
     return {
       label: name,
       group: groupName,
       value: event.id,
       event,
       isFavorite: favorites.includes(event.id),
+      subGroup,
     };
   };
 
@@ -456,6 +450,19 @@ const sortAlphabeticallyByLabel = (
   return a.label < b.label ? -1 : 1;
 };
 
+const sortAlphabeticallyBySubGroupThenLabel = (
+  a: { subGroup?: string; label: string },
+  b: { subGroup?: string; label: string }
+) => {
+  const aSubGroup = a.subGroup ?? "";
+  const bSubGroup = b.subGroup ?? "";
+
+  if (aSubGroup === bSubGroup) {
+    return a.label.localeCompare(b.label);
+  }
+  return aSubGroup.localeCompare(bSubGroup);
+};
+
 const notDeprecated = (a: { deprecated?: boolean }) => {
   return !a.deprecated;
 };
@@ -577,8 +584,14 @@ const AddScriptEventMenu = ({
         .map((key: string) => ({
           label: key === "" ? l10n("EVENT_GROUP_MISC") : l10n(key as L10NKey),
           options: (groupedEvents[key] || [])
-            .map(eventToOption(favoriteEvents))
-            .sort(sortAlphabeticallyByLabel),
+            .map(eventToOption(favoriteEvents, key))
+            .sort(sortAlphabeticallyBySubGroupThenLabel)
+            .map((item, index, array) => {
+              if (index === 0 || item.subGroup !== array[index - 1].subGroup) {
+                return { ...item, subGroupLabel: item.subGroup };
+              }
+              return item;
+            }),
         }))
         .sort(sortAlphabeticallyByLabel)
         .map((option, optionIndex) => {
@@ -924,36 +937,43 @@ const AddScriptEventMenu = ({
               (options[renderCategoryIndex] as EventOptGroup)?.options &&
               (options[renderCategoryIndex] as EventOptGroup).options.map(
                 (childOption, childOptionIndex) => (
-                  <MenuItem
-                    key={childOption.value}
-                    data-index={childOptionIndex}
-                    selected={selectedIndex === childOptionIndex}
-                    onMouseOver={() => setSelectedIndex(childOptionIndex)}
-                    onClick={() => onSelectOption(childOptionIndex)}
-                    title={childOption.event.description}
-                  >
-                    {childOption.label}
-                    <FlexGrow />
-                    <MenuItemFavorite
-                      visible={
-                        selectedIndex === childOptionIndex ||
-                        childOption.isFavorite
-                      }
-                      isFavorite={childOption.isFavorite}
+                  <React.Fragment key={childOption.value}>
+                    {childOption.subGroupLabel && (
+                      <MenuGroup key={childOption.subGroupLabel}>
+                        {childOption.subGroupLabel}
+                      </MenuGroup>
+                    )}
+                    <MenuItem
+                      key={childOption.value}
+                      data-index={childOptionIndex}
+                      selected={selectedIndex === childOptionIndex}
+                      onMouseOver={() => setSelectedIndex(childOptionIndex)}
+                      onClick={() => onSelectOption(childOptionIndex)}
+                      title={childOption.event.description}
                     >
-                      <Button
-                        size="small"
-                        variant="transparent"
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onToggleFavoriteOption(childOptionIndex);
-                        }}
+                      {childOption.label}
+                      <FlexGrow />
+                      <MenuItemFavorite
+                        visible={
+                          selectedIndex === childOptionIndex ||
+                          childOption.isFavorite
+                        }
+                        isFavorite={childOption.isFavorite}
                       >
-                        <StarIcon />
-                      </Button>
-                    </MenuItemFavorite>
-                  </MenuItem>
+                        <Button
+                          size="small"
+                          variant="transparent"
+                          onClick={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onToggleFavoriteOption(childOptionIndex);
+                          }}
+                        >
+                          <StarIcon />
+                        </Button>
+                      </MenuItemFavorite>
+                    </MenuItem>
+                  </React.Fragment>
                 )
               )}
           </SelectMenuOptions>

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -1105,7 +1105,15 @@
   "EVENT_IF": "If",
   "EVENT_IF_LABEL": "If {condition}",
   "EVENT_IF_DESC": "Conditionally run part of the script if the specified value evaluates to true.",
-
+  "EVENT_GROUP_MULTIPLAYER": "Multiplayer",
+  "EVENT_GROUP_MOVEMENT": "Movement",
+  "EVENT_GROUP_PROPERTIES": "Properties",
+  "EVENT_GROUP_DEVICE": "Device",
+  "EVENT_GROUP_VISIBILITY": "Visibility",
+  "EVENT_GROUP_SCRIPT": "Script",
+  "EVENT_GROUP_TILES": "Tiles",
+  "EVENT_GROUP_SCENE_STACK": "Scene Stack",
+
   "// 10": "Menu -----------------------------------------------------",
 
   "MENU_FILE": "File",

diff --git a/src/lib/events/eventActorActivate.js b/src/lib/events/eventActorActivate.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_ACTIVATE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_PROPERTIES",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_ACTIVATE_LABEL", {
@@ -29,6 +32,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_ACTIVATE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorCollisionsDisable.js b/src/lib/events/eventActorCollisionsDisable.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_COLLISIONS_DISABLE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_PROPERTIES",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_COLLISIONS_DISABLE_LABEL", {
@@ -30,6 +33,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_COLLISIONS_DISABLE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorCollisionsEnable.js b/src/lib/events/eventActorCollisionsEnable.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_COLLISIONS_ENABLE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_PROPERTIES",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_COLLISIONS_ENABLE_LABEL", {
@@ -30,6 +33,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_COLLISIONS_ENABLE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorDeactivate.js b/src/lib/events/eventActorDeactivate.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_DEACTIVATE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_PROPERTIES",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_DEACTIVATE_LABEL", {
@@ -29,6 +32,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_DEACTIVATE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorGetDirection.js b/src/lib/events/eventActorGetDirection.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_GET_DIRECTION";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_VARIABLES",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_GET_DIRECTION_LABEL", {
@@ -38,6 +41,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_GET_DIRECTION_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorGetPosition.js b/src/lib/events/eventActorGetPosition.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_GET_POSITION";
 const groups = ["EVENT_GROUP_ACTOR", "EVENT_GROUP_VARIABLES"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_VARIABLES",
+};
 
 const autoLabel = (fetchArg, _input) => {
   return l10n("EVENT_ACTOR_GET_POSITION_LABEL", {
@@ -59,6 +62,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_GET_POSITION_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorHide.js b/src/lib/events/eventActorHide.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_HIDE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_VISIBILITY",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_HIDE_LABEL", {
@@ -29,6 +32,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_HIDE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorInvoke.js b/src/lib/events/eventActorInvoke.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_INVOKE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_SCRIPT",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_INVOKE_LABEL", {
@@ -28,6 +31,7 @@ module.exports = {
   id,
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
   deprecated: true,

diff --git a/src/lib/events/eventActorMoveCancel.js b/src/lib/events/eventActorMoveCancel.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_MOVE_CANCEL";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_MOVEMENT",
+};
 
 const autoLabel = (fetchArg) => {
   return l10n("EVENT_ACTOR_MOVE_CANCEL_LABEL", {
@@ -30,6 +33,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_MOVE_CANCEL_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
 };
diff --git a/src/lib/events/eventActorMoveRelative.js b/src/lib/events/eventActorMoveRelative.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_MOVE_RELATIVE";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_MOVEMENT",
+};
 
 const autoLabel = (fetchArg, input) => {
   const unitPostfix =
@@ -89,6 +92,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_MOVE_RELATIVE_DESC"),
   autoLabel,
   groups,
+  subGroups,
   fields,
   compile,
   waitUntilAfterInitFade: true,

diff --git a/src/lib/events/eventActorMoveTo.js b/src/lib/events/eventActorMoveTo.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_MOVE_TO";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_MOVEMENT",
+};
 const weight = 2;
 
 const autoLabel = (fetchArg, input) => {
@@ -109,6 +112,7 @@ module.exports = {
   description: l10n("EVENT_ACTOR_MOVE_TO_DESC"),
   autoLabel,
   groups,
+  subGroups,
   weight,
   fields,
   compile,

diff --git a/src/lib/events/eventActorPush.js b/src/lib/events/eventActorPush.js
@@ -2,6 +2,9 @@ const l10n = require("../helpers/l10n").default;
 
 const id = "EVENT_ACTOR_PUSH";
 const groups = ["EVENT_GROUP_ACTOR"];
+const subGroups = {
+  EVENT_GROUP_ACTOR: "EVENT_GROUP_MOVEMENT",
+};
 
 const fields = [
   {
@@ -25,6 +28,7 @@ module.exports = {
   id,
   description: l10n("EVENT_ACTOR_PUSH_DESC"),
   groups,
+  subGroups,
   fields,
   compile,
   waitUntilAfterInitFade: true,