Selaa lähdekoodia

Internal: refined resizing relative to the center point.

Marek Lewandowski 6 vuotta sitten
vanhempi
sitoutus
4f7c8e7f63

+ 16 - 9
packages/ckeditor5-widget/src/resizecontext.js

@@ -13,12 +13,6 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
 
 const HEIGHT_ATTRIBUTE_NAME = 'height';
 
-function getAspectRatio( element ) {
-	const nativeRectangle = element.getBoundingClientRect();
-
-	return nativeRectangle.width / nativeRectangle.height;
-}
-
 /**
  * Stores the internal state of a single resizable object.
  *
@@ -62,6 +56,16 @@ export default class ResizeContext {
 			x: 0
 		};
 
+		/**
+		 * Size of an image before resize.
+		 *
+		 * This information is only known after DOM was rendered, so it will be updated later.
+		 */
+		this.originalSize = {
+			x: 0,
+			y: 0
+		};
+
 		this._cleanupContext();
 	}
 
@@ -117,9 +121,12 @@ export default class ResizeContext {
 
 		this.referenceCoordinates = getAbsoluteBoundaryPoint( resizeHost, reversedPosition );
 
-		if ( resizeHost ) {
-			this.aspectRatio = getAspectRatio( resizeHost, this.referenceHandlerPosition );
-		}
+		this.originalSize = {
+			x: resizeHost.width,
+			y: resizeHost.height
+		};
+
+		this.aspectRatio = this.originalSize.x / this.originalSize.y;
 
 		this.resizeStrategy.begin( domResizeHandler );
 	}

+ 5 - 19
packages/ckeditor5-widget/src/resizercentral.js

@@ -38,16 +38,9 @@ export default class ResizerCentral {
 			y: ( currentCoordinates.y - this.closestReferencePoint.y ) * 2
 		};
 
-		// const resizeHost = this.context._getResizeHost();
-
-		// const initialSize = {
-		// 	x: resizeHost.width,
-		// 	y: resizeHost.height
-		// };
+		const originalSize = this.context.originalSize;
 
 		const proposedSize = {
-			// x: Math.abs( currentCoordinates.x - context.referenceCoordinates.x ),
-			// y: Math.abs( currentCoordinates.y - context.referenceCoordinates.y )
 			x: Math.abs( this.closestReferencePoint.x - context.referenceCoordinates.x + enlargement.x ),
 			y: Math.abs( this.closestReferencePoint.y - context.referenceCoordinates.y + enlargement.y )
 		};
@@ -67,29 +60,22 @@ export default class ResizerCentral {
 			drawnSize.x = drawnSize.y * context.aspectRatio;
 		}
 
-		// console.log( 'initial', initialSize, 'drawn', drawnSize );
-
 		// Reset shadow bounding.
 		context.domResizeShadow.style.top = 'auto';
 		context.domResizeShadow.style.left = 'auto';
 		context.domResizeShadow.style.bottom = 'auto';
 		context.domResizeShadow.style.right = 'auto';
 
-		// context.domResizeShadow.style[ context.referenceHandlerPosition.split( '-' )[ 0 ] ] = 'auto';
-		// context.domResizeShadow.style[ context.referenceHandlerPosition.split( '-' )[ 1 ] ] = 'auto';
-
-		// const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
+		const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
 
-		// context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ ( drawnSize.x - initialSize.x ) / 2 * -1 }px`;
-		// context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ ( drawnSize.y - initialSize.y ) / 2 * -1 }px`;
-		// context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ enlargement.x / 2 * -1 }px`;
-		// context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ enlargement.y / 2 * -1 }px`;
+		context.domResizeShadow.style[ invertedPosition.split( '-' )[ 0 ] ] = `${ ( originalSize.y - drawnSize.y ) / 2 }px`;
+		context.domResizeShadow.style[ invertedPosition.split( '-' )[ 1 ] ] = `${ ( originalSize.x - drawnSize.x ) / 2 }px`;
 
 		// Apply the actual shadow dimensions.
 		context.domResizeShadow.style.width = `${ drawnSize.x }px`;
 		context.domResizeShadow.style.height = `${ drawnSize.y }px`;
 
-		return proposedSize;
+		return drawnSize; // @todo decide what size should actually be returned, drawn or intended.
 	}
 
 	redraw() {}

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

@@ -63,7 +63,7 @@ export default class ResizerSide {
 		context.domResizeShadow.style.width = `${ drawnSize.x }px`;
 		context.domResizeShadow.style.height = `${ drawnSize.y }px`;
 
-		return proposedSize;
+		return drawnSize; // @todo decide what size should actually be returned.
 	}
 
 	redraw() {}