Add zoom button

frontend/components/tasks/toolbar/buttons/ButtonZoom.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-btn-toggle mandatory>
+    <v-tooltip bottom>
+      <template #activator="{ on }">
+        <v-btn icon @click="$emit('zoom-out')" v-on="on">
+          <v-icon>{{ mdiMagnifyMinusOutline }}</v-icon>
+        </v-btn>
+      </template>
+      <span>Zoom Out</span>
+    </v-tooltip>
+    <v-tooltip bottom>
+      <template #activator="{ on }" v-on="on">
+        <v-btn icon @click="$emit('zoom-in')">
+          <v-icon>{{ mdiMagnifyPlusOutline }}</v-icon>
+        </v-btn>
+      </template>
+      <span>Zoom In</span>
+    </v-tooltip>
+  </v-btn-toggle>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { mdiMagnifyPlusOutline, mdiMagnifyMinusOutline } from '@mdi/js'
+export default Vue.extend({
+  data() {
+    return {
+      mdiMagnifyPlusOutline,
+      mdiMagnifyMinusOutline
+    }
+  }
+})
+</script>

frontend/pages/projects/_id/object-detection/index.vue

@@ -11,14 +11,7 @@
         @click:clear-label="clear"
         @click:review="confirm"
       >
-        <v-btn-toggle v-model="labelOption" mandatory class="ms-2">
-          <v-btn icon>
-            <v-icon>{{ mdiFormatListBulleted }}</v-icon>
-          </v-btn>
-          <v-btn icon>
-            <v-icon>{{ mdiText }}</v-icon>
-          </v-btn>
-        </v-btn-toggle>
+        <button-zoom class="ms-2" @zoom-in="zoomIn" @zoom-out="zoomOut" />
       </toolbar-laptop>
       <toolbar-mobile :total="images.count" class="d-flex d-sm-none" />
     </template>
@@ -89,10 +82,12 @@ import { useLabelList } from '@/composables/useLabelList'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import VBoundingBox from '@/components/tasks/boundingBox/VBoundingBox.vue'
 import RegionList from '@/components/tasks/image/RegionList.vue'
+import ButtonZoom from '@/components/tasks/toolbar/buttons/ButtonZoom.vue'
 
 export default {
   components: {
     AnnotationProgress,
+    ButtonZoom,
     LayoutText,
     ListMetadata,
     RegionList,
@@ -123,7 +118,6 @@ export default {
       images: [],
       project: {},
       enableAutoLabeling: false,
-      labelOption: 0,
       mdiText,
       mdiFormatListBulleted,
       progress: {},
@@ -308,6 +302,14 @@ export default {
 
     updateScale(scale) {
       this.scale = scale
+    },
+
+    zoomOut() {
+      this.scale -= 0.1
+    },
+
+    zoomIn() {
+      this.scale += 0.1
     }
   }
 }

frontend/pages/projects/_id/segmentation/index.vue

@@ -11,14 +11,7 @@
         @click:clear-label="clear"
         @click:review="confirm"
       >
-        <v-btn-toggle v-model="labelOption" mandatory class="ms-2">
-          <v-btn icon>
-            <v-icon>{{ mdiFormatListBulleted }}</v-icon>
-          </v-btn>
-          <v-btn icon>
-            <v-icon>{{ mdiText }}</v-icon>
-          </v-btn>
-        </v-btn-toggle>
+        <button-zoom class="ms-2" @zoom-in="zoomIn" @zoom-out="zoomOut" />
       </toolbar-laptop>
       <toolbar-mobile :total="images.count" class="d-flex d-sm-none" />
     </template>
@@ -89,10 +82,12 @@ import { useLabelList } from '@/composables/useLabelList'
 import AnnotationProgress from '@/components/tasks/sidebar/AnnotationProgress.vue'
 import VSegmentation from '@/components/tasks/segmentation/VSegmentation.vue'
 import RegionList from '@/components/tasks/image/RegionList.vue'
+import ButtonZoom from '@/components/tasks/toolbar/buttons/ButtonZoom.vue'
 
 export default {
   components: {
     AnnotationProgress,
+    ButtonZoom,
     LayoutText,
     ListMetadata,
     RegionList,
@@ -310,6 +305,14 @@ export default {
 
     updateScale(scale) {
       this.scale = scale
+    },
+
+    zoomOut() {
+      this.scale -= 0.1
+    },
+
+    zoomIn() {
+      this.scale += 0.1
     }
   }
 }