add cmd+scroll zooming to template builder

app/javascript/template_builder/area.vue

@@ -197,7 +197,8 @@
           v-else-if="!isCheckboxInput"
           width="100%"
           height="100%"
-          class="max-h-10 opacity-50"
+          class="opacity-50"
+          :style="{ maxHeight: isInlineSize ? '5cqmin' : '40px' }"
         />
       </span>
     </div>

app/javascript/template_builder/builder.vue

@@ -355,12 +355,17 @@
       </div>
       <div
         id="pages_container"
-        class="w-full overflow-x-hidden mt-0.5 pt-0.5"
+        ref="pagesContainer"
-        :class="isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto'"
+        class="w-full mt-0.5 pt-0.5"
+        :class="[
+          isMobile ? 'overflow-y-auto' : 'overflow-y-hidden md:overflow-y-auto',
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
+        ]"
       >
         <div
           ref="documents"
           class="pr-3.5 pl-0.5"
+          :style="zoomLevel > 1 ? { width: `${zoomLevel * 100}%` } : null"
         >
           <template v-if="!sortedDocuments.length && (withUploadButton || withAddPageButton)">
             <Dropzone
@@ -633,6 +638,39 @@
         </div>
       </div>
     </Transition>
+    <Transition
+      enter-active-class="transition-all duration-200 ease-out"
+      enter-from-class="translate-y-4 opacity-0"
+      enter-to-class="translate-y-0 opacity-100"
+      leave-active-class="transition-all duration-200 ease-in"
+      leave-from-class="translate-y-0 opacity-100"
+      leave-to-class="translate-y-4 opacity-0"
+    >
+      <div
+        v-if="zoomLevel > 1"
+        class="sticky bottom-0 z-40 pointer-events-none"
+      >
+        <div class="absolute left-0 right-0 bottom-4 flex justify-center">
+          <div class="join shadow pointer-events-auto">
+            <span class="join-item bg-base-content text-white pl-4 pr-3 h-9 inline-flex items-center text-sm font-semibold cursor-default">
+              {{ Math.round(zoomLevel * 100) }}%
+            </span>
+            <div
+              class="tooltip tooltip-top"
+              :data-tip="t('reset_zoom')"
+            >
+              <button
+                type="button"
+                class="join-item bg-base-content text-white h-9 pl-2 pr-3 inline-flex items-center justify-center cursor-pointer hover:opacity-90 border-l border-white/20"
+                @click="zoomLevel = 1"
+              >
+                <IconX class="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
     <div
       id="docuseal_modal_container"
       class="modal-container"
@@ -664,7 +702,7 @@ import DocumentControls from './controls'
 import MobileFields from './mobile_fields'
 import FieldSubmitter from './field_submitter'
 import RevisionsModal from './revisions_modal'
-import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory } from '@tabler/icons-vue'
+import { IconPlus, IconUsersPlus, IconDeviceFloppy, IconChevronDown, IconEye, IconWritingSign, IconInnerShadowTop, IconInfoCircle, IconAdjustments, IconDownload, IconHistory, IconX } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import { ref, computed, toRaw, defineAsyncComponent } from 'vue'
 import * as i18n from './i18n'
@@ -706,6 +744,7 @@ export default {
     IconEye,
     IconHistory,
     IconDeviceFloppy,
+    IconX,
     RevisionsModal
   },
   provide () {
@@ -1063,7 +1102,8 @@ export default {
       isMathLoaded: false,
       isRevisionsModalOpen: false,
       revisions: [],
-      beforeRevisionSnapshot: null
+      beforeRevisionSnapshot: null,
+      zoomLevel: 1
     }
   },
   computed: {
@@ -1313,6 +1353,8 @@ export default {
         this.pendingFieldAttachmentUuids.push(item.attachment_uuid)
       }
     })
