Ver código fonte

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 anos atrás
pai
commit
1df25283a6

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