imageresize.js 18 KB

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