UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.18 kB
{"version":3,"file":"use-grid-touch.mjs","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"],"names":[],"mappings":";;;;AAOa,MAAA,YAAA,GAAe,CAC1B,SACA,EAAA,MAAA,EACA,UACA,mBACA,EAAA,oBAAA,EACA,aACA,YACG,KAAA;AACH,EAAM,MAAA,WAAA,GAAc,IAAI,CAAC,CAAA,CAAA;AACzB,EAAM,MAAA,WAAA,GAAc,IAAI,CAAC,CAAA,CAAA;AACzB,EAAI,IAAA,WAAA,CAAA;AACJ,EAAA,IAAI,MAAS,GAAA,CAAA,CAAA;AACb,EAAA,IAAI,MAAS,GAAA,CAAA,CAAA;AAEb,EAAM,MAAA,gBAAA,GAAmB,CAAC,KAAsB,KAAA;AAC9C,IAAA,GAAA,CAAI,WAAY,CAAA,CAAA;AAChB,IAAY,WAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AACrC,IAAY,WAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AACrC,IAAS,MAAA,GAAA,CAAA,CAAA;AACT,IAAS,MAAA,GAAA,CAAA,CAAA;AAAA,GACX,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAAsB,KAAA;AAC7C,IAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,IAAA,GAAA,CAAI,WAAY,CAAA,CAAA;AAEhB,IAAA,MAAA,IAAU,WAAY,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AAC/C,IAAA,MAAA,IAAU,WAAY,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AAC/C,IAAY,WAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AACrC,IAAY,WAAA,CAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,CAAA,CAAA,OAAA,CAAA;AAErC,IAAA,WAAA,GAAc,IAAI,MAAM;AACtB,MAAA,MAAM,aAAgB,GAAA,mBAAA,CAAoB,KAAQ,GAAA,KAAA,CAAM,WAAW,CAAA,CAAA;AACnE,MAAA,MAAM,YAAe,GAAA,oBAAA,CAAqB,KAAQ,GAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAEpE,MAAA,MAAM,iBAAiB,IAAK,CAAA,GAAA;AAAA,QAC1B,MAAA,CAAO,MAAM,UAAa,GAAA,MAAA;AAAA,QAC1B,aAAA;AAAA,OACF,CAAA;AACA,MAAA,MAAM,gBAAgB,IAAK,CAAA,GAAA;AAAA,QACzB,MAAA,CAAO,MAAM,SAAY,GAAA,MAAA;AAAA,QACzB,YAAA;AAAA,OACF,CAAA;AAEA,MAAS,QAAA,CAAA;AAAA,QACP,UAAY,EAAA,cAAA;AAAA,QACZ,SAAW,EAAA,aAAA;AAAA,OACZ,CAAA,CAAA;AAED,MAAS,MAAA,GAAA,CAAA,CAAA;AACT,MAAS,MAAA,GAAA,CAAA,CAAA;AAAA,KACV,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAiB,gBAAA,CAAA,SAAA,EAAW,cAAc,gBAAkB,EAAA;AAAA,IAC1D,OAAS,EAAA,IAAA;AAAA,GACV,CAAA,CAAA;AACD,EAAiB,gBAAA,CAAA,SAAA,EAAW,aAAa,eAAiB,EAAA;AAAA,IACxD,OAAS,EAAA,KAAA;AAAA,GACV,CAAA,CAAA;AAED,EAAO,OAAA;AAAA,IACL,WAAA;AAAA,IACA,WAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}