MatchHeight editor action for bbox

src/SquareEdit/Contents.ts

@@ -360,6 +360,15 @@ export const divLineActionContents =
     </div>
 </div>`;
 
+/**
+ * Contents of bbox action menu.
+ */
+export const bboxActionContents =
+    `<div class="right-side-panel-btns-container">
+        <button class="side-panel-btn" id="matchHeight">Match Height</button>
+        <button class="side-panel-btn" id="delete">Delete</button>
+    </div>`;
+
 /**
  * HTML for grouping selection menu.
  */

src/SquareEdit/SelectOptions.ts

@@ -9,6 +9,7 @@ import {
   ChangeStaffAction,
   DisplaceClefOctaveAction,
   EditorAction,
+  MatchHeightAction,
   RemoveAction,
   SetAction,
   SetClefAction
@@ -245,6 +246,31 @@ export function moveOutsideSyllableHandler(): void {
   });
 }
 
+/**
+ * Function to match bbox height to the selected bbox
+ */
+export function matchHeightHandler(): void {
+  const selected = Array.from(document.getElementsByClassName('selected'));
+  if (selected.length > 1) {
+    Notification.queueNotification('Cannot match height to multiple bbox', 'error');
+  }
+  const toChange: MatchHeightAction = {
+    action: 'matchHeight',
+    param: {
+      elementId: selected[0].id
+    }
+  };
+
+  neonView.edit(toChange, neonView.view.getCurrentPageURI()).then((result) => { 
+    if (result) {
+      Notification.queueNotification('Height Match Success', 'success');
+    } else {
+      Notification.queueNotification('Height Match Failed XoX', 'error');
+    }
+    endOptionsSelection();
+    neonView.updateForCurrentPage(); 
+  });
+}
 
 function addDeleteListener(): void {
   const del = document.getElementById('delete');
@@ -940,6 +966,18 @@ export function triggerSplitActions (): void {
     });
 }
 
+/**
+ * Trigger bbox option.
+ */
+export function triggerBBoxActions (): void {
+  endOptionsSelection();
+  setEditControls('moreEdit', Contents.bboxActionContents);
+  addDeleteListener();
+  document.getElementById('matchHeight').addEventListener('click', () => {
+    matchHeightHandler();
+  });
+}
+
 /**
  * Trigger default actions when selecting by syl
  */

src/Types.ts

@@ -201,6 +201,13 @@ export type ChangeGroupAction = {
   };
 };
 
+export type MatchHeightAction = {
+  action: 'matchHeight',
+  param: {
+    elementId: string;
+  };
+};
+
 /** An editing action sent to verovio as described [here](https://github.com/DDMAL/Neon/wiki/Toolkit-Actions). */
 export type EditorAction =
   | DragAction
@@ -224,7 +231,8 @@ export type EditorAction =
   | ChangeStaffAction
   | ChangeStaffToAction
   | ChangeGroupAction
-  | ChainAction;
+  | ChainAction
+  | MatchHeightAction;
 
 export type ChainAction = {
   action: 'chain',

src/utils/SelectTools.ts

@@ -496,6 +496,7 @@ export function selectBBox (el: SVGGraphicsElement, dragHandler: DragHandler, ne
       }
     }
   }
+  SelectOptions.triggerBBoxActions();
 }
 
 /**
@@ -729,7 +730,7 @@ export async function selectAll (elements: Array<SVGGraphicsElement>, neonView:
       switch (groups.length) {
         case 1:
           selectBBox(groups[0], dragHandler, neonView);
-          SelectOptions.triggerDefaultActions();
+          SelectOptions.triggerBBoxActions();
           break;
         default:
           groups.forEach(g => selectBBox(g, dragHandler, undefined));