ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-22 02:07:42 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix: DisplayLayout and FlexibleLayout toolbar actions only apply to selected layout (#7184)

Browse Source 
* refactor: convert to ES6 function

* fix: include `keyString` in event name

- This negates the need for complicated logic in determining which objectView the action was intended for

* fix: handle the case of currentView being null

* fix: add keyString to flexibleLayout toolbar events

* fix: properly unregister listeners

* fix: remove unused imports

* fix: revert parameter reorder

* refactor: replace usage of `arguments` with `...args`

* fix: add a11y to display layout + toolbar

* test: add first cut of layout toolbar suite

* test: cleanup a bit and add Image test

* test: add stubs

* fix: remove unused variable

* refactor(DisplayLayoutToolbar): convert to ES6 class

* test: generate localStorage data for display layout tests

* fix: clarify "Add" button label

* test: cleanup and don't parameterize tests

* test: fix path for recycled_local_storage.json

* fix: path to local storage file

* docs: add documentation for
utilizing localStorage in e2e

* fix: path to recycled_local_storage.json

* docs: add note hyperlink
This commit is contained in:
Jesse Mazzella 2023-11-02 13:42:37 -07:00 committed by GitHub
parent bdff210a9c
commit 02f1013770
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
18 changed files with 1175 additions and 858 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
e2e/README.md
View File

@ -193,7 +193,7 @@ Current list of test tags:
|`@ipad` | Test case or test suite is compatible with Playwright's iPad support and Open MCT's read-only mobile view (i.e. no create button).|
|`@gds` | Denotes a GDS Test Case used in the VIPER Mission.|
|`@addInit` | Initializes the browser with an injected and artificial state. Useful for loading non-default plugins. Likely will not work outside of `npm start`.|
|`@localStorage` | Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB).|
|`@localStorage` | Captures or generates session storage to manipulate browser state. Useful for excluding in tests which require a persistent backend (i.e. CouchDB). See [note](#utilizing-localstorage)|
|`@snapshot` | Uses Playwright's snapshot functionality to record a copy of the DOM for direct comparison. Must be run inside of the playwright container.|
|`@unstable` | A new test or test which is known to be flaky.|
|`@2p` | Indicates that multiple users are involved, or multiple tabs/pages are used. Useful for testing multi-user interactivity.|
@ -352,6 +352,28 @@ By adhering to this principle, we can create tests that are both robust and refl
1. Avoid repeated setup to test a single assertion. Write longer tests with multiple soft assertions.
This ensures that your changes will be picked up with large refactors.
##### Utilizing LocalStorage
1. In order to save test runtime in the case of tests that require a decent amount of initial setup (such as in the case of testing complex displays), you may use [Playwright's `storageState` feature](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state) to generate and load localStorage states.
1. To generate a localStorage state to be used in a test:
- Add an e2e test to our generateLocalStorageData suite which sets the initial state (creating/configuring objects, etc.), saving it in the `test-data` folder:
```js
// Save localStorage for future test execution
await context.storageState({
path: path.join(__dirname, '../../../e2e/test-data/display_layout_with_child_layouts.json')
});
```
- Load the state from file at the beginning of the desired test suite (within the `test.describe()`). (NOTE: the storage state will be used for each test in the suite, so you may need to create a new suite):
```js
const LOCALSTORAGE_PATH = path.resolve(
__dirname,
'../../../../test-data/display_layout_with_child_layouts.json'
);
test.use({
storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
});
```
### How to write a great test
- Avoid using css locators to find elements to the page. Use modern web accessible locators like `getByRole`

22
e2e/test-data/display_layout_with_child_layouts.json Normal file
View File

File diff suppressed because one or more lines are too long

36
e2e/tests/framework/generateLocalStorageData.e2e.spec.js
View File

@ -55,6 +55,42 @@ test.describe('Generate Visual Test Data @localStorage @generatedata', () => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
});
test('Generate display layout with 2 child display layouts', async ({ page, context }) => {
// Create Display Layout
const parent = await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
name: 'Parent Display Layout'
});
const child1 = await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
name: 'Child Layout 1',
parent: parent.uuid
});
const child2 = await createDomainObjectWithDefaults(page, {
type: 'Display Layout',
name: 'Child Layout 2',
parent: parent.uuid
});
await page.goto(parent.url);
await page.getByLabel('Edit').click();
await page.getByLabel(`${child2.name} Layout Grid`).hover();
await page.getByLabel('Move Sub-object Frame').nth(1).click();
await page.getByLabel('X:').fill('30');
await page.getByLabel(`${child1.name} Layout Grid`).hover();
await page.getByLabel('Move Sub-object Frame').first().click();
await page.getByLabel('Y:').fill('30');
await page.getByLabel('Save').click();
await page.getByRole('listitem', { name: 'Save and Finish Editing' }).click();
//Save localStorage for future test execution
await context.storageState({
path: path.join(__dirname, '../../../e2e/test-data/display_layout_with_child_layouts.json')
});
});
// TODO: Visual test for the generated object here
// - Move to using appActions to create the overlay plot
// and embedded standard telemetry object

11
e2e/tests/functional/plugins/conditionSet/conditionSet.e2e.spec.js
View File

