imageresizehandles.js 17 KB

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