imageresize.js 23 KB

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