imageresize.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541
  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 ImageStyle from '../src/imagestyle';
  12. import Undo from '@ckeditor/ckeditor5-undo/src/undo';
  13. import Table from '@ckeditor/ckeditor5-table/src/table';
  14. import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  15. describe( 'ImageResize', () => {
  16. const FIXTURE_WIDTH = 100;
  17. const FIXTURE_HEIGHT = 50;
  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 ck_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 ck_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( 'visual resizers', () => {
  85. it( 'correct amount is added by default', () => {
  86. const resizers = document.querySelectorAll( '.ck-widget__resizer' );
  87. expect( resizers.length ).to.be.equal( 4 );
  88. } );
  89. describe( 'visibility', () => {
  90. it( 'is hidden by default', () => {
  91. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  92. for ( const resizer of allResizers ) {
  93. expect( isVisible( resizer ) ).to.be.false;
  94. }
  95. } );
  96. it( 'is shown when image is focused', () => {
  97. const widget = viewDocument.getRoot().getChild( 1 );
  98. const allResizers = document.querySelectorAll( '.ck-widget__resizer' );
  99. const domEventDataMock = {
  100. target: widget,
  101. preventDefault: sinon.spy()
  102. };
  103. focusEditor( editor );
  104. viewDocument.fire( 'mousedown', domEventDataMock );
  105. for ( const resizer of allResizers ) {
  106. expect( isVisible( resizer ) ).to.be.true;
  107. }
  108. } );
  109. } );
  110. } );
  111. describe( 'standard image resizing', () => {
  112. beforeEach( () => {
  113. editor.setData( `<p>foo</p><figure><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  114. widget = viewDocument.getRoot().getChild( 1 );
  115. const domEventDataMock = {
  116. target: widget,
  117. preventDefault: sinon.spy()
  118. };
  119. viewDocument.fire( 'mousedown', domEventDataMock );
  120. } );
  121. it( 'shrinks correctly with left-bottom handler', generateResizeTest( {
  122. expectedWidth: 80,
  123. pointerOffset: {
  124. x: 10,
  125. y: -10
  126. },
  127. resizerPosition: 'bottom-left'
  128. } ) );
  129. it( 'shrinks correctly with right-bottom handler', generateResizeTest( {
  130. expectedWidth: 80,
  131. pointerOffset: {
  132. x: -10,
  133. y: -10
  134. },
  135. resizerPosition: 'bottom-right'
  136. } ) );
  137. it( 'enlarges correctly with right-bottom handler, x axis only', generateResizeTest( {
  138. expectedWidth: 120,
  139. pointerOffset: {
  140. x: 10,
  141. y: 0
  142. },
  143. resizerPosition: 'bottom-right'
  144. } ) );
  145. it( 'enlarges correctly with right-bottom handler, y axis only', generateResizeTest( {
  146. expectedWidth: 120,
  147. pointerOffset: {
  148. x: 0,
  149. y: 10
  150. },
  151. resizerPosition: 'bottom-right'
  152. } ) );
  153. it( 'enlarges correctly with left-bottom handler, x axis only', generateResizeTest( {
  154. expectedWidth: 120,
  155. pointerOffset: {
  156. x: -10,
  157. y: 0
  158. },
  159. resizerPosition: 'bottom-left'
  160. } ) );
  161. it( 'enlarges correctly with left-bottom handler, y axis only', generateResizeTest( {
  162. expectedWidth: 120,
  163. pointerOffset: {
  164. x: 0,
  165. y: 10
  166. },
  167. resizerPosition: 'bottom-left'
  168. } ) );
  169. // --- top handlers ---
  170. it( 'enlarges correctly with left-top handler', generateResizeTest( {
  171. expectedWidth: 120,
  172. pointerOffset: {
  173. x: -10,
  174. y: -10
  175. },
  176. resizerPosition: 'top-left'
  177. } ) );
  178. it( 'enlarges correctly with left-top handler, y axis only', generateResizeTest( {
  179. expectedWidth: 120,
  180. pointerOffset: {
  181. x: 0,
  182. y: -10
  183. },
  184. resizerPosition: 'top-left'
  185. } ) );
  186. it( 'enlarges correctly with right-top handler', generateResizeTest( {
  187. expectedWidth: 120,
  188. pointerOffset: {
  189. x: 10,
  190. y: -10
  191. },
  192. resizerPosition: 'top-right'
  193. } ) );
  194. it( 'enlarges correctly with right-top handler, y axis only', generateResizeTest( {
  195. expectedWidth: 120,
  196. pointerOffset: {
  197. x: 0,
  198. y: -10
  199. },
  200. resizerPosition: 'top-right'
  201. } ) );
  202. } );
  203. describe( 'side image resizing', () => {
  204. beforeEach( () => {
  205. editor.setData( `<p>foo</p><figure class="image image-style-side"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  206. widget = viewDocument.getRoot().getChild( 1 );
  207. const domEventDataMock = {
  208. target: widget,
  209. preventDefault: sinon.spy()
  210. };
  211. viewDocument.fire( 'mousedown', domEventDataMock );
  212. } );
  213. it( 'shrinks correctly with left-bottom handler', generateSideResizeTest( {
  214. isSideImage: true,
  215. expectedWidth: 80,
  216. pointerOffset: {
  217. x: 20,
  218. y: -10
  219. },
  220. resizerPosition: 'bottom-left'
  221. } ) );
  222. it( 'shrinks correctly with right-bottom handler', generateSideResizeTest( {
  223. isSideImage: true,
  224. expectedWidth: 80,
  225. pointerOffset: {
  226. x: -20,
  227. y: -10
  228. },
  229. resizerPosition: 'bottom-right'
  230. } ) );
  231. it( 'shrinks correctly with left-top handler', generateSideResizeTest( {
  232. isSideImage: true,
  233. expectedWidth: 80,
  234. pointerOffset: {
  235. x: 20,
  236. y: 10
  237. },
  238. resizerPosition: 'top-left'
  239. } ) );
  240. it( 'shrinks correctly with right-top handler', generateSideResizeTest( {
  241. isSideImage: true,
  242. expectedWidth: 80,
  243. pointerOffset: {
  244. x: -20,
  245. y: 10
  246. },
  247. resizerPosition: 'top-right'
  248. } ) );
  249. it( 'enlarges correctly with left-bottom handler', generateSideResizeTest( {
  250. isSideImage: true,
  251. expectedWidth: 120,
  252. pointerOffset: {
  253. x: -10,
  254. y: 10
  255. },
  256. resizerPosition: 'bottom-left'
  257. } ) );
  258. it( 'enlarges correctly with right-bottom handler', generateSideResizeTest( {
  259. isSideImage: true,
  260. expectedWidth: 120,
  261. pointerOffset: {
  262. x: 10,
  263. y: 10
  264. },
  265. resizerPosition: 'bottom-right'
  266. } ) );
  267. it( 'enlarges correctly with right-bottom handler, y axis only', generateSideResizeTest( {
  268. isSideImage: true,
  269. expectedWidth: 140,
  270. pointerOffset: {
  271. x: 0,
  272. y: 20
  273. },
  274. resizerPosition: 'bottom-right'
  275. } ) );
  276. it( 'enlarges correctly with right-bottom handler, x axis only', generateSideResizeTest( {
  277. isSideImage: true,
  278. expectedWidth: 140,
  279. pointerOffset: {
  280. x: 40,
  281. y: 0
  282. },
  283. resizerPosition: 'bottom-right'
  284. } ) );
  285. it( 'enlarges correctly with left-top handler', generateSideResizeTest( {
  286. isSideImage: true,
  287. expectedWidth: 120,
  288. pointerOffset: {
  289. x: -20,
  290. y: -10
  291. },
  292. resizerPosition: 'top-left'
  293. } ) );
  294. it( 'enlarges correctly with right-top handler', generateSideResizeTest( {
  295. isSideImage: true,
  296. expectedWidth: 120,
  297. pointerOffset: {
  298. x: 20,
  299. y: 10
  300. },
  301. resizerPosition: 'top-right'
  302. } ) );
  303. function generateSideResizeTest( options ) {
  304. return generateResizeTest( Object.assign( {
  305. isSideImage: true,
  306. modelRegExp: /<paragraph>foo<\/paragraph><image imageStyle="side" src=".+?" width="(\d+)px"><\/image>/
  307. }, options ) );
  308. }
  309. } );
  310. describe( 'undo integration', () => {
  311. beforeEach( () => {
  312. editor.setData( `<p>foo</p><figure><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  313. widget = viewDocument.getRoot().getChild( 1 );
  314. const domEventDataMock = {
  315. target: widget,
  316. preventDefault: sinon.spy()
  317. };
  318. viewDocument.fire( 'mousedown', domEventDataMock );
  319. } );
  320. it( 'has correct border size after undo', async () => {
  321. await generateResizeTest( {
  322. expectedWidth: 120,
  323. pointerOffset: {
  324. x: 0,
  325. y: 10
  326. },
  327. resizerPosition: 'bottom-left'
  328. } )();
  329. editor.commands.get( 'undo' ).execute();
  330. await wait( 40 );
  331. const resizerShadow = document.querySelector( '.ck-widget__resizer-shadow' );
  332. const shadowBoundingRect = resizerShadow.getBoundingClientRect();
  333. expect( shadowBoundingRect.width ).to.be.equal( 100 );
  334. expect( shadowBoundingRect.height ).to.be.equal( 50 );
  335. } );
  336. } );
  337. describe( 'table integration', () => {
  338. beforeEach( () => {
  339. editor.setData(
  340. `<figure class="table">
  341. <table>
  342. <tbody>
  343. <tr>
  344. <td>
  345. <figure class="image"><img src="${ IMAGE_SRC_FIXTURE }" alt="Sample image"></figure>
  346. </td>
  347. </tr>
  348. </tbody>
  349. </table>
  350. </figure>`
  351. );
  352. widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  353. const domEventDataMock = {
  354. target: widget,
  355. preventDefault: sinon.spy()
  356. };
  357. viewDocument.fire( 'mousedown', domEventDataMock );
  358. } );
  359. it( 'works when resizing in a table', generateResizeTest( {
  360. getModel: () => editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 ),
  361. expectedWidth: 60,
  362. modelRegExp: /.+/,
  363. pointerOffset: {
  364. x: -40,
  365. y: -20
  366. },
  367. resizerPosition: 'bottom-right'
  368. } ) );
  369. } );
  370. function isVisible( element ) {
  371. // Checks if the DOM element is visible to the end user.
  372. return element.offsetParent !== null;
  373. }
  374. function fireMouseEvent( target, eventType, eventData ) {
  375. // Using initMouseEvent instead of MouseEvent constructor, as MouseEvent constructor doesn't support passing pageX
  376. // and pageY. See https://stackoverflow.com/questions/45843458/setting-click-events-pagex-and-pagey-always-reverts-to-0
  377. // However there's still a problem, that events created with `initMouseEvent` have **floored** pageX, pageY numbers.
  378. const event = document.createEvent( 'MouseEvent' );
  379. event.initMouseEvent( eventType, true, true, window, null, 0, 0, eventData.pageX, eventData.pageY, false, false, false, false,
  380. MOUSE_BUTTON_MAIN, null );
  381. target.dispatchEvent( event );
  382. }
  383. function getElementPosition( element ) {
  384. // Returns top left corner point.
  385. const viewportPosition = element.getBoundingClientRect();
  386. return {
  387. x: viewportPosition.left,
  388. y: viewportPosition.top
  389. };
  390. }
  391. function wait( delay ) {
  392. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  393. }
  394. function generateResizeTest( options ) {
  395. // options.resizerPosition - top-left / top-right / bottom-right / bottom-left
  396. // options.pointerOffset - object - pointer offset relative to the dragged corner. Negative values are perfectly fine.
  397. // e.g. { x: 10, y: -5 }
  398. // options.expectedWidth
  399. // [options.isSideImage=false]
  400. // Returns a test case that puts
  401. return function() {
  402. const domResizeWrapper = view.domConverter.mapViewToDom( widget.getChild( 1 ) );
  403. const domBottomLeftResizer = domResizeWrapper.querySelector( `.ck-widget__resizer-${ options.resizerPosition }` );
  404. const domImage = view.domConverter.mapViewToDom( widget ).querySelector( 'img' );
  405. const imageTopLeftPosition = getElementPosition( domImage );
  406. const resizerPositionParts = options.resizerPosition.split( '-' );
  407. const modelRegExp = options.modelRegExp ? options.modelRegExp :
  408. /<paragraph>foo<\/paragraph><image src=".+?" width="(\d+)px"><\/image>/;
  409. focusEditor( editor );
  410. const initialPointerPosition = {
  411. pageX: imageTopLeftPosition.x,
  412. pageY: imageTopLeftPosition.y
  413. };
  414. if ( resizerPositionParts.includes( 'right' ) ) {
  415. initialPointerPosition.pageX += FIXTURE_WIDTH;
  416. }
  417. if ( resizerPositionParts.includes( 'bottom' ) ) {
  418. initialPointerPosition.pageY += FIXTURE_HEIGHT;
  419. }
  420. const finishPointerPosition = Object.assign( {}, initialPointerPosition );
  421. finishPointerPosition.pageX += options.pointerOffset.x || 0;
  422. finishPointerPosition.pageY += options.pointerOffset.y || 0;
  423. fireMouseEvent( domBottomLeftResizer, 'mousedown', initialPointerPosition );
  424. fireMouseEvent( domBottomLeftResizer, 'mousemove', initialPointerPosition );
  425. // We need to wait as mousemove events are throttled.
  426. return wait( 40 )
  427. .then( () => {
  428. fireMouseEvent( domBottomLeftResizer, 'mousemove', finishPointerPosition );
  429. expect( domImage.width ).to.be.closeTo( options.expectedWidth, 2, 'DOM width check' );
  430. fireMouseEvent( domBottomLeftResizer, 'mouseup', finishPointerPosition );
  431. expect( getData( editor.model, {
  432. withoutSelection: true
  433. } ) ).to.match( modelRegExp );
  434. const modelItem = options.getModel ? options.getModel() : editor.model.document.getRoot().getChild( 1 );
  435. expect( modelItem.getAttribute( 'width' ) ).to.match( /^\d+px$/, 'Model width is properly formatted' );
  436. expect( parseInt( modelItem.getAttribute( 'width' ), 0 ) )
  437. .to.be.closeTo( options.expectedWidth, 2, 'Model width check' );
  438. } );
  439. };
  440. }
  441. function focusEditor( editor ) {
  442. editor.editing.view.focus();
  443. editor.ui.focusTracker.isFocused = true;
  444. }
  445. } );