Selaa lähdekoodia

Internal: Listening for events outside of the editable.

The code is currently not polished, I couldn't hook up properly to DOMDocument using Observers, so I used Emitters and managed listening manually.
Marek Lewandowski 6 vuotta sitten
vanhempi
sitoutus
e3ce2bbb68

+ 2 - 2
packages/ckeditor5-widget/src/resizecontext.js

@@ -263,8 +263,8 @@ export default class ResizeContext {
 
 	_extractCoordinates( event ) {
 		return {
-			x: event.domEvent.pageX,
-			y: event.domEvent.pageY
+			x: event.pageX,
+			y: event.pageY
 		};
 	}
 

+ 14 - 19
packages/ckeditor5-widget/src/widgetresizer.js

@@ -8,11 +8,11 @@
  */
 
 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';
 import ResizeContext2 from './resizecontext';
 import ResizerTopBound from './resizertopbound';
+import DomEmitterMixin from '@ckeditor/ckeditor5-utils/src/dom/emittermixin';
+import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 const WIDTH_ATTRIBUTE_NAME = 'width';
 
@@ -54,36 +54,30 @@ export default class WidgetResizer extends Plugin {
 		this._registerSchema();
 		this._registerConverters();
 
-		const view = this.editor.editing.view;
-		const viewDocument = view.document;
+		const mouseObserverHost = global.window.document;
 
 		this._observers = {
-			mouseMove: view.addObserver( MouseMoveObserver ),
-			mouseDownUp: view.addObserver( MouseObserver )
+			mouseMove: Object.create( DomEmitterMixin ),
+			mouseDownUp: Object.create( DomEmitterMixin ),
 		};
 
-		// 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;
 
-		// Mouse move observer is only needed when the mouse button is pressed.
-		// this.listenTo( viewDocument, 'mousemove', () => console.log( 'move' ) );
-		this.listenTo( viewDocument, 'mousemove', ( event, domEventData ) => {
+		const mouseMoveListener = ( event, domEventData ) => {
 			if ( this.activeContext ) {
 				this.activeContext.updateSize( domEventData );
 			}
-		} );
+		};
 
-		this.listenTo( viewDocument, 'mousedown', ( event, domEventData ) => {
-			const target = domEventData.domTarget;
+		this._observers.mouseDownUp.listenTo( mouseObserverHost, 'mousedown', ( event, domEventData ) => {
+			const target = domEventData.target;
 
 			const resizeHandler = isResizeHandler( target ) ? target : getAncestors( target ).filter( isResizeHandler )[ 0 ];
 
 			if ( resizeHandler ) {
 				isActive = true;
-				this._observers.mouseMove.enable();
+				// this._observers.mouseMove.enable();
+				this._observers.mouseMove.listenTo( mouseObserverHost, 'mousemove', mouseMoveListener );
 
 				this.activeContext = this._getContextByHandler( resizeHandler );
 
@@ -96,7 +90,8 @@ export default class WidgetResizer extends Plugin {
 		const finishResizing = () => {
 			if ( isActive ) {
 				isActive = false;
-				this._observers.mouseMove.disable();
+				// this._observers.mouseMove.disable();
+				this._observers.mouseMove.stopListening( mouseObserverHost, 'mousemove', mouseMoveListener );
 
 				if ( this.activeContext ) {
 					this.activeContext.commit( this.editor );
@@ -107,7 +102,7 @@ export default class WidgetResizer extends Plugin {
 		};
 
 		// @todo: it should listen on the entire window, as it should also catch events outside of the editable.
-		this.listenTo( viewDocument, 'mouseup', finishResizing );
+		this._observers.mouseDownUp.listenTo( mouseObserverHost, 'mouseup', finishResizing );
 
 		function isResizeHandler( element ) {
 			return element.classList && element.classList.contains( 'ck-widget__resizer' );