You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
9.4 KiB
1 line
9.4 KiB
2 years ago
|
{"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 >\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 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 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 scrollbar.wra
|