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

Internal: Added a possibility to specify whether resized object is central or side aligned. Improved aligning in case of side images.

Marek Lewandowski 6 лет назад
Родитель
Сommit
3296300bc9

+ 1 - 1
packages/ckeditor5-widget/src/resizecontext.js

@@ -107,7 +107,7 @@ export default class ResizeContext {
 		this.domResizeShadow.classList.add( 'ck-widget__resizer-shadow-active' );
 
 		/**
-		 * Position of the handler that has initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc of `null`
+		 * Position of the handler that has initiated the resizing. E.g. `"top-left"`, `"bottom-right"` etc or `null`
 		 * if unknown.
 		 *
 		 * @member {String|null}

+ 16 - 5
packages/ckeditor5-widget/src/resizertopbound.js

@@ -31,6 +31,12 @@ export default class ResizerCentral {
 	begin() {
 		const resizeHost = this.context._getResizeHost();
 		this.closestReferencePoint = getAbsoluteBoundaryPoint( resizeHost, this.context.referenceHandlerPosition );
+
+		// Size of resize host before current resizing transaction.
+		this.initialSize = {
+			width: resizeHost.width,
+			height: resizeHost.height
+		};
 	}
 
 	commit() {}
@@ -42,12 +48,18 @@ export default class ResizerCentral {
 	updateSize( domEventData ) {
 		const context = this.context;
 		const currentCoordinates = context._extractCoordinates( domEventData );
+		const isCentered = this.options.isCentered ? this.options.isCentered( this.context ) : true;
 
 		const enlargement = {
-			x: ( currentCoordinates.x - this.closestReferencePoint.x ) * 2,
-			y: ( currentCoordinates.y - this.closestReferencePoint.y )
+			// @todo it could be simplified if context.referenceCoordinates was an inverted corner (at least for bottom-left).
+			x: this.context.referenceCoordinates.x - ( currentCoordinates.x + this.initialSize.width ),
+			y: ( currentCoordinates.y - this.initialSize.height ) - this.context.referenceCoordinates.y
 		};
 
+		if ( isCentered ) {
+			enlargement.x *= 2;
+		}
+
 		const resizeHost = this.context._getResizeHost();
 
 		const originalSize = {
@@ -56,8 +68,8 @@ export default class ResizerCentral {
 		};
 
 		const proposedSize = {
-			x: Math.abs( this.closestReferencePoint.x - context.referenceCoordinates.x + enlargement.x ),
-			y: Math.abs( this.closestReferencePoint.y - context.referenceCoordinates.y + enlargement.y )
+			x: Math.abs( this.initialSize.width + enlargement.x ),
+			y: Math.abs( this.initialSize.height + enlargement.y )
 		};
 
 		// Dominant determination must take the ratio into account.
@@ -99,7 +111,6 @@ export default class ResizerCentral {
 				y: parseFloat( originalSize.y ) - drawnSize.y
 			};
 
-			context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ diff2.y / 2 }px`;
 			context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = '0px';
 			context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ diff2.x / 2 }px`;