ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make engine stream react to prefers-color-scheme media query change (#4008)

Browse Source 
* Add event listener for theme media query to update engine theme

* tsc fixes

* Add a Playwright test for UI and engine theme switch

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu-latest)

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
This commit is contained in:
Frank Noirot
2024-09-27 11:14:03 -04:00
committed by GitHub
parent 6303130e08
commit 9ceb247fcd
5 changed files with 123 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/lang/std/engineConnection.ts
View File

@ -3,7 +3,12 @@ import { VITE_KC_API_WS_MODELING_URL, VITE_KC_DEV_TOKEN } from 'env'
import { Models } from '@kittycad/lib'
import { exportSave } from 'lib/exportSave'
import { deferExecution, isOverlap, uuidv4 } from 'lib/utils'
import { Themes, getThemeColorForEngine, getOppositeTheme } from 'lib/theme'
import {
Themes,
getThemeColorForEngine,
getOppositeTheme,
darkModeMatcher,
} from 'lib/theme'
import { DefaultPlanes } from 'wasm-lib/kcl/bindings/DefaultPlanes'
import {
ArtifactGraph,
@ -1393,6 +1398,9 @@ export class EngineCommandManager extends EventTarget {
private onEngineConnectionOpened = () => {}
private onEngineConnectionClosed = () => {}
private onDarkThemeMediaQueryChange = (e: MediaQueryListEvent) => {
this.setTheme(e.matches ? Themes.Dark : Themes.Light).catch(reportRejection)
}
private onEngineConnectionStarted = ({ detail: engineConnection }: any) => {}
private onEngineConnectionNewTrack = ({
detail,
@ -1479,30 +1487,13 @@ export class EngineCommandManager extends EventTarget {
// eslint-disable-next-line @typescript-eslint/no-misused-promises
this.onEngineConnectionOpened = async () => {
// Set the stream background color
// This takes RGBA values from 0-1
// So we convert from the conventional 0-255 found in Figma
void this.sendSceneCommand({
type: 'modeling_cmd_req',
cmd_id: uuidv4(),
cmd: {
type: 'set_background_color',
color: getThemeColorForEngine(this.settings.theme),
},
})
// Sets the default line colors
const opposingTheme = getOppositeTheme(this.settings.theme)
// eslint-disable-next-line @typescript-eslint/no-floating-promises
this.sendSceneCommand({
cmd_id: uuidv4(),
type: 'modeling_cmd_req',
cmd: {
type: 'set_default_system_properties',
color: getThemeColorForEngine(opposingTheme),
},
})
// Set the theme
this.setTheme(this.settings.theme).catch(reportRejection)
// Set up a listener for the dark theme media query
darkModeMatcher?.addEventListener(
'change',
this.onDarkThemeMediaQueryChange
)
// Set the edge lines visibility
// eslint-disable-next-line @typescript-eslint/no-floating-promises
@ -1793,6 +1784,10 @@ export class EngineCommandManager extends EventTarget {
EngineConnectionEvents.NewTrack,
this.onEngineConnectionNewTrack as EventListener
)
darkModeMatcher?.removeEventListener(
'change',
this.onDarkThemeMediaQueryChange
)
this.engineConnection?.tearDown(opts)
@ -2155,6 +2150,34 @@ export class EngineCommandManager extends EventTarget {
})
}
/**
* Set the engine's theme
*/
async setTheme(theme: Themes) {
// 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({
cmd_id: uuidv4(),
type: 'modeling_cmd_req',
cmd: {
type: 'set_background_color',
color: getThemeColorForEngine(theme),
},
}).catch(reportRejection)
// Sets the default line colors
const opposingTheme = getOppositeTheme(theme)
this.sendSceneCommand({
cmd_id: uuidv4(),
type: 'modeling_cmd_req',
cmd: {
type: 'set_default_system_properties',
color: getThemeColorForEngine(opposingTheme),
},
}).catch(reportRejection)
}
/**
* Set the visibility of the scale grid in the engine scene.
* @param visible - whether to show or hide the scale grid