8
0
Просмотр исходного кода

Internal: dirty version that just shows an overlay when resize handler is clicked.

Marek Lewandowski 6 лет назад
Родитель
Сommit
e9200e928b

+ 54 - 0
packages/ckeditor5-widget/src/view/mousemoveobserver.js

@@ -0,0 +1,54 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module widget/view/MouseMoveObserver
+ */
+
+import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
+import { throttle } from 'lodash-es';
+
+/**
+ * Mouse move observer.
+ *
+ * It throttles the event so that it doesn't fire too often.
+ *
+ * @extends module:engine/view/observer/domeventobserver~DomEventObserver
+ */
+export default class MouseMoveObserver extends DomEventObserver {
+	constructor( view ) {
+		super( view );
+
+		this.domEventType = 'mousemove';
+
+		this._fireMouseMoveEvent = throttle( domEvent => this.fire( domEvent.type, domEvent ), 60 );
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+
+		this._fireMouseMoveEvent.cancel();
+	}
+
+	onDomEvent( domEvent ) {
+		this._fireMouseMoveEvent( domEvent );
+	}
+}
+
+/**
+ * Fired when mouse moves over the editable.
+ *
+ * Introduced by {@link module:widget/view/MouseMoveObserver~MouseMoveObserver}.
+ *
+ * Note that this event is not available by default. To make it available {@link widget/view/MouseMoveObserver~MouseMoveObserver}
+ * needs to be added to {@link module:engine/view/view~View} by a {@link module:engine/view/view~View#addObserver} method.
+ *
+ * @see module:widget/view/MouseMoveObserver~MouseMoveObserver
+ * @event module:engine/view/document~Document#event:mousemove
+ * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ */

+ 40 - 0
packages/ckeditor5-widget/src/view/mouseobserver.js

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module widget/view/mouseobserver
+ */
+
+import DomEventObserver from '@ckeditor/ckeditor5-engine/src/view/observer/domeventobserver';
+
+/**
+ * Mouse events observer.
+ *
+ * @extends module:engine/view/observer/domeventobserver~DomEventObserver
+ */
+export default class MouseObserver extends DomEventObserver {
+	constructor( view ) {
+		super( view );
+
+		this.domEventType = [ 'mousedown', 'mouseup' ];
+	}
+
+	onDomEvent( domEvent ) {
+		this.fire( domEvent.type, domEvent );
+	}
+}
+
+/**
+ * Fired when mouse button is pressed down on one of the editables.
+ *
+ * Introduced by {@link module:engine/view/observer/mouseobserver~MouseObserver}.
+ *
+ * Note that this event is not available by default. To make it available {@link module:engine/view/observer/mouseobserver~MouseObserver}
+ * needs to be added to {@link module:engine/view/view~View} by a {@link module:engine/view/view~View#addObserver} method.
+ *
+ * @see module:engine/view/observer/mouseobserver~MouseObserver
+ * @event module:engine/view/document~Document#event:mousedown
+ * @param {module:engine/view/observer/domeventdata~DomEventData} data Event data.
+ */

+ 4 - 0
packages/ckeditor5-widget/src/widgetresizefeature.js

@@ -24,6 +24,10 @@ export default class WidgetResizeFeature extends WidgetFeature {
 			const domElement = this.toDomElement( domDocument );
 			const resizerPositions = [ 'top-left', 'top-right', 'bottom-right', 'bottom-left' ];
 
+			const shadowElement = domDocument.createElement( 'div' );
+			shadowElement.setAttribute( 'class', 'ck ck-widget__resizer-shadow' );
+			domElement.appendChild( shadowElement );
+
 			for ( const currentPosition of resizerPositions ) {
 				// Use the IconView from the UI library.
 				const icon = new IconView();

+ 77 - 0
packages/ckeditor5-widget/src/widgetresizer.js

@@ -9,6 +9,34 @@
 
 import WidgetResizeFeature from './widgetresizefeature';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import MouseObserver from './view/mouseobserver';
+import MouseMoveObserver from './view/mousemoveobserver';
+
+import getAncestors from '@ckeditor/ckeditor5-utils/src/dom/getancestors';
+
+class ResizeContext {
+	constructor( handler ) {
+		const resizeWrapper = getAncestors( handler ).filter(
+			element => element.classList.contains( 'ck-widget_with-resizer' )
+		)[ 0 ];
+
+		this.widgetWrapper = resizeWrapper;
+		this.shadowWrapper = resizeWrapper.querySelector( '.ck-widget__resizer-shadow' );
+	}
+
+	initialize() {
+		this.shadowWrapper.classList.add( 'ck-widget__resizer-shadow-active' );
+	}
+
+	destroy() {
+		this.shadowWrapper.classList.remove( 'ck-widget__resizer-shadow-active' );
+
+		this.shadowWrapper = null;
+		this.wrapper = null;
+	}
+
+	updateSize() {}
+}
 
 /**
  * The base class for widget features. This type provides a common API for reusable features of widgets.
@@ -21,6 +49,55 @@ export default class WidgetResizer extends Plugin {
 		return 'WidgetResizer';
 	}
 
+	init() {
+		const view = this.editor.editing.view;
+		const viewDocument = view.document;
+
+		this._observers = {
+			mouseMove: view.addObserver( MouseMoveObserver ),
+			mouseDownUp: view.addObserver( MouseObserver )
+		};
+
+		// It should start disabled, only upon clicking drag handler it interests us.
+		// Currently broken due to https://github.com/ckeditor/ckeditor5-engine/blob/ce6422b/src/view/view.js#L364
+		this._observers.mouseMove.disable();
+
+		let isActive = false;
+		let resizeContext = null;
+
+		// Mouse move observer is only needed when the mouse button is pressed.
+		// this.listenTo( viewDocument, 'mousemove', () => console.log( 'move' ) );
+
+		this.listenTo( viewDocument, 'mousedown', ( event, domEventData ) => {
+			const target = domEventData.domTarget;
+
+			const resizeHandler = isResizeWrapper( target ) || getAncestors( target ).filter( isResizeWrapper )[ 0 ];
+
+			if ( resizeHandler ) {
+				isActive = true;
+				this._observers.mouseMove.enable();
+
+				resizeContext = new ResizeContext( resizeHandler );
+				resizeContext.initialize();
+			}
+		} );
+
+		this.listenTo( viewDocument, 'mouseup', () => {
+			// @todo listen also for mouse up outside of the editable.
+			if ( isActive ) {
+				isActive = false;
+				this._observers.mouseMove.disable();
+
+				resizeContext.destroy();
+				resizeContext = null;
+			}
+		} );
+
+		function isResizeWrapper( element ) {
+			return element.classList && element.classList.contains( 'ck-widget__resizer' );
+		}
+	}
+
 	apply( widgetElement, writer ) {
 		// @todo inline the logic
 		const ret = new WidgetResizeFeature();

+ 23 - 0
packages/ckeditor5-widget/theme/widget.css

@@ -15,6 +15,23 @@
 		right: 0;
 		top: 0;
 		bottom: 0;
+
+		& .ck-widget__resizer-shadow {
+			display: none;
+			position: absolute;
+
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+
+			outline: 2px dashed red;
+
+			&.ck-widget__resizer-shadow-active {
+				display: block;
+				visibility: visible;
+			}
+		}
 	}
 
 	& .ck-widget__resizer {
@@ -85,3 +102,9 @@
 		}
 	}
 }
+
+.ck .ck-widget_resizer-shadow {
+	width: 60px;
+	height: 60px;
+	outline: 2px solid red !important;
+}