From 297c2139caded745930dd97b68311c0f90f69a2e Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 23 Nov 2023 16:00:07 +0300 Subject: [PATCH 01/22] Display current character in reference fonts --- .../views/editor/panel-reference-font.js | 105 ++++++++++++++---- 1 file changed, 83 insertions(+), 22 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index c4608966a..1b7612988 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -1,7 +1,7 @@ import Panel from "./panel.js"; -import * as html from "/core/html-utils.js"; -import { div, input, label, option, select } from "/core/html-utils.js"; +import { getSelectedGlyphInfo } from "./scene-model.js"; +import { div, input, label, option, select, span } from "/core/html-utils.js"; import { ObservableController } from "/core/observable-object.js"; import { fetchJSON, fileNameExtension, withTimeout } from "/core/utils.js"; import { dialog } from "/web-components/modal-dialog.js"; @@ -244,6 +244,14 @@ export default class ReferenceFontPanel extends Panel { font-family: fontra-ui-regular; font-feature-settings: "tnum" 1; } + + .current-character { + font-size: 14px; + } + + .current-character-font-size { + width: 100%; + } `; constructor(editorController) { @@ -273,6 +281,52 @@ export default class ReferenceFontPanel extends Panel { this.editorController.canvasController.setLangAttribute(this.model.languageCode); referenceFontModel = this.model; + + this.editorController.sceneSettingsController.addKeyListener( + ["selectedGlyph", "glyphLines"], + (event) => { + this.displayCurrentGlyphInReferenceFonts(); + } + ); + } + + async displayCurrentGlyphInReferenceFonts() { + const container = this.contentElement.querySelector( + ".current-character-in-reference-fonts" + ); + while (container.firstChild) { + container.removeChild(container.firstChild); + } + const selectedGlyphInfo = getSelectedGlyphInfo( + this.editorController.sceneSettings.selectedGlyph, + this.editorController.sceneSettings.glyphLines + ); + if (!selectedGlyphInfo) { + return; + } + + const currentCharacter = div({ class: "current-character" }, []); + const rangeSlider = input({ + class: "current-character-font-size", + type: "range", + value: 14, + min: 10, + max: 40, + onchange: (event) => { + currentCharacter.style.fontSize = `${event.target.value}px`; + }, + }); + + for (const font of this.model.fontList) { + await this.ensureFontLoaded(font); + currentCharacter.appendChild( + span({ style: `font-family: ${font.fontIdentifier};` }, [ + ` ${selectedGlyphInfo.glyphName}`, + ]) + ); + } + container.appendChild(currentCharacter); + container.appendChild(rangeSlider); } _fontListChangedHandler(event) { @@ -366,18 +420,7 @@ export default class ReferenceFontPanel extends Panel { }); } - async _listSelectionChangedHandler() { - const fontItem = this.filesUIList.getSelectedItem(); - if (!fontItem) { - this.model.referenceFontName = ""; - this.model.selectedFontIndex = -1; - return; - } - - const selectedFontIndex = this.filesUIList.getSelectedItemIndex(); - this.model.selectedFontIndex = - selectedFontIndex !== undefined ? selectedFontIndex : -1; - + async ensureFontLoaded(fontItem) { if (!fontItem.fontFace) { if (!fontItem.objectURL) { fontItem.objectURL = URL.createObjectURL( @@ -392,6 +435,21 @@ export default class ReferenceFontPanel extends Panel { document.fonts.add(fontItem.fontFace); await fontItem.fontFace.load(); } + } + + async _listSelectionChangedHandler() { + const fontItem = this.filesUIList.getSelectedItem(); + if (!fontItem) { + this.model.referenceFontName = ""; + this.model.selectedFontIndex = -1; + return; + } + + const selectedFontIndex = this.filesUIList.getSelectedItemIndex(); + this.model.selectedFontIndex = + selectedFontIndex !== undefined ? selectedFontIndex : -1; + + await this.ensureFontLoaded(fontItem); this.model.referenceFontName = fontItem.fontIdentifier; if (fontItem.fontIdentifier in this.supportedLanguagesMemoized) { @@ -485,9 +543,10 @@ export default class ReferenceFontPanel extends Panel { referenceFontName: "", }); this.controller.synchronizeWithLocalStorage("fontra.reference-font."); - this.controller.addKeyListener("fontList", (event) => - this._fontListChangedHandler(event) - ); + this.controller.addKeyListener("fontList", (event) => { + this._fontListChangedHandler(event); + this.displayCurrentGlyphInReferenceFonts(); + }); garbageCollectUnusedFiles(this.model.fontList); const columnDescriptions = [ @@ -505,9 +564,10 @@ export default class ReferenceFontPanel extends Panel { this.filesUIList.onFilesDrop = (files) => this._filesDropHandler(files); - this.filesUIList.addEventListener("listSelectionChanged", () => - this._listSelectionChangedHandler() - ); + this.filesUIList.addEventListener("listSelectionChanged", () => { + // this.displayCurrentGlyphInReferenceFonts(); + this._listSelectionChangedHandler(); + }); this.filesUIList.addEventListener("deleteKey", () => this._deleteSelectedItemHandler() @@ -530,12 +590,12 @@ export default class ReferenceFontPanel extends Panel { [] ); - return html.div( + return div( { class: "sidebar-reference-font", }, [ - html.div( + div( { id: "reference-font", }, @@ -566,6 +626,7 @@ export default class ReferenceFontPanel extends Panel { this.languageCodeInput, ] ), + div({ class: "current-character-in-reference-fonts" }, []), ] ), ] From 0f137282c412e656d901aee2b3c464bd386a9638 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 23 Nov 2023 17:31:51 +0300 Subject: [PATCH 02/22] Current glyph overridden by custom character --- .../views/editor/panel-reference-font.js | 33 ++++++++++++++----- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 1b7612988..5962885d1 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -3,7 +3,12 @@ import Panel from "./panel.js"; import { getSelectedGlyphInfo } from "./scene-model.js"; import { div, input, label, option, select, span } from "/core/html-utils.js"; import { ObservableController } from "/core/observable-object.js"; -import { fetchJSON, fileNameExtension, withTimeout } from "/core/utils.js"; +import { + consolidateCalls, + fetchJSON, + fileNameExtension, + withTimeout, +} from "/core/utils.js"; import { dialog } from "/web-components/modal-dialog.js"; import { UIList } from "/web-components/ui-list.js"; @@ -272,6 +277,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.addKeyListener("charOverride", (event) => { this.editorController.canvasController.requestUpdate(); + this.requestReferenceFontsUpdate(); }); this.controller.addKeyListener("languageCode", (event) => { @@ -285,11 +291,22 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettingsController.addKeyListener( ["selectedGlyph", "glyphLines"], (event) => { - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsUpdate(); } ); } + async requestReferenceFontsUpdate() { + // this prevents two promise running at same time + if (this.requestReferenceFontsUpdatePromise) { + return await this.requestReferenceFontsUpdatePromise; + } + this.requestReferenceFontsUpdatePromise = + this.displayCurrentGlyphInReferenceFonts(); + await this.requestReferenceFontsUpdatePromise; + delete this.requestReferenceFontsUpdatePromise; + } + async displayCurrentGlyphInReferenceFonts() { const container = this.contentElement.querySelector( ".current-character-in-reference-fonts" @@ -301,7 +318,10 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettings.selectedGlyph, this.editorController.sceneSettings.glyphLines ); - if (!selectedGlyphInfo) { + + const letter = this.model.charOverride || selectedGlyphInfo?.glyphName; + + if (!letter) { return; } @@ -320,9 +340,7 @@ export default class ReferenceFontPanel extends Panel { for (const font of this.model.fontList) { await this.ensureFontLoaded(font); currentCharacter.appendChild( - span({ style: `font-family: ${font.fontIdentifier};` }, [ - ` ${selectedGlyphInfo.glyphName}`, - ]) + span({ style: `font-family: ${font.fontIdentifier};` }, [` ${letter}`]) ); } container.appendChild(currentCharacter); @@ -545,7 +563,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.synchronizeWithLocalStorage("fontra.reference-font."); this.controller.addKeyListener("fontList", (event) => { this._fontListChangedHandler(event); - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsUpdate(); }); garbageCollectUnusedFiles(this.model.fontList); @@ -565,7 +583,6 @@ export default class ReferenceFontPanel extends Panel { this.filesUIList.onFilesDrop = (files) => this._filesDropHandler(files); this.filesUIList.addEventListener("listSelectionChanged", () => { - // this.displayCurrentGlyphInReferenceFonts(); this._listSelectionChangedHandler(); }); From be0a6991fe6006bf8a4ec4e747f599509786105d Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 23 Nov 2023 18:08:06 +0300 Subject: [PATCH 03/22] Display character field instead of glyphName --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 5962885d1..7f22c55e1 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -319,7 +319,7 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettings.glyphLines ); - const letter = this.model.charOverride || selectedGlyphInfo?.glyphName; + const letter = this.model.charOverride || selectedGlyphInfo?.character; if (!letter) { return; From 27933301aeb86cde46904fbd4137c0f911a358b1 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 4 Dec 2023 16:30:17 +0300 Subject: [PATCH 04/22] Display the glyph by codepoint if the glyph name contains dot --- .../views/editor/panel-reference-font.js | 41 +++++++++++++++++-- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 7f22c55e1..4a4777aca 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -319,9 +319,44 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettings.glyphLines ); - const letter = this.model.charOverride || selectedGlyphInfo?.character; + let textToDisplay; - if (!letter) { + if (this.model.charOverride) { + textToDisplay = this.model.charOverride.charAt(0); + } else { + if (selectedGlyphInfo) { + if (selectedGlyphInfo.glyphName.includes(".")) { + const baseGlyphName = selectedGlyphInfo.glyphName.split(".")[0]; + const codePoint = (this.editorController.fontController.glyphMap[ + baseGlyphName + ] || [])[0]; + if (codePoint) { + textToDisplay = String.fromCodePoint(codePoint); + } + } else { + textToDisplay = selectedGlyphInfo.character; + } + } + } + + if (!textToDisplay) { + return; + } + + if ( + !textToDisplay && + selectedGlyphInfo && + selectedGlyphInfo.glyphName.includes(".") + ) { + const baseGlyphName = positionedGlyph.glyphName.split(".")[0]; + const codePoint = (this.editorController.fontController.glyphMap[baseGlyphName] || + [])[0]; + if (codePoint) { + textToDisplay = String.fromCodePoint(codePoint); + } + } + + if (!textToDisplay) { return; } @@ -340,7 +375,7 @@ export default class ReferenceFontPanel extends Panel { for (const font of this.model.fontList) { await this.ensureFontLoaded(font); currentCharacter.appendChild( - span({ style: `font-family: ${font.fontIdentifier};` }, [` ${letter}`]) + span({ style: `font-family: ${font.fontIdentifier};` }, [` ${textToDisplay}`]) ); } container.appendChild(currentCharacter); From cf1c545a0d78f51ab12eeba58bc3ffc7c54b235a Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 00:21:48 +0300 Subject: [PATCH 05/22] Move the slider before text --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 4a4777aca..056e11f89 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -378,8 +378,8 @@ export default class ReferenceFontPanel extends Panel { span({ style: `font-family: ${font.fontIdentifier};` }, [` ${textToDisplay}`]) ); } - container.appendChild(currentCharacter); container.appendChild(rangeSlider); + container.appendChild(currentCharacter); } _fontListChangedHandler(event) { From 55b4ee848c386474be31ddf7bf490bd022c2cb12 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 00:23:11 +0300 Subject: [PATCH 06/22] Listen to oninput event --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 056e11f89..9f69dd655 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -367,7 +367,7 @@ export default class ReferenceFontPanel extends Panel { value: 14, min: 10, max: 40, - onchange: (event) => { + oninput: (event) => { currentCharacter.style.fontSize = `${event.target.value}px`; }, }); From df0cca924eb7e111251912448fbbe872cca4791d Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 04:01:37 +0300 Subject: [PATCH 07/22] Convert range input into range slider --- .../views/editor/panel-reference-font.js | 23 +++++++++++++------ 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 9f69dd655..0c6bdfb9b 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -1,7 +1,15 @@ import Panel from "./panel.js"; import { getSelectedGlyphInfo } from "./scene-model.js"; -import { div, input, label, option, select, span } from "/core/html-utils.js"; +import { + createDomElement, + div, + input, + label, + option, + select, + span, +} from "/core/html-utils.js"; import { ObservableController } from "/core/observable-object.js"; import { consolidateCalls, @@ -10,6 +18,7 @@ import { withTimeout, } from "/core/utils.js"; import { dialog } from "/web-components/modal-dialog.js"; +import "/web-components/range-slider.js"; import { UIList } from "/web-components/ui-list.js"; import "/third-party/lib-font/inflate.js"; @@ -361,14 +370,14 @@ export default class ReferenceFontPanel extends Panel { } const currentCharacter = div({ class: "current-character" }, []); - const rangeSlider = input({ - class: "current-character-font-size", + const rangeSlider = createDomElement("range-slider", { type: "range", value: 14, - min: 10, - max: 40, - oninput: (event) => { - currentCharacter.style.fontSize = `${event.target.value}px`; + minValue: 10, + maxValue: 40, + step: 0.1, + onChangeCallback: (event) => { + currentCharacter.style.fontSize = `${event.value}px`; }, }); From c846583317cb0e0744357e3f72861d97583f30a1 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 04:02:04 +0300 Subject: [PATCH 08/22] Font size max 200 --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 0c6bdfb9b..02a353aa6 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -374,7 +374,7 @@ export default class ReferenceFontPanel extends Panel { type: "range", value: 14, minValue: 10, - maxValue: 40, + maxValue: 200, step: 0.1, onChangeCallback: (event) => { currentCharacter.style.fontSize = `${event.value}px`; From 7b78e6c459d0e88ce4bf7f0a8f3ff0e7517a8f80 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 04:03:56 +0300 Subject: [PATCH 09/22] Apply language code --- src/fontra/views/editor/panel-reference-font.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 02a353aa6..9953defbe 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -369,7 +369,10 @@ export default class ReferenceFontPanel extends Panel { return; } - const currentCharacter = div({ class: "current-character" }, []); + const currentCharacter = div( + { class: "current-character", lang: this.model.languageCode }, + [] + ); const rangeSlider = createDomElement("range-slider", { type: "range", value: 14, From 1b1128f3ee629a08a36bfab0a18ddb67c0a0b1e6 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 14 Dec 2023 04:08:34 +0300 Subject: [PATCH 10/22] Delete async function --- src/fontra/views/editor/panel-reference-font.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 9953defbe..80e414045 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -286,7 +286,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.addKeyListener("charOverride", (event) => { this.editorController.canvasController.requestUpdate(); - this.requestReferenceFontsUpdate(); + this.displayCurrentGlyphInReferenceFonts(); }); this.controller.addKeyListener("languageCode", (event) => { @@ -300,22 +300,11 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettingsController.addKeyListener( ["selectedGlyph", "glyphLines"], (event) => { - this.requestReferenceFontsUpdate(); + this.displayCurrentGlyphInReferenceFonts(); } ); } - async requestReferenceFontsUpdate() { - // this prevents two promise running at same time - if (this.requestReferenceFontsUpdatePromise) { - return await this.requestReferenceFontsUpdatePromise; - } - this.requestReferenceFontsUpdatePromise = - this.displayCurrentGlyphInReferenceFonts(); - await this.requestReferenceFontsUpdatePromise; - delete this.requestReferenceFontsUpdatePromise; - } - async displayCurrentGlyphInReferenceFonts() { const container = this.contentElement.querySelector( ".current-character-in-reference-fonts" @@ -610,7 +599,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.synchronizeWithLocalStorage("fontra.reference-font."); this.controller.addKeyListener("fontList", (event) => { this._fontListChangedHandler(event); - this.requestReferenceFontsUpdate(); + this.displayCurrentGlyphInReferenceFonts(); }); garbageCollectUnusedFiles(this.model.fontList); From 6944d5c96b07e50210f9b325f6bf63adf1b62ac5 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Fri, 15 Dec 2023 19:36:07 +0300 Subject: [PATCH 11/22] Fontsize persisted in localstorage --- src/fontra/views/editor/panel-reference-font.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 80e414045..ece588b17 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -364,12 +364,13 @@ export default class ReferenceFontPanel extends Panel { ); const rangeSlider = createDomElement("range-slider", { type: "range", - value: 14, + value: this.model.fontSize, minValue: 10, maxValue: 200, step: 0.1, onChangeCallback: (event) => { currentCharacter.style.fontSize = `${event.value}px`; + this.model.fontSize = event.value; }, }); @@ -591,6 +592,7 @@ export default class ReferenceFontPanel extends Panel { this.controller = new ObservableController({ languageCode: "", + fontSize: 14, selectedFontIndex: -1, fontList: [], charOverride: "", From 43adbabef677f3024ac048a04758d919bd8917c2 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Fri, 15 Dec 2023 19:40:04 +0300 Subject: [PATCH 12/22] Listen to language code input when rendering reference font example --- src/fontra/views/editor/panel-reference-font.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index ece588b17..5c41eedd8 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -291,6 +291,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.addKeyListener("languageCode", (event) => { this.editorController.canvasController.setLangAttribute(this.model.languageCode); + this.displayCurrentGlyphInReferenceFonts(); }); this.editorController.canvasController.setLangAttribute(this.model.languageCode); @@ -359,7 +360,11 @@ export default class ReferenceFontPanel extends Panel { } const currentCharacter = div( - { class: "current-character", lang: this.model.languageCode }, + { + class: "current-character", + style: `font-size: ${this.model.fontSize}px`, + lang: this.model.languageCode, + }, [] ); const rangeSlider = createDomElement("range-slider", { From 58be6a49302deaa450e013ab14ad001456a3a262 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 18 Dec 2023 20:56:05 +0300 Subject: [PATCH 13/22] Ensure reference fonts preview loaded once at a time --- src/fontra/views/editor/panel-reference-font.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 5c41eedd8..42846a52b 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -286,12 +286,12 @@ export default class ReferenceFontPanel extends Panel { this.controller.addKeyListener("charOverride", (event) => { this.editorController.canvasController.requestUpdate(); - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsPreview(); }); this.controller.addKeyListener("languageCode", (event) => { this.editorController.canvasController.setLangAttribute(this.model.languageCode); - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsPreview(); }); this.editorController.canvasController.setLangAttribute(this.model.languageCode); @@ -301,11 +301,20 @@ export default class ReferenceFontPanel extends Panel { this.editorController.sceneSettingsController.addKeyListener( ["selectedGlyph", "glyphLines"], (event) => { - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsPreview(); } ); } + async requestReferenceFontsPreview() { + if (this.referenceFontsPreviewPromise) { + return this.referenceFontsPreviewPromise; + } + this.referenceFontsPreviewPromise = this.displayCurrentGlyphInReferenceFonts(); + await this.referenceFontsPreviewPromise; + delete this.referenceFontsPreviewPromise; + } + async displayCurrentGlyphInReferenceFonts() { const container = this.contentElement.querySelector( ".current-character-in-reference-fonts" @@ -606,7 +615,7 @@ export default class ReferenceFontPanel extends Panel { this.controller.synchronizeWithLocalStorage("fontra.reference-font."); this.controller.addKeyListener("fontList", (event) => { this._fontListChangedHandler(event); - this.displayCurrentGlyphInReferenceFonts(); + this.requestReferenceFontsPreview(); }); garbageCollectUnusedFiles(this.model.fontList); From cb4da8cc67238990aebdbe9758cc0613929865e2 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 18 Dec 2023 21:01:30 +0300 Subject: [PATCH 14/22] Fix overlapping grid cell --- src/fontra/views/editor/panel-reference-font.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 42846a52b..d36486851 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -266,6 +266,11 @@ export default class ReferenceFontPanel extends Panel { .current-character-font-size { width: 100%; } + + .reference-font-preview { + height: 100%; + overflow: scroll; + } `; constructor(editorController) { @@ -316,9 +321,7 @@ export default class ReferenceFontPanel extends Panel { } async displayCurrentGlyphInReferenceFonts() { - const container = this.contentElement.querySelector( - ".current-character-in-reference-fonts" - ); + const container = this.contentElement.querySelector(".reference-font-preview"); while (container.firstChild) { container.removeChild(container.firstChild); } @@ -695,7 +698,7 @@ export default class ReferenceFontPanel extends Panel { this.languageCodeInput, ] ), - div({ class: "current-character-in-reference-fonts" }, []), + div({ class: "reference-font-preview" }, []), ] ), ] From e46d8f7b33f9cc04166df843ce566645393806f5 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 19 Dec 2023 19:50:20 +0300 Subject: [PATCH 15/22] Exclude range slider from scroll area --- src/fontra/views/editor/panel-reference-font.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index d36486851..09aa6d9bc 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -261,6 +261,7 @@ export default class ReferenceFontPanel extends Panel { .current-character { font-size: 14px; + overflow: auto; } .current-character-font-size { @@ -268,8 +269,8 @@ export default class ReferenceFontPanel extends Panel { } .reference-font-preview { - height: 100%; - overflow: scroll; + display: grid; + overflow: auto; } `; From 6a8d2c738c66d34875ee824a46d1327899fffdad Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Wed, 20 Dec 2023 17:56:28 +0300 Subject: [PATCH 16/22] Delete unused import --- src/fontra/views/editor/panel-reference-font.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 09aa6d9bc..876a2e8d8 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -11,12 +11,7 @@ import { span, } from "/core/html-utils.js"; import { ObservableController } from "/core/observable-object.js"; -import { - consolidateCalls, - fetchJSON, - fileNameExtension, - withTimeout, -} from "/core/utils.js"; +import { fetchJSON, fileNameExtension, withTimeout } from "/core/utils.js"; import { dialog } from "/web-components/modal-dialog.js"; import "/web-components/range-slider.js"; import { UIList } from "/web-components/ui-list.js"; From c5bc0d3413b5164ccd90a67bf4f5026f8d10f756 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Wed, 20 Dec 2023 17:58:26 +0300 Subject: [PATCH 17/22] Make max fontsize 300, Add default value --- src/fontra/views/editor/panel-reference-font.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 876a2e8d8..6375d0074 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -379,7 +379,8 @@ export default class ReferenceFontPanel extends Panel { type: "range", value: this.model.fontSize, minValue: 10, - maxValue: 200, + defaultValue: 100, + maxValue: 300, step: 0.1, onChangeCallback: (event) => { currentCharacter.style.fontSize = `${event.value}px`; From c5184687c930422679dc9bd42c81fb7668a15c95 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Wed, 20 Dec 2023 22:58:02 +0300 Subject: [PATCH 18/22] Make font-size constant --- src/fontra/views/editor/panel-reference-font.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 6375d0074..17be7ffd6 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -28,6 +28,7 @@ import { registerVisualizationLayerDefinition } from "./visualization-layer-defi let referenceFontModel; const fontFileExtensions = new Set(["ttf", "otf", "woff", "woff2"]); +const DEFAULT_FONT_SIZE = 100; registerVisualizationLayerDefinition({ identifier: "fontra.reference.font", @@ -255,7 +256,6 @@ export default class ReferenceFontPanel extends Panel { } .current-character { - font-size: 14px; overflow: auto; } @@ -379,7 +379,7 @@ export default class ReferenceFontPanel extends Panel { type: "range", value: this.model.fontSize, minValue: 10, - defaultValue: 100, + defaultValue: DEFAULT_FONT_SIZE, maxValue: 300, step: 0.1, onChangeCallback: (event) => { @@ -606,7 +606,7 @@ export default class ReferenceFontPanel extends Panel { this.controller = new ObservableController({ languageCode: "", - fontSize: 14, + fontSize: DEFAULT_FONT_SIZE, selectedFontIndex: -1, fontList: [], charOverride: "", From 477890a434065f2bdb83fe279378f48cb4c1fd02 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 21 Dec 2023 22:41:12 +0300 Subject: [PATCH 19/22] Delete duplicated code block --- src/fontra/views/editor/panel-reference-font.js | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index 17be7ffd6..e2e7e4d23 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -350,23 +350,6 @@ export default class ReferenceFontPanel extends Panel { return; } - if ( - !textToDisplay && - selectedGlyphInfo && - selectedGlyphInfo.glyphName.includes(".") - ) { - const baseGlyphName = positionedGlyph.glyphName.split(".")[0]; - const codePoint = (this.editorController.fontController.glyphMap[baseGlyphName] || - [])[0]; - if (codePoint) { - textToDisplay = String.fromCodePoint(codePoint); - } - } - - if (!textToDisplay) { - return; - } - const currentCharacter = div( { class: "current-character", From c027b7790d29b496aefe7701ff533925afb5683e Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 21 Dec 2023 22:42:57 +0300 Subject: [PATCH 20/22] Delete the element children by setting innerHTML empty string --- src/fontra/views/editor/panel-reference-font.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index e2e7e4d23..a7ae4e06f 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -318,9 +318,8 @@ export default class ReferenceFontPanel extends Panel { async displayCurrentGlyphInReferenceFonts() { const container = this.contentElement.querySelector(".reference-font-preview"); - while (container.firstChild) { - container.removeChild(container.firstChild); - } + container.innerHTML = ""; + const selectedGlyphInfo = getSelectedGlyphInfo( this.editorController.sceneSettings.selectedGlyph, this.editorController.sceneSettings.glyphLines From c7eabc810d156937f663725ff3ab1ff86fa2d4a9 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 21 Dec 2023 22:45:09 +0300 Subject: [PATCH 21/22] Listen to selectedGlyphName key --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index a7ae4e06f..bea2ccbd9 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -300,7 +300,7 @@ export default class ReferenceFontPanel extends Panel { referenceFontModel = this.model; this.editorController.sceneSettingsController.addKeyListener( - ["selectedGlyph", "glyphLines"], + ["selectedGlyphName"], (event) => { this.requestReferenceFontsPreview(); } From 8335acb4b2e8e845fe466a118e4091a5eee515e3 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Thu, 21 Dec 2023 22:46:42 +0300 Subject: [PATCH 22/22] Use a string key name for listening to a single event name --- src/fontra/views/editor/panel-reference-font.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/panel-reference-font.js b/src/fontra/views/editor/panel-reference-font.js index bea2ccbd9..5bc3beddb 100644 --- a/src/fontra/views/editor/panel-reference-font.js +++ b/src/fontra/views/editor/panel-reference-font.js @@ -300,7 +300,7 @@ export default class ReferenceFontPanel extends Panel { referenceFontModel = this.model; this.editorController.sceneSettingsController.addKeyListener( - ["selectedGlyphName"], + "selectedGlyphName", (event) => { this.requestReferenceFontsPreview(); }