imageresizehandles.js 14 KB

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