From a06debf8a03598249ec0cea31e48e478740b1855 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Sun, 27 Aug 2023 19:37:40 +0300 Subject: [PATCH 01/11] Move glyphs search methods to panel-glyph-search --- src/fontra/views/editor/editor.js | 45 +------------------ src/fontra/views/editor/panel-glyph-search.js | 45 +++++++++++++++++++ 2 files changed, 46 insertions(+), 44 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 044dbc8ef..20d0e7d82 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -229,7 +229,7 @@ export class EditorController { rootSubscriptionPattern[rootKey] = null; } await this.fontController.subscribeChanges(rootSubscriptionPattern, false); - await this.initGlyphsSearch(); + this.getSidebarPanel("glyph-search").setup(); this.initTools(); await this.initSidebarDesignspace(); @@ -242,17 +242,6 @@ export class EditorController { setTimeout(() => this.setupFromWindowLocation(), 20); } - async initGlyphsSearch() { - this.glyphsSearch = - this.getSidebarPanel("glyph-search").contentElement.querySelector( - "#glyphs-search" - ); - this.glyphsSearch.glyphMap = this.fontController.glyphMap; - this.glyphsSearch.addEventListener("selectedGlyphNameChanged", (event) => - this.glyphNameChangedCallback(event.detail) - ); - } - async initUserSettings() { const userSettings = this.getSidebarPanel("user-settings").contentElement.querySelector( @@ -562,38 +551,6 @@ export class EditorController { this.cleanGlyphsLayers.scaleFactor = 1 / magnification; } - glyphNameChangedCallback(glyphName) { - if (!glyphName) { - return; - } - const codePoint = this.fontController.codePointForGlyph(glyphName); - const glyphInfo = { glyphName: glyphName }; - if (codePoint !== undefined) { - glyphInfo["character"] = getCharFromUnicode(codePoint); - } - let selectedGlyphState = this.sceneSettings.selectedGlyph; - const glyphLines = [...this.sceneSettings.glyphLines]; - if (selectedGlyphState) { - glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = - glyphInfo; - this.sceneSettings.glyphLines = glyphLines; - } else { - if (!glyphLines.length) { - glyphLines.push([]); - } - const lineIndex = glyphLines.length - 1; - glyphLines[lineIndex].push(glyphInfo); - this.sceneSettings.glyphLines = glyphLines; - selectedGlyphState = { - lineIndex: lineIndex, - glyphIndex: glyphLines[lineIndex].length - 1, - isEditing: false, - }; - } - - this.sceneSettings.selectedGlyph = selectedGlyphState; - } - async doubleClickedComponentsCallback(event) { const glyphController = await this.sceneModel.getSelectedStaticGlyphController(); const instance = glyphController.instance; diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js index 5996f9e7a..a54b23823 100644 --- a/src/fontra/views/editor/panel-glyph-search.js +++ b/src/fontra/views/editor/panel-glyph-search.js @@ -2,6 +2,8 @@ import * as html from "/core/unlit.js"; import { css } from "../third-party/lit.js"; import Panel from "./panel.js"; +import { getCharFromUnicode } from "../core/utils.js"; + export default class GlyphSearchPanel extends Panel { identifier = "glyph-search"; iconPath = "/images/magnifyingglass.svg"; @@ -17,6 +19,49 @@ export default class GlyphSearchPanel extends Panel { } `; + setup() { + this.editorController.glyphsSearch = + this.contentElement.querySelector("#glyphs-search"); + this.editorController.glyphsSearch.glyphMap = + this.editorController.fontController.glyphMap; + this.editorController.glyphsSearch.addEventListener( + "selectedGlyphNameChanged", + (event) => { + if (!event.detail) { + return; + } + const codePoint = this.editorController.fontController.codePointForGlyph( + event.detail + ); + const glyphInfo = { glyphName: event.detail }; + if (codePoint !== undefined) { + glyphInfo["character"] = getCharFromUnicode(codePoint); + } + let selectedGlyphState = this.editorController.sceneSettings.selectedGlyph; + const glyphLines = [...this.editorController.sceneSettings.glyphLines]; + if (selectedGlyphState) { + glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = + glyphInfo; + this.editorController.sceneSettings.glyphLines = glyphLines; + } else { + if (!glyphLines.length) { + glyphLines.push([]); + } + const lineIndex = glyphLines.length - 1; + glyphLines[lineIndex].push(glyphInfo); + this.editorController.sceneSettings.glyphLines = glyphLines; + selectedGlyphState = { + lineIndex: lineIndex, + glyphIndex: glyphLines[lineIndex].length - 1, + isEditing: false, + }; + } + + this.editorController.sceneSettings.selectedGlyph = selectedGlyphState; + } + ); + } + getContentElement() { return html.div( { From 9fefd6be9ec8fbc56b0353364d7a0d5464c8fa6f Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Sun, 27 Aug 2023 20:00:21 +0300 Subject: [PATCH 02/11] Move init user settings to user-settings-panel --- src/fontra/views/editor/editor.js | 96 +------------------ .../views/editor/panel-user-settings.js | 85 ++++++++++++++++ 2 files changed, 86 insertions(+), 95 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 20d0e7d82..2dd49cc5e 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -242,100 +242,6 @@ export class EditorController { setTimeout(() => this.setupFromWindowLocation(), 20); } - async initUserSettings() { - const userSettings = - this.getSidebarPanel("user-settings").contentElement.querySelector( - "#user-settings" - ); - const items = []; - - // Visualization layer settings - const layers = this.visualizationLayers.definitions.filter( - (layer) => layer.userSwitchable - ); - const layerItems = layers.map((layer) => { - return { key: layer.identifier, displayName: layer.name, ui: "checkbox" }; - }); - items.push({ - displayName: "Glyph editor appearance", - controller: this.visualizationLayersSettings, - descriptions: layerItems, - }); - - // Clipboard settings - items.push({ - displayName: "Clipboard export format", - controller: this.clipboardFormatController, - descriptions: [ - { - key: "format", - ui: "radio", - options: [ - { key: "glif", displayName: "GLIF (RoboFont)" }, - { key: "svg", displayName: "SVG" }, - { key: "fontra-json", displayName: "JSON (Fontra)" }, - ], - }, - ], - }); - - // Experimental feature settings - items.push({ - displayName: "Experimental features", - controller: this.experimentalFeaturesController, - descriptions: [ - { - key: "scalingEditBehavior", - displayName: "Scaling edit tool behavior", - ui: "checkbox", - }, - { - key: "quadPenTool", - displayName: "Pen tool draws quadratics", - ui: "checkbox", - }, - ], - }); - - // Theme settings - items.push({ - displayName: "Theme settings", - controller: themeController, - descriptions: [ - { - key: "theme", - ui: "radio", - options: [ - { key: "automatic", displayName: "Automatic (use OS setting)" }, - { key: "light", displayName: "Light" }, - { key: "dark", displayName: "Dark" }, - ], - }, - ], - }); - - // Server info - const serverInfo = await fetchJSON("/serverinfo"); - items.push({ - displayName: "Server info", - controller: null, - descriptions: Object.entries(serverInfo).flatMap((entry) => { - return [ - { - displayName: entry[0] + ":", - ui: "header", - }, - { - displayName: entry[1], - ui: "plain", - }, - ]; - }), - }); - - userSettings.items = items; - } - async showDialogGlyphEditLocationNotAtSource() { const glyphName = this.sceneSettings.selectedGlyphName; const result = await dialog( @@ -1477,7 +1383,7 @@ export class EditorController { async toggleUserSettings(onOff) { if (onOff && !this._didInitUserSettings) { this._didInitUserSettings = true; - await loaderSpinner(this.initUserSettings()); + await loaderSpinner(this.getSidebarPanel("user-settings")); } } diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js index ae04926ff..9edd405d3 100644 --- a/src/fontra/views/editor/panel-user-settings.js +++ b/src/fontra/views/editor/panel-user-settings.js @@ -26,6 +26,91 @@ export default class UserSettingsPanel extends Panel { }), ]); } + + async setup() { + const userSettings = this.contentElement.querySelector("#user-settings"); + const items = []; + const layers = this.editorController.visualizationLayers.definitions.filter( + (layer) => layer.userSwitchable + ); + const layerItems = layers.map((layer) => { + return { key: layer.identifier, displayName: layer.name, ui: "checkbox" }; + }); + items.push({ + displayName: "Glyph editor appearance", + controller: this.visualizationLayersSettings, + descriptions: layerItems, + }); + + items.push({ + displayName: "Clipboard export format", + controller: this.clipboardFormatController, + descriptions: [ + { + key: "format", + ui: "radio", + options: [ + { key: "glif", displayName: "GLIF (RoboFont)" }, + { key: "svg", displayName: "SVG" }, + { key: "fontra-json", displayName: "JSON (Fontra)" }, + ], + }, + ], + }); + + items.push({ + displayName: "Experimental features", + controller: this.experimentalFeaturesController, + descriptions: [ + { + key: "scalingEditBehavior", + displayName: "Scaling edit tool behavior", + ui: "checkbox", + }, + { + key: "quadPenTool", + displayName: "Pen tool draws quadratics", + ui: "checkbox", + }, + ], + }); + + items.push({ + displayName: "Theme settings", + controller: themeController, + descriptions: [ + { + key: "theme", + ui: "radio", + options: [ + { key: "automatic", displayName: "Automatic (use OS setting)" }, + { key: "light", displayName: "Light" }, + { key: "dark", displayName: "Dark" }, + ], + }, + ], + }); + + const serverInfo = await fetchJSON("/serverinfo"); + items.push({ + displayName: "Server info", + controller: null, + descriptions: Object.entries(serverInfo).flatMap((entry) => { + return [ + { + displayName: entry[0] + ":", + ui: "header", + }, + { + displayName: entry[1], + ui: "plain", + }, + ]; + }), + }); + + userSettings.items = items; + } } customElements.define("panel-user-settings", UserSettingsPanel); From dba1bc64901128cd1344a24b9aaf2127e90bc19d Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 18:15:30 +0300 Subject: [PATCH 03/11] Fix user settings setup --- src/fontra/views/editor/editor.js | 3 +- src/fontra/views/editor/panel-glyph-search.js | 68 ++++++++++--------- .../views/editor/panel-user-settings.js | 8 ++- 3 files changed, 41 insertions(+), 38 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 2dd49cc5e..36a6c095f 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -23,7 +23,6 @@ import { VarPackedPath, joinPaths } from "../core/var-path.js"; import { commandKeyProperty, enumerate, - fetchJSON, getCharFromUnicode, hyphenatedToCamelCase, isActiveElementTypeable, @@ -1383,7 +1382,7 @@ export class EditorController { async toggleUserSettings(onOff) { if (onOff && !this._didInitUserSettings) { this._didInitUserSettings = true; - await loaderSpinner(this.getSidebarPanel("user-settings")); + await loaderSpinner(this.getSidebarPanel("user-settings").setup()); } } diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js index a54b23823..e4d3ac165 100644 --- a/src/fontra/views/editor/panel-glyph-search.js +++ b/src/fontra/views/editor/panel-glyph-search.js @@ -19,6 +19,40 @@ export default class GlyphSearchPanel extends Panel { } `; + onSelectedGlyphNameChanged(event) { + if (!event.detail) { + return; + } + const codePoint = this.editorController.fontController.codePointForGlyph( + event.detail + ); + const glyphInfo = { glyphName: event.detail }; + if (codePoint !== undefined) { + glyphInfo["character"] = getCharFromUnicode(codePoint); + } + let selectedGlyphState = this.editorController.sceneSettings.selectedGlyph; + const glyphLines = [...this.editorController.sceneSettings.glyphLines]; + if (selectedGlyphState) { + glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = + glyphInfo; + this.editorController.sceneSettings.glyphLines = glyphLines; + } else { + if (!glyphLines.length) { + glyphLines.push([]); + } + const lineIndex = glyphLines.length - 1; + glyphLines[lineIndex].push(glyphInfo); + this.editorController.sceneSettings.glyphLines = glyphLines; + selectedGlyphState = { + lineIndex: lineIndex, + glyphIndex: glyphLines[lineIndex].length - 1, + isEditing: false, + }; + } + + this.editorController.sceneSettings.selectedGlyph = selectedGlyphState; + } + setup() { this.editorController.glyphsSearch = this.contentElement.querySelector("#glyphs-search"); @@ -26,39 +60,7 @@ export default class GlyphSearchPanel extends Panel { this.editorController.fontController.glyphMap; this.editorController.glyphsSearch.addEventListener( "selectedGlyphNameChanged", - (event) => { - if (!event.detail) { - return; - } - const codePoint = this.editorController.fontController.codePointForGlyph( - event.detail - ); - const glyphInfo = { glyphName: event.detail }; - if (codePoint !== undefined) { - glyphInfo["character"] = getCharFromUnicode(codePoint); - } - let selectedGlyphState = this.editorController.sceneSettings.selectedGlyph; - const glyphLines = [...this.editorController.sceneSettings.glyphLines]; - if (selectedGlyphState) { - glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = - glyphInfo; - this.editorController.sceneSettings.glyphLines = glyphLines; - } else { - if (!glyphLines.length) { - glyphLines.push([]); - } - const lineIndex = glyphLines.length - 1; - glyphLines[lineIndex].push(glyphInfo); - this.editorController.sceneSettings.glyphLines = glyphLines; - selectedGlyphState = { - lineIndex: lineIndex, - glyphIndex: glyphLines[lineIndex].length - 1, - isEditing: false, - }; - } - - this.editorController.sceneSettings.selectedGlyph = selectedGlyphState; - } + this.onSelectedGlyphNameChanged.bind(this) ); } diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js index 9edd405d3..e2be132f1 100644 --- a/src/fontra/views/editor/panel-user-settings.js +++ b/src/fontra/views/editor/panel-user-settings.js @@ -1,4 +1,6 @@ import * as html from "/core/unlit.js"; +import { themeController } from "/core/theme-settings.js"; +import { fetchJSON } from "/core/utils.js"; import { css } from "../third-party/lit.js"; import Panel from "./panel.js"; @@ -38,13 +40,13 @@ export default class UserSettingsPanel extends Panel { }); items.push({ displayName: "Glyph editor appearance", - controller: this.visualizationLayersSettings, + controller: this.editorController.visualizationLayersSettings, descriptions: layerItems, }); items.push({ displayName: "Clipboard export format", - controller: this.clipboardFormatController, + controller: this.editorController.clipboardFormatController, descriptions: [ { key: "format", @@ -60,7 +62,7 @@ export default class UserSettingsPanel extends Panel { items.push({ displayName: "Experimental features", - controller: this.experimentalFeaturesController, + controller: this.editorController.experimentalFeaturesController, descriptions: [ { key: "scalingEditBehavior", From a503a2394085c50a2eb58967425d2ba886ef1448 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 18:28:19 +0300 Subject: [PATCH 04/11] Move initGlyphsSearch back --- src/fontra/views/editor/editor.js | 46 +++++++++++++++++- src/fontra/views/editor/panel-glyph-search.js | 47 ------------------- 2 files changed, 45 insertions(+), 48 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 36a6c095f..3b6287850 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -228,7 +228,7 @@ export class EditorController { rootSubscriptionPattern[rootKey] = null; } await this.fontController.subscribeChanges(rootSubscriptionPattern, false); - this.getSidebarPanel("glyph-search").setup(); + this.initGlyphsSearch(); this.initTools(); await this.initSidebarDesignspace(); @@ -272,6 +272,50 @@ export class EditorController { } } + initGlyphsSearch() { + this.glyphsSearch = + this.getSidebarPanel("glyph-search").contentElement.querySelector( + "#glyphs-search" + ); + this.glyphsSearch.glyphMap = this.fontController.glyphMap; + this.glyphsSearch.addEventListener( + "selectedGlyphNameChanged", + this.onSelectedGlyphNameChanged.bind(this) + ); + } + + onSelectedGlyphNameChanged(event) { + if (!event.detail) { + return; + } + const codePoint = this.fontController.codePointForGlyph(event.detail); + const glyphInfo = { glyphName: event.detail }; + if (codePoint !== undefined) { + glyphInfo["character"] = getCharFromUnicode(codePoint); + } + let selectedGlyphState = this.sceneSettings.selectedGlyph; + const glyphLines = [...this.sceneSettings.glyphLines]; + if (selectedGlyphState) { + glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = + glyphInfo; + this.sceneSettings.glyphLines = glyphLines; + } else { + if (!glyphLines.length) { + glyphLines.push([]); + } + const lineIndex = glyphLines.length - 1; + glyphLines[lineIndex].push(glyphInfo); + this.sceneSettings.glyphLines = glyphLines; + selectedGlyphState = { + lineIndex: lineIndex, + glyphIndex: glyphLines[lineIndex].length - 1, + isEditing: false, + }; + } + + this.sceneSettings.selectedGlyph = selectedGlyphState; + } + initTools() { this.tools = {}; const editToolClasses = [PointerTool, PenTool, PowerRulerTool, HandTool]; diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js index e4d3ac165..5996f9e7a 100644 --- a/src/fontra/views/editor/panel-glyph-search.js +++ b/src/fontra/views/editor/panel-glyph-search.js @@ -2,8 +2,6 @@ import * as html from "/core/unlit.js"; import { css } from "../third-party/lit.js"; import Panel from "./panel.js"; -import { getCharFromUnicode } from "../core/utils.js"; - export default class GlyphSearchPanel extends Panel { identifier = "glyph-search"; iconPath = "/images/magnifyingglass.svg"; @@ -19,51 +17,6 @@ export default class GlyphSearchPanel extends Panel { } `; - onSelectedGlyphNameChanged(event) { - if (!event.detail) { - return; - } - const codePoint = this.editorController.fontController.codePointForGlyph( - event.detail - ); - const glyphInfo = { glyphName: event.detail }; - if (codePoint !== undefined) { - glyphInfo["character"] = getCharFromUnicode(codePoint); - } - let selectedGlyphState = this.editorController.sceneSettings.selectedGlyph; - const glyphLines = [...this.editorController.sceneSettings.glyphLines]; - if (selectedGlyphState) { - glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = - glyphInfo; - this.editorController.sceneSettings.glyphLines = glyphLines; - } else { - if (!glyphLines.length) { - glyphLines.push([]); - } - const lineIndex = glyphLines.length - 1; - glyphLines[lineIndex].push(glyphInfo); - this.editorController.sceneSettings.glyphLines = glyphLines; - selectedGlyphState = { - lineIndex: lineIndex, - glyphIndex: glyphLines[lineIndex].length - 1, - isEditing: false, - }; - } - - this.editorController.sceneSettings.selectedGlyph = selectedGlyphState; - } - - setup() { - this.editorController.glyphsSearch = - this.contentElement.querySelector("#glyphs-search"); - this.editorController.glyphsSearch.glyphMap = - this.editorController.fontController.glyphMap; - this.editorController.glyphsSearch.addEventListener( - "selectedGlyphNameChanged", - this.onSelectedGlyphNameChanged.bind(this) - ); - } - getContentElement() { return html.div( { From 92dca772feb03e2fcf9b11cedee3c412ae796baf Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 19:08:47 +0300 Subject: [PATCH 05/11] Move toggle-* methods from editor.js --- src/fontra/views/editor/editor.js | 30 ++----------------- src/fontra/views/editor/panel-glyph-search.js | 6 ++++ .../views/editor/panel-selection-info.js | 7 +++++ src/fontra/views/editor/panel-text-entry.js | 4 +++ .../views/editor/panel-user-settings.js | 8 +++++ src/fontra/views/editor/panel.js | 2 ++ 6 files changed, 29 insertions(+), 28 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 3b6287850..e2e3844df 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -2,7 +2,6 @@ import { CanvasController } from "../core/canvas-controller.js"; import { applyChange, matchChangePath } from "../core/changes.js"; import { recordChanges } from "../core/change-recorder.js"; import { FontController } from "../core/font-controller.js"; -import { loaderSpinner } from "../core/loader-spinner.js"; import { ObservableController } from "../core/observable-object.js"; import { centeredRect, @@ -18,6 +17,7 @@ import { getRemoteProxy } from "../core/remote.js"; import * as html from "/core/unlit.js"; import { SceneView } from "../core/scene-view.js"; import { StaticGlyph } from "../core/var-glyph.js"; +import { loaderSpinner } from "../core/loader-spinner.js"; import { addItemwise, subItemwise, mulScalar } from "../core/var-funcs.js"; import { VarPackedPath, joinPaths } from "../core/var-path.js"; import { @@ -440,8 +440,7 @@ export class EditorController { `fontra-selected-sidebar-${sidebar.identifier}`, onOff ? panelName : "" ); - const methodName = hyphenatedToCamelCase("toggle-" + panelName); - setTimeout(() => this[methodName]?.call(this, onOff, doFocus), 10); + this.getSidebarPanel(panelName).toggle(onOff, doFocus); return onOff; } @@ -1405,31 +1404,6 @@ export class EditorController { } } - toggleGlyphSearch(onOff, doFocus) { - if (onOff && doFocus) { - this.glyphsSearch.focusSearchField(); - } - } - - toggleTextEntry(onOff, doFocus) { - if (onOff && doFocus) { - this.getSidebarPanel("text-entry").focusTextEntry(); - } - } - - toggleSelectionInfo(onOff) { - if (onOff) { - this.getSidebarPanel("selection-info").update(); - } - } - - async toggleUserSettings(onOff) { - if (onOff && !this._didInitUserSettings) { - this._didInitUserSettings = true; - await loaderSpinner(this.getSidebarPanel("user-settings").setup()); - } - } - async editListenerCallback(editMethodName, senderID, ...args) { if (editMethodName === "editFinal") { this.sceneController.updateHoverState(); diff --git a/src/fontra/views/editor/panel-glyph-search.js b/src/fontra/views/editor/panel-glyph-search.js index 5996f9e7a..901538122 100644 --- a/src/fontra/views/editor/panel-glyph-search.js +++ b/src/fontra/views/editor/panel-glyph-search.js @@ -29,6 +29,12 @@ export default class GlyphSearchPanel extends Panel { ] ); } + + async toggle(on, focus) { + if (on && focus) { + this.editorController.glyphsSearch.focusSearchField(); + } + } } customElements.define("panel-glyph-search", GlyphSearchPanel); diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js index 0941d4330..3a83afc6b 100644 --- a/src/fontra/views/editor/panel-selection-info.js +++ b/src/fontra/views/editor/panel-selection-info.js @@ -2,6 +2,7 @@ import * as html from "/core/unlit.js"; import { recordChanges } from "/core/change-recorder.js"; import { rectFromPoints, rectSize, unionRect } from "/core/rectangle.js"; import { Form } from "/web-components/ui-form.js"; +import { loaderSpinner } from "/core/loader-spinner.js"; import Panel from "./panel.js"; import { css } from "../third-party/lit.js"; import { @@ -36,6 +37,12 @@ export default class SelectionInfoPanel extends Panel { ); } + async toggle(on, focus) { + if (on) { + this.update(); + } + } + attach() { this.infoForm = new Form(); this.contentElement.appendChild(this.infoForm); diff --git a/src/fontra/views/editor/panel-text-entry.js b/src/fontra/views/editor/panel-text-entry.js index 88796a611..be967e5b7 100644 --- a/src/fontra/views/editor/panel-text-entry.js +++ b/src/fontra/views/editor/panel-text-entry.js @@ -197,6 +197,10 @@ export default class TextEntryPanel extends Panel { this.setupTextAlignElement(); this.setupIntersectionObserver(); } + + async toggle(on, focus) { + this.focusTextEntry(); + } } customElements.define("panel-text-entry", TextEntryPanel); diff --git a/src/fontra/views/editor/panel-user-settings.js b/src/fontra/views/editor/panel-user-settings.js index e2be132f1..d4eed9dee 100644 --- a/src/fontra/views/editor/panel-user-settings.js +++ b/src/fontra/views/editor/panel-user-settings.js @@ -2,6 +2,7 @@ import * as html from "/core/unlit.js"; import { themeController } from "/core/theme-settings.js"; import { fetchJSON } from "/core/utils.js"; import { css } from "../third-party/lit.js"; +import { loaderSpinner } from "../core/loader-spinner.js"; import Panel from "./panel.js"; export default class UserSettingsPanel extends Panel { @@ -29,6 +30,13 @@ export default class UserSettingsPanel extends Panel { ]); } + async toggle(on) { + if (on && !this.editorController._didInitUserSettings) { + this.editorController._didInitUserSettings = true; + await loaderSpinner(this.setup()); + } + } + async setup() { const userSettings = this.contentElement.querySelector("#user-settings"); const items = []; diff --git a/src/fontra/views/editor/panel.js b/src/fontra/views/editor/panel.js index 71b748445..2db4251f7 100644 --- a/src/fontra/views/editor/panel.js +++ b/src/fontra/views/editor/panel.js @@ -11,6 +11,8 @@ export default class Panel extends SimpleElement { getContentElement() {} attach() {} + + async toggle(on, focus) {} } customElements.define("fontra-panel", Panel); From 177cb9037bb754b63a8d49a7c78f989cbb0c3b2a Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 20:36:04 +0300 Subject: [PATCH 06/11] Move initGlyphsSearch to where it was --- src/fontra/views/editor/editor.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index e2e3844df..afc8b7e6a 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -241,6 +241,18 @@ export class EditorController { setTimeout(() => this.setupFromWindowLocation(), 20); } + initGlyphsSearch() { + this.glyphsSearch = + this.getSidebarPanel("glyph-search").contentElement.querySelector( + "#glyphs-search" + ); + this.glyphsSearch.glyphMap = this.fontController.glyphMap; + this.glyphsSearch.addEventListener( + "selectedGlyphNameChanged", + this.onSelectedGlyphNameChanged.bind(this) + ); + } + async showDialogGlyphEditLocationNotAtSource() { const glyphName = this.sceneSettings.selectedGlyphName; const result = await dialog( @@ -272,18 +284,6 @@ export class EditorController { } } - initGlyphsSearch() { - this.glyphsSearch = - this.getSidebarPanel("glyph-search").contentElement.querySelector( - "#glyphs-search" - ); - this.glyphsSearch.glyphMap = this.fontController.glyphMap; - this.glyphsSearch.addEventListener( - "selectedGlyphNameChanged", - this.onSelectedGlyphNameChanged.bind(this) - ); - } - onSelectedGlyphNameChanged(event) { if (!event.detail) { return; From d112e0c42b17aa98285a686dbb570ccdb016247c Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 20:39:42 +0300 Subject: [PATCH 07/11] Bring glyphNameChangedCallback back --- src/fontra/views/editor/editor.js | 66 +++++++++++++++---------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index afc8b7e6a..1a594f8ee 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -249,7 +249,7 @@ export class EditorController { this.glyphsSearch.glyphMap = this.fontController.glyphMap; this.glyphsSearch.addEventListener( "selectedGlyphNameChanged", - this.onSelectedGlyphNameChanged.bind(this) + this.glyphNameChangedCallback.bind(this) ); } @@ -284,38 +284,6 @@ export class EditorController { } } - onSelectedGlyphNameChanged(event) { - if (!event.detail) { - return; - } - const codePoint = this.fontController.codePointForGlyph(event.detail); - const glyphInfo = { glyphName: event.detail }; - if (codePoint !== undefined) { - glyphInfo["character"] = getCharFromUnicode(codePoint); - } - let selectedGlyphState = this.sceneSettings.selectedGlyph; - const glyphLines = [...this.sceneSettings.glyphLines]; - if (selectedGlyphState) { - glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = - glyphInfo; - this.sceneSettings.glyphLines = glyphLines; - } else { - if (!glyphLines.length) { - glyphLines.push([]); - } - const lineIndex = glyphLines.length - 1; - glyphLines[lineIndex].push(glyphInfo); - this.sceneSettings.glyphLines = glyphLines; - selectedGlyphState = { - lineIndex: lineIndex, - glyphIndex: glyphLines[lineIndex].length - 1, - isEditing: false, - }; - } - - this.sceneSettings.selectedGlyph = selectedGlyphState; - } - initTools() { this.tools = {}; const editToolClasses = [PointerTool, PenTool, PowerRulerTool, HandTool]; @@ -499,6 +467,38 @@ export class EditorController { this.cleanGlyphsLayers.scaleFactor = 1 / magnification; } + glyphNameChangedCallback(event) { + if (!event.detail) { + return; + } + const codePoint = this.fontController.codePointForGlyph(event.detail); + const glyphInfo = { glyphName: event.detail }; + if (codePoint !== undefined) { + glyphInfo["character"] = getCharFromUnicode(codePoint); + } + let selectedGlyphState = this.sceneSettings.selectedGlyph; + const glyphLines = [...this.sceneSettings.glyphLines]; + if (selectedGlyphState) { + glyphLines[selectedGlyphState.lineIndex][selectedGlyphState.glyphIndex] = + glyphInfo; + this.sceneSettings.glyphLines = glyphLines; + } else { + if (!glyphLines.length) { + glyphLines.push([]); + } + const lineIndex = glyphLines.length - 1; + glyphLines[lineIndex].push(glyphInfo); + this.sceneSettings.glyphLines = glyphLines; + selectedGlyphState = { + lineIndex: lineIndex, + glyphIndex: glyphLines[lineIndex].length - 1, + isEditing: false, + }; + } + + this.sceneSettings.selectedGlyph = selectedGlyphState; + } + async doubleClickedComponentsCallback(event) { const glyphController = await this.sceneModel.getSelectedStaticGlyphController(); const instance = glyphController.instance; From 88f97d95590185d1f63f69d5092c63a376dfba80 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 20:41:54 +0300 Subject: [PATCH 08/11] Delete not used import --- src/fontra/views/editor/panel-selection-info.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/fontra/views/editor/panel-selection-info.js b/src/fontra/views/editor/panel-selection-info.js index 3a83afc6b..599782dab 100644 --- a/src/fontra/views/editor/panel-selection-info.js +++ b/src/fontra/views/editor/panel-selection-info.js @@ -2,7 +2,6 @@ import * as html from "/core/unlit.js"; import { recordChanges } from "/core/change-recorder.js"; import { rectFromPoints, rectSize, unionRect } from "/core/rectangle.js"; import { Form } from "/web-components/ui-form.js"; -import { loaderSpinner } from "/core/loader-spinner.js"; import Panel from "./panel.js"; import { css } from "../third-party/lit.js"; import { From 3f02653392fcd1f0d759cd7ced15b807a5c1d4e4 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 28 Aug 2023 20:47:27 +0300 Subject: [PATCH 09/11] Revert the import order --- src/fontra/views/editor/editor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 1a594f8ee..7b38703c7 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -2,6 +2,7 @@ import { CanvasController } from "../core/canvas-controller.js"; import { applyChange, matchChangePath } from "../core/changes.js"; import { recordChanges } from "../core/change-recorder.js"; import { FontController } from "../core/font-controller.js"; +import { loaderSpinner } from "../core/loader-spinner.js"; import { ObservableController } from "../core/observable-object.js"; import { centeredRect, @@ -17,7 +18,6 @@ import { getRemoteProxy } from "../core/remote.js"; import * as html from "/core/unlit.js"; import { SceneView } from "../core/scene-view.js"; import { StaticGlyph } from "../core/var-glyph.js"; -import { loaderSpinner } from "../core/loader-spinner.js"; import { addItemwise, subItemwise, mulScalar } from "../core/var-funcs.js"; import { VarPackedPath, joinPaths } from "../core/var-path.js"; import { From e1f969f723dea669bd1eee9226f37fa32c5e31e5 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 29 Aug 2023 22:32:30 +0300 Subject: [PATCH 10/11] Undo glyphNameChangedCallback --- src/fontra/views/editor/editor.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 7b38703c7..d3043ec55 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -247,9 +247,8 @@ export class EditorController { "#glyphs-search" ); this.glyphsSearch.glyphMap = this.fontController.glyphMap; - this.glyphsSearch.addEventListener( - "selectedGlyphNameChanged", - this.glyphNameChangedCallback.bind(this) + this.glyphsSearch.addEventListener("selectedGlyphNameChanged", (event) => + this.glyphNameChangedCallback(event.detail) ); } @@ -467,12 +466,12 @@ export class EditorController { this.cleanGlyphsLayers.scaleFactor = 1 / magnification; } - glyphNameChangedCallback(event) { - if (!event.detail) { + glyphNameChangedCallback(glyphName) { + if (!glyphName) { return; } - const codePoint = this.fontController.codePointForGlyph(event.detail); - const glyphInfo = { glyphName: event.detail }; + const codePoint = this.fontController.codePointForGlyph(); + const glyphInfo = { glyphName }; if (codePoint !== undefined) { glyphInfo["character"] = getCharFromUnicode(codePoint); } From 069bcf6d1c7f5be39a1bc2139abcc57c3bdfcd48 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Tue, 29 Aug 2023 22:46:44 +0300 Subject: [PATCH 11/11] Undo glyphNameChangedCallback --- src/fontra/views/editor/editor.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index d3043ec55..29e974a40 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -470,8 +470,8 @@ export class EditorController { if (!glyphName) { return; } - const codePoint = this.fontController.codePointForGlyph(); - const glyphInfo = { glyphName }; + const codePoint = this.fontController.codePointForGlyph(glyphName); + const glyphInfo = { glyphName: glyphName }; if (codePoint !== undefined) { glyphInfo["character"] = getCharFromUnicode(codePoint); }