Merge branch 'develop' into hotkey-fix

assets/style.css

@@ -496,7 +496,6 @@ a:hover {
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    flex-wrap: wrap;
 }
 #display-options-separator {
     border-right: 2px solid rgb(232 232 232);

cypress/e2e/drag/bboxes.cy.ts

@@ -10,6 +10,7 @@ beforeEach(() => {
 describe('drag: bounding boxes', () => {
   beforeEach(() => {
     cy.get('#displayBBox').click();
+    cy.get('#editMenu').scrollIntoView();
     cy.get('#selByBBox').should('be.visible').click();
 
     cy.get('.sylTextRect-display').should('have.length.gt', 0);

src/DisplayPanel/DisplayControls.ts

@@ -428,6 +428,31 @@ function setDisplayAllListener(): void {
   });
 }
 
+/** 
+ * Update `Display All` button status
+*/
+export function updateDisplayAllBtn(): void {
+  const displayAllBtn = document.getElementById('display-all-btn');
+  const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
+  const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
+  const displayText = document.getElementById('displayText') as HTMLInputElement;
+  const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
+
+  // if all options are selected,
+  // set "Display/Hide All" button to "Hide All".
+  if (displayInfo?.checked && displayBBoxes?.checked && 
+    displayText?.checked && displayErrLog?.checked) {
+    displayAllBtn.classList.add('selected');
+    displayAllBtn.innerHTML = 'Hide All';
+  } else {
+    // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
+    if (displayAllBtn.classList.contains('selected')) {
+      displayAllBtn.classList.remove('selected');
+      displayAllBtn.innerHTML = 'Display All';
+    }
+  }
+}
+
 /**
  * Load highlight settings from localStorage
  */

src/InfoModule.ts

@@ -4,6 +4,7 @@ import NeonView from './NeonView';
 import { InfoInterface } from './Interfaces';
 import { Attributes, ClefAttributes } from './Types';
 import { getSettings, setSettings } from './utils/LocalSettings';
+import { updateDisplayAllBtn } from './DisplayPanel/DisplayControls';
 
 /**
  * Map of contours to neume names.
@@ -29,36 +30,19 @@ function startInfoVisibility (): void {
  */
 function updateInfoVisibility (): void {
   const neumeInfo = document.getElementById('neume_info');
-
-  const displayAllBtn = document.getElementById('display-all-btn');
   const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
-  const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
-  const displayText = document.getElementById('displayText') as HTMLInputElement;
-  const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
-
+
   // save setting to localStorage
   setSettings({ displayInfo: displayInfo.checked });
 
   if (displayInfo.checked) {
     neumeInfo.setAttribute('style', '');
     // scroll neume info into view
     //neumeInfo.scrollIntoView({ behavior: 'smooth' });
-
-    // if this is the 3rd option to be checked (all three are selected),
-    // set "Display/Hide All" button to "Hide All".
-    if (displayInfo?.checked && displayBBoxes?.checked && 
-      displayText?.checked && displayErrLog?.checked) {
-      displayAllBtn.classList.add('selected');
-      displayAllBtn.innerHTML = 'Hide All';
-    }
   } else {
     neumeInfo.setAttribute('style', 'display: none');
-    // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-    if (displayAllBtn.classList.contains('selected')) {
-      displayAllBtn.classList.remove('selected');
-      displayAllBtn.innerHTML = 'Display All';
-    }
   }
+  updateDisplayAllBtn();
 }
 
 /**

src/Interfaces.ts

@@ -61,6 +61,7 @@ export interface TextViewConstructable {
 }
 
 export interface TextViewInterface {
+  updateBBoxVisibility (): void;
   getSylText (): string;
 }
 

src/NeonView.ts

@@ -64,15 +64,28 @@ class NeonView {
    */
   setupEdit(params: NeonViewParams): void {
     // Set up and start the correct editing mode
-    if (params.NeumeEdit !== undefined) {
-      this.NeumeEdit = new params.NeumeEdit(this);
-    }
     if (params.TextView !== undefined) {
       this.textView = new params.TextView(this);
       if (params.TextEdit !== undefined) {
         this.TextEdit = new params.TextEdit(this);
       }
     }
+    if (params.NeumeEdit !== undefined) {
+      this.NeumeEdit = new params.NeumeEdit(this);
+      this.textView.updateBBoxVisibility();
+      const { userMode, insertMode, selectionMode } = getSettings();
+      document.getElementById(insertMode).classList.add('is-active');
+      document.getElementById(selectionMode).classList.add('is-active');
+      switch (userMode) {
+        case 'insert':
+          document.getElementById(insertMode).click();
+          break;
+        case 'edit':
+        default:
+          document.getElementById(selectionMode).click();
+          break;
+      }
+    }
   }
 
   /**

src/SquareEdit/DivaEditMode.ts

@@ -38,20 +38,6 @@ class DivaEdit implements NeumeEditInterface {
     initSelectionButtons();
     setHighlightSelectionControls();
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
-
-    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;
-    }
   }
 
   /**

src/SquareEdit/SingleEditMode.ts

@@ -54,19 +54,6 @@ class SingleEditMode implements NeumeEditInterface {
     initUndoRedoPanel(this.neonView);
     setHighlightOption('selection');
     this.neonView.view.addUpdateCallback(this.setSelectListeners.bind(this));
-
-    const { userMode, insertMode, selectionMode } = getSettings();
-    document.getElementById(insertMode).classList.add('is-active');
-    document.getElementById(selectionMode).classList.add('is-active');
-    switch (userMode) {
-      case 'insert':
-        document.getElementById(insertMode).click();
-        break;
-      case 'edit':
-      default:
-        document.getElementById(selectionMode).click();
-        break;
-    }
   }
 
   /**

src/TextEditMode.ts

@@ -5,6 +5,7 @@ import { setSelectHelperObjects, dragSelect, clickSelect } from './utils/Select'
 import { setGroupingHighlight } from './utils/Color';
 import { TextEditInterface } from './Interfaces';
 import  { ModalWindowView } from './utils/ModalWindow';
+import { setSettings } from './utils/LocalSettings';
 
 /**
  * Format a string for prompting the user.
@@ -17,9 +18,10 @@ function formatRaw (rawString: string): string {
 }
 */
 
-function selBySyllableListener (): void {
+function selByBBoxListener (): void {
   if (!document.getElementById('selByBBox').classList.contains('is-active')) {
     unselect();
+    setSettings({ selectionMode : 'selByBBox' });
     try {
       document.getElementById('moreEdit').innerHTML = '';
       document.getElementById('extraEdit').innerHTML = '';
@@ -107,11 +109,11 @@ export default class TextEditMode implements TextEditInterface {
       button.id = 'selByBBox';
       button.textContent = 'BBox';
       block.appendChild(button);
-      button.addEventListener('click', selBySyllableListener.bind(this));
+      button.addEventListener('click', selByBBoxListener.bind(this));
       document.body.addEventListener('keydown', (evt) => {
         if (evt.key === '6') {
           if (document.getElementById('selByBBox').style.display === '') {
-            selBySyllableListener.bind(this)();
+            selByBBoxListener.bind(this)();
           }
         }
       });

src/TextView.ts

@@ -1,7 +1,7 @@
 import * as Notification from './utils/Notification';
 import NeonView from './NeonView';
 import { unselect } from './utils/SelectTools';
-import { updateHighlight } from './DisplayPanel/DisplayControls';
+import { updateDisplayAllBtn, updateHighlight } from './DisplayPanel/DisplayControls';
 import { TextViewInterface } from './Interfaces';
 import { getSettings, setSettings } from './utils/LocalSettings';
 
@@ -46,22 +46,23 @@ class TextView implements TextViewInterface {
     this.loadSettings();
     this.setTextViewControls();
     this.neonView.view.addUpdateCallback(this.updateTextViewVisibility.bind(this));
-    this.neonView.view.addUpdateCallback(this.updateBBoxViewVisibility.bind(this));
+    this.neonView.view.addUpdateCallback(this.updateBBoxVisibility.bind(this));
   }
 
   /**
   * Set listeners on textview visibility checkbox
   */
   setTextViewControls (): void {
-    function textViewVis (): void { this.updateTextViewVisibility(); }
-    function bboxViewVis (): void { this.updateBBoxViewVisibility(); }
-
     this.updateTextViewVisibility();
-    this.updateBBoxViewVisibility();
-    document.getElementById('displayText')
-      .addEventListener('click', textViewVis.bind(this));
-    document.getElementById('displayBBox') // Why is BBox logic is inside TextView.ts ???
-      .addEventListener('click', bboxViewVis.bind(this));
+    this.updateBBoxVisibility();
+
+    document.getElementById('displayText').addEventListener('click', () => {
+      this.updateTextViewVisibility();
+    });
+
+    document.getElementById('displayBBox').addEventListener('click', () => {
+      this.updateBBoxVisibility();
+    });
   }
 
   loadSettings (): void {
@@ -73,14 +74,10 @@ class TextView implements TextViewInterface {
   /**
    * Update visibility of text bounding boxes
    */
-  updateBBoxViewVisibility (): void {
+  updateBBoxVisibility (): void {
 
-    const displayAllBtn = document.getElementById('display-all-btn');
-    const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
     const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
-    const displayText = document.getElementById('displayText') as HTMLInputElement;
-    const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
-
+
     // save to localStorage
     setSettings({ displayBBox: displayBBoxes.checked });
 
@@ -95,14 +92,6 @@ class TextView implements TextViewInterface {
       if (this.neonView.getUserMode() !== 'viewer' && this.neonView.TextEdit !== undefined) {
         this.neonView.TextEdit.initSelectByBBoxButton();
       }
-
-      // if this is the 3rd option to be checked (all three are selected),
-      // set "Display/Hide All" button to "Hide All".
-      if (displayInfo?.checked && displayBBoxes?.checked && 
-          displayText?.checked && displayErrLog?.checked) {
-        displayAllBtn.classList.add('selected');
-        displayAllBtn.innerHTML = 'Hide All';
-      }
     } 
     else {
       if (document.getElementById('selByBBox')?.classList.contains('is-active')) {
@@ -124,13 +113,9 @@ class TextView implements TextViewInterface {
         document.getElementById('selByBBox').style.display = 'none';
       } 
       catch (e) {}
-
-      // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-      if (displayAllBtn.classList.contains('selected')) {
-        displayAllBtn.classList.remove('selected');
-        displayAllBtn.innerHTML = 'Display All';
-      }
     }
+
+    updateDisplayAllBtn();
     updateHighlight();
   }
 
@@ -140,12 +125,8 @@ class TextView implements TextViewInterface {
   */
   updateTextViewVisibility (): void {
 
-    const displayAllBtn = document.getElementById('display-all-btn');
-    const displayInfo = document.getElementById('displayInfo') as HTMLInputElement;
-    const displayBBoxes = document.getElementById('displayBBox') as HTMLInputElement;
     const displayText = document.getElementById('displayText') as HTMLInputElement;
-    const displayErrLog = document.getElementById('display-errors') as HTMLInputElement;
-
+
     // save to localStorage
     setSettings({ displayText: displayText.checked });
 
@@ -208,23 +189,12 @@ class TextView implements TextViewInterface {
 
       // scroll the syllable text bubble into view
       //sylText.scrollIntoView({ behavior: 'smooth' });
-
-      // if this is the 3rd option to be checked (all three are selected),
-      // set "Display/Hide All" button to "Hide All".
-      if (displayInfo?.checked && displayBBoxes?.checked && 
-          displayText?.checked && displayErrLog?.checked) {
-        displayAllBtn.classList.add('selected');
-        displayAllBtn.innerHTML = 'Hide All';
-      }
     } 
     else {
       document.getElementById('syl_text').style.display = 'none';
-      // if "Display/Hide All" button is in "Hide All" mode, set it to "Display All" mode
-      if (displayAllBtn.classList.contains('selected')) {
-        displayAllBtn.classList.remove('selected');
-        displayAllBtn.innerHTML = 'Display All';
-      }
     }
+
+    updateDisplayAllBtn();
   }
 
   /**