From a036b1e2208c3d3a667a707e0df06c6e21db72ed Mon Sep 17 00:00:00 2001 From: Niklas Rentz Date: Wed, 18 Dec 2024 15:38:17 +0100 Subject: [PATCH] prettier and API changes for dark theme --- .../klighd-cli/src/services/connection.ts | 14 +++--- applications/klighd-vscode/src/extension.ts | 15 ++++++- packages/klighd-core/src/actions/actions.ts | 8 ++-- packages/klighd-core/src/diagram-server.ts | 43 +++++++++++-------- 4 files changed, 51 insertions(+), 29 deletions(-) diff --git a/applications/klighd-cli/src/services/connection.ts b/applications/klighd-cli/src/services/connection.ts index 26201b26..23dd20ca 100644 --- 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 index 6b3b3157..d33105ec 100644 --- 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 index 9b1cf72f..29ae2e5a 100644 --- 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 index d43f1fdb..0a2b72a5 100644 --- 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 {