Feature: Named views

src/clientSideScene/CameraControls.ts

@@ -287,12 +287,14 @@ export class CameraControls {
         camSettings.up.y,
         camSettings.up.z
       )
+
       this.camera.quaternion.set(
         orientation.x,
         orientation.y,
         orientation.z,
         orientation.w
       )
+
       this.camera.up.copy(newUp)
       this.camera.updateProjectionMatrix()
       if (this.camera instanceof PerspectiveCamera && camSettings.ortho) {

src/components/CommandBar/CommandArgOptionInput.tsx

@@ -168,37 +168,43 @@ function CommandArgOptionInput({
             autoFocus
           />
         </div>
-        <Combobox.Options
-          static
-          className="overflow-y-auto max-h-96 cursor-pointer"
-          onMouseDown={() => {
-            setShouldSubmitOnChange(true)
-          }}
-        >
-          {filteredOptions?.map((option) => (
-            <Combobox.Option
-              key={option.name}
-              value={option}
-              disabled={option.disabled}
-              className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
-            >
-              <p
-                className={`flex-grow ${
-                  (option.disabled &&
-                    'text-chalkboard-70 dark:text-chalkboard-50 cursor-not-allowed') ||
-                  ''
-                }`}
+        {filteredOptions?.length ? (
+          <Combobox.Options
+            static
+            className="overflow-y-auto max-h-96 cursor-pointer"
+            onMouseDown={() => {
+              setShouldSubmitOnChange(true)
+            }}
+          >
+            {filteredOptions?.map((option) => (
+              <Combobox.Option
+                key={option.name}
+                value={option}
+                disabled={option.disabled}
+                className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
               >
-                {option.name}
-              </p>
-              {option.value === currentOption?.value && (
-                <small className="text-chalkboard-70 dark:text-chalkboard-50">
-                  current
-                </small>
-              )}
-            </Combobox.Option>
-          ))}
-        </Combobox.Options>
+                <p
+                  className={`flex-grow ${
+                    (option.disabled &&
+                      'text-chalkboard-70 dark:text-chalkboard-50 cursor-not-allowed') ||
+                    ''
+                  }`}
+                >
+                  {option.name}
+                </p>
+                {option.value === currentOption?.value && (
+                  <small className="text-chalkboard-70 dark:text-chalkboard-50">
+                    current
+                  </small>
+                )}
+              </Combobox.Option>
+            ))}
+          </Combobox.Options>
+        ) : (
+          <p className="px-4 pt-2 text-chalkboard-60 dark:text-chalkboard-50">
+            No results found
+          </p>
+        )}
       </Combobox>
     </form>
   )

src/components/FileMachineProvider.tsx

@@ -32,6 +32,7 @@ import { commandBarActor } from 'machines/commandBarMachine'
 import { settingsActor, useSettings } from 'machines/appMachine'
 import { createRouteCommands } from 'lib/commandBarConfigs/routeCommandConfig'
 import { useToken } from 'machines/appMachine'
+import { createNamedViewsCommand } from 'lib/commandBarConfigs/namedViewsConfig'
 
 type MachineContext<T extends AnyStateMachine> = {
   state: StateFrom<T>
@@ -58,6 +59,24 @@ export const FileMachineProvider = ({
     []
   )
 
+  useEffect(() => {
+    const {
+      createNamedViewCommand,
+      deleteNamedViewCommand,
+      loadNamedViewCommand,
+    } = createNamedViewsCommand()
+    commandBarActor.send({
+      type: 'Add commands',
+      data: {
+        commands: [
+          createNamedViewCommand,
+          deleteNamedViewCommand,
+          loadNamedViewCommand,
+        ],
+      },
+    })
+  }, [])
+
   // Due to the route provider, i've moved this to the FileMachineProvider instead of CommandBarProvider
   // This will register the commands to route to Telemetry, Home, and Settings.
   useEffect(() => {

src/lib/commandBarConfigs/namedViewsConfig.ts

@@ -0,0 +1,163 @@
+import { NamedView } from 'wasm-lib/kcl/bindings/NamedView'
+import { Command } from '../commandTypes'
+import toast from 'react-hot-toast'
+import { engineCommandManager } from 'lib/singletons'
+import { uuidv4 } from 'lib/utils'
+import { settingsActor } from 'machines/appMachine'
+
+export function createNamedViewsCommand() {
+  const createNamedViewCommand: Command = {
+    name: 'Create named view',
+    displayName: `Create named view`,
+    description: 'Create a named view to reload this view',
+    groupId: 'namedViews',
+    icon: 'settings',
+    needsReview: false,
+    onSubmit: async (data) => {
+      const namedViews = [
+        ...settingsActor.getSnapshot().context.modeling.namedViews.current,
+      ]
+      var a = await engineCommandManager.sendSceneCommand({
+        type: 'modeling_cmd_req',
+        cmd_id: uuidv4(),
+        cmd: { type: 'default_camera_get_view' },
+      })
+      var view = a.resp.data.modeling_response.data
+      const requestedView: NamedView = {
+        name: data.name,
+        ...view.view,
+      }
+
+      const requestedNamedViews = [...namedViews, requestedView]
+      settingsActor.send({
+        type: `set.modeling.namedViews`,
+        data: {
+          level: 'project',
+          value: requestedNamedViews,
+        },
+      })
+
+      // TODO: duplicate
+      // TODO: overwrite
+      // TODO: ask them to rename?
+      toast.success(
+        `Your named view ${requestedView.name} successfully created.`
+      )
+    },
+    args: {
+      name: {
+        required: true,
+        inputType: 'string',
+      },
+    },
+  }
+
+  const deleteNamedViewCommand: Command = {
+    name: 'Delete named view',
+    displayName: `Delete named view`,
+    description: 'Delete a named view',
+    groupId: 'namedViews',
+    icon: 'settings',
+    needsReview: false,
+    onSubmit: (data) => {
+      const nameToDelete = data.name
+      const namedViews = [
+        ...settingsActor.getSnapshot().context.modeling.namedViews.current,
+      ]
+      const indexToDelete = namedViews.findIndex(
+        (view) => view.name === nameToDelete
+      )
+      if (indexToDelete >= 0) {
+        namedViews.splice(indexToDelete, 1)
+        settingsActor.send({
+          type: `set.modeling.namedViews`,
+          data: {
+            level: 'project',
+            value: namedViews,
+          },
+        })
+        toast.success(`Deleted ${data.name} named view.`)
+      } else {
+        toast.error(`Unable to delete ${data.name}, something went wrong.`)
+      }
+    },
+    args: {
+      name: {
+        required: true,
+        inputType: 'options',
+        options: () => {
+          const namedViews = [
+            ...settingsActor.getSnapshot().context.modeling.namedViews.current,
+          ]
+          return namedViews.map((view, index) => {
+            return {
+              name: view.name,
+              isCurrent: index === 0,
+              value: view.name,
+            }
+          })
+        },
+      },
+    },
+  }
+
+  const loadNamedViewCommand: Command = {
+    name: 'Load named view',
+    displayName: `Load named view`,
+    description: 'Load a named view',
+    groupId: 'namedViews',
+    icon: 'settings',
+    needsReview: false,
+    onSubmit: async (data) => {
+      // Key is name but value is _id
+      const _idToLoad = data.name
+      const namedViews = [
+        ...settingsActor.getSnapshot().context.modeling.namedViews.current,
+      ]
+      console.log('NAMED VIEWS?', namedViews)
+      const viewToLoad = namedViews.find((view) => view._id === _idToLoad)
+      if (viewToLoad) {
+        const cameraViewData = { ...viewToLoad }
+        delete cameraViewData.name
+        console.log(cameraViewData, 'gonna load')
+        await engineCommandManager.sendSceneCommand({
+          type: 'modeling_cmd_req',
+          cmd_id: uuidv4(),
+          cmd: {
+            type: 'default_camera_set_view',
+            view: {
+              ...cameraViewData,
+            },
+          },
+        })
+        toast.success(`Loaded ${data.name} named view.`)
+      } else {
+        toast.error(`Unable to load ${data.name}, something went wrong.`)
+      }
+    },
+    args: {
+      name: {
+        required: true,
+        inputType: 'options',
+        options: () => {
+          const namedViews = [
+            ...settingsActor.getSnapshot().context.modeling.namedViews.current,
+          ]
+          return namedViews.map((view, index) => {
+            return {
+              name: view.name,
+              isCurrent: index === 0,
+              value: view._id,
+            }
+          })
+        },
+      },
+    },
+  }
+
+  return {
+    createNamedViewCommand,
+    deleteNamedViewCommand,
+    loadNamedViewCommand,
+  }
+}

src/lib/settings/initialSettings.tsx

@@ -20,6 +20,7 @@ import { isArray, toSync } from 'lib/utils'
 import { reportRejection } from 'lib/trap'
 import { CameraProjectionType } from 'wasm-lib/kcl/bindings/CameraProjectionType'
 import { OnboardingStatus } from 'wasm-lib/kcl/bindings/OnboardingStatus'
+import { NamedView } from 'wasm-lib/kcl/bindings/NamedView'
 import { CameraOrbitType } from 'wasm-lib/kcl/bindings/CameraOrbitType'
 
 /**
@@ -467,6 +468,10 @@ export function createSettings() {
       //     inputType: 'boolean',
       //   },
       // }),
+      namedViews: new Setting<NamedView[]>({
+        defaultValue: [],
+        validate: (v) => true,
+      }),
     },
     /**
      * Settings that affect the behavior of the KCL text editor.

src/lib/settings/settingsUtils.ts

@@ -94,6 +94,7 @@ export function projectConfigurationToSettingsPayload(
       ),
       highlightEdges: configuration?.settings?.modeling?.highlight_edges,
       showDebugPanel: configuration?.settings?.modeling?.show_debug_panel,
+      namedViews: configuration?.settings?.modeling?.named_views,
     },
     textEditor: {
       textWrapping: configuration?.settings?.text_editor?.text_wrapping,

src/machines/settingsMachine.ts

@@ -35,6 +35,7 @@ import {
   saveSettings,
   setSettingsAtLevel,
 } from 'lib/settings/settingsUtils'
+import { NamedView } from 'wasm-lib/kcl/bindings/NamedView'
 import {
   codeManager,
   engineCommandManager,
@@ -77,6 +78,7 @@ export const settingsMachine = setup({
           level: SettingsLevel
         }
       | { type: 'Set all settings'; settings: typeof settings }
+      | { type: 'set.modeling.namedViews'; value: NamedView }
       | { type: 'load.project'; project?: Project }
       | { type: 'clear.project' }
     ) & { doNotPersist?: boolean },
@@ -151,6 +153,7 @@ export const settingsMachine = setup({
           type: 'Add commands',
           data: { commands: commands },
         })
+
       const removeCommands = () =>
         commandBarActor.send({
           type: 'Remove commands',
@@ -204,7 +207,7 @@ export const settingsMachine = setup({
       if (!('data' in event)) return
       const eventParts = event.type.replace(/^set./, '').split('.') as [
         keyof typeof settings,
-        string
+        string,
       ]
       const truncatedNewValue = event.data.value?.toString().slice(0, 28)
       const message =
@@ -391,6 +394,12 @@ export const settingsMachine = setup({
           ],
         },
 
+        'set.modeling.namedViews': {
+          target: 'persisting settings',
+
+          actions: ['setSettingAtLevel'],
+        },
+
         'set.app.onboardingStatus': {
           target: 'persisting settings',
 

src/wasm-lib/kcl/src/lib.rs

@@ -67,7 +67,7 @@ mod log;
 mod lsp;
 mod modules;
 mod parsing;
-mod settings;
+pub mod settings;
 #[cfg(test)]
 mod simulation_tests;
 mod source_range;