[Notebook] Create Snapshot directly from any frame in a layout #3300snapshot-from-frame

6 files changed, 34 insertions, 29 deletions

diff --git a/src/plugins/displayLayout/components/LayoutFrame.vue b/src/plugins/displayLayout/components/LayoutFrame.vue
index 0e43b7591..5b074ae05 100644
--- a/src/plugins/displayLayout/components/LayoutFrame.vue
+++ b/src/plugins/displayLayout/components/LayoutFrame.vue
@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="l-layout__frame c-frame"
+    class="l-layout__frame c-frame js-snapshot-frame"
     :class="{
         'no-frame': !item.hasFrame,
         'u-inspectable': inspectable,
diff --git a/src/plugins/flexibleLayout/components/container.vue b/src/plugins/flexibleLayout/components/container.vue
index a1216c3d9..18c0c88cd 100644
--- a/src/plugins/flexibleLayout/components/container.vue
+++ b/src/plugins/flexibleLayout/components/container.vue
@@ -22,7 +22,7 @@
 
 <template>
 <div
-    class="c-fl-container"
+    class="c-fl-container js-snapshot-frame"
     :style="[{'flex-basis': sizeString}]"
     :class="{'is-empty': !frames.length}"
 >
diff --git a/src/plugins/notebook/components/NotebookMenuSwitcher.vue b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
index 094cb1d2b..1e46f26e8 100644
--- a/src/plugins/notebook/components/NotebookMenuSwitcher.vue
+++ b/src/plugins/notebook/components/NotebookMenuSwitcher.vue
@@ -44,8 +44,7 @@ export default {
     },
     data() {
         return {
-            notebookSnapshot: null,
-            notebookTypes: []
+            notebookSnapshot: null
         };
     },
     mounted() {
@@ -55,40 +54,38 @@ export default {
         showMenu(event) {
             const notebookTypes = [];
             const defaultNotebook = getDefaultNotebook();
-            const elementBoundingClientRect = this.$el.getBoundingClientRect();
-            const x = elementBoundingClientRect.x;
-            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
 
             if (defaultNotebook) {
-                const domainObject = defaultNotebook.domainObject;
+                const name = defaultNotebook.notebookMeta.name;
+                const sectionName = defaultNotebook.section.name;
+                const pageName = defaultNotebook.page.name;
+                const defaultPath = `${name} - ${sectionName} - ${pageName}`;
 
-                if (domainObject.location) {
-                    const defaultPath = `${domainObject.name} - ${defaultNotebook.section.name} - ${defaultNotebook.page.name}`;
-
-                    notebookTypes.push({
-                        cssClass: 'icon-notebook',
-                        name: `Save to Notebook ${defaultPath}`,
-                        callBack: () => {
-                            return this.snapshot(NOTEBOOK_DEFAULT);
-                        }
-                    });
-                }
+                notebookTypes.push({
+                    cssClass: 'icon-notebook',
+                    name: `Save to Notebook ${defaultPath}`,
+                    callBack: () => this.snapshot(NOTEBOOK_DEFAULT, event.target)
+                });
             }
 
             notebookTypes.push({
                 cssClass: 'icon-camera',
                 name: 'Save to Notebook Snapshots',
-                callBack: () => {
-                    return this.snapshot(NOTEBOOK_SNAPSHOT);
-                }
+                callBack: () => this.snapshot(NOTEBOOK_SNAPSHOT, event.target)
             });
 
+            const elementBoundingClientRect = this.$el.getBoundingClientRect();
+            const x = elementBoundingClientRect.x;
+            const y = elementBoundingClientRect.y + elementBoundingClientRect.height;
             this.openmct.menus.showMenu(x, y, notebookTypes);
         },
-        snapshot(notebook) {
+        snapshot(notebookType, target) {
             this.$nextTick(() => {
-                const element = document.querySelector('.c-overlay__contents')
-                    || document.getElementsByClassName('l-shell__main-container')[0];
+                let element = target.closest('.js-snapshot-frame') || target.querySelector('.js-snapshot-frame');
+                if (!element) {
+                    const container = target.closest('.js-snapshot-container');
+                    element = container.querySelector('.js-snapshot-frame');
+                }
 
                 const bounds = this.openmct.time.bounds();
                 const link = !this.ignoreLink
@@ -103,7 +100,7 @@ export default {
                     openmct: this.openmct
                 };
 
-                this.notebookSnapshot.capture(snapshotMeta, notebook.type, element);
+                this.notebookSnapshot.capture(snapshotMeta, notebookType, element);
             });
         }
     }
diff --git a/src/ui/components/ObjectFrame.vue b/src/ui/components/ObjectFrame.vue
index 30fe3e8b7..c63b051da 100644
--- a/src/ui/components/ObjectFrame.vue
+++ b/src/ui/components/ObjectFrame.vue
@@ -59,6 +59,11 @@
                 'has-complex-content': complexContent
             }"
         >
+            <NotebookMenuSwitcher v-if="notebookEnabled"
+                                  :domain-object="domainObject"
+                                  :object-path="objectPath"
+                                  class="c-notebook-snapshot-menubutton"
+            />
             <div class="c-so-view__frame-controls__btns">
                 <button
                     v-for="(item, index) in statusBarItems"
@@ -105,6 +110,7 @@
 <script>
 import ObjectView from './ObjectView.vue';
 import PreviewHeader from '@/ui/preview/preview-header.vue';
+import NotebookMenuSwitcher from '@/plugins/notebook/components/NotebookMenuSwitcher.vue';
 import Vue from 'vue';
 
 const SIMPLE_CONTENT_TYPES = [
@@ -118,7 +124,8 @@ const SIMPLE_CONTENT_TYPES = [
 export default {
     inject: ['openmct'],
     components: {
-        ObjectView
+        ObjectView,
+        NotebookMenuSwitcher
     },
     props: {
         domainObject: {
@@ -149,6 +156,7 @@ export default {
         return {
             cssClass,
             complexContent,
+            notebookEnabled: this.openmct.types.get('notebook'),
             viewProvider,
             statusBarItems
         };
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index 6c9fae34e..857cf435b 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -74,7 +74,7 @@
             />
             <object-view
                 ref="browseObject"
-                class="l-shell__main-container"
+                class="l-shell__main-container js-snapshot-frame"
                 data-selectable
                 :show-edit-view="true"
                 @change-provider="setProvider"
diff --git a/src/ui/layout/pane.vue b/src/ui/layout/pane.vue
index 8bd178dc5..d3925f43d 100644
--- a/src/ui/layout/pane.vue
+++ b/src/ui/layout/pane.vue
@@ -33,7 +33,7 @@
     >
         <span class="l-pane__expand-button__label">{{ label }}</span>
     </button>
-    <div class="l-pane__contents">
+    <div class="l-pane__contents js-snapshot-container">
         <slot></slot>
     </div>
 </div>