@ -19,7 +19,7 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* global __dirname */
/*
This test suite is dedicated to tests which verify the basic operations surrounding conditionSets. Note: this
suite is sharing state between tests which is considered an anti-pattern. Implementing in this way to
@ -31,6 +31,7 @@ const {
createDomainObjectWithDefaults,
createExampleTelemetryObject
} = require('../../../../appActions');
const path = require('path');
let conditionSetUrl;
let getConditionSetIdentifierFromUrl;
@ -48,7 +49,9 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
await Promise.all([page.waitForNavigation(), page.click('button:has-text("OK")')]);
//Save localStorage for future test execution
await context.storageState({ path: './e2e/test-data/recycled_local_storage.json' });
await context.storageState({
path: path.resolve(__dirname, '../../../../test-data/recycled_local_storage.json')
});
//Set object identifier from url
conditionSetUrl = page.url();
@ -59,7 +62,9 @@ test.describe.serial('Condition Set CRUD Operations on @localStorage', () => {
});
//Load localStorage for subsequent tests
test.use({ storageState: './e2e/test-data/recycled_local_storage.json' });
test.use({
storageState: path.resolve(__dirname, '../../../../test-data/recycled_local_storage.json')
});
//Begin suite of tests again localStorage
test('Condition set object properties persist in main view and inspector @localStorage', async ({

139
e2e/tests/functional/plugins/displayLayout/displayLayout.e2e.spec.js
View File

@ -19,8 +19,9 @@
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/* global __dirname */
const { test, expect } = require('../../../../pluginFixtures');
const path = require('path');
const {
createDomainObjectWithDefaults,
setStartOffset,
@ -29,6 +30,88 @@ const {
setIndependentTimeConductorBounds
} = require('../../../../appActions');
const LOCALSTORAGE_PATH = path.resolve(
__dirname,
'../../../../test-data/display_layout_with_child_layouts.json'
);
const TINY_IMAGE_BASE64 =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII';
test.describe('Display Layout Toolbar Actions', () => {
const PARENT_DISPLAY_LAYOUT_NAME = 'Parent Display Layout';
const CHILD_DISPLAY_LAYOUT_NAME1 = 'Child Layout 1';
test.beforeEach(async ({ page }) => {
await page.goto('./', { waitUntil: 'domcontentloaded' });
await setRealTimeMode(page);
await page
.locator('a')
.filter({ hasText: 'Parent Display Layout Display Layout' })
.first()
.click();
await page.getByLabel('Edit').click();
});
test.use({
storageState: path.resolve(__dirname, LOCALSTORAGE_PATH)
});
test('can add/remove Text element to a single layout', async ({ page }) => {
const layoutObject = 'Text';
await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
});
await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
});
});
test('can add/remove Image to a single layout', async ({ page }) => {
const layoutObject = 'Image';
await test.step("Add and remove image element from the parent's layout", async () => {
expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
await addLayoutObject(page, PARENT_DISPLAY_LAYOUT_NAME, layoutObject);
expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(1);
await removeLayoutObject(page, layoutObject);
expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
});
await test.step("Add and remove image from the child's layout", async () => {
await addLayoutObject(page, CHILD_DISPLAY_LAYOUT_NAME1, layoutObject);
expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(1);
await removeLayoutObject(page, layoutObject);
expect(await page.getByLabel(`Move ${layoutObject} Frame`).count()).toBe(0);
});
});
test(`can add/remove Box to a single layout`, async ({ page }) => {
const layoutObject = 'Box';
await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
});
await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
});
});
test(`can add/remove Line to a single layout`, async ({ page }) => {
const layoutObject = 'Line';
await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
});
await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
});
});
test(`can add/remove Ellipse to a single layout`, async ({ page }) => {
const layoutObject = 'Ellipse';
await test.step(`Add and remove ${layoutObject} from the parent's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, PARENT_DISPLAY_LAYOUT_NAME);
});
await test.step(`Add and remove ${layoutObject} from the child's layout`, async () => {
await addAndRemoveDrawingObjectAndAssert(page, layoutObject, CHILD_DISPLAY_LAYOUT_NAME1);
});
});
test.fixme('Can switch view types of a single SWG in a layout', async ({ page }) => {});
test.fixme('Can merge multiple plots in a layout', async ({ page }) => {});
test.fixme('Can adjust stack order of a single object in a layout', async ({ page }) => {});
test.fixme('Can duplicate a single object in a layout', async ({ page }) => {});
});
test.describe('Display Layout', () => {
/** @type {import('../../../../appActions').CreatedObjectInfo} */
let sineWaveObject;
@ -41,6 +124,7 @@ test.describe('Display Layout', () => {
type: 'Sine Wave Generator'
});
});
test('alpha-numeric widget telemetry value exactly matches latest telemetry value received in real time', async ({
page
}) => {
@ -339,6 +423,59 @@ test.describe('Display Layout', () => {
});
});
async function addAndRemoveDrawingObjectAndAssert(page, layoutObject, DISPLAY_LAYOUT_NAME) {
expect(await page.getByLabel(layoutObject, { exact: true }).count()).toBe(0);
await addLayoutObject(page, DISPLAY_LAYOUT_NAME, layoutObject);
expect(
await page
.getByLabel(layoutObject, {
exact: true
})
.count()
).toBe(1);
await removeLayoutObject(page, layoutObject);
expect(await page.getByLabel(layoutObject, { exact: true }).count()).toBe(0);
}
/**
* Remove the first matching layout object from the layout
* @param {import('@playwright/test').Page} page
* @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
*/
async function removeLayoutObject(page, layoutObject) {
await page
.getByLabel(`Move ${layoutObject} Frame`, { exact: true })
.or(page.getByLabel(layoutObject, { exact: true }))
.first()
// eslint-disable-next-line playwright/no-force-option
.click({ force: true });
await page.getByTitle('Delete the selected object').click();
await page.getByRole('button', { name: 'OK' }).click();
}
/**
* Add a layout object to the specified layout
* @param {import('@playwright/test').Page} page
* @param {string} layoutName
* @param {'Box' | 'Ellipse' | 'Line' | 'Text' | 'Image'} layoutObject
*/
async function addLayoutObject(page, layoutName, layoutObject) {
await page.getByLabel(`${layoutName} Layout Grid`).click();
await page.getByText('Add Drawing Object').click();
await page
.getByRole('menuitem', {
name: layoutObject
})
.click();
if (layoutObject === 'Text') {
await page.getByRole('textbox', { name: 'Text' }).fill('Hello, Universe!');
await page.getByText('OK').click();
} else if (layoutObject === 'Image') {
await page.getByLabel('Image URL').fill(TINY_IMAGE_BASE64);
await page.getByText('OK').click();
}
}
/**
* Util for subscribing to a telemetry object by object identifier
* Limitations: Currently only works to return telemetry once to the node scope

428
src/plugins/displayLayout/DisplayLayoutToolbar.js
View File

@ -20,30 +20,20 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
define(['lodash'], function (_) {
function DisplayLayoutToolbar(openmct) {
return {
name: 'Display Layout Toolbar',
key: 'layout',
description: 'A toolbar for objects inside a display layout.',
forSelection: function (selection) {
if (!selection || selection.length === 0) {
return false;
}
import _ from 'lodash';
let selectionPath = selection[0];
let selectedObject = selectionPath[0];
let selectedParent = selectionPath[1];
const CONTEXT_ACTION = 'contextAction';
const CONTEXT_ACTIONS = Object.freeze({
ADD_ELEMENT: 'addElement',
REMOVE_ITEM: 'removeItem',
DUPLICATE_ITEM: 'duplicateItem',
ORDER_ITEM: 'orderItem',
SWITCH_VIEW_TYPE: 'switchViewType',
MERGE_MULTIPLE_TELEMETRY_VIEWS: 'mergeMultipleTelemetryViews',
MERGE_MULTIPLE_OVERLAY_PLOTS: 'mergeMultipleOverlayPlots',
TOGGLE_GRID: 'toggleGrid'
});
// Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
return (
(selectedParent &&
selectedParent.context.item &&
selectedParent.context.item.type === 'layout') ||
(selectedObject.context.item && selectedObject.context.item.type === 'layout')
);
},
toolbar: function (selectedObjects) {
const DIALOG_FORM = {
text: {
title: 'Text Element Properties',
@ -129,11 +119,39 @@ define(['lodash'], function (_) {
'telemetry.plot.overlay-multi': [VIEW_TYPES['telemetry.plot.stacked']]
};
function getPath(selectionPath) {
export default class DisplayLayoutToolbar {
#openmct;
constructor(openmct) {
this.#openmct = openmct;
this.name = 'Display Layout Toolbar';
this.key = 'layout';
this.description = 'A toolbar for objects inside a display layout.';
}
forSelection(selection) {
if (!selection || selection.length === 0) {
return false;
}
let selectionPath = selection[0];
let selectedObject = selectionPath[0];
let selectedParent = selectionPath[1];
// Apply the layout toolbar if the selected object is inside a layout, or the main layout is selected.
return (
(selectedParent &&
selectedParent.context.item &&
selectedParent.context.item.type === 'layout') ||
(selectedObject.context.item && selectedObject.context.item.type === 'layout')
);
}
#getPath(selectionPath) {
return `configuration.items[${selectionPath[0].context.index}]`;
}
function getAllOfType(selection, specificType) {
#getAllOfType(selection, specificType) {
return selection.filter((selectionPath) => {
let type = selectionPath[0].context.layoutItem.type;
@ -141,7 +159,7 @@ define(['lodash'], function (_) {
});
}
function getAllTypes(selection) {
#getAllTypes(selection) {
return selection.filter((selectionPath) => {
let type = selectionPath[0].context.layoutItem.type;
@ -157,25 +175,32 @@ define(['lodash'], function (_) {
});
}
function getAddButton(selection, selectionPath) {
#getAddButton(selection, selectionPath) {
if (selection.length === 1) {
selectionPath = selectionPath || selection[0];
const domainObject = selectionPath[0].context.item;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'menu',
domainObject: selectionPath[0].context.item,
method: function (option) {
domainObject,
method: (option) => {
let name = option.name.toLowerCase();
let form = DIALOG_FORM[name];
if (form) {
showForm(form, name, selectionPath);
this.#showForm(form, name, selection);
} else {
openmct.objectViews.emit('contextAction', 'addElement', name);
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.ADD_ELEMENT,
name,
selection
);
}
},
key: 'add',
icon: 'icon-plus',
label: 'Add',
label: 'Add Drawing Object',
options: [
{
name: 'Box',
@ -202,15 +227,15 @@ define(['lodash'], function (_) {
}
}
function getToggleFrameButton(selectedParent, selection) {
#getToggleFrameButton(selectedParent, selection) {
return {
control: 'toggle-button',
domainObject: selectedParent,
applicableSelectedItems: selection.filter(
(selectionPath) => selectionPath[0].context.layoutItem.type === 'subobject-view'
),
property: function (selectionPath) {
return getPath(selectionPath) + '.hasFrame';
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.hasFrame';
},
options: [
{
@ -229,25 +254,28 @@ define(['lodash'], function (_) {
};
}
function getRemoveButton(selectedParent, selectionPath, selection) {
#getRemoveButton(selectedParent, selectionPath, selection) {
const domainObject = selectedParent;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'button',
domainObject: selectedParent,
domainObject,
icon: 'icon-trash',
title: 'Delete the selected object',
method: function () {
let prompt = openmct.overlays.dialog({
method: () => {
let prompt = this.#openmct.overlays.dialog({
iconClass: 'alert',
message: `Warning! This action will remove this item from the Display Layout. Do you want to continue?`,
buttons: [
{
label: 'OK',
emphasis: 'true',
callback: function () {
openmct.objectViews.emit(
'contextAction',
'removeItem',
getAllTypes(selection)
callback: () => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.REMOVE_ITEM,
this.#getAllTypes(selection),
selection
);
prompt.dismiss();
}
@ -264,10 +292,12 @@ define(['lodash'], function (_) {
};
}
function getStackOrder(selectedParent, selectionPath) {
#getStackOrder(selectedParent, selectionPath, selectedObjects) {
const domainObject = selectedParent;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'menu',
domainObject: selectedParent,
domainObject,
icon: 'icon-layers',
title: 'Move the selected object above or below other objects',
options: [
@ -292,26 +322,26 @@ define(['lodash'], function (_) {
class: 'icon-arrow-double-down'
}
],
method: function (option) {
openmct.objectViews.emit(
'contextAction',
'orderItem',
method: (option) => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.ORDER_ITEM,
option.value,
getAllTypes(selectedObjects)
this.#getAllTypes(selectedObjects)
);
}
};
}
function getXInput(selectedParent, selection) {
#getXInput(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
type: 'number',
domainObject: selectedParent,
applicableSelectedItems: getAllTypes(selection),
property: function (selectionPath) {
return getPath(selectionPath) + '.x';
applicableSelectedItems: this.#getAllTypes(selection),
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.x';
},
label: 'X:',
title: 'X position'
@ -319,15 +349,15 @@ define(['lodash'], function (_) {
}
}
function getYInput(selectedParent, selection) {
#getYInput(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
type: 'number',
domainObject: selectedParent,
applicableSelectedItems: getAllTypes(selection),
property: function (selectionPath) {
return getPath(selectionPath) + '.y';
applicableSelectedItems: this.#getAllTypes(selection),
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.y';
},
label: 'Y:',
title: 'Y position'
@ -335,15 +365,15 @@ define(['lodash'], function (_) {
}
}
function getWidthInput(selectedParent, selection) {
#getWidthInput(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
type: 'number',
domainObject: selectedParent,
applicableSelectedItems: getAllTypes(selection),
property: function (selectionPath) {
return getPath(selectionPath) + '.width';
applicableSelectedItems: this.#getAllTypes(selection),
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.width';
},
label: 'W:',
title: 'Resize object width'
@ -351,15 +381,15 @@ define(['lodash'], function (_) {
}
}
function getHeightInput(selectedParent, selection) {
#getHeightInput(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
type: 'number',
domainObject: selectedParent,
applicableSelectedItems: getAllTypes(selection),
property: function (selectionPath) {
return getPath(selectionPath) + '.height';
applicableSelectedItems: this.#getAllTypes(selection),
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.height';
},
label: 'H:',
title: 'Resize object height'
@ -367,7 +397,7 @@ define(['lodash'], function (_) {
}
}
function getX2Input(selectedParent, selection) {
#getX2Input(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
@ -376,8 +406,8 @@ define(['lodash'], function (_) {
applicableSelectedItems: selection.filter((selectionPath) => {
return selectionPath[0].context.layoutItem.type === 'line-view';
}),
property: function (selectionPath) {
return getPath(selectionPath) + '.x2';
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.x2';
},
label: 'X2:',
title: 'X2 position'
@ -385,7 +415,7 @@ define(['lodash'], function (_) {
}
}
function getY2Input(selectedParent, selection) {
#getY2Input(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'input',
@ -394,8 +424,8 @@ define(['lodash'], function (_) {
applicableSelectedItems: selection.filter((selectionPath) => {
return selectionPath[0].context.layoutItem.type === 'line-view';
}),
property: function (selectionPath) {
return getPath(selectionPath) + '.y2';
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.y2';
},
label: 'Y2:',
title: 'Y2 position'
@ -403,15 +433,15 @@ define(['lodash'], function (_) {
}
}
function getTextButton(selectedParent, selection) {
#getTextButton(selectedParent, selection) {
return {
control: 'button',
domainObject: selectedParent,
applicableSelectedItems: selection.filter((selectionPath) => {
return selectionPath[0].context.layoutItem.type === 'text-view';
}),
property: function (selectionPath) {
return getPath(selectionPath);
property: (selectionPath) => {
return this.#getPath(selectionPath);
},
icon: 'icon-pencil',
title: 'Edit text properties',
@ -420,7 +450,7 @@ define(['lodash'], function (_) {
};
}
function getTelemetryValueMenu(selectionPath, selection) {
#getTelemetryValueMenu(selectionPath, selection) {
if (selection.length === 1) {
return {
control: 'select-menu',
@ -428,11 +458,11 @@ define(['lodash'], function (_) {
applicableSelectedItems: selection.filter((path) => {
return path[0].context.layoutItem.type === 'telemetry-view';
}),
property: function (path) {
return getPath(path) + '.value';
property: (path) => {
return this.#getPath(path) + '.value';
},
title: 'Set value',
options: openmct.telemetry
options: this.#openmct.telemetry
.getMetadata(selectionPath[0].context.item)
.values()
.map((value) => {
@ -445,7 +475,7 @@ define(['lodash'], function (_) {
}
}
function getDisplayModeMenu(selectedParent, selection) {
#getDisplayModeMenu(selectedParent, selection) {
if (selection.length === 1) {
return {
control: 'select-menu',
@ -453,8 +483,8 @@ define(['lodash'], function (_) {
applicableSelectedItems: selection.filter((selectionPath) => {
return selectionPath[0].context.layoutItem.type === 'telemetry-view';
}),
property: function (selectionPath) {
return getPath(selectionPath) + '.displayMode';
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.displayMode';
},
title: 'Set display mode',
options: [
@ -475,19 +505,25 @@ define(['lodash'], function (_) {
}
}
function getDuplicateButton(selectedParent, selectionPath, selection) {
#getDuplicateButton(selectedParent, selectionPath, selection) {
const domainObject = selectedParent;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'button',
domainObject: selectedParent,
domainObject,
icon: 'icon-duplicate',
title: 'Duplicate the selected object',
method: function () {
openmct.objectViews.emit('contextAction', 'duplicateItem', selection);
method: () => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.DUPLICATE_ITEM,
selection
);
}
};
}
function getPropertyFromPath(object, path) {
#getPropertyFromPath(object, path) {
let splitPath = path.split('.');
let property = Object.assign({}, object);
@ -498,13 +534,13 @@ define(['lodash'], function (_) {
return property;
}
function areAllViews(type, path, selection) {
#areAllViews(type, path, selection) {
let allTelemetry = true;
selection.forEach((selectedItem) => {
let selectedItemContext = selectedItem[0].context;
if (getPropertyFromPath(selectedItemContext, path) !== type) {
if (this.#getPropertyFromPath(selectedItemContext, path) !== type) {
allTelemetry = false;
}
});
@ -512,9 +548,9 @@ define(['lodash'], function (_) {
return allTelemetry;
}
function getToggleUnitsButton(selectedParent, selection) {
let applicableItems = getAllOfType(selection, 'telemetry-view');
applicableItems = unitsOnly(applicableItems);
#getToggleUnitsButton(selectedParent, selection) {
let applicableItems = this.#getAllOfType(selection, 'telemetry-view');
applicableItems = this.#unitsOnly(applicableItems);
if (!applicableItems.length) {
return;
}
@ -523,8 +559,8 @@ define(['lodash'], function (_) {
control: 'toggle-button',
domainObject: selectedParent,
applicableSelectedItems: applicableItems,
property: function (selectionPath) {
return getPath(selectionPath) + '.showUnits';
property: (selectionPath) => {
return this.#getPath(selectionPath) + '.showUnits';
},
options: [
{
@ -543,10 +579,10 @@ define(['lodash'], function (_) {
};
}
function unitsOnly(items) {
#unitsOnly(items) {
let results = items.filter((item) => {
let currentItem = item[0];
let metadata = openmct.telemetry.getMetadata(currentItem.context.item);
let metadata = this.#openmct.telemetry.getMetadata(currentItem.context.item);
if (!metadata) {
return false;
}
@ -559,10 +595,8 @@ define(['lodash'], function (_) {
return results;
}
function getViewSwitcherMenu(selectedParent, selectionPath, selection) {
#getViewSwitcherMenu(selectedParent, selectionPath, selection) {
if (selection.length === 1) {
// eslint-disable-next-line no-unused-vars
let displayLayoutContext = selectionPath[1].context;
let selectedItemContext = selectionPath[0].context;
let selectedItemType = selectedItemContext.item.type;
@ -573,17 +607,19 @@ define(['lodash'], function (_) {
let viewOptions = APPLICABLE_VIEWS[selectedItemType];
if (viewOptions) {
const domainObject = selectedParent;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'menu',
domainObject: selectedParent,
domainObject,
icon: 'icon-object',
title: 'Switch the way this telemetry is displayed',
label: 'View type',
options: viewOptions,
method: function (option) {
openmct.objectViews.emit(
'contextAction',
'switchViewType',
method: (option) => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.SWITCH_VIEW_TYPE,
selectedItemContext,
option.value,
selection
@ -592,34 +628,36 @@ define(['lodash'], function (_) {
};
}
} else if (selection.length > 1) {
if (areAllViews('telemetry-view', 'layoutItem.type', selection)) {
const domainObject = selectedParent;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
if (this.#areAllViews('telemetry-view', 'layoutItem.type', selection)) {
return {
control: 'menu',
domainObject: selectedParent,
domainObject,
icon: 'icon-object',
title: 'Merge into a telemetry table or plot',
label: 'View type',
options: APPLICABLE_VIEWS['telemetry-view-multi'],
method: function (option) {
openmct.objectViews.emit(
'contextAction',
'mergeMultipleTelemetryViews',
method: (option) => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.MERGE_MULTIPLE_TELEMETRY_VIEWS,
selection,
option.value
);
}
};
} else if (areAllViews('telemetry.plot.overlay', 'item.type', selection)) {
} else if (this.#areAllViews('telemetry.plot.overlay', 'item.type', selection)) {
return {
control: 'menu',
domainObject: selectedParent,
domainObject,
icon: 'icon-object',
title: 'Merge into a stacked plot',
options: APPLICABLE_VIEWS['telemetry.plot.overlay-multi'],
method: function (option) {
openmct.objectViews.emit(
'contextAction',
'mergeMultipleOverlayPlots',
method: (option) => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.MERGE_MULTIPLE_OVERLAY_PLOTS,
selection,
option.value
);
@ -629,7 +667,7 @@ define(['lodash'], function (_) {
}
}
function getToggleGridButton(selection, selectionPath) {
#getToggleGridButton(selection, selectionPath) {
const ICON_GRID_SHOW = 'icon-grid-on';
const ICON_GRID_HIDE = 'icon-grid-off';
@ -641,12 +679,18 @@ define(['lodash'], function (_) {
displayLayoutContext = selectionPath[1].context;
}
const domainObject = displayLayoutContext.item;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
return {
control: 'button',
domainObject: displayLayoutContext.item,
domainObject,
icon: ICON_GRID_SHOW,
method: function () {
openmct.objectViews.emit('contextAction', 'toggleGrid');
method: () => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.TOGGLE_GRID
);
this.icon = this.icon === ICON_GRID_SHOW ? ICON_GRID_HIDE : ICON_GRID_SHOW;
},
@ -654,30 +698,37 @@ define(['lodash'], function (_) {
};
}
function getSeparator() {
#getSeparator() {
return {
control: 'separator'
};
}
function isMainLayoutSelected(selectionPath) {
#isMainLayoutSelected(selectionPath) {
let selectedObject = selectionPath[0].context.item;
return (
selectedObject &&
selectedObject.type === 'layout' &&
!selectionPath[0].context.layoutItem
selectedObject && selectedObject.type === 'layout' && !selectionPath[0].context.layoutItem
);
}
function showForm(formStructure, name, selectionPath) {
openmct.forms.showForm(formStructure).then((changes) => {
openmct.objectViews.emit('contextAction', 'addElement', name, changes);
#showForm(formStructure, name, selection) {
const domainObject = selection[0][0].context.item;
const keyString = this.#openmct.objects.makeKeyString(domainObject.identifier);
this.#openmct.forms.showForm(formStructure).then((changes) => {
this.#openmct.objectViews.emit(
`${CONTEXT_ACTION}:${keyString}`,
CONTEXT_ACTIONS.ADD_ELEMENT,
name,
changes,
selection
);
});
}
if (isMainLayoutSelected(selectedObjects[0])) {
return [getToggleGridButton(selectedObjects), getAddButton(selectedObjects)];
toolbar(selectedObjects) {
if (this.#isMainLayoutSelected(selectedObjects[0])) {
return [this.#getToggleGridButton(selectedObjects), this.#getAddButton(selectedObjects)];
}
let toolbar = {
@ -705,48 +756,47 @@ define(['lodash'], function (_) {
}
if (layoutItem.type === 'subobject-view') {
if (
toolbar['add-menu'].length === 0 &&
selectionPath[0].context.item.type === 'layout'
) {
toolbar['add-menu'] = [getAddButton(selectedObjects, selectionPath)];
if (toolbar['add-menu'].length === 0 && selectionPath[0].context.item.type === 'layout') {
toolbar['add-menu'] = [this.#getAddButton(selectedObjects, selectionPath)];
}
if (toolbar['toggle-frame'].length === 0) {
toolbar['toggle-frame'] = [getToggleFrameButton(selectedParent, selectedObjects)];
toolbar['toggle-frame'] = [this.#getToggleFrameButton(selectedParent, selectedObjects)];
}
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
getWidthInput(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getHeightInput(selectedParent, selectedObjects),
this.#getWidthInput(selectedParent, selectedObjects)
];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
if (toolbar.viewSwitcher.length === 0) {
toolbar.viewSwitcher = [
getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
this.#getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
];
}
} else if (layoutItem.type === 'telemetry-view') {
if (toolbar['display-mode'].length === 0) {
toolbar['display-mode'] = [getDisplayModeMenu(selectedParent, selectedObjects)];
toolbar['display-mode'] = [this.#getDisplayModeMenu(selectedParent, selectedObjects)];
}
if (toolbar['telemetry-value'].length === 0) {
toolbar['telemetry-value'] = [getTelemetryValueMenu(selectionPath, selectedObjects)];
toolbar['telemetry-value'] = [
this.#getTelemetryValueMenu(selectionPath, selectedObjects)
];
}
if (toolbar['unit-toggle'].length === 0) {
let toggleUnitsButton = getToggleUnitsButton(selectedParent, selectedObjects);
let toggleUnitsButton = this.#getToggleUnitsButton(selectedParent, selectedObjects);
if (toggleUnitsButton) {
toolbar['unit-toggle'] = [toggleUnitsButton];
}
@ -754,98 +804,98 @@ define(['lodash'], function (_) {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
getWidthInput(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getHeightInput(selectedParent, selectedObjects),
this.#getWidthInput(selectedParent, selectedObjects)
];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
if (toolbar.viewSwitcher.length === 0) {
toolbar.viewSwitcher = [
getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
this.#getViewSwitcherMenu(selectedParent, selectionPath, selectedObjects)
];
}
} else if (layoutItem.type === 'text-view') {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
getWidthInput(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getHeightInput(selectedParent, selectedObjects),
this.#getWidthInput(selectedParent, selectedObjects)
];
}
if (toolbar.text.length === 0) {
toolbar.text = [getTextButton(selectedParent, selectedObjects)];
toolbar.text = [this.#getTextButton(selectedParent, selectedObjects)];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
} else if (layoutItem.type === 'box-view' || layoutItem.type === 'ellipse-view') {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
getWidthInput(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getHeightInput(selectedParent, selectedObjects),
this.#getWidthInput(selectedParent, selectedObjects)
];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
} else if (layoutItem.type === 'image-view') {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getHeightInput(selectedParent, selectedObjects),
getWidthInput(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath, selectedObjects),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getHeightInput(selectedParent, selectedObjects),
this.#getWidthInput(selectedParent, selectedObjects)
];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
} else if (layoutItem.type === 'line-view') {
if (toolbar.position.length === 0) {
toolbar.position = [
getStackOrder(selectedParent, selectionPath),
getSeparator(),
getXInput(selectedParent, selectedObjects),
getYInput(selectedParent, selectedObjects),
getX2Input(selectedParent, selectedObjects),
getY2Input(selectedParent, selectedObjects)
this.#getStackOrder(selectedParent, selectionPath),
this.#getSeparator(),
this.#getXInput(selectedParent, selectedObjects),
this.#getYInput(selectedParent, selectedObjects),
this.#getX2Input(selectedParent, selectedObjects),
this.#getY2Input(selectedParent, selectedObjects)
];
}
if (toolbar.remove.length === 0) {
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
toolbar.remove = [this.#getRemoveButton(selectedParent, selectionPath, selectedObjects)];
}
}
if (toolbar.duplicate.length === 0) {
toolbar.duplicate = [
getDuplicateButton(selectedParent, selectionPath, selectedObjects)
this.#getDuplicateButton(selectedParent, selectionPath, selectedObjects)
];
}
if (toolbar['toggle-grid'].length === 0) {
toolbar['toggle-grid'] = [getToggleGridButton(selectedObjects, selectionPath)];
toolbar['toggle-grid'] = [this.#getToggleGridButton(selectedObjects, selectionPath)];
}
});
@ -859,7 +909,7 @@ define(['lodash'], function (_) {
accumulator.push(group);
if (index < toolbarArray.length - 1) {
accumulator.push(getSeparator());
accumulator.push(this.#getSeparator());
}
}
@ -867,8 +917,4 @@ define(['lodash'], function (_) {
}, [])
);
}
};
}
return DisplayLayoutToolbar;
});

3
src/plugins/displayLayout/components/BoxView.vue
View File

@ -33,6 +33,9 @@
class="c-box-view u-style-receiver js-style-receiver"
:class="[styleClass]"
:style="style"
role="application"
aria-roledescription="draggable box"
aria-label="Box"
></div>
</template>
</layout-frame>

2
src/plugins/displayLayout/components/DisplayLayout.vue
View File

@ -36,6 +36,8 @@
:grid-size="gridSize"
:show-grid="showGrid"
:grid-dimensions="gridDimensions"
:aria-label="`${domainObject.name} Layout Grid`"
:aria-hidden="showGrid ? 'false' : 'true'"
/>
<div
v-if="shouldDisplayLayoutDimensions"

9
src/plugins/displayLayout/components/DisplayLayoutGrid.vue
View File

@ -20,7 +20,14 @@
at runtime from the About dialog for additional information.
-->
<template>
<div class="l-layout__grid-holder" :class="{ 'c-grid': showGrid }">
<div
class="l-layout__grid-holder"
:class="{ 'c-grid': showGrid }"
role="grid"
:aria-label="'Layout Grid'"
:aria-hidden="showGrid ? 'false' : 'true'"
:aria-live="showGrid ? 'polite' : 'off'"
>
<div
v-if="gridSize[0] >= 3"
class="c-grid__x l-grid l-grid-x"

3
src/plugins/displayLayout/components/EllipseView.vue
View File

@ -33,6 +33,9 @@
class="c-ellipse-view u-style-receiver js-style-receiver"
:class="[styleClass]"
:style="style"
role="application"
aria-roledescription="draggable ellipse"
aria-label="Ellipse"
></div>
</template>
</layout-frame>

14
src/plugins/displayLayout/components/LayoutFrame.vue
View File

@ -30,13 +30,18 @@
:style="style"
>
<slot name="content"></slot>
<div class="c-frame__move-bar" @mousedown.left="startMove($event)"></div>
<div
class="c-frame__move-bar"
:aria-label="`Move ${typeName} Frame`"
@mousedown.left="startMove($event)"
></div>
</div>
</template>
<script>
import _ from 'lodash';
import DRAWING_OBJECT_TYPES from '../DrawingObjectTypes';
import LayoutDrag from './../LayoutDrag';
export default {
@ -58,6 +63,13 @@ export default {
},
emits: ['move', 'end-move'],
computed: {
typeName() {
const { type } = this.item;
if (DRAWING_OBJECT_TYPES[type]) {
return DRAWING_OBJECT_TYPES[type].name;
}
return 'Sub-object';
},
size() {
let { width, height } = this.item;

9
src/plugins/displayLayout/components/LineView.vue
View File

@ -21,7 +21,14 @@
-->
<template>
<div class="l-layout__frame c-frame no-frame c-line-view" :class="[styleClass]" :style="style">
<div
class="l-layout__frame c-frame no-frame c-line-view"
:class="[styleClass]"
:style="style"
aria-role="application"
aria-roledescription="draggable line"
aria-label="Line"
>
<svg width="100%" height="100%">
<line
v-bind="linePosition"

3
src/plugins/displayLayout/components/TextView.vue
View File

@ -35,6 +35,9 @@
:data-font="item.font"
:class="[styleClass]"
:style="style"
role="application"
aria-roledescription="draggable text"
aria-label="Text"
>
<div class="c-text-view__text">{{ item.text }}</div>
</div>

7
src/plugins/displayLayout/plugin.js
View File

@ -85,10 +85,9 @@ class DisplayLayoutView {
};
}
contextAction() {
const action = arguments[0];
if (this.component && this.component.$refs.displayLayout[action]) {
this.component.$refs.displayLayout[action](...Array.from(arguments).splice(1));
contextAction(action, ...rest) {
if (this?.component.$refs.displayLayout[action]) {
this.component.$refs.displayLayout[action](...rest);
}
}

7
src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
View File

@ -81,10 +81,9 @@ export default class FlexibleLayoutViewProvider {
type: 'flexible-layout'
};
},
contextAction() {
const action = arguments[0];
if (component && component.$refs.flexibleLayout[action]) {
component.$refs.flexibleLayout[action](...Array.from(arguments).splice(1));
contextAction(action, ...args) {
if (component?.$refs?.flexibleLayout?.[action]) {
component.$refs.flexibleLayout[action](...args);
}
},
onEditModeChange(isEditing) {

28
src/plugins/flexibleLayout/toolbarProvider.js
View File

@ -84,7 +84,8 @@ function ToolbarProvider(openmct) {
let containerIndex = containers.indexOf(container);
let frame = container && container.frames.filter((f) => f.id === frameId)[0];
let frameIndex = container && container.frames.indexOf(frame);
const primaryKeyString = openmct.objects.makeKeyString(primary.context.item.identifier);
const tertiaryKeyString = openmct.objects.makeKeyString(tertiary.context.item.identifier);
deleteFrame = {
control: 'button',
domainObject: primary.context.item,
@ -98,7 +99,7 @@ function ToolbarProvider(openmct) {
emphasis: 'true',
callback: function () {
openmct.objectViews.emit(
'contextAction',
`contextAction:${primaryKeyString}`,
'deleteFrame',
primary.context.frameId
);
@ -135,11 +136,12 @@ function ToolbarProvider(openmct) {
}
]
};
addContainer = {
control: 'button',
domainObject: tertiary.context.item,
method: function () {
openmct.objectViews.emit('contextAction', 'addContainer', ...arguments);
method: function (...args) {
openmct.objectViews.emit(`contextAction:${tertiaryKeyString}`, 'addContainer', ...args);
},
key: 'add',
icon: 'icon-plus-in-rect',
@ -185,11 +187,14 @@ function ToolbarProvider(openmct) {
title: 'Remove Container'
};
const domainObject = secondary.context.item;
const keyString = openmct.objects.makeKeyString(domainObject.identifier);
addContainer = {
control: 'button',
domainObject: secondary.context.item,
method: function () {
openmct.objectViews.emit('contextAction', 'addContainer', ...arguments);
domainObject,
method: function (...args) {
openmct.objectViews.emit(`contextAction:${keyString}`, 'addContainer', ...args);
},
key: 'add',
icon: 'icon-plus-in-rect',
@ -200,11 +205,14 @@ function ToolbarProvider(openmct) {
return [];
}
const domainObject = primary.context.item;
const keyString = openmct.objects.makeKeyString(domainObject.identifier);
addContainer = {
control: 'button',
domainObject: primary.context.item,
method: function () {
openmct.objectViews.emit('contextAction', 'addContainer', ...arguments);
domainObject,
method: function (...args) {
openmct.objectViews.emit(`contextAction:${keyString}`, 'addContainer', ...args);
},
key: 'add',
icon: 'icon-plus-in-rect',

18
src/ui/components/ObjectView.vue
View File

@ -34,9 +34,6 @@ import { STYLE_CONSTANTS } from '@/plugins/condition/utils/constants';
import stalenessMixin from '@/ui/mixins/staleness-mixin';
export default {
components: {
// IndependentTimeConductor
},
mixins: [stalenessMixin],
inject: ['openmct'],
props: {
@ -181,7 +178,9 @@ export default {
this.triggerUnsubscribeFromStaleness(this.domainObject);
this.openmct.objectViews.off('clearData', this.clearData);
this.openmct.objectViews.off('contextAction', this.performContextAction);
if (this.contextActionEvent) {
this.openmct.objectViews.off(this.contextActionEvent, this.performContextAction);
}
},
getStyleReceiver() {
let styleReceiver;
@ -301,8 +300,11 @@ export default {
);
}
this.contextActionEvent = `contextAction:${this.openmct.objects.makeKeyString(
this.domainObject.identifier
)}`;
this.openmct.objectViews.on('clearData', this.clearData);
this.openmct.objectViews.on('contextAction', this.performContextAction);
this.openmct.objectViews.on(this.contextActionEvent, this.performContextAction);
this.$nextTick(() => {
this.updateStyle(this.styleRuleManager?.currentStyle);
@ -473,9 +475,9 @@ export default {
}
}
},
performContextAction() {
if (this.currentView.contextAction) {
this.currentView.contextAction(...arguments);
performContextAction(...args) {
if (this?.currentView?.contextAction) {
this.currentView.contextAction(...args);
}
},
isEditingAllowed() {

6
src/ui/toolbar/components/ToolbarMenu.vue
View File

@ -31,15 +31,19 @@
{{ options.label }}
</div>
</div>
<div v-if="open" class="c-menu">
<div v-if="open" class="c-menu" role="menu">
<ul>
<li
v-for="(option, index) in options.options"
:key="index"
:class="option.class"
role="menuitem"
:aria-labelledby="`${option.name}-menuitem-label`"
@click="onClick(option)"
>
<span :id="`${option.name}-menuitem-label`">
{{ option.name }}
</span>
</li>
</ul>
</div>