Font overview phase 1

pyproject.toml

@@ -57,6 +57,7 @@ fontra-workflow = "fontra.workflow.command:main"
 
 [project.entry-points."fontra.views"]
 editor = "fontra.views.editor"
+fontoverview = "fontra.views.fontoverview"
 fontinfo = "fontra.views.fontinfo"
 applicationsettings = "fontra.views.applicationsettings"
 

src/fontra/client/core/font-controller.js

@@ -143,7 +143,7 @@ export class FontController {
     return this._rootObject.sources;
   }
 
-  async getSortedSourceIdentifiers() {
+  getSortedSourceIdentifiers() {
     const fontAxesSourceSpace = mapAxesFromUserSpaceToSourceSpace(this.fontAxes);
     const sortFunc = (identifierA, identifierB) => {
       for (const axis of fontAxesSourceSpace) {

src/fontra/client/core/html-utils.js

@@ -16,7 +16,7 @@ export class SimpleElement extends HTMLElement {
 
   _attachStyles() {
     if (this.constructor.styles) {
-      this.appendStyle(this.constructor.styles);
+      this._appendStyle(this.constructor.styles);
     }
   }
 

src/fontra/client/core/utils.js

@@ -683,3 +683,10 @@ export class FocusKeeper {
     this._focusedElement?.focus();
   }
 }
+
+export function glyphMapToItemList(glyphMap) {
+  return Object.entries(glyphMap).map(([glyphName, codePoints]) => ({
+    glyphName,
+    codePoints,
+  }));
+}

src/fontra/client/lang/de.js

@@ -205,6 +205,7 @@ export const strings = {
   "font-info.vendorid": "Hersteller ID",
   "font-info.version.major": "Hauptversionsnummer",
   "font-info.version.minor": "Nebenversionsnummer",
+  "font-overview.title": "Font overview",
   "guideline.labels.angle": "Neigung",
   "guideline.labels.locked": "Gesperrt",
   "guideline.labels.name": "Name",
@@ -238,6 +239,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Vorheriger Glyph",
   "menubar.view.select-previous-source": "Vorherige Source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Jemand anderes hat vor dir etwas geändert.",
   "message.edit-has-been-reverted": "Die Änderung wurde rückgängig gemacht.",
   "message.glyph-could-not-be-saved": "Glyph konnte nicht gespeichert werden.",
@@ -301,6 +303,7 @@ export const strings = {
     "Auch den dazugehörigen Layer %0 entfernen",
   "sidebar.designspace-navigation.warning.delete-source":
     "Bist du sicher, dass du Source %0 entfernen willst?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph-Notiz",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph-Notiz für %0",
   "sidebar.glyph-note.no-glyph-selected": "(keine Glyphe ausgewählt)",

src/fontra/client/lang/en.js

@@ -202,6 +202,7 @@ export const strings = {
   "font-info.vendorid": "Vendor ID",
   "font-info.version.major": "Version Major",
   "font-info.version.minor": "Version Minor",
+  "font-overview.title": "Font overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Locked",
   "guideline.labels.name": "Name",
@@ -233,6 +234,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "Select previous source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Someone else made an edit just before you.",
   "message.edit-has-been-reverted": "The edit has been reverted.",
   "message.glyph-could-not-be-saved": "The glyph could not be saved.",
@@ -293,6 +295,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Are you sure you want to delete source %0?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph Note",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph Note for %0",
   "sidebar.glyph-note.no-glyph-selected": "(No glyph selected)",

src/fontra/client/lang/fr.js

@@ -203,6 +203,7 @@ export const strings = {
   "font-info.vendorid": "Identifiant du vendeur",
   "font-info.version.major": "Version Major",
   "font-info.version.minor": "Version Minor",
+  "font-overview.title": "Font overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Vérouillé",
   "guideline.labels.name": "Nom",
@@ -238,6 +239,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Sélectionner le glyphe précédente",
   "menubar.view.select-previous-source": "Sélectionner la source précédente",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Quelqu'un d'autre a édité juste avant vous",
   "message.edit-has-been-reverted": "L'édition a été annulé",
   "message.glyph-could-not-be-saved": "Le glyphe n'a pas pu être enregistré",
@@ -305,6 +307,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Êtes-vous sûr de vouloir supprimer la source %0",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Note du glyphe",
   "sidebar.glyph-note.glyph-note-for-glyph": "Note du glyphe %0",
   "sidebar.glyph-note.no-glyph-selected": "(aucun glyphe sélectionné)",

src/fontra/client/lang/ja.js

@@ -204,6 +204,7 @@ export const strings = {
   "font-info.vendorid": "ベンダーID",
   "font-info.version.major": "メジャーバージョン",
   "font-info.version.minor": "マイナーバージョン",
+  "font-overview.title": "Font overview",
   "guideline.labels.angle": "角度",
   "guideline.labels.locked": "ロック",
   "guideline.labels.name": "ガイド名",
@@ -236,6 +237,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "前のグリフを選択",
   "menubar.view.select-previous-source": "前のソースを選択",
   "menubar.view.select-previous-source-layer": "前のソースレイヤーを選択",
+  "menubar.window": "Window",
   "message.cancel-editing": "他のユーザーがあなたの直前に操作を行いました。",
   "message.edit-has-been-reverted": "このグリフは前の状態に戻されました。",
   "message.glyph-could-not-be-saved": "このグリフは保存されません。",
@@ -296,6 +298,7 @@ export const strings = {
   "sidebar.designspace-navigation.warning.delete-associated-layer":
     "同様にレイヤー%0も削除",
   "sidebar.designspace-navigation.warning.delete-source": "ソース%0を削除しますか？",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "グリフノート",
   "sidebar.glyph-note.glyph-note-for-glyph": "%0のグリフノート",
   "sidebar.glyph-note.no-glyph-selected": "（グリフが選択されていません）",

src/fontra/client/lang/nl.js

@@ -202,6 +202,7 @@ export const strings = {
   "font-info.vendorid": "Vendor ID",
   "font-info.version.major": "Versie major",
   "font-info.version.minor": "Versie minor",
+  "font-overview.title": "Font overview",
   "guideline.labels.angle": "Angle",
   "guideline.labels.locked": "Locked",
   "guideline.labels.name": "Naam",
@@ -237,6 +238,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "Select previous glyph",
   "menubar.view.select-previous-source": "Selecteer de vorige source",
   "menubar.view.select-previous-source-layer": "Select previous source layer",
+  "menubar.window": "Window",
   "message.cancel-editing": "Someone else made an edit just before you.",
   "message.edit-has-been-reverted": "The edit has been reverted.",
   "message.glyph-could-not-be-saved": "The glyph could not be saved.",
@@ -297,6 +299,7 @@ export const strings = {
     "Also delete associated layer %0",
   "sidebar.designspace-navigation.warning.delete-source":
     "Are you sure you want to delete source %0?",
+  "sidebar.font-overview.font-source": "Font source",
   "sidebar.glyph-note": "Glyph notitie",
   "sidebar.glyph-note.glyph-note-for-glyph": "Glyph Note for %0",
   "sidebar.glyph-note.no-glyph-selected": "(No glyph selected)",

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

@@ -138,7 +138,7 @@ export const strings = {
   "dialog.cant-edit-glyph.content.locked-glyph": "该字形已被锁定。",
   "dialog.cant-edit-glyph.title": "无法编辑字形 “%0”",
   "dialog.create": "创建",
-  "dialog.create-new-glyph.body": '如果你想%1创建一个新的字形 "%0"，请点击 "创建"。',
+  "dialog.create-new-glyph.body": '如果你想创建一个新的字形 "%0"%1，请点击 "创建"。',
   "dialog.create-new-glyph.body.2": '为字符 "%0" (%1)',
   "dialog.create-new-glyph.title": '创建新字形 "%0"？',
   "dialog.delete": "删除",
@@ -193,6 +193,7 @@ export const strings = {
   "font-info.vendorid": "供应商 ID",
   "font-info.version.major": "主要版本号",
   "font-info.version.minor": "次要版本号",
+  "font-overview.title": "字体概览",
   "guideline.labels.angle": "角度",
   "guideline.labels.locked": "已锁定",
   "guideline.labels.name": "名称",
@@ -224,6 +225,7 @@ export const strings = {
   "menubar.view.select-previous-glyph": "选择上一个字形",
   "menubar.view.select-previous-source": "选择上一个源",
   "menubar.view.select-previous-source-layer": "选择上一个源图层",
+  "menubar.window": "窗口",
   "message.cancel-editing": "有人在你之前做了编辑。",
   "message.edit-has-been-reverted": "编辑将被复原。",
   "message.glyph-could-not-be-saved": "该字形无法被保存。",
@@ -281,6 +283,7 @@ export const strings = {
   "sidebar.designspace-navigation.warning.delete-associated-layer":
     "并删除关联的图层 %0",
   "sidebar.designspace-navigation.warning.delete-source": "你确定要删除源 “%0” 吗？",
+  "sidebar.font-overview.font-source": "字体源",
   "sidebar.glyph-note": "字形备忘",
   "sidebar.glyph-note.glyph-note-for-glyph": "0% 的字形备忘",
   "sidebar.glyph-note.no-glyph-selected": "（无选中字形）",

src/fontra/client/web-components/glyph-cell-view.js

@@ -0,0 +1,208 @@
+import * as html from "/core/html-utils.js";
+import { translate } from "/core/localization.js";
+import { ObservableController } from "/core/observable-object.js";
+import { difference, intersection, symmetricDifference, union } from "/core/set-ops.js";
+import { enumerate } from "/core/utils.js";
+import { GlyphCell } from "/web-components/glyph-cell.js";
+import { Accordion } from "/web-components/ui-accordion.js";
+
+export class GlyphCellView extends HTMLElement {
+  constructor(fontController, locationController) {
+    super();
+
+    this.fontController = fontController;
+    this.locationController = locationController;
+
+    this.glyphSelectionController = new ObservableController({ selection: new Set() });
+    this.glyphSelectionController.addKeyListener("selection", (event) => {
+      const selection = event.newValue;
+      const diff = symmetricDifference(selection, event.oldValue);
+      this.forEachGlyphCell((glyphCell) => {
+        if (diff.has(glyphCell.glyphName)) {
+          glyphCell.selected = selection.has(glyphCell.glyphName);
+        }
+      });
+    });
+
+    this.fontController.addChangeListener({ glyphMap: null }, (event) => {
+      this.glyphSelection = intersection(
+        this.glyphSelection,
+        Object.keys(this.fontController.glyphMap)
+      );
+    });
+
+    this._intersectionObserver = new IntersectionObserver((entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.intersectionRatio > 0) {
+          this._intersectionObserver.unobserve(entry.target);
+          entry.target.onBecomeVisible?.();
+        } else {
+        }
+      });
+    });
+
+    this.appendChild(this.getContentElement());
+  }
+
+  getContentElement() {
+    this.accordion = new Accordion();
+
+    this.accordion.appendStyle(`
+    .placeholder-label {
+      font-size: 0.9em;
+      opacity: 40%;
+    }
+
+    .font-overview-accordion-item {
+      height: 100%;
+      width: 100%;
+      overflow-y: scroll;
+      white-space: normal;
+    }
+    `);
+
+    // TODO: refactor this if we implement different sections. For now only one section.
+    this.accordion.items = [
+      {
+        label: "Glyphs",
+        open: true,
+        content: html.div({ class: "font-overview-accordion-item" }, []),
+        section: "Glyphs",
+      },
+    ];
+
+    return html.div({}, [this.accordion]); // wrap in div for scroll behavior
+  }
+
+  setGlyphItems(glyphs) {
+    this.glyphs = glyphs;
+    const results = [];
+    for (const item of this.accordion.items) {
+      this._updateAccordionItem(item).then((hasResult) => {
+        this.accordion.showHideAccordionItem(item, hasResult);
+        results.push(hasResult);
+      });
+    }
+  }
+
+  async _updateAccordionItem(item) {
+    const element = item.content;
+
+    element.innerHTML = "";
+    let hideAccordionItem = true;
+
+    element.appendChild(
+      html.span({ class: "placeholder-label" }, [
+        translate("sidebar.related-glyphs.loading"), // TODO: general loading key.
+      ])
+    );
+    const glyphs = await this.getGlyphs(item.section);
+
+    item.glyphsToAdd = [...glyphs];
+
+    if (glyphs?.length) {
+      element.innerHTML = "";
+      this._addCellsIfNeeded(item);
+      // At least in Chrome, we need to reset the scroll position, but it doesn't
+      // work if we do it right away, only after the next event iteration.
+      setTimeout(() => {
+        element.scrollTop = 0;
+      }, 0);
+
+      hideAccordionItem = false;
+    } else {
+      element.innerHTML = "";
+    }
+
+    return !hideAccordionItem;
+  }
+
+  _addCellsIfNeeded(item) {
+    if (!item.glyphsToAdd.length) {
+      return;
+    }
+    const CHUNK_SIZE = 200;
+    const ADD_CELLS_TRIGGER_INDEX = 150;
+    const chunkOfGlyphs = item.glyphsToAdd.splice(0, CHUNK_SIZE);
+    const documentFragment = document.createDocumentFragment();
+    for (const [index, { glyphName, codePoints }] of enumerate(chunkOfGlyphs)) {
+      const glyphCell = new GlyphCell(
+        this.fontController,
+        glyphName,
+        codePoints,
+        this.locationController,
+        "fontLocationSourceMapped"
+      );
+      glyphCell.onclick = (event) => {
+        this.handleSingleClick(event, glyphCell);
+      };
+
+      glyphCell.selected = this.glyphSelection.has(glyphName);
+
+      if (index == ADD_CELLS_TRIGGER_INDEX) {
+        glyphCell.onBecomeVisible = () => {
+          this._addCellsIfNeeded(item);
+        };
+        this._intersectionObserver.observe(glyphCell);
+      }
+
+      documentFragment.appendChild(glyphCell);
+    }
+    item.content.appendChild(documentFragment);
+  }
+
+  getSelectedGlyphInfo() {
+    return this.glyphs.filter((glyphInfo) =>
+      this.glyphSelection.has(glyphInfo.glyphName)
+    );
+  }
+
+  get glyphSelection() {
+    return this.glyphSelectionController.model.selection;
+  }
+
+  set glyphSelection(selection) {
+    this.glyphSelectionController.model.selection = selection;
+  }
+
+  forEachGlyphCell(func) {
+    for (const glyphCell of this.iterGlyphCells()) {
+      func(glyphCell);
+    }
+  }
+
+  *iterGlyphCells() {
+    for (const glyphCell of this.accordion.shadowRoot.querySelectorAll("glyph-cell")) {
+      yield glyphCell;
+    }
+  }
+
+  handleSingleClick(event, glyphCell) {
+    if (event.detail > 1) {
+      // Part of a double click, we should do nothing and let handleDoubleClick
+      // deal with the event
+      return;
+    }
+
+    const glyphName = glyphCell.glyphName;
+
+    if (this.glyphSelection.has(glyphName)) {
+      if (event.shiftKey) {
+        this.glyphSelection = difference(this.glyphSelection, [glyphName]);
+      }
+    } else {
+      if (event.shiftKey) {
+        this.glyphSelection = union(this.glyphSelection, [glyphName]);
+      } else {
+        this.glyphSelection = new Set([glyphName]);
+      }
+    }
+  }
+
+  async getGlyphs(section) {
+    // TODO: section. For now return all glyphs
+    return this.glyphs;
+  }
+}
+
+customElements.define("glyph-cell-view", GlyphCellView);