8
0
Эх сурвалжийг харах

Internal (link): Redraw only visible resizers. This improves performance and fixes https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-695949745.

Marek Lewandowski 5 жил өмнө
parent
commit
646cd189f2

+ 7 - 2
packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -100,7 +100,8 @@ export default class ImageResizeHandles extends Plugin {
 	 */
 	_hideResizerUntilImageIsLoaded( resizer, widget ) {
 		// Given that #7548 is fixed, this logic might no longer be needed.
-		const editingView = this.editor.editing.view;
+		const editor = this.editor;
+		const editingView = editor.editing.view;
 
 		editingView.change( writer => {
 			writer.addClass( 'image_resizer_loading', widget );
@@ -113,7 +114,11 @@ export default class ImageResizeHandles extends Plugin {
 
 			if ( domEvent.target.isSameNode( handleHost ) ) {
 				editingView.change( writer => {
-					resizer.redraw();
+					if ( editor.plugins.get( WidgetResize )._visibleResizer == resizer ) {
+						// Small optimization to redraw only a resizer that is visible/focused. Hidden resizers should remain
+						// unaffected. It also fixes https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-695949745.
+						resizer.redraw();
+					}
 					writer.removeClass( 'image_resizer_loading', widget );
 				} );
 

+ 23 - 0
packages/ckeditor5-image/tests/imageresize/imageresizehandles.js

@@ -214,6 +214,29 @@ describe( 'ImageResizeHandles', () => {
 			expect( shadowBoundingRect.width ).to.equal( 100 );
 			expect( shadowBoundingRect.height ).to.equal( 50 );
 		} );
+
+		it( 'doesn\'t show resizers when undoing to multiple images', async () => {
+			// Based on https://github.com/ckeditor/ckeditor5/pull/8108#issuecomment-695949745.
+			setData( editor.model, `[<image src="${ IMAGE_SRC_FIXTURE }"></image><image src="${ IMAGE_SRC_FIXTURE }"></image>]` );
+
+			const paragraph = editor.model.change( writer => {
+				return writer.createElement( 'paragraph' );
+			} );
+			editor.model.insertContent( paragraph );
+
+			// Undo to go back to two, selected images.
+			editor.commands.get( 'undo' ).execute();
+
+			for ( let i = 0; i < 2; i++ ) {
+				widget = viewDocument.getRoot().getChild( i );
+				const domImage = getWidgetDomParts( editor, widget, 'bottom-right' ).widget.querySelector( 'img' );
+				viewDocument.fire( 'imageLoaded', { target: domImage } );
+
+				const domResizeWrapper = getWidgetDomParts( editor, widget, 'bottom-left' ).resizeWrapper;
+
+				expect( domResizeWrapper.getBoundingClientRect().height ).to.equal( 0 );
+			}
+		} );
 	} );
 
 	describe( 'table integration', () => {