ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-18 15:18:12 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

View Large overlay doesn't allow taking Snapshots (#4091)

Browse Source 
* Added NotebookMenuSwitcher in preview header
* Use preview component inside viewLargeAction
* Added autoHide flag to overlay API that allows developers to specify whether an overlay should remain visible if other overlays are subsequently triggered (eg. the snapshot overlay)
* When in edit mode, disable navigation link to notebook entry.

Co-authored-by: Andrew Henry <akhenry@gmail.com>
This commit is contained in:
Nikhil
2021-09-13 17:36:14 -07:00
committed by GitHub
parent d7c9c9cb98
commit 1226459c6f
16 changed files with 146 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/plugins/condition/components/inspector/ConditionalStylesView.vue
View File

@ -273,10 +273,7 @@ export default {
this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
(objectPath) => {
this.objectPath = objectPath;
this.navigateToPath = '#/browse/' + this.objectPath
.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
.reverse()
.join('/');
this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
}
);
},

5
src/plugins/condition/components/inspector/StylesView.vue
View File

@ -297,10 +297,7 @@ export default {
this.openmct.objects.getOriginalPath(this.conditionSetDomainObject.identifier).then(
(objectPath) => {
this.objectPath = objectPath;
this.navigateToPath = '#/browse/' + this.objectPath
.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
.reverse()
.join('/');
this.navigateToPath = '#/browse/' + this.openmct.objects.getRelativePath(this.objectPath);
}
);
},

7
src/plugins/notebook/components/Notebook.vue
View File