+
+    this.$refs.pagesContainer.addEventListener('wheel', this.onPagesWheel, { passive: false })
   },
   unmounted () {
     document.removeEventListener('keyup', this.onKeyUp)
@@ -1320,6 +1362,8 @@ export default {
 
     window.removeEventListener('resize', this.onWindowResize)
     window.removeEventListener('dragleave', this.onWindowDragLeave)
+
+    this.$refs.pagesContainer.removeEventListener('wheel', this.onPagesWheel)
   },
   beforeUpdate () {
     this.documentRefs = []
@@ -2018,6 +2062,30 @@ export default {
 
       this.isBreakpointLg = this.$el.getRootNode().querySelector('div[data-v-app]').offsetWidth < breakpointLg
     },
+    onPagesWheel (event) {
+      if (!event.ctrlKey && !event.metaKey) return
+
+      event.preventDefault()
+
+      const oldZoom = this.zoomLevel
+      const nextZoom = Math.max(1, Math.min(3, oldZoom - event.deltaY * 0.002))
+
+      if (nextZoom === oldZoom) return
+
+      const rect = this.$refs.pagesContainer.getBoundingClientRect()
+      const cursorX = event.clientX - rect.left
+      const cursorY = event.clientY - rect.top
+      const ratio = nextZoom / oldZoom
+      const nextScrollLeft = (this.$refs.pagesContainer.scrollLeft + cursorX) * ratio - cursorX
+      const nextScrollTop = (this.$refs.pagesContainer.scrollTop + cursorY) * ratio - cursorY
+
+      this.zoomLevel = nextZoom
+
+      this.$nextTick(() => {
+        this.$refs.pagesContainer.scrollLeft = nextScrollLeft
+        this.$refs.pagesContainer.scrollTop = nextScrollTop
+      })
+    },
     setDocumentRefs (el) {
       if (el) {
         this.documentRefs.push(el)

app/javascript/template_builder/i18n.js

@@ -219,7 +219,8 @@ const en = {
   revisions: 'Revisions',
   apply: 'Apply',
   no_revisions_yet: 'No revisions yet',
-  viewing_revision_from: 'Viewing revision from {date}'
+  viewing_revision_from: 'Viewing revision from {date}',
+  reset_zoom: 'Reset zoom'
 }
 
 const es = {
@@ -443,7 +444,8 @@ const es = {
   revisions: 'Revisiones',
   apply: 'Aplicar',
   no_revisions_yet: 'Aún no hay revisiones',
-  viewing_revision_from: 'Viendo revisión del {date}'
+  viewing_revision_from: 'Viendo revisión del {date}',
+  reset_zoom: 'Restablecer zoom'
 }
 
 const it = {
@@ -667,7 +669,8 @@ const it = {
   revisions: 'Revisioni',
   apply: 'Applica',
   no_revisions_yet: 'Nessuna revisione ancora',
-  viewing_revision_from: 'Visualizzazione revisione del {date}'
+  viewing_revision_from: 'Visualizzazione revisione del {date}',
+  reset_zoom: 'Reimposta zoom'
 }
 
 const pt = {
@@ -891,7 +894,8 @@ const pt = {
   revisions: 'Revisões',
   apply: 'Aplicar',
   no_revisions_yet: 'Nenhuma revisão ainda',
-  viewing_revision_from: 'Visualizando revisão de {date}'
+  viewing_revision_from: 'Visualizando revisão de {date}',
+  reset_zoom: 'Redefinir zoom'
 }
 
 const fr = {
@@ -1115,7 +1119,8 @@ const fr = {
   revisions: 'Révisions',
   apply: 'Appliquer',
   no_revisions_yet: 'Aucune révision pour le moment',
-  viewing_revision_from: 'Affichage de la révision du {date}'
+  viewing_revision_from: 'Affichage de la révision du {date}',
+  reset_zoom: 'Réinitialiser le zoom'
 }
 
 const de = {
@@ -1339,7 +1344,8 @@ const de = {
   revisions: 'Revisionen',
   apply: 'Anwenden',
   no_revisions_yet: 'Noch keine Revisionen',
-  viewing_revision_from: 'Ansicht der Revision vom {date}'
+  viewing_revision_from: 'Ansicht der Revision vom {date}',
+  reset_zoom: 'Zoom zurücksetzen'
 }
 
 const nl = {
@@ -1563,7 +1569,8 @@ const nl = {
   revisions: 'Revisies',
   apply: 'Toepassen',
   no_revisions_yet: 'Nog geen revisies',
-  viewing_revision_from: 'Revisie van {date} bekijken'
+  viewing_revision_from: 'Revisie van {date} bekijken',
+  reset_zoom: 'Zoom terugzetten'
 }
 
 export { en, es, it, pt, fr, de, nl }

app/javascript/template_builder/page.vue

@@ -11,7 +11,7 @@
       :src="image.url"
       :width="width"
       :height="height"
-      class="rounded"
+      class="w-full h-full rounded"
       @load="onImageLoad"
     >
     <div