utils.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  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 resizerMouseSimulator = {
  8. down( editor, domTarget, stop = sinon.spy().named( 'stop' ) ) {
  9. this._getPlugin( editor )._mouseDownListener( { stop }, { domTarget } );
  10. },
  11. /**
  12. * Calls the resizer `mousemove` handler with given parameters.
  13. *
  14. * @param {module:core/editor/editor~Editor} editor
  15. * @param {HTMLElement} domTarget
  16. * @param {Object} [eventData]
  17. * @param {Point} [targetPoint] Place where the pointer should be moved to, overrides `eventData.pageX` and `eventData.pageY`.
  18. */
  19. move( editor, domTarget, eventData, targetPoint ) {
  20. const combinedEventData = Object.assign( {}, eventData, {
  21. target: domTarget
  22. } );
  23. if ( targetPoint ) {
  24. combinedEventData.pageX = targetPoint.x;
  25. combinedEventData.pageY = targetPoint.y;
  26. }
  27. this._getPlugin( editor )._mouseMoveListener( {}, combinedEventData );
  28. },
  29. up( editor ) {
  30. this._getPlugin( editor )._mouseUpListener();
  31. },
  32. /**
  33. * Emulates mouse drag gesture by triggering:
  34. *
  35. * * the `mousedown` event on the `domTarget`,
  36. * * the `mousemove` event on `domTarget`, with the pointer coordinates at `position.from`,
  37. * * the `mousemove` event on `domTarget`, with the pointer coordinates at `position.to` (fired
  38. * only if `position.to` differs from `position.from`),
  39. * * the `mouseup` event.
  40. *
  41. * @param {module:core/editor/editor~Editor} editor
  42. * @param {HTMLElement} domTarget
  43. * @param {Object/Point} position If a `Point` instance is given, the drag is performed without acutal pointer move.
  44. * @param {Point} position.from Coordinates of where the drag begins.
  45. * @param {Point} position.to Coordinates of where the drag ends.
  46. */
  47. dragTo( editor, domTarget, position ) {
  48. const fromPosition = position.from || position;
  49. const finalPosition = position.to || position;
  50. this.down( editor, domTarget );
  51. this.move( editor, domTarget, {
  52. pageX: fromPosition.x,
  53. pageY: fromPosition.y
  54. } );
  55. if ( !finalPosition.equals( fromPosition ) ) {
  56. this.move( editor, domTarget, {
  57. pageX: finalPosition.x,
  58. pageY: finalPosition.y
  59. } );
  60. }
  61. this.up( editor );
  62. },
  63. _getPlugin( editor ) {
  64. return editor.plugins.get( WidgetResize );
  65. }
  66. };
  67. export function getWidgetDomParts( editor, widget, resizerPosition ) {
  68. const view = editor.editing.view;
  69. const domWidget = view.domConverter.mapViewToDom( widget );
  70. return {
  71. resizeWrapper: domWidget.querySelector( '.ck-widget__resizer' ),
  72. resizeHandle: domWidget.querySelector( `.ck-widget__resizer__handle-${ resizerPosition }` ),
  73. widget: domWidget
  74. };
  75. }
  76. export class Point {
  77. constructor( x, y ) {
  78. this.x = x;
  79. this.y = y;
  80. }
  81. /**
  82. * Moves the point by a given `changeX` and `changeY`.
  83. *
  84. * @param {Number} changeX
  85. * @param {Number} changeY
  86. * @returns {Point} Returns current instance.
  87. */
  88. moveBy( changeX, changeY ) {
  89. this.x += changeX;
  90. this.y += changeY;
  91. return this;
  92. }
  93. /**
  94. * @returns {Point}
  95. */
  96. clone() {
  97. return new Point( this.x, this.y );
  98. }
  99. /**
  100. * Checks if two points are equal.
  101. *
  102. * @param {Point} pointB
  103. * @returns {Boolean}
  104. */
  105. equals( pointB ) {
  106. return pointB.x == this.x && pointB.y == this.y;
  107. }
  108. }
  109. /**
  110. * Returns a center point for a given handle.
  111. *
  112. * @param {HTMLElement} domWrapper Wrapper of an element that contains the resizer.
  113. * @param {String} [handlePosition='top-left']
  114. * @returns {Point}
  115. */
  116. export function getHandleCenterPoint( domWrapper, handlePosition ) {
  117. const wrapperRect = new Rect( domWrapper );
  118. const returnValue = new Point( wrapperRect.left, wrapperRect.top );
  119. const cornerPositionParts = handlePosition.split( '-' );
  120. if ( cornerPositionParts.includes( 'right' ) ) {
  121. returnValue.x = wrapperRect.right;
  122. }
  123. if ( cornerPositionParts.includes( 'bottom' ) ) {
  124. returnValue.y = wrapperRect.bottom;
  125. }
  126. return returnValue;
  127. }
  128. export function focusEditor( editor ) {
  129. editor.editing.view.focus();
  130. editor.ui.focusTracker.isFocused = true;
  131. }