瀏覽代碼

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;
 	}