@ -456,12 +456,9 @@ export default {
: undefined;
},
getDefaultNotebookObject() {
const oldNotebookStorage = getDefaultNotebook();
if (!oldNotebookStorage) {
return null;
}
const defaultNotebook = getDefaultNotebook();
return this.openmct.objects.get(oldNotebookStorage.identifier);
return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
},
getLinktoNotebook() {
const objectPath = this.openmct.router.path;

79
src/plugins/notebook/components/NotebookMenuSwitcher.vue
View File

@ -17,19 +17,26 @@
<script>
import Snapshot from '../snapshot';
import { getDefaultNotebook, getNotebookSectionAndPage, validateNotebookStorageObject } from '../utils/notebook-storage';
import { getDefaultNotebook, validateNotebookStorageObject } from '../utils/notebook-storage';
import { NOTEBOOK_DEFAULT, NOTEBOOK_SNAPSHOT } from '../notebook-constants';
import { getMenuItems } from '../utils/notebook-snapshot-menu';
export default {
inject: ['openmct'],
props: {
currentView: {
type: Object,
default() {
return {};
}
},
domainObject: {
type: Object,
default() {
return {};
}
},
ignoreLink: {
isPreview: {
type: Boolean,
default() {
return false;
@ -50,51 +57,40 @@ export default {
},
mounted() {
validateNotebookStorageObject();
this.getDefaultNotebookObject();
this.notebookSnapshot = new Snapshot(this.openmct);
this.setDefaultNotebookStatus();
},
methods: {
getDefaultNotebookObject() {
const defaultNotebook = getDefaultNotebook();
getPreviewObjectLink() {
const relativePath = this.openmct.objects.getRelativePath(this.objectPath);
const urlParams = this.openmct.router.getParams();
urlParams.view = this.currentView.key;
return defaultNotebook && this.openmct.objects.get(defaultNotebook.identifier);
const urlParamsString = Object.entries(urlParams)
.map(([key, value]) => `${key}=${value}`)
.join('&');
return `#/browse/${relativePath}?${urlParamsString}`;
},
async showMenu(event) {
const notebookTypes = [];
const menuItemOptions = {
default: {
cssClass: 'icon-notebook',
name: `Save to Notebook`,
onItemClicked: () => this.snapshot(NOTEBOOK_DEFAULT, event.target)
},
snapshot: {
cssClass: 'icon-camera',
name: 'Save to Notebook Snapshots',
onItemClicked: () => this.snapshot(NOTEBOOK_SNAPSHOT, event.target)
}
};
const notebookTypes = await getMenuItems(this.openmct, menuItemOptions);
const elementBoundingClientRect = this.$el.getBoundingClientRect();
const x = elementBoundingClientRect.x;
const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
const defaultNotebookObject = await this.getDefaultNotebookObject();
if (defaultNotebookObject) {
const defaultNotebook = getDefaultNotebook();
const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
if (section && page) {
const name = defaultNotebookObject.name;
const sectionName = section.name;
const pageName = page.name;
const defaultPath = `${name} - ${sectionName} - ${pageName}`;
notebookTypes.push({
cssClass: 'icon-notebook',
name: `Save to Notebook ${defaultPath}`,
onItemClicked: () => {
return this.snapshot(NOTEBOOK_DEFAULT, event.target);
}
});
}
}
notebookTypes.push({
cssClass: 'icon-camera',
name: 'Save to Notebook Snapshots',
onItemClicked: () => {
return this.snapshot(NOTEBOOK_SNAPSHOT, event.target);
}
});
this.openmct.menus.showMenu(x, y, notebookTypes);
},
snapshot(notebookType, target) {
@ -102,15 +98,12 @@ export default {
const wrapper = target && target.closest('.js-notebook-snapshot-item-wrapper')
|| document;
const element = wrapper.querySelector('.js-notebook-snapshot-item');
const bounds = this.openmct.time.bounds();
const link = !this.ignoreLink
? window.location.hash
: null;
const objectPath = this.objectPath || this.openmct.router.path;
const link = this.isPreview
? this.getPreviewObjectLink()
: window.location.hash;
const snapshotMeta = {
bounds,
bounds: this.openmct.time.bounds(),
link,
objectPath,
openmct: this.openmct

11
src/plugins/notebook/snapshot.js
View File

@ -90,13 +90,16 @@ export default class Snapshot {
_showNotification(msg, url) {
const options = {
autoDismissTimeout: 30000,
link: {
autoDismissTimeout: 30000
};
if (!this.openmct.editor.isEditing()) {
options.link = {
cssClass: '',
text: 'click to view',
onClick: this._navigateToNotebook(url)
}
};
};
}
this.openmct.notifications.info(msg, options);
}

31
src/plugins/notebook/utils/notebook-snapshot-menu.js Normal file
View File

@ -0,0 +1,31 @@
import { getDefaultNotebook, getNotebookSectionAndPage } from './notebook-storage';
export async function getMenuItems(openmct, menuItemOptions) {
const notebookTypes = [];
const defaultNotebook = getDefaultNotebook();
const defaultNotebookObject = defaultNotebook && await openmct.objects.get(defaultNotebook.identifier);
if (defaultNotebookObject) {
const { section, page } = getNotebookSectionAndPage(defaultNotebookObject, defaultNotebook.defaultSectionId, defaultNotebook.defaultPageId);
if (section && page) {
const name = defaultNotebookObject.name;
const sectionName = section.name;
const pageName = page.name;
const defaultPath = `${name} - ${sectionName} - ${pageName}`;
notebookTypes.push({
cssClass: menuItemOptions.default.cssClass,
name: `${menuItemOptions.default.name} ${defaultPath}`,
onItemClicked: menuItemOptions.default.onItemClicked
});
}
}
notebookTypes.push({
cssClass: menuItemOptions.snapshot.cssClass,
name: menuItemOptions.snapshot.name,
onItemClicked: menuItemOptions.snapshot.onItemClicked
});
return notebookTypes;
}

6
src/plugins/notebook/utils/notebook-storage.js
View File

@ -71,11 +71,7 @@ export async function getDefaultNotebookLink(openmct, domainObject = null) {
}
const path = await openmct.objects.getOriginalPath(domainObject.identifier)
.then(objectPath => objectPath
.map(o => o && openmct.objects.makeKeyString(o.identifier))
.reverse()
.join('/')
);
.then(openmct.objects.getRelativePath);
const { defaultPageId, defaultSectionId } = getDefaultNotebook();
return `#/browse/${path}?sectionId=${defaultSectionId}&pageId=${defaultPageId}`;

38
src/plugins/viewLargeAction/viewLargeAction.js
View File

@ -20,7 +20,7 @@
* at runtime from the About dialog for additional information.
*****************************************************************************/
import PreviewHeader from '@/ui/preview/preview-header.vue';
import Preview from '@/ui/preview/Preview.vue';
import Vue from 'vue';
@ -46,7 +46,7 @@ export default class ViewLargeAction {
throw new Error(message);
}
this._expand(objectPath, childElement, view);
this._expand(objectPath, childElement);
}
appliesTo(objectPath, view = {}) {
@ -58,49 +58,29 @@ export default class ViewLargeAction {
return viewLargeAction;
}
_expand(objectPath, childElement, view) {
_expand(objectPath, childElement) {
const parentElement = childElement.parentElement;
this.overlay = this.openmct.overlays.overlay({
element: this._getOverlayElement(objectPath, childElement, view),
element: this._getPreview(objectPath),
size: 'large',
autoHide: false,
onDestroy() {
parentElement.append(childElement);
}
});
}
_getOverlayElement(objectPath, childElement, view) {
const fragment = new DocumentFragment();
const header = this._getPreviewHeader(objectPath, view);
fragment.append(header);
const wrapper = document.createElement('div');
wrapper.classList.add('l-preview-window__object-view');
wrapper.append(childElement);
fragment.append(wrapper);
return fragment;
}
_getPreviewHeader(objectPath, view) {
const domainObject = objectPath[0];
const actionCollection = this.openmct.actions.getActionsCollection(objectPath, view);
_getPreview(objectPath) {
const preview = new Vue({
components: {
PreviewHeader
Preview
},
provide: {
openmct: this.openmct,
objectPath: this.objectPath
objectPath
},
data() {
return {
domainObject,
actionCollection
};
},
template: '<PreviewHeader :actionCollection="actionCollection" :domainObject="domainObject" :hideViewSwitcher="true" :showNotebookMenuSwitcher="true"></PreviewHeader>'
template: '<Preview></Preview>'
});
return preview.$mount().$el;