소스 검색

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