[Notebook] Create Snapshot directly from any frame in a layout #3300 (#4099)

src/api/overlays/components/OverlayComponent.vue

@@ -12,7 +12,7 @@
         ></button>
         <div
             ref="element"
-            class="c-overlay__contents"
+            class="c-overlay__contents js-notebook-snapshot-item-wrapper"
             tabindex="0"
         ></div>
         <div

src/plugins/notebook/components/NotebookMenuSwitcher.vue

@@ -81,7 +81,7 @@ export default {
                         cssClass: 'icon-notebook',
                         name: `Save to Notebook ${defaultPath}`,
                         onItemClicked: () => {
-                            return this.snapshot(NOTEBOOK_DEFAULT);
+                            return this.snapshot(NOTEBOOK_DEFAULT, event.target);
                         }
                     });
                 }
@@ -91,16 +91,17 @@ export default {
                 cssClass: 'icon-camera',
                 name: 'Save to Notebook Snapshots',
                 onItemClicked: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT);
+                    return this.snapshot(NOTEBOOK_SNAPSHOT, event.target);
                 }
             });
 
             this.openmct.menus.showMenu(x, y, notebookTypes);
         },
-        snapshot(notebookType) {
+        snapshot(notebookType, target) {
             this.$nextTick(() => {
-                const element = document.querySelector('.c-overlay__contents')
+                const wrapper = target && target.closest('.js-notebook-snapshot-item-wrapper')
-                    || document.getElementsByClassName('l-shell__main-container')[0];
+                    || document;
+                const element = wrapper.querySelector('.js-notebook-snapshot-item');
 
                 const bounds = this.openmct.time.bounds();
                 const link = !this.ignoreLink

src/ui/components/ObjectFrame.vue

@@ -21,7 +21,7 @@
  *****************************************************************************/
 <template>
 <div
-    class="c-so-view"
+    class="c-so-view js-notebook-snapshot-item-wrapper"
     :class="[
         statusClass,
         'c-so-view--' + domainObject.type,
@@ -56,6 +56,11 @@
                 'has-complex-content': complexContent
             }"
         >
+            <NotebookMenuSwitcher v-if="notebookEnabled"
+                                  :domain-object="domainObject"
+                                  :object-path="objectPath"
+                                  class="c-notebook-snapshot-menubutton"
+            />
             <div v-if="statusBarItems.length > 0"
                  class="c-so-view__frame-controls__btns"
             >
@@ -80,7 +85,7 @@
 
     <object-view
         ref="objectView"
-        class="c-so-view__object-view js-object-view"
+        class="c-so-view__object-view js-object-view js-notebook-snapshot-item"
         :show-edit-view="showEditView"
         :object-path="objectPath"
         :layout-font-size="layoutFontSize"
@@ -92,6 +97,7 @@
 
 <script>
 import ObjectView from './ObjectView.vue';
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 
 const SIMPLE_CONTENT_TYPES = [
     'clock',
@@ -103,7 +109,8 @@ const SIMPLE_CONTENT_TYPES = [
 
 export default {
     components: {
-        ObjectView
+        ObjectView,
+        NotebookMenuSwitcher
     },
     inject: ['openmct'],
     props: {
@@ -139,6 +146,7 @@ export default {
         return {
             cssClass,
             complexContent,
+            notebookEnabled: this.openmct.types.get('notebook'),
             statusBarItems: [],
             status: ''
         };

src/ui/layout/Layout.vue

@@ -90,7 +90,7 @@
             />
             <object-view
                 ref="browseObject"
-                class="l-shell__main-container js-main-container"
+                class="l-shell__main-container js-main-container js-notebook-snapshot-item"
                 data-selectable
                 :show-edit-view="true"
                 @change-action-collection="setActionCollection"

src/ui/preview/Preview.vue

@@ -27,7 +27,7 @@
         :domain-object="domainObject"
         :views="views"
     />
-    <div class="l-preview-window__object-view">
+    <div class="l-preview-window__object-view js-notebook-snapshot-item">
         <div ref="objectView"></div>
     </div>
 </div>