浏览代码

Internal (image): Refactored ImageResizeHandles plugin in a way that it attaches the resizer once the image is fully loaded.

Marek Lewandowski 5 年之前
父节点
当前提交
83d407bd25
共有 1 个文件被更改,包括 26 次插入49 次删除
  1. 26 49
      packages/ckeditor5-image/src/imageresize/imageresizehandles.js

+ 26 - 49
packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -38,24 +38,41 @@ export default class ImageResizeHandles extends Plugin {
 	 * @inheritDoc
 	 */
 	init() {
+		const command = this.editor.commands.get( 'imageResize' );
+		this.bind( 'isEnabled' ).to( command );
+
+		this._addResizerCreationListener();
+	}
+
+	/**
+	 *
+	 * @private
+	 */
+	_addResizerCreationListener() {
 		const editor = this.editor;
-		const command = editor.commands.get( 'imageResize' );
 		const editingView = editor.editing.view;
 
 		editingView.addObserver( ImageLoadObserver );
 
-		this.bind( 'isEnabled' ).to( command );
+		editingView.document.on( 'imageLoaded', ( evt, domEvent ) => {
+			const imageView = editor.editing.view.domConverter.domToView( domEvent.target );
+			const widgetView = imageView.parent;
+			const mapper = editor.editing.mapper;
 
-		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
-			const widget = conversionApi.mapper.toViewElement( data.item );
+			// const imageModel = mapper.toModelElement( imageView ) || mapper.toModelElement( imageView.parent );
+			const imageModel = mapper.toModelElement( widgetView );
+
+			if ( imageModel.name != 'image' ) {
+				return;
+			}
 
 			const resizer = editor.plugins
 				.get( WidgetResize )
 				.attachTo( {
 					unit: editor.config.get( 'image.resizeUnit' ),
 
-					modelElement: data.item,
-					viewElement: widget,
+					modelElement: imageModel,
+					viewElement: widgetView,
 					editor,
 
 					getHandleHost( domWidgetElement ) {
@@ -66,7 +83,7 @@ export default class ImageResizeHandles extends Plugin {
 					},
 					// TODO consider other positions.
 					isCentered() {
-						const imageStyle = data.item.getAttribute( 'imageStyle' );
+						const imageStyle = imageModel.getAttribute( 'imageStyle' );
 
 						return !imageStyle || imageStyle == 'full' || imageStyle == 'alignCenter';
 					},
@@ -77,54 +94,14 @@ export default class ImageResizeHandles extends Plugin {
 				} );
 
 			resizer.on( 'updateSize', () => {
-				if ( !widget.hasClass( 'image_resized' ) ) {
+				if ( !widgetView.hasClass( 'image_resized' ) ) {
 					editingView.change( writer => {
-						writer.addClass( 'image_resized', widget );
+						writer.addClass( 'image_resized', widgetView );
 					} );
 				}
 			} );
 
-			this._hideResizerUntilImageIsLoaded( resizer, widget );
-
 			resizer.bind( 'isEnabled' ).to( this );
-		}, { priority: 'low' } );
-	}
-
-	/**
-	 * Function to add listeners that will hide the resizer frame until the image is loaded,
-	 * to avoid [resize frame flashing when the image is not yet loaded](https://github.com/ckeditor/ckeditor5/issues/8088).
-	 *
-	 * @private
-	 * @param {module:widget/widgetresize/resizer~Resizer} resizer
-	 * @param {module:engine/view/containerelement~ContainerElement} widget
-	 */
-	_hideResizerUntilImageIsLoaded( resizer, widget ) {
-		// Given that #7548 is fixed, this logic might no longer be needed.
-		const editor = this.editor;
-		const editingView = editor.editing.view;
-
-		editingView.change( writer => {
-			writer.addClass( 'image_resizer_loading', widget );
 		} );
-
-		editingView.document.on( 'imageLoaded', imageLoadCallback );
-
-		function imageLoadCallback( evt, domEvent ) {
-			const handleHost = resizer._getHandleHost();
-
-			if ( domEvent.target.isSameNode( handleHost ) ) {
-				editingView.change( writer => {
-					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 );
-				} );
-
-				// Remove image load listener for optimization, as it is no longer needed.
-				editingView.document.off( 'imageLoaded', imageLoadCallback );
-			}
-		}
 	}
 }