8
0
Prechádzať zdrojové kódy

Internal: mocked very basic implementation for the ResizeContext.updateSize method.

Marek Lewandowski 6 rokov pred
rodič
commit
a86caa72ca

+ 34 - 5
packages/ckeditor5-widget/src/widgetresizer.js

@@ -24,7 +24,9 @@ class ResizeContext {
 		this.shadowWrapper = resizeWrapper.querySelector( '.ck-widget__resizer-shadow' );
 	}
 
-	initialize() {
+	initialize( domEventData ) {
+		this.initialClickCoordinates = this._extractCoordinates( domEventData );
+
 		this.shadowWrapper.classList.add( 'ck-widget__resizer-shadow-active' );
 	}
 
@@ -35,7 +37,26 @@ class ResizeContext {
 		this.wrapper = null;
 	}
 
-	updateSize() {}
+	updateSize( domEventData ) {
+		const currentCoordinates = this._extractCoordinates( domEventData );
+		const yDistance = this.initialClickCoordinates.y - currentCoordinates.y;
+		// for top, left handler:
+		// yDistance > 0 - element is enlarged
+		// yDistance < 0 - element is shrinked
+
+		if ( yDistance > 0 ) {
+			// console.log( 'enlarging' );
+		} else {
+			// console.log( 'shrinking' );
+		}
+	}
+
+	_extractCoordinates( event ) {
+		return {
+			x: event.domEvent.pageX,
+			y: event.domEvent.pageY
+		};
+	}
 }
 
 /**
@@ -67,6 +88,11 @@ export default class WidgetResizer extends Plugin {
 
 		// Mouse move observer is only needed when the mouse button is pressed.
 		// this.listenTo( viewDocument, 'mousemove', () => console.log( 'move' ) );
+		this.listenTo( viewDocument, 'mousemove', ( event, domEventData ) => {
+			if ( resizeContext ) {
+				resizeContext.updateSize( domEventData );
+			}
+		} );
 
 		this.listenTo( viewDocument, 'mousedown', ( event, domEventData ) => {
 			const target = domEventData.domTarget;
@@ -78,11 +104,11 @@ export default class WidgetResizer extends Plugin {
 				this._observers.mouseMove.enable();
 
 				resizeContext = new ResizeContext( resizeHandler );
-				resizeContext.initialize();
+				resizeContext.initialize( domEventData );
 			}
 		} );
 
-		this.listenTo( viewDocument, 'mouseup', () => {
+		const finishResizing = () => {
 			// @todo listen also for mouse up outside of the editable.
 			if ( isActive ) {
 				isActive = false;
@@ -91,7 +117,10 @@ export default class WidgetResizer extends Plugin {
 				resizeContext.destroy();
 				resizeContext = null;
 			}
-		} );
+		};
+
+		// @todo: it should listen on the entire window.
+		this.listenTo( viewDocument, 'mouseup', finishResizing );
 
 		function isResizeWrapper( element ) {
 			return element.classList && element.classList.contains( 'ck-widget__resizer' );