Sfoglia il codice sorgente

Extract MouseSelectionHandler class.

Maciej Gołaszewski 6 anni fa
parent
commit
51c086467d

+ 5 - 4
packages/ckeditor5-table/src/commands/utils.js

@@ -10,14 +10,15 @@
 import { isObject } from 'lodash-es';
 
 /**
- * Returns the parent element of given name. Returns undefined if position is not inside desired parent.
+ * Returns the parent element of given name. Returns undefined if positionOrElement is not inside desired parent.
  *
  * @param {String} parentName Name of parent element to find.
- * @param {module:engine/model/position~Position|module:engine/model/position~Position} position Position to start searching.
+ * @param {module:engine/model/position~Position|module:engine/model/element~Position} positionOrElement
+ * Position or parentElement to start searching.
  * @returns {module:engine/model/element~Element|module:engine/model/documentfragment~DocumentFragment}
  */
-export function findAncestor( parentName, position ) {
-	let parent = position.parent;
+export function findAncestor( parentName, positionOrElement ) {
+	let parent = positionOrElement.parent;
 
 	while ( parent ) {
 		if ( parent.name === parentName ) {

+ 76 - 52
packages/ckeditor5-table/src/tableselection.js

@@ -12,6 +12,8 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import MouseEventsObserver from './tableselection/mouseeventsobserver';
 import TableWalker from './tablewalker';
 import { findAncestor } from './commands/utils';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 
 /**
  * The table selection plugin.
@@ -46,56 +48,9 @@ export default class TableSelection extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
-		this.tableUtils = editor.plugins.get( 'TableUtils' );
-
-		const viewDocument = editor.editing.view.document;
-
-		editor.editing.view.addObserver( MouseEventsObserver );
-
-		this.listenTo( viewDocument, 'mousedown', ( eventInfo, domEventData ) => {
-			const tableCell = getModelTableCellFromViewEvent( domEventData, this.editor );
-
-			if ( !tableCell ) {
-				this.stopSelection();
-				this.clearSelection();
-
-				return;
-			}
-
-			this.startSelectingFrom( tableCell );
-		} );
-
-		this.listenTo( viewDocument, 'mousemove', ( eventInfo, domEventData ) => {
-			if ( !this._isSelecting ) {
-				return;
-			}
-
-			const tableCell = getModelTableCellFromViewEvent( domEventData, this.editor );
-
-			if ( !tableCell ) {
-				return;
-			}
 
-			this.setSelectingTo( tableCell );
-		} );
-
-		this.listenTo( viewDocument, 'mouseup', ( eventInfo, domEventData ) => {
-			if ( !this._isSelecting ) {
-				return;
-			}
-
-			const tableCell = getModelTableCellFromViewEvent( domEventData, this.editor );
-
-			this.stopSelection( tableCell );
-		} );
-
-		this.listenTo( viewDocument, 'mouseleave', () => {
-			if ( !this._isSelecting ) {
-				return;
-			}
-
-			this.stopSelection();
-		} );
+		this.tableUtils = editor.plugins.get( 'TableUtils' );
+		this._mouseHandler = new MouseSelectionHandler( this, editor.editing );
 
 		editor.conversion.for( 'editingDowncast' ).add( dispatcher => dispatcher.on( 'selection', ( evt, data, conversionApi ) => {
 			const viewWriter = conversionApi.writer;
@@ -121,6 +76,14 @@ export default class TableSelection extends Plugin {
 		}, { priority: 'lowest' } ) );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	destroy() {
+		super.destroy();
+		this._mouseHandler.stopListening();
+	}
+
 	/**
 	 * Starts a selection process.
 	 *
@@ -272,13 +235,74 @@ export default class TableSelection extends Plugin {
 }
 
 // Finds model table cell for given DOM event - ie. for 'mousedown'.
-function getModelTableCellFromViewEvent( domEventData, editor ) {
+function getModelTableCellFromViewEvent( domEventData, mapper ) {
 	const viewTargetElement = domEventData.target;
-	const modelElement = editor.editing.mapper.toModelElement( viewTargetElement );
+	const modelElement = mapper.toModelElement( viewTargetElement );
 
 	if ( !modelElement ) {
 		return;
 	}
 
-	return findAncestor( 'tableCell', editor.model.createPositionAt( modelElement, 0 ) );
+	if ( modelElement.is( 'tableCell' ) ) {
+		return modelElement;
+	}
+
+	return findAncestor( 'tableCell', modelElement );
+}
+
+class MouseSelectionHandler {
+	constructor( tableSelection, editing ) {
+		const view = editing.view;
+		const viewDocument = view.document;
+		const mapper = editing.mapper;
+
+		view.addObserver( MouseEventsObserver );
+
+		this.listenTo( viewDocument, 'mousedown', ( eventInfo, domEventData ) => {
+			const tableCell = getModelTableCellFromViewEvent( domEventData, mapper );
+
+			if ( !tableCell ) {
+				tableSelection.stopSelection();
+				tableSelection.clearSelection();
+
+				return;
+			}
+
+			tableSelection.startSelectingFrom( tableCell );
+		} );
+
+		this.listenTo( viewDocument, 'mousemove', ( eventInfo, domEventData ) => {
+			if ( !tableSelection._isSelecting ) {
+				return;
+			}
+
+			const tableCell = getModelTableCellFromViewEvent( domEventData, mapper );
+
+			if ( !tableCell ) {
+				return;
+			}
+
+			tableSelection.setSelectingTo( tableCell );
+		} );
+
+		this.listenTo( viewDocument, 'mouseup', ( eventInfo, domEventData ) => {
+			if ( !tableSelection._isSelecting ) {
+				return;
+			}
+
+			const tableCell = getModelTableCellFromViewEvent( domEventData, mapper );
+
+			tableSelection.stopSelection( tableCell );
+		} );
+
+		this.listenTo( viewDocument, 'mouseleave', () => {
+			if ( !tableSelection._isSelecting ) {
+				return;
+			}
+
+			tableSelection.stopSelection();
+		} );
+	}
 }
+
+mix( MouseSelectionHandler, ObservableMixin );