8
0
Pārlūkot izejas kodu

Internal: top-bound resizer now supports resizing focus host as well as the shadow alone.

Marek Lewandowski 6 gadi atpakaļ
vecāks
revīzija
b61c3f4754

+ 5 - 3
packages/ckeditor5-widget/src/resizecontext.js

@@ -1,5 +1,6 @@
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import ResizerCentral from './resizercentral';
+// import ResizerCentral from './resizercentral';
+import ResizerTopBound from './resizertopbound';
 import { getAbsoluteBoundaryPoint } from './utils';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
 
@@ -26,7 +27,8 @@ export default class ResizeContext {
 		// view/Element
 		this.widgetWrapperElement = null;
 
-		this.resizeStrategy = new ResizerCentral( this, options );
+		// this.resizeStrategy = new ResizerCentral( this, options );
+		this.resizeStrategy = new ResizerTopBound( this, options );
 
 		/**
 		 * Container of entire resize UI.
@@ -233,7 +235,7 @@ export default class ResizeContext {
 			x !== null && y !== null );
 
 		sizeUi.bind( 'label' ).to( this, 'proposedX', this, 'proposedY', ( x, y ) =>
-			`${ Math.round( x ) } x ${ Math.round( y ) }` );
+			`${ Math.round( x ) }x${ Math.round( y ) }` );
 
 		sizeUi.bind( 'orientation' ).to( this );
 

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

@@ -75,6 +75,11 @@ export default class ResizerCentral {
 		context.domResizeShadow.style.width = `${ drawnSize.x }px`;
 		context.domResizeShadow.style.height = `${ drawnSize.y }px`;
 
+		// const resizingHost = this.context._getResizeHost();
+
+		// resizingHost.style.width = `${ drawnSize.x }px`;
+		// resizingHost.style.height = `${ drawnSize.y }px`;
+
 		return drawnSize; // @todo decide what size should actually be returned, drawn or intended.
 	}
 

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

@@ -4,6 +4,7 @@ import {
 
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 /**
  *
@@ -74,26 +75,38 @@ export default class ResizerCentral {
 			drawnSize.x = drawnSize.y * context.aspectRatio;
 		}
 
-		// Reset shadow bounding.
-		context.domResizeShadow.style.top = 'auto';
-		context.domResizeShadow.style.left = 'auto';
-		context.domResizeShadow.style.bottom = 'auto';
-		context.domResizeShadow.style.right = 'auto';
+		const resizeUsingImage = global.window.pocResizeUsingImage !== false;
+		let shadowBoundValue = '0px';
 
-		const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
+		if ( !resizeUsingImage ) {
+			shadowBoundValue = 'auto';
+		}
 
-		const diff2 = {
-			x: parseFloat( originalSize.x ) - drawnSize.x,
-			y: parseFloat( originalSize.y ) - drawnSize.y
-		};
+		// Reset shadow bounding.
+		context.domResizeShadow.style.top = shadowBoundValue;
+		context.domResizeShadow.style.left = shadowBoundValue;
+		context.domResizeShadow.style.bottom = shadowBoundValue;
+		context.domResizeShadow.style.right = shadowBoundValue;
+
+		if ( resizeUsingImage ) {
+			resizeHost.style.width = `${ drawnSize.x }px`;
+			resizeHost.style.height = `${ drawnSize.y }px`;
+		} else {
+			const invertedPosition = this.context._invertPosition( context.referenceHandlerPosition );
+
+			const diff2 = {
+				x: parseFloat( originalSize.x ) - drawnSize.x,
+				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`;
+			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`;
 
-		// Apply the actual shadow dimensions.
-		context.domResizeShadow.style.width = `${ drawnSize.x }px`;
-		context.domResizeShadow.style.height = `${ drawnSize.y }px`;
+			// Apply the actual shadow dimensions.
+			context.domResizeShadow.style.width = `${ drawnSize.x }px`;
+			context.domResizeShadow.style.height = `${ drawnSize.y }px`;
+		}
 
 		return drawnSize; // @todo decide what size should actually be returned.
 	}