T/629b Alternative fix infinite selection loop.

src/conversion/view-selection-to-model-converters.js

@@ -10,6 +10,8 @@
  * @namespace engine.conversion.viewSelectionToModel
  */
 
+import ModelSelection from '../model/selection.js';
+
 /**
  * Function factory, creates a callback function which converts a {@link engine.view.Selection view selection} taken
  * from the {@link engine.view.Document#selectionChange} event and sets in on the {@link engine.model.Document#selection model}.
@@ -26,15 +28,21 @@
  */
 export function convertSelectionChange( modelDocument, mapper ) {
 	return ( evt, data ) => {
-		modelDocument.enqueueChanges( () => {
-			const viewSelection = data.newSelection;
-			const ranges = [];
+		const viewSelection = data.newSelection;
+		const modelSelection = new ModelSelection();
+
+		const ranges = [];
+
+		for ( let viewRange of viewSelection.getRanges() ) {
+			ranges.push( mapper.toModelRange( viewRange ) );
+		}
 
-			for ( let viewRange of viewSelection.getRanges() ) {
-				ranges.push( mapper.toModelRange( viewRange ) );
-			}
+		modelSelection.setRanges( ranges, viewSelection.isBackward );
 
-			modelDocument.selection.setRanges( ranges, viewSelection.isBackward );
-		} );
+		if ( !modelSelection.isEqual( modelDocument.selection ) ) {
+			modelDocument.enqueueChanges( () => {
+				modelDocument.selection.setTo( modelSelection );
+			} );
+		}
 	};
 }

src/model/selection.js

@@ -125,25 +125,29 @@ export default class Selection {
 	}
 
 	/**
-	 * Checks whether, this selection is equal to given selection. Selections equal if they have the same ranges and directions.
+	 * Checks whether this selection is equal to given selection. Selections are equal if they have same directions,
+	 * same number of ranges and all ranges from one selection equal to a range from other selection.
 	 *
 	 * @param {engine.model.Selection} otherSelection Selection to compare with.
 	 * @returns {Boolean} `true` if selections are equal, `false` otherwise.
 	 */
 	isEqual( otherSelection ) {
-		const rangeCount = this.rangeCount;
-
-		if ( rangeCount != otherSelection.rangeCount ) {
+		if ( !this.anchor.isEqual( otherSelection.anchor ) || !this.focus.isEqual( otherSelection.focus ) ) {
 			return false;
 		}
 
-		for ( let i = 0; i < this.rangeCount; i++ ) {
-			if ( !this._ranges[ i ].isEqual( otherSelection._ranges[ i ] ) ) {
-				return false;
-			}
+		if ( this.rangeCount != otherSelection.rangeCount ) {
+			return false;
 		}
 
-		return this.isBackward === otherSelection.isBackward;
+		// Every range from this selection...
+		return Array.from( this.getRanges() ).every( ( rangeA ) => {
+			// ...Has a range in other selection...
+			return Array.from( otherSelection.getRanges() ).some( ( rangeB ) => {
+				// That it is equal to.
+				return rangeA.isEqual( rangeB );
+			} );
+		} );
 	}
 
 	/**

src/view/observer/selectionobserver.js

@@ -102,6 +102,9 @@ export default class SelectionObserver extends Observer {
 		}
 
 		domDocument.addEventListener( 'selectionchange', () => this._handleSelectionChange( domDocument ) );
+		domDocument.addEventListener( 'keydown', () => this._clearInfiniteLoop() );
+		domDocument.addEventListener( 'mousemove', () => this._clearInfiniteLoop() );
+		domDocument.addEventListener( 'mousedown', () => this._clearInfiniteLoop() );
 
 		this._documents.add( domDocument );
 	}
@@ -151,10 +154,6 @@ export default class SelectionObserver extends Observer {
 			newSelection: newViewSelection,
 			domSelection: domSelection
 		} );
-
-		// If nothing changes on `selectionChange` event, at this point we have "dirty DOM" (changed) and de-synched
-		// view (which has not been changed). In order to "reset DOM" we render the view again.
-		this.document.render();
 	}
 
 	/**
@@ -185,6 +184,17 @@ export default class SelectionObserver extends Observer {
 
 		return false;
 	}
+
+	/**
+	 * Clears `SelectionObserver` internal properties connected with preventing infinite loop.
+	 *
+	 * @private
+	 */
+	_clearInfiniteLoop() {
+		this._lastSelection = null;
+		this._lastButOneSelection = null;
+		this._loopbackCounter = 0;
+	}
 }
 
 /**

src/view/selection.js

@@ -283,33 +283,39 @@ export default class Selection {
 	}
 
 	/**
-	 * Checks whether, this selection is equal to given selection. Selections equal if they have the same ranges and directions.
+	 * Checks whether, this selection is equal to given selection. Selections are equal if they have same directions,
+	 * same number of ranges and all ranges from one selection equal to a range from other selection.
 	 *
 	 * @param {engine.view.Selection} otherSelection Selection to compare with.
 	 * @returns {Boolean} `true` if selections are equal, `false` otherwise.
 	 */
 	isEqual( otherSelection ) {
-		const rangeCount = this.rangeCount;
-
-		if ( rangeCount != otherSelection.rangeCount ) {
+		if ( this.isFake != otherSelection.isFake ) {
 			return false;
 		}
 
-		if ( this.isFake != otherSelection.isFake ) {
+		if ( this.isFake && this.fakeSelectionLabel != otherSelection.fakeSelectionLabel ) {
 			return false;
 		}
 
-		if ( this.isFake && this.fakeSelectionLabel != otherSelection.fakeSelectionLabel ) {
+		if ( this.rangeCount != otherSelection.rangeCount ) {
 			return false;
+		} else if ( this.rangeCount === 0 ) {
+			return true;
 		}
 
-		for ( let i = 0; i < this.rangeCount; i++ ) {
-			if ( !this._ranges[ i ].isEqual( otherSelection._ranges[ i ] ) ) {
-				return false;
-			}
+		if ( !this.anchor.isEqual( otherSelection.anchor ) || !this.focus.isEqual( otherSelection.focus ) ) {
+			return false;
 		}
 
-		return this._lastRangeBackward === otherSelection._lastRangeBackward;
+		// Every range from this selection...
+		return Array.from( this.getRanges() ).every( ( rangeA ) => {
+			// ...Has a range in other selection...
+			return Array.from( otherSelection.getRanges() ).some( ( rangeB ) => {
+				// That it is equal to.
+				return rangeA.isEqual( rangeB );
+			} );
+		} );
 	}
 
 	/**

tests/conversion/view-selection-to-model-converters.js

@@ -106,4 +106,20 @@ describe( 'convertSelectionChange', () => {
 		expect( modelGetData( model ) ).to.equal( '<paragraph>f[o]o</paragraph><paragraph>b[a]r</paragraph>' );
 		expect( model.selection.isBackward ).to.true;
 	} );
+
+	it( 'should not enqueue changes if selection has not changed', () => {
+		const viewSelection = new ViewSelection();
+		viewSelection.addRange( ViewRange.createFromParentsAndOffsets(
+			viewRoot.getChild( 0 ).getChild( 0 ), 1, viewRoot.getChild( 0 ).getChild( 0 ), 1 ) );
+
+		convertSelection( null, { newSelection: viewSelection } );
+
+		const spy = sinon.spy();
+
+		model.on( 'changesDone', spy );
+
+		convertSelection( null, { newSelection: viewSelection } );
+
+		expect( spy.called ).to.be.false;
+	} );
 } );

tests/model/selection.js

@@ -671,7 +671,7 @@ describe( 'Selection', () => {
 			selection.addRange( range2 );
 
 			const otherSelection = new Selection();
-			otherSelection.addRange( range1 );
+			otherSelection.addRange( range2 );
 
 			expect( selection.isEqual( otherSelection ) ).to.be.false;
 		} );

tests/view/observer/selectionobserver.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals setTimeout, Range, document */
+/* globals setTimeout, Range, document, KeyboardEvent, MouseEvent */
 /* bender-tags: view, browser-only */
 
 import ViewRange from '/ckeditor5/engine/view/range.js';
@@ -162,71 +162,90 @@ describe( 'SelectionObserver', () => {
 	} );
 
 	it( 'should not be treated as an infinite loop if the position is different', ( done ) => {
-		let counter = 30;
-
 		const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
 		viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
 
+		let counter = 0;
+
+		const spy = testUtils.sinon.spy( log, 'warn' );
+
 		listenter.listenTo( viewDocument, 'selectionChange', () => {
-			counter--;
+			counter++;
 
-			if ( counter > 0 ) {
-				setTimeout( () => changeCollapsedDomSelection( counter ) );
-			} else {
-				done();
+			if ( counter < 15 ) {
+				setTimeout( changeCollapsedDomSelection, 100 );
 			}
 		} );
 
-		changeCollapsedDomSelection( counter );
-	} );
+		changeCollapsedDomSelection();
 
-	it( 'should not be treated as an infinite loop if it is less then 3 times', ( done ) => {
-		let counter = 3;
+		setTimeout( () => {
+			expect( spy.called ).to.be.false;
+			done();
+		}, 1500 );
+	} );
 
+	it( 'should not be treated as an infinite loop if selection is changed only few times', ( done ) => {
 		const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
 		viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
 
-		listenter.listenTo( viewDocument, 'selectionChange', () => {
-			counter--;
+		const spy = testUtils.sinon.spy( log, 'warn' );
 
-			if ( counter > 0 ) {
-				setTimeout( () => changeDomSelection() );
-			} else {
-				done();
-			}
-		} );
+		for ( let i = 0; i < 4; i++ ) {
+			changeDomSelection();
+		}
 
-		changeDomSelection();
+		setTimeout( () => {
+			expect( spy.called ).to.be.false;
+			done();
+		}, 1500 );
 	} );
 
-	it( 'should call render after selection change which reset selection if it was not changed', ( done ) => {
-		const viewBar = viewDocument.getRoot().getChild( 1 ).getChild( 0 );
-		viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewBar, 0, viewBar, 1 ) );
+	const events = {
+		keydown: KeyboardEvent,
+		mousedown: MouseEvent,
+		mousemove: MouseEvent
+	};
 
-		listenter.listenTo( viewDocument, 'selectionChange', () => {
-			setTimeout( () => {
-				const domSelection = document.getSelection();
+	for ( let event in events ) {
+		it( 'should not be treated as an infinite loop if change is triggered by ' + event + ' event', ( done ) => {
+			let counter = 0;
 
-				expect( domSelection.rangeCount ).to.equal( 1 );
+			const viewFoo = viewDocument.getRoot().getChild( 0 ).getChild( 0 );
+			viewDocument.selection.addRange( ViewRange.createFromParentsAndOffsets( viewFoo, 0, viewFoo, 0 ) );
 
-				const domRange = domSelection.getRangeAt( 0 );
-				const domBar = document.getElementById( 'main' ).childNodes[ 1 ].childNodes[ 0 ];
+			const spy = testUtils.sinon.spy( log, 'warn' );
 
-				expect( domRange.startContainer ).to.equal( domBar );
-				expect( domRange.startOffset ).to.equal( 0 );
-				expect( domRange.endContainer ).to.equal( domBar );
-				expect( domRange.endOffset ).to.equal( 1 );
+			listenter.listenTo( viewDocument, 'selectionChange', () => {
+				counter++;
 
-				done();
+				if ( counter < 15 ) {
+					setTimeout( () => {
+						document.dispatchEvent( new events[ event ]( event ) );
+						changeDomSelection();
+					}, 100 );
+				}
 			} );
-		} );
 
-		changeDomSelection();
-	} );
+			setTimeout( () => {
+				expect( spy.called ).to.be.false;
+				done();
+			}, 1000 );
+
+			document.dispatchEvent( new events[ event ]( event ) );
+			changeDomSelection();
+		} );
+	}
 } );
 
-function changeCollapsedDomSelection( pos = 1 ) {
+function changeCollapsedDomSelection() {
 	const domSelection = document.getSelection();
+	const pos = domSelection.anchorOffset + 1;
+
+	if ( pos > 20 ) {
+		return;
+	}
+
 	domSelection.removeAllRanges();
 	const domFoo = document.getElementById( 'main' ).childNodes[ 0 ].childNodes[ 0 ];
 	const domRange = new Range();