imageresize.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  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 { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
  19. import {
  20. focusEditor,
  21. resizerMouseSimulator,
  22. getWidgetDomParts,
  23. getHandleCenterPoint
  24. } from '@ckeditor/ckeditor5-widget/tests/widgetresize/_utils/utils';
  25. import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
  26. describe( 'ImageResize', () => {
  27. // 100x50 black png image
  28. const IMAGE_SRC_FIXTURE = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAyCAQAAAAAPLY1AAAAQklEQVR42u3PQREAAAgDoK1/' +
  29. 'aM3g14MGNJMXKiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJysRFNMgH0RpujAAAAAElFTkSuQmCC';
  30. let absoluteContainer, widget, editor, view, viewDocument, editorElement;
  31. before( () => {
  32. // This container is required to position editor element in a reliable element.
  33. // @todo ensure whether it's required after migrating the tests.
  34. absoluteContainer = document.createElement( 'div' );
  35. absoluteContainer.style.top = '50px';
  36. absoluteContainer.style.left = '50px';
  37. absoluteContainer.style.height = '1000px';
  38. absoluteContainer.style.width = '500px';
  39. absoluteContainer.style.position = 'absolute';
  40. document.body.appendChild( absoluteContainer );
  41. } );
  42. after( () => {
  43. absoluteContainer.remove();
  44. } );
  45. afterEach( () => {
  46. if ( editorElement ) {
  47. editorElement.remove();
  48. }
  49. if ( editor ) {
  50. return editor.destroy();
  51. }
  52. } );
  53. describe( 'conversion', () => {
  54. beforeEach( () => createEditor() );
  55. it( 'upcasts 100px width correctly', () => {
  56. editor.setData( `<figure class="image" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  57. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '100px' );
  58. } );
  59. it( 'upcasts 50% width correctly', () => {
  60. editor.setData( `<figure class="image" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  61. expect( editor.model.document.getRoot().getChild( 0 ).getAttribute( 'width' ) ).to.equal( '50%' );
  62. } );
  63. it( 'downcasts 100px width correctly', () => {
  64. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="100px"></image>` );
  65. expect( editor.getData() )
  66. .to.equal( `<figure class="image image_resized" style="width:100px;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  67. } );
  68. it( 'downcasts 50% width correctly', () => {
  69. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  70. expect( editor.getData() )
  71. .to.equal( `<figure class="image image_resized" style="width:50%;"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  72. } );
  73. it( 'removes style and extra class when no longer resized', () => {
  74. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  75. const imageModel = editor.model.document.getRoot().getChild( 0 );
  76. editor.model.change( writer => {
  77. writer.removeAttribute( 'width', imageModel );
  78. } );
  79. expect( editor.getData() )
  80. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  81. } );
  82. it( 'doesn\'t downcast consumed tokens', () => {
  83. editor.conversion.for( 'downcast' ).add( dispatcher =>
  84. dispatcher.on( 'attribute:width:image', ( evt, data, conversionApi ) => {
  85. conversionApi.consumable.consume( data.item, 'attribute:width:image' );
  86. }, { priority: 'high' } )
  87. );
  88. setData( editor.model, `<image src="${ IMAGE_SRC_FIXTURE }" width="50%"></image>` );
  89. expect( editor.getData() )
  90. .to.equal( `<figure class="image"><img src="${ IMAGE_SRC_FIXTURE }"></figure>` );
  91. } );
  92. } );
  93. describe( 'schema', () => {
  94. beforeEach( () => createEditor() );
  95. it( 'allows the width attribute', () => {
  96. expect( editor.model.schema.checkAttribute( 'image', 'width' ) ).to.be.true;
  97. } );
  98. it( 'defines width as a formatting attribute', () => {
  99. expect( editor.model.schema.getAttributeProperties( 'width' ) ).to.have.property( 'isFormatting', true );
  100. } );
  101. } );
  102. describe( 'command', () => {
  103. beforeEach( () => createEditor() );
  104. it( 'defines the imageResize command', () => {
  105. expect( editor.commands.get( 'imageResize' ) ).to.be.instanceOf( ImageResizeCommand );
  106. } );
  107. it( 'uses the command on commit', async () => {
  108. const spy = sinon.spy( editor.commands.get( 'imageResize' ), 'execute' );
  109. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  110. widget = viewDocument.getRoot().getChild( 1 );
  111. const domParts = getWidgetDomParts( editor, widget, 'bottom-left' );
  112. const finalPointerPosition = getHandleCenterPoint( domParts.widget, 'bottom-left' ).moveBy( 10, -10 );
  113. resizerMouseSimulator.dragTo( editor, domParts.resizeHandle, finalPointerPosition );
  114. expect( spy.calledOnce ).to.be.true;
  115. expect( spy.args[ 0 ][ 0 ] ).to.deep.equal( { width: '80px' } );
  116. } );
  117. it( 'disables the resizer if the command is disabled', () => {
  118. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  119. const resizer = getSelectedImageResizer( editor );
  120. let isEnabled = false;
  121. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  122. evt.return = isEnabled;
  123. evt.stop();
  124. }, { priority: 'highest' } );
  125. editor.commands.get( 'imageResize' ).refresh();
  126. expect( resizer.isEnabled ).to.be.false;
  127. isEnabled = true;
  128. editor.commands.get( 'imageResize' ).refresh();
  129. expect( resizer.isEnabled ).to.be.true;
  130. } );
  131. it( 'the resizer is disabled from the beginning when the command is disabled when the image is inserted', () => {
  132. setData( editor.model, '<paragraph>foo[]</paragraph>' );
  133. editor.commands.get( 'imageResize' ).on( 'set:isEnabled', evt => {
  134. evt.return = false;
  135. evt.stop();
  136. }, { priority: 'highest' } );
  137. editor.commands.get( 'imageResize' ).refresh();
  138. editor.model.change( writer => {
  139. editor.model.insertContent( writer.createElement( 'image', { src: IMAGE_SRC_FIXTURE } ) );
  140. } );
  141. const resizer = getSelectedImageResizer( editor );
  142. const resizerWrapper = editor.ui.getEditableElement().querySelector( '.ck-widget__resizer' );
  143. expect( resizer.isEnabled ).to.be.false;
  144. expect( resizerWrapper.style.display ).to.equal( 'none' );
  145. } );
  146. } );
  147. it( 'uses percents by default', async () => {
  148. const localEditor = await createEditor( {
  149. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ]
  150. } );
  151. const attachToSpy = sinon.spy( localEditor.plugins.get( WidgetResize ), 'attachTo' );
  152. setData( localEditor.model, `[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  153. expect( attachToSpy.args[ 0 ][ 0 ] ).to.have.a.property( 'unit', '%' );
  154. attachToSpy.restore();
  155. } );
  156. describe( 'side image resizing', () => {
  157. beforeEach( () => createEditor() );
  158. beforeEach( () => {
  159. setData( editor.model, `<paragraph>foo</paragraph>[<image imageStyle="side" src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  160. widget = viewDocument.getRoot().getChild( 1 );
  161. } );
  162. it( 'doesn\'t flicker at the beginning of the resize', async () => {
  163. // (#5189)
  164. const resizerPosition = 'bottom-left';
  165. const domParts = getWidgetDomParts( editor, widget, resizerPosition );
  166. const initialPointerPosition = getHandleCenterPoint( domParts.widget, resizerPosition );
  167. const resizeWrapperView = widget.getChild( 1 );
  168. resizerMouseSimulator.down( editor, domParts.resizeHandle );
  169. await wait( 40 );
  170. resizerMouseSimulator.move( editor, domParts.resizeHandle, null, initialPointerPosition );
  171. expect( resizeWrapperView.getStyle( 'width' ) ).to.be.equal( '100px' );
  172. resizerMouseSimulator.up( editor );
  173. } );
  174. it( 'makes no change when clicking the handle without drag', () => {
  175. const resizerPosition = 'bottom-left';
  176. const expectedWidth = 100;
  177. const domParts = getWidgetDomParts( editor, widget, resizerPosition );
  178. resizerMouseSimulator.down( editor, domParts.resizeHandle );
  179. expect( getDomWidth( domParts.widget ), 'DOM width check' ).to.be.closeTo( expectedWidth, 2 );
  180. resizerMouseSimulator.up( editor );
  181. const modelItem = editor.model.document.getRoot().getChild( 1 );
  182. expect( modelItem.getAttribute( 'width' ), 'model width attribute' ).to.be.undefined;
  183. } );
  184. } );
  185. describe( 'undo integration', () => {
  186. beforeEach( () => createEditor() );
  187. beforeEach( () => {
  188. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  189. widget = viewDocument.getRoot().getChild( 1 );
  190. } );
  191. it( 'has correct border size after undo', async () => {
  192. const domParts = getWidgetDomParts( editor, widget, 'bottom-left' );
  193. const initialPosition = getHandleCenterPoint( domParts.widget, 'bottom-left' );
  194. const finalPointerPosition = initialPosition.clone().moveBy( 0, 10 );
  195. resizerMouseSimulator.dragTo( editor, domParts.resizeHandle, {
  196. from: initialPosition,
  197. to: finalPointerPosition
  198. } );
  199. expect( '120px' ).to.be.equal( domParts.widget.style.width );
  200. // ui#update (fired after undo changes) handling is throttled. Wait, so that it will redraw instantly.
  201. await wait( 220 );
  202. editor.commands.get( 'undo' ).execute();
  203. const resizerWrapper = document.querySelector( '.ck-widget__resizer' );
  204. const shadowBoundingRect = resizerWrapper.getBoundingClientRect();
  205. expect( shadowBoundingRect.width ).to.be.equal( 100 );
  206. expect( shadowBoundingRect.height ).to.be.equal( 50 );
  207. } );
  208. } );
  209. describe( 'table integration', () => {
  210. beforeEach( () => createEditor() );
  211. it( 'works when resizing in a table', () => {
  212. setData( editor.model,
  213. '<table>' +
  214. `<tableRow><tableCell>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]</tableCell></tableRow>` +
  215. '</table>'
  216. );
  217. widget = viewDocument.getRoot().getChild( 0 ).getChild( 1 ).getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  218. const model = editor.model.document.getRoot().getChild( 0 ).getChild( 0 ).getChild( 0 ).getChild( 0 );
  219. const domParts = getWidgetDomParts( editor, widget, 'bottom-right' );
  220. const initialPosition = getHandleCenterPoint( domParts.widget, 'bottom-right' );
  221. const finalPointerPosition = initialPosition.clone().moveBy( -40, -20 );
  222. resizerMouseSimulator.dragTo( editor, domParts.resizeHandle, {
  223. from: initialPosition,
  224. to: finalPointerPosition
  225. } );
  226. expect( model.getAttribute( 'width' ) ).to.be.equal( '60px' );
  227. } );
  228. } );
  229. describe( 'srcset integration', () => {
  230. beforeEach( () => createEditor() );
  231. // The image is 96x96 pixels.
  232. const imageBaseUrl = '/assets/sample.png';
  233. let model;
  234. let images = [];
  235. before( () => {
  236. return Promise.all( [
  237. preloadImage( imageBaseUrl ),
  238. preloadImage( imageBaseUrl + '?a' ),
  239. preloadImage( imageBaseUrl + '?b' ),
  240. preloadImage( imageBaseUrl + '?c' )
  241. ] ).then( loadedImages => {
  242. images = loadedImages;
  243. } );
  244. } );
  245. after( () => {
  246. for ( const image of images ) {
  247. image.remove();
  248. }
  249. } );
  250. beforeEach( () => {
  251. editor.setData(
  252. `<figure class="image">
  253. <img src="${ imageBaseUrl }"
  254. srcset="${ imageBaseUrl }?a 110w,
  255. ${ imageBaseUrl }?b 440w,
  256. ${ imageBaseUrl }?c 1025w"
  257. sizes="100vw" width="96">
  258. </figure>`
  259. );
  260. widget = viewDocument.getRoot().getChild( 0 );
  261. model = editor.model.document.getRoot().getChild( 0 );
  262. } );
  263. it( 'works with images containing srcset', () => {
  264. const domParts = getWidgetDomParts( editor, widget, 'bottom-right' );
  265. const initialPosition = getHandleCenterPoint( domParts.widget, 'bottom-right' );
  266. const finalPointerPosition = initialPosition.clone().moveBy( -20, -20 );
  267. resizerMouseSimulator.dragTo( editor, domParts.resizeHandle, {
  268. from: initialPosition,
  269. to: finalPointerPosition
  270. } );
  271. expect( model.getAttribute( 'width' ) ).to.be.equal( '76px' );
  272. } );
  273. it( 'retains width after removing srcset', () => {
  274. const domParts = getWidgetDomParts( editor, widget, 'bottom-right' );
  275. const initialPosition = getHandleCenterPoint( domParts.widget, 'bottom-right' );
  276. const finalPointerPosition = initialPosition.clone().moveBy( -16, -16 );
  277. resizerMouseSimulator.dragTo( editor, domParts.resizeHandle, {
  278. from: initialPosition,
  279. to: finalPointerPosition
  280. } );
  281. editor.model.change( writer => {
  282. writer.removeAttribute( 'srcset', model );
  283. } );
  284. const expectedHtml = '<figure class="image image_resized" style="width:80px;"><img src="/assets/sample.png"></figure>';
  285. expect( editor.getData() ).to.be.equal( expectedHtml );
  286. } );
  287. async function preloadImage( imageUrl ) {
  288. const image = document.createElement( 'img' );
  289. image.src = imageUrl;
  290. return new Promise( ( resolve, reject ) => {
  291. image.addEventListener( 'load', () => resolve( image ) );
  292. image.addEventListener( 'error', () => reject( image ) );
  293. document.body.appendChild( image );
  294. } );
  295. }
  296. } );
  297. describe( 'widget toolbar integration', () => {
  298. let widgetToolbarRepository;
  299. beforeEach( () => createEditor( {
  300. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize, ImageToolbar, ImageTextAlternative ],
  301. image: {
  302. toolbar: [ 'imageTextAlternative' ],
  303. resizeUnit: 'px'
  304. }
  305. } ) );
  306. beforeEach( async () => {
  307. setData( editor.model, `<paragraph>foo</paragraph>[<image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
  308. widget = viewDocument.getRoot().getChild( 1 );
  309. widgetToolbarRepository = editor.plugins.get( 'WidgetToolbarRepository' );
  310. } );
  311. it( 'default toolbar visibility', async () => {
  312. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  313. } );
  314. it( 'visibility during the resize', async () => {
  315. const domResizeHandle = getWidgetDomParts( editor, widget, 'bottom-left' ).resizeHandle;
  316. resizerMouseSimulator.down( editor, domResizeHandle );
  317. expect( widgetToolbarRepository.isEnabled ).to.be.false;
  318. resizerMouseSimulator.up( editor, domResizeHandle );
  319. } );
  320. it( 'visibility after the resize', async () => {
  321. const domResizeHandle = getWidgetDomParts( editor, widget, 'bottom-left' ).resizeHandle;
  322. resizerMouseSimulator.down( editor, domResizeHandle );
  323. resizerMouseSimulator.up( editor, domResizeHandle );
  324. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  325. } );
  326. it( 'visibility after the resize was canceled', async () => {
  327. const resizer = getSelectedImageResizer( editor );
  328. const domResizeHandle = getWidgetDomParts( editor, widget, 'bottom-left' ).resizeHandle;
  329. resizerMouseSimulator.down( editor, domResizeHandle );
  330. resizer.cancel();
  331. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  332. } );
  333. it( 'restores toolbar when clicking the handle without drag', () => {
  334. // (https://github.com/ckeditor/ckeditor5-widget/pull/112#pullrequestreview-337725256).
  335. const domResizeHandle = getWidgetDomParts( editor, widget, 'bottom-left' ).resizeHandle;
  336. resizerMouseSimulator.down( editor, domResizeHandle );
  337. resizerMouseSimulator.up( editor, domResizeHandle );
  338. expect( widgetToolbarRepository.isEnabled ).to.be.true;
  339. } );
  340. } );
  341. function wait( delay ) {
  342. return new Promise( resolve => window.setTimeout( () => resolve(), delay ) );
  343. }
  344. function getDomWidth( domElement ) {
  345. return new Rect( domElement ).width;
  346. }
  347. function getSelectedImageResizer( editor ) {
  348. return editor.plugins.get( 'WidgetResize' )._getResizerByViewElement(
  349. editor.editing.view.document.selection.getSelectedElement()
  350. );
  351. }
  352. function createEditor( config ) {
  353. editorElement = document.createElement( 'div' );
  354. absoluteContainer.appendChild( editorElement );
  355. return ClassicEditor
  356. .create( editorElement, config || {
  357. plugins: [ Image, ImageStyle, Paragraph, Undo, Table, ImageResize ],
  358. image: {
  359. resizeUnit: 'px'
  360. }
  361. } )
  362. .then( newEditor => {
  363. editor = newEditor;
  364. view = editor.editing.view;
  365. viewDocument = view.document;
  366. widget = viewDocument.getRoot().getChild( 1 );
  367. focusEditor( editor );
  368. return editor;
  369. } );
  370. }
  371. } );