UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 3.13 kB
{"version":3,"file":"use-grid-touch.mjs","names":[],"sources":["../../../../../../../packages/components/virtual-list/src/hooks/use-grid-touch.ts"],"sourcesContent":["import { ref, unref } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { cAF, rAF } from '@element-plus/utils'\n\nimport type { ComputedRef, Ref } from 'vue'\nimport type { GridScrollOptions, GridStates } from '../types'\n\nexport const useGridTouch = (\n windowRef: Ref<HTMLElement | undefined>,\n states: Ref<GridStates>,\n scrollTo: (scrollOptions: GridScrollOptions) => void,\n estimatedTotalWidth: ComputedRef<number>,\n estimatedTotalHeight: ComputedRef<number>,\n parsedWidth: ComputedRef<number>,\n parsedHeight: ComputedRef<number>\n) => {\n const touchStartX = ref(0)\n const touchStartY = ref(0)\n let frameHandle: number | undefined\n let deltaX = 0\n let deltaY = 0\n\n const handleTouchStart = (event: TouchEvent) => {\n cAF(frameHandle!)\n touchStartX.value = event.touches[0].clientX\n touchStartY.value = event.touches[0].clientY\n deltaX = 0\n deltaY = 0\n }\n\n const handleTouchMove = (event: TouchEvent) => {\n event.preventDefault()\n cAF(frameHandle!)\n\n deltaX += touchStartX.value - event.touches[0].clientX\n deltaY += touchStartY.value - event.touches[0].clientY\n touchStartX.value = event.touches[0].clientX\n touchStartY.value = event.touches[0].clientY\n\n frameHandle = rAF(() => {\n const maxScrollLeft = estimatedTotalWidth.value - unref(parsedWidth)\n const maxScrollTop = estimatedTotalHeight.value - unref(parsedHeight)\n\n const safeScrollLeft = Math.min(\n states.value.scrollLeft + deltaX,\n maxScrollLeft\n )\n const safeScrollTop = Math.min(\n states.value.scrollTop + deltaY,\n maxScrollTop\n )\n\n scrollTo({\n scrollLeft: safeScrollLeft,\n scrollTop: safeScrollTop,\n })\n\n deltaX = 0\n deltaY = 0\n })\n }\n\n useEventListener(windowRef, 'touchstart', handleTouchStart, {\n passive: true,\n })\n useEventListener(windowRef, 'touchmove', handleTouchMove, {\n passive: false,\n })\n\n return {\n touchStartX,\n touchStartY,\n handleTouchStart,\n handleTouchMove,\n }\n}\n"],"mappings":";;;;;AAOA,MAAa,gBACX,WACA,QACA,UACA,qBACA,sBACA,aACA,iBACG;CACH,MAAM,cAAc,IAAI,EAAE;CAC1B,MAAM,cAAc,IAAI,EAAE;CAC1B,IAAI;CACJ,IAAI,SAAS;CACb,IAAI,SAAS;CAEb,MAAM,oBAAoB,UAAsB;AAC9C,MAAI,YAAa;AACjB,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,WAAS;AACT,WAAS;;CAGX,MAAM,mBAAmB,UAAsB;AAC7C,QAAM,gBAAgB;AACtB,MAAI,YAAa;AAEjB,YAAU,YAAY,QAAQ,MAAM,QAAQ,GAAG;AAC/C,YAAU,YAAY,QAAQ,MAAM,QAAQ,GAAG;AAC/C,cAAY,QAAQ,MAAM,QAAQ,GAAG;AACrC,cAAY,QAAQ,MAAM,QAAQ,GAAG;AAErC,gBAAc,UAAU;GACtB,MAAM,gBAAgB,oBAAoB,QAAQ,MAAM,YAAY;GACpE,MAAM,eAAe,qBAAqB,QAAQ,MAAM,aAAa;AAWrE,YAAS;IACP,YAVqB,KAAK,IAC1B,OAAO,MAAM,aAAa,QAC1B,cACD;IAQC,WAPoB,KAAK,IACzB,OAAO,MAAM,YAAY,QACzB,aACD;IAKA,CAAC;AAEF,YAAS;AACT,YAAS;IACT;;AAGJ,kBAAiB,WAAW,cAAc,kBAAkB,EAC1D,SAAS,MACV,CAAC;AACF,kBAAiB,WAAW,aAAa,iBAAiB,EACxD,SAAS,OACV,CAAC;AAEF,QAAO;EACL;EACA;EACA;EACA;EACD"}