wetrade-design/es/scrollbar/src/thumb.js

一款多语言支持Vue3的UI框架

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
import { ref, toRef, computed, defineComponent, Transition, inject, onBeforeUnmount } from 'vue';
import { BAR_MAP, renderThumbStyle } from './utils';
import { scrollbarContextKey } from './constants';
import { useEventListener } from '../../_util/hooks/_vueuse/useEventListener';
import classNames from '../../_util/classNames';
import useConfigInject from '../../_util/hooks/useConfigInject';
var Thumb = defineComponent({
  props: {
    vertical: Boolean,
    size: String,
    move: Number,
    ratio: {
      type: Number,
      required: true
    },
    always: Boolean
  },
  emits: [],
  setup: function setup(props) {
    var _useConfigInject = useConfigInject('scrollbar', props),
      prefixCls = _useConfigInject.prefixCls;
    var scrollbar = inject(scrollbarContextKey);
    var instance = ref();
    var thumb = ref();
    var thumbState = ref({});
    var visible = ref(false);
    var cursorDown = false;
    var cursorLeave = false;
    var originalOnSelectStart = document.onselectstart;
    var bar = computed(function () {
      return BAR_MAP[props.vertical ? 'vertical' : 'horizontal'];
    });
    var offsetRatio = computed(function () {
      return (
        // offsetRatioX = original width of thumb / current width of thumb / ratioX
        // offsetRatioY = original height of thumb / current height of thumb / ratioY
        // instance height = wrap height - GAP
        Math.pow(instance.value[bar.value.offset], 2) / scrollbar.wrapElement[bar.value.scrollSize] / props.ratio / thumb.value[bar.value.offset]
      );
    });
    var thumbStyle = computed(function () {
      return renderThumbStyle({
        size: props.size,
        move: props.move,
        bar: bar.value
      });
    });
    var startDrag = function startDrag(e) {
      e.stopImmediatePropagation();
      cursorDown = true;
      document.addEventListener('mousemove', mouseMoveDocumentHandler);
      document.addEventListener('mouseup', mouseUpDocumentHandler);
      originalOnSelectStart = document.onselectstart;
      document.onselectstart = function () {
        return false;
      };
    };
    var mouseMoveDocumentHandler = function mouseMoveDocumentHandler(e) {
      if (!instance.value || !thumb.value) return;
      if (cursorDown === false) return;
      var prevPage = thumbState.value[bar.value.axis];
      if (!prevPage) return;
      var offset = (instance.value.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]) * -1;
      var thumbClickPosition = thumb.value[bar.value.offset] - prevPage;
      var thumbPositionPercentage = (offset - thumbClickPosition) * 100 * offsetRatio.value / instance.value[bar.value.offset];
      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
    };
    var mouseUpDocumentHandler = function mouseUpDocumentHandler() {
      cursorDown = false;
      thumbState.value[bar.value.axis] = 0;
      document.removeEventListener('mousemove', mouseMoveDocumentHandler);
      document.removeEventListener('mouseup', mouseUpDocumentHandler);
      restoreOnselectstart();
      if (cursorLeave) visible.value = false;
    };
    var mouseMoveScrollbarHandler = function mouseMoveScrollbarHandler() {
      cursorLeave = false;
      visible.value = !!props.size;
    };
    var mouseLeaveScrollbarHandler = function mouseLeaveScrollbarHandler() {
      cursorLeave = true;
      visible.value = cursorDown;
    };
    onBeforeUnmount(function () {
      restoreOnselectstart();
    });
    var restoreOnselectstart = function restoreOnselectstart() {
      if (document.onselectstart !== originalOnSelectStart) document.onselectstart = originalOnSelectStart;
    };
    var clickTrackHandler = function clickTrackHandler(e) {
      if (!thumb.value || !instance.value || !scrollbar.wrapElement) return;
      var offset = Math.abs(e.target.getBoundingClientRect()[bar.value.direction] - e[bar.value.client]);
      var thumbHalf = thumb.value[bar.value.offset] / 2;
      var thumbPositionPercentage = (offset - thumbHalf) * 100 * offsetRatio.value / instance.value[bar.value.offset];
      scrollbar.wrapElement[bar.value.scroll] = thumbPositionPercentage * scrollbar.wrapElement[bar.value.scrollSize] / 100;
    };
    var clickThumbHandler = function clickThumbHandler(e) {
      var _window$getSelection;
      e.stopPropagation();
      e.preventDefault(); // 阻止默认行为 例如失去焦点
      if (e.ctrlKey || [1, 2].includes(e.button)) return;
      (_window$getSelection = window.getSelection()) === null || _window$getSelection === void 0 ? void 0 : _window$getSelection.removeAllRanges();
      startDrag(e);
      var el = e.currentTarget;
      if (!el) return;
      thumbState.value[bar.value.axis] = el[bar.value.offset] - (e[bar.value.client] - el.getBoundingClientRect()[bar.value.direction]);
    };
    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mousemove', mouseMoveScrollbarHandler);
    useEventListener(toRef(scrollbar, 'scrollbarElement'), 'mouseleave', mouseLeaveScrollbarHandler);
    return function () {
      var _classNames;
      // const thumbStyle = {};
      var always = props.always;
      var barClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls.value, "-bar"), true), _defineProperty(_classNames, "is-".concat(bar.value.key), true), _classNames));
      var thumbClassName = classNames(_defineProperty({}, "".concat(prefixCls.value, "-thumb"), true));
      return _createVNode(Transition, null, {
        default: function _default() {
          return [_withDirectives(_createVNode("div", {
            "class": barClassName,
            "ref": instance,
            "onMousedown": clickTrackHandler
          }, [_createVNode("div", {
            "ref": thumb,
            "class": thumbClassName,
            "style": thumbStyle.value,
            "onMousedown": clickThumbHandler
          }, null)]), [[_vShow, always || visible.value]])];
        }
      });
    };
  }
});
export default Thumb;