Implement panning/zooming on the actual root table element inside the…

… KnockoutBracket component
phrasmotica · Apr 27, 2024 · f12709d · f12709d
1 parent 38cd683
commit f12709d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 22 deletions.
diff --git a/src/components/modals/BracketModal.vue b/src/components/modals/BracketModal.vue
@@ -5,7 +5,6 @@ import { useI18n } from "vue-i18n"
 
 import KnockoutBracket from "../play/KnockoutBracket.vue"
 
-import { useCursorGrab } from "@/composables/useCursorGrab"
 import { useZoomLevel } from "@/composables/useZoomLevel"
 
 const { t } = useI18n()
@@ -14,17 +13,18 @@ const visible = defineModel<boolean>("visible", {
     default: false,
 })
 
-const {
-    cursorClass,
-    setGrabbing,
-} = useCursorGrab()
-
 const {
     currentLevel,
     currentPercentage,
+    minZoom,
+    maxZoom,
+    isMinZoom,
+    isMaxZoom,
     zoomIn,
     zoomOut,
-} = useZoomLevel()
+    // 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)
 
 watch(currentLevel, () => {
     panzoom.value?.zoom(currentLevel.value, {
@@ -35,14 +35,22 @@ watch(currentLevel, () => {
 const panzoom = ref<PanzoomObject>()
 
 const createPanzoom = () => {
-    const elem = document.getElementById('bracketDiv')
-    if (!elem) {
+    const orgChartTable = document
+        .getElementById('bracketDiv')
+        ?.getElementsByTagName("table")[0]
+
+    if (!orgChartTable) {
         return
     }
 
-    panzoom.value = Panzoom(elem, {
-        minScale: 0.25,
-        maxScale: 2,
+    // matches empty org chart line cell at the bottom of the bracket
+    orgChartTable.style.paddingTop = "20px"
+
+    panzoom.value = Panzoom(orgChartTable, {
+        minScale: minZoom.value,
+        maxScale: maxZoom.value,
+        contain: 'outside',
+        cursor: 'grab',
     })
 }
 </script>
@@ -59,6 +67,7 @@ const createPanzoom = () => {
                 <Button
                     class="w-5rem"
                     icon="pi pi-search-minus"
+                    :disabled="isMinZoom"
                     @click="() => zoomOut()" />
 
                 <div class="flex align-items-center justify-content-center border-1 border-round-md w-5rem font-bold text-xl">
@@ -68,16 +77,12 @@ const createPanzoom = () => {
                 <Button
                     class="w-5rem"
                     icon="pi pi-search-plus"
+                    :disabled="isMaxZoom"
                     @click="() => zoomIn()" />
             </div>
         </template>
 
-        <div
-            id="bracketDiv"
-            :class="cursorClass"
-            @mousedown="setGrabbing(true)"
-            @mouseup="setGrabbing(false)"
-            @mouseleave="setGrabbing(false)">
+        <div id="bracketDiv">
             <KnockoutBracket />
         </div>
     </Dialog>

diff --git a/src/composables/useZoomLevel.ts b/src/composables/useZoomLevel.ts
@@ -1,20 +1,28 @@
 import { useCycleList } from "@vueuse/core"
 import { computed } from "vue"
 
-export const useZoomLevel = () => {
+export const useZoomLevel = (zooms: number[], initialValue: number) => {
     const {
         state: currentLevel,
         next: zoomIn,
         prev: zoomOut,
-    } = useCycleList([0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], {
-        initialValue: 1,
-    })
+    } = useCycleList(zooms, { initialValue })
 
     const currentPercentage = computed(() => 100 * currentLevel.value)
 
+    const minZoom = computed(() => Math.min(...zooms))
+    const maxZoom = computed(() => Math.max(...zooms))
+
+    const isMinZoom = computed(() => currentLevel.value === minZoom.value)
+    const isMaxZoom = computed(() => currentLevel.value === maxZoom.value)
+
     return {
         currentLevel,
         currentPercentage,
+        minZoom,
+        maxZoom,
+        isMinZoom,
+        isMaxZoom,
         zoomIn,
         zoomOut,
     }