Select next/previous glyph

src/fontra/client/lang/en.json

@@ -136,7 +136,9 @@
   "menubar.view.find-glyphs-that-use": "Find glyphs that use '%0'",
   "menubar.view.remove-selected-glyph-from-canvas": "Remove selected glyph from canvas",
   "menubar.view.replace-selected-glyph-on-canvas": "Replace selected glyph on canvas",
+  "menubar.view.select-next-glyph": "Select next glyph",
   "menubar.view.select-next-source": "Select next source",
+  "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "Select previous source",
   "selection.none": "(No selection)",
   "sidebar.designspace-navigation": "Designspace Navigation",

src/fontra/client/lang/zh-CN.json

@@ -136,7 +136,9 @@
   "menubar.view.find-glyphs-that-use": "寻找使用了 '%0' 的字符形",
   "menubar.view.remove-selected-glyph-from-canvas": "Remove selected glyph from canvas",
   "menubar.view.replace-selected-glyph-on-canvas": "Replace selected glyph on canvas",
+  "menubar.view.select-next-glyph": "Select next glyph",
   "menubar.view.select-next-source": "选择下一个源",
+  "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "选择上一个源",
   "selection.none": "（未选择）",
   "sidebar.designspace-navigation": "Designspace 导航",

src/fontra/client/web-components/glyphs-search.js

@@ -151,6 +151,7 @@ export class GlyphsSearch extends UnlitElement {
     const filteredGlyphItems = this.glyphsListItems.filter(
       this._glyphNamesListFilterFunc
     );
+    this.filteredGlyphItems = filteredGlyphItems;
     this.glyphNamesList.setItems(filteredGlyphItems);
   }
 }

src/fontra/views/editor/editor.js

@@ -497,6 +497,26 @@ export class EditorController {
         () => this.doSelectPreviousNextSource(false)
       );
 
+      registerAction(
+        "action.select-previous-glyph",
+        {
+          topic,
+          titleKey: "menubar.view.select-previous-glyph",
+          defaultShortCuts: [{ baseKey: "ArrowLeft", commandKey: true }],
+        },
+        () => this.doSelectPreviousNextGlyph(true)
+      );
+
+      registerAction(
+        "action.select-next-glyph",
+        {
+          topic,
+          titleKey: "menubar.view.select-next-glyph",
+          defaultShortCuts: [{ baseKey: "ArrowRight", commandKey: true }],
+        },
+        () => this.doSelectPreviousNextGlyph(false)
+      );
+
       registerAction(
         "action.find-glyphs-that-use",
         {
@@ -1549,6 +1569,12 @@ export class EditorController {
     this.glyphSelectedContextMenuItems.push({
       actionIdentifier: "action.select-next-source",
     });
+    this.glyphSelectedContextMenuItems.push({
+      actionIdentifier: "action.select-previous-glyph",
+    });
+    this.glyphSelectedContextMenuItems.push({
+      actionIdentifier: "action.select-next-glyph",
+    });
     this.glyphSelectedContextMenuItems.push({
       title: () =>
         translate(
@@ -2804,6 +2830,29 @@ export class EditorController {
     this.sceneSettings.selectedSourceIndex = newSourceIndex;
   }
 
+  async doSelectPreviousNextGlyph(selectPrevious) {
+    const panel = this.getSidebarPanel("glyph-search");
+    const filteredGlyphItems = panel.glyphsSearch.filteredGlyphItems;
+    const glyphNames = filteredGlyphItems.map((x) => x.glyphName);
+
+    const selectedGlyphName = this.sceneSettings.selectedGlyphName;
+    if (!selectedGlyphName) {
+      return;
+    }
+    const index = glyphNames.indexOf(selectedGlyphName);
+
+    const newIndex = selectPrevious
+      ? index - 1 < 0
+        ? glyphNames.length - 1
+        : index - 1
+      : index + 1 >= glyphNames.length
+      ? 0
+      : index + 1;
+
+    const glyphInfo = this.fontController.glyphInfoFromGlyphName(glyphNames[newIndex]);
+    this.insertGlyphInfos([glyphInfo], 0, true);
+  }
+
   async doFindGlyphsThatUseGlyph() {
     const glyphName = this.sceneSettings.selectedGlyphName;
 

src/fontra/views/editor/panel-glyph-search.js

@@ -18,15 +18,15 @@ export default class GlyphSearchPanel extends Panel {
 
   constructor(editorController) {
     super(editorController);
-    const glyphsSearch = this.contentElement.querySelector("#glyphs-search");
-    glyphsSearch.addEventListener("selectedGlyphNameChanged", (event) =>
+    this.glyphsSearch = this.contentElement.querySelector("#glyphs-search");
+    this.glyphsSearch.addEventListener("selectedGlyphNameChanged", (event) =>
       this.glyphNameChangedCallback(event.detail)
     );
     this.editorController.fontController.addChangeListener({ glyphMap: null }, () => {
-      glyphsSearch.updateGlyphNamesListContent();
+      this.glyphsSearch.updateGlyphNamesListContent();
     });
     this.editorController.fontController.ensureInitialized.then(() => {
-      glyphsSearch.glyphMap = this.editorController.fontController.glyphMap;
+      this.glyphsSearch.glyphMap = this.editorController.fontController.glyphMap;
     });
   }