|
|
@@ -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' );
|