utils.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  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. move( editor, domTarget, eventData ) {
  14. const combinedEventData = Object.assign( {}, eventData, {
  15. target: domTarget
  16. } );
  17. this._getPlugin( editor )._mouseMoveListener( {}, combinedEventData );
  18. },
  19. up( editor ) {
  20. this._getPlugin( editor )._mouseUpListener();
  21. },
  22. /**
  23. * Emulates mouse drag gesture by triggering:
  24. *
  25. * * the `mousedown` event on the `domTarget`,
  26. * * the `mousemove` event on `domTarget`, with the pointer coordinates at `finalPosition`,
  27. * * the `mouseup` event.
  28. *
  29. * @param {module:core/editor/editor~Editor} editor
  30. * @param {HTMLElement} domTarget
  31. * @param {Point} finalPosition
  32. */
  33. dragTo( editor, domTarget, finalPosition ) {
  34. const moveEventData = {
  35. pageX: finalPosition.x,
  36. pageY: finalPosition.y
  37. };
  38. this.down( editor, domTarget );
  39. this.move( editor, domTarget, moveEventData );
  40. this.up( editor );
  41. },
  42. _getPlugin( editor ) {
  43. return editor.plugins.get( WidgetResize );
  44. }
  45. };
  46. export function getWidgetDomParts( editor, widget, resizerPosition ) {
  47. const view = editor.editing.view;
  48. const domWidget = view.domConverter.mapViewToDom( widget );
  49. return {
  50. resizeWrapper: domWidget.querySelector( '.ck-widget__resizer' ),
  51. resizeHandle: domWidget.querySelector( `.ck-widget__resizer__handle-${ resizerPosition }` ),
  52. widget: domWidget
  53. };
  54. }
  55. export class Point {
  56. constructor( x, y ) {
  57. this.x = x;
  58. this.y = y;
  59. }
  60. /**
  61. * Moves the point by a given `changeX` and `changeY`.
  62. *
  63. * @param {Number} changeX
  64. * @param {Number} changeY
  65. * @returns {Point} Returns current instance.
  66. */
  67. moveBy( changeX, changeY ) {
  68. this.x += changeX;
  69. this.y += changeY;
  70. return this;
  71. }
  72. /**
  73. * @returns {Point}
  74. */
  75. clone() {
  76. return new Point( this.x, this.y );
  77. }
  78. }
  79. /**
  80. * Returns a center point for a given handle.
  81. *
  82. * @param {HTMLElement} domWrapper Wrapper of an element that contains the resizer.
  83. * @param {String} [handlePosition='top-left']
  84. * @returns {Point}
  85. */
  86. export function getHandleCenterPoint( domWrapper, handlePosition ) {
  87. const wrapperRect = new Rect( domWrapper );
  88. const returnValue = new Point( wrapperRect.left, wrapperRect.top );
  89. const cornerPositionParts = handlePosition.split( '-' );
  90. if ( cornerPositionParts.includes( 'right' ) ) {
  91. returnValue.x = wrapperRect.right;
  92. }
  93. if ( cornerPositionParts.includes( 'bottom' ) ) {
  94. returnValue.y = wrapperRect.bottom;
  95. }
  96. return returnValue;
  97. }