diff --git a/src/api/Editor.js b/src/api/Editor.js index 3d1b98c48f..1520a4765c 100644 --- a/src/api/Editor.js +++ b/src/api/Editor.js @@ -39,6 +39,7 @@ export default class Editor extends EventEmitter { * Initiate an editing session. This will start a transaction during * which any persist operations will be deferred until either save() * or finish() are called. + * @private */ edit() { if (this.editing === true) { @@ -59,6 +60,8 @@ export default class Editor extends EventEmitter { /** * Save any unsaved changes from this editing session. This will * end the current transaction. + * + * @private */ save() { return this.getTransactionService().commit().then((result)=>{ @@ -72,6 +75,8 @@ export default class Editor extends EventEmitter { /** * End the currently active transaction and discard unsaved changes. + * + * @private */ cancel() { this.getTransactionService().cancel(); diff --git a/src/plugins/flexibleLayout/components/container.vue b/src/plugins/flexibleLayout/components/container.vue index 7ddda1c2fb..3bde1b235b 100644 --- a/src/plugins/flexibleLayout/components/container.vue +++ b/src/plugins/flexibleLayout/components/container.vue @@ -47,7 +47,8 @@ :key="frame.id" :frame="frame" :index="i" - :containerIndex="index"> + :containerIndex="index" + :isEditing="isEditing"> + @end-move="endFrameResizing" + :isEditing="isEditing"> @@ -77,14 +79,12 @@ import FrameComponent from './frame.vue'; import Frame from '../utils/frame'; import ResizeHandle from './resizeHandle.vue'; import DropHint from './dropHint.vue'; -import isEditingMixin from '../mixins/isEditing'; const MIN_FRAME_SIZE = 5; export default { inject:['openmct'], - props: ['container', 'index', 'rowsLayout'], - mixins: [isEditingMixin], + props: ['container', 'index', 'rowsLayout', 'isEditing'], components: { FrameComponent, ResizeHandle, diff --git a/src/plugins/flexibleLayout/components/flexibleLayout.vue b/src/plugins/flexibleLayout/components/flexibleLayout.vue index 560b555903..e300933820 100644 --- a/src/plugins/flexibleLayout/components/flexibleLayout.vue +++ b/src/plugins/flexibleLayout/components/flexibleLayout.vue @@ -54,6 +54,7 @@ :index="index" :container="container" :rowsLayout="rowsLayout" + :isEditing="isEditing" @move-frame="moveFrame" @new-frame="setFrameLocation" @persist="persist"> @@ -64,6 +65,7 @@ :key="index" :index="index" :orientation="rowsLayout ? 'vertical' : 'horizontal'" + :isEditing="isEditing" @init-move="startContainerResizing" @move="containerResizing" @end-move="endContainerResizing"> @@ -420,7 +422,6 @@ import Container from '../utils/container'; import Frame from '../utils/frame'; import ResizeHandle from './resizeHandle.vue'; import DropHint from './dropHint.vue'; -import isEditingMixin from '../mixins/isEditing'; const MIN_CONTAINER_SIZE = 5; @@ -465,7 +466,6 @@ function sizeToFill(items) { export default { inject: ['openmct', 'layoutObject'], - mixins: [isEditingMixin], components: { ContainerComponent, ResizeHandle, @@ -477,6 +477,9 @@ export default { newFrameLocation: [] } }, + props: { + isEditing: Boolean + }, computed: { layoutDirectionStr() { if (this.rowsLayout) { diff --git a/src/plugins/flexibleLayout/components/frame.vue b/src/plugins/flexibleLayout/components/frame.vue index 308b894c3d..bc381f9660 100644 --- a/src/plugins/flexibleLayout/components/frame.vue +++ b/src/plugins/flexibleLayout/components/frame.vue @@ -51,12 +51,10 @@ \ No newline at end of file diff --git a/src/plugins/telemetryTable/components/table.vue b/src/plugins/telemetryTable/components/table.vue index 69287978d5..922d872ab3 100644 --- a/src/plugins/telemetryTable/components/table.vue +++ b/src/plugins/telemetryTable/components/table.vue @@ -48,6 +48,7 @@ @resizeColumnEnd="updateConfiguredColumnWidths" :columnWidth="columnWidths[key]" :sortOptions="sortOptions" + :isEditing="isEditing" >{{title}} @@ -61,7 +62,9 @@ @dropTargetActive="dropTargetActive" @reorderColumn="reorderColumn" @resizeColumnEnd="updateConfiguredColumnWidths" - :columnWidth="columnWidths[key]"> + :columnWidth="columnWidths[key]" + :isEditing="isEditing" + > this.openmct.editor.off('isEditing', this.toggleEditView); + } else { + this.currentView = provider.view(this.currentObject, this.openmct.editor.isEditing()); + + if (this.currentView.onEditModeChange) { + this.openmct.editor.on('isEditing', this.invokeEditModeHandler); + this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.invokeEditModeHandler); + } + } + this.currentView.show(this.viewContainer, this.openmct.editor.isEditing()); if (immediatelySelect) { this.removeSelectable = openmct.selection.selectable( diff --git a/src/ui/preview/Preview.vue b/src/ui/preview/Preview.vue index 183179c399..86751c2e11 100644 --- a/src/ui/preview/Preview.vue +++ b/src/ui/preview/Preview.vue @@ -84,7 +84,7 @@ mounted() { let viewProvider = this.openmct.objectViews.get(this.domainObject)[0]; this.view = viewProvider.view(this.domainObject); - this.view.show(this.$refs.objectView); + this.view.show(this.$refs.objectView, false); }, destroy() { this.view.destroy(); diff --git a/src/ui/registries/ViewRegistry.js b/src/ui/registries/ViewRegistry.js index 480bb79867..3967e55360 100644 --- a/src/ui/registries/ViewRegistry.js +++ b/src/ui/registries/ViewRegistry.js @@ -120,6 +120,19 @@ define([], function () { * @memberof module:openmct.View# */ + /** + * Indicates whether or not the application is in edit mode. This supports + * views that have distinct visual and behavioral elements when the + * navigated object is being edited. + * + * For cases where a completely separate view is desired for editing purposes, + * see {@link openmct.ViewProvider#edit} + * + * @param {boolean} isEditing + * @method show + * @memberof module:openmct.View# + */ + /** * Release any resources associated with this view. * @@ -172,7 +185,15 @@ define([], function () { /** * An optional function that defines whether or not this view can be used to edit a given object. - * If not provided, will default to `false` and the view will not support editing. + * If not provided, will default to `false` and the view will not support editing. To support editing, + * return true from this function and then - + * * Return a {@link openmct.View} from the `view` function, using the `onEditModeChange` callback to + * add and remove editing elements from the view + * OR + * * Return a {@link openmct.View} from the `view` function defining a read-only view. + * AND + * * Define an {@link openmct.ViewProvider#Edit} function on the view provider that returns an + * editing-specific view. * * @method canEdit * @memberof module:openmct.ViewProvider# @@ -211,6 +232,19 @@ define([], function () { * @returns {module:openmct.View} a view of this domain object */ + /** + * Provide an edit-mode specific view of this object. + * + * If optionally specified, this function will be called when the application + * enters edit mode. This will cause the active non-edit mode view and its + * dom element to be destroyed. + * + * @method edit + * @memberof module:openmct.ViewProvider# + * @param {*} object the object to be edit + * @returns {module:openmct.View} an editable view of this domain object + */ + return ViewRegistry; });