Widget / image resize tests refactoring

src/widgetresize.js

@@ -70,33 +70,11 @@ export default class WidgetResize extends Plugin {
 
 		this._observer = Object.create( DomEmitterMixin );
 
-		this._observer.listenTo( domDocument, 'mousedown', ( event, domEventData ) => {
-			if ( !Resizer.isResizeHandle( domEventData.target ) ) {
-				return;
-			}
+		this._observer.listenTo( domDocument, 'mousedown', this._mouseDownListener.bind( this ) );
 
-			const resizeHandle = domEventData.target;
+		this._observer.listenTo( domDocument, 'mousemove', this._mouseMoveListener.bind( this ) );
 
-			this._activeResizer = this._getResizerByHandle( resizeHandle );
-
-			if ( this._activeResizer ) {
-				this._activeResizer.begin( resizeHandle );
-			}
-		} );
-
-		this._observer.listenTo( domDocument, 'mousemove', ( event, domEventData ) => {
-			if ( this._activeResizer ) {
-				this._activeResizer.updateSize( domEventData );
-			}
-		} );
-
-		this._observer.listenTo( domDocument, 'mouseup', () => {
-			if ( this._activeResizer ) {
-				this._activeResizer.commit();
-
-				this._activeResizer = null;
-			}
-		} );
+		this._observer.listenTo( domDocument, 'mouseup', this._mouseUpListener.bind( this ) );
 
 		const redrawFocusedResizer = () => {
 			if ( this._visibleResizer ) {
@@ -127,6 +105,10 @@ export default class WidgetResize extends Plugin {
 
 	destroy() {
 		this._observer.stopListening();
+
+		for ( const resizer of this._resizers.values() ) {
+			resizer.destroy();
+		}
 	}
 
 	/**
@@ -187,6 +169,43 @@ export default class WidgetResize extends Plugin {
 	_getResizerByViewElement( viewElement ) {
 		return this._resizers.get( viewElement );
 	}
+
+	/**
+	 * @protected
+	 * @param {module:utils/eventinfo~EventInfo} event
+	 * @param {Event} domEventData Native DOM event.
+	 */
+	_mouseDownListener( event, domEventData ) {
+		if ( !Resizer.isResizeHandle( domEventData.target ) ) {
+			return;
+		}
+		const resizeHandle = domEventData.target;
+		this._activeResizer = this._getResizerByHandle( resizeHandle );
+		if ( this._activeResizer ) {
+			this._activeResizer.begin( resizeHandle );
+		}
+	}
+
+	/**
+	 * @protected
+	 * @param {module:utils/eventinfo~EventInfo} event
+	 * @param {Event} domEventData Native DOM event.
+	 */
+	_mouseMoveListener( event, domEventData ) {
+		if ( this._activeResizer ) {
+			this._activeResizer.updateSize( domEventData );
+		}
+	}
+
+	/**
+	 * @protected
+	 */
+	_mouseUpListener() {
+		if ( this._activeResizer ) {
+			this._activeResizer.commit();
+			this._activeResizer = null;
+		}
+	}
 }
 
 mix( WidgetResize, ObservableMixin );

src/widgetresize/resizer.js

@@ -83,7 +83,7 @@ export default class Resizer {
 		this.on( 'commit', event => {
 			// State might not be initialized yet. In this case, prevent further handling and make sure that the resizer is
 			// cleaned up (#5195).
-			if ( !this.state.proposedWidth ) {
+			if ( !this.state.proposedWidth && !this.state.proposedWidthPercents ) {
 				this._cleanup();
 				event.stop();
 			}
@@ -153,7 +153,7 @@ export default class Resizer {
 		const editingView = this._options.editor.editing.view;
 
 		editingView.change( writer => {
-			const unit = this._options.unit;
+			const unit = this._options.unit || '%';
 			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + unit;
 
 			writer.setStyle( 'width', newWidth, this._options.viewElement );
@@ -185,8 +185,8 @@ export default class Resizer {
 	 * @fires commit
 	 */
 	commit() {
-		const unit = this._options.unit;
-		const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + this._options.unit;
+		const unit = this._options.unit || '%';
+		const newValue = ( unit === '%' ? this.state.proposedWidthPercents : this.state.proposedWidth ) + unit;
 
 		this._options.onCommit( newValue );
 
@@ -410,23 +410,6 @@ export default class Resizer {
 		domElement.appendChild( sizeUI.element );
 	}
 
-	/**
-	 * Determines the position of a given resize handle.
-	 *
-	 * @private
-	 * @param {HTMLElement} domHandle Handle used to calculate the reference point.
-	 * @returns {String|undefined} Returns a string like `"top-left"` or `undefined` if not matched.
-	 */
-	_getHandlePosition( domHandle ) {
-		const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
-
-		for ( const position of resizerPositions ) {
-			if ( domHandle.classList.contains( getResizerClass( position ) ) ) {
-				return position;
-			}
-		}
-	}
-
 	/**
 	 * @event begin
 	 */