From fda815a9367aaee5f6d19d8f1b8c76dd3666c841 Mon Sep 17 00:00:00 2001
From: Fatih Erikli <fatih.erikli.work@gmail.com>
Date: Wed, 13 Sep 2023 17:18:57 +0300
Subject: [PATCH] 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);
     }
   }
 }