✨ Add octave displacement for clefs

cypress/e2e/displace.cy.ts

@@ -0,0 +1,62 @@
+beforeEach(() => {
+  cy.visit('http://localhost:8080/editor.html?manifest=test');
+  cy.get('#mei_output', { timeout: 10000 }).should('be.visible');
+});
+
+describe('displace: +1 octave', () => {
+  beforeEach(() => {
+    cy.get('#displayInfo').click();
+    cy.get('#selByLayerElement').click();
+
+    cy.get('.clef').first().click({ timeout: 100, force: true });
+  });
+
+  it('pitch: octave should be incremented', () => {
+    cy.get('#increment-octave').click({ timeout: 100, force: true });
+
+    // A random neume in the middle of the staff of whose pitch we know
+    const NEUME_ID = '#m-f76386ee-7bfd-471a-8478-e1fb7e345757';
+
+    cy.get(NEUME_ID).trigger('mouseover', { force: true, timeout: 100 });
+    cy.get('#neume_info').should('contain', 'F3').and('not.contain', 'F2');
+  });
+
+  it('pitch: ignore presence of divlines', () => {
+    cy.get('#increment-octave').click({ timeout: 100, force: true });
+
+    // This is a known neume at the end of the staff, with 3 divlines before it.
+    // According to our rules, the divlines should not matter: the pitch should
+    // still be displaced:
+    const NEUME_ID = '#m-61068be0-0f13-4ffb-bc64-65e6b643de60';
+
+    cy.get(NEUME_ID).trigger('mouseover', { force: true, timeout: 100 });
+    cy.get('#neume_info').should('contain', 'D3').and('not.contain', 'D2');
+  });
+
+  it('visual: neume should not be visually displaced', () => {
+    const NEUME_ID = '#m-61068be0-0f13-4ffb-bc64-65e6b643de60';
+
+    // bounding box of the neume should be identical to what it was before:
+    cy.get(NEUME_ID).then(($neume) => {
+      const origin = $neume[0].getBoundingClientRect();
+
+      cy.get('#increment-octave').click({ timeout: 100, force: true });
+
+      cy.get(NEUME_ID).then($neume => {
+        const after = $neume[0].getBoundingClientRect();
+
+        // The neume should not have been moved, give or take 1px
+        expect(after.width).to.be.closeTo(origin.width, 1);
+        expect(after.height).to.be.closeTo(origin.height, 1);
+        expect(after.x).to.be.closeTo(origin.x, 1);
+        expect(after.y).to.be.closeTo(origin.y, 1);
+      });
+    });
+  });
+});
+
+Cypress.on('uncaught:exception', () => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false;
+});

cypress/e2e/dropdown.cy.ts

@@ -0,0 +1,46 @@
+describe('test: dropdowns', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/editor.html?manifest=test');
+    cy.get('#mei_output', { timeout: 10000 }).should('be.visible');
+  });
+
+  function isOctaveDropdown(visible = true) {
+    cy.contains('+1 Octave').should(visible ? 'be.visible' : 'not.be.visible');
+    cy.contains('-1 Octave').should(visible ? 'be.visible' : 'not.be.visible');
+  }
+
+  it('test: multiple action dropdowns', () => {
+    cy.get('#selByLayerElement').click().should('have.class', 'is-active');
+    cy.get('.clef').first().click({ force: true, timeout: 100 });
+
+    // Octave dropdown options should not be visible
+    isOctaveDropdown(false);
+
+    cy.contains('Displace Octave').click();
+
+    isOctaveDropdown(true);
+
+    // Clicking dropdown option should do something:
+    // Success notification should be shown
+    cy.contains('+1 Octave').click();
+    cy.contains('Clef octave incremented');
+  });
+
+  it('test: click away from dropdown', () => {
+    cy.get('#selByLayerElement').click().should('have.class', 'is-active');
+    cy.get('.clef').first().click({ force: true, timeout: 100 });
+
+    cy.contains('Displace Octave').click();
+    isOctaveDropdown(true);
+
+    cy.contains('Change Clef Shape').click({ force: true });
+    isOctaveDropdown(false);
+
+    cy.contains('Displace Octave').click();
+    isOctaveDropdown(true);
+
+    cy.get('body').click({ force: true });
+    isOctaveDropdown(false);
+  });
+
+});

src/SquareEdit/Contents.ts

@@ -151,7 +151,7 @@ export const editControlsPanel =
  */
 export const ncActionContents =
     `<label>Change Head Shape:</label>
-    <div id="drop_select" class="dropdown">
+    <div class="drop_select dropdown">
         <div class="dropdown-trigger">
             <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
                 <span>Head Shapes</span>
@@ -185,7 +185,7 @@ export const defaultNeumeActionContents =
 export const neumeActionContents =
     `<label>Grouping Options:</label>
     <div class="right-side-panel-btns-container">
-        <div id="drop_select" class="dropdown">
+        <div class="drop_select dropdown">
             <div class="dropdown-trigger">
                 <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
                     <span>Groupings</span>
@@ -273,7 +273,7 @@ export const layerElementInActionContents =
  */
 export const accidActionContents =
     `<label>Change Accidental:</label>
-    <div id="drop_select" class="dropdown">
+    <div class="drop_select dropdown">
         <div class="dropdown-trigger"overflow="auto">
             <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
                 <span>Shapes</span>
@@ -303,21 +303,38 @@ export const splitActionContents =
  * Contents of extra clef action menu.
  */
 export const clefActionContents =
-    `<label>Change Clef Shape:&nbsp;</label>
-    <div id="drop_select" class="dropdown">
-        <div class="dropdown-trigger"overflow="auto">
-            <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
-                <span>Clef Shapes</span>
-                <svg class="icon"><use xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use></svg>
-            </button>
+    `
+    <div class="right-side-panel-btns-container">
+        <div class="drop_select dropdown">
+            <div class="dropdown-trigger" overflow="auto">
+                <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
+                    <span>Displace Octave</span>
+                    <svg class="icon"><use xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use></svg>
+                </button>
+            </div>
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                <div class="dropdown-content">
+                    <a id="increment-octave" class="dropdown-item">+1 Octave</a>
+                    <a id="decrement-octave" class="dropdown-item">-1 Octave</a>
+                </div>
+            </div>
         </div>
-        <div class="dropdown-menu" id="dropdown-menu" role="menu">
-            <div class="dropdown-content">
-                <a id="CClef" class="dropdown-item">C Clef</a>
-                <a id="FClef" class="dropdown-item">F Clef</a>
+        <div class="drop_select dropdown">
+            <div class="dropdown-trigger" overflow="auto">
+                <button id="select-options" class="side-panel-btn" aria-haspopup="true" aria-controls="dropdown-menu">
+                    <span>Change Clef Shape</span>
+                    <svg class="icon"><use xlink:href="${__ASSET_PREFIX__}assets/img/icons.svg#dropdown-down"></use></svg>
+                </button>
+            </div>
+            <div class="dropdown-menu" id="dropdown-menu" role="menu">
+                <div class="dropdown-content">
+                    <a id="CClef" class="dropdown-item">C Clef</a>
+                    <a id="FClef" class="dropdown-item">F Clef</a>
+                </div>
             </div>
         </div>
-    </div>`;
+    </div>
+    `;
 
 /**
  * HTML for grouping selection menu.

src/SquareEdit/SelectOptions.ts

@@ -1,10 +1,18 @@
 import * as Contents from './Contents';
 import * as Grouping from './Grouping';
-import * as Notification from '../utils/Notification';
+import Notification from '../utils/Notification';
 import NeonView from '../NeonView';
 import { SplitStaffHandler } from './StaffTools';
 import { SplitNeumeHandler } from './NeumeTools';
-import { ChainAction, ChangeStaffAction, EditorAction, RemoveAction, SetAction, SetClefAction } from '../Types';
+import {
+  ChainAction,
+  ChangeStaffAction,
+  DisplaceClefOctaveAction,
+  EditorAction,
+  RemoveAction,
+  SetAction,
+  SetClefAction
+} from '../Types';
 import { getStaffBBox } from '../utils/SelectTools';
 
 /**
@@ -650,6 +658,48 @@ export function triggerClefActions (clef: SVGGraphicsElement): void {
   document.getElementById('insertToSyllable')?.addEventListener('click', insertToSyllableHandler);
   document.getElementById('moveOutsideSyllable')?.addEventListener('click', moveOutsideSyllableHandler);
 
+  document.querySelector('#increment-octave')
+    .addEventListener('click', () => {
+      const incrementOctave: DisplaceClefOctaveAction = {
+        action: 'displaceClefOctave',
+        param: {
+          elementId: clef.id,
+          direction: 'above'
+        }
+      };
+
+      neonView.edit(incrementOctave, neonView.view.getCurrentPageURI()).then((result) => {
+        if (result) {
+          Notification.queueNotification('Clef octave incremented.', 'success');
+        } else {
+          Notification.queueNotification('Maximum octave displacement reached. Clef can only be displaced up to 3 octaves.', 'error');
+        }
+        endOptionsSelection();
+        neonView.updateForCurrentPage();
+      });
+    });
+
+  document.querySelector('#decrement-octave')
+    .addEventListener('click', () => {
+      const incrementOctave: DisplaceClefOctaveAction = {
+        action: 'displaceClefOctave',
+        param: {
+          elementId: clef.id,
+          direction: 'below'
+        }
+      };
+
+      neonView.edit(incrementOctave, neonView.view.getCurrentPageURI()).then((result) => {
+        if (result) {
+          Notification.queueNotification('Clef octave decremented.', 'success');
+        } else {
+          Notification.queueNotification('Maximum octave displacement reached. Clef can only be displaced up to 3 octaves.', 'error');
+        }
+        endOptionsSelection();
+        neonView.updateForCurrentPage();
+      });
+    });
+
   document.querySelector('#CClef.dropdown-item')
     .addEventListener('click', () => {
       const setCClef: SetClefAction = {
@@ -879,10 +929,37 @@ export function triggerDefaultActions (): void {
 }
 
 /**
- * Initialize extra dropdown options.
+ * Initialize extra dropdown options:
+ * Listen to clicks on dropdowns
  */
 function initOptionsListeners (): void {
-  document.getElementById('drop_select').addEventListener('click', function () {
-    this.classList.toggle('is-active');
-  });
+  document
+    .querySelectorAll('.drop_select')
+    .forEach(
+      drop => {
+        // When anything that is not the dropdown is clicked away, the dropdown
+        // should lose its visibility
+        const optionsClickaway = () => {
+          document.body.removeEventListener('click', optionsClickaway);
+          drop.classList.remove('is-active');
+        };
+
+        drop.addEventListener('click', (evt) => {
+          // Toggle visibility of dropdown
+          drop.classList.toggle('is-active');
+
+          // Remove visibility of other dropdowns when this one is clicked
+          Array.from(document.querySelectorAll('.drop_select'))
+            .filter(other => other !== drop)
+            .forEach(other => other.classList.remove('is-active'));
+
+          // Don't allow other event listeners on the body to interfere with this listener
+          evt.stopPropagation();
+
+          if (drop.classList.contains('is-active'))
+            document.body.addEventListener('click', optionsClickaway);
+          else
+            document.body.removeEventListener('click', optionsClickaway);
+        });
+      });
 }

src/Types.ts

@@ -66,6 +66,14 @@ export type MoveOutsideSyllableAction = {
   }
 };
 
+export type DisplaceClefOctaveAction = {
+  action: 'displaceClefOctave',
+  param: {
+    elementId: string,
+    direction: 'above' | 'below'
+  }
+};
+
 export type RemoveAction = {
   action: 'remove',
   param: {
@@ -185,6 +193,7 @@ export type EditorAction =
   | InsertAction
   | InsertToSyllableAction
   | MoveOutsideSyllableAction
+  | DisplaceClefOctaveAction
   | RemoveAction
   | GroupingAction
   | UngroupingAction

src/utils/Notification.ts

@@ -137,3 +137,5 @@ export function queueNotification (notification: string, type: NotificationType
     startNotification();
   }
 }
+
+export default { queueNotification };