Color-scheme swapping works for VSCode

tmr232 · Jan 16, 2025 · 11d20a4 · 11d20a4
1 parent 41532e3
commit 11d20a4
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 11 deletions.
diff --git a/src/jetbrains/src/App.svelte b/src/jetbrains/src/App.svelte
@@ -66,7 +66,7 @@
   let highlight = true;
 
   // Set initial background color
-  const colorList = (function () {
+  let colorList = (function () {
     function isDarkTheme(): boolean {
       return document.body.dataset.theme !== "light";
     }
@@ -92,6 +92,7 @@
     simplify?: boolean;
     flatSwitch?: boolean;
     highlight?: boolean;
+    colorList?: ColorList;
   };
   type State = {
     code?: string;
@@ -147,6 +148,14 @@
           });
           break;
         }
+        case "updateSettings":
+          flatSwitch = message.flatSwitch;
+          simplify = message.simplify;
+          highlight = message.highlightCurrentNode;
+          colorList = message.colorList;
+          document.body.style.backgroundColor = colorList.find(
+            ({ name }) => name === "graph.background",
+          ).hex;
       }
     });
 

diff --git a/src/vscode/extension.ts b/src/vscode/extension.ts
@@ -1,13 +1,12 @@
 import * as vscode from "vscode";
 import type { Language } from "../control-flow/cfg";
 import {
-  type ColorScheme,
+  type ColorList,
   deserializeColorList,
   getDarkColorList,
   getLightColorList,
-  listToScheme,
 } from "../control-flow/colors";
-import type { UpdateCode } from "./messages.ts";
+import type { UpdateCode, UpdateSettings } from "./messages.ts";
 import { OverviewViewProvider } from "./overview-view";
 
 // ADD-LANGUAGES-HERE
@@ -58,7 +57,7 @@ type Settings = {
   flatSwitch: boolean;
   simplify: boolean;
   highlightCurrentNode: boolean;
-  colorScheme: ColorScheme;
+  colorList: ColorList;
 };
 type ColorSchemeOptions = "Light" | "Dark" | "Custom" | "System";
 function loadSettings(): Settings {
@@ -91,7 +90,7 @@ function loadSettings(): Settings {
     flatSwitch: config.get("flatSwitch") ?? false,
     simplify: config.get("simplify") ?? false,
     highlightCurrentNode: config.get("highlightCurrentNode") ?? true,
-    colorScheme: listToScheme(colorList),
+    colorList: colorList,
   };
 }
 
@@ -159,17 +158,29 @@ export async function activate(context: vscode.ExtensionContext) {
         // TODO: This currently only changes the color-scheme.
         // TODO: Make this react to all the CFG settings.
         if (e.affectsConfiguration("functionGraphOverview")) {
-          const _settings = loadSettings();
-          // TODO: Trigger a redraw
+          const settings = loadSettings();
+          provider.postMessage<UpdateSettings>({
+            tag: "updateSettings",
+            flatSwitch: settings.flatSwitch,
+            simplify: settings.simplify,
+            highlightCurrentNode: settings.highlightCurrentNode,
+            colorList: settings.colorList,
+          });
         }
       },
     ),
   );
 
   context.subscriptions.push(
     vscode.window.onDidChangeActiveColorTheme(() => {
-      const _settings = loadSettings();
-      // TODO: Trigger a redraw
+      const settings = loadSettings();
+      provider.postMessage<UpdateSettings>({
+        tag: "updateSettings",
+        flatSwitch: settings.flatSwitch,
+        simplify: settings.simplify,
+        highlightCurrentNode: settings.highlightCurrentNode,
+        colorList: settings.colorList,
+      });
     }),
   );
 

diff --git a/src/vscode/messages.ts b/src/vscode/messages.ts
@@ -1,4 +1,5 @@
 import type { Language } from "../control-flow/cfg.ts";
+import type { ColorList } from "../control-flow/colors.ts";
 
 export type NavigateTo = {
   tag: "navigateTo";
@@ -12,7 +13,15 @@ export type UpdateCode = {
   code: string;
 };
 
-export type MessageToWebview = UpdateCode;
+export type UpdateSettings = {
+  tag: "updateSettings";
+  flatSwitch: boolean;
+  simplify: boolean;
+  highlightCurrentNode: boolean;
+  colorList: ColorList;
+};
+
+export type MessageToWebview = UpdateCode | UpdateSettings;
 export type MessageToVscode = NavigateTo;
 
 type Message = MessageToVscode | MessageToWebview;

diff --git a/src/vscode/overview-view.ts b/src/vscode/overview-view.ts
@@ -12,6 +12,12 @@ export class OverviewViewProvider implements vscode.WebviewViewProvider {
   private _view?: vscode.WebviewView;
   private messageHandler: MessageHandler<MessageToVscode>;
 
+  /**
+   * Initialize the WebView
+   * @param _extensionUri
+   * @param isDark theme to use for the initial graph
+   * @param messageHandlers handlers for messages from the webview
+   */
   constructor(
     private readonly _extensionUri: vscode.Uri,
     private readonly isDark: boolean,
@@ -20,6 +26,10 @@ export class OverviewViewProvider implements vscode.WebviewViewProvider {
     this.messageHandler = new MessageHandler(messageHandlers);
   }
 
+  /**
+   * Post a message to the WebView, to be handled there.
+   * @param message The message to post
+   */
   public postMessage<T extends MessageToWebview>(message: T) {
     if (this._view) {
       this._view.webview.postMessage(message);