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

Internal: added top-bound resizer.

Marek Lewandowski 6 лет назад
Родитель
Сommit
0647b40925
1 измененных файлов с 104 добавлено и 0 удалено
  1. 104 0
      packages/ckeditor5-widget/src/resizertopbound.js

+ 104 - 0
packages/ckeditor5-widget/src/resizertopbound.js

@@ -0,0 +1,104 @@
+import {
+	getAbsoluteBoundaryPoint
+} from './utils';
+
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+
+/**
+ *
+ * This resizer is top bound, and expands symmetrically towards left, right and increasingly fast toward bottom
+ * (to compensate for top anchoring).
+ *
+ *
+ *
+ */
+
+/**
+ * Implements a resizer that enlarges/shrinks in all directions.
+ *
+ * @class ResizerCentral
+ */
+export default class ResizerCentral {
+	constructor( context, options ) {
+		this.context = context;
+		this.options = options || {};
+	}
+
+	attach() {}
+
+	begin() {
+		const resizeHost = this.context._getResizeHost();
+		this.closestReferencePoint = getAbsoluteBoundaryPoint( resizeHost, this.context.referenceHandlerPosition );
+	}
+
+	commit() {}
+
+	cancel() {}
+
+	destroy() {}
+
+	updateSize( domEventData ) {
+		const context = this.context;
+		const currentCoordinates = context._extractCoordinates( domEventData );
+
+		const enlargement = {
+			x: ( currentCoordinates.x - this.closestReferencePoint.x ) * 2,
+			y: ( currentCoordinates.y - this.closestReferencePoint.y )
+		};
+
+		const resizeHost = this.context._getResizeHost();
+
+		const originalSize = {
+			x: resizeHost.width,
+			y: resizeHost.height
+		};
+
+		const proposedSize = {
+			x: Math.abs( this.closestReferencePoint.x - context.referenceCoordinates.x + enlargement.x ),
+			y: Math.abs( this.closestReferencePoint.y - context.referenceCoordinates.y + enlargement.y )
+		};
+
+		// Dominant determination must take the ratio into account.
+		proposedSize.dominant = proposedSize.x / context.aspectRatio > proposedSize.y ? 'x' : 'y';
+		proposedSize.max = proposedSize[ proposedSize.dominant ];
+
+		const drawnSize = {
+			x: proposedSize.x,
+			y: proposedSize.y
+		};
+
+		if ( proposedSize.dominant == 'x' ) {
+			drawnSize.y = drawnSize.x / context.aspectRatio;
+		} else {
+			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 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`;
+
+		// 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.
+	}
+
+	redraw() {}
+}
+
+mix( ResizerCentral, ObservableMixin );