8
0

resize.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. /**
  2. * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /* global document, window */
  6. import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
  7. import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  8. import ImagePlugin from '../../src/image';
  9. import ImageStyle from '../../src/imagestyle';
  10. import {
  11. getData
  12. } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  13. describe.only( 'Image resizer', () => {
  14. const FIXTURE_WIDTH = 100;
  15. const FIXTURE_HEIGHT = 50;
  16. const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.
  17. // 60x30 black png image
  18. const imageFixture = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  19. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  20. let editor, view, viewDocument, editorElement;
  21. beforeEach( () => {
  22. editorElement = document.createElement( 'div' );
  23. editorElement.innerHTML = `<p>foo</p><figure><img src="${ imageFixture }"></figure>`;
  24. document.body.appendChild( editorElement );
  25. return ClassicTestEditor
  26. .create( editorElement, {
  27. plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin ]
  28. } )
  29. .then( newEditor => {
  30. editor = newEditor;
  31. view = editor.editing.view;
  32. viewDocument = view.document;
  33. } );
  34. } );
  35. afterEach( () => {
  36. editorElement.remove();
  37. return editor.destroy();
  38. } );
  39. describe( 'visual resizers', () => {
  40. it( 'correct amount is added by default', () => {
  41. const resizers = document.querySelectorAll( '.ck-widget__resizer' );
  42. expect( resizers.length ).to.be.equal( 4 );
  43. } );
  44. describe( 'visibility', () => {
  45. it( 'is hidden by default', () => {
  46. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  47. for ( const resizer of allResizers ) {
  48. expect( isVisible( resizer ) ).to.be.false;
  49. }
  50. } );
  51. it( 'is shown when image is focused', () => {
  52. const widget = viewDocument.getRoot().getChild( 1 );
  53. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  54. const domEventDataMock = {
  55. target: widget,
  56. preventDefault: sinon.spy()
  57. };
  58. viewDocument.fire( 'mousedown', domEventDataMock );
  59. for ( const resizer of allResizers ) {
  60. expect( isVisible( resizer ) ).to.be.true;
  61. }
  62. } );
  63. } );
  64. } );
  65. describe( 'standard image', () => {
  66. let widget;
  67. beforeEach( async () => {
  68. await editor.setData( `<p>foo</p><figure><img src="${ imageFixture }"></figure>` );
  69. widget = viewDocument.getRoot().getChild( 1 );
  70. const domEventDataMock = {
  71. target: widget,
  72. preventDefault: sinon.spy()
  73. };
  74. viewDocument.fire( 'mousedown', domEventDataMock );
  75. } );
  76. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  77. expectedWidth: 80,
  78. pointerOffset: { x: 10, y: -10 },
  79. resizerPosition: 'bottom-left'
  80. } ) );
  81. it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
  82. expectedWidth: 80,
  83. pointerOffset: { x: -10, y: -10 },
  84. resizerPosition: 'bottom-right'
  85. } ) );
  86. it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
  87. expectedWidth: 110,
  88. pointerOffset: { x: 10, y: 0 },
  89. resizerPosition: 'bottom-right'
  90. } ) );
  91. it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
  92. expectedWidth: 120,
  93. pointerOffset: { x: 0, y: 10 },
  94. resizerPosition: 'bottom-right'
  95. } ) );
  96. it( 'enlarges correctly with left-bottom handler, x axis only', generateResizeTest( {
  97. expectedWidth: 110,
  98. pointerOffset: { x: -10, y: 0 },
  99. resizerPosition: 'bottom-left'
  100. } ) );
  101. it( 'enlarges correctly with left-bottom handler, y axis only', generateResizeTest( {
  102. expectedWidth: 120,
  103. pointerOffset: { x: 0, y: 10 },
  104. resizerPosition: 'bottom-left'
  105. } ) );
  106. // --- top handlers ---
  107. it( 'enlarges correctly with left-top handler', generateResizeTest( {
  108. expectedWidth: 120,
  109. pointerOffset: { x: -10, y: -10 },
  110. resizerPosition: 'top-left'
  111. } ) );
  112. it( 'enlarges correctly with left-top handler, y axis only', generateResizeTest( {
  113. expectedWidth: 120,
  114. pointerOffset: { x: 0, y: -10 },
  115. resizerPosition: 'top-left'
  116. } ) );
  117. it( 'enlarges correctly with right-top handler', generateResizeTest( {
  118. expectedWidth: 120,
  119. pointerOffset: { x: 10, y: -10 },
  120. resizerPosition: 'top-right'
  121. } ) );
  122. it( 'enlarges correctly with left-right handler, y axis only', generateResizeTest( {
  123. expectedWidth: 120,
  124. pointerOffset: { x: 0, y: -10 },
  125. resizerPosition: 'top-right'
  126. } ) );
  127. function generateResizeTest( options ) {
  128. // options.resizerPosition - top-left / top-right / bottom-right / bottom-left
  129. // options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
  130. // e.g. { x: 10, y: -5 }
  131. // options.expectedWidth
  132. // Returns a test case that puts
  133. return () => {
  134. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  135. const domBottomLeftResizer = domResizeWrapper.querySelector( `.ck-widget__resizer-${ options.resizerPosition }` );
  136. const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
  137. const imageTopLeftPosition = getElementPosition( domImage );
  138. const resizerPositionParts = options.resizerPosition.split( '-' );
  139. const initialPointerPosition = {
  140. pageX: imageTopLeftPosition.x,
  141. pageY: imageTopLeftPosition.y
  142. };
  143. if ( resizerPositionParts.includes( 'right' ) ) {
  144. initialPointerPosition.pageX += FIXTURE_WIDTH;
  145. }
  146. if ( resizerPositionParts.includes( 'bottom' ) ) {
  147. initialPointerPosition.pageY += FIXTURE_HEIGHT;
  148. }
  149. const finishPointerPosition = Object.assign( {}, initialPointerPosition );
  150. finishPointerPosition.pageX += options.pointerOffset.x || 0;
  151. finishPointerPosition.pageY += options.pointerOffset.y || 0;
  152. fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
  153. fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
  154. // We need to wait as mousemove events are throttled.
  155. return wait( 30 )
  156. .then( () => {
  157. fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
  158. expect( domImage.width ).to.be.closeTo( options.expectedWidth, 1 );
  159. fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
  160. expect( getData( editor.model, {
  161. withoutSelection: true
  162. } ) ).to.match( /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/ );
  163. const modelItem = editor.model.document.getRoot().getChild( 1 );
  164. expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( options.expectedWidth, 1, 'Model check' );
  165. } );
  166. };
  167. }
  168. } );
  169. describe( 'side image', () => {
  170. let widget;
  171. beforeEach( async () => {
  172. await editor.setData( `<p>foo</p><figure class="image image-style-side"><img src="${ imageFixture }"></figure>` );
  173. widget = viewDocument.getRoot().getChild( 1 );
  174. const domEventDataMock = {
  175. target: widget,
  176. preventDefault: sinon.spy()
  177. };
  178. viewDocument.fire( 'mousedown', domEventDataMock );
  179. } );
  180. it( 'shrinks correctly with left-bottom handler', () => {
  181. const expectedWidth = 80;
  182. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  183. const domBottomLeftResizer = domResizeWrapper.querySelector( '.ck-widget__resizer-bottom-left' );
  184. const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
  185. const imageTopLeftPosition = getElementPosition( domImage );
  186. const initialPointerPosition = {
  187. pageX: imageTopLeftPosition.x,
  188. pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT
  189. };
  190. const finishPointerPosition = {
  191. pageX: imageTopLeftPosition.x + 20,
  192. pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT - 10
  193. };
  194. fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
  195. fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
  196. // We need to wait as mousemove events are throttled.
  197. return wait( 30 )
  198. .then( () => {
  199. fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
  200. expect( domImage.width ).to.be.closeTo( expectedWidth, 1, 'View width check' );
  201. fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
  202. expect( getData( editor.model, {
  203. withoutSelection: true
  204. } ) ).to.match( /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/ );
  205. const modelItem = editor.model.document.getRoot().getChild( 1 );
  206. expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( expectedWidth, 1, 'Model check' );
  207. } );
  208. } );
  209. it( 'shrinks correctly with right-bottom handler', () => {
  210. const expectedWidth = 80;
  211. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  212. const domBottomLeftResizer = domResizeWrapper.querySelector( '.ck-widget__resizer-bottom-left' );
  213. const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
  214. const imageTopLeftPosition = getElementPosition( domImage );
  215. const initialPointerPosition = {
  216. pageX: imageTopLeftPosition.x + FIXTURE_WIDTH,
  217. pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT
  218. };
  219. const finishPointerPosition = {
  220. pageX: imageTopLeftPosition.x + FIXTURE_WIDTH - 20,
  221. pageY: imageTopLeftPosition.y + FIXTURE_HEIGHT - 10
  222. };
  223. fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
  224. fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
  225. // We need to wait as mousemove events are throttled.
  226. return wait( 30 )
  227. .then( () => {
  228. fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
  229. expect( domImage.width ).to.be.closeTo( expectedWidth, 1 );
  230. fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
  231. expect( getData( editor.model, {
  232. withoutSelection: true
  233. } ) ).to.match( /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/ );
  234. const modelItem = editor.model.document.getRoot().getChild( 1 );
  235. expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( expectedWidth, 1, 'Model check' );
  236. } );
  237. } );
  238. } );
  239. function isVisible( element ) {
  240. // Checks if the DOM element is visible to the end user.
  241. return element.offsetParent !== null;
  242. }
  243. function fireMouseEvent( target, eventType, eventData ) {
  244. // Using initMouseEvent instead of MouseEvent constructor, as MouseEvent constructor doesn't support passing pageX
  245. // and pageY. See https://stackoverflow.com/questions/45843458/setting-click-events-pagex-and-pagey-always-reverts-to-0
  246. // However there's still a problem, that events created with `initMouseEvent` have **floored** pageX, pageY numbers.
  247. const event = document.createEvent( 'MouseEvent' );
  248. event.initMouseEvent( eventType, true, true, window, null, 0, 0, eventData.pageX, eventData.pageY, false, false, false, false,
  249. MOUSE_BUTTON_MAIN, null );
  250. target.dispatchEvent( event );
  251. }
  252. function getElementPosition( element ) {
  253. // Returns top left corner point.
  254. const viewportPosition = element.getBoundingClientRect();
  255. return {
  256. x: viewportPosition.left + window.scrollX,
  257. y: viewportPosition.top + window.scrollY
  258. };
  259. }
  260. function wait( delay ) {
  261. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  262. }
  263. } );