Setting for hat shape overrides (#1853)

![image](https://github.com/cursorless-dev/cursorless/assets/3511326/c4dfb684-4fc5-4337-ba07-25753359a602)

* added hidden setting `cursorless.private.hatShapesDir`
* Also made svg parser more robust

## Checklist

- [/] I have added
[tests](https://www.cursorless.org/docs/contributing/test-case-recorder/)
- [/] I have updated the
[docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and
[cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet)
- [/] I have not broken the cheatsheet

---------

Co-authored-by: Pokey Rule <[email protected]>

Author: AndreasArvidsson

changelog/2023-09-addedInsertPythonAction.md

@@ -1,7 +1,7 @@
 ---
 tags: [enhancement, talon]
-mergeDate: 2023-09-10
 pullRequest: 1875
+mergeDate: 2023-09-10
 ---
 
-- Added `cursorless_insert` action to the public Talon api. This api enables you to define custom grammars for cursorless text insertion. See the [talon-side api docs](https://www.cursorless.org/docs/user/customization/#public-talon-actions) for more
+- Added `cursorless_insert` action to the public Talon api. This api enables you to define custom grammars for Cursorless text insertion. See the [talon-side api docs](https://www.cursorless.org/docs/user/customization/#public-talon-actions) for more

packages/common/src/util/walkAsync.ts

@@ -6,18 +6,27 @@ import { flatten } from "lodash";
  * Note: Returns full paths
  * Based on https://gist.github.com/kethinov/6658166#gistcomment-1941504
  * @param dir
- * @param filelist
+ * @param fileEnding If defined, only return files ending with this string. Eg `.txt`
  * @returns
  */
-export const walkFiles = async (dir: string): Promise<string[]> => {
+export const walkFiles = async (
+  dir: string,
+  fileEnding?: string,
+): Promise<string[]> => {
   const dirEntries = await readdir(dir, { withFileTypes: true });
 
-  return flatten(
+  const files = flatten(
     await Promise.all(
       dirEntries.map(async (dirent) => {
         const filePath = path.join(dir, dirent.name);
         return dirent.isDirectory() ? await walkFiles(filePath) : [filePath];
       }),
     ),
   );
+
+  if (fileEnding != null) {
+    return files.filter((file) => file.endsWith(fileEnding));
+  }
+
+  return files;
 };

packages/cursorless-engine/src/core/Snippets.ts

@@ -236,8 +236,6 @@ export class Snippets {
   }
 }
 
-async function getSnippetPaths(snippetsDir: string) {
-  return (await walkFiles(snippetsDir)).filter((path) =>
-    path.endsWith(CURSORLESS_SNIPPETS_SUFFIX),
-  );
+function getSnippetPaths(snippetsDir: string) {
+  return walkFiles(snippetsDir, CURSORLESS_SNIPPETS_SUFFIX);
 }

packages/cursorless-vscode/package.json

@@ -838,7 +838,7 @@
           }
         },
         "cursorless.experimental.snippetsDir": {
-          "description": "Directory containing snippets for use in cursorless",
+          "description": "Directory containing snippets for use in Cursorless",
           "type": "string"
         },
         "cursorless.experimental.keyboard.modal.keybindings.actions": {

packages/cursorless-vscode/src/ide/vscode/hats/VscodeHatRenderer.ts

@@ -1,20 +1,27 @@
-import { readFileSync } from "fs";
+import {
+  Listener,
+  Notifier,
+  PathChangeListener,
+  walkFiles,
+} from "@cursorless/common";
 import { cloneDeep, isEqual } from "lodash";
-import { join } from "path";
+import * as fs from "node:fs";
+import * as path from "node:path";
 import * as vscode from "vscode";
+import VscodeEnabledHatStyleManager, {
+  ExtendedHatStyleMap,
+} from "../VscodeEnabledHatStyleManager";
+import { HAT_SHAPES, HatShape, VscodeHatStyleName } from "../hatStyles.types";
+import { FontMeasurements } from "./FontMeasurements";
 import getHatThemeColors from "./getHatThemeColors";
 import {
-  defaultShapeAdjustments,
   DEFAULT_HAT_HEIGHT_EM,
   DEFAULT_VERTICAL_OFFSET_EM,
   IndividualHatAdjustmentMap,
+  defaultShapeAdjustments,
 } from "./shapeAdjustments";
-import { Listener, Notifier } from "@cursorless/common";
-import { FontMeasurements } from "./FontMeasurements";
-import { HatShape, HAT_SHAPES, VscodeHatStyleName } from "../hatStyles.types";
-import VscodeEnabledHatStyleManager, {
-  ExtendedHatStyleMap,
-} from "../VscodeEnabledHatStyleManager";
+
+const CURSORLESS_HAT_SHAPES_SUFFIX = ".svg";
 
 type HatDecorationMap = Partial<
   Record<VscodeHatStyleName, vscode.TextEditorDecorationType>
@@ -39,11 +46,24 @@ const hatConfigSections = [
  * hats.  The decision about which hat styles should be available is up to
  * {@link VscodeEnabledHatStyles}
  */
+
+const SETTING_SECTION_HAT_SHAPES_DIR = "cursorless.private";
+const SETTING_NAME_HAT_SHAPES_DIR = "hatShapesDir";
+const hatShapesDirSettingId = `${SETTING_SECTION_HAT_SHAPES_DIR}.${SETTING_NAME_HAT_SHAPES_DIR}`;
+
+interface SvgInfo {
+  svg: string;
+  svgHeightPx: number;
+  svgWidthPx: number;
+}
+
 export default class VscodeHatRenderer {
   private decorationMap!: HatDecorationMap;
   private disposables: vscode.Disposable[] = [];
   private notifier: Notifier<[]> = new Notifier();
   private lastSeenEnabledHatStyles: ExtendedHatStyleMap = {};
+  private hatsDirWatcherDisposable?: vscode.Disposable;
+  private hatShapeOverrides: Record<string, string> = {};
 
   constructor(
     private extensionContext: vscode.ExtensionContext,
@@ -57,7 +77,9 @@ export default class VscodeHatRenderer {
     this.disposables.push(
       vscode.workspace.onDidChangeConfiguration(
         async ({ affectsConfiguration }) => {
-          if (
+          if (affectsConfiguration(hatShapesDirSettingId)) {
+            await this.updateHatsDirWatcher();
+          } else if (
             hatConfigSections.some((section) => affectsConfiguration(section))
           ) {
             await this.recomputeDecorations();
@@ -88,6 +110,7 @@ export default class VscodeHatRenderer {
 
   async init() {
     await this.constructDecorations();
+    await this.updateHatsDirWatcher();
   }
 
   /**
@@ -99,6 +122,52 @@ export default class VscodeHatRenderer {
     return this.decorationMap[hatStyle];
   }
 
+  private async updateHatsDirWatcher() {
+    this.hatsDirWatcherDisposable?.dispose();
+
+    const hatsDir = vscode.workspace
+      .getConfiguration(SETTING_SECTION_HAT_SHAPES_DIR)
+      .get<string>(SETTING_NAME_HAT_SHAPES_DIR)!;
+
+    if (hatsDir) {
+      await this.updateShapeOverrides(hatsDir);
+
+      if (fs.existsSync(hatsDir)) {
+        this.hatsDirWatcherDisposable = watchDir(hatsDir, () =>
+          this.updateShapeOverrides(hatsDir),
+        );
+      }
+    } else {
+      this.hatShapeOverrides = {};
+      await this.recomputeDecorations();
+    }
+  }
+
+  private async updateShapeOverrides(hatShapesDir: string) {
+    this.hatShapeOverrides = {};
+    const files = await this.getHatShapePaths(hatShapesDir);
+
+    for (const file of files) {
+      const name = path.basename(file, CURSORLESS_HAT_SHAPES_SUFFIX);
+      this.hatShapeOverrides[name] = file;
+    }
+
+    await this.recomputeDecorations();
+  }
+
+  private async getHatShapePaths(hatShapesDir: string) {
+    try {
+      return await walkFiles(hatShapesDir, CURSORLESS_HAT_SHAPES_SUFFIX);
+    } catch (error) {
+      void vscode.window.showErrorMessage(
+        `Error with cursorless hat shapes dir "${hatShapesDir}": ${
+          (error as Error).message
+        }`,
+      );
+      return [];
+    }
+  }
+
   private destroyDecorations() {
     Object.values(this.decorationMap).forEach((decoration) => {
       decoration.dispose();
@@ -160,7 +229,16 @@ export default class VscodeHatRenderer {
     this.decorationMap = Object.fromEntries(
       Object.entries(this.enabledHatStyles.hatStyleMap).map(
         ([styleName, { color, shape }]) => {
-          const { svg, svgWidthPx, svgHeightPx } = hatSvgMap[shape];
+          const svgInfo = hatSvgMap[shape];
+
+          if (svgInfo == null) {
+            return [
+              styleName,
+              vscode.window.createTextEditorDecorationType({}),
+            ];
+          }
+
+          const { svg, svgWidthPx, svgHeightPx } = svgInfo;
 
           const { light, dark } = getHatThemeColors(color);
 
@@ -194,17 +272,36 @@ export default class VscodeHatRenderer {
     );
   }
 
-  private constructColoredSvgDataUri(originalSvg: string, color: string) {
+  private checkSvg(shape: HatShape, svg: string) {
+    let isOk = true;
+
     if (
-      originalSvg.match(/fill="[^"]+"/) == null &&
-      originalSvg.match(/fill:[^;]+;/) == null
+      svg.match(/fill="(?!none)[^"]+"/) == null &&
+      svg.match(/fill:(?!none)[^;]+;/) == null
     ) {
-      throw Error("Raw svg doesn't have fill");
+      vscode.window.showErrorMessage(
+        `Raw svg '${shape}' is missing 'fill' property`,
+      );
+      isOk = false;
     }
 
+    const viewBoxMatch = svg.match(/viewBox="([^"]+)"/);
+
+    if (viewBoxMatch == null) {
+      vscode.window.showErrorMessage(
+        `Raw svg '${shape}' is missing 'viewBox' property`,
+      );
+      isOk = false;
+    }
+
+    return isOk;
+  }
+
+  private constructColoredSvgDataUri(originalSvg: string, color: string) {
     const svg = originalSvg
-      .replace(/fill="[^"]+"/, `fill="${color}"`)
-      .replace(/fill:[^;]+;/, `fill:${color};`);
+      .replace(/fill="(?!none)[^"]+"/g, `fill="${color}"`)
+      .replace(/fill:(?!none)[^;]+;/g, `fill:${color};`)
+      .replace(/\r?\n/g, " ");
 
     const encoded = encodeURIComponent(svg);
 
@@ -227,16 +324,22 @@ export default class VscodeHatRenderer {
     shape: HatShape,
     scaleFactor: number,
     hatVerticalOffsetEm: number,
-  ) {
-    const iconPath = join(
-      this.extensionContext.extensionPath,
-      "images",
-      "hats",
-      `${shape}.svg`,
-    );
-    const rawSvg = readFileSync(iconPath, "utf8");
+  ): SvgInfo | null {
+    const iconPath =
+      this.hatShapeOverrides[shape] ??
+      path.join(
+        this.extensionContext.extensionPath,
+        "images",
+        "hats",
+        `${shape}.svg`,
+      );
+    const rawSvg = fs.readFileSync(iconPath, "utf8");
     const { characterWidth, characterHeight, fontSize } = fontMeasurements;
 
+    if (!this.checkSvg(shape, rawSvg)) {
+      return null;
+    }
+
     const { originalViewBoxHeight, originalViewBoxWidth } =
       this.getViewBoxDimensions(rawSvg);
 
@@ -289,10 +392,7 @@ export default class VscodeHatRenderer {
   }
 
   private getViewBoxDimensions(rawSvg: string) {
-    const viewBoxMatch = rawSvg.match(/viewBox="([^"]+)"/);
-    if (viewBoxMatch == null) {
-      throw Error("View box not found in svg");
-    }
+    const viewBoxMatch = rawSvg.match(/viewBox="([^"]+)"/)!;
 
     const originalViewBoxString = viewBoxMatch[1];
     const [_0, _1, originalViewBoxWidthStr, originalViewBoxHeightStr] =
@@ -306,6 +406,23 @@ export default class VscodeHatRenderer {
 
   dispose() {
     this.destroyDecorations();
+    this.hatsDirWatcherDisposable?.dispose();
     this.disposables.forEach(({ dispose }) => dispose());
   }
 }
+
+function watchDir(
+  path: string,
+  onDidChange: PathChangeListener,
+): vscode.Disposable {
+  const hatsDirWatcher = vscode.workspace.createFileSystemWatcher(
+    new vscode.RelativePattern(path, `**/*${CURSORLESS_HAT_SHAPES_SUFFIX}`),
+  );
+
+  return vscode.Disposable.from(
+    hatsDirWatcher,
+    hatsDirWatcher.onDidChange(onDidChange),
+    hatsDirWatcher.onDidCreate(onDidChange),
+    hatsDirWatcher.onDidDelete(onDidChange),
+  );
+}

packages/cursorless-vscode/src/ide/vscode/hats/VscodeHats.ts

@@ -15,8 +15,8 @@ import { VscodeHatStyleName } from "../hatStyles.types";
 import VscodeEnabledHatStyleManager from "../VscodeEnabledHatStyleManager";
 import type { VscodeIDE } from "../VscodeIDE";
 import { VscodeTextEditorImpl } from "../VscodeTextEditorImpl";
-import VscodeHatRenderer from "./VscodeHatRenderer";
 import { FontMeasurements } from "./FontMeasurements";
+import VscodeHatRenderer from "./VscodeHatRenderer";
 
 export class VscodeHats implements Hats {
   private enabledHatStyleManager: VscodeEnabledHatStyleManager;