imageresize.js 28 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942
  1. /**
  2. * @license Copyright (c) 2003-2020, 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 ImageToolbar from '../src/imagetoolbar';
  14. import ImageTextAlternative from '../src/imagetextalternative';
  15. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  16. import Table from '@ckeditor/ckeditor5-table/src/table';
  17. import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
  18. import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  19. describe( 'ImageResize', () => {
  20. // Id of the left mouse button.
  21. const MOUSE_BUTTON_MAIN = 0;
  22. // 60x50 black png image
  23. const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  24. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  25. let absoluteContainer, widget, 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. afterEach( () => {
  41. if ( editorElement ) {
  42. editorElement.remove();
  43. }
  44. if ( editor ) {
  45. return editor.destroy();
  46. }
  47. } );
  48. describe( 'conversion', () => {
  49. beforeEach( () => createEditor() );
  50. it( 'upcasts 100px width correctly', () => {
  51. editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  52. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
  53. } );
  54. it( 'upcasts 50% width correctly', () => {
  55. editor.setData( `<figure class="image" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  56. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
  57. } );
  58. it( 'downcasts 100px width correctly', () => {
  59. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="100px"></image>` );
  60. expect( editor.getData() )
  61. .to.equal( `<figure class="image image_resized" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  62. } );
  63. it( 'downcasts 50% width correctly', () => {
  64. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  65. expect( editor.getData() )
  66. .to.equal( `<figure class="image image_resized" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  67. } );
  68. it( 'doesn\'t downcast consumed tokens', () => {
  69. editor.conversion.for( 'downcast' ).add( dispatcher =>
  70. dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
  71. conversionApi.consumable.consume( data.item, 'attribute:width:image' );
  72. }, { priority: 'high' } )
  73. );
  74. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  75. expect( editor.getData() )
  76. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  77. } );
  78. } );
  79. describe( 'schema', () => {
  80. beforeEach( () => createEditor() );
  81. it( 'allows the width attribute', () => {
  82. expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
  83. } );
  84. it( 'defines width as a formatting attribute', () => {
  85. expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
  86. } );
  87. } );
  88. describe( 'command', () => {
  89. beforeEach( () => createEditor() );
  90. it( 'defines the imageResize command', () => {
  91. expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
  92. } );
  93. it( 'uses the command on commit', async () => {
  94. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  95. widget = viewDocument.getRoot().getChild( 1 );
  96. const spy = sinon.spy( editor.commands.get( 'imageResize' ), 'execute' );
  97. await generateResizeTest( {
  98. expectedWidth: 80,
  99. pointerOffset: {
  100. x: 10,
  101. y: -10
  102. },
  103. resizerPosition: 'bottom-left'
  104. } )();
  105. // It's either 80px or 81px depending on the device, so we need to make the test a bit more loose.
  106. const realWidth = editor.model.document.getRoot().getChild( 1 ).getAttribute( 'width' );
  107. expect( realWidth ).to.match( /^\d\dpx$/ );
  108. expect( spy.calledOnce ).to.be.true;
  109. expect( spy.args[ 0 ][ 0 ] ).to.deep.equal( { width: realWidth } );
  110. } );
  111. it( 'disables the resizer if the command is disabled', () => {
  112. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  113. const resizer = getSelectedImageResizer( editor );
  114. let isEnabled = false;
  115. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  116. evt.return = isEnabled;
  117. evt.stop();
  118. }, { priority: 'highest' } );
  119. editor.commands.get( 'imageResize' ).refresh();
  120. expect( resizer.isEnabled ).to.be.false;
  121. isEnabled = true;
  122. editor.commands.get( 'imageResize' ).refresh();
  123. expect( resizer.isEnabled ).to.be.true;
  124. } );
  125. it( 'the resizer is disabled from the beginning when the command is disabled when the image is inserted', () => {
  126. setData( editor.model, '<paragraph>foo[]</paragraph>' );
  127. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  128. evt.return = false;
  129. evt.stop();
  130. }, { priority: 'highest' } );
  131. editor.commands.get( 'imageResize' ).refresh();
  132. editor.model.change( writer => {
  133. editor.model.insertContent( writer.createElement( 'image', { src: IMAGE_SRC_FIXTURE } ) );
  134. } );
  135. const resizer = getSelectedImageResizer( editor );
  136. const resizerWrapper = editor.ui.getEditableElement().querySelector( '.ck-widget__resizer' );
  137. expect( resizer.isEnabled ).to.be.false;
  138. expect( resizerWrapper.style.display ).to.equal( 'none' );
  139. } );
  140. } );
  141. describe( 'visual resizers', () => {
  142. beforeEach( () => createEditor() );
  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 allResizers = editor.ui.getEditableElement().querySelectorAll( '.ck-widget__resizer__handle' );
  160. const domEventDataMock = {
  161. target: widget,
  162. preventDefault: sinon.spy()
  163. };
  164. focusEditor( editor );
  165. viewDocument.fire( 'mousedown', domEventDataMock );
  166. for ( const resizer of allResizers ) {
  167. expect( isVisible( resizer ) ).to.be.true;
  168. }
  169. } );
  170. } );
  171. } );
  172. describe( 'standard image resizing', () => {
  173. beforeEach( () => createEditor() );
  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( () => createEditor() );
  262. beforeEach( () => {
  263. setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  264. widget = viewDocument.getRoot().getChild( 1 );
  265. } );
  266. it( 'shrinks correctly with left-bottom handler', generateSideResizeTest( {
  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. expectedWidth: 80,
  276. pointerOffset: {
  277. x: -20,
  278. y: -10
  279. },
  280. resizerPosition: 'bottom-right'
  281. } ) );
  282. it( 'shrinks correctly with left-top handler', generateSideResizeTest( {
  283. expectedWidth: 80,
  284. pointerOffset: {
  285. x: 20,
  286. y: 10
  287. },
  288. resizerPosition: 'top-left'
  289. } ) );
  290. it( 'shrinks correctly with right-top handler', generateSideResizeTest( {
  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. expectedWidth: 120,
  300. pointerOffset: {
  301. x: -10,
  302. y: 10
  303. },
  304. resizerPosition: 'bottom-left'
  305. } ) );
  306. it( 'enlarges correctly with right-bottom handler', generateSideResizeTest( {
  307. expectedWidth: 120,
  308. pointerOffset: {
  309. x: 10,
  310. y: 10
  311. },
  312. resizerPosition: 'bottom-right'
  313. } ) );
  314. it( 'enlarges correctly with right-bottom handler, y axis only', generateSideResizeTest( {
  315. expectedWidth: 140,
  316. pointerOffset: {
  317. x: 0,
  318. y: 20
  319. },
  320. resizerPosition: 'bottom-right'
  321. } ) );
  322. it( 'enlarges correctly with right-bottom handler, x axis only', generateSideResizeTest( {
  323. expectedWidth: 140,
  324. pointerOffset: {
  325. x: 40,
  326. y: 0
  327. },
  328. resizerPosition: 'bottom-right'
  329. } ) );
  330. it( 'enlarges correctly with left-top handler', generateSideResizeTest( {
  331. expectedWidth: 120,
  332. pointerOffset: {
  333. x: -20,
  334. y: -10
  335. },
  336. resizerPosition: 'top-left'
  337. } ) );
  338. it( 'enlarges correctly with right-top handler', generateSideResizeTest( {
  339. expectedWidth: 120,
  340. pointerOffset: {
  341. x: 20,
  342. y: 10
  343. },
  344. resizerPosition: 'top-right'
  345. } ) );
  346. it( 'doesn\'t flicker at the beginning of the resize', async () => {
  347. // (#5189)
  348. const resizerPosition = 'bottom-left';
  349. const domParts = getWidgetDomParts( widget, resizerPosition );
  350. const initialPointerPosition = getResizerCoordinates( domParts.figure, resizerPosition );
  351. const resizeWrapperView = widget.getChild( 1 );
  352. focusEditor( editor );
  353. fireMouseEvent( domParts.resizeHandle, 'mousedown', initialPointerPosition );
  354. await wait( 40 );
  355. fireMouseEvent( domParts.resizeHandle, 'mousemove', initialPointerPosition );
  356. expect( resizeWrapperView.getStyle( 'width' ) ).to.be.equal( '100px' );
  357. fireMouseEvent( domParts.resizeHandle, 'mouseup', initialPointerPosition );
  358. } );
  359. it( 'makes no change when clicking the handle without drag', () => {
  360. const resizerPosition = 'bottom-left';
  361. const expectedWidth = 100;
  362. const domParts = getWidgetDomParts( widget, resizerPosition );
  363. const initialPointerPosition = getResizerCoordinates( domParts.figure, resizerPosition );
  364. focusEditor( editor );
  365. fireMouseEvent( domParts.resizeHandle, 'mousedown', initialPointerPosition );
  366. expect( getDomWidth( domParts.figure ), 'DOM width check' ).to.be.closeTo( expectedWidth, 2 );
  367. fireMouseEvent( domParts.resizeHandle, 'mouseup', initialPointerPosition );
  368. const modelItem = editor.model.document.getRoot().getChild( 1 );
  369. expect( modelItem.getAttribute( 'width' ), 'model width attribute' ).to.be.undefined;
  370. } );
  371. function generateSideResizeTest( options ) {
  372. return generateResizeTest( Object.assign( {
  373. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d.]+)px"><\/image>/
  374. }, options ) );
  375. }
  376. } );
  377. describe( 'percent resizing', () => {
  378. beforeEach( () => createEditor( {
  379. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
  380. } ) );
  381. describe( 'standard image', () => {
  382. beforeEach( () => {
  383. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  384. widget = viewDocument.getRoot().getChild( 1 );
  385. } );
  386. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  387. expectedWidth: 16,
  388. modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  389. pointerOffset: {
  390. x: 10,
  391. y: -10
  392. },
  393. resizerPosition: 'bottom-left'
  394. } ) );
  395. it( 'enlarges correctly with right-bottom handler', generateResizeTest( {
  396. expectedWidth: 22,
  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. it( 'enlarges correctly an image with unsupported width unit', async () => {
  405. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }" width="50pt"></image>]` );
  406. widget = viewDocument.getRoot().getChild( 1 );
  407. await generateResizeTest( {
  408. expectedWidth: 15,
  409. modelRegExp: /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  410. pointerOffset: {
  411. x: 0,
  412. y: 5
  413. },
  414. resizerPosition: 'bottom-right'
  415. } )();
  416. } );
  417. } );
  418. describe( 'side image', () => {
  419. beforeEach( () => {
  420. setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  421. view = editor.editing.view;
  422. viewDocument = view.document;
  423. widget = viewDocument.getRoot().getChild( 1 );
  424. } );
  425. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  426. expectedWidth: 18,
  427. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="([\d]{2}(?:\.[\d]{1,2}))%"><\/image>/,
  428. pointerOffset: {
  429. x: 10,
  430. y: -10
  431. },
  432. resizerPosition: 'bottom-left'
  433. } ) );
  434. } );
  435. } );
  436. describe( 'undo integration', () => {
  437. beforeEach( () => createEditor() );
  438. beforeEach( () => {
  439. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  440. widget = viewDocument.getRoot().getChild( 1 );
  441. } );
  442. it( 'has correct border size after undo', async () => {
  443. await generateResizeTest( {
  444. expectedWidth: 120,
  445. pointerOffset: {
  446. x: 0,
  447. y: 10
  448. },
  449. resizerPosition: 'bottom-left'
  450. } )();
  451. editor.commands.get( 'undo' ).execute();
  452. await wait( 160 ); // ui#update event is throttled.
  453. const resizerWrapper = document.querySelector( '.ck-widget__resizer' );
  454. const shadowBoundingRect = resizerWrapper.getBoundingClientRect();
  455. expect( shadowBoundingRect.width ).to.be.equal( 100 );
  456. expect( shadowBoundingRect.height ).to.be.equal( 50 );
  457. } );
  458. } );
  459. describe( 'table integration', () => {
  460. beforeEach( () => createEditor() );
  461. beforeEach( () => {
  462. setData( editor.model,
  463. '<table>' +
  464. `<tableRow><tableCell>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]</tableCell></tableRow>` +
  465. '</table>'
  466. );
  467. widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  468. } );
  469. it( 'works when resizing in a table', generateResizeTest( {
  470. getModel: () => editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 ),
  471. expectedWidth: 60,
  472. modelRegExp: /.+/,
  473. pointerOffset: {
  474. x: -40,
  475. y: -20
  476. },
  477. resizerPosition: 'bottom-right'
  478. } ) );
  479. } );
  480. describe( 'srcset integration', () => {
  481. beforeEach( () => createEditor() );
  482. // The image is 96x96 pixels.
  483. const imageBaseUrl = '/assets/sample.png';
  484. const getModel = () => editor.model.document.getRoot().getChild( 0 );
  485. let images = [];
  486. before( () => {
  487. return Promise.all( [
  488. preloadImage( imageBaseUrl ),
  489. preloadImage( imageBaseUrl + '?a' ),
  490. preloadImage( imageBaseUrl + '?b' ),
  491. preloadImage( imageBaseUrl + '?c' )
  492. ] ).then( loadedImages => {
  493. images = loadedImages;
  494. } );
  495. } );
  496. after( () => {
  497. for ( const image of images ) {
  498. image.remove();
  499. }
  500. } );
  501. beforeEach( () => {
  502. editor.setData(
  503. `<figure class="image">
  504. <img src="${ imageBaseUrl }"
  505. srcset="${ imageBaseUrl }?a 110w,
  506. ${ imageBaseUrl }?b 440w,
  507. ${ imageBaseUrl }?c 1025w"
  508. sizes="100vw" width="96">
  509. </figure>`
  510. );
  511. widget = viewDocument.getRoot().getChild( 0 );
  512. } );
  513. it( 'works with images containing srcset', generateResizeTest( {
  514. getModel,
  515. expectedWidth: 76,
  516. modelRegExp: /.+/,
  517. pointerOffset: {
  518. x: -20,
  519. y: -20
  520. },
  521. resizerPosition: 'bottom-right'
  522. } ) );
  523. it( 'retains width after removing srcset', async () => {
  524. await generateResizeTest( {
  525. getModel,
  526. expectedWidth: 80,
  527. modelRegExp: /.+/,
  528. pointerOffset: {
  529. x: -16,
  530. y: -16
  531. },
  532. resizerPosition: 'bottom-right'
  533. } )();
  534. editor.model.change( writer => {
  535. writer.removeAttribute( 'srcset', getModel() );
  536. } );
  537. expect( editor.getData() )
  538. .to.match( /<figure class="image image_resized" style="width:[\d.]{2,}px;"><img src="\/assets\/sample.png"><\/figure>/ );
  539. } );
  540. async function preloadImage( imageUrl ) {
  541. const image = document.createElement( 'img' );
  542. image.src = imageUrl;
  543. return new Promise( ( resolve, reject ) => {
  544. image.addEventListener( 'load', () => resolve( image ) );
  545. image.addEventListener( 'error', () => reject( image ) );
  546. document.body.appendChild( image );
  547. } );
  548. }
  549. } );
  550. // TODO move to Resizer tests.
  551. describe( 'Resizer', () => {
  552. beforeEach( () => createEditor() );
  553. it( 'uses rounded (int) values', async () => {
  554. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  555. widget = viewDocument.getRoot().getChild( 1 );
  556. await generateResizeTest( {
  557. expectedWidth: 97,
  558. // Makes it resize the image to 97.2188px, unless there's a rounding.
  559. pointerOffset: {
  560. x: 7.3,
  561. y: -1
  562. },
  563. resizerPosition: 'bottom-left',
  564. checkBeforeMouseUp( domFigure, domResizeWrapper ) {
  565. expect( domFigure.style.width ).to.match( /^\d\dpx$/ );
  566. expect( domResizeWrapper.style.width ).to.match( /^\d\dpx$/ );
  567. }
  568. } )();
  569. expect( editor.model.document.getRoot().getChild( 1 ).getAttribute( 'width' ) ).to.match( /^\d\dpx$/ );
  570. } );
  571. it( 'hides the resize wrapper when its disabled', () => {
  572. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  573. const resizer = getSelectedImageResizer( editor );
  574. const resizerWrapper = editor.ui.getEditableElement().querySelector( '.ck-widget__resizer' );
  575. expect( resizerWrapper.style.display ).to.equal( '' );
  576. resizer.isEnabled = false;
  577. expect( resizerWrapper.style.display ).to.equal( 'none' );
  578. } );
  579. } );
  580. describe( 'widget toolbar integration', () => {
  581. let widgetToolbarRepository;
  582. beforeEach( () => createEditor( {
  583. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize, ImageToolbar, ImageTextAlternative ],
  584. image: {
  585. toolbar: [ 'imageTextAlternative' ],
  586. resizeUnit: 'px'
  587. }
  588. } ) );
  589. beforeEach( async () => {
  590. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  591. widget = viewDocument.getRoot().getChild( 1 );
  592. widgetToolbarRepository = editor.plugins.get( 'WidgetToolbarRepository' );
  593. } );
  594. it( 'default toolbar visibility', async () => {
  595. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  596. } );
  597. it( 'visibility during the resize', async () => {
  598. await generateResizeTest( {
  599. expectedWidth: 100,
  600. modelRegExp: /.+/,
  601. pointerOffset: {
  602. x: 0,
  603. y: 0
  604. },
  605. resizerPosition: 'bottom-right',
  606. checkBeforeMouseUp: () => {
  607. expect( widgetToolbarRepository.isEnabled ).to.be.false;
  608. }
  609. } )();
  610. } );
  611. it( 'visibility after the resize', async () => {
  612. await generateResizeTest( {
  613. expectedWidth: 100,
  614. modelRegExp: /.+/,
  615. pointerOffset: {
  616. x: 0,
  617. y: 0
  618. },
  619. resizerPosition: 'bottom-right'
  620. } )();
  621. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  622. } );
  623. it( 'visibility after the resize was canceled', async () => {
  624. const resizer = getSelectedImageResizer( editor );
  625. await generateResizeTest( {
  626. expectedWidth: 100,
  627. modelRegExp: /.+/,
  628. pointerOffset: {
  629. x: 0,
  630. y: 0
  631. },
  632. resizerPosition: 'bottom-right',
  633. checkBeforeMouseUp: () => {
  634. resizer.cancel();
  635. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  636. }
  637. } )();
  638. } );
  639. it( 'restores toolbar when clicking the handle without drag', () => {
  640. // (https://github.com/ckeditor/ckeditor5-widget/pull/112#pullrequestreview-337725256).
  641. const resizerPosition = 'bottom-left';
  642. const domParts = getWidgetDomParts( widget, resizerPosition );
  643. const initialPointerPosition = getResizerCoordinates( domParts.figure, resizerPosition );
  644. focusEditor( editor );
  645. fireMouseEvent( domParts.resizeHandle, 'mousedown', initialPointerPosition );
  646. fireMouseEvent( domParts.resizeHandle, 'mouseup', initialPointerPosition );
  647. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  648. } );
  649. } );
  650. function isVisible( element ) {
  651. // Checks if the DOM element is visible to the end user.
  652. return element.offsetParent !== null && !element.classList.contains( 'ck-hidden' );
  653. }
  654. function fireMouseEvent( target, eventType, eventData ) {
  655. // Using initMouseEvent instead of MouseEvent constructor, as MouseEvent constructor doesn't support passing pageX
  656. // and pageY. See https://stackoverflow.com/questions/45843458/setting-click-events-pagex-and-pagey-always-reverts-to-0
  657. // However there's still a problem, that events created with `initMouseEvent` have **floored** pageX, pageY numbers.
  658. const event = document.createEvent( 'MouseEvent' );
  659. event.initMouseEvent( eventType, true, true, window, null, 0, 0, eventData.pageX, eventData.pageY, false, false, false, false,
  660. MOUSE_BUTTON_MAIN, null );
  661. target.dispatchEvent( event );
  662. }
  663. function wait( delay ) {
  664. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  665. }
  666. function generateResizeTest( options ) {
  667. // options.resizerPosition - top-left / top-right / bottom-right / bottom-left
  668. // options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
  669. // e.g. { x: 10, y: -5 }
  670. // options.expectedWidth
  671. // Returns a test case that puts
  672. return async function() {
  673. const domParts = getWidgetDomParts( widget, options.resizerPosition );
  674. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  675. const modelRegExp = options.modelRegExp ? options.modelRegExp :
  676. /<paragraph>foo<\/paragraph><image src=".+?" width="([\d]+)px"><\/image>/;
  677. focusEditor( editor );
  678. const initialPointerPosition = getResizerCoordinates( domParts.figure, options.resizerPosition );
  679. fireMouseEvent( domParts.resizeHandle, 'mousedown', initialPointerPosition );
  680. fireMouseEvent( domParts.resizeHandle, 'mousemove', initialPointerPosition );
  681. // We need to wait as mousemove events are throttled.
  682. await wait( 40 );
  683. const finishPointerPosition = Object.assign( {}, initialPointerPosition );
  684. finishPointerPosition.pageX += options.pointerOffset.x || 0;
  685. finishPointerPosition.pageY += options.pointerOffset.y || 0;
  686. fireMouseEvent( domParts.resizeHandle, 'mousemove', finishPointerPosition );
  687. expect( parseInt( domParts.figure.style.width ) ).to.be.closeTo( options.expectedWidth, 2, 'DOM width check' );
  688. if ( options.checkBeforeMouseUp ) {
  689. options.checkBeforeMouseUp( domParts.figure, domResizeWrapper );
  690. }
  691. fireMouseEvent( domParts.resizeHandle, 'mouseup', finishPointerPosition );
  692. expect( getData( editor.model, {
  693. withoutSelection: true
  694. } ) ).to.match( modelRegExp );
  695. const modelItem = options.getModel ? options.getModel() : editor.model.document.getRoot().getChild( 1 );
  696. const modelWidth = modelItem.getAttribute( 'width' );
  697. expect( parseFloat( modelWidth, 0 ) )
  698. .to.be.closeTo( options.expectedWidth, 2, 'Model width check' );
  699. };
  700. }
  701. function focusEditor( editor ) {
  702. editor.editing.view.focus();
  703. editor.ui.focusTracker.isFocused = true;
  704. }
  705. function getResizerCoordinates( domFigure, resizerPosition ) {
  706. const domImage = domFigure.querySelector( 'img' );
  707. const imageRect = new Rect( domImage );
  708. const initialPointerPosition = {
  709. pageX: imageRect.left,
  710. pageY: imageRect.top
  711. };
  712. const resizerPositionParts = resizerPosition.split( '-' );
  713. if ( resizerPositionParts.includes( 'right' ) ) {
  714. initialPointerPosition.pageX = imageRect.right;
  715. }
  716. if ( resizerPositionParts.includes( 'bottom' ) ) {
  717. initialPointerPosition.pageY = imageRect.bottom;
  718. }
  719. return initialPointerPosition;
  720. }
  721. function getWidgetDomParts( widget, resizerPosition ) {
  722. const resizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  723. const resizeHandle = resizeWrapper.querySelector( `.ck-widget__resizer__handle-${ resizerPosition }` );
  724. const figure = view.domConverter.mapViewToDom( widget );
  725. return {
  726. resizeWrapper,
  727. resizeHandle,
  728. figure
  729. };
  730. }
  731. function getDomWidth( domElement ) {
  732. return new Rect( domElement ).width;
  733. }
  734. function getSelectedImageResizer( editor ) {
  735. return editor.plugins.get( 'WidgetResize' )._getResizerByViewElement(
  736. editor.editing.view.document.selection.getSelectedElement()
  737. );
  738. }
  739. function createEditor( config ) {
  740. editorElement = document.createElement( 'div' );
  741. absoluteContainer.appendChild( editorElement );
  742. return ClassicEditor
  743. .create( editorElement, config || {
  744. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
  745. image: {
  746. resizeUnit: 'px'
  747. }
  748. } )
  749. .then( newEditor => {
  750. editor = newEditor;
  751. view = editor.editing.view;
  752. viewDocument = view.document;
  753. widget = viewDocument.getRoot().getChild( 1 );
  754. } );
  755. }
  756. } );