8
0

resize.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528
  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. // ClassicTestEditor can't be used, as it doesn't handle the focus, which is needed to test resizer visual cues.
  7. import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
  8. import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import ImagePlugin from '../../src/image';
  10. import ImageResizePlugin from '../../src/image/imageresize';
  11. import ImageStyle from '../../src/imagestyle';
  12. import UndoPlugin from '@ckeditor/ckeditor5-undo/src/undo';
  13. import TablePlugin from '@ckeditor/ckeditor5-table/src/table';
  14. import {
  15. getData
  16. } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  17. describe( 'Image resizer', () => {
  18. const FIXTURE_WIDTH = 100;
  19. const FIXTURE_HEIGHT = 50;
  20. const MOUSE_BUTTON_MAIN = 0; // Id of left mouse button.
  21. let absoluteContainer;
  22. // 60x50 black png image
  23. const imageFixture = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  24. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  25. let editor, view, viewDocument, editorElement;
  26. before( () => {
  27. // This container is required to position editor element in a reliable element.
  28. // See fireMouseEvent method for more information regarding imprecise mouse position.
  29. absoluteContainer = document.createElement( 'div' );
  30. absoluteContainer.style.top = '50px';
  31. absoluteContainer.style.left = '50px';
  32. absoluteContainer.style.height = '1000px';
  33. absoluteContainer.style.width = '500px';
  34. absoluteContainer.style.position = 'absolute';
  35. document.body.appendChild( absoluteContainer );
  36. } );
  37. after( () => {
  38. absoluteContainer.remove();
  39. } );
  40. beforeEach( () => {
  41. editorElement = document.createElement( 'div' );
  42. editorElement.innerHTML = `<p>foo</p><figure><img src="${ imageFixture }"></figure>`;
  43. absoluteContainer.appendChild( editorElement );
  44. return ClassicEditor
  45. .create( editorElement, {
  46. plugins: [ ImagePlugin, ImageStyle, ParagraphPlugin, UndoPlugin, TablePlugin, ImageResizePlugin ]
  47. } )
  48. .then( newEditor => {
  49. editor = newEditor;
  50. view = editor.editing.view;
  51. viewDocument = view.document;
  52. } );
  53. } );
  54. afterEach( () => {
  55. editorElement.remove();
  56. return editor.destroy();
  57. } );
  58. describe( 'visual resizers', () => {
  59. it( 'correct amount is added by default', () => {
  60. const resizers = document.querySelectorAll( '.ck-widget__resizer' );
  61. expect( resizers.length ).to.be.equal( 4 );
  62. } );
  63. describe( 'visibility', () => {
  64. it( 'is hidden by default', () => {
  65. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  66. for ( const resizer of allResizers ) {
  67. expect( isVisible( resizer ) ).to.be.false;
  68. }
  69. } );
  70. it( 'is shown when image is focused', () => {
  71. const widget = viewDocument.getRoot().getChild( 1 );
  72. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  73. const domEventDataMock = {
  74. target: widget,
  75. preventDefault: sinon.spy()
  76. };
  77. focusEditor( editor );
  78. viewDocument.fire( 'mousedown', domEventDataMock );
  79. for ( const resizer of allResizers ) {
  80. expect( isVisible( resizer ) ).to.be.true;
  81. }
  82. } );
  83. } );
  84. } );
  85. describe( 'standard image', () => {
  86. let widget;
  87. beforeEach( async function() {
  88. await editor.setData( `<p>foo</p><figure><img src="${ imageFixture }"></figure>` );
  89. widget = viewDocument.getRoot().getChild( 1 );
  90. const domEventDataMock = {
  91. target: widget,
  92. preventDefault: sinon.spy()
  93. };
  94. this.widget = widget;
  95. viewDocument.fire( 'mousedown', domEventDataMock );
  96. } );
  97. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  98. expectedWidth: 80,
  99. pointerOffset: {
  100. x: 10,
  101. y: -10
  102. },
  103. resizerPosition: 'bottom-left'
  104. } ) );
  105. it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
  106. expectedWidth: 80,
  107. pointerOffset: {
  108. x: -10,
  109. y: -10
  110. },
  111. resizerPosition: 'bottom-right'
  112. } ) );
  113. it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
  114. expectedWidth: 120,
  115. pointerOffset: {
  116. x: 10,
  117. y: 0
  118. },
  119. resizerPosition: 'bottom-right'
  120. } ) );
  121. it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
  122. expectedWidth: 120,
  123. pointerOffset: {
  124. x: 0,
  125. y: 10
  126. },
  127. resizerPosition: 'bottom-right'
  128. } ) );
  129. it( 'enlarges correctly with left-bottom handler, x axis only', generateResizeTest( {
  130. expectedWidth: 120,
  131. pointerOffset: {
  132. x: -10,
  133. y: 0
  134. },
  135. resizerPosition: 'bottom-left'
  136. } ) );
  137. it( 'enlarges correctly with left-bottom handler, y axis only', generateResizeTest( {
  138. expectedWidth: 120,
  139. pointerOffset: {
  140. x: 0,
  141. y: 10
  142. },
  143. resizerPosition: 'bottom-left'
  144. } ) );
  145. // --- top handlers ---
  146. it( 'enlarges correctly with left-top handler', generateResizeTest( {
  147. expectedWidth: 120,
  148. pointerOffset: {
  149. x: -10,
  150. y: -10
  151. },
  152. resizerPosition: 'top-left'
  153. } ) );
  154. it( 'enlarges correctly with left-top handler, y axis only', generateResizeTest( {
  155. expectedWidth: 120,
  156. pointerOffset: {
  157. x: 0,
  158. y: -10
  159. },
  160. resizerPosition: 'top-left'
  161. } ) );
  162. it( 'enlarges correctly with right-top handler', generateResizeTest( {
  163. expectedWidth: 120,
  164. pointerOffset: {
  165. x: 10,
  166. y: -10
  167. },
  168. resizerPosition: 'top-right'
  169. } ) );
  170. it( 'enlarges correctly with right-top handler, y axis only', generateResizeTest( {
  171. expectedWidth: 120,
  172. pointerOffset: {
  173. x: 0,
  174. y: -10
  175. },
  176. resizerPosition: 'top-right'
  177. } ) );
  178. it( 'generates a proper output markup', async function() {
  179. await generateResizeTest( {
  180. expectedWidth: 120,
  181. pointerOffset: {
  182. x: 0,
  183. y: -10
  184. },
  185. resizerPosition: 'top-right'
  186. } ).call( this );
  187. expect( editor.getData() ).to.be.equal(
  188. `<p>foo</p><figure class="image ck_resized"><img style="width:120px;" src="${ imageFixture }"></figure>` );
  189. } );
  190. } );
  191. describe( 'side image', () => {
  192. let widget;
  193. beforeEach( async function() {
  194. await editor.setData( `<p>foo</p><figure class="image image-style-side"><img src="${ imageFixture }"></figure>` );
  195. widget = viewDocument.getRoot().getChild( 1 );
  196. const domEventDataMock = {
  197. target: widget,
  198. preventDefault: sinon.spy()
  199. };
  200. this.widget = widget;
  201. viewDocument.fire( 'mousedown', domEventDataMock );
  202. } );
  203. it( 'shrinks correctly with left-bottom handler', generateSideResizeTest( {
  204. isSideImage: true,
  205. expectedWidth: 80,
  206. pointerOffset: {
  207. x: 20,
  208. y: -10
  209. },
  210. resizerPosition: 'bottom-left'
  211. } ) );
  212. it( 'shrinks correctly with right-bottom handler', generateSideResizeTest( {
  213. isSideImage: true,
  214. expectedWidth: 80,
  215. pointerOffset: {
  216. x: -20,
  217. y: -10
  218. },
  219. resizerPosition: 'bottom-right'
  220. } ) );
  221. it( 'shrinks correctly with left-top handler', generateSideResizeTest( {
  222. isSideImage: true,
  223. expectedWidth: 80,
  224. pointerOffset: {
  225. x: 20,
  226. y: 10
  227. },
  228. resizerPosition: 'top-left'
  229. } ) );
  230. it( 'shrinks correctly with right-top handler', generateSideResizeTest( {
  231. isSideImage: true,
  232. expectedWidth: 80,
  233. pointerOffset: {
  234. x: -20,
  235. y: 10
  236. },
  237. resizerPosition: 'top-right'
  238. } ) );
  239. it( 'enlarges correctly with left-bottom handler', generateSideResizeTest( {
  240. isSideImage: true,
  241. expectedWidth: 120,
  242. pointerOffset: {
  243. x: -10,
  244. y: 10
  245. },
  246. resizerPosition: 'bottom-left'
  247. } ) );
  248. it( 'enlarges correctly with right-bottom handler', generateSideResizeTest( {
  249. isSideImage: true,
  250. expectedWidth: 120,
  251. pointerOffset: {
  252. x: 10,
  253. y: 10
  254. },
  255. resizerPosition: 'bottom-right'
  256. } ) );
  257. it( 'enlarges correctly with right-bottom handler, y axis only', generateSideResizeTest( {
  258. isSideImage: true,
  259. expectedWidth: 140,
  260. pointerOffset: {
  261. x: 0,
  262. y: 20
  263. },
  264. resizerPosition: 'bottom-right'
  265. } ) );
  266. it( 'enlarges correctly with right-bottom handler, x axis only', generateSideResizeTest( {
  267. isSideImage: true,
  268. expectedWidth: 140,
  269. pointerOffset: {
  270. x: 40,
  271. y: 0
  272. },
  273. resizerPosition: 'bottom-right'
  274. } ) );
  275. it( 'enlarges correctly with left-top handler', generateSideResizeTest( {
  276. isSideImage: true,
  277. expectedWidth: 120,
  278. pointerOffset: {
  279. x: -20,
  280. y: -10
  281. },
  282. resizerPosition: 'top-left'
  283. } ) );
  284. it( 'enlarges correctly with right-top handler', generateSideResizeTest( {
  285. isSideImage: true,
  286. expectedWidth: 120,
  287. pointerOffset: {
  288. x: 20,
  289. y: 10
  290. },
  291. resizerPosition: 'top-right'
  292. } ) );
  293. function generateSideResizeTest( options ) {
  294. return generateResizeTest( Object.assign( {
  295. isSideImage: true,
  296. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)"><\/image>/
  297. }, options ) );
  298. }
  299. } );
  300. describe( 'undo integration', function() {
  301. let widget;
  302. beforeEach( async function() {
  303. await editor.setData( `<p>foo</p><figure><img src="${ imageFixture }"></figure>` );
  304. widget = viewDocument.getRoot().getChild( 1 );
  305. const domEventDataMock = {
  306. target: widget,
  307. preventDefault: sinon.spy()
  308. };
  309. this.widget = widget;
  310. viewDocument.fire( 'mousedown', domEventDataMock );
  311. } );
  312. it( 'has correct border size after undo', function() {
  313. return generateResizeTest( {
  314. expectedWidth: 120,
  315. pointerOffset: {
  316. x: 0,
  317. y: 10
  318. },
  319. resizerPosition: 'bottom-left'
  320. } ).call( this ).then( () => {
  321. editor.commands.get( 'undo' ).execute();
  322. return wait( 40 )
  323. .then( () => {
  324. const resizerShadow = document.querySelector( '.ck-widget__resizer-shadow' );
  325. const shadowBoundingRect = resizerShadow.getBoundingClientRect();
  326. expect( shadowBoundingRect.width ).to.be.equal( 100 );
  327. expect( shadowBoundingRect.height ).to.be.equal( 50 );
  328. } );
  329. } );
  330. } );
  331. } );
  332. describe( 'integration', function() {
  333. beforeEach( async function() {
  334. await editor.setData( `<figure class="table">
  335. <table>
  336. <tbody>
  337. <tr>
  338. <td>
  339. <figure class="image"><img src="${ imageFixture }" alt="Sample image">
  340. </figure>
  341. </td>
  342. </tr>
  343. </tbody>
  344. </table>
  345. </figure>` );
  346. this.widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  347. const domEventDataMock = {
  348. target: this.widget,
  349. preventDefault: sinon.spy()
  350. };
  351. viewDocument.fire( 'mousedown', domEventDataMock );
  352. } );
  353. it( 'works when resizing in a table', function() {
  354. return generateResizeTest( {
  355. getModel: () => editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 ),
  356. expectedWidth: 60,
  357. modelRegExp: /.+/,
  358. pointerOffset: {
  359. x: -40,
  360. y: -20
  361. },
  362. resizerPosition: 'bottom-right'
  363. } );
  364. } );
  365. } );
  366. function isVisible( element ) {
  367. // Checks if the DOM element is visible to the end user.
  368. return element.offsetParent !== null;
  369. }
  370. function fireMouseEvent( target, eventType, eventData ) {
  371. // Using initMouseEvent instead of MouseEvent constructor, as MouseEvent constructor doesn't support passing pageX
  372. // and pageY. See https://stackoverflow.com/questions/45843458/setting-click-events-pagex-and-pagey-always-reverts-to-0
  373. // However there's still a problem, that events created with `initMouseEvent` have **floored** pageX, pageY numbers.
  374. const event = document.createEvent( 'MouseEvent' );
  375. event.initMouseEvent( eventType, true, true, window, null, 0, 0, eventData.pageX, eventData.pageY, false, false, false, false,
  376. MOUSE_BUTTON_MAIN, null );
  377. target.dispatchEvent( event );
  378. }
  379. function getElementPosition( element ) {
  380. // Returns top left corner point.
  381. const viewportPosition = element.getBoundingClientRect();
  382. return {
  383. x: viewportPosition.left,
  384. y: viewportPosition.top
  385. };
  386. }
  387. function wait( delay ) {
  388. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  389. }
  390. function generateResizeTest( options ) {
  391. // options.resizerPosition - top-left / top-right / bottom-right / bottom-left
  392. // options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
  393. // e.g. { x: 10, y: -5 }
  394. // options.expectedWidth
  395. // [options.isSideImage=false]
  396. // Returns a test case that puts
  397. return function() {
  398. const widget = this.widget;
  399. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  400. const domBottomLeftResizer = domResizeWrapper.querySelector( `.ck-widget__resizer-${ options.resizerPosition }` );
  401. const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
  402. const imageTopLeftPosition = getElementPosition( domImage );
  403. const resizerPositionParts = options.resizerPosition.split( '-' );
  404. const modelRegExp = options.modelRegExp ? options.modelRegExp :
  405. /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)"><\/image>/;
  406. focusEditor( editor );
  407. const initialPointerPosition = {
  408. pageX: imageTopLeftPosition.x,
  409. pageY: imageTopLeftPosition.y
  410. };
  411. if ( resizerPositionParts.includes( 'right' ) ) {
  412. initialPointerPosition.pageX += FIXTURE_WIDTH;
  413. }
  414. if ( resizerPositionParts.includes( 'bottom' ) ) {
  415. initialPointerPosition.pageY += FIXTURE_HEIGHT;
  416. }
  417. const finishPointerPosition = Object.assign( {}, initialPointerPosition );
  418. finishPointerPosition.pageX += options.pointerOffset.x || 0;
  419. finishPointerPosition.pageY += options.pointerOffset.y || 0;
  420. fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
  421. fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
  422. // We need to wait as mousemove events are throttled.
  423. return wait( 40 )
  424. .then( () => {
  425. fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
  426. expect( domImage.width ).to.be.closeTo( options.expectedWidth, 2 );
  427. fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
  428. expect( getData( editor.model, {
  429. withoutSelection: true
  430. } ) ).to.match( modelRegExp );
  431. const modelItem = options.getModel ? options.getModel() : editor.model.document.getRoot().getChild( 1 );
  432. expect( modelItem.getAttribute( 'width' ) ).to.be.closeTo( options.expectedWidth, 2, 'Model check' );
  433. } );
  434. };
  435. }
  436. function focusEditor( editor ) {
  437. editor.editing.view.focus();
  438. editor.ui.focusTracker.isFocused = true;
  439. }
  440. } );