d470d08af781a60dd9230a511832a69061dfbb9783a516b4531495341987921c54f63cf5192919f2922013a795502649f4a3f627069841d9c5a3b7ae9c72ca 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207
  1. /*---------------------------------------------------------------------------------------------
  2. * Copyright (c) Microsoft Corporation. All rights reserved.
  3. * Licensed under the MIT License. See License.txt in the project root for license information.
  4. *--------------------------------------------------------------------------------------------*/
  5. import * as dom from '../../dom.js';
  6. import { createFastDomNode } from '../../fastDomNode.js';
  7. import { GlobalPointerMoveMonitor } from '../../globalPointerMoveMonitor.js';
  8. import { ScrollbarArrow } from './scrollbarArrow.js';
  9. import { ScrollbarVisibilityController } from './scrollbarVisibilityController.js';
  10. import { Widget } from '../widget.js';
  11. import * as platform from '../../../common/platform.js';
  12. /**
  13. * The orthogonal distance to the slider at which dragging "resets". This implements "snapping"
  14. */
  15. const POINTER_DRAG_RESET_DISTANCE = 140;
  16. export class AbstractScrollbar extends Widget {
  17. constructor(opts) {
  18. super();
  19. this._lazyRender = opts.lazyRender;
  20. this._host = opts.host;
  21. this._scrollable = opts.scrollable;
  22. this._scrollByPage = opts.scrollByPage;
  23. this._scrollbarState = opts.scrollbarState;
  24. this._visibilityController = this._register(new ScrollbarVisibilityController(opts.visibility, 'visible scrollbar ' + opts.extraScrollbarClassName, 'invisible scrollbar ' + opts.extraScrollbarClassName));
  25. this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
  26. this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
  27. this._shouldRender = true;
  28. this.domNode = createFastDomNode(document.createElement('div'));
  29. this.domNode.setAttribute('role', 'presentation');
  30. this.domNode.setAttribute('aria-hidden', 'true');
  31. this._visibilityController.setDomNode(this.domNode);
  32. this.domNode.setPosition('absolute');
  33. this._register(dom.addDisposableListener(this.domNode.domNode, dom.EventType.POINTER_DOWN, (e) => this._domNodePointerDown(e)));
  34. }
  35. // ----------------- creation
  36. /**
  37. * Creates the dom node for an arrow & adds it to the container
  38. */
  39. _createArrow(opts) {
  40. const arrow = this._register(new ScrollbarArrow(opts));
  41. this.domNode.domNode.appendChild(arrow.bgDomNode);
  42. this.domNode.domNode.appendChild(arrow.domNode);
  43. }
  44. /**
  45. * Creates the slider dom node, adds it to the container & hooks up the events
  46. */
  47. _createSlider(top, left, width, height) {
  48. this.slider = createFastDomNode(document.createElement('div'));
  49. this.slider.setClassName('slider');
  50. this.slider.setPosition('absolute');
  51. this.slider.setTop(top);
  52. this.slider.setLeft(left);
  53. if (typeof width === 'number') {
  54. this.slider.setWidth(width);
  55. }
  56. if (typeof height === 'number') {
  57. this.slider.setHeight(height);
  58. }
  59. this.slider.setLayerHinting(true);
  60. this.slider.setContain('strict');
  61. this.domNode.domNode.appendChild(this.slider.domNode);
  62. this._register(dom.addDisposableListener(this.slider.domNode, dom.EventType.POINTER_DOWN, (e) => {
  63. if (e.button === 0) {
  64. e.preventDefault();
  65. this._sliderPointerDown(e);
  66. }
  67. }));
  68. this.onclick(this.slider.domNode, e => {
  69. if (e.leftButton) {
  70. e.stopPropagation();
  71. }
  72. });
  73. }
  74. // ----------------- Update state
  75. _onElementSize(visibleSize) {
  76. if (this._scrollbarState.setVisibleSize(visibleSize)) {
  77. this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
  78. this._shouldRender = true;
  79. if (!this._lazyRender) {
  80. this.render();
  81. }
  82. }
  83. return this._shouldRender;
  84. }
  85. _onElementScrollSize(elementScrollSize) {
  86. if (this._scrollbarState.setScrollSize(elementScrollSize)) {
  87. this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
  88. this._shouldRender = true;
  89. if (!this._lazyRender) {
  90. this.render();
  91. }
  92. }
  93. return this._shouldRender;
  94. }
  95. _onElementScrollPosition(elementScrollPosition) {
  96. if (this._scrollbarState.setScrollPosition(elementScrollPosition)) {
  97. this._visibilityController.setIsNeeded(this._scrollbarState.isNeeded());
  98. this._shouldRender = true;
  99. if (!this._lazyRender) {
  100. this.render();
  101. }
  102. }
  103. return this._shouldRender;
  104. }
  105. // ----------------- rendering
  106. beginReveal() {
  107. this._visibilityController.setShouldBeVisible(true);
  108. }
  109. beginHide() {
  110. this._visibilityController.setShouldBeVisible(false);
  111. }
  112. render() {
  113. if (!this._shouldRender) {
  114. return;
  115. }
  116. this._shouldRender = false;
  117. this._renderDomNode(this._scrollbarState.getRectangleLargeSize(), this._scrollbarState.getRectangleSmallSize());
  118. this._updateSlider(this._scrollbarState.getSliderSize(), this._scrollbarState.getArrowSize() + this._scrollbarState.getSliderPosition());
  119. }
  120. // ----------------- DOM events
  121. _domNodePointerDown(e) {
  122. if (e.target !== this.domNode.domNode) {
  123. return;
  124. }
  125. this._onPointerDown(e);
  126. }
  127. delegatePointerDown(e) {
  128. const domTop = this.domNode.domNode.getClientRects()[0].top;
  129. const sliderStart = domTop + this._scrollbarState.getSliderPosition();
  130. const sliderStop = domTop + this._scrollbarState.getSliderPosition() + this._scrollbarState.getSliderSize();
  131. const pointerPos = this._sliderPointerPosition(e);
  132. if (sliderStart <= pointerPos && pointerPos <= sliderStop) {
  133. // Act as if it was a pointer down on the slider
  134. if (e.button === 0) {
  135. e.preventDefault();
  136. this._sliderPointerDown(e);
  137. }
  138. }
  139. else {
  140. // Act as if it was a pointer down on the scrollbar
  141. this._onPointerDown(e);
  142. }
  143. }
  144. _onPointerDown(e) {
  145. let offsetX;
  146. let offsetY;
  147. if (e.target === this.domNode.domNode && typeof e.offsetX === 'number' && typeof e.offsetY === 'number') {
  148. offsetX = e.offsetX;
  149. offsetY = e.offsetY;
  150. }
  151. else {
  152. const domNodePosition = dom.getDomNodePagePosition(this.domNode.domNode);
  153. offsetX = e.pageX - domNodePosition.left;
  154. offsetY = e.pageY - domNodePosition.top;
  155. }
  156. const offset = this._pointerDownRelativePosition(offsetX, offsetY);
  157. this._setDesiredScrollPositionNow(this._scrollByPage
  158. ? this._scrollbarState.getDesiredScrollPositionFromOffsetPaged(offset)
  159. : this._scrollbarState.getDesiredScrollPositionFromOffset(offset));
  160. if (e.button === 0) {
  161. // left button
  162. e.preventDefault();
  163. this._sliderPointerDown(e);
  164. }
  165. }
  166. _sliderPointerDown(e) {
  167. if (!e.target || !(e.target instanceof Element)) {
  168. return;
  169. }
  170. const initialPointerPosition = this._sliderPointerPosition(e);
  171. const initialPointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(e);
  172. const initialScrollbarState = this._scrollbarState.clone();
  173. this.slider.toggleClassName('active', true);
  174. this._pointerMoveMonitor.startMonitoring(e.target, e.pointerId, e.buttons, (pointerMoveData) => {
  175. const pointerOrthogonalPosition = this._sliderOrthogonalPointerPosition(pointerMoveData);
  176. const pointerOrthogonalDelta = Math.abs(pointerOrthogonalPosition - initialPointerOrthogonalPosition);
  177. if (platform.isWindows && pointerOrthogonalDelta > POINTER_DRAG_RESET_DISTANCE) {
  178. // The pointer has wondered away from the scrollbar => reset dragging
  179. this._setDesiredScrollPositionNow(initialScrollbarState.getScrollPosition());
  180. return;
  181. }
  182. const pointerPosition = this._sliderPointerPosition(pointerMoveData);
  183. const pointerDelta = pointerPosition - initialPointerPosition;
  184. this._setDesiredScrollPositionNow(initialScrollbarState.getDesiredScrollPositionFromDelta(pointerDelta));
  185. }, () => {
  186. this.slider.toggleClassName('active', false);
  187. this._host.onDragEnd();
  188. });
  189. this._host.onDragStart();
  190. }
  191. _setDesiredScrollPositionNow(_desiredScrollPosition) {
  192. const desiredScrollPosition = {};
  193. this.writeScrollPosition(desiredScrollPosition, _desiredScrollPosition);
  194. this._scrollable.setScrollPositionNow(desiredScrollPosition);
  195. }
  196. updateScrollbarSize(scrollbarSize) {
  197. this._updateScrollbarSize(scrollbarSize);
  198. this._scrollbarState.setScrollbarSize(scrollbarSize);
  199. this._shouldRender = true;
  200. if (!this._lazyRender) {
  201. this.render();
  202. }
  203. }
  204. isNeeded() {
  205. return this._scrollbarState.isNeeded();
  206. }
  207. }