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.

69 lines
2.6 KiB

3 months ago
  1. import { defineComponent, inject, ref, openBlock, createElementBlock, Fragment, createVNode } from 'vue';
  2. import { GAP } from './util.mjs';
  3. import Thumb from './thumb2.mjs';
  4. import { barProps } from './bar.mjs';
  5. import { scrollbarContextKey } from './constants.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. const _sfc_main = /* @__PURE__ */ defineComponent({
  8. __name: "bar",
  9. props: barProps,
  10. setup(__props, { expose }) {
  11. const props = __props;
  12. const scrollbar = inject(scrollbarContextKey);
  13. const moveX = ref(0);
  14. const moveY = ref(0);
  15. const sizeWidth = ref("");
  16. const sizeHeight = ref("");
  17. const ratioY = ref(1);
  18. const ratioX = ref(1);
  19. const handleScroll = (wrap) => {
  20. if (wrap) {
  21. const offsetHeight = wrap.offsetHeight - GAP;
  22. const offsetWidth = wrap.offsetWidth - GAP;
  23. moveY.value = wrap.scrollTop * 100 / offsetHeight * ratioY.value;
  24. moveX.value = wrap.scrollLeft * 100 / offsetWidth * ratioX.value;
  25. }
  26. };
  27. const update = () => {
  28. const wrap = scrollbar == null ? void 0 : scrollbar.wrapElement;
  29. if (!wrap)
  30. return;
  31. const offsetHeight = wrap.offsetHeight - GAP;
  32. const offsetWidth = wrap.offsetWidth - GAP;
  33. const originalHeight = offsetHeight ** 2 / wrap.scrollHeight;
  34. const originalWidth = offsetWidth ** 2 / wrap.scrollWidth;
  35. const height = Math.max(originalHeight, props.minSize);
  36. const width = Math.max(originalWidth, props.minSize);
  37. ratioY.value = originalHeight / (offsetHeight - originalHeight) / (height / (offsetHeight - height));
  38. ratioX.value = originalWidth / (offsetWidth - originalWidth) / (width / (offsetWidth - width));
  39. sizeHeight.value = height + GAP < offsetHeight ? `${height}px` : "";
  40. sizeWidth.value = width + GAP < offsetWidth ? `${width}px` : "";
  41. };
  42. expose({
  43. handleScroll,
  44. update
  45. });
  46. return (_ctx, _cache) => {
  47. return openBlock(), createElementBlock(Fragment, null, [
  48. createVNode(Thumb, {
  49. move: moveX.value,
  50. ratio: ratioX.value,
  51. size: sizeWidth.value,
  52. always: _ctx.always
  53. }, null, 8, ["move", "ratio", "size", "always"]),
  54. createVNode(Thumb, {
  55. move: moveY.value,
  56. ratio: ratioY.value,
  57. size: sizeHeight.value,
  58. vertical: "",
  59. always: _ctx.always
  60. }, null, 8, ["move", "ratio", "size", "always"])
  61. ], 64);
  62. };
  63. }
  64. });
  65. var Bar = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bar.vue"]]);
  66. export { Bar as default };
  67. //# sourceMappingURL=bar2.mjs.map