feat: Add entity debug drawing (#4)

client/classes/entity.lua

@@ -3,6 +3,7 @@ Entity = {}
 function Entity.new(interiorId, mloPortalIndex, entityIndex, mloLocation)
     local entity = {}
 
+    entity.index = entityIndex
     entity.linkType = 1
     entity.maxOcclusion = 0.5
     entity.modelHashKey = GetInteriorPortalEntityArchetype(interiorId, mloPortalIndex, entityIndex)

client/nui.lua

@@ -28,6 +28,12 @@ RegisterNUICallback('ht_mlotool:debugDrawToggle', function(data, cb)
     UpdateDebugDraw(data.info, data.outline, data.fill, data.navigate)
 end)
 
+RegisterNUICallback('ht_mlotool:debugEntityToggle', function(data, cb)
+    cb({})
+
+    UpdateDebugEntities(data.portalIndex, data.entityIndex, data.debug)
+end)
+
 RegisterNUICallback('ht_mlotool:fetchLocales', function(_, cb)
     local lang = GetConvar('ox:locale', 'en')
     local locales = json.decode(LoadResourceFile(cache.resource, ('locales/%s.json'):format(lang)))

locales/en.json

@@ -28,6 +28,7 @@
 
     "ui_blank": "<Blank>",
     "ui_close": "Close",
+    "ui_debug": "Debug",
     "ui_debug_comments": "Add Debug Comments",
     "ui_debug_comments_info": "Whether or not to add debug comments to the output file(s). NOTE: These should be used for debugging only, CodeWalker currently parses the comments incorrectly.",
     "ui_file_options": "File Generation Options",

web/src/App.tsx

@@ -61,10 +61,9 @@ const App: React.FC = () => {
     });
   });
 
-  const setNavigatedPortal = usePortalsStore((state) => state.setNavigatedPortal);
-  useNuiEvent("ht_mlotool:cancelNavigation", (data: any) => {
-    setNavigatedPortal(null);
-  });
+  const [setNavigatedPortal, resetDebugEntities] = usePortalsStore((state) => [state.setNavigatedPortal, state.resetDebugEntities]);
+  useNuiEvent("ht_mlotool:cancelNavigation", () => setNavigatedPortal(null));
+  useNuiEvent('ht_mlotool:cancelEntityDebug', resetDebugEntities);
 
   useHotkeys([
     ["Escape", exitUI]

web/src/layouts/views/portals/components/EntitySettings.tsx

@@ -1,16 +1,23 @@
-import { Center, Checkbox, Text, Tooltip } from "@mantine/core";
+import { Center, Checkbox, Switch, Text, Tooltip } from "@mantine/core";
+import { getHotkeyHandler } from "@mantine/hooks";
 import { useEffect, useState } from "react";
 import { MemoNumberInput } from "../../../shared/Inputs";
+import { useVisibility } from "../../../../providers/VisibilityProvider";
 import { useGeneralStore } from "../../../../store/general";
+import { usePortalsStore } from "../../../../store/portals";
+import { fetchNui } from "../../../../utils/fetchNui";
 
 interface Props {
   portalIndex: number;
   entityIndex: number;
 }
 
 const EntitySettings: React.FC<Props> = (props) => {
+  const exitUi = useVisibility((state) => state.exitUI);
   const mlo = useGeneralStore((state) => state.mlo);
+  const [debugEntities, addDebugEntity] = usePortalsStore((state) => [state.debugEntities, state.addDebugEntity])
   const [activeEntity, setActiveEntity] = useState(mlo?.portals[props.portalIndex].entities[props.entityIndex]);
+  let key = `${props.portalIndex}:${props.entityIndex}`;
 
   let timer: NodeJS.Timeout;
   useEffect(() => {
@@ -26,6 +33,13 @@ const EntitySettings: React.FC<Props> = (props) => {
     return () => clearTimeout(timer);
   }, [activeEntity]);
 
+  const handleDebugToggle = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!debugEntities || !key) return;
+
+    addDebugEntity(key, e.currentTarget.checked);
+    fetchNui("ht_mlotool:debugEntityToggle", { portalIndex: props.portalIndex, entityIndex: props.entityIndex, debug: e.currentTarget.checked }, "1")
+  }
+
   return (
     <tr>
       <td>
@@ -56,6 +70,7 @@ const EntitySettings: React.FC<Props> = (props) => {
                 setActiveEntity({ ...activeEntity, isDoor: e.currentTarget.checked });
               }
             }}
+            onKeyDown={getHotkeyHandler([["Escape", exitUi]])}
           />
         </Center>
       </td>
@@ -68,11 +83,22 @@ const EntitySettings: React.FC<Props> = (props) => {
                 setActiveEntity({ ...activeEntity, isGlass: e.currentTarget.checked });
               }
             }}
+            onKeyDown={getHotkeyHandler([["Escape", exitUi]])}
+          />
+        </Center>
+      </td>
+      <td>
+        <Center>
+          <Switch
+            size="xs"
+            checked={(debugEntities && key) ? debugEntities[key] : false}
+            onChange={handleDebugToggle}
+            onKeyDown={getHotkeyHandler([["Escape", exitUi]])}
           />
         </Center>
       </td>
     </tr>
   );
 };
 
-export default EntitySettings;
+export default EntitySettings;

web/src/layouts/views/portals/components/PortalInfo.tsx

@@ -98,6 +98,7 @@ const PortalInfo: React.FC<Props> = (props) => {
                     <th style={{ width: "20%" }}>{locale("ui_portal_entity_max_occl")}</th>
                     <th style={{ width: "15%", textAlign: "center" }}>{locale("ui_portal_entity_door")}</th>
                     <th style={{ width: "15%", textAlign: "center" }}>{locale("ui_portal_entity_glass")}</th>
+                    <th style={{ width: "10%", textAlign: "center" }}>{locale("ui_debug")}</th>
                   </tr>
                 </thead>
                 <tbody>

web/src/providers/LocaleProvider.tsx

@@ -8,6 +8,7 @@ interface Locale {
 const defaultLocale: Locale = {
   ui_blank: "<Blank>",
   ui_close: "Close",
+  ui_debug: "Debug",
   ui_debug_comments: "Add Debug Comments",
   ui_debug_comments_info: "Whether or not to add debug comments to the output file(s). NOTE: These should be used for debugging only, CodeWalker currently parses the comments incorrectly.",
   ui_file_options: "File Generation Options",

web/src/store/portals.tsx

@@ -10,11 +10,16 @@ export interface PortalsStoreState {
   // PortalToggles
   navigatedPortal: NumberField;
 
+  // EntityToggles
+  debugEntities: { [index: string]: boolean }
+
   // Scroll Area State
   scrollPosition: { x: number, y: number };
 
   // Actions
   setNavigatedPortal: (portal: NumberField) => void;
+  addDebugEntity: (key: string, value: boolean) => void;
+  resetDebugEntities: () => void;
   toggleSwitch: (t: "enablePortalOutline" | "enablePortalFill" | "enablePortalInfo") => void;
   setScrollPosition: (pos: { x: number, y: number }) => void;
 };
@@ -28,11 +33,17 @@ export const usePortalsStore = create<PortalsStoreState>((set, get) => ({
   // PortalToggles
   navigatedPortal: null,
 
+  // EntityToggles
+  debugEntities: {},
+
   // Scroll Area State
   scrollPosition: { x: 0, y: 0 },
 
   // Actions
   setNavigatedPortal: (portal) => set({ navigatedPortal: portal }),
   toggleSwitch: (t) => set((state) => ({ [t]: !state[t] })),
-  setScrollPosition: (pos) => set({ scrollPosition: pos })
+  setScrollPosition: (pos) => set({ scrollPosition: pos }),
+
+  addDebugEntity: (key, value) => set({ debugEntities: { ...get().debugEntities, [key]: value } }),
+  resetDebugEntities: () => set({ debugEntities: {} })
 }));

web/src/types/EntityDef.tsx

@@ -1,4 +1,5 @@
 interface EntityDefConstructor {
+  index: number;
   linkType: number;
   maxOcclusion: number;
   modelHashKey: number;
@@ -8,6 +9,7 @@ interface EntityDefConstructor {
 }
 
 export class EntityDef {
+  public index: number;
   public linkType: number;
   public maxOcclusion: number;
   public modelHashKey: number;
@@ -16,6 +18,7 @@ export class EntityDef {
   public isGlass: boolean;
 
   constructor(data: EntityDefConstructor | EntityDef) {
+    this.index = data.index;
     this.linkType = data.linkType;
     this.maxOcclusion = data.maxOcclusion;
     this.modelHashKey = data.modelHashKey;