imageresize.js 16 KB

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