fix: LSDV-5260: Selected region can not be moved / resized when it's under another region (#1454)

* fix: LSDV-5260: Selected region can not be moved / resized when it's under another region

* adding test for region ordering

* fix test

Author: bmartel

e2e/tests/audio/audio-regions.test.js

@@ -177,6 +177,49 @@ Scenario('Can select a region below a hidden region', async function({ I, LabelS
   AtSidebar.seeSelectedRegion('Speech');
 });
 
+Scenario('Selecting a region brings it to the front of the stack', async function({ I, LabelStudio, AtAudioView, AtSidebar }) {
+  LabelStudio.setFeatureFlags({
+    ff_front_dev_2715_audio_3_280722_short: true,
+  });
+  I.amOnPage('/');
+
+  LabelStudio.init(paramsSpeech);
+
+  await AtAudioView.waitForAudio();
+  await AtAudioView.lookForStage();
+
+  // create a new region
+  I.pressKey('1');
+  AtAudioView.dragAudioElement(50, 80);
+  I.pressKey('u');
+
+  AtSidebar.seeRegions(1);
+
+  // create a new region above the first one
+  I.pressKey('2');
+  AtAudioView.dragAudioElement(49, 81);
+  I.pressKey('u');
+
+  AtSidebar.seeRegions(2);
+
+  // click on the top-most region visible to select it
+  AtAudioView.clickAt(50);
+  AtSidebar.seeSelectedRegion('Noise');
+
+  // Select the bottom most region to bring it to the top
+  AtSidebar.clickRegion('Speech');
+  AtSidebar.seeSelectedRegion('Speech');
+
+  // click on the overlapping region will deselect it, which shows that it is now the top in the list
+  AtAudioView.clickAt(50);
+  AtSidebar.dontSeeSelectedRegion('Speech');
+  AtSidebar.dontSeeSelectedRegion('Noise');
+
+  // click on the overlapping region will select the top item of the list, which will now be the item which was brought to the front by the original interaction.
+  AtAudioView.clickAt(50);
+  AtSidebar.seeSelectedRegion('Speech');
+});
+
 Scenario('Delete region by pressing delete hotkey', async function({ I, LabelStudio, AtAudioView, AtSidebar }) {
   LabelStudio.setFeatureFlags({
     ff_front_dev_2715_audio_3_280722_short: true,

src/lib/AudioUltra/Regions/Regions.ts

@@ -1,5 +1,13 @@
 import { rgba, RgbaColorArray } from '../Common/Color';
-import { clamp, defaults, findLast, getCursorPositionX, getCursorPositionY, isInRange, pixelsToTime } from '../Common/Utils';
+import {
+  clamp,
+  defaults,
+  findLast,
+  getCursorPositionX,
+  getCursorPositionY,
+  isInRange,
+  pixelsToTime
+} from '../Common/Utils';
 import { CursorSymbol } from '../Cursor/Cursor';
 import { LayerGroup } from '../Visual/LayerGroup';
 import { Visualizer } from '../Visual/Visualizer';
@@ -187,6 +195,12 @@ export class Regions {
     }
   }
 
+  bringRegionToFront(regionId: string) {
+    const originalIndex = this.regions.findIndex(reg => reg.id === regionId);
+
+    this.regions.push(...this.regions.splice(originalIndex, 1));
+  }
+
   destroy() {
     const { container } = this.visualizer;
 
@@ -379,7 +393,6 @@ export class Regions {
     if (this.layerGroup.isVisible && region?.updateable) {
       e.preventDefault();
       e.stopPropagation();
-
       region.invoke('mouseDown', [region, e]);
     }
   };
@@ -398,7 +411,7 @@ export class Regions {
 
     if (e.target && mainLayer?.canvas?.contains(e.target)) {
       const region = this.findRegionUnderCursor(e);
-  
+
       if (this.layerGroup.isVisible && region) {
         region.invoke('click', [region, e]);
       }

src/lib/AudioUltra/Regions/Segment.ts

@@ -130,6 +130,13 @@ export class Segment extends Events<SegmentEvents> {
     this.waveform.invoke('regionUpdated', [this]);
   }
 
+  /**
+   * Move this segment to the front so it is readily available to the user to manipulate
+   */
+  bringToFront() {
+    this.controller.bringRegionToFront(this.id);
+  }
+
   protected get layerName() {
     return `region-${this.id}`;
   }
@@ -286,6 +293,7 @@ export class Segment extends Events<SegmentEvents> {
     const x = getCursorPositionX(e, container) + scrollLeft;
     const { start, end } = this;
 
+    this.bringToFront();
     this.draggingStartPosition = { grabPosition: x, start, end };
     this.isGrabbingEdge = this.edgeGrabCheck(e);
     document.addEventListener('mouseup', this.handleMouseUp);

src/regions/AudioRegion/AudioUltraRegionModel.js

@@ -77,6 +77,7 @@ export const AudioUltraRegionModel = types
       selectRegion() {
         if (!self._ws_region) return;
         self._ws_region.handleSelected(true);
+        self._ws_region.bringToFront();
         self._ws_region.scrollToRegion();
       },
 
@@ -139,7 +140,7 @@ export const AudioUltraRegionModel = types
 
       setProperty(propName, value) {
         Super.setProperty(propName, value);
-        if ( ['start', 'end'].includes(propName) ) {
+        if (['start', 'end'].includes(propName)) {
           self.updatePosition();
         }
       },