From a990d22831545cf5c1ecf0c8660982f727d36c85 Mon Sep 17 00:00:00 2001
From: Pete Matsyburka <pete@docuseal.com>
Date: Sat, 3 Oct 2026 12:52:02 +0300
Subject: [PATCH] remove pinch to zoom

---
 app/javascript/template_builder/builder.vue   | 60 ++-----------------
 .../template_builder/dynamic_block_menu.vue   | 12 ++--
 .../template_builder/dynamic_document.vue     | 10 +---
 .../template_builder/dynamic_section.vue      | 12 +++-
 .../template_builder/dynamic_styles.scss      |  1 +
 5 files changed, 24 insertions(+), 71 deletions(-)

diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index b7a5fab3f..0fa719ba7 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -587,14 +587,9 @@
         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',
-          { 'touch-pan-x touch-pan-y': hasDynamicDocuments && !isVisualViewportZoomed }
+          zoomLevel > 1 ? 'overflow-x-auto' : 'overflow-x-hidden'
         ]"
         @wheel="onPagesWheel"
-        @touchstart="onPagesTouchStart"
-        @touchmove="onPagesTouchMove"
-        @touchend="onPagesTouchEnd"
-        @touchcancel="onPagesTouchEnd"
       >
         <div
           ref="documents"
@@ -898,14 +893,14 @@
       leave-to-class="translate-y-4 opacity-0"
     >
       <div
-        v-if="(pinchZoomLevel || zoomLevel) > 1"
+        v-if="zoomLevel > 1"
         class="sticky bottom-0 z-10 pointer-events-none"
       >
         <div class="absolute left-0 right-0 bottom-6 md:bottom-4 flex justify-center">
           <div class="join shadow pointer-events-auto">
             <span class="join-item bg-base-content text-white pl-2 pr-2.5 h-9 items-center text-sm font-medium cursor-default w-16 flex justify-end">
               <span>
-                {{ Math.round((pinchZoomLevel || zoomLevel) * 100) }}%
+                {{ Math.round(zoomLevel * 100) }}%
               </span>
             </span>
             <button
@@ -1399,15 +1394,10 @@ export default {
       editModalDocumentUuid: null,
       revisions: [],
       beforeRevisionSnapshot: null,
-      zoomLevel: 1,
-      pinchZoomLevel: null,
-      isVisualViewportZoomed: false
+      zoomLevel: 1
     }
   },
   computed: {
-    hasDynamicDocuments () {
-      return this.template.schema.some((item) => item.dynamic)
-    },
     submitterDefaultNames: FieldSubmitter.computed.names,
     isSelectModeRef: () => ref(false),
     isCmdKeyRef: () => ref(false),
@@ -1663,7 +1653,6 @@ export default {
     window.addEventListener('keydown', this.onKeyDown)
 
     window.addEventListener('dragleave', this.onWindowDragLeave)
-    window.visualViewport?.addEventListener('resize', this.onVisualViewportResize)
 
     this.$nextTick(() => {
       if (document.location.search?.includes('stripe_connect_success')) {
@@ -1688,7 +1677,6 @@ export default {
 
     this.resizeObserver.disconnect()
     window.removeEventListener('dragleave', this.onWindowDragLeave)
-    window.visualViewport?.removeEventListener('resize', this.onVisualViewportResize)
   },
   beforeUpdate () {
     this.documentRefs = []
@@ -2478,46 +2466,6 @@ export default {
 
       this.setZoomLevel(this.zoomLevel - event.deltaY * 0.006, event.clientX, event.clientY)
     },
-    onVisualViewportResize () {
-      if (!this.hasDynamicDocuments) return
-
-      this.isVisualViewportZoomed = window.visualViewport.scale > 1.01
-    },
-    onPagesTouchStart (event) {
-      if (event.touches.length === 2 && this.hasDynamicDocuments && !this.isVisualViewportZoomed) {
-        const [a, b] = event.touches
-        const rect = this.$refs.documents.getBoundingClientRect()
-        const x = (a.clientX + b.clientX) / 2
-        const y = (a.clientY + b.clientY) / 2
-
-        this.pinch = { distance: Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY), zoomLevel: this.zoomLevel, x, y }
-        this.pinchZoomLevel = this.zoomLevel
-
-        this.$refs.documents.style.transformOrigin = `${x - rect.left}px ${y - rect.top}px`
-      }
-    },
-    onPagesTouchMove (event) {
-      if (!this.pinch || event.touches.length !== 2) return
-
-      event.preventDefault()
-
-      const [a, b] = event.touches
-
-      this.pinchZoomLevel = Math.max(1, Math.min(3, this.pinch.zoomLevel * Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY) / this.pinch.distance))
-
-      this.$refs.documents.style.transform = `scale(${this.pinchZoomLevel / this.pinch.zoomLevel})`
-    },
-    onPagesTouchEnd (event) {
-      if (!this.pinch || event.touches.length === 2) return
-
-      this.$refs.documents.style.transform = ''
-      this.$refs.documents.style.transformOrigin = ''
-
-      this.setZoomLevel(this.pinchZoomLevel, this.pinch.x, this.pinch.y)
-
-      this.pinch = null
-      this.pinchZoomLevel = null
-    },
     resetZoomLevel () {
       const rect = this.$refs.pagesContainer.getBoundingClientRect()
 
diff --git a/app/javascript/template_builder/dynamic_block_menu.vue b/app/javascript/template_builder/dynamic_block_menu.vue
index 55ee95300..d288c8f07 100644
--- a/app/javascript/template_builder/dynamic_block_menu.vue
+++ b/app/javascript/template_builder/dynamic_block_menu.vue
@@ -81,6 +81,10 @@ export default {
     coords: {
       type: Object,
       required: true
+    },
+    getResizeLimits: {
+      type: Function,
+      required: true
     }
   },
   emits: ['command', 'resize'],
@@ -141,17 +145,17 @@ export default {
       return (action.structural && !this.coords.isRegular) || action.disabled
     },
     startResize (event) {
-      this.resizeStart = { x: event.clientX, y: event.clientY, width: this.coords.width, height: this.coords.height }
+      this.resizeStart = { x: event.clientX, y: event.clientY, width: this.coords.width, height: this.coords.height, ...this.getResizeLimits() }
       this.size = { width: this.coords.width, height: this.coords.height }
 
       window.addEventListener('pointermove', this.onResizeMove)
       window.addEventListener('pointerup', this.onResizeEnd)
     },
     onResizeMove (event) {
-      const { x, y, width, height } = this.resizeStart
+      const { x, y, width, height, minHeight, maxWidth } = this.resizeStart
       this.size = {
-        width: Math.min(Math.max(width + event.clientX - x, 20), this.coords.maxWidth),
-        height: Math.max(height + event.clientY - y, this.coords.minHeight)
+        width: Math.min(Math.max(width + event.clientX - x, 20), maxWidth),
+        height: Math.max(height + event.clientY - y, minHeight)
       }
     },
     onResizeEnd () {
diff --git a/app/javascript/template_builder/dynamic_document.vue b/app/javascript/template_builder/dynamic_document.vue
index 9674fa6ee..c87ad5b07 100644
--- a/app/javascript/template_builder/dynamic_document.vue
+++ b/app/javascript/template_builder/dynamic_document.vue
@@ -67,7 +67,7 @@ export default {
   components: {
     DynamicSection
   },
-  inject: ['baseFetch', 'template', 'nativePlatform'],
+  inject: ['baseFetch', 'template'],
   provide () {
     return {
       documentFonts: computed(() => this.documentFonts)
@@ -215,18 +215,10 @@ export default {
     this.resizeObserver.observe(this.$refs.container)
 
     window.addEventListener('beforeunload', this.onBeforeUnload)
-
-    if (this.nativePlatform === 'ios') {
-      this.viewportMeta = document.querySelector('meta[name="viewport"]')
-      this.viewportContent = this.viewportMeta.getAttribute('content')
-      this.viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0')
-    }
   },
   beforeUnmount () {
     window.removeEventListener('beforeunload', this.onBeforeUnload)
 
-    this.viewportMeta?.setAttribute('content', this.viewportContent)
-
     this.resizeObserver.unobserve(this.$refs.container)
   },
   beforeUpdate () {
diff --git a/app/javascript/template_builder/dynamic_section.vue b/app/javascript/template_builder/dynamic_section.vue
index cdca59253..7dbf3c5c6 100644
--- a/app/javascript/template_builder/dynamic_section.vue
+++ b/app/javascript/template_builder/dynamic_section.vue
@@ -67,6 +67,7 @@
       <DynamicBlockMenu
         v-if="editable && blockMenuCoords && !isDrawMode"
         :coords="blockMenuCoords"
+        :get-resize-limits="getBlockResizeLimits"
         @command="onBlockCommand"
         @resize="onBlockResize"
       />
@@ -535,12 +536,19 @@ export default {
         coords.isRegular = isRegularTable(table.node)
         coords.canMerge = editor.can().mergeTableCells()
         coords.canSplit = editor.can().splitTableCell()
-        coords.minHeight = tableRowMinHeights(dom, this.zoom, false).reduce((acc, value) => acc + value, 0)
-        coords.maxWidth = Math.max(this.$refs.editorElement.getBoundingClientRect().right - rect.left, rect.width)
       }
 
       this.blockMenuCoords = coords
     },
+    getBlockResizeLimits () {
+      const dom = this.editor.view.nodeDOM(this.blockMenuCoords.pos)
+      const rect = dom.getBoundingClientRect()
+
+      return {
+        minHeight: tableRowMinHeights(dom, this.zoom, false).reduce((acc, value) => acc + value, 0),
+        maxWidth: Math.max(this.$refs.editorElement.getBoundingClientRect().right - rect.left, rect.width)
+      }
+    },
     onBlockResize ({ width, height }) {
       resizeTable(this.editor.view, this.blockMenuCoords.pos, { width: width / this.zoom, height: height / this.zoom }, this.zoom)
 
diff --git a/app/javascript/template_builder/dynamic_styles.scss b/app/javascript/template_builder/dynamic_styles.scss
index 0fc2c96d0..80f36bfe0 100644
--- a/app/javascript/template_builder/dynamic_styles.scss
+++ b/app/javascript/template_builder/dynamic_styles.scss
@@ -19,4 +19,5 @@
 
 :host {
   all: initial;
+  -webkit-text-size-adjust: 100%;
 }