mousewheel.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2. var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3. if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4. else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5. return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. import { ModifierKey, Dom, NumberExt, Disposable } from '@antv/x6-common';
  8. import { Base } from './base';
  9. export class MouseWheel extends Base {
  10. constructor() {
  11. super(...arguments);
  12. this.cumulatedFactor = 1;
  13. }
  14. get widgetOptions() {
  15. return this.options.mousewheel;
  16. }
  17. init() {
  18. this.container = this.graph.container;
  19. this.target = this.widgetOptions.global ? document : this.container;
  20. this.mousewheelHandle = new Dom.MouseWheelHandle(this.target, this.onMouseWheel.bind(this), this.allowMouseWheel.bind(this));
  21. if (this.widgetOptions.enabled) {
  22. this.enable(true);
  23. }
  24. }
  25. get disabled() {
  26. return this.widgetOptions.enabled !== true;
  27. }
  28. enable(force) {
  29. if (this.disabled || force) {
  30. this.widgetOptions.enabled = true;
  31. this.mousewheelHandle.enable();
  32. }
  33. }
  34. disable() {
  35. if (!this.disabled) {
  36. this.widgetOptions.enabled = false;
  37. this.mousewheelHandle.disable();
  38. }
  39. }
  40. allowMouseWheel(e) {
  41. const guard = this.widgetOptions.guard;
  42. return ((guard == null || guard(e)) &&
  43. ModifierKey.isMatch(e, this.widgetOptions.modifiers));
  44. }
  45. onMouseWheel(e) {
  46. const guard = this.widgetOptions.guard;
  47. if ((guard == null || guard(e)) &&
  48. ModifierKey.isMatch(e, this.widgetOptions.modifiers)) {
  49. const factor = this.widgetOptions.factor || 1.2;
  50. if (this.currentScale == null) {
  51. this.startPos = { x: e.clientX, y: e.clientY };
  52. this.currentScale = this.graph.transform.getScale().sx;
  53. }
  54. const delta = e.deltaY;
  55. if (delta < 0) {
  56. // zoomin
  57. // ------
  58. // Switches to 1% zoom steps below 15%
  59. if (this.currentScale < 0.15) {
  60. this.cumulatedFactor = (this.currentScale + 0.01) / this.currentScale;
  61. }
  62. else {
  63. // Uses to 5% zoom steps for better grid rendering in
  64. // webkit and to avoid rounding errors for zoom steps
  65. this.cumulatedFactor =
  66. Math.round(this.currentScale * factor * 20) / 20 / this.currentScale;
  67. if (this.cumulatedFactor === 1) {
  68. this.cumulatedFactor = 1.05;
  69. }
  70. }
  71. }
  72. else {
  73. // zoomout
  74. // -------
  75. // Switches to 1% zoom steps below 15%
  76. if (this.currentScale <= 0.15) {
  77. this.cumulatedFactor = (this.currentScale - 0.01) / this.currentScale;
  78. }
  79. else {
  80. // Uses to 5% zoom steps for better grid rendering in
  81. // webkit and to avoid rounding errors for zoom steps
  82. this.cumulatedFactor =
  83. Math.round(this.currentScale * (1 / factor) * 20) /
  84. 20 /
  85. this.currentScale;
  86. if (this.cumulatedFactor === 1) {
  87. this.cumulatedFactor = 0.95;
  88. }
  89. }
  90. }
  91. this.cumulatedFactor = Math.max(0.01, Math.min(this.currentScale * this.cumulatedFactor, 160) /
  92. this.currentScale);
  93. const currentScale = this.currentScale;
  94. let targetScale = this.graph.transform.clampScale(currentScale * this.cumulatedFactor);
  95. const minScale = this.widgetOptions.minScale || Number.MIN_SAFE_INTEGER;
  96. const maxScale = this.widgetOptions.maxScale || Number.MAX_SAFE_INTEGER;
  97. targetScale = NumberExt.clamp(targetScale, minScale, maxScale);
  98. if (targetScale !== currentScale) {
  99. if (this.widgetOptions.zoomAtMousePosition) {
  100. const hasScroller = !!this.graph.getPlugin('scroller');
  101. const origin = hasScroller
  102. ? this.graph.clientToLocal(this.startPos)
  103. : this.graph.clientToGraph(this.startPos);
  104. this.graph.zoom(targetScale, {
  105. absolute: true,
  106. center: origin.clone(),
  107. });
  108. }
  109. else {
  110. this.graph.zoom(targetScale, { absolute: true });
  111. }
  112. }
  113. this.currentScale = null;
  114. this.cumulatedFactor = 1;
  115. }
  116. }
  117. dispose() {
  118. this.disable();
  119. }
  120. }
  121. __decorate([
  122. Disposable.dispose()
  123. ], MouseWheel.prototype, "dispose", null);
  124. //# sourceMappingURL=mousewheel.js.map