fix: persist inspector states

blinkk · Dec 15, 2021 · 288046e · 288046e
1 parent 83060a1
commit 288046e
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git a/src/ui/grid-inspector.ts b/src/ui/grid-inspector.ts
@@ -4,6 +4,8 @@ import {customElement} from 'lit/decorators.js';
 
 @customElement('grid-inspector')
 export class GridInspector extends LitElement {
+  static STORAGE_KEY = 'inspectorGrid';
+
   connectedCallback() {
     super.connectedCallback();
     // Enable toggling the grid overlay using `ctrl+g` (similar to Figma).
@@ -12,10 +14,15 @@ export class GridInspector extends LitElement {
         this.toggleGridOverlay();
       }
     });
+    if (localStorage.getItem(GridInspector.STORAGE_KEY)) {
+      this.toggleGridOverlay();
+    }
   }
 
   private toggleGridOverlay() {
-    this.style.display = this.style.display === 'none' ? 'block' : 'none';
+    const setVisible = this.style.display != 'block';
+    this.style.display = setVisible ? 'block' : 'none';
+    setVisible ? localStorage.setItem(GridInspector.STORAGE_KEY, 'true') : localStorage.removeItem(GridInspector.STORAGE_KEY);
   }
 
   static get styles() {

diff --git a/src/ui/margin-outliner.ts b/src/ui/margin-outliner.ts
@@ -39,6 +39,7 @@ export class MarginOutliner extends LitElement {
   private show = false;
 
   static DEFAULT_MARGINS = [4, 8, 12, 16, 20, 24, 32, 40, 60, 80];
+  static STORAGE_KEY = 'inspectorMargins';
 
   @property({type: Array, attribute: 'margins'})
   margins?: number[];
@@ -51,6 +52,9 @@ export class MarginOutliner extends LitElement {
         this.toggleMarginOutliner();
       }
     });
+    if (localStorage.getItem(MarginOutliner.STORAGE_KEY)) {
+      this.toggleMarginOutliner();
+    }
   }
 
   private toggleMarginOutliner() {
@@ -65,6 +69,7 @@ export class MarginOutliner extends LitElement {
     } else {
       this.marginOutliner?.dispose();
     }
+    this.show ? localStorage.setItem(MarginOutliner.STORAGE_KEY, 'true') : localStorage.removeItem(MarginOutliner.STORAGE_KEY);
   }
 
   createRenderRoot() {

diff --git a/src/ui/page-inspector.ts b/src/ui/page-inspector.ts
@@ -16,13 +16,24 @@ export class PageInspector extends LitElement {
   @property({type: Array, attribute: 'margins'})
   margins?: number[];
 
+  static SHORTCUTS_STORAGE_KEY = 'inspectorShortcuts';
+
+  isShortcutsActive?: Boolean;
+
   connectedCallback() {
     super.connectedCallback();
+
+    // Set up shortcut helper.
     document.addEventListener('keydown', (e: KeyboardEvent) => {
       if (e.key === '?') {
         this.toggleShortcutHelper();
       }
     });
+    if (localStorage.getItem(PageInspector.SHORTCUTS_STORAGE_KEY)) {
+      this.toggleShortcutHelper();
+      console.log('enabling')
+    }
+
     window.addEventListener('resize', () => {
       this.requestUpdate();
     }, {passive: true});
@@ -81,8 +92,11 @@ export class PageInspector extends LitElement {
   }
 
   toggleShortcutHelper() {
-    const activeClassName = 'active';
-    this.root?.classList.toggle(activeClassName);
+    this.isShortcutsActive = !this.isShortcutsActive;
+    this.isShortcutsActive
+      ? localStorage.setItem(PageInspector.SHORTCUTS_STORAGE_KEY, 'true')
+      : localStorage.removeItem(PageInspector.SHORTCUTS_STORAGE_KEY);
+    this.requestUpdate();
   }
 
   get aspect() {
@@ -91,7 +105,7 @@ export class PageInspector extends LitElement {
 
   render() {
     return html`
-      <div class="page-inspector">
+      <div class="page-inspector ${this.isShortcutsActive ? 'active' : ''}">
         <div class="page-inspector__ui">
           <div class="page-inspector__ui__viewport">
             Screen size ${this.aspect}