From 71ff21014337b3421482c20ea648938cad69647c Mon Sep 17 00:00:00 2001
From: BipanKishore <bipankishore@gmail.com>
Date: Sun, 12 May 2024 11:58:33 +0530
Subject: [PATCH 1/2] touchstart passive event fix for mobile

---
 src/components/pane.tsx                | 1 -
 src/constant.ts                        | 2 +-
 src/context/resizable-panes-context.ts | 3 ---
 src/services/detection-service.ts      | 9 +++++----
 src/utils/dom.ts                       | 5 +++++
 5 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/components/pane.tsx b/src/components/pane.tsx
index 06cbc43..4e98ff2 100644
--- a/src/components/pane.tsx
+++ b/src/components/pane.tsx
@@ -52,7 +52,6 @@ export const Pane = (props: IPane) => {
       <div
         className={classname}
         data-cy={id}
-        key={id}
         ref={setPaneRef}
         style={style}
       >
diff --git a/src/constant.ts b/src/constant.ts
index 59e22c1..2cc9c7c 100644
--- a/src/constant.ts
+++ b/src/constant.ts
@@ -39,5 +39,5 @@ export const EVENT_NAMES = {
   mousedown: 'mousedown',
   touchmove: 'touchmove',
   touchend: 'touchend',
-  touchStartCapture: 'touchStartCapture'
+  touchstart: 'touchstart'
 }
diff --git a/src/context/resizable-panes-context.ts b/src/context/resizable-panes-context.ts
index 1fc0b35..43b41a1 100644
--- a/src/context/resizable-panes-context.ts
+++ b/src/context/resizable-panes-context.ts
@@ -45,7 +45,6 @@ import {
   synSizeToMaxSize, synSizeToMinSize, syncPaneRatioSizeToSize
 } from '../models/pane'
 import {attachDetectionCoordinate, detectionService} from '../services/detection-service'
-import {consoleGetSize} from '../utils/development-util'
 
 export const getResizableContext = (
   props: IResizablePaneProviderProps
@@ -134,7 +133,6 @@ export const getResizableContext = (
       direction: DIRECTIONS.NONE,
       axisCoordinate: mouseCoordinate
     })
-    console.log(handleId, mouseCoordinate)
     setMouseDownFlag(true)
     syncAxisSizes()
   }
@@ -251,7 +249,6 @@ export const getResizableContext = (
     afterResizeStop()
 
     setMouseDownFlag(false)
-    consoleGetSize(resizable.items)
   }
 
   resizable.onMouseUp = onMoveEndFn
diff --git a/src/services/detection-service.ts b/src/services/detection-service.ts
index 4fb431b..f4d6771 100644
--- a/src/services/detection-service.ts
+++ b/src/services/detection-service.ts
@@ -1,6 +1,6 @@
 import {ResizableModel} from '../models'
 import {getSize} from '../models/pane'
-import {addDOMEvent, getResizableEvent, removeDOMEvent} from '../utils/dom'
+import {addDOMEvent, addDOMEventPassive, getResizableEvent, removeDOMEvent} from '../utils/dom'
 import {getVisibleItems} from '../utils/panes'
 
 import throttle from 'throttleit'
@@ -38,7 +38,7 @@ const getMouseDownOnHandle = (
   registerResizeEvent: any) => (e: any) => {
   const {detectionDetails} = resizable
 
-  const cursorCoordinate = vertical ? e.clientX : e.clientY
+  const [cursorCoordinate] = getResizableEvent(e, vertical, {})
 
   const resizerClickedCoordinateList = detectionDetails.map(([x1, x2]) => {
     const coordinates = Math.abs(((x1 + x2) / 2) - cursorCoordinate)
@@ -85,7 +85,7 @@ export const detectionService = (containerNode: HTMLElement, resizable: Resizabl
 
   const onGlobalMouseMoveDebounce = throttle(onContainerMouseMove(containerNode, resizable, vertical, cursorStyle), 100)
 
-  addDOMEvent(containerNode, onGlobalMouseMoveDebounce, EVENT_NAMES.mousemove)
+  addDOMEventPassive(containerNode, onGlobalMouseMoveDebounce, EVENT_NAMES.mousemove)
   document.addEventListener(EVENT_NAMES.touchmove, onGlobalMouseMoveDebounce, {passive: false})
 
   const resize = getResize(resizable, vertical)
@@ -102,7 +102,8 @@ export const detectionService = (containerNode: HTMLElement, resizable: Resizabl
 
   const onMouseDownOnHandle = getMouseDownOnHandle(resizable, vertical, registerResizeEvent)
 
-  addDOMEvent(containerNode, onMouseDownOnHandle, EVENT_NAMES.mousedown, EVENT_NAMES.touchStartCapture)
+  addDOMEvent(containerNode, onMouseDownOnHandle, EVENT_NAMES.mousedown)
+  addDOMEventPassive(containerNode, onMouseDownOnHandle, EVENT_NAMES.touchstart)
 
   addDOMEvent(document, clearResizeEvent, EVENT_NAMES.mouseup, EVENT_NAMES.touchend)
 }
diff --git a/src/utils/dom.ts b/src/utils/dom.ts
index bfda922..0d8c9c3 100644
--- a/src/utils/dom.ts
+++ b/src/utils/dom.ts
@@ -74,6 +74,11 @@ export const addDOMEvent = (node: HTMLElement | Document | Window,
   eventNames.forEach((eventName) => node.addEventListener(eventName, callBack))
 }
 
+export const addDOMEventPassive = (node: HTMLElement | Document | Window,
+  callBack: (e: any) => void, eventName: string) => {
+  node.addEventListener(eventName, callBack, {passive: false})
+}
+
 export const removeDOMEvent = (node: HTMLElement | Document | Window,
   callBack: (e: any) => void, ...eventNames: string[]) => {
   eventNames.forEach((eventName) => node.removeEventListener(eventName, callBack))

From 330e3347ef61ef291a85204305acc250dc732c7c Mon Sep 17 00:00:00 2001
From: BipanKishore <bipankishore@gmail.com>
Date: Sun, 12 May 2024 12:00:02 +0530
Subject: [PATCH 2/2] Update style.css

---
 src/style.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/style.css b/src/style.css
index e04a7fb..45cf4fc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -24,14 +24,6 @@
     background-clip: padding-box;
 }
 
-/* .resizer-vertical {
-    cursor: row-resize;
-} */
-
-/* .resizer-horizontal {
-    cursor: col-resize;
-} */
-
 .overflow-hidden {
     overflow: hidden;   
 }