feat(vscode): add config for icons/icon colors

mxsdev · Oct 18, 2022 · e80765f · e80765f
1 parent ef5a9e4
commit e80765f
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 4 deletions.
diff --git a/packages/typescript-explorer/package.json b/packages/typescript-explorer/package.json
@@ -24,6 +24,16 @@
           "type": "boolean",
           "default": false,
           "description": "Show entire expanded type on hovering"
+        },
+        "typescript-explorer.typeTree.view.icons.enable": {
+          "title": "Show Icons",
+          "type": "boolean",
+          "default": true
+        },
+        "typescript-explorer.typeTree.view.icons.colors.enable": {
+          "title": "Enable Colors",
+          "type": "boolean",
+          "default": true
         }
       }
     },
@@ -52,6 +62,16 @@
         "category": "TypeScript Explorer",
         "icon": "$(search-view-icon)",
         "enablement": "view == type-tree"
+      },
+      {
+        "title": "Toggle Type Tree Icons",
+        "command": "typescript-explorer.typeTree.view.icons.enabled.toggle",
+        "category": "Typescript Explorer"
+      },
+      {
+        "title": "Toggle Type Tree Icon Colors",
+        "command": "typescript-explorer.typeTree.view.icons.colors.enabled.toggle",
+        "category": "Typescript Explorer"
       }
     ],
     "viewsContainers": {
@@ -82,6 +102,16 @@
           "command": "typescript-explorer.refreshTypeTreeView",
           "when": "view == type-tree",
           "group": "navigation"
+        },
+        {
+          "command": "typescript-explorer.typeTree.view.icons.enabled.toggle",
+          "when": "view == type-tree",
+          "group": "icons@1"
+        },
+        {
+          "command": "typescript-explorer.typeTree.view.icons.colors.enabled.toggle",
+          "when": "view == type-tree",
+          "group": "icons@2"
         }
       ],
       "view/item/context": [

diff --git a/packages/typescript-explorer/src/commands.ts b/packages/typescript-explorer/src/commands.ts
@@ -1,9 +1,46 @@
 import { ViewProviders } from './view/views';
 import { TSExplorer } from "./config";
 import * as vscode from 'vscode'
+import { TypeTreeProvider } from './view/typeTreeView';
 
-export function registerCommands(context: vscode.ExtensionContext, ViewProviders: ViewProviders) {
-    context.subscriptions.push(
-		vscode.commands.registerCommand('typescript-explorer.toggleExpandedHover', TSExplorer.Config.toggleExpandedHover)
+type CommandHandler = (...args: any[]) => void|Promise<void>
+type CommandInfo = [id: string, handler: CommandHandler]
+
+const normalCommands: CommandInfo[] = [
+	["typescript-explorer.toggleExpandedHover", TSExplorer.Config.toggleExpandedHover],
+]
+
+const typeTreeViewCommands = (typeTreeProvider: TypeTreeProvider): CommandInfo[] => ([
+	["typescript-explorer.typeTree.view.icons.enabled.toggle", TSExplorer.Config.TypeTreeView.toggleIconsEnabled],
+	["typescript-explorer.typeTree.view.icons.colors.enabled.toggle", TSExplorer.Config.TypeTreeView.toggleIconColorsEnabled]
+] as RefreshableCommandInfo[]).map(t => wrapRefresh(t, typeTreeProvider))
+
+export function registerCommands(context: vscode.ExtensionContext, { typeTreeProvider }: ViewProviders) {
+	const commands = [
+		...normalCommands,
+		...typeTreeViewCommands(typeTreeProvider)
+	]
+
+	commands.forEach(c => registerCommand(c, context))
+}
+
+type RefreshableCommandInfo = CommandInfo | [...CommandInfo, boolean]
+
+function wrapRefresh(command: RefreshableCommandInfo, refreshable: {refresh(): void}): CommandInfo {
+	const [id, handler, refresh=true] = command
+
+	if(!refresh) {
+		return [id, handler]
+	}
+
+	return [id, async () => {
+		await handler()
+		refreshable.refresh()
+	}]
+}
+
+function registerCommand([id, handler]: CommandInfo, context: vscode.ExtensionContext) {
+	context.subscriptions.push(
+		vscode.commands.registerCommand(id, handler)
 	)
 }
diff --git a/packages/typescript-explorer/src/config.ts b/packages/typescript-explorer/src/config.ts
@@ -2,6 +2,15 @@ import * as vscode from 'vscode'
 
 export namespace TSExplorer {
     export namespace Config {
+        const getBoolean = (id: string, defaultValue?: boolean) => () => !!config().get(id, defaultValue)
+        const toggleBoolean = (id: string, defaultValue?: boolean) => async () => config().update(id, !getBoolean(id, defaultValue)())
+        const configBoolean = (id: string, defaultValue?: boolean) => ({ get: getBoolean(id, defaultValue), toggle: toggleBoolean(id) })
+
+        export namespace TypeTreeView {
+            export const { get: iconsEnabled, toggle: toggleIconsEnabled } = configBoolean("typescript-explorer.typeTree.view.icons.enable")
+            export const { get: iconColorsEnabled, toggle: toggleIconColorsEnabled } = configBoolean("typescript-explorer.typeTree.view.icons.colors.enable")
+        }
+
         export function toggleExpandedHover() {
 			config().update('typescript-explorer.expandedHover', !isExpandedHover(), true)
         }

diff --git a/packages/typescript-explorer/src/extension.ts b/packages/typescript-explorer/src/extension.ts
@@ -5,6 +5,7 @@ import { createAndRegisterViews } from './view/views';
 import { StateManager } from './state/stateManager';
 
 // TODO: add config for e.g. max depth
+// TODO: change command namespacing from "typescript-explorer.toggleTypeTreeIcons" to e.g. "typescriptExplorer.typeTree.toggleIcons"
 
 export function activate(context: vscode.ExtensionContext) {
 	const stateManager = new StateManager()

diff --git a/packages/typescript-explorer/src/view/typeTreeView.ts b/packages/typescript-explorer/src/view/typeTreeView.ts
@@ -1,6 +1,7 @@
 import { TypeInfo, TypeId, getTypeInfoChildren, SymbolInfo, SignatureInfo, IndexInfo, pseudoBigIntToString, LocalizedTypeInfo, TypeInfoMap, SourceFileLocation, TypeInfoLocalizer, localizePurpose } from '@ts-expand-type/api'
 import assert = require('assert');
 import * as vscode from 'vscode'
+import { TSExplorer } from '../config';
 import { StateManager } from '../state/stateManager';
 import { fromFileLocationRequestArgs, rangeFromLineAndCharacters } from '../util';
 
@@ -159,14 +160,20 @@ function getMeta(info: LocalizedTypeInfo): TypeTreeItemMeta {
     type IconId = [id: string, colorId?: string]
 
     function getIcon(): vscode.ThemeIcon|undefined {
+        if(!TSExplorer.Config.TypeTreeView.iconsEnabled()) {
+            return undefined
+        }
+
         const iconIds = _getIcon()
         if(!iconIds) {
             return undefined
         }
 
         let [ id, colorId ] = iconIds
 
-        // TODO: config option for no color, in which case set colorId to "icon.foreground"
+        if(!TSExplorer.Config.TypeTreeView.iconColorsEnabled()) {
+            colorId = "icon.foreground"
+        }
 
         return !colorId ? new vscode.ThemeIcon(id) : new vscode.ThemeIcon(id, new vscode.ThemeColor(colorId))