fa222c211ae4fc3bac87c98103fa5d5f0dc8e2b104804d84b6efcd620a6edfb414801cb3dd604d66f174a6a8c525c7f4f2c36a7302153de71aff1d32f9b500 3.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  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 { GlobalPointerMoveMonitor } from '../../globalPointerMoveMonitor.js';
  6. import { Widget } from '../widget.js';
  7. import { IntervalTimer, TimeoutTimer } from '../../../common/async.js';
  8. import * as dom from '../../dom.js';
  9. /**
  10. * The arrow image size.
  11. */
  12. export const ARROW_IMG_SIZE = 11;
  13. export class ScrollbarArrow extends Widget {
  14. constructor(opts) {
  15. super();
  16. this._onActivate = opts.onActivate;
  17. this.bgDomNode = document.createElement('div');
  18. this.bgDomNode.className = 'arrow-background';
  19. this.bgDomNode.style.position = 'absolute';
  20. this.bgDomNode.style.width = opts.bgWidth + 'px';
  21. this.bgDomNode.style.height = opts.bgHeight + 'px';
  22. if (typeof opts.top !== 'undefined') {
  23. this.bgDomNode.style.top = '0px';
  24. }
  25. if (typeof opts.left !== 'undefined') {
  26. this.bgDomNode.style.left = '0px';
  27. }
  28. if (typeof opts.bottom !== 'undefined') {
  29. this.bgDomNode.style.bottom = '0px';
  30. }
  31. if (typeof opts.right !== 'undefined') {
  32. this.bgDomNode.style.right = '0px';
  33. }
  34. this.domNode = document.createElement('div');
  35. this.domNode.className = opts.className;
  36. this.domNode.classList.add(...opts.icon.classNamesArray);
  37. this.domNode.style.position = 'absolute';
  38. this.domNode.style.width = ARROW_IMG_SIZE + 'px';
  39. this.domNode.style.height = ARROW_IMG_SIZE + 'px';
  40. if (typeof opts.top !== 'undefined') {
  41. this.domNode.style.top = opts.top + 'px';
  42. }
  43. if (typeof opts.left !== 'undefined') {
  44. this.domNode.style.left = opts.left + 'px';
  45. }
  46. if (typeof opts.bottom !== 'undefined') {
  47. this.domNode.style.bottom = opts.bottom + 'px';
  48. }
  49. if (typeof opts.right !== 'undefined') {
  50. this.domNode.style.right = opts.right + 'px';
  51. }
  52. this._pointerMoveMonitor = this._register(new GlobalPointerMoveMonitor());
  53. this._register(dom.addStandardDisposableListener(this.bgDomNode, dom.EventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
  54. this._register(dom.addStandardDisposableListener(this.domNode, dom.EventType.POINTER_DOWN, (e) => this._arrowPointerDown(e)));
  55. this._pointerdownRepeatTimer = this._register(new IntervalTimer());
  56. this._pointerdownScheduleRepeatTimer = this._register(new TimeoutTimer());
  57. }
  58. _arrowPointerDown(e) {
  59. if (!e.target || !(e.target instanceof Element)) {
  60. return;
  61. }
  62. const scheduleRepeater = () => {
  63. this._pointerdownRepeatTimer.cancelAndSet(() => this._onActivate(), 1000 / 24);
  64. };
  65. this._onActivate();
  66. this._pointerdownRepeatTimer.cancel();
  67. this._pointerdownScheduleRepeatTimer.cancelAndSet(scheduleRepeater, 200);
  68. this._pointerMoveMonitor.startMonitoring(e.target, e.pointerId, e.buttons, (pointerMoveData) => { }, () => {
  69. this._pointerdownRepeatTimer.cancel();
  70. this._pointerdownScheduleRepeatTimer.cancel();
  71. });
  72. e.preventDefault();
  73. }
  74. }