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

Internal: more precise resizing.

Note current implementation supports only top-left corner.
Marek Lewandowski 6 лет назад
Родитель
Сommit
b48d9a598c
1 измененных файлов с 31 добавлено и 5 удалено
  1. 31 5
      packages/ckeditor5-widget/src/widgetresizer.js

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

@@ -14,6 +14,23 @@ import MouseMoveObserver from './view/mousemoveobserver';
 
 import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
 
+/**
+ * Returns coordinates of top-left corner of a element, relative to the document's top-left corner.
+ *
+ * @param {HTMLElement} element
+ * @returns {Object} return
+ * @returns {Number} return.x
+ * @returns {Number} return.y
+ */
+function getAbsolutePosition( element ) {
+	const nativeRectangle = element.getBoundingClientRect();
+
+	return {
+		x: nativeRectangle.left + element.ownerDocument.defaultView.scrollX,
+		y: nativeRectangle.top + element.ownerDocument.defaultView.scrollY
+	};
+}
+
 class ResizeContext {
 	constructor( handler ) {
 		const resizeWrapper = getAncestors( handler ).filter(
@@ -22,16 +39,22 @@ class ResizeContext {
 
 		this.widgetWrapper = resizeWrapper;
 		this.shadowWrapper = resizeWrapper.querySelector( '.ck-widget__resizer-shadow' );
-	}
 
-	initialize( domEventData ) {
-		this.initialClickCoordinates = this._extractCoordinates( domEventData );
+		// Reference edge (corner) that should be used to calculate resize difference.
+		this.referenceCoordinates = getAbsolutePosition( handler );
+
+		// Initial height of resizing host / resized element.
+		// @todo: hardcoded img support
+		this.initialHeight = resizeWrapper.querySelector( 'img' ).height;
+	}
 
+	initialize() {
 		this.shadowWrapper.classList.add( 'ck-widget__resizer-shadow-active' );
 	}
 
 	destroy() {
 		this.shadowWrapper.classList.remove( 'ck-widget__resizer-shadow-active' );
+		this.shadowWrapper.removeAttribute( 'style' );
 
 		this.shadowWrapper = null;
 		this.wrapper = null;
@@ -39,15 +62,18 @@ class ResizeContext {
 
 	updateSize( domEventData ) {
 		const currentCoordinates = this._extractCoordinates( domEventData );
-		const yDistance = this.initialClickCoordinates.y - currentCoordinates.y;
-		// for top, left handler:
+		const yDistance = this.referenceCoordinates.y - currentCoordinates.y;
+
+		// For top, left handler:
 		// yDistance > 0 - element is enlarged
 		// yDistance < 0 - element is shrinked
 
 		if ( yDistance > 0 ) {
 			// console.log( 'enlarging' );
+			this.shadowWrapper.style.top = ( yDistance * -1 ) + 'px';
 		} else {
 			// console.log( 'shrinking' );
+			this.shadowWrapper.style.top = ( yDistance * -1 ) + 'px';
 		}
 	}