Switch to pointer events for mobile support

tp-vsplitter.js

@@ -33,6 +33,7 @@ class TpVSplitter extends LitElement {
           background: var(--tp-splitter-line-color, #3b3b3b);
           cursor: col-resize;
           opacity: 1;
+          touch-action: none;
         }
 
         #splitter:hover {
@@ -48,7 +49,7 @@ class TpVSplitter extends LitElement {
 
     return html`
       <div id="left" part="left" ?hidden=${leftHidden}><slot name="left"></slot></div>
-      <div id="splitter" part="splitter" @mousedown=${this._enableDrag} ?hidden=${leftHidden || rightHidden}></div>
+      <div id="splitter" part="splitter" @pointerdown=${this._enableDrag} ?hidden=${leftHidden || rightHidden}></div>
       <div id="right" part="right" ?hidden=${rightHidden}><slot name="right"></slot></div>
     `;
   }
@@ -99,8 +100,8 @@ class TpVSplitter extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    document.removeEventListener('mouseup', this._disableDrag)
-    document.removeEventListener('mousemove', this._resize);
+    document.removeEventListener('pointerup', this._disableDrag)
+    document.removeEventListener('pointermove', this._resize);
     document.body.style['userSelect'] = '';
   }
 
@@ -109,8 +110,14 @@ class TpVSplitter extends LitElement {
   }
 
   _enableDrag(e) {
-    document.addEventListener('mouseup', this._disableDrag)
-    document.addEventListener('mousemove', this._resize);
+    e.preventDefault();
+    if (this.splitter && e.pointerId != null) {
+      this.splitter.setPointerCapture(e.pointerId);
+      this._activePointerId = e.pointerId;
+    }
+
+    document.addEventListener('pointerup', this._disableDrag)
+    document.addEventListener('pointermove', this._resize, { passive: false });
     document.body.style['userSelect'] = 'none';
     this._startX = e.clientX;
     this._leftWidth = this.left.offsetWidth;
@@ -118,11 +125,20 @@ class TpVSplitter extends LitElement {
   }
 
   _disableDrag() {
-    document.removeEventListener('mouseup', this._disableDrag)
-    document.removeEventListener('mousemove', this._resize);
+    document.removeEventListener('pointerup', this._disableDrag)
+    document.removeEventListener('pointermove', this._resize);
     document.body.style['userSelect'] = '';
     this.dragging = false;
 
+    if (this.splitter && this._activePointerId != null) {
+      try {
+        this.splitter.releasePointerCapture(this._activePointerId);
+      } catch (_) {
+        // ignore
+      }
+      this._activePointerId = null;
+    }
+
     let finalLeftWidth;
     if (this.lateResize && this._bufferedDelta) {
       finalLeftWidth = this._leftWidth + this._bufferedDelta;
@@ -148,6 +164,7 @@ class TpVSplitter extends LitElement {
   }
 
   _resize(e) {
+    e.preventDefault();
     const delta = e.clientX - this._startX;
     const totalWidth = this.offsetWidth;
     const minWidth = this.minSideWidth || 0;