Răsfoiți Sursa

Internal: now widget resizer accepts additional options. This will allow to customize resize host.

Marek Lewandowski 6 ani în urmă
părinte
comite
ee0ca542bd

+ 35 - 7
packages/ckeditor5-widget/src/resizecontext.js

@@ -1,6 +1,10 @@
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import dragHandlerIcon from '../theme/icons/drag-handler.svg';
 
+/**
+ * @module widget/resizecontext
+ */
+
 const HEIGHT_ATTRIBUTE_NAME = 'height';
 
 /**
@@ -26,18 +30,37 @@ function getAbsoluteBoundaryPoint( element, resizerPosition ) {
 	return ret;
 }
 
+/**
+ * Stores the internal state of a single resizable object.
+ *
+ * @class ResizeContext
+ */
 export default class ResizeContext {
-	constructor() {
-		// HTMLElement???
-		this.resizeHost = null;
+	constructor( options ) {
+		// HTMLElement??? - @todo seems to be not needed.
+		// this.resizeHost = null;
 		// view/UiElement
 		this.resizeWrapperElement = null;
 		// view/Element
 		this.widgetWrapperElement = null;
-		// HTMLElement|null - might be uninitialized
+
+		/**
+		 * 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}
+		 */
 		this.domResizeWrapper = null;
+
+		/**
+		 * @member {HTMLElement|null}
+		 */
 		this.domResizeShadow = null;
 
+		this.options = options || {};
+
 		// @todo: ---- options below seems like a little outside of a scope of a single context ----
 		// Size before resizing.
 		this.initialSize = {
@@ -158,10 +181,15 @@ export default class ResizeContext {
 
 	redraw() {
 		if ( this.domResizeWrapper ) {
-			const resizingHost = this.domResizeWrapper.parentElement.querySelector( 'img' );
+			const widgetWrapper = this.domResizeWrapper.parentElement;
 
-			this.domResizeWrapper.style.left = resizingHost.offsetLeft + 'px';
-			this.domResizeWrapper.style.right = resizingHost.offsetLeft + 'px';
+			const resizingHost = this.options.getResizeHost ?
+				this.options.getResizeHost( widgetWrapper ) : widgetWrapper;
+
+			if ( !widgetWrapper.isSameNode( resizingHost ) ) {
+				this.domResizeWrapper.style.left = resizingHost.offsetLeft + 'px';
+				this.domResizeWrapper.style.right = resizingHost.offsetLeft + 'px';
+			}
 		}
 	}
 

+ 21 - 3
packages/ckeditor5-widget/src/widgetresizer.js

@@ -4,7 +4,7 @@
  */
 
 /**
- * @module widget/widget
+ * @module widget/widgetresizer
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
@@ -15,6 +15,18 @@ import ResizeContext2 from './resizecontext';
 
 const HEIGHT_ATTRIBUTE_NAME = 'height';
 
+/**
+ * Interface describing a resizer. It allows to define available resizer set, specify resizing host etc.
+ *
+ * @interface ResizerOptions
+ */
+
+/**
+ * List of available resizers like `"top-left"`, `"bottom-right"`, etc.
+ *
+ * @member {Array.<String>} module:widget/widgetresizer~ResizerOptions#resizers
+ */
+
 /**
  * The base class for widget features. This type provides a common API for reusable features of widgets.
  */
@@ -93,8 +105,14 @@ export default class WidgetResizer extends Plugin {
 		}
 	}
 
-	apply( widgetElement, writer ) {
-		const context = new ResizeContext2();
+	/**
+	 * @param {module:engine/view/containerelement~ContainerElement} widgetElement
+	 * @param {module:engine/view/downcastwriter~DowncastWriter} writer
+	 * @param {module:widget/widgetresizer~ResizerOptions} [options] Resizer options.
+	 * @memberof WidgetResizer
+	 */
+	apply( widgetElement, writer, options ) {
+		const context = new ResizeContext2( options );
 		context.attach( widgetElement, writer );
 
 		this.editor.editing.view.once( 'render', () => context.redraw() );