Merge branch 'develop' into UI-responsiveness-fixes

src/Interfaces.ts

@@ -1,4 +1,4 @@
-import { NeonManifest } from './Types';
+import { NeonManifest, UserType } from './Types';
 import NeonView from './NeonView';
 import ZoomHandler from './SingleView/Zoom';
 import { ModalWindowView } from './utils/ModalWindow';
@@ -37,7 +37,7 @@ export interface NeumeEditConstructable {
 
 export interface NeumeEditInterface {
   initEditMode (): void;
-  getUserMode (): string;
+  getUserMode (): UserType;
   setSelectListeners (): void;
 }
 

src/NeonView.ts

@@ -3,7 +3,7 @@ import * as Validation from './Validation';
 import { parseManifest } from './utils/NeonManifest';
 import setBody from './utils/template/Template';
 import { ModalWindow } from './utils/ModalWindow';
-import { NeonManifest, EditorAction, Attributes } from './Types';
+import { NeonManifest, EditorAction, Attributes, UserType } from './Types';
 import {
   InfoInterface,
   ModalWindowInterface,
@@ -15,7 +15,7 @@ import {
 } from './Interfaces';
 import { initErrorLog } from '../src/utils/ErrorLog';
 import { setSavedStatus, listenUnsavedChanges } from './utils/Unsaved';
-import LocalSettings from './utils/LocalSettings';
+import LocalSettings, { getSettings } from './utils/LocalSettings';
 
 
 /**
@@ -139,14 +139,9 @@ class NeonView {
    * Get the mode Neon is in.
    * @returns Value is "viewer", "insert", or "edit".
    */
-  getUserMode (): string {
-    if (this.NeumeEdit !== undefined) {
-      return this.NeumeEdit.getUserMode();
-    } else if (this.TextEdit !== undefined) {
-      return 'edit';
-    } else {
-      return 'viewer';
-    }
+  getUserMode (): UserType {
+    const { userMode } = getSettings();
+    return userMode;
   }
 
   /**

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,8 +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 { GroupingType, SelectionType } from '../Types';
+import { getSettings, setSettings } from '../utils/LocalSettings';
+import { InsertTabType, InsertType } from '../Types';
 
 /**
  * Bind listeners to insert tabs.'
@@ -31,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);
+      }
     });
   });
 }
@@ -64,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');
@@ -74,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');
@@ -140,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/TextView.ts

@@ -92,7 +92,7 @@ class TextView implements TextViewInterface {
       document.querySelectorAll('.syl.selected .sylTextRect-display')
         .forEach((rect: HTMLElement) => { rect.style.fill = 'red'; });
 
-      if (this.neonView.getUserMode() !== 'viewer' && this.neonView.TextEdit !== undefined) {
+      if (this.neonView.TextEdit !== undefined) {
         this.neonView.TextEdit.initSelectByBBoxButton();
       }
 

src/Types.ts

@@ -312,3 +312,13 @@ export type SelectionType = 'selByStaff' | 'selByNeume' | 'selByNc' | 'selByLaye
 /** Highlight grouping type  */
 export type GroupingType = 'staff' | 'syllable' | 'neume' | 'layerElement' | 'selection' | 'none';
 
+/** User mode type  */
+export type UserType = 'insert' | 'edit' | 'viewer';
+
+/** Insert mode type  */
+export type InsertType = 'punctum' | 'virga' | 'virgaReversed' | 'diamond' | 'custos' 
+| 'cClef' | 'fClef' | 'liquescentA' | 'liquescentC' | 'flat' | 'natural' | 'divLineMaxima' 
+| 'pes' | 'clivis' | 'scandicus' | 'climacus' | 'torculus' | 'porrectus' | 'pressus' | 'staff';
+
+/** Insert tab type  */
+export type InsertTabType = 'primitiveTab' | 'groupingTab' | 'systemTab';

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,