Merge pull request #99 from BipanKishore/touchstart-passive-event-fix…

…-for-mobile touchstart passive event fix for mobile
BipanKishore · May 12, 2024 · 8ab0355 · 8ab0355
2 parents ce5e821 + 330e334
commit 8ab0355
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/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;   
 }

diff --git 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))