From 1fd8d1c3931402da66e1926efc410341488aeb44 Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Fri, 3 Mar 2023 16:58:33 +0100
Subject: [PATCH 1/3] Automatically scale & pan on startup based on content
 size

---
 .../renderer/components/panzoom/Panzoom.vue   | 89 ++++++++++++++-----
 .../renderer/components/panzoom/panzoomFns.ts | 36 ++++++++
 2 files changed, 102 insertions(+), 23 deletions(-)
 create mode 100644 app/src/renderer/components/panzoom/panzoomFns.ts

diff --git a/app/src/renderer/components/panzoom/Panzoom.vue b/app/src/renderer/components/panzoom/Panzoom.vue
index c84c2797..994c2b62 100644
--- a/app/src/renderer/components/panzoom/Panzoom.vue
+++ b/app/src/renderer/components/panzoom/Panzoom.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="display: inline-block">
+  <div style="display: inline-block; width: 100%; height: 100%">
     <!-- We 'panzoom-exclude' to mark this as not relevant to Panzoom -->
     <!-- <PanzoomControls v-if="panzoomInstance" :instance="panzoomInstance" /> -->
     <div
@@ -10,13 +10,26 @@
         'dev-visual-debugger': showCanvasDebugger,
       }"
     >
+      <!-- For transform-origin: 50% 50% to work, this next element HAS to be display:block -->
       <div
         ref="innerPanArea"
-        :class="{
-          'dev-visual-debugger': showCanvasDebugger,
-        }"
+        style="
+          display: block;
+          position: relative;
+          height: 100%;
+          width: 100%;
+          overflow: visible;
+        "
       >
-        <slot />
+        <!-- Now we have the real panzoom content inside: -->
+        <div
+          class="panzoom-inner"
+          :class="{
+            'dev-visual-debugger': showCanvasDebugger,
+          }"
+        >
+          <slot />
+        </div>
       </div>
     </div>
   </div>
@@ -31,6 +44,9 @@ import PanzoomControls from './PanzoomControls.vue'
 import { useInteractionStore } from '~/store/interactions'
 import useEventHandler from '../Screens/useEventHandler'
 import { useDevStore } from '~/store/dev'
+import { isEqual } from 'lodash'
+import { start } from 'repl'
+import { initialPan } from './panzoomFns'
 // import { useEventListener } from '@vueuse/core'
 
 const interactions = useInteractionStore()
@@ -38,8 +54,7 @@ const devStore = useDevStore()
 const { state: userEventsState } = useEventHandler()
 
 // Store
-// const showCanvasDebugger = false // TODO: Migrate from Vuex -> Pinia
-const showCanvasDebugger = devStore.showCanvasDebugger
+const showCanvasDebugger = computed(() => devStore.showCanvasDebugger)
 const panzoomEnabled = computed(() => interactions.panzoomEnabled)
 const isInteracting = computed(() => interactions.isInteracting)
 
@@ -66,14 +81,24 @@ onMounted(async () => {
   const { $root } = getCurrentInstance()?.proxy
   if (!$root) console.warn('No Panzoom created')
 
+  // const startZoom = initialZoom()
+  const { x: startX } = initialPan()
+  const { y: startY } = initialPan()
+  const { zoom: startZoom } = initialPan()
+
   // Init Panzoom globally
   // We use the 'canvas' option to enable interactions on the parent DOM Node as well
   // Docs: https://github.com/timmywil/panzoom#canvas
   $root.$panzoom = Panzoom(innerPanArea.value, {
     canvas: true, // Allows parent to control child
     cursor: 'grab',
-    startScale: 1,
-    startX: 0,
+    // origin = transform-origin is the origin from which transforms are applied
+    // Default: 50% 50% https://github.com/timmywil/panzoom#origin
+    origin: '50% 50%',
+    startX: startX, // x
+    startY: startY, // y
+    // contain: false,
+    startScale: startZoom,
     handleStartEvent: (event: PointerEvent) => {
       // WARNING: Don't use preventDefault, as it will block other events
       // event.preventDefault()
@@ -99,14 +124,22 @@ onMounted(async () => {
   // Reference inside of this component
   panzoomInstance.value = $root.$panzoom
 
-  // Center Panzoom
-  // this.panzoomInstance.pan(
-  //   origX + (current.clientX - startClientX) / scale,
-  //   origY + (current.clientY - startClientY) / scale,
-  //   {
-  //     animate: false,
+  // TODO: Remove later; useful for debugging
+  // let zoom, pan
+  // setInterval(() => {
+  //   const newZoom = panzoomInstance.value?.getScale()
+  //   const newPan = panzoomInstance.value?.getPan()
+
+  //   const isNewZoom = zoom !== newZoom
+  //   const isNewPan = isEqual(pan, newPan) === false
+
+  //   if (isNewZoom) zoom = newZoom
+  //   if (isNewPan) pan = newPan
+
+  //   if (isNewPan || isNewZoom) {
+  //     console.log('Panzoom', { zoom, ...pan }, isNewZoom, isNewPan)
   //   }
-  // )
+  // }, 1000)
 
   // Enable event listeners
   enableEventListeners()
@@ -263,18 +296,20 @@ function fitToScreen() {
 
 <style lang="scss" scoped>
 .panzoom-container {
-  // position: absolute;
-  // overflow: hidden;
-  // outline: none;
+  position: relative !important;
   height: 100%;
   width: 100%;
-  position: relative;
-  // position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
 }
 
+.panzoom-inner {
+  position: relative; // Important
+  display: inline-block;
+  overflow: visible;
+}
+
 #parent {
   height: auto;
   width: auto;
@@ -318,14 +353,22 @@ function fitToScreen() {
   .dev-visual-debugger {
     // Vertical line
     &:before {
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      height: 100%;
       left: 50%;
-      border-left: 1px solid green;
+      border-left: 5px solid green;
     }
 
     // Horizonal line
     &:after {
+      position: absolute;
+      width: 100%;
+      z-index: 100;
+      height: 100%;
       top: 50%;
-      border-top: 1px solid green;
+      border-top: 5px solid green;
     }
   }
 }
diff --git a/app/src/renderer/components/panzoom/panzoomFns.ts b/app/src/renderer/components/panzoom/panzoomFns.ts
new file mode 100644
index 00000000..263c35e5
--- /dev/null
+++ b/app/src/renderer/components/panzoom/panzoomFns.ts
@@ -0,0 +1,36 @@
+export function initialPan() {
+  const panzoomEl = document.querySelector<HTMLElement>('.panzoom-container')
+  if (!panzoomEl) {
+    console.error('No container')
+    return {}
+  }
+  const childElement = panzoomEl?.querySelector('.panzoom-inner') as HTMLElement
+
+  const panzoomRect = panzoomEl.getBoundingClientRect()
+  const childRect = childElement.getBoundingClientRect()
+
+  const panzoomViewportRect = {
+    width: panzoomEl.offsetWidth,
+    height: panzoomEl.offsetHeight,
+  }
+  const childWidth = childRect.width
+  const childHeight = childRect.height
+
+  // Calculate the zoom scale
+  const zoomPadding = 0.9 // add extra space on sides of the content
+  const zoomX = (panzoomViewportRect.width / childWidth) * zoomPadding
+  const zoomY = (panzoomViewportRect.height / childHeight) * zoomPadding
+  const zoom = Math.min(zoomX, zoomY)
+
+  // Pan
+  const panX = (panzoomRect.width - childRect.width) / 2 - childRect.left
+  const panY = (panzoomRect.height - childRect.height) / 2 - childRect.top
+
+  // center child element within viewport
+  return {
+    x: panX,
+    y: panY,
+    zoom: zoom,
+  }
+}
+

From 84570c6ea50b688c4a6c693578e8d89ad611cebd Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Sat, 4 Mar 2023 11:07:29 +0100
Subject: [PATCH 2/3] Added calculateZoomToFitAll() and initialPanZoom instead
 of just initialPan

---
 .../renderer/components/panzoom/Panzoom.vue   |  8 +--
 .../renderer/components/panzoom/panzoomFns.ts | 52 ++++++++++++++-----
 2 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/app/src/renderer/components/panzoom/Panzoom.vue b/app/src/renderer/components/panzoom/Panzoom.vue
index 994c2b62..3b683178 100644
--- a/app/src/renderer/components/panzoom/Panzoom.vue
+++ b/app/src/renderer/components/panzoom/Panzoom.vue
@@ -46,7 +46,7 @@ import useEventHandler from '../Screens/useEventHandler'
 import { useDevStore } from '~/store/dev'
 import { isEqual } from 'lodash'
 import { start } from 'repl'
-import { initialPan } from './panzoomFns'
+import { initialPanZoom } from './panzoomFns'
 // import { useEventListener } from '@vueuse/core'
 
 const interactions = useInteractionStore()
@@ -82,9 +82,9 @@ onMounted(async () => {
   if (!$root) console.warn('No Panzoom created')
 
   // const startZoom = initialZoom()
-  const { x: startX } = initialPan()
-  const { y: startY } = initialPan()
-  const { zoom: startZoom } = initialPan()
+  const { x: startX } = initialPanZoom()
+  const { y: startY } = initialPanZoom()
+  const { zoom: startZoom } = initialPanZoom()
 
   // Init Panzoom globally
   // We use the 'canvas' option to enable interactions on the parent DOM Node as well
diff --git a/app/src/renderer/components/panzoom/panzoomFns.ts b/app/src/renderer/components/panzoom/panzoomFns.ts
index 263c35e5..fc2306f6 100644
--- a/app/src/renderer/components/panzoom/panzoomFns.ts
+++ b/app/src/renderer/components/panzoom/panzoomFns.ts
@@ -1,18 +1,52 @@
-export function initialPan() {
-  const panzoomEl = document.querySelector<HTMLElement>('.panzoom-container')
+// The CSS classes
+// TODO: Add tests to make sure these don't break
+const panzoomContainer = '.panzoom-container'
+const panzoomChild = '.panzoom-inner'
+
+/**
+ * Returns the x, y, zoom for the initial app startup
+ */
+export function initialPanZoom() {
+  const panzoomEl = document.querySelector<HTMLElement>(panzoomContainer)
   if (!panzoomEl) {
     console.error('No container')
     return {}
   }
-  const childElement = panzoomEl?.querySelector('.panzoom-inner') as HTMLElement
+  const childElement = panzoomEl?.querySelector(panzoomChild) as HTMLElement
 
   const panzoomRect = panzoomEl.getBoundingClientRect()
   const childRect = childElement.getBoundingClientRect()
 
+  // Calculate the zoom to fit all artboards
+  const zoom = calculateZoomToFitAll()
+
+  // Pan
+  const panX = (panzoomRect.width - childRect.width) / 2 - childRect.left
+  const panY = (panzoomRect.height - childRect.height) / 2 - childRect.top
+
+  // center child element within viewport
+  return {
+    x: panX,
+    y: panY,
+    zoom: zoom,
+  }
+}
+/**
+ * Returns a zoom factor which would fit all the current artboards within the viewport
+ */
+export function calculateZoomToFitAll(): number {
+  const panzoomEl = document.querySelector<HTMLElement>(panzoomContainer)
+  if (!panzoomEl) {
+    console.error('No container')
+    return 1
+  }
+  const childElement = panzoomEl?.querySelector(panzoomChild) as HTMLElement
+
   const panzoomViewportRect = {
     width: panzoomEl.offsetWidth,
     height: panzoomEl.offsetHeight,
   }
+  const childRect = childElement.getBoundingClientRect()
   const childWidth = childRect.width
   const childHeight = childRect.height
 
@@ -22,15 +56,7 @@ export function initialPan() {
   const zoomY = (panzoomViewportRect.height / childHeight) * zoomPadding
   const zoom = Math.min(zoomX, zoomY)
 
-  // Pan
-  const panX = (panzoomRect.width - childRect.width) / 2 - childRect.left
-  const panY = (panzoomRect.height - childRect.height) / 2 - childRect.top
-
-  // center child element within viewport
-  return {
-    x: panX,
-    y: panY,
-    zoom: zoom,
-  }
+  // Return
+  return zoom
 }
 

From 6605da7525767c237730a2ede9c57d48ab310c57 Mon Sep 17 00:00:00 2001
From: Nick Wittwer <6360459+nwittwer@users.noreply.github.com>
Date: Thu, 16 Mar 2023 11:32:04 +0100
Subject: [PATCH 3/3] Added await nextTick and calculation of dimensions of
 Panzoom element

---
 .../renderer/components/panzoom/Panzoom.vue   | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/app/src/renderer/components/panzoom/Panzoom.vue b/app/src/renderer/components/panzoom/Panzoom.vue
index 3b683178..4aff36cd 100644
--- a/app/src/renderer/components/panzoom/Panzoom.vue
+++ b/app/src/renderer/components/panzoom/Panzoom.vue
@@ -36,7 +36,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, getCurrentInstance, onMounted, computed, watch } from 'vue'
+import {
+  ref,
+  getCurrentInstance,
+  onMounted,
+  computed,
+  watch,
+  nextTick,
+} from 'vue'
 import Panzoom, { PanzoomObject } from '@panzoom/panzoom'
 import { ipcRenderer } from 'electron'
 import isElectron from 'is-electron'
@@ -61,6 +68,7 @@ const isInteracting = computed(() => interactions.isInteracting)
 // Template refs
 const innerPanArea = ref()
 const outerPanArea = ref() // The parent DOM Node
+const panzoomContent = ref() // Dynamic content within Panzoom
 const panzoomInstance = ref<PanzoomObject | undefined>()
 
 // Watch for changes and change Panzoom accordingly
@@ -76,10 +84,26 @@ watch(panzoomEnabled, (newVal) => {
   }
 })
 
-onMounted(async () => {
+// Dynamic height and width for parent based on child
+const dynamicDims = computed(() => {
+  const { width, height } = panzoomContent.value?.getBoundingClientRect() || {
+    width: 0,
+    height: 0,
+  }
+
+  console.log('dynamicDims', width, height)
+
+  return {
+    width: width + 'px',
+    height: height + 'px',
+  }
+})
   // TODO: This should be refactored after Vue 3 update
   const { $root } = getCurrentInstance()?.proxy
-  if (!$root) console.warn('No Panzoom created')
+if (!$root) console.warn('No $root')
+
+onMounted(async () => {
+  await nextTick()
 
   // const startZoom = initialZoom()
   const { x: startX } = initialPanZoom()