utils.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. import WidgetResize from '../../../src/widgetresize';
  6. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  7. export const mouseMock = {
  8. down( editor, domTarget ) {
  9. this._getPlugin( editor )._mouseDownListener( {}, {
  10. target: domTarget
  11. } );
  12. },
  13. /**
  14. * Calls the resizer `mousemove` handler with given parameters.
  15. *
  16. * @param {module:core/editor/editor~Editor} editor
  17. * @param {HTMLElement} domTarget
  18. * @param {Object} [eventData]
  19. * @param {Point} [targetPoint] Place where the pointer should be moved to, overrides `eventData.pageX` and `eventData.pageY`.
  20. */
  21. move( editor, domTarget, eventData, targetPoint ) {
  22. const combinedEventData = Object.assign( {}, eventData, {
  23. target: domTarget
  24. } );
  25. if ( targetPoint ) {
  26. combinedEventData.pageX = targetPoint.x;
  27. combinedEventData.pageY = targetPoint.y;
  28. }
  29. this._getPlugin( editor )._mouseMoveListener( {}, combinedEventData );
  30. },
  31. up( editor ) {
  32. this._getPlugin( editor )._mouseUpListener();
  33. },
  34. /**
  35. * Emulates mouse drag gesture by triggering:
  36. *
  37. * * the `mousedown` event on the `domTarget`,
  38. * * the `mousemove` event on `domTarget`, with the pointer coordinates at `finalPosition`,
  39. * * the `mouseup` event.
  40. *
  41. * @param {module:core/editor/editor~Editor} editor
  42. * @param {HTMLElement} domTarget
  43. * @param {Point} finalPosition
  44. */
  45. dragTo( editor, domTarget, finalPosition ) {
  46. const moveEventData = {
  47. pageX: finalPosition.x,
  48. pageY: finalPosition.y
  49. };
  50. this.down( editor, domTarget );
  51. this.move( editor, domTarget, moveEventData );
  52. this.up( editor );
  53. },
  54. _getPlugin( editor ) {
  55. return editor.plugins.get( WidgetResize );
  56. }
  57. };
  58. export function getWidgetDomParts( editor, widget, resizerPosition ) {
  59. const view = editor.editing.view;
  60. const domWidget = view.domConverter.mapViewToDom( widget );
  61. return {
  62. resizeWrapper: domWidget.querySelector( '.ck-widget__resizer' ),
  63. resizeHandle: domWidget.querySelector( `.ck-widget__resizer__handle-${ resizerPosition }` ),
  64. widget: domWidget
  65. };
  66. }
  67. export class Point {
  68. constructor( x, y ) {
  69. this.x = x;
  70. this.y = y;
  71. }
  72. /**
  73. * Moves the point by a given `changeX` and `changeY`.
  74. *
  75. * @param {Number} changeX
  76. * @param {Number} changeY
  77. * @returns {Point} Returns current instance.
  78. */
  79. moveBy( changeX, changeY ) {
  80. this.x += changeX;
  81. this.y += changeY;
  82. return this;
  83. }
  84. /**
  85. * @returns {Point}
  86. */
  87. clone() {
  88. return new Point( this.x, this.y );
  89. }
  90. }
  91. /**
  92. * Returns a center point for a given handle.
  93. *
  94. * @param {HTMLElement} domWrapper Wrapper of an element that contains the resizer.
  95. * @param {String} [handlePosition='top-left']
  96. * @returns {Point}
  97. */
  98. export function getHandleCenterPoint( domWrapper, handlePosition ) {
  99. const wrapperRect = new Rect( domWrapper );
  100. const returnValue = new Point( wrapperRect.left, wrapperRect.top );
  101. const cornerPositionParts = handlePosition.split( '-' );
  102. if ( cornerPositionParts.includes( 'right' ) ) {
  103. returnValue.x = wrapperRect.right;
  104. }
  105. if ( cornerPositionParts.includes( 'bottom' ) ) {
  106. returnValue.y = wrapperRect.bottom;
  107. }
  108. return returnValue;
  109. }