alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Embedding images in notebook entries (#7048)

Browse Source 
* initial drag drop, wip

* images work as snapshots, but need to disable navigate to actions

* embed image name

* works now with images, need to be refactor so can duplicate code for entries too

* works dropping on entries too

* handle remote images too

* add e2e test

* spelling

* address most PR comments
This commit is contained in:
Scott Bell
2023-09-18 19:56:49 +02:00
committed by GitHub
parent c7b5ecbd68
commit 541a022f36
8 changed files with 229 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/plugins/notebook/components/NotebookEmbed.vue
View File

@@ -27,13 +27,13 @@
@mouseleave="hideToolTip"
>
<div v-if="embed.snapshot" class="c-ne__embed__snap-thumb" @click="openSnapshot()">
<img :src="thumbnailImage" />
<img :src="thumbnailImage" :alt="`${embed.name} thumbnail`" />
</div>
<div class="c-ne__embed__info">
<div class="c-ne__embed__name">
<a class="c-ne__embed__link" :class="embed.cssClass" @click="navigateToItemInTime">{{
embed.name
}}</a>
<a class="c-ne__embed__link" :class="embed.cssClass" @click="navigateToItemInTime">
{{ embed.name }}
</a>
<button
class="c-ne__embed__actions c-icon-button icon-3-dots"
title="More options"
@@ -144,31 +144,33 @@ export default {
this.menuActions.splice(0, this.menuActions.length, viewSnapshot);
}
const navigateToItem = {
id: 'navigateToItem',
cssClass: this.embed.cssClass,
name: 'Navigate to Item',
description: 'Navigate to the item with the current time settings.',
onItemClicked: () => this.navigateToItem()
};
if (this.embed.domainObject) {
const navigateToItem = {
id: 'navigateToItem',
cssClass: this.embed.cssClass,
name: 'Navigate to Item',
description: 'Navigate to the item with the current time settings.',
onItemClicked: () => this.navigateToItem()
};
const navigateToItemInTime = {
id: 'navigateToItemInTime',
cssClass: this.embed.cssClass,
name: 'Navigate to Item in Time',
description: 'Navigate to the item in its time frame when captured.',
onItemClicked: () => this.navigateToItemInTime()
};
const navigateToItemInTime = {
id: 'navigateToItemInTime',
cssClass: this.embed.cssClass,
name: 'Navigate to Item in Time',
description: 'Navigate to the item in its time frame when captured.',
onItemClicked: () => this.navigateToItemInTime()
};
const quickView = {
id: 'quickView',
cssClass: 'icon-eye-open',
name: 'Quick View',
description: 'Full screen overlay view of the item.',
onItemClicked: () => this.previewEmbed()
};
const quickView = {
id: 'quickView',
cssClass: 'icon-eye-open',
name: 'Quick View',
description: 'Full screen overlay view of the item.',
onItemClicked: () => this.previewEmbed()
};
this.menuActions.push(...[quickView, navigateToItem, navigateToItemInTime]);
this.menuActions.push(...[quickView, navigateToItem, navigateToItemInTime]);
}
if (!this.isLocked) {
const removeEmbed = {
@@ -183,6 +185,9 @@ export default {
}
},
async setEmbedObjectPath() {
if (!this.embed.domainObject) {
return;
}
this.objectPath = await this.openmct.objects.getOriginalPath(
this.embed.domainObject.identifier
);
@@ -260,6 +265,11 @@ export default {
this.openmct.router.navigate(url);
},
navigateToItemInTime() {
if (!this.embed.historicLink) {
// no historic link available
return;
}
const hash = this.embed.historicLink;
const bounds = this.openmct.time.bounds();