Merge pull request #799 from googlefonts/issue-786-alternative-solution

Work in progress: Implement MIN_CANVAS_SPACE
googlefonts · Sep 13, 2023 · 4f270af · 4f270af
2 parents 58ddffb + fda815a
commit 4f270af
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 16 deletions.
diff --git a/src/fontra/views/editor/editor.js b/src/fontra/views/editor/editor.js
@@ -54,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 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";
@@ -63,6 +63,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);
@@ -374,6 +376,19 @@ export class EditorController {
         sidebarContainer.classList.add("animating");
       }
     }, 100);
+
+    const resizeObserver = new ResizeObserver(([element]) => {
+      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);
+        }
+      }
+    });
+    resizeObserver.observe(document.documentElement);
   }
 
   addSidebar(sidebar) {

diff --git a/src/fontra/views/editor/sidebar.js b/src/fontra/views/editor/sidebar.js
@@ -1,10 +1,10 @@
 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 {
+export class Sidebar {
   constructor(identifier) {
     this.identifier = identifier;
     this.container = null;
@@ -92,6 +92,27 @@ 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`
+    );
+  }
+
+  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;
@@ -113,7 +134,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;
@@ -135,18 +156,9 @@ export default 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;
-      }
-      document.documentElement.style.setProperty(
-        `--sidebar-content-width-${this.identifier}`,
-        `${width}px`
-      );
+      this.applyWidth(sidebarWidth);
     }
   }
 }