Allow resetting zoom but clicking the current zoom percentage

phrasmotica · Apr 27, 2024 · 48c1f41 · 48c1f41
1 parent 657098a
commit 48c1f41
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/src/components/modals/BracketModal.vue b/src/components/modals/BracketModal.vue
@@ -22,6 +22,7 @@ const {
     isMaxZoom,
     zoomIn,
     zoomOut,
+    resetZoom,
     // BUG: zoom levels less than 1 do not play nicely, due to the
     // contain: 'outside' option on line 52. Try to find a workaround...
 } = useZoomLevel([1, 1.25, 1.5, 1.75, 2], 1)
@@ -92,9 +93,11 @@ const createPanzoom = () => {
                     :disabled="isMinZoom"
                     @click="() => zoomOut()" />
 
-                <div class="flex align-items-center justify-content-center border-1 border-round-md w-5rem font-bold text-xl">
-                    {{ currentPercentage }}&percnt;
-                </div>
+                <Button
+                    class="w-5rem text-xl p-0"
+                    :label="currentPercentage + '%'"
+                    severity="secondary"
+                    @click="() => resetZoom()" />
 
                 <Button
                     class="w-5rem"

diff --git a/src/composables/useZoomLevel.ts b/src/composables/useZoomLevel.ts
@@ -6,6 +6,7 @@ export const useZoomLevel = (zooms: number[], initialValue: number) => {
         state: currentLevel,
         next: zoomIn,
         prev: zoomOut,
+        go,
     } = useCycleList(zooms, { initialValue })
 
     const currentPercentage = computed(() => 100 * currentLevel.value)
@@ -16,6 +17,8 @@ export const useZoomLevel = (zooms: number[], initialValue: number) => {
     const isMinZoom = computed(() => currentLevel.value === minZoom.value)
     const isMaxZoom = computed(() => currentLevel.value === maxZoom.value)
 
+    const resetZoom = () => go(zooms.indexOf(initialValue))
+
     return {
         currentLevel,
         currentPercentage,
@@ -25,5 +28,6 @@ export const useZoomLevel = (zooms: number[], initialValue: number) => {
         isMaxZoom,
         zoomIn,
         zoomOut,
+        resetZoom,
     }
 }