diff --git a/src/App.tsx b/src/App.tsx index d69a59925..7d9cdc29f 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -49,6 +49,7 @@ import { PROJECT_ENTRYPOINT } from './lib/tauriFS' import { IndexLoaderData } from './Router' import { toast } from 'react-hot-toast' import { useGlobalStateContext } from 'hooks/useGlobalStateContext' +import { onboardingPaths } from 'routes/Onboarding' export function App() { const { code: loadedCode, project } = useLoaderData() as IndexLoaderData @@ -154,7 +155,7 @@ export function App() { useHotkeys('shift + d', () => togglePane('debug')) const paneOpacity = - onboardingStatus === '/camera' + onboardingStatus === onboardingPaths.CAMERA ? 'opacity-20' : didDragInStream ? 'opacity-40' diff --git a/src/machines/settingsMachine.ts b/src/machines/settingsMachine.ts index 66d1d882d..eec65984a 100644 --- a/src/machines/settingsMachine.ts +++ b/src/machines/settingsMachine.ts @@ -3,6 +3,11 @@ import { BaseUnit, baseUnitsUnion } from '../useStore' import { CommandBarMeta } from '../lib/commands' import { Themes, getSystemTheme, setThemeClass } from '../lib/theme' +export enum UnitSystem { + Imperial = 'imperial', + Metric = 'metric', +} + export const SETTINGS_PERSIST_KEY = 'SETTINGS_PERSIST_KEY' export const settingsCommandBarMeta: CommandBarMeta = { @@ -42,7 +47,7 @@ export const settingsCommandBarMeta: CommandBarMeta = { name: 'unitSystem', type: 'select', defaultValue: 'unitSystem', - options: [{ name: 'imperial' }, { name: 'metric' }], + options: [{ name: UnitSystem.Imperial }, { name: UnitSystem.Metric }], }, ], }, @@ -70,7 +75,7 @@ export const settingsMachine = createMachine( context: { theme: Themes.System, defaultProjectName: '', - unitSystem: 'imperial' as 'imperial' | 'metric', + unitSystem: UnitSystem.Imperial, baseUnit: 'in' as BaseUnit, defaultDirectory: '', showDebugPanel: false, @@ -174,7 +179,7 @@ export const settingsMachine = createMachine( | { type: 'Set Default Directory'; data: { defaultDirectory: string } } | { type: 'Set Unit System' - data: { unitSystem: 'imperial' | 'metric' } + data: { unitSystem: UnitSystem } } | { type: 'Set Base Unit'; data: { baseUnit: BaseUnit } } | { type: 'Set Onboarding Status'; data: { onboardingStatus: string } } diff --git a/src/routes/Onboarding/Camera.tsx b/src/routes/Onboarding/Camera.tsx index 63686998a..f2d5fa993 100644 --- a/src/routes/Onboarding/Camera.tsx +++ b/src/routes/Onboarding/Camera.tsx @@ -37,8 +37,8 @@ export default function Units() { What you're seeing here is just a video, and your interactions are being sent to our Geometry Engine API, which sends back video frames in real time. How cool is that? It means that you can use KittyCAD - Modeling App (or whatever you want to build) on any device, even if it - doesn't have a GPU! + Modeling App (or whatever you want to build) on any device, even a + cheap laptop with no graphics card!

{ - const newUnitSystem = e.target.checked ? 'metric' : 'imperial' + const newUnitSystem = e.target.checked + ? UnitSystem.Metric + : UnitSystem.Imperial send({ type: 'Set Unit System', data: { unitSystem: newUnitSystem }, diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx index 2b2eb9c40..133473b60 100644 --- a/src/routes/Settings.tsx +++ b/src/routes/Settings.tsx @@ -13,6 +13,7 @@ import { useHotkeys } from 'react-hotkeys-hook' import { IndexLoaderData, paths } from '../Router' import { Themes } from '../lib/theme' import { useGlobalStateContext } from 'hooks/useGlobalStateContext' +import { UnitSystem } from 'machines/settingsMachine' export const Settings = () => { const loaderData = useRouteLoaderData(paths.FILE) as IndexLoaderData @@ -136,9 +137,11 @@ export const Settings = () => { offLabel="Imperial" onLabel="Metric" name="settings-units" - checked={unitSystem === 'metric'} + checked={unitSystem === UnitSystem.Metric} onChange={(e) => { - const newUnitSystem = e.target.checked ? 'metric' : 'imperial' + const newUnitSystem = e.target.checked + ? UnitSystem.Metric + : UnitSystem.Imperial send({ type: 'Set Unit System', data: { unitSystem: newUnitSystem },