8
0
Просмотр исходного кода

Internal (image): Dirty PoC to mitigate image resize wrapper flicker.

There's some extra code that I'll be removing now.
Marek Lewandowski 5 лет назад
Родитель
Сommit
e3c567857a

+ 48 - 1
packages/ckeditor5-image/src/imageresize/imageresizehandles.js

@@ -9,6 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import WidgetResize from '@ckeditor/ckeditor5-widget/src/widgetresize';
+import ImageLoadObserver from './../image/imageloadobserver';
 
 /**
  * The image resize by handles feature.
@@ -39,12 +40,20 @@ export default class ImageResizeHandles extends Plugin {
 	init() {
 		const editor = this.editor;
 		const command = editor.commands.get( 'imageResize' );
+		const editingView = editor.editing.view;
+
+		editingView.addObserver( ImageLoadObserver );
 
 		this.bind( 'isEnabled' ).to( command );
 
 		editor.editing.downcastDispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
 			const widget = conversionApi.mapper.toViewElement( data.item );
 
+			// @todo: check if can be cleaned up
+			editingView.change( writer => {
+				writer.addClass( 'image_resizer_loading', widget );
+			} );
+
 			const resizer = editor.plugins
 				.get( WidgetResize )
 				.attachTo( {
@@ -74,13 +83,51 @@ export default class ImageResizeHandles extends Plugin {
 
 			resizer.on( 'updateSize', () => {
 				if ( !widget.hasClass( 'image_resized' ) ) {
-					editor.editing.view.change( writer => {
+					editingView.change( writer => {
 						writer.addClass( 'image_resized', widget );
 					} );
 				}
 			} );
 
+			this._hideResizerUntilImageIsLoaded( resizer, widget );
+
 			resizer.bind( 'isEnabled' ).to( this );
 		}, { priority: 'low' } );
 	}
+
+	/**
+	 * @private
+	 * @param {*} widget
+	 */
+	_hideResizerUntilImageIsLoaded( resizer, widget ) {
+		// Mitigation logic for #8088 (which is caused by a more complex problem #7548).
+		const editingView = this.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 => {
+					writer.removeClass( 'image_resizer_loading', widget );
+					resizer.redraw();
+					writer.addClass( 'image_resizer_loaded', widget );
+				} );
+
+				editingView.document.off( 'imageLoaded', imageLoadCallback ); // Listener is no longer needed.
+			}
+		}
+
+		// setTimeout( () => {
+		// 	console.log( 'timeout1' );
+		// 	setTimeout( () => {
+		// 		console.log( 'timeout2' );
+		// 	}, 0 );
+		// }, 0 );
+	}
 }

+ 15 - 0
packages/ckeditor5-image/theme/imageresize.css

@@ -24,6 +24,21 @@
 	}
 }
 
+/* .ck-content .image .ck-widget__resizer {
+} */
+
+.ck-focused .ck-widget_with-resizer.ck-widget_selected.image > .ck-widget__resizer {
+	display: none;
+}
+
+.ck-focused .ck-widget_with-resizer.ck-widget_selected.image.image_resizer_loaded > .ck-widget__resizer {
+	display: block;
+}
+
+/* .ck-content .image.image_resizer_loaded .ck-widget__resizer {
+	display: block;
+} */
+
 [dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
 	margin-right: var(--ck-spacing-standard);
 }

+ 1 - 1
packages/ckeditor5-widget/theme/widget.css

@@ -5,7 +5,7 @@
 
 :root {
 	--ck-color-resizer: var(--ck-color-focus-border);
-	--ck-resizer-size: 10px;
+	--ck-resizer-size: 80px;
 	--ck-resizer-border-width: 1px;
 	--ck-resizer-border-radius: 2px;