mouse.js 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205
  1. import '../../event/behavior/click.js';
  2. import '../../event/behavior/cut.js';
  3. import '../../event/behavior/keydown.js';
  4. import '../../event/behavior/keypress.js';
  5. import '../../event/behavior/keyup.js';
  6. import '../../event/behavior/paste.js';
  7. import '@testing-library/dom';
  8. import '../../utils/dataTransfer/Clipboard.js';
  9. import { isDisabled } from '../../utils/misc/isDisabled.js';
  10. import { getTreeDiff } from '../../utils/misc/getTreeDiff.js';
  11. import { focusElement } from '../../event/focus.js';
  12. import { setSelectionPerMouseDown } from '../../event/selection/setSelectionPerMouse.js';
  13. import { modifySelectionPerMouseMove } from '../../event/selection/modifySelectionPerMouse.js';
  14. import { getMouseEventButton, Buttons } from './buttons.js';
  15. import { isDifferentPointerPosition } from './shared.js';
  16. function _define_property(obj, key, value) {
  17. if (key in obj) {
  18. Object.defineProperty(obj, key, {
  19. value: value,
  20. enumerable: true,
  21. configurable: true,
  22. writable: true
  23. });
  24. } else {
  25. obj[key] = value;
  26. }
  27. return obj;
  28. }
  29. /**
  30. * This object is the single "virtual" mouse that might be controlled by multiple different pointer devices.
  31. */ class Mouse {
  32. move(instance, position, /** Whether `preventDefault()` has been called on the `pointerdown` event */ isPrevented) {
  33. const prevPosition = this.position;
  34. const prevTarget = this.getTarget(instance);
  35. this.position = position;
  36. if (!isDifferentPointerPosition(prevPosition, position)) {
  37. return;
  38. }
  39. const nextTarget = this.getTarget(instance);
  40. const init = this.getEventInit('mousemove');
  41. const [leave, enter] = getTreeDiff(prevTarget, nextTarget);
  42. return {
  43. leave: ()=>{
  44. if (prevTarget !== nextTarget) {
  45. instance.dispatchUIEvent(prevTarget, 'mouseout', init);
  46. leave.forEach((el)=>instance.dispatchUIEvent(el, 'mouseleave', init));
  47. }
  48. },
  49. enter: ()=>{
  50. if (prevTarget !== nextTarget) {
  51. instance.dispatchUIEvent(nextTarget, 'mouseover', init);
  52. enter.forEach((el)=>instance.dispatchUIEvent(el, 'mouseenter', init));
  53. }
  54. },
  55. move: ()=>{
  56. if (isPrevented) {
  57. return;
  58. }
  59. instance.dispatchUIEvent(nextTarget, 'mousemove', init);
  60. this.modifySelecting(instance);
  61. }
  62. };
  63. }
  64. down(instance, keyDef, /** Whether `preventDefault()` has been called on the `pointerdown` event */ isPrevented) {
  65. const button = this.buttons.down(keyDef);
  66. if (button === undefined) {
  67. return;
  68. }
  69. const target = this.getTarget(instance);
  70. this.buttonDownTarget[button] = target;
  71. const init = this.getEventInit('mousedown', keyDef.button);
  72. const disabled = isDisabled(target);
  73. if (!isPrevented && (disabled || instance.dispatchUIEvent(target, 'mousedown', init))) {
  74. this.startSelecting(instance, init.detail);
  75. focusElement(target);
  76. }
  77. if (!disabled && getMouseEventButton(keyDef.button) === 2) {
  78. instance.dispatchUIEvent(target, 'contextmenu', this.getEventInit('contextmenu', keyDef.button));
  79. }
  80. }
  81. up(instance, keyDef, /** Whether `preventDefault()` has been called on the `pointerdown` event */ isPrevented) {
  82. const button = this.buttons.up(keyDef);
  83. if (button === undefined) {
  84. return;
  85. }
  86. const target = this.getTarget(instance);
  87. if (!isDisabled(target)) {
  88. if (!isPrevented) {
  89. const mouseUpInit = this.getEventInit('mouseup', keyDef.button);
  90. instance.dispatchUIEvent(target, 'mouseup', mouseUpInit);
  91. this.endSelecting();
  92. }
  93. const clickTarget = getTreeDiff(this.buttonDownTarget[button], target)[2][0];
  94. if (clickTarget) {
  95. const init = this.getEventInit('click', keyDef.button);
  96. if (init.detail) {
  97. instance.dispatchUIEvent(clickTarget, init.button === 0 ? 'click' : 'auxclick', init);
  98. if (init.button === 0 && init.detail === 2) {
  99. instance.dispatchUIEvent(clickTarget, 'dblclick', {
  100. ...this.getEventInit('dblclick', keyDef.button),
  101. detail: init.detail
  102. });
  103. }
  104. }
  105. }
  106. }
  107. }
  108. resetClickCount() {
  109. this.clickCount.reset();
  110. }
  111. getEventInit(type, button) {
  112. const init = {
  113. ...this.position.coords
  114. };
  115. init.button = getMouseEventButton(button);
  116. init.buttons = this.buttons.getButtons();
  117. if (type === 'mousedown') {
  118. init.detail = this.clickCount.getOnDown(init.button);
  119. } else if (type === 'mouseup') {
  120. init.detail = this.clickCount.getOnUp(init.button);
  121. } else if (type === 'click' || type === 'auxclick') {
  122. init.detail = this.clickCount.incOnClick(init.button);
  123. }
  124. return init;
  125. }
  126. getTarget(instance) {
  127. var _this_position_target;
  128. return (_this_position_target = this.position.target) !== null && _this_position_target !== undefined ? _this_position_target : instance.config.document.body;
  129. }
  130. startSelecting(instance, clickCount) {
  131. var _this_position_caret, _this_position_caret1;
  132. // TODO: support extending range (shift)
  133. this.selecting = setSelectionPerMouseDown({
  134. document: instance.config.document,
  135. target: this.getTarget(instance),
  136. node: (_this_position_caret = this.position.caret) === null || _this_position_caret === undefined ? undefined : _this_position_caret.node,
  137. offset: (_this_position_caret1 = this.position.caret) === null || _this_position_caret1 === undefined ? undefined : _this_position_caret1.offset,
  138. clickCount
  139. });
  140. }
  141. modifySelecting(instance) {
  142. var _this_position_caret, _this_position_caret1;
  143. if (!this.selecting) {
  144. return;
  145. }
  146. modifySelectionPerMouseMove(this.selecting, {
  147. document: instance.config.document,
  148. target: this.getTarget(instance),
  149. node: (_this_position_caret = this.position.caret) === null || _this_position_caret === undefined ? undefined : _this_position_caret.node,
  150. offset: (_this_position_caret1 = this.position.caret) === null || _this_position_caret1 === undefined ? undefined : _this_position_caret1.offset
  151. });
  152. }
  153. endSelecting() {
  154. this.selecting = undefined;
  155. }
  156. constructor(){
  157. _define_property(this, "position", {});
  158. _define_property(this, "buttons", new Buttons());
  159. _define_property(this, "selecting", undefined);
  160. _define_property(this, "buttonDownTarget", {});
  161. // According to spec the `detail` on click events should be the number
  162. // of *consecutive* clicks with a specific button.
  163. // On `mousedown` and `mouseup` it should be this number increased by one.
  164. // But the browsers don't implement it this way.
  165. // If another button is pressed,
  166. // in Webkit: the `mouseup` on the previously pressed button has `detail: 0` and no `click`/`auxclick`.
  167. // in Gecko: the `mouseup` and click events have the same detail as the `mousedown`.
  168. // If there is a delay while a button is pressed,
  169. // the `mouseup` and `click` are normal, but a following `mousedown` starts a new click count.
  170. // We'll follow the minimal implementation of Webkit.
  171. _define_property(this, "clickCount", new class {
  172. incOnClick(button) {
  173. const current = this.down[button] === undefined ? undefined : Number(this.down[button]) + 1;
  174. this.count = this.count[button] === undefined ? {} : {
  175. [button]: Number(this.count[button]) + 1
  176. };
  177. return current;
  178. }
  179. getOnDown(button) {
  180. var _this_count_button;
  181. this.down = {
  182. [button]: (_this_count_button = this.count[button]) !== null && _this_count_button !== undefined ? _this_count_button : 0
  183. };
  184. var _this_count_button1;
  185. this.count = {
  186. [button]: (_this_count_button1 = this.count[button]) !== null && _this_count_button1 !== undefined ? _this_count_button1 : 0
  187. };
  188. return Number(this.count[button]) + 1;
  189. }
  190. getOnUp(button) {
  191. return this.down[button] === undefined ? undefined : Number(this.down[button]) + 1;
  192. }
  193. reset() {
  194. this.count = {};
  195. }
  196. constructor(){
  197. _define_property(this, "down", {});
  198. _define_property(this, "count", {});
  199. }
  200. }());
  201. }
  202. }
  203. export { Mouse };