浏览代码

WiP: Refactor TableSelection to an Observer.

Maciej Gołaszewski 7 年之前
父节点
当前提交
7e22a3b9c4

+ 4 - 0
packages/ckeditor5-table/src/tableediting.js

@@ -37,6 +37,7 @@ import injectTablePostFixer from './converters/table-post-fixer';
 import injectTableCellPostFixer from './converters/tablecell-post-fixer';
 
 import '../theme/tableediting.css';
+import TableSelection from './tableselection';
 
 /**
  * The table editing feature.
@@ -143,6 +144,9 @@ export default class TableEditing extends Plugin {
 		this.editor.keystrokes.set( 'Tab', ( ...args ) => this._handleTabOnSelectedTable( ...args ), { priority: 'low' } );
 		this.editor.keystrokes.set( 'Tab', this._getTabHandler( true ), { priority: 'low' } );
 		this.editor.keystrokes.set( 'Shift+Tab', this._getTabHandler( false ), { priority: 'low' } );
+
+		this.tableSelection = new TableSelection();
+		this.tableSelection.attach( editor, this.editor.plugins.get( TableUtils ) );
 	}
 
 	/**

+ 26 - 42
packages/ckeditor5-table/src/tableselection.js

@@ -4,48 +4,34 @@
  */
 
 /**
- * @module table/tableediting
+ * @module table/tableselection
  */
 
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Position from '@ckeditor/ckeditor5-engine/src/model/position';
 
 import TableWalker from './tablewalker';
-import TableUtils from './tableutils';
 import { findAncestor } from './commands/utils';
 import Range from '@ckeditor/ckeditor5-engine/src/model/range';
+import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import ObservableMixin from '../../ckeditor5-utils/src/observablemixin';
 
-export default class TableSelection extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
-	static get pluginName() {
-		return 'TableSelection';
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	static get requires() {
-		return [ TableUtils ];
-	}
-
-	constructor( editor ) {
-		super( editor );
-
+// TODO: refactor to an Observer
+export default class TableSelection {
+	constructor() {
 		this._isSelecting = false;
 		this._highlighted = new Set();
+	}
 
+	// OWN mouse events?
+	attach( editor, tableUtils ) {
+		// table selection observer...?
+		this.tableUtils = tableUtils;
 		this.editor = editor;
-		this.tableUtils = editor.plugins.get( TableUtils );
-	}
 
-	init() {
-		const editor = this.editor;
 		const viewDocument = editor.editing.view.document;
 
 		this.listenTo( viewDocument, 'keydown', () => {
-			if ( this.size > 1 ) {
+			if ( this.isSelectingBlaBla() ) {
 				this.stopSelection();
 				const tableCell = this._startElement;
 				this.clearSelection();
@@ -67,11 +53,11 @@ export default class TableSelection extends Plugin {
 				return;
 			}
 
-			this.startSelection( tableCell );
+			this._startSelection( tableCell );
 		} );
 
 		this.listenTo( viewDocument, 'mousemove', ( eventInfo, domEventData ) => {
-			if ( !this.isSelecting ) {
+			if ( !this._isSelecting ) {
 				return;
 			}
 
@@ -81,9 +67,9 @@ export default class TableSelection extends Plugin {
 				return;
 			}
 
-			this.updateSelection( tableCell );
+			this._updateModelSelection( tableCell );
 
-			if ( this.size > 1 ) {
+			if ( this.isSelectingBlaBla() ) {
 				domEventData.preventDefault();
 
 				this.redrawSelection();
@@ -91,7 +77,7 @@ export default class TableSelection extends Plugin {
 		} );
 
 		this.listenTo( viewDocument, 'mouseup', ( eventInfo, domEventData ) => {
-			if ( !this.isSelecting ) {
+			if ( !this._isSelecting ) {
 				return;
 			}
 
@@ -101,7 +87,7 @@ export default class TableSelection extends Plugin {
 		} );
 
 		this.listenTo( viewDocument, 'mouseleave', () => {
-			if ( !this.isSelecting ) {
+			if ( !this._isSelecting ) {
 				return;
 			}
 
@@ -109,24 +95,20 @@ export default class TableSelection extends Plugin {
 		} );
 	}
 
-	get isSelecting() {
-		return this._isSelecting;
+	isSelectingBlaBla() {
+		return this._isSelecting && this._startElement && this._endElement && this._startElement != this._endElement;
 	}
 
-	get size() {
-		return [ ...this.getSelection() ].length;
-	}
-
-	startSelection( tableCell ) {
+	_startSelection( tableCell ) {
 		this.clearSelection();
 		this._isSelecting = true;
 		this._startElement = tableCell;
 		this._endElement = tableCell;
 	}
 
-	updateSelection( tableCell ) {
+	_updateModelSelection( tableCell ) {
 		// Do not update if not in selection mode or no table cell passed.
-		if ( !this.isSelecting || !tableCell ) {
+		if ( !this._isSelecting || !tableCell ) {
 			return;
 		}
 
@@ -149,7 +131,7 @@ export default class TableSelection extends Plugin {
 	}
 
 	stopSelection( tableCell ) {
-		if ( this.isSelecting && tableCell && tableCell.parent.parent === this._startElement.parent.parent ) {
+		if ( this._isSelecting && tableCell && tableCell.parent.parent === this._startElement.parent.parent ) {
 			this._endElement = tableCell;
 		}
 
@@ -248,3 +230,5 @@ function getTableCell( domEventData, editor ) {
 
 	return findAncestor( 'tableCell', Position.createAt( modelElement ) );
 }
+
+mix( TableSelection, ObservableMixin );

+ 1 - 2
packages/ckeditor5-table/tests/commands/mergecellscommand.js

@@ -9,7 +9,6 @@ import { getData, setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model
 import MergeCellsCommand from '../../src/commands/mergecellscommand';
 import { defaultConversion, defaultSchema, formatTable, formattedModelTable, modelTable } from '../_utils/utils';
 import TableUtils from '../../src/tableutils';
-import TableSelection from '../../src/tableselection';
 import Range from '@ckeditor/ckeditor5-engine/src/model/range';
 
 describe( 'MergeCellsCommand', () => {
@@ -18,7 +17,7 @@ describe( 'MergeCellsCommand', () => {
 	beforeEach( () => {
 		return ModelTestEditor
 			.create( {
-				plugins: [ TableUtils, TableSelection ]
+				plugins: [ TableUtils ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;

+ 1 - 2
packages/ckeditor5-table/tests/converters/table-post-fixer.js

@@ -11,7 +11,6 @@ import { getData as getModelData, parse, setData as setModelData } from '@ckedit
 import TableEditing from '../../src/tableediting';
 import { formatTable, formattedModelTable, modelTable } from './../_utils/utils';
 import UndoEditing from '@ckeditor/ckeditor5-undo/src/undoediting';
-import TableSelection from '../../src/tableselection';
 
 describe( 'Table post-fixer', () => {
 	let editor, model, root;
@@ -19,7 +18,7 @@ describe( 'Table post-fixer', () => {
 	beforeEach( () => {
 		return VirtualTestEditor
 			.create( {
-				plugins: [ TableEditing, TableSelection, Paragraph, UndoEditing ]
+				plugins: [ TableEditing, Paragraph, UndoEditing ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;

+ 1 - 2
packages/ckeditor5-table/tests/integration.js

@@ -11,7 +11,6 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import Table from '../src/table';
 import TableToolbar from '../src/tabletoolbar';
 import View from '@ckeditor/ckeditor5-ui/src/view';
-import TableSelection from '../src/tableselection';
 
 describe( 'TableToolbar integration', () => {
 	describe( 'with the BalloonToolbar', () => {
@@ -23,7 +22,7 @@ describe( 'TableToolbar integration', () => {
 
 			return ClassicTestEditor
 				.create( editorElement, {
-					plugins: [ Table, TableSelection, TableToolbar, BalloonToolbar, Paragraph ]
+					plugins: [ Table, TableToolbar, BalloonToolbar, Paragraph ]
 				} )
 				.then( editor => {
 					newEditor = editor;

+ 1 - 2
packages/ckeditor5-table/tests/manual/table.js

@@ -9,11 +9,10 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import Table from '../../src/table';
 import TableToolbar from '../../src/tabletoolbar';
-import TableSelection from '../../src/tableselection';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableSelection, TableToolbar ],
+		plugins: [ ArticlePluginSet, Table, TableToolbar ],
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],

+ 1 - 2
packages/ckeditor5-table/tests/manual/tableblockcontent.js

@@ -10,11 +10,10 @@ import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articleplugi
 import Table from '../../src/table';
 import TableToolbar from '../../src/tabletoolbar';
 import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
-import TableSelection from '../../src/tableselection';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableToolbar, TableSelection, Alignment ],
+		plugins: [ ArticlePluginSet, Table, TableToolbar, Alignment ],
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote',
 			'alignment', '|', 'undo', 'redo'

+ 1 - 2
packages/ckeditor5-table/tests/manual/tableselection.js

@@ -9,12 +9,11 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
 import Table from '../../src/table';
 import TableToolbar from '../../src/tabletoolbar';
-import TableSelection from '../../src/tableselection';
 import { getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ ArticlePluginSet, Table, TableSelection, TableToolbar ],
+		plugins: [ ArticlePluginSet, Table, TableToolbar ],
 		toolbar: [
 			'heading', '|', 'insertTable', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'undo', 'redo'
 		],

+ 2 - 3
packages/ckeditor5-table/tests/table-integration.js

@@ -19,7 +19,6 @@ import { parse as parseView } from '@ckeditor/ckeditor5-engine/src/dev-utils/vie
 
 import TableEditing from '../src/tableediting';
 import { formatTable, formattedModelTable, modelTable, viewTable } from './_utils/utils';
-import TableSelection from '../src/tableselection';
 
 describe( 'Table feature – integration', () => {
 	describe( 'with clipboard', () => {
@@ -27,7 +26,7 @@ describe( 'Table feature – integration', () => {
 
 		beforeEach( () => {
 			return VirtualTestEditor
-				.create( { plugins: [ Paragraph, TableEditing, TableSelection, ListEditing, BlockQuoteEditing, Widget, Clipboard ] } )
+				.create( { plugins: [ Paragraph, TableEditing, ListEditing, BlockQuoteEditing, Widget, Clipboard ] } )
 				.then( newEditor => {
 					editor = newEditor;
 					clipboard = editor.plugins.get( 'Clipboard' );
@@ -86,7 +85,7 @@ describe( 'Table feature – integration', () => {
 
 		beforeEach( () => {
 			return VirtualTestEditor
-				.create( { plugins: [ Paragraph, TableEditing, TableSelection, Widget, UndoEditing ] } )
+				.create( { plugins: [ Paragraph, TableEditing, Widget, UndoEditing ] } )
 				.then( newEditor => {
 					editor = newEditor;
 					doc = editor.model.document;

+ 3 - 4
packages/ckeditor5-table/tests/tableediting.js

@@ -21,7 +21,6 @@ import SplitCellCommand from '../src/commands/splitcellcommand';
 import MergeCellsCommand from '../src/commands/mergecellscommand';
 import SetHeaderRowCommand from '../src/commands/setheaderrowcommand';
 import SetHeaderColumnCommand from '../src/commands/setheadercolumncommand';
-import TableSelection from '../src/tableselection';
 import Range from '@ckeditor/ckeditor5-engine/src/model/range';
 
 describe( 'TableEditing', () => {
@@ -30,7 +29,7 @@ describe( 'TableEditing', () => {
 	beforeEach( () => {
 		return VirtualTestEditor
 			.create( {
-				plugins: [ TableEditing, TableSelection, Paragraph, ImageEditing ]
+				plugins: [ TableEditing, Paragraph, ImageEditing ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -453,7 +452,7 @@ describe( 'TableEditing', () => {
 
 			return VirtualTestEditor
 				.create( {
-					plugins: [ TableEditing, TableSelection, Paragraph ]
+					plugins: [ TableEditing, Paragraph ]
 				} )
 				.then( newEditor => {
 					editor = newEditor;
@@ -515,7 +514,7 @@ describe( 'TableEditing', () => {
 		} );
 	} );
 
-	describe.only( 'table selection', () => {
+	describe( 'table selection', () => {
 		let view, domEvtDataStub;
 
 		beforeEach( () => {

+ 1 - 2
packages/ckeditor5-table/tests/tabletoolbar.js

@@ -15,7 +15,6 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Range from '@ckeditor/ckeditor5-engine/src/model/range';
 import View from '@ckeditor/ckeditor5-ui/src/view';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
-import TableSelection from '../src/tableselection';
 
 describe( 'TableToolbar', () => {
 	let editor, model, doc, plugin, toolbar, balloon, editorElement;
@@ -26,7 +25,7 @@ describe( 'TableToolbar', () => {
 
 		return ClassicEditor
 			.create( editorElement, {
-				plugins: [ Paragraph, Table, TableSelection, TableToolbar, FakeButton ],
+				plugins: [ Paragraph, Table, TableToolbar, FakeButton ],
 				table: {
 					toolbar: [ 'fake_button' ]
 				}

+ 1 - 2
packages/ckeditor5-table/tests/tableui.js

@@ -14,7 +14,6 @@ import TableUI from '../src/tableui';
 import SwitchButtonView from '@ckeditor/ckeditor5-ui/src/button/switchbuttonview';
 import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import ListSeparatorView from '@ckeditor/ckeditor5-ui/src/list/listseparatorview';
-import TableSelection from '../src/tableselection';
 
 describe( 'TableUI', () => {
 	let editor, element;
@@ -36,7 +35,7 @@ describe( 'TableUI', () => {
 
 		return ClassicTestEditor
 			.create( element, {
-				plugins: [ TableEditing, TableSelection, TableUI ]
+				plugins: [ TableEditing, TableUI ]
 			} )
 			.then( newEditor => {
 				editor = newEditor;