utils.js 4.2 KB

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