Merge pull request #15002 from light-and-ray/support_resizable_columns_for_touch_(tablets)

support resizable columns for touch (tablets)

javascript/resizeHandle.js

@@ -65,8 +65,13 @@
         resizeHandle.classList.add('resize-handle');
         parent.insertBefore(resizeHandle, rightCol);
 
-        resizeHandle.addEventListener('mousedown', (evt) => {
+        ['mousedown', 'touchstart'].forEach((eventType) => {
+            resizeHandle.addEventListener(eventType, (evt) => {
+                if (eventType.startsWith('mouse')) {
                     if (evt.button !== 0) return;
+                } else {
+                    if (evt.changedTouches.length !== 1) return;
+                }
 
                 evt.preventDefault();
                 evt.stopPropagation();
@@ -79,7 +84,12 @@
                 R.handle = resizeHandle;
                 R.leftCol = leftCol;
                 R.leftColStartWidth = leftCol.offsetWidth;
+                if (eventType.startsWith('mouse')) {
                     R.screenX = evt.screenX;
+                } else {
+                    R.screenX = evt.changedTouches[0].screenX;
+                }
+            });
         });
 
         resizeHandle.addEventListener('dblclick', (evt) => {
@@ -92,21 +102,39 @@
         afterResize(parent);
     }
 
-    window.addEventListener('mousemove', (evt) => {
+    ['mousemove', 'touchmove'].forEach((eventType) => {
+        window.addEventListener(eventType, (evt) => {
+            if (eventType.startsWith('mouse')) {
                 if (evt.button !== 0) return;
+            } else {
+                if (evt.changedTouches.length !== 1) return;
+            }
 
             if (R.tracking) {
+                if (eventType.startsWith('mouse')) {
                     evt.preventDefault();
+                }
                 evt.stopPropagation();
 
-            const delta = R.screenX - evt.screenX;
+                let delta = 0;
+                if (eventType.startsWith('mouse')) {
+                    delta = R.screenX - evt.screenX;
+                } else {
+                    delta = R.screenX - evt.changedTouches[0].screenX;
+                }
                 const leftColWidth = Math.max(Math.min(R.leftColStartWidth - delta, R.parent.offsetWidth - GRADIO_MIN_WIDTH - PAD), GRADIO_MIN_WIDTH);
                 setLeftColGridTemplate(R.parent, leftColWidth);
             }
         });
+    });
 
-    window.addEventListener('mouseup', (evt) => {
+    ['mouseup', 'touchend'].forEach((eventType) => {
+        window.addEventListener(eventType, (evt) => {
+            if (eventType.startsWith('mouse')) {
                 if (evt.button !== 0) return;
+            } else {
+                if (evt.changedTouches.length !== 1) return;
+            }
 
             if (R.tracking) {
                 evt.preventDefault();
@@ -117,6 +145,7 @@
                 document.body.classList.remove('resizing');
             }
         });
+    });
 
 
     window.addEventListener('resize', () => {