8
0
فهرست منبع

Internal: workaround to use render event to catch dom element that is placed in editable in order to obtain image offset from widget wrapper. The same offset is applied to the resizer wrapper so that it is aligned with the image.

Marek Lewandowski 6 سال پیش
والد
کامیت
1df25283a6
2فایلهای تغییر یافته به همراه29 افزوده شده و 6 حذف شده
  1. 11 0
      packages/ckeditor5-widget/src/widgetresizefeature.js
  2. 18 6
      packages/ckeditor5-widget/src/widgetresizer.js

+ 11 - 0
packages/ckeditor5-widget/src/widgetresizefeature.js

@@ -18,6 +18,8 @@ export default class WidgetResizeFeature extends WidgetFeature {
 	apply( widgetElement, writer ) {
 		super.apply( widgetElement, writer );
 
+		let domSelectionHandler = null;
+
 		const selectionHandler = writer.createUIElement( 'div', {
 			class: 'ck ck-widget__resizer-wrapper'
 		}, function( domDocument ) {
@@ -44,11 +46,20 @@ export default class WidgetResizeFeature extends WidgetFeature {
 				domElement.appendChild( icon.element );
 			}
 
+			domSelectionHandler = domElement;
+
 			return domElement;
 		} );
 
 		// Append resizer wrapper to the widget's wrapper.
 		writer.insert( writer.createPositionAt( widgetElement, widgetElement.childCount ), selectionHandler );
 		writer.addClass( [ 'ck-widget_with-resizer' ], widgetElement );
+
+		return () => {
+			const resizingHost = domSelectionHandler.parentElement.querySelector( 'img' );
+
+			domSelectionHandler.style.left = resizingHost.offsetLeft + 'px';
+			domSelectionHandler.style.right = resizingHost.offsetLeft + 'px';
+		};
 	}
 }

+ 18 - 6
packages/ckeditor5-widget/src/widgetresizer.js

@@ -48,11 +48,6 @@ class ResizeContext {
 		const resizingHost = widgetWrapper.querySelector( 'img' );
 		this.initialHeight = resizingHost.height;
 
-		const resizeWrapper = widgetWrapper.querySelector( '.ck-widget__resizer-wrapper' );
-
-		resizeWrapper.style.left = resizingHost.offsetLeft + 'px';
-		resizeWrapper.style.right = resizingHost.offsetLeft + 'px';
-
 		// Position of a clicked resize handler in x and y axes.
 		this.direction = {
 			y: 'top',
@@ -89,6 +84,20 @@ class ResizeContext {
 		}
 	}
 
+	// Accepts the proposed resize intent.
+	commit() {
+	}
+
+	/**
+	 *
+	 * @param {module:@ckeditor/ckeditor5-core/src/editor/editor~Editor} editor
+	 * @param {module:@ckeditor/ckeditor5-engine/src/view/element~Element} widgetWrapperElement
+	 * @returns {module:@ckeditor/ckeditor5-engine/src/model/element~Element|undefined}
+	 */
+	_getModel( editor, widgetWrapperElement ) {
+		return editor.editing.mapper.toModelElement( widgetWrapperElement );
+	}
+
 	_extractCoordinates( event ) {
 		return {
 			x: event.domEvent.pageX,
@@ -152,6 +161,7 @@ export default class WidgetResizer extends Plugin {
 				isActive = false;
 				this._observers.mouseMove.disable();
 
+				resizeContext.commit();
 				resizeContext.destroy();
 				resizeContext = null;
 			}
@@ -169,7 +179,9 @@ export default class WidgetResizer extends Plugin {
 		// @todo inline the logic
 		const ret = new WidgetResizeFeature();
 
-		ret.apply( widgetElement, writer );
+		const renderRefresh = ret.apply( widgetElement, writer );
+
+		this.editor.editing.view.once( 'render', renderRefresh );
 
 		return ret;
 	}