瀏覽代碼

Refactoring.

Piotrek Koszuliński 6 年之前
父節點
當前提交
fbf1051b92
共有 2 個文件被更改,包括 52 次插入125 次删除
  1. 18 39
      packages/ckeditor5-widget/src/resizer.js
  2. 34 86
      packages/ckeditor5-widget/src/widgetresizer.js

+ 18 - 39
packages/ckeditor5-widget/src/resizecontext.js → packages/ckeditor5-widget/src/resizer.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module widget/resizecontext
+ * @module widget/resizer
  */
 
 import View from '@ckeditor/ckeditor5-ui/src/view';
@@ -20,24 +20,20 @@ import mix from '@ckeditor/ckeditor5-utils/src/mix';
 /**
  * Stores the internal state of a single resizable object.
  *
- * @class ResizeContext
+ * @class Resizer
  */
-export default class ResizeContext {
+export default class Resizer {
+	/**
+	 * @param {module:widget/widgetresizer~ResizerOptions} [options] Resizer options.
+	 */
 	constructor( options ) {
-		/**
-		 * View of a widget associated with the resizer.
-		 *
-		 * @member {module:engine/view/element~Element}
-		 */
-		this.widgetWrapperElement = null;
-
 		/**
 		 * Container of entire resize UI.
 		 *
 		 * Note that this property is initialized only after the element bound with resizer is drawn
 		 * so it will be a `null` when uninitialized.
 		 *
-		 * @member {HTMLElement|null}
+		 * @type {HTMLElement|null} #domResizeWrapper
 		 */
 		this.domResizeWrapper = null;
 
@@ -52,7 +48,7 @@ export default class ResizeContext {
 		};
 
 		/**
-		 * @member {module:widget/widgetresizer~ResizerOptions}
+		 * @type {module:widget/widgetresizer~ResizerOptions}
 		 */
 		this._options = options || {};
 
@@ -72,13 +68,13 @@ export default class ResizeContext {
 		 * View to a wrapper containing all the resizer-related views.
 		 *
 		 * @private
-		 * @member {module:engine/view/uielement~UIElement}
+		 * @type {module:engine/view/uielement~UIElement}
 		 */
 		this._resizeWrapperElement = null;
 
 		/**
 		 * @private
-		 * @member {HTMLElement|null}
+		 * @type {HTMLElement|null}
 		 */
 		this._domResizeShadow = null;
 
@@ -120,15 +116,12 @@ export default class ResizeContext {
 	}
 
 	/**
-	 * Method to be called to attach a resizer to a given widget element.
 	 *
-	 * @param {module:engine/view/element~Element} widgetElement Widget's wrapper.
-	 * @param {module:engine/view/downcastwriter~DowncastWriter} writer
 	 */
-	attach( widgetElement, writer ) {
+	attach() {
 		const that = this;
-
-		this.widgetWrapperElement = widgetElement;
+		const viewElement = this._options.viewElement;
+		const writer = this._options.downcastWriter;
 
 		this._resizeWrapperElement = writer.createUIElement( 'div', {
 			class: 'ck ck-widget__resizer-wrapper'
@@ -145,8 +138,8 @@ export default class ResizeContext {
 		} );
 
 		// Append resizer wrapper to the widget's wrapper.
-		writer.insert( writer.createPositionAt( widgetElement, widgetElement.childCount ), this._resizeWrapperElement );
-		writer.addClass( [ 'ck-widget_with-resizer' ], widgetElement );
+		writer.insert( writer.createPositionAt( viewElement, viewElement.childCount ), this._resizeWrapperElement );
+		writer.addClass( [ 'ck-widget_with-resizer' ], viewElement );
 	}
 
 	/**
@@ -190,7 +183,7 @@ export default class ResizeContext {
 	 * @param {module:core/editor/editor~Editor} editor
 	 */
 	commit( editor ) {
-		const modelEntry = this._getModel( editor, this.widgetWrapperElement );
+		const modelElement = this._options.modelElement;
 		const newWidth = this._domResizeShadow.clientWidth;
 
 		this._dismissShadow();
@@ -198,7 +191,7 @@ export default class ResizeContext {
 		this.redraw();
 
 		editor.model.change( writer => {
-			writer.setAttribute( 'width', newWidth + 'px', modelEntry );
+			writer.setAttribute( 'width', newWidth + 'px', modelElement );
 		} );
 
 		this._cleanupContext();
@@ -215,9 +208,6 @@ export default class ResizeContext {
 
 	destroy() {
 		this.cancel();
-
-		this._domResizeShadow = null;
-		this.wrapper = null;
 	}
 
 	/**
@@ -312,20 +302,9 @@ export default class ResizeContext {
 	}
 
 	/**
-	 *
-	 * @param {module:core/editor/editor~Editor} editor
-	 * @param {module:engine/view/element~Element} widgetWrapperElement
-	 * @returns {module:engine/model/element~Element|undefined}
 	 * @protected
-	 */
-	_getModel( editor, widgetWrapperElement ) {
-		return editor.editing.mapper.toModelElement( widgetWrapperElement );
-	}
-
-	/**
 	 * @param {String} position Like `"top-left"`.
 	 * @returns {String} Inverted `position`, e.g. returns `"bottom-right"` if `"top-left"` was given as `position`.
-	 * @protected
 	 */
 	_invertPosition( position ) {
 		const parts = position.split( '-' );
@@ -510,7 +489,7 @@ export default class ResizeContext {
 	}
 }
 
-mix( ResizeContext, ObservableMixin );
+mix( Resizer, ObservableMixin );
 
 class SizeView extends View {
 	constructor() {

+ 34 - 86
packages/ckeditor5-widget/src/widgetresizer.js

@@ -9,7 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
-import ResizeContext from './resizecontext';
+import Resizer from './resizer';
 import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { throttle } from 'lodash-es';
@@ -28,8 +28,8 @@ export default class WidgetResizer extends Plugin {
 	}
 
 	init() {
-		this.contexts = [];
-		this.activeContext = null;
+		this.resizers = [];
+		this.activeResizer = null;
 
 		const mouseObserverHost = global.window.document;
 		const THROTTLE_THRESHOLD = 16; // 16ms = ~60fps
@@ -45,8 +45,8 @@ export default class WidgetResizer extends Plugin {
 		};
 
 		const mouseMoveListener = throttle( ( event, domEventData ) => {
-			if ( this.activeContext ) {
-				this.activeContext.updateSize( domEventData );
+			if ( this.activeResizer ) {
+				this.activeResizer.updateSize( domEventData );
 			}
 		}, THROTTLE_THRESHOLD );
 
@@ -58,28 +58,28 @@ export default class WidgetResizer extends Plugin {
 			if ( resizeHandler ) {
 				this._observers.mouseMove.listenTo( mouseObserverHost, 'mousemove', mouseMoveListener );
 
-				this.activeContext = this._getContextByHandler( resizeHandler );
+				this.activeResizer = this._getContextByHandler( resizeHandler );
 
-				if ( this.activeContext ) {
-					this.activeContext.begin( resizeHandler );
+				if ( this.activeResizer ) {
+					this.activeResizer.begin( resizeHandler );
 				}
 			}
 		} );
 
 		const finishResizing = () => {
-			if ( this.activeContext ) {
+			if ( this.activeResizer ) {
 				this._observers.mouseMove.stopListening( mouseObserverHost, 'mousemove', mouseMoveListener );
 
-				if ( this.activeContext ) {
-					this.activeContext.commit( this.editor );
+				if ( this.activeResizer ) {
+					this.activeResizer.commit( this.editor );
 				}
 
-				this.activeContext = null;
+				this.activeResizer = null;
 			}
 		};
 
 		const resizeContexts = throttle( () => {
-			for ( const context of this.contexts ) {
+			for ( const context of this.resizers ) {
 				context.redraw();
 			}
 		}, THROTTLE_THRESHOLD );
@@ -98,62 +98,19 @@ export default class WidgetResizer extends Plugin {
 	}
 
 	/**
-	 * Method that applies a resizer to a given `widgetElement`.
-	 *
-	 * ```js
-	 * conversion.for( 'editingDowncast' ).elementToElement( {
-	 *		model: 'image',
-	 *		view: ( modelElement, viewWriter ) => {
-	 *			const widget = toImageWidget( createImageViewElement( viewWriter ), viewWriter, t( 'image widget' ) );
-	 *
-	 *			editor.plugins.get( 'WidgetResizer' ).apply( widget, viewWriter );
-	 *
-	 *			return widget;
-	 *		}
-	 *	} );
-	 * ```
-	 *
-	 * You can use the `options` parameter to customize the behavior of the resizer:
-	 *
-	 * ```js
-	 * conversion.for( 'editingDowncast' ).elementToElement( {
-	 *			model: 'image',
-	 *			view: ( modelElement, viewWriter ) => {
-	 *				const widget = toImageWidget( createImageViewElement( viewWriter ), viewWriter, t( 'image widget' ) );
-	 *
-	 *				editor.plugins.get( 'WidgetResizer' ).apply( widget, viewWriter, {
-	 *					getResizeHost( wrapper ) {
-	 *						return wrapper.querySelector( 'img' );
-	 *					},
-	 *					getAspectRatio( resizeHost ) {
-	 *						return resizeHost.naturalWidth / resizeHost.naturalHeight;
-	 *					},
-	 *					isCentered( context ) {
-	 *						const imageStyle = context._getModel( editor, context.widgetWrapperElement ).getAttribute( 'imageStyle' );
-	 *
-	 *						return !imageStyle || imageStyle == 'full';
-	 *					}
-	 *				} );
-	 *
-	 *				return widget;
-	 *			}
-	 *		} );
-	 * ```
-	 *
-	 * @param {module:engine/view/containerelement~ContainerElement} widgetElement
-	 * @param {module:engine/view/downcastwriter~DowncastWriter} writer
 	 * @param {module:widget/widgetresizer~ResizerOptions} [options] Resizer options.
-	 * @returns {module:widget/resizecontext~ResizeContext}
+	 * @returns {module:widget/resizer~Resizer}
 	 */
-	apply( widgetElement, writer, options ) {
-		const context = new ResizeContext( options );
-		context.attach( widgetElement, writer );
+	attachTo( options ) {
+		const resizer = new Resizer( options );
 
-		this.editor.editing.view.once( 'render', () => context.redraw() );
+		resizer.attach();
 
-		this.contexts.push( context );
+		this.editor.editing.view.once( 'render', () => resizer.redraw() );
 
-		return context;
+		this.resizers.push( resizer );
+
+		return resizer;
 	}
 
 	/**
@@ -162,7 +119,7 @@ export default class WidgetResizer extends Plugin {
 	 * @param {HTMLElement} domResizeWrapper
 	 */
 	_getContextByWrapper( domResizeWrapper ) {
-		for ( const context of this.contexts ) {
+		for ( const context of this.resizers ) {
 			if ( domResizeWrapper.isSameNode( context.domResizeWrapper ) ) {
 				return context;
 			}
@@ -182,18 +139,18 @@ export default class WidgetResizer extends Plugin {
  */
 
 /**
- * Function to explicitly point the resizing host.
- *
- * By default resizer will use widget wrapper, but it's possible to point any child within widget wrapper.
- *
- * ```js
- *	editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
- *		getResizeHost( wrapper ) {
- *			return wrapper.querySelector( 'img' );
- *		}
- *	} );
- * ```
- *
+ * @member {module:engine/model/element~Element} module:widget/widgetresizer~ResizerOptions#modelElement
+ */
+
+/**
+ * @member {module:engine/view/containerelement~ContainerElement} module:widget/widgetresizer~ResizerOptions#viewElement
+ */
+
+/**
+ * @member {module:engine/view/downcastwriter~DowncastWriter} module:widget/widgetresizer~ResizerOptions#downcastWriter
+ */
+
+/**
  * @member {Function} module:widget/widgetresizer~ResizerOptions#getResizeHost
  */
 
@@ -202,14 +159,5 @@ export default class WidgetResizer extends Plugin {
  */
 
 /**
- * ```js
- *	editor.plugins.get( 'WidgetResizer' ).apply( widget, conversionApi.writer, {
- *		isCentered( context ) {
- *			const imageStyle = context._getModel( editor, context.widgetWrapperElement ).getAttribute( 'imageStyle' );
- *
- *			return !imageStyle || imageStyle == 'full';
- *		}
- *	} );
- * ```
  * @member {Function} module:widget/widgetresizer~ResizerOptions#isCentered
  */