✨ #152 Show only one thumbnail preview

src/App.vue

@@ -72,6 +72,7 @@
         <template v-if="annotationStore.hasVideo">
           <VideoLoaderV2 v-if="useV2"/>
           <VideoLoaderV1 v-else/>
+          <ActionThumbnailPreview v-if="preferenceStore.actions"/>
         </template>
         <router-view></router-view>
       </q-page>
@@ -99,6 +100,7 @@
 import { storeToRefs } from 'pinia'
 import { useQuasar } from 'quasar'
 import { computed } from 'vue'
+import ActionThumbnailPreview from '~/components/ActionThumbnailPreview.vue'
 import VideoLoaderV1 from '~/components/VideoLoaderV1.vue'
 import VideoLoaderV2 from '~/components/VideoLoaderV2.vue'
 import { useAnnotation } from '~/hooks/annotation.js'

src/components/ActionThumbnailPreview.vue

@@ -0,0 +1,47 @@
+<template>
+  <q-page-sticky
+      class="z-top"
+      v-if="mainStore.currentActionThumbnailSrc"
+      :offset="offset"
+  >
+    <div class="relative-position">
+      <img
+          class="shadow-1 rounded-borders"
+          :style="{'max-width': imgMaxWidth + 'px'}"
+          style="transition: max-width 0.1s;"
+          :src="mainStore.currentActionThumbnailSrc"
+          alt="thumbnail"
+          draggable="false"
+          v-touch-pan.prevent.mouse="handleMove"
+          @wheel.prevent="handleResize"
+      />
+      <q-btn
+          class="absolute-top-right text-black"
+          flat
+          icon="cancel"
+          @click="mainStore.currentActionThumbnailSrc = null"
+      ></q-btn>
+    </div>
+  </q-page-sticky>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useMainStore } from '~/store/index.js'
+
+const mainStore = useMainStore()
+
+// draggable
+const offset = ref([16, 16])
+const handleMove = event => {
+  offset.value = [
+    offset.value[0] - event.delta.x,
+    offset.value[1] - event.delta.y
+  ]
+}
+// resizable
+const imgMaxWidth = ref(400)
+const handleResize = event => {
+  imgMaxWidth.value += event.deltaY / -5
+}
+</script>

src/pages/annotation/ActionTable.vue

@@ -83,7 +83,11 @@
     </template>
     <template v-slot:body="props">
       <q-tr :class="{ 'bg-warning': props.row.end - props.row.start <= 0}">
-        <q-tooltip anchor="top middle" v-if="props.row.end - props.row.start <= 0">Duration should be greater than 0.</q-tooltip>
+        <q-tooltip
+            anchor="top middle"
+            v-if="props.row.end - props.row.start <= 0"
+        >Duration should be greater than 0.
+        </q-tooltip>
         <q-td auto-width>
           <q-input
               style="min-width: 100px;"
@@ -110,10 +114,13 @@
           {{ utils.toFixed2(props.row.end - props.row.start) }}
         </q-td>
         <q-td>
-          <ZoomImage
-              class="vertical-middle float-left q-pr-md"
+          <img
+              v-if="configurationStore.actionLabelData.find(label => label.id === props.row.action).thumbnail"
+              class="cursor-pointer rounded-borders vertical-middle float-left q-mr-md"
               style="height: 40px;"
-              :src="configurationStore.actionLabelData[props.row.action].thumbnail"
+              :src="configurationStore.actionLabelData.find(label => label.id === props.row.action).thumbnail"
+              @click="handleThumbnailPreview(configurationStore.actionLabelData.find(label => label.id === props.row.action).thumbnail)"
+              alt="thumbnail"
           />
           <q-select
               v-model="props.row.action"
@@ -200,14 +207,15 @@
 
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from 'vue'
-import ZoomImage from '~/components/ZoomImage.vue'
 import { ActionAnnotation } from '~/libs/annotationlib.js'
 import utils from '~/libs/utils.js'
 import { useAnnotationStore } from '~/store/annotation.js'
 import { useConfigurationStore } from '~/store/configuration.js'
+import { useMainStore } from '~/store/index.js'
 
 const annotationStore = useAnnotationStore()
 const configurationStore = useConfigurationStore()
+const mainStore = useMainStore()
 
 const columnList = [
   {
@@ -325,6 +333,9 @@ for (let action of configurationStore.actionLabelData) {
   }
   objectOptionMap.value[action.id] = objectOptionList
 }
+const handleThumbnailPreview = (src) => {
+  mainStore.currentActionThumbnailSrc = mainStore.currentActionThumbnailSrc === src ? null : src
+}
 const handleActionInput = (row) => {
   row.color = configurationStore.actionLabelData.find(label => label.id === row.action).color
   row.object = configurationStore.actionLabelData.find(label => label.id === row.action).objects[0]
@@ -339,7 +350,7 @@ const handleGoto = (row) => {
     annotationStore.rightCurrentFrame = utils.time2index(row.end)
   }
 }
-const handleSet = (row) =>{
+const handleSet = (row) => {
   row.start = utils.index2time(annotationStore.leftCurrentFrame)
   row.end = utils.index2time(annotationStore.rightCurrentFrame)
 }

src/pages/annotation/Annotation.vue

@@ -17,7 +17,7 @@
         <CanvasPanel position="right"/>
       </div>
     </div>
-    <ActionTable/>
+    <ActionTable v-if="preferenceStore.actions"/>
   </q-card>
 </template>
 

src/pages/configuration/components/TableBase.vue

@@ -66,10 +66,13 @@
             :key="props.row.field"
         >
           <q-td v-if="col.type === 'input'">
-            <ZoomImage
-                class="vertical-middle float-left"
+            <img
+                v-if="props.row.thumbnail"
+                class="vertical-middle float-left cursor-pointer rounded-borders float-left q-mr-md"
                 style="height: 40px;"
                 :src="props.row.thumbnail"
+                alt="thumbnail"
+                @click="handleThumbnailPreview(props.row.thumbnail)"
             />
             <q-input
                 input-class="text-center"
@@ -130,8 +133,8 @@
 <script setup>
 import { storeToRefs } from 'pinia'
 import { computed, defineAsyncComponent, ref } from 'vue'
-import ZoomImage from '~/components/ZoomImage.vue'
 import { useConfigurationStore } from '~/store/configuration.js'
+import { useMainStore } from '~/store/index.js'
 
 const TableEditor = defineAsyncComponent(() => import('~/pages/configuration/components/TableEditor.vue'))
 
@@ -162,7 +165,11 @@ defineEmits(['add', 'delete'])
 
 // Table
 const configurationStore = useConfigurationStore()
+const mainStore = useMainStore()
 const { [props.storeKey]: tableData } = storeToRefs(configurationStore)
+const handleThumbnailPreview = (src) => {
+  mainStore.currentActionThumbnailSrc = mainStore.currentActionThumbnailSrc === src ? null : src
+}
 
 // Edit
 const showEdit = ref(false)

src/router/index.js

@@ -1,4 +1,5 @@
-import { createRouter, createWebHashHistory  } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import { useMainStore } from '~/store/index.js'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -37,6 +38,7 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from) => {
+  useMainStore().currentActionThumbnailSrc = null
   if (to.path === from.path || Object.keys(to.query).length || !Object.keys(from.query).length) return true
   return { ...to, query: from.query }
 })

src/store/index.js

@@ -8,6 +8,7 @@ export const useMainStore = defineStore('main', {
     zoom: false,
     submitURL: null,
     isSaved: true,
-    videoFormat: null
+    videoFormat: null,
+    currentActionThumbnailSrc: null
   })
 })