imageresize.js 22 KB

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