prettier and API changes for dark theme

kieler · Dec 18, 2024 · a036b1e · a036b1e
1 parent b1e964b
commit a036b1e
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 29 deletions.
diff --git a/applications/klighd-cli/src/services/connection.ts b/applications/klighd-cli/src/services/connection.ts
@@ -19,7 +19,7 @@ import * as rpc from 'vscode-ws-jsonrpc'
 import * as lsp from 'vscode-languageserver-protocol'
 import { Connection, NotificationType, ActionMessage } from '@kieler/klighd-core'
 import { showPopup } from '../popup'
-/* global WebSocket */
+/* global WebSocket, window */
 
 type GeneralMessageParams = [string, 'info' | 'warn' | 'error']
 
@@ -159,14 +159,14 @@ export class LSPConnection implements Connection {
         if (!this.connection) return
 
         // notify the server about the preferred colors, depending on if the OS prefers light (default) or dark theme.
-        let foreground = "#000000"
-        let background = "#ffffff"
-        let highlight = "#000000"
+        let foreground = '#000000'
+        let background = '#ffffff'
+        let highlight = '#000000'
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
             // dark mode
-            foreground = "#cccccc"
-            background = "#1f1f1f"
-            highlight = "#cccccc"
+            foreground = '#cccccc'
+            background = '#1f1f1f'
+            highlight = '#cccccc'
         }
 
         const { method } = lsp.InitializeRequest.type

diff --git a/applications/klighd-vscode/src/extension.ts b/applications/klighd-vscode/src/extension.ts
@@ -18,7 +18,7 @@
 // See https://stackoverflow.com/questions/37534890/inversify-js-reflect-hasownmetadata-is-not-a-function
 import 'reflect-metadata'
 // The other imports.
-import { DebugOptions, SetRenderOptionAction } from '@kieler/klighd-core'
+import { ChangeColorThemeAction, DebugOptions, SetRenderOptionAction } from '@kieler/klighd-core'
 import { diagramType } from '@kieler/klighd-core/lib/base/external-helpers'
 import { Action, ActionMessage, isAction } from 'sprotty-protocol'
 import { registerLspEditCommands } from 'sprotty-vscode'
@@ -78,6 +78,7 @@ export function activate(context: vscode.ExtensionContext): void {
                         registerCommands(webviewPanelManager, context)
                         registerLspEditCommands(webviewPanelManager, context, { extensionPrefix: 'klighd-vscode' })
                         registerTextEditorSync(webviewPanelManager, context)
+                        registerChangeColorTheme(webviewPanelManager)
 
                         // Handle notifications that are KLighD specific extensions of the LSP for this LSClient.
                         LspHandler.init(client)
@@ -193,3 +194,15 @@ function isLanguageClient(client: unknown): client is LanguageClient {
 function isFileEndingsArray(array: unknown): array is string[] {
     return Array.isArray(array) && array.every((val) => typeof val === 'string')
 }
+/**
+ * Hook into VS Code's theme change and notify the webview to check the current colors and send them to the server.
+ */
+function registerChangeColorTheme(manager: KLighDWebviewPanelManager) {
+    vscode.window.onDidChangeActiveColorTheme(() => {
+        for (const endpoint of manager.endpoints) {
+            endpoint.sendAction({
+                kind: ChangeColorThemeAction.KIND,
+            })
+        }
+    })
+}
diff --git a/packages/klighd-core/src/actions/actions.ts b/packages/klighd-core/src/actions/actions.ts
@@ -101,7 +101,7 @@ export namespace CheckedImagesAction {
 }
 
 /**
- * Sent internally to notify KLighD that the color theme has changed. Will trigger a subsequent 
+ * Sent internally to notify KLighD that the color theme has changed. Will trigger a subsequent
  * ClientColorPreferencesAction to be triggered and sent.
  */
 export interface ChangeColorThemeAction extends Action {
@@ -142,9 +142,9 @@ export namespace ClientColorPreferencesAction {
  * The color preferences data class, indicating diagram colors to be used by syntheses.
  */
 export interface ColorPreferences {
-    foreground: string,
-    background: string,
-    highlight: string,
+    foreground: string
+    background: string
+    highlight: string
 }
 
 /**

diff --git a/packages/klighd-core/src/diagram-server.ts b/packages/klighd-core/src/diagram-server.ts
@@ -90,6 +90,7 @@ import { ClientLayoutOption, IncrementalDiagramGeneratorOption, PreferencesRegis
 import { Connection, ServiceTypes, SessionStorage } from './services'
 import { SetSynthesisAction } from './syntheses/actions'
 import { UpdateDepthMapModelAction } from './update/update-depthmap-model'
+/* global document, getComputedStyle */
 
 /**
  * This class extends {@link DiagramServerProxy} to handle different `klighd-core` specific
@@ -169,13 +170,13 @@ export class KlighdDiagramServer extends DiagramServerProxy {
     }
 
     handleLocally(action: Action): boolean {
-        // In contract to the name, this should return true, if the actions should be
+        // In contrast to the name, this should return true, if the actions should be
         // sent to the server. Don't know what the Sprotty folks where thinking when they named it...
         switch (action.kind) {
             case ClientColorPreferencesAction.KIND:
-                return true;
+                return true
             case ChangeColorThemeAction.KIND:
-                return false;
+                return false
             case PerformActionAction.KIND:
                 return true
             case RefreshDiagramAction.KIND:
@@ -213,8 +214,8 @@ export class KlighdDiagramServer extends DiagramServerProxy {
         registry.register(BringToFrontAction.KIND, this)
         registry.register(CheckImagesAction.KIND, this)
         registry.register(CheckedImagesAction.KIND, this)
-        registry.register(ClientColorPreferencesAction.KIND, this);
-        registry.register(ChangeColorThemeAction.KIND, this);
+        registry.register(ClientColorPreferencesAction.KIND, this)
+        registry.register(ChangeColorThemeAction.KIND, this)
         registry.register(DeleteLayerConstraintAction.KIND, this)
         registry.register(DeletePositionConstraintAction.KIND, this)
         registry.register(DeleteStaticConstraintAction.KIND, this)
@@ -245,14 +246,20 @@ export class KlighdDiagramServer extends DiagramServerProxy {
 
     handle(action: Action): void | ICommand | Action {
         if (action.kind === RequestModelAction.KIND && getComputedStyle !== undefined) {
-            // On any request model action, also send the current colors with the request, so the initial 
+            // On any request model action, also send the current colors with the request, so the initial
             // syntheses can use the theming of VS Code. Values will be undefined outside of VS Code and should
             // be ignored.
-            (action as RequestModelAction).options = {
-                ...((action as RequestModelAction).options),
-                clientColorPreferenceForeground: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-foreground'),
-                clientColorPreferenceBackground: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background'),
-                clientColorPreferenceHighlight: getComputedStyle(document.documentElement).getPropertyValue('--vscode-focusBorder')
+            ;(action as RequestModelAction).options = {
+                ...(action as RequestModelAction).options,
+                clientColorPreferenceForeground: getComputedStyle(document.documentElement).getPropertyValue(
+                    '--vscode-editor-foreground'
+                ),
+                clientColorPreferenceBackground: getComputedStyle(document.documentElement).getPropertyValue(
+                    '--vscode-editor-background'
+                ),
+                clientColorPreferenceHighlight: getComputedStyle(document.documentElement).getPropertyValue(
+                    '--vscode-focusBorder'
+                ),
             }
             super.handle(action)
         }
@@ -265,7 +272,7 @@ export class KlighdDiagramServer extends DiagramServerProxy {
         if (action.kind === CheckImagesAction.KIND) {
             this.handleCheckImages(action as CheckImagesAction)
         } else if (action.kind === ChangeColorThemeAction.KIND) {
-            this.handleChangeColorTheme();
+            this.handleChangeColorTheme()
         } else if (action.kind === StoreImagesAction.KIND) {
             this.handleStoreImages(action as StoreImagesAction)
         } else if (action.kind === RequestPopupModelAction.KIND) {
@@ -297,11 +304,13 @@ export class KlighdDiagramServer extends DiagramServerProxy {
 
     handleChangeColorTheme(): void {
         if (getComputedStyle === undefined) return
-        this.actionDispatcher.dispatch(ClientColorPreferencesAction.create({
-            foreground: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-foreground'),
-            background: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background'),
-            highlight: getComputedStyle(document.documentElement).getPropertyValue('--vscode-focusBorder'),
-        }))
+        this.actionDispatcher.dispatch(
+            ClientColorPreferencesAction.create({
+                foreground: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-foreground'),
+                background: getComputedStyle(document.documentElement).getPropertyValue('--vscode-editor-background'),
+                highlight: getComputedStyle(document.documentElement).getPropertyValue('--vscode-focusBorder'),
+            })
+        )
     }
 
     handleStoreImages(action: StoreImagesAction): void {