瀏覽代碼

Internal: Simplified the API. Now resizer options take an editor instance.

This will cause fewer API changes than adding editor / writer instance to required functions.
Marek Lewandowski 6 年之前
父節點
當前提交
29fb2493f3
共有 2 個文件被更改,包括 57 次插入45 次删除
  1. 7 3
      packages/ckeditor5-widget/src/widgetresize.js
  2. 50 42
      packages/ckeditor5-widget/src/widgetresize/resizer.js

+ 7 - 3
packages/ckeditor5-widget/src/widgetresize.js

@@ -100,9 +100,7 @@ export default class WidgetResize extends Plugin {
 
 		const redrawFocusedResizer = () => {
 			if ( this._visibleResizer ) {
-				this.editor.editing.view.change( writer => {
-					this._visibleResizer.redraw( null, writer );
-				} );
+				this._visibleResizer.redraw( null );
 			}
 		};
 
@@ -181,6 +179,12 @@ mix( WidgetResize, ObservableMixin );
  */
 
 /**
+ * Editor instance associated with the resizer.
+ *
+ * @member {module:core/editor/editor~Editor} module:widget/widgetresize~ResizerOptions#editor
+ */
+
+/**
  * @member {module:engine/model/element~Element} module:widget/widgetresize~ResizerOptions#modelElement
  */
 

+ 50 - 42
packages/ckeditor5-widget/src/widgetresize/resizer.js

@@ -63,6 +63,14 @@ export default class Resizer {
 		this._domResizerWrapper = null;
 
 		/**
+		 * View to a wrapper of an element controlled by this resizer.
+		 *
+		 * @private
+		 * @type {module:engine/view/element~Element|null}
+		 */
+		this._resizerWrapperView = null;
+
+		/**
 		 * @observable
 		 */
 		this.set( 'isEnabled', true );
@@ -137,10 +145,11 @@ export default class Resizer {
 	 * @fires updateSize
 	 * @param {Event} domEventData
 	 */
-	updateSize( domEventData, editor ) {
+	updateSize( domEventData ) {
 		const newSize = this._proposeNewSize( domEventData );
+		const editingView = this._options.editor.editing.view;
 
-		editor.editing.view.change( writer => {
+		editingView.change( writer => {
 			const unit = this._options.unit;
 			const newWidth = ( unit === '%' ? newSize.widthPercents : newSize.width ) + unit;
 
@@ -150,24 +159,21 @@ export default class Resizer {
 		// Get an actual image width, and:
 		// * reflect this size to the resize wrapper
 		// * apply this **real** size to the state
-		editor.editing.view.change( writer => {
-			const domHandleHost = this._getHandleHost();
+		const domHandleHost = this._getHandleHost();
+		const domHandleHostRect = new Rect( domHandleHost );
 
-			const domHandleHostRect = new Rect( domHandleHost );
+		newSize.handleHostWidth = Math.round( domHandleHostRect.width );
+		newSize.handleHostHeight = Math.round( domHandleHostRect.height );
 
-			newSize.handleHostWidth = Math.round( domHandleHostRect.width );
-			newSize.handleHostHeight = Math.round( domHandleHostRect.height );
+		// Handle max-width limitation.
+		const domResizeHostRect = new Rect( domHandleHost );
 
-			// Handle max-width limitation.
-			const domResizeHostRect = new Rect( domHandleHost );
+		newSize.width = Math.round( domResizeHostRect.width );
+		newSize.height = Math.round( domResizeHostRect.height );
 
-			newSize.width = Math.round( domResizeHostRect.width );
-			newSize.height = Math.round( domResizeHostRect.height );
+		this.redraw( domHandleHostRect );
 
-			this.redraw( domHandleHostRect, writer );
-
-			this.state.update( newSize );
-		} );
+		this.state.update( newSize );
 	}
 
 	/**
@@ -205,36 +211,38 @@ export default class Resizer {
 	 *
 	 * @param {module:utils/dom/rect~Rect} [handleHostRect] Handle host rectangle might be given to improve performance.
 	 */
-	redraw( handleHostRect, writer ) {
+	redraw( handleHostRect ) {
 		const domWrapper = this._domResizerWrapper;
 
 		if ( existsInDom( domWrapper ) ) {
-			// Refresh only if resizer exists in the DOM.
-			const widgetWrapper = domWrapper.parentElement;
-			const handleHost = this._getHandleHost();
-			const clientRect = handleHostRect || new Rect( handleHost );
-
-			writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
-			writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
-
-			const offsets = {
-				left: handleHost.offsetLeft,
-				top: handleHost.offsetTop,
-				height: handleHost.offsetHeight,
-				width: handleHost.offsetWidth
-			};
-
-			// In case a resizing host is not a widget wrapper, we need to compensate
-			// for any additional offsets the resize host might have. E.g. wrapper padding
-			// or simply another editable. By doing that the border and resizers are shown
-			// only around the resize host.
-			if ( !widgetWrapper.isSameNode( handleHost ) ) {
-				writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
-				writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
-
-				writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
-				writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
-			}
+			this._options.editor.editing.view.change( writer => {
+				// Refresh only if resizer exists in the DOM.
+				const widgetWrapper = domWrapper.parentElement;
+				const handleHost = this._getHandleHost();
+				const clientRect = handleHostRect || new Rect( handleHost );
+
+				writer.setStyle( 'width', clientRect.width + 'px', this._resizerWrapperView );
+				writer.setStyle( 'height', clientRect.height + 'px', this._resizerWrapperView );
+
+				const offsets = {
+					left: handleHost.offsetLeft,
+					top: handleHost.offsetTop,
+					height: handleHost.offsetHeight,
+					width: handleHost.offsetWidth
+				};
+
+				// In case a resizing host is not a widget wrapper, we need to compensate
+				// for any additional offsets the resize host might have. E.g. wrapper padding
+				// or simply another editable. By doing that the border and resizers are shown
+				// only around the resize host.
+				if ( !widgetWrapper.isSameNode( handleHost ) ) {
+					writer.setStyle( 'left', offsets.left + 'px', this._resizerWrapperView );
+					writer.setStyle( 'top', offsets.top + 'px', this._resizerWrapperView );
+
+					writer.setStyle( 'height', offsets.height + 'px', this._resizerWrapperView );
+					writer.setStyle( 'width', offsets.width + 'px', this._resizerWrapperView );
+				}
+			} );
 		}
 
 		function existsInDom( element ) {