From f75e1863b1e0c192bd054303fc018aa0e7e118c8 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Mon, 11 Sep 2023 17:14:53 +0300 Subject: [PATCH 1/3] Work in progress: Implement MIN_CONTENT_SPACE --- src/fontra/views/editor/editor.js | 30 +++++++++++++++++++++++++++++- src/fontra/views/editor/sidebar.js | 4 ++-- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index caad4b2e2..47352ebed 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -32,6 +32,7 @@ import { readFromClipboard, reversed, writeToClipboard, + clamp, } from "../core/utils.js"; import { themeController } from "/core/theme-settings.js"; import { showMenu, MenuItemDivider } from "/web-components/menu-panel.js"; @@ -54,7 +55,7 @@ import { import { staticGlyphToGLIF } from "../core/glyph-glif.js"; import { pathToSVG } from "../core/glyph-svg.js"; import { parseClipboard } from "../core/server-utils.js"; -import Sidebar from "./sidebar.js"; +import Sidebar, { MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "./sidebar.js"; import TextEntryPanel from "./panel-text-entry.js"; import GlyphSearchPanel from "./panel-glyph-search.js"; @@ -374,6 +375,33 @@ export class EditorController { sidebarContainer.classList.add("animating"); } }, 100); + + function getStoredSidebarWidth(identifier) { + const sidebarWidth = localStorage.getItem(`fontra-sidebar-width-${identifier}`); + let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH); + if (isNaN(width)) { + width = MIN_SIDEBAR_WIDTH; + } + return width; + } + + const resizeObserver = new ResizeObserver(() => { + const leftWidth = getStoredSidebarWidth("left"); + const rightWidth = getStoredSidebarWidth("right"); + if (window.innerWidth < leftWidth + rightWidth + 200) { + document.documentElement.style.setProperty( + "--sidebar-content-width-right", + `${MIN_SIDEBAR_WIDTH}px` + ); + document.documentElement.style.setProperty( + "--sidebar-content-width-left", + `${MIN_SIDEBAR_WIDTH}px` + ); + localStorage.setItem(`fontra-sidebar-width-left`, MIN_SIDEBAR_WIDTH); + localStorage.setItem(`fontra-sidebar-width-right`, MIN_SIDEBAR_WIDTH); + } + }); + resizeObserver.observe(document.documentElement); } addSidebar(sidebar) { diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js index 085d47063..ea4ba7fdf 100644 --- a/src/fontra/views/editor/sidebar.js +++ b/src/fontra/views/editor/sidebar.js @@ -1,8 +1,8 @@ import * as html from "/core/unlit.js"; import { clamp } from "../../core/utils.js"; -const MIN_SIDEBAR_WIDTH = 200; -const MAX_SIDEBAR_WIDTH = 500; +export const MIN_SIDEBAR_WIDTH = 200; +export const MAX_SIDEBAR_WIDTH = 500; export default class Sidebar { constructor(identifier) { From db2d5c19dbe9ef3544db28be2976696c63fb459f Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Wed, 13 Sep 2023 17:05:00 +0300 Subject: [PATCH 2/3] Add applyWidth method to Sidebar --- src/fontra/views/editor/editor.js | 21 ++++++++------------- src/fontra/views/editor/sidebar.js | 19 +++++++++++++------ 2 files changed, 21 insertions(+), 19 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index 47352ebed..fb606b995 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -55,7 +55,7 @@ import { import { staticGlyphToGLIF } from "../core/glyph-glif.js"; import { pathToSVG } from "../core/glyph-svg.js"; import { parseClipboard } from "../core/server-utils.js"; -import Sidebar, { MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "./sidebar.js"; +import { Sidebar, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "./sidebar.js"; import TextEntryPanel from "./panel-text-entry.js"; import GlyphSearchPanel from "./panel-glyph-search.js"; @@ -64,6 +64,8 @@ import UserSettingsPanel from "./panel-user-settings.js"; import ReferenceFontPanel from "./panel-reference-font.js"; import SelectionInfoPanel from "./panel-selection-info.js"; +const MIN_CANVAS_SPACE = 200; + export class EditorController { static async fromWebSocket() { const pathItems = window.location.pathname.split("/").slice(3); @@ -385,20 +387,13 @@ export class EditorController { return width; } - const resizeObserver = new ResizeObserver(() => { + const resizeObserver = new ResizeObserver(([element]) => { const leftWidth = getStoredSidebarWidth("left"); const rightWidth = getStoredSidebarWidth("right"); - if (window.innerWidth < leftWidth + rightWidth + 200) { - document.documentElement.style.setProperty( - "--sidebar-content-width-right", - `${MIN_SIDEBAR_WIDTH}px` - ); - document.documentElement.style.setProperty( - "--sidebar-content-width-left", - `${MIN_SIDEBAR_WIDTH}px` - ); - localStorage.setItem(`fontra-sidebar-width-left`, MIN_SIDEBAR_WIDTH); - localStorage.setItem(`fontra-sidebar-width-right`, MIN_SIDEBAR_WIDTH); + if (element.contentRect.width < leftWidth + rightWidth + MIN_CANVAS_SPACE) { + for (const sidebar of this.sidebars) { + sidebar.applyWidth(MIN_SIDEBAR_WIDTH, true); + } } }); resizeObserver.observe(document.documentElement); diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js index ea4ba7fdf..25f3b51ba 100644 --- a/src/fontra/views/editor/sidebar.js +++ b/src/fontra/views/editor/sidebar.js @@ -4,7 +4,7 @@ import { clamp } from "../../core/utils.js"; export const MIN_SIDEBAR_WIDTH = 200; export const MAX_SIDEBAR_WIDTH = 500; -export default class Sidebar { +export class Sidebar { constructor(identifier) { this.identifier = identifier; this.container = null; @@ -92,6 +92,16 @@ export default class Sidebar { this.initResizeGutter(); } + applyWidth(width, saveLocalStorage = false) { + if (saveLocalStorage) { + localStorage.setItem(`fontra-sidebar-width-${this.identifier}`, width); + } + document.documentElement.style.setProperty( + `--sidebar-content-width-${this.identifier}`, + `${width}px` + ); + } + initResizeGutter() { let initialWidth; let initialPointerCoordinateX; @@ -113,7 +123,7 @@ export default class Sidebar { } }; const onPointerUp = () => { - localStorage.setItem(`fontra-sidebar-width-${this.identifier}`, width); + this.applyWidth(width, true); sidebarResizing.classList.add("animating"); sidebarResizing = undefined; initialWidth = undefined; @@ -143,10 +153,7 @@ export default class Sidebar { if (isNaN(width)) { width = MIN_SIDEBAR_WIDTH; } - document.documentElement.style.setProperty( - `--sidebar-content-width-${this.identifier}`, - `${width}px` - ); + this.applyWidth(width); } } } From fda815a9367aaee5f6d19d8f1b8c76dd3666c841 Mon Sep 17 00:00:00 2001 From: Fatih Erikli Date: Wed, 13 Sep 2023 17:18:57 +0300 Subject: [PATCH 3/3] Add getStoredWidth to Sidebar --- src/fontra/views/editor/editor.js | 20 ++++++-------------- src/fontra/views/editor/sidebar.js | 21 +++++++++++++-------- 2 files changed, 19 insertions(+), 22 deletions(-) diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js index fb606b995..3652eef4c 100644 --- a/src/fontra/views/editor/editor.js +++ b/src/fontra/views/editor/editor.js @@ -32,7 +32,6 @@ import { readFromClipboard, reversed, writeToClipboard, - clamp, } from "../core/utils.js"; import { themeController } from "/core/theme-settings.js"; import { showMenu, MenuItemDivider } from "/web-components/menu-panel.js"; @@ -55,7 +54,7 @@ import { import { staticGlyphToGLIF } from "../core/glyph-glif.js"; import { pathToSVG } from "../core/glyph-svg.js"; import { parseClipboard } from "../core/server-utils.js"; -import { Sidebar, MAX_SIDEBAR_WIDTH, MIN_SIDEBAR_WIDTH } from "./sidebar.js"; +import { Sidebar, MIN_SIDEBAR_WIDTH } from "./sidebar.js"; import TextEntryPanel from "./panel-text-entry.js"; import GlyphSearchPanel from "./panel-glyph-search.js"; @@ -378,19 +377,12 @@ export class EditorController { } }, 100); - function getStoredSidebarWidth(identifier) { - const sidebarWidth = localStorage.getItem(`fontra-sidebar-width-${identifier}`); - let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH); - if (isNaN(width)) { - width = MIN_SIDEBAR_WIDTH; - } - return width; - } - const resizeObserver = new ResizeObserver(([element]) => { - const leftWidth = getStoredSidebarWidth("left"); - const rightWidth = getStoredSidebarWidth("right"); - if (element.contentRect.width < leftWidth + rightWidth + MIN_CANVAS_SPACE) { + const totalWidth = this.sidebars.reduce( + (total, sidebar) => total + sidebar.getStoredWidth(), + 0 + ); + if (element.contentRect.width < totalWidth + MIN_CANVAS_SPACE) { for (const sidebar of this.sidebars) { sidebar.applyWidth(MIN_SIDEBAR_WIDTH, true); } diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js index 25f3b51ba..095b7be21 100644 --- a/src/fontra/views/editor/sidebar.js +++ b/src/fontra/views/editor/sidebar.js @@ -102,6 +102,17 @@ export class Sidebar { ); } + getStoredWidth() { + const sidebarWidth = localStorage.getItem( + `fontra-sidebar-width-${this.identifier}` + ); + let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH); + if (isNaN(width)) { + width = MIN_SIDEBAR_WIDTH; + } + return width; + } + initResizeGutter() { let initialWidth; let initialPointerCoordinateX; @@ -145,15 +156,9 @@ export class Sidebar { document.addEventListener("pointermove", onPointerMove); document.addEventListener("pointerup", onPointerUp, { once: true }); }); - const sidebarWidth = localStorage.getItem( - `fontra-sidebar-width-${this.identifier}` - ); + const sidebarWidth = this.getStoredWidth(); if (sidebarWidth) { - let width = clamp(parseInt(sidebarWidth), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH); - if (isNaN(width)) { - width = MIN_SIDEBAR_WIDTH; - } - this.applyWidth(width); + this.applyWidth(sidebarWidth); } } }