imageresize.js 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  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 Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
  9. import Image from '../src/image';
  10. import ImageResize from '../src/imageresize';
  11. import ImageResizeCommand from '../src/imageresize/imageresizecommand';
  12. import ImageStyle from '../src/imagestyle';
  13. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  14. import Table from '@ckeditor/ckeditor5-table/src/table';
  15. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  16. import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  17. describe( 'ImageResize', () => {
  18. // Id of the left mouse button.
  19. const MOUSE_BUTTON_MAIN = 0;
  20. // 60x50 black png image
  21. const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  22. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  23. let absoluteContainer, widget, editor, view, viewDocument, editorElement;
  24. before( () => {
  25. // This container is required to position editor element in a reliable element.
  26. // See fireMouseEvent method for more information regarding imprecise mouse position.
  27. absoluteContainer = document.createElement( 'div' );
  28. absoluteContainer.style.top = '50px';
  29. absoluteContainer.style.left = '50px';
  30. absoluteContainer.style.height = '1000px';
  31. absoluteContainer.style.width = '500px';
  32. absoluteContainer.style.position = 'absolute';
  33. document.body.appendChild( absoluteContainer );
  34. } );
  35. after( () => {
  36. absoluteContainer.remove();
  37. } );
  38. afterEach( () => {
  39. if ( editorElement ) {
  40. editorElement.remove();
  41. }
  42. if ( editor ) {
  43. return editor.destroy();
  44. }
  45. } );
  46. describe( 'conversion', () => {
  47. beforeEach( () => createEditor() );
  48. it( 'upcasts 100px width correctly', () => {
  49. editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  50. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
  51. } );
  52. it( 'upcasts 50% width correctly', () => {
  53. editor.setData( `<figure class="image" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  54. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
  55. } );
  56. it( 'downcasts 100px width correctly', () => {
  57. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="100px"></image>` );
  58. expect( editor.getData() )
  59. .to.equal( `<figure class="image image_resized" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  60. } );
  61. it( 'downcasts 50% width correctly', () => {
  62. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  63. expect( editor.getData() )
  64. .to.equal( `<figure class="image image_resized" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  65. } );
  66. } );
  67. describe( 'schema', () => {
  68. beforeEach( () => createEditor() );
  69. it( 'allows the width attribute', () => {
  70. expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
  71. } );
  72. it( 'defines width as a formatting attribute', () => {
  73. expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
  74. } );
  75. } );
  76. describe( 'command', () => {
  77. beforeEach( () => createEditor() );
  78. it( 'defines the imageResize command', () => {
  79. expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
  80. } );
  81. it( 'uses the command on commit', async () => {
  82. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  83. widget = viewDocument.getRoot().getChild( 1 );
  84. const spy = sinon.spy( editor.commands.get( 'imageResize' ), 'execute' );
  85. await generateResizeTest( {
  86. expectedWidth: 80,
  87. pointerOffset: {
  88. x: 10,
  89. y: -10
  90. },
  91. resizerPosition: 'bottom-left'
  92. } )();
  93. // It's either 80px or 81px depending on the device, so we need to make the test a bit more loose.
  94. const realWidth = editor.model.document.getRoot().getChild( 1 ).getAttribute( 'width' );
  95. expect( realWidth ).to.match( /^\d\dpx$/ );
  96. expect( spy.calledOnce ).to.be.true;
  97. expect( spy.args[ 0 ][ 0 ] ).to.deep.equal( { width: realWidth } );
  98. } );
  99. it( 'disables the resizer if the command is disabled', () => {
  100. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  101. const resizer = getSelectedImageResizer( editor );
  102. let isEnabled = false;
  103. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  104. evt.return = isEnabled;
  105. evt.stop();
  106. }, { priority: 'highest' } );
  107. editor.commands.get( 'imageResize' ).refresh();
  108. expect( resizer.isEnabled ).to.be.false;
  109. isEnabled = true;
  110. editor.commands.get( 'imageResize' ).refresh();
  111. expect( resizer.isEnabled ).to.be.true;
  112. } );
  113. it( 'the resizer is disabled from the beginning when the command is disabled when the image is inserted', () => {
  114. setData( editor.model, '<paragraph>foo[]</paragraph>' );
  115. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  116. evt.return = false;
  117. evt.stop();
  118. }, { priority: 'highest' } );
  119. editor.commands.get( 'imageResize' ).refresh();
  120. editor.model.change( writer => {
  121. editor.model.insertContent( writer.createElement( 'image', { src: IMAGE_SRC_FIXTURE } ) );
  122. } );
  123. const resizer = getSelectedImageResizer( editor );
  124. const resizerWrapper = editor.ui.getEditableElement().querySelector( '.ck-widget__resizer' );
  125. expect( resizer.isEnabled ).to.be.false;
  126. expect( resizerWrapper.style.display ).to.equal( 'none' );
  127. } );
  128. } );
  129. describe( 'visual resizers', () => {
  130. beforeEach( () => createEditor() );
  131. beforeEach( () => {
  132. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  133. widget = viewDocument.getRoot().getChild( 1 );
  134. } );
  135. it( 'correct number is added by default', () => {
  136. const resizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
  137. expect( resizers.length ).to.be.equal( 4 );
  138. } );
  139. describe( 'visibility', () => {
  140. it( 'is hidden by default', () => {
  141. const allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
  142. for ( const resizer of allResizers ) {
  143. expect( isVisible( resizer ) ).to.be.false;
  144. }
  145. } );
  146. it( 'is shown when image is focused', () => {
  147. const allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
  148. const domEventDataMock = {
  149. target: widget,
  150. preventDefault: sinon.spy()
  151. };
  152. focusEditor( editor );
  153. viewDocument.fire( 'mousedown', domEventDataMock );
  154. for ( const resizer of allResizers ) {
  155. expect( isVisible( resizer ) ).to.be.true;
  156. }
  157. } );
  158. } );
  159. } );
  160. describe( 'standard image resizing', () => {
  161. beforeEach( () => createEditor() );
  162. beforeEach( () => {
  163. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  164. widget = viewDocument.getRoot().getChild( 1 );
  165. } );
  166. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  167. expectedWidth: 80,
  168. pointerOffset: {
  169. x: 10,
  170. y: -10
  171. },
  172. resizerPosition: 'bottom-left'
  173. } ) );
  174. it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
  175. expectedWidth: 80,
  176. pointerOffset: {
  177. x: -10,
  178. y: -10
  179. },
  180. resizerPosition: 'bottom-right'
  181. } ) );
  182. it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
  183. expectedWidth: 120,
  184. pointerOffset: {
  185. x: 10,
  186. y: 0
  187. },
  188. resizerPosition: 'bottom-right'
  189. } ) );
  190. it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
  191. expectedWidth: 120,
  192. pointerOffset: {
  193. x: 0,
  194. y: 10
  195. },
  196. resizerPosition: 'bottom-right'
  197. } ) );
  198. it( 'enlarges correctly with left-bottom handler, x axis only', generateResizeTest( {
  199. expectedWidth: 120,
  200. pointerOffset: {
  201. x: -10,
  202. y: 0
  203. },
  204. resizerPosition: 'bottom-left'
  205. } ) );
  206. it( 'enlarges correctly with left-bottom handler, y axis only', generateResizeTest( {
  207. expectedWidth: 120,
  208. pointerOffset: {
  209. x: 0,
  210. y: 10
  211. },
  212. resizerPosition: 'bottom-left'
  213. } ) );
  214. // --- top handlers ---
  215. it( 'enlarges correctly with left-top handler', generateResizeTest( {
  216. expectedWidth: 120,
  217. pointerOffset: {
  218. x: -10,
  219. y: -10
  220. },
  221. resizerPosition: 'top-left'
  222. } ) );
  223. it( 'enlarges correctly with left-top handler, y axis only', generateResizeTest( {
  224. expectedWidth: 120,
  225. pointerOffset: {
  226. x: 0,
  227. y: -10
  228. },
  229. resizerPosition: 'top-left'
  230. } ) );
  231. it( 'enlarges correctly with right-top handler', generateResizeTest( {
  232. expectedWidth: 120,
  233. pointerOffset: {
  234. x: 10,
  235. y: -10
  236. },
  237. resizerPosition: 'top-right'
  238. } ) );
  239. it( 'enlarges correctly with right-top handler, y axis only', generateResizeTest( {
  240. expectedWidth: 120,
  241. pointerOffset: {
  242. x: 0,
  243. y: -10
  244. },
  245. resizerPosition: 'top-right'
  246. } ) );
  247. } );
  248. describe( 'side image resizing', () => {
  249. beforeEach( () => createEditor() );
  250. beforeEach( () => {
  251. setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  252. widget = viewDocument.getRoot().getChild( 1 );
  253. } );
  254. it( 'shrinks correctly with left-bottom handler', generateSideResizeTest( {
  255. isSideImage: true,
  256. expectedWidth: 80,
  257. pointerOffset: {
  258. x: 20,
  259. y: -10
  260. },
  261. resizerPosition: 'bottom-left'
  262. } ) );
  263. it( 'shrinks correctly with right-bottom handler', generateSideResizeTest( {
  264. isSideImage: true,
  265. expectedWidth: 80,
  266. pointerOffset: {
  267. x: -20,
  268. y: -10
  269. },
  270. resizerPosition: 'bottom-right'
  271. } ) );
  272. it( 'shrinks correctly with left-top handler', generateSideResizeTest( {
  273. isSideImage: true,
  274. expectedWidth: 80,
  275. pointerOffset: {
  276. x: 20,
  277. y: 10
  278. },
  279. resizerPosition: 'top-left'
  280. } ) );
  281. it( 'shrinks correctly with right-top handler', generateSideResizeTest( {
  282. isSideImage: true,
  283. expectedWidth: 80,
  284. pointerOffset: {
  285. x: -20,
  286. y: 10
  287. },
  288. resizerPosition: 'top-right'
  289. } ) );
  290. it( 'enlarges correctly with left-bottom handler', generateSideResizeTest( {
  291. isSideImage: true,
  292. expectedWidth: 120,
  293. pointerOffset: {
  294. x: -10,
  295. y: 10
  296. },
  297. resizerPosition: 'bottom-left'
  298. } ) );
  299. it( 'enlarges correctly with right-bottom handler', generateSideResizeTest( {
  300. isSideImage: true,
  301. expectedWidth: 120,
  302. pointerOffset: {
  303. x: 10,
  304. y: 10
  305. },
  306. resizerPosition: 'bottom-right'
  307. } ) );
  308. it( 'enlarges correctly with right-bottom handler, y axis only', generateSideResizeTest( {
  309. isSideImage: true,
  310. expectedWidth: 140,
  311. pointerOffset: {
  312. x: 0,
  313. y: 20
  314. },
  315. resizerPosition: 'bottom-right'
  316. } ) );
  317. it( 'enlarges correctly with right-bottom handler, x axis only', generateSideResizeTest( {
  318. isSideImage: true,
  319. expectedWidth: 140,
  320. pointerOffset: {
  321. x: 40,
  322. y: 0
  323. },
  324. resizerPosition: 'bottom-right'
  325. } ) );
  326. it( 'enlarges correctly with left-top handler', generateSideResizeTest( {
  327. isSideImage: true,
  328. expectedWidth: 120,
  329. pointerOffset: {
  330. x: -20,
  331. y: -10
  332. },
  333. resizerPosition: 'top-left'
  334. } ) );
  335. it( 'enlarges correctly with right-top handler', generateSideResizeTest( {
  336. isSideImage: true,
  337. expectedWidth: 120,
  338. pointerOffset: {
  339. x: 20,
  340. y: 10
  341. },
  342. resizerPosition: 'top-right'
  343. } ) );
  344. function generateSideResizeTest( options ) {
  345. return generateResizeTest( Object.assign( {
  346. isSideImage: true,
  347. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d.]+)px"><\/image>/
  348. }, options ) );
  349. }
  350. } );
  351. describe( 'percent resizing', () => {
  352. beforeEach( () => createEditor( {
  353. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
  354. } ) );
  355. describe( 'standard image', () => {
  356. beforeEach( () => {
  357. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  358. widget = viewDocument.getRoot().getChild( 1 );
  359. } );
  360. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  361. expectedWidth: 16,
  362. modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  363. pointerOffset: {
  364. x: 10,
  365. y: -10
  366. },
  367. resizerPosition: 'bottom-left'
  368. } ) );
  369. it( 'enlarges correctly with right-bottom handler', generateResizeTest( {
  370. expectedWidth: 22,
  371. modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  372. pointerOffset: {
  373. x: 0,
  374. y: 5
  375. },
  376. resizerPosition: 'bottom-right'
  377. } ) );
  378. it( 'enlarges correctly an image with unsupported width unit', async () => {
  379. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }" width="50pt"></image>]` );
  380. widget = viewDocument.getRoot().getChild( 1 );
  381. await generateResizeTest( {
  382. expectedWidth: 15,
  383. modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  384. pointerOffset: {
  385. x: 0,
  386. y: 5
  387. },
  388. resizerPosition: 'bottom-right'
  389. } )();
  390. } );
  391. } );
  392. describe( 'side image', () => {
  393. beforeEach( () => {
  394. setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  395. view = editor.editing.view;
  396. viewDocument = view.document;
  397. widget = viewDocument.getRoot().getChild( 1 );
  398. } );
  399. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  400. expectedWidth: 18,
  401. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  402. pointerOffset: {
  403. x: 10,
  404. y: -10
  405. },
  406. resizerPosition: 'bottom-left'
  407. } ) );
  408. } );
  409. } );
  410. describe( 'undo integration', () => {
  411. beforeEach( () => createEditor() );
  412. beforeEach( () => {
  413. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  414. widget = viewDocument.getRoot().getChild( 1 );
  415. } );
  416. it( 'has correct border size after undo', async () => {
  417. await generateResizeTest( {
  418. expectedWidth: 120,
  419. pointerOffset: {
  420. x: 0,
  421. y: 10
  422. },
  423. resizerPosition: 'bottom-left'
  424. } )();
  425. editor.commands.get( 'undo' ).execute();
  426. await wait( 160 ); // ui#update event is throttled.
  427. const resizerWrapper = document.querySelector( '.ck-widget__resizer' );
  428. const shadowBoundingRect = resizerWrapper.getBoundingClientRect();
  429. expect( shadowBoundingRect.width ).to.be.equal( 100 );
  430. expect( shadowBoundingRect.height ).to.be.equal( 50 );
  431. } );
  432. } );
  433. describe( 'table integration', () => {
  434. beforeEach( () => createEditor() );
  435. beforeEach( () => {
  436. setData( editor.model,
  437. '<table>' +
  438. `<tableRow><tableCell>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]</tableCell></tableRow>` +
  439. '</table>'
  440. );
  441. widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  442. } );
  443. it( 'works when resizing in a table', generateResizeTest( {
  444. getModel: () => editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 ),
  445. expectedWidth: 60,
  446. modelRegExp: /.+/,
  447. pointerOffset: {
  448. x: -40,
  449. y: -20
  450. },
  451. resizerPosition: 'bottom-right'
  452. } ) );
  453. } );
  454. describe( 'srcset integration', () => {
  455. beforeEach( () => createEditor() );
  456. // The image is 96x96 pixels.
  457. const imageBaseUrl = '/assets/sample.png';
  458. const getModel = () => editor.model.document.getRoot().getChild( 0 );
  459. let images = [];
  460. before( () => {
  461. return Promise.all( [
  462. preloadImage( imageBaseUrl ),
  463. preloadImage( imageBaseUrl + '?a' ),
  464. preloadImage( imageBaseUrl + '?b' ),
  465. preloadImage( imageBaseUrl + '?c' )
  466. ] ).then( loadedImages => {
  467. images = loadedImages;
  468. } );
  469. } );
  470. after( () => {
  471. for ( const image of images ) {
  472. image.remove();
  473. }
  474. } );
  475. beforeEach( () => {
  476. editor.setData(
  477. `<figure class="image">
  478. <img src="${ imageBaseUrl }"
  479. srcset="${ imageBaseUrl }?a 110w,
  480. ${ imageBaseUrl }?b 440w,
  481. ${ imageBaseUrl }?c 1025w"
  482. sizes="100vw" width="96">
  483. </figure>`
  484. );
  485. widget = viewDocument.getRoot().getChild( 0 );
  486. } );
  487. it( 'works with images containing srcset', generateResizeTest( {
  488. getModel,
  489. expectedWidth: 76,
  490. modelRegExp: /.+/,
  491. pointerOffset: {
  492. x: -20,
  493. y: -20
  494. },
  495. resizerPosition: 'bottom-right'
  496. } ) );
  497. it( 'retains width after removing srcset', async () => {
  498. await generateResizeTest( {
  499. getModel,
  500. expectedWidth: 80,
  501. modelRegExp: /.+/,
  502. pointerOffset: {
  503. x: -16,
  504. y: -16
  505. },
  506. resizerPosition: 'bottom-right'
  507. } )();
  508. editor.model.change( writer => {
  509. writer.removeAttribute( 'srcset', getModel() );
  510. } );
  511. expect( editor.getData() )
  512. .to.match( /<figure class="image image_resized" style="width:[\d.]{2,}px;"><img src="\/assets\/sample.png"><\/figure>/ );
  513. } );
  514. async function preloadImage( imageUrl ) {
  515. const image = document.createElement( 'img' );
  516. image.src = imageUrl;
  517. return new Promise( ( resolve, reject ) => {
  518. image.addEventListener( 'load', () => resolve( image ) );
  519. image.addEventListener( 'error', () => reject( image ) );
  520. document.body.appendChild( image );
  521. } );
  522. }
  523. } );
  524. // TODO move to Resizer tests.
  525. describe( 'Resizer', () => {
  526. beforeEach( () => createEditor() );
  527. it( 'uses rounded (int) values', async () => {
  528. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  529. widget = viewDocument.getRoot().getChild( 1 );
  530. await generateResizeTest( {
  531. expectedWidth: 97,
  532. // Makes it resize the image to 97.2188px, unless there's a rounding.
  533. pointerOffset: {
  534. x: 7.3,
  535. y: -1
  536. },
  537. resizerPosition: 'bottom-left',
  538. checkBeforeMouseUp( domFigure, domResizeWrapper ) {
  539. expect( domFigure.style.width ).to.match( /^\d\dpx$/ );
  540. expect( domResizeWrapper.style.width ).to.match( /^\d\dpx$/ );
  541. }
  542. } )();
  543. expect( editor.model.document.getRoot().getChild( 1 ).getAttribute( 'width' ) ).to.match( /^\d\dpx$/ );
  544. } );
  545. it( 'hides the resize wrapper when its disabled', () => {
  546. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  547. const resizer = getSelectedImageResizer( editor );
  548. const resizerWrapper = editor.ui.getEditableElement().querySelector( '.ck-widget__resizer' );
  549. expect( resizerWrapper.style.display ).to.equal( '' );
  550. resizer.isEnabled = false;
  551. expect( resizerWrapper.style.display ).to.equal( 'none' );
  552. } );
  553. } );
  554. function isVisible( element ) {
  555. // Checks if the DOM element is visible to the end user.
  556. return element.offsetParent !== null && !element.classList.contains( 'ck-hidden' );
  557. }
  558. function fireMouseEvent( target, eventType, eventData ) {
  559. // Using initMouseEvent instead of MouseEvent constructor, as MouseEvent constructor doesn't support passing pageX
  560. // and pageY. See https://stackoverflow.com/questions/45843458/setting-click-events-pagex-and-pagey-always-reverts-to-0
  561. // However there's still a problem, that events created with `initMouseEvent` have **floored** pageX, pageY numbers.
  562. const event = document.createEvent( 'MouseEvent' );
  563. event.initMouseEvent( eventType, true, true, window, null, 0, 0, eventData.pageX, eventData.pageY, false, false, false, false,
  564. MOUSE_BUTTON_MAIN, null );
  565. target.dispatchEvent( event );
  566. }
  567. function wait( delay ) {
  568. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  569. }
  570. function generateResizeTest( options ) {
  571. // options.resizerPosition - top-left / top-right / bottom-right / bottom-left
  572. // options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
  573. // e.g. { x: 10, y: -5 }
  574. // options.expectedWidth
  575. // [options.isSideImage=false]
  576. // Returns a test case that puts
  577. return function() {
  578. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  579. const domResizeHandle = domResizeWrapper.querySelector( `.ck-widget__resizer__handle-${ options.resizerPosition }` );
  580. const domFigure = view.domConverter.mapViewToDom( widget );
  581. const domImage = domFigure.querySelector( 'img' );
  582. const imageRect = new Rect( domImage );
  583. const resizerPositionParts = options.resizerPosition.split( '-' );
  584. const modelRegExp = options.modelRegExp ? options.modelRegExp :
  585. /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]+)px"><\/image>/;
  586. focusEditor( editor );
  587. const initialPointerPosition = {
  588. pageX: imageRect.left,
  589. pageY: imageRect.top
  590. };
  591. if ( resizerPositionParts.includes( 'right' ) ) {
  592. initialPointerPosition.pageX = imageRect.right;
  593. }
  594. if ( resizerPositionParts.includes( 'bottom' ) ) {
  595. initialPointerPosition.pageY = imageRect.bottom;
  596. }
  597. const finishPointerPosition = Object.assign( {}, initialPointerPosition );
  598. finishPointerPosition.pageX += options.pointerOffset.x || 0;
  599. finishPointerPosition.pageY += options.pointerOffset.y || 0;
  600. fireMouseEvent( domResizeHandle, 'mousedown', initialPointerPosition );
  601. fireMouseEvent( domResizeHandle, 'mousemove', initialPointerPosition );
  602. // We need to wait as mousemove events are throttled.
  603. return wait( 40 )
  604. .then( () => {
  605. fireMouseEvent( domResizeHandle, 'mousemove', finishPointerPosition );
  606. expect( parseInt( domFigure.style.width ) ).to.be.closeTo( options.expectedWidth, 2, 'DOM width check' );
  607. if ( options.checkBeforeMouseUp ) {
  608. options.checkBeforeMouseUp( domFigure, domResizeWrapper );
  609. }
  610. fireMouseEvent( domResizeHandle, 'mouseup', finishPointerPosition );
  611. expect( getData( editor.model, {
  612. withoutSelection: true
  613. } ) ).to.match( modelRegExp );
  614. const modelItem = options.getModel ? options.getModel() : editor.model.document.getRoot().getChild( 1 );
  615. const modelWidth = modelItem.getAttribute( 'width' );
  616. expect( parseFloat( modelWidth, 0 ) )
  617. .to.be.closeTo( options.expectedWidth, 2, 'Model width check' );
  618. } );
  619. };
  620. }
  621. function focusEditor( editor ) {
  622. editor.editing.view.focus();
  623. editor.ui.focusTracker.isFocused = true;
  624. }
  625. function getSelectedImageResizer( editor ) {
  626. return editor.plugins.get( 'WidgetResize' )._getResizerByViewElement(
  627. editor.editing.view.document.selection.getSelectedElement()
  628. );
  629. }
  630. function createEditor( config ) {
  631. editorElement = document.createElement( 'div' );
  632. absoluteContainer.appendChild( editorElement );
  633. return ClassicEditor
  634. .create( editorElement, config || {
  635. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
  636. image: {
  637. resizeUnit: 'px'
  638. }
  639. } )
  640. .then( newEditor => {
  641. editor = newEditor;
  642. view = editor.editing.view;
  643. viewDocument = view.document;
  644. widget = viewDocument.getRoot().getChild( 1 );
  645. } );
  646. }
  647. } );