Only show marquee for selected item

e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js

@@ -460,7 +460,7 @@ async function removeLayoutObject(page, layoutObject) {
  * @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
  */
 async function addLayoutObject(page, layoutName, layoutObject) {
-  await page.getByLabel(`${layoutName} Layout Grid`).click();
+  await page.getByLabel(`${layoutName} Layout`, { exact: true }).click();
   await page.getByText('Add Drawing Object').click();
   await page
     .getByRole('menuitem', {

e2e/tests/visual/displayLayout.visual.spec.js

@@ -0,0 +1,162 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2023, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+/**
+ * Defines playwright locators that can be used in tests.
+ * @typedef {Object} LayoutLocators
+ * @property {Object<string, import('@playwright/test').Locator>} LayoutLocator
+ */
+
+const { test } = require('../../pluginFixtures');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+const VISUAL_URL = require('../../constants').VISUAL_URL;
+const percySnapshot = require('@percy/playwright');
+const snapshotScope = '.l-shell__pane-main .l-pane__contents';
+
+test.describe('Visual - Display Layout', () => {
+  test('Resize Marquee surrounds selection', async ({ page, theme, openmctConfig }) => {
+    const baseline = await setupBaseline(page, openmctConfig);
+    const { child1LayoutLocator, child1LayoutObjectLocator } = baseline;
+
+    await percySnapshot(page, `Nested layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+
+    await child1LayoutLocator.click();
+    await percySnapshot(page, `New nested layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+
+    await child1LayoutObjectLocator.click();
+    await percySnapshot(page, `Object in nested layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+  });
+
+  test('Parent layout of selection displays grid', async ({ page, theme, openmctConfig }) => {
+    const baseline = await setupBaseline(page, openmctConfig);
+    const { parentLayoutLocator, child1LayoutObjectLocator } = baseline;
+
+    await percySnapshot(page, `Nested layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+
+    await parentLayoutLocator.click();
+    await percySnapshot(page, `Outer layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+
+    await child1LayoutObjectLocator.click();
+    await percySnapshot(page, `Object in nested layout selected (theme: '${theme}')`, {
+      scope: snapshotScope
+    });
+  });
+});
+
+/**
+ * Sets up a complex layout with nested layouts and provides the playwright locators
+ * @param {import('@playwright/test').Page} page
+ * @param {Object} openmctConfig
+ * @returns {LayoutLocators} locators of baseline complex display to be used in tests
+ */
+async function setupBaseline(page, openmctConfig) {
+  const { myItemsFolderName } = openmctConfig;
+
+  // Load Open MCT visual test baseline
+  await page.goto(VISUAL_URL, { waitUntil: 'domcontentloaded' });
+  // Open Tree
+  await page.getByRole('button', { name: 'Browse' }).click();
+
+  const treePane = page.getByRole('tree', {
+    name: 'Main Tree'
+  });
+
+  const objectViewLocator = page.locator('.c-object-view');
+  const parentLayoutLocator = objectViewLocator.first();
+  const child1LayoutLocator = parentLayoutLocator.locator(objectViewLocator).first();
+  const child1LayoutObjectLocator = child1LayoutLocator.locator('.l-layout__frame');
+  const editButton = page.locator('[title="Edit"]');
+  const saveButton = page.locator('button[title="Save"]');
+  const confirmSaveAndFinishEditingButton = page.locator('text=Save and Finish Editing');
+  const parentLayout = await createDomainObjectWithDefaults(page, {
+    type: 'Display Layout',
+    name: 'Parent Layout'
+  });
+  const child1Layout = await createDomainObjectWithDefaults(page, {
+    type: 'Display Layout',
+    name: 'Child 1 Layout'
+  });
+  const child2Layout = await createDomainObjectWithDefaults(page, {
+    type: 'Display Layout',
+    name: 'Child 2 Layout'
+  });
+  const swg1 = await createDomainObjectWithDefaults(page, {
+    type: 'Sine Wave Generator',
+    name: 'SWG 1'
+  });
+  const swg2 = await createDomainObjectWithDefaults(page, {
+    type: 'Sine Wave Generator',
+    name: 'SWG 2'
+  });
+  const child1LayoutTreeItem = treePane.getByRole('treeitem', {
+    name: new RegExp(child1Layout.name)
+  });
+  const child2LayoutTreeItem = treePane.getByRole('treeitem', {
+    name: new RegExp(child2Layout.name)
+  });
+  const swg1TreeItem = treePane.getByRole('treeitem', {
+    name: new RegExp(swg1.name)
+  });
+  const swg2TreeItem = treePane.getByRole('treeitem', {
+    name: new RegExp(swg2.name)
+  });
+
+  // Expand folder containing created objects
+  await page.goto(parentLayout.url);
+  await page.getByTitle('Show selected item in tree').click();
+
+  // Add swg1 to child1Layout
+  await page.goto(child1Layout.url);
+  await editButton.click();
+  await swg1TreeItem.dragTo(parentLayoutLocator, { targetPosition: { x: 0, y: 0 } });
+  await saveButton.click();
+  await confirmSaveAndFinishEditingButton.click();
+
+  // Add swg1 to child1Layout
+  await page.goto(child2Layout.url);
+  await editButton.click();
+  await swg2TreeItem.dragTo(parentLayoutLocator, { targetPosition: { x: 0, y: 0 } });
+  await saveButton.click();
+  await confirmSaveAndFinishEditingButton.click();
+
+  // Add child1Layout and child2Layout to parentLayout
+  await page.goto(parentLayout.url);
+  await editButton.click();
+  await child1LayoutTreeItem.dragTo(parentLayoutLocator, { targetPosition: { x: 350, y: 0 } });
+  await child2LayoutTreeItem.dragTo(parentLayoutLocator, { targetPosition: { x: 0, y: 0 } });
+
+  return {
+    parentLayoutLocator,
+    child1LayoutLocator,
+    child1LayoutObjectLocator
+  };
+}

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -27,6 +27,7 @@
       'is-multi-selected': selectedLayoutItems.length > 1,
       'allow-editing': isEditing
     }"
+    :aria-label="`${domainObject.name} Layout`"
     @dragover="handleDragOver"
     @click.capture="bypassSelection"
     @drop="handleDrop"

src/plugins/displayLayout/components/display-layout.scss

@@ -1,4 +1,4 @@
-@mixin displayMarquee($c) {
+@mixin displayMarquee() {
   > .c-frame-edit {
     // All other frames
     //@include test($c, 0.4);
@@ -11,12 +11,29 @@
   }
 }
 
+@mixin displayGrid() {
+  background: $editUIGridColorBg;
+
+  > [class*='__dimensions'] {
+    display: block;
+  }
+
+  > [class*='grid-holder'] {
+    display: block;
+  }
+}
+
 .l-layout {
   @include abs();
   display: flex;
   flex-direction: column;
   overflow: auto;
 
+  &__grid-holder,
+  &__dimensions {
+    display: none;
+  }
+
   &__dimensions {
     $b: 1px dashed $editDimensionsColor;
     border-right: $b;
@@ -45,35 +62,20 @@
   .l-shell__main-container {
     [s-selected],
     [s-selected-parent] {
-      // Display grid and allow edit marquee to display in main layout holder when editing
+      // Display grid in main layout holder when editing
       > .l-layout {
-        background: $editUIGridColorBg;
-
-        > [class*='__dimensions'] {
-          display: block;
-        }
-
-        > [class*='__grid-holder'] {
-          display: block;
-        }
+        @include displayGrid();
       }
     }
   }
 
   .l-layout__frame {
-    &[s-selected]:not([multi-select='true']),
     &[s-selected-parent] {
-      // Display grid and allow edit marquee to display in nested layouts when editing
-      > * > * > .l-layout.allow-editing {
+      // Display grid in nested layouts when editing
+      > * > * > * > .l-layout.allow-editing {
         box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
-
-        > [class*='__dimensions'] {
-          display: block;
-        }
-
-        > [class*='grid-holder'] {
-          display: block;
-        }
+
+        @include displayGrid();
       }
     }
   }
@@ -82,11 +84,11 @@
   *[s-selected-parent] {
     > .l-layout {
       // When main shell layout is the parent
-      @include displayMarquee(deeppink); // TEMP
+      @include displayMarquee();
     }
-    > * > * > * {
+    > * > * > * > * {
       // When a sub-layout is the parent
-      @include displayMarquee(blue);
+      @include displayMarquee();
     }
   }
 }

src/plugins/displayLayout/components/edit-marquee.scss

@@ -1,5 +1,6 @@
 .c-frame-edit {
   // In Layouts, this is the editing rect and handles
+  display: none; // Set to display: block in display-layout.scss
   pointer-events: none;
   @include abs();
   border: $editMarqueeBorder;