✨ 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;
+});

src/SquareEdit/Contents.ts

@@ -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 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>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 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>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

@@ -4,7 +4,15 @@ import * as 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 = {

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