element-plus
Version:
A Component Library for Vue 3
1 lines • 11.4 kB
Source Map (JSON)
{"version":3,"file":"thumb2.mjs","sources":["../../../../../../packages/components/scrollbar/src/thumb.vue"],"sourcesContent":["<template>\n <transition :name=\"ns.b('fade')\">\n <div\n v-show=\"always || visible\"\n ref=\"instance\"\n :class=\"[ns.e('bar'), ns.is(bar.key)]\"\n @mousedown=\"clickTrackHandler\"\n @click.stop\n >\n <div\n ref=\"thumb\"\n :class=\"ns.e('thumb')\"\n :style=\"thumbStyle\"\n @mousedown=\"clickThumbHandler\"\n />\n </div>\n </transition>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, ref, toRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { isClient, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { scrollbarContextKey } from './constants'\nimport { BAR_MAP, renderThumbStyle } from './util'\nimport { thumbProps } from './thumb'\n\nconst COMPONENT_NAME = 'Thumb'\nconst props = defineProps(thumbProps)\n\nconst scrollbar = inject(scrollbarContextKey)\nconst ns = useNamespace('scrollbar')\n\nif (!scrollbar) throwError(COMPONENT_NAME, 'can not inject scrollbar context')\n\nconst instance = ref<HTMLDivElement>()\nconst thumb = ref<HTMLDivElement>()\n\nconst thumbState = ref<Partial<Record<'X' | 'Y', number>>>({})\nconst visible = ref(false)\n\nlet cursorDown = false\nlet cursorLeave = false\nlet baseScrollHeight = 0\nlet baseScrollWidth = 0\nlet originalOnSelectStart:\n | ((this: GlobalEventHandlers, ev: Event) => any)\n | null = isClient ? document.onselectstart : null\n\nconst bar = computed(() => BAR_MAP[props.vertical ? 'vertical' : 'horizontal'])\n\nconst thumbStyle = computed(() =>\n renderThumbStyle({\n size: props.size,\n move: props.move,\n bar: bar.value,\n })\n)\n\nconst offsetRatio = computed(\n () =>\n // offsetRatioX = original width of thumb / current width of thumb / ratioX\n // offsetRatioY = original height of thumb / current height of thumb / ratioY\n // instance height = wrap height - GAP\n instance.value![bar.value.offset] ** 2 /\n scrollbar.wrapElement![bar.value.scrollSize] /\n props.ratio /\n thumb.value![bar.value.offset]\n)\n\nconst clickThumbHandler = (e: MouseEvent) => {\n // prevent click event of middle and right button\n e.stopPropagation()\n if (e.ctrlKey || [1, 2].includes(e.button)) return\n\n window.getSelection()?.removeAllRanges()\n startDrag(e)\n\n const el = e.currentTarget as HTMLDivElement\n if (!el) return\n thumbState.value[bar.value.axis] =\n el[bar.value.offset] -\n (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction])\n}\n\nconst clickTrackHandler = (e: MouseEvent) => {\n if (!thumb.value || !instance.value || !scrollbar.wrapElement) return\n\n const offset = Math.abs(\n (e.target as HTMLElement).getBoundingClientRect()[bar.value.direction] -\n e[bar.value.client]\n )\n const thumbHalf = thumb.value[bar.value.offset] / 2\n const thumbPositionPercentage =\n ((offset - thumbHalf) * 100 * offsetRatio.value) /\n instance.value[bar.value.offset]\n\n scrollbar.wrapElement[bar.value.scroll] =\n (thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize]) /\n 100\n}\n\nconst startDrag = (e: MouseEvent) => {\n e.stopImmediatePropagation()\n cursorDown = true\n baseScrollHeight = scrollbar.wrapElement!.scrollHeight\n baseScrollWidth = scrollbar.wrapElement!.scrollWidth\n document.addEventListener('mousemove', mouseMoveDocumentHandler)\n document.addEventListener('mouseup', mouseUpDocumentHandler)\n originalOnSelectStart = document.onselectstart\n document.onselectstart = () => false\n}\n\nconst mouseMoveDocumentHandler = (e: MouseEvent) => {\n if (!instance.value || !thumb.value) return\n if (cursorDown === false) return\n\n const prevPage = thumbState.value[bar.value.axis]\n if (!prevPage) return\n\n const offset =\n (instance.value.getBoundingClientRect()[bar.value.direction] -\n e[bar.value.client]) *\n -1\n const thumbClickPosition = thumb.value[bar.value.offset] - prevPage\n const thumbPositionPercentage =\n ((offset - thumbClickPosition) * 100 * offsetRatio.value) /\n instance.value[bar.value.offset]\n\n if (bar.value.scroll === 'scrollLeft') {\n scrollbar.wrapElement![bar.value.scroll] =\n (thumbPositionPercentage * baseScrollWidth) / 100\n } else {\n scrollbar.wrapElement![bar.value.scroll] =\n (thumbPositionPercentage * baseScrollHeight) / 100\n }\n}\n\nconst mouseUpDocumentHandler = () => {\n cursorDown = false\n thumbState.value[bar.value.axis] = 0\n document.removeEventListener('mousemove', mouseMoveDocumentHandler)\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\n restoreOnselectstart()\n if (cursorLeave) visible.value = false\n}\n\nconst mouseMoveScrollbarHandler = () => {\n cursorLeave = false\n visible.value = !!props.size\n}\n\nconst mouseLeaveScrollbarHandler = () => {\n cursorLeave = true\n visible.value = cursorDown\n}\n\nonBeforeUnmount(() => {\n restoreOnselectstart()\n document.removeEventListener('mouseup', mouseUpDocumentHandler)\n})\n\nconst restoreOnselectstart = () => {\n if (document.onselectstart !== originalOnSelectStart)\n document.onselectstart = originalOnSelectStart\n}\n\nuseEventListener(\n toRef(scrollbar, 'scrollbarElement'),\n 'mousemove',\n mouseMoveScrollbarHandler\n)\nuseEventListener(\n toRef(scrollbar, 'scrollbarElement'),\n 'mouseleave',\n mouseLeaveScrollbarHandler\n)\n</script>\n"],"names":["_createBlock","_Transition","_unref","_withDirectives","_createElementVNode","_normalizeClass","_withModifiers","_normalizeStyle","always"],"mappings":"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"}