🧱 Add insert mode to local storage

src/SquareEdit/Contents.ts

@@ -113,7 +113,7 @@ export const editControlsPanel =
                 <div class="panel-sub-title">Selection Mode:</div>
                 <div id="selection-mode-btns-container"  class="right-side-panel-btns-container" style="overflow-x: auto;">
                     
-                        <button class="side-panel-btn sel-by is-active" id="selBySyllable">Syllable</button>
+                        <button class="side-panel-btn sel-by" id="selBySyllable">Syllable</button>
                         <button class="side-panel-btn sel-by" id="selByNeume">Neume</button>
                         <button class="side-panel-btn sel-by" id="selByNc">Neume Component</button>
                         <button class="side-panel-btn sel-by" id="selByStaff">Staff</button>

src/SquareEdit/Controls.ts

@@ -4,7 +4,8 @@ import * as Contents from './Contents';
 import { setGroupingHighlight } from '../utils/Color';
 import { unselect } from '../utils/SelectTools';
 import InsertHandler from './InsertHandler';
-import { setSettings } from '../utils/LocalSettings';
+import { getSettings, setSettings } from '../utils/LocalSettings';
+import { InsertTabType, InsertType } from '../Types';
 
 /**
  * Bind listeners to insert tabs.'
@@ -30,11 +31,17 @@ export function bindInsertTabs (insertHandler: InsertHandler): void {
     document.getElementById(tab).addEventListener('click', () => {
       deactivate('.insertTab');
       activate(tab, insertHandler);
+      setSettings({ insertTab: tab as InsertTabType });
       document.getElementById('insert_data').innerHTML = Contents.insertTabHtml[tab];
       bindElements(insertHandler);
       deactivate('.insertel');
-      const firstOption = document.getElementsByClassName('insertel')[0];
-      activate(firstOption.id, insertHandler);
+      try {
+        const { insertMode } = getSettings();
+        activate(insertMode, insertHandler);
+      } catch (e) {
+        const firstOption = document.getElementsByClassName('insertel')[0];
+        activate(firstOption.id, insertHandler);
+      }
     });
   });
 }
@@ -63,6 +70,8 @@ export function initInsertEditControls (): void {
     displayHeadingTitle.classList.remove('focused');
     insertHeadingTitle.classList.add('focused');
 
+    setSettings({ userMode: 'insert' });
+
     (<HTMLButtonElement> document.querySelector('.insertel.is-active')).click();
     editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.add('unfocused');
     insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.remove('unfocused');
@@ -73,6 +82,8 @@ export function initInsertEditControls (): void {
   editPanel.addEventListener('click', () => {
     insertHeadingTitle.classList.remove('focused');
     displayHeadingTitle.classList.add('focused');
+
+    setSettings({ userMode: 'edit' });
 
     insertPanel.querySelector('.side-panel-btn.insertel.is-active').classList.add('unfocused');
     editPanel.querySelector('.side-panel-btn.sel-by.is-active').classList.remove('unfocused');
@@ -139,6 +150,7 @@ function activate (id: string, insertHandler: InsertHandler): void {
   selectedTab.classList.add('is-active');
   if (document.getElementById(id).classList.contains('insertel')) {
     insertHandler.insertActive(id);
+    setSettings({ insertMode: id as InsertType });
   }
 }
 

src/SquareEdit/DivaEditMode.ts

@@ -9,6 +9,7 @@ import { NeumeEditInterface } from '../Interfaces';
 import * as Contents from './Contents';
 import { undoRedoPanel } from '../utils/EditContents';
 import { getSettings } from '../utils/LocalSettings';
+import { UserType } from '../Types';
 
 class DivaEdit implements NeumeEditInterface {
   neonView: NeonView;
@@ -27,7 +28,8 @@ class DivaEdit implements NeumeEditInterface {
     this.dragHandler = new DragHandler(this.neonView, '.active-page > svg');
     this.insertHandler = new InsertHandler(this.neonView, '.active-page > svg');
     bindInsertTabs(this.insertHandler);
-    document.getElementById('primitiveTab').click();
+    const { insertTab } = getSettings();
+    document.getElementById(insertTab).click();
     Select.setSelectHelperObjects(this.neonView, this.dragHandler);
     this.setSelectListeners();
     SelectOptions.initNeonView(this.neonView);
@@ -37,23 +39,28 @@ class DivaEdit implements NeumeEditInterface {
     setHighlightSelectionControls();
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
 
-    document.getElementById('edit_controls').click(); // focus display panel
-    const { selectionMode } = getSettings();
-    document.getElementById(selectionMode).click();
+    const { userMode, insertMode, selectionMode } = getSettings();
+    document.getElementById(insertMode).classList.add('is-active');
+    document.getElementById(selectionMode).classList.add('is-active');
+    switch (userMode) {
+      case 'edit':
+        document.getElementById(selectionMode).click();
+        break;
+      case 'insert':
+        document.getElementById(insertMode).click();
+        break;
+      default:
+        return;
+    }
   }
 
   /**
    * Get the user mode that Neon is in. Either insert, edit, or viewer.
-   * @returns {string}
+   * @returns {UserType}
    */
-  getUserMode (): string {
-    if (this.insertHandler !== undefined) {
-      if (this.insertHandler.isInsertMode()) {
-        return 'insert';
-      }
-      return 'edit';
-    }
-    return 'viewer';
+  getUserMode (): UserType {
+    const { userMode } = getSettings();
+    return userMode;
   }
 
   setSelectListeners (): void {

src/SquareEdit/SingleEditMode.ts

@@ -11,6 +11,7 @@ import * as Contents from './Contents';
 import { undoRedoPanel } from '../utils/EditContents';
 import { initNavbar } from '../utils/EditControls';
 import { getSettings } from '../utils/LocalSettings';
+import { UserType } from '../Types';
 
 /**
  * An Edit Module for a single page of a manuscript.
@@ -42,7 +43,8 @@ class SingleEditMode implements NeumeEditInterface {
     this.dragHandler = new DragHandler(this.neonView, '#svg_group');
     this.insertHandler = new InsertHandler(this.neonView, '#svg_group');
     bindInsertTabs(this.insertHandler);
-    document.getElementById('primitiveTab').click();
+    const { insertTab } = getSettings();
+    document.getElementById(insertTab).click();
     Select.setSelectHelperObjects(this.neonView, this.dragHandler);
     this.setSelectListeners();
 
@@ -53,23 +55,28 @@ class SingleEditMode implements NeumeEditInterface {
     setHighlightOption('selection');
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
 
-    // focus display panel by clicking on the stored selection mode
-    const { selectionMode } = getSettings();
-    document.getElementById(selectionMode).click();
+    const { userMode, insertMode, selectionMode } = getSettings();
+    document.getElementById(insertMode).classList.add('is-active');
+    document.getElementById(selectionMode).classList.add('is-active');
+    switch (userMode) {
+      case 'edit':
+        document.getElementById(selectionMode).click();
+        break;
+      case 'insert':
+        document.getElementById(insertMode).click();
+        break;
+      default:
+        return;
+    }
   }
 
   /**
    * Get the user mode that Neon is in. Either insert, edit, or viewer.
-   * @returns {string}
+   * @returns {UserType}
    */
-  getUserMode (): string {
-    if (this.insertHandler !== undefined) {
-      if (this.insertHandler.isInsertMode()) {
-        return 'insert';
-      }
-      return 'edit';
-    }
-    return 'viewer';
+  getUserMode (): UserType {
+    const { userMode } = getSettings();
+    return userMode;
   }
 
   setSelectListeners (): void {

src/utils/LocalSettings.ts

@@ -1,4 +1,4 @@
-import { GroupingType, SelectionType } from '../Types';
+import { GroupingType, SelectionType, UserType, InsertType, InsertTabType } from '../Types';
 
 /**
  * The one instance of LocalSettings that will be created and
@@ -21,6 +21,9 @@ export interface Settings {
   glyphOpacity: number;
   imageOpacity: number;
   highlightMode: GroupingType;
+  userMode: UserType;
+  insertMode: InsertType;
+  insertTab: InsertTabType;
   selectionMode: SelectionType;
   displayBBox: boolean;
   displayText: boolean;
@@ -41,6 +44,9 @@ const DEFAULT_SETTINGS: Settings = {
   glyphOpacity: 100,
   imageOpacity: 100,
   highlightMode: 'none',
+  userMode: 'viewer',
+  insertMode: 'punctum',
+  insertTab: 'primitiveTab',
   selectionMode: 'selBySyllable',
   displayBBox: false,
   displayText: false,