Add new setting modeling.highlightEdges (#2166)

* Add doc comment to getThemeColorForEngine

* Add a user-level setting for highlightEdges

* Add a custom settings action to update the edge line visibility

* Make the settings pane always open to user settings first

* Refactor engineConnectionMananer.start() to take a settings object

* Revert alway open user settings

* Set highlight edges on engine start up

* fmt fml

* Fix tsc error

src/components/ModelingMachineProvider.tsx

@@ -74,13 +74,16 @@ export const ModelingMachineProvider = ({
     settings: {
       context: {
         app: { theme },
-        modeling: { defaultUnit },
+        modeling: { defaultUnit, highlightEdges },
       },
     },
   } = useSettingsAuthContext()
   const token = auth?.context?.token
   const streamRef = useRef<HTMLDivElement>(null)
-  useSetupEngineManager(streamRef, token, theme.current)
+  useSetupEngineManager(streamRef, token, {
+    theme: theme.current,
+    highlightEdges: highlightEdges.current,
+  })
   const { htmlRef } = useStore((s) => ({
     htmlRef: s.htmlRef,
   }))

src/components/SettingsAuthProvider.tsx

@@ -116,6 +116,16 @@ export const SettingsAuthProviderBase = ({
             },
           })
         },
+        setEngineEdges: (context) => {
+          engineCommandManager.sendSceneCommand({
+            cmd_id: uuidv4(),
+            type: 'modeling_cmd_req',
+            cmd: {
+              type: 'edge_lines_visible' as any, // TODO update kittycad.ts to get this new command type
+              hidden: !context.modeling.highlightEdges.current,
+            },
+          })
+        },
         toastSuccess: (_, event) => {
           const eventParts = event.type.replace(/^set./, '').split('.') as [
             keyof typeof settings,

src/hooks/useSetupEngineManager.ts

@@ -8,7 +8,13 @@ import { makeDefaultPlanes } from 'lang/wasm'
 export function useSetupEngineManager(
   streamRef: React.RefObject<HTMLDivElement>,
   token?: string,
-  theme = Themes.System
+  settings = {
+    theme: Themes.System,
+    highlightEdges: true,
+  } as {
+    theme: Themes
+    highlightEdges: boolean
+  }
 ) {
   const {
     setMediaStream,
@@ -46,7 +52,7 @@ export function useSetupEngineManager(
           return kclManager.executeCode(true)
         },
         token,
-        theme,
+        settings,
         makeDefaultPlanes: () => {
           return makeDefaultPlanes(kclManager.engineCommandManager)
         },

src/lang/std/engineConnection.ts

@@ -926,7 +926,10 @@ export class EngineCommandManager {
     executeCode,
     token,
     makeDefaultPlanes,
-    theme = Themes.Dark,
+    settings = {
+      theme: Themes.Dark,
+      highlightEdges: true,
+    },
   }: {
     setMediaStream: (stream: MediaStream) => void
     setIsStreamReady: (isStreamReady: boolean) => void
@@ -935,7 +938,10 @@ export class EngineCommandManager {
     executeCode: () => void
     token?: string
     makeDefaultPlanes: () => Promise<DefaultPlanes>
-    theme?: Themes
+    settings?: {
+      theme: Themes
+      highlightEdges: boolean
+    }
   }) {
     this.makeDefaultPlanes = makeDefaultPlanes
     if (width === 0 || height === 0) {
@@ -963,15 +969,21 @@ export class EngineCommandManager {
       },
       onEngineConnectionOpen: () => {
         // Set the stream background color
-        // This takes RGBA values from 0-1
-        // So we convert from the conventional 0-255 found in Figma
-
         this.sendSceneCommand({
           type: 'modeling_cmd_req',
           cmd_id: uuidv4(),
           cmd: {
             type: 'set_background_color',
-            color: getThemeColorForEngine(theme),
+            color: getThemeColorForEngine(settings.theme),
+          },
+        })
+        // Set the edge lines visibility
+        this.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'edge_lines_visible' as any, // TODO: update kittycad.ts to use the correct type
+            hidden: !settings.highlightEdges,
           },
         })
 

src/lib/settings/initialSettings.tsx

@@ -306,6 +306,18 @@ export function createSettings() {
           </>
         ),
       }),
+      /**
+       * Whether to highlight edges of 3D objects
+       */
+      highlightEdges: new Setting<boolean>({
+        defaultValue: true,
+        description: 'Whether to highlight edges of 3D objects',
+        validate: (v) => typeof v === 'boolean',
+        commandConfig: {
+          inputType: 'boolean',
+        },
+        hideOnLevel: 'project',
+      }),
       /**
        * Whether to show the debug panel, which lets you see
        * various states of the app to aid in development

src/lib/testHelpers.ts

@@ -99,7 +99,6 @@ export async function executor(
     width: 0,
     height: 0,
     executeCode: () => {},
-    theme: Themes.Dark,
     makeDefaultPlanes: () => {
       return new Promise((resolve) => resolve(defaultPlanes))
     },

src/lib/theme.ts

@@ -23,6 +23,12 @@ export function setThemeClass(theme: Themes) {
   }
 }
 
+/**
+ * The engine takes RGBA values from 0-1
+ * So we convert from the conventional 0-255 found in Figma
+ * @param theme
+ * @returns { r: number, g: number, b: number, a: number }
+ */
 export function getThemeColorForEngine(theme: Themes) {
   const resolvedTheme = theme === Themes.System ? getSystemTheme() : theme
   const dark = 28 / 255

src/machines/settingsMachine.ts

@@ -62,6 +62,17 @@ export const settingsMachine = createMachine(
             ],
           },
 
+          'set.modeling.highlightEdges': {
+            target: 'idle',
+            internal: true,
+            actions: [
+              'setSettingAtLevel',
+              'toastSuccess',
+              'setEngineEdges',
+              'persistSettings',
+            ],
+          },
+
           'Reset settings': {
             target: 'idle',
             internal: true,