refactor(json-crdt-extensions): 💡 improve range collapsing logic

Author: streamich

src/json-crdt-extensions/peritext/Peritext.ts

@@ -41,7 +41,7 @@ export class Peritext implements Printable {
    * @param anchor Whether the point should be before or after the character.
    * @returns The point.
    */
-  public point(id: ITimestampStruct, anchor: Anchor = Anchor.After): Point {
+  public point(id: ITimestampStruct = this.str.id, anchor: Anchor = Anchor.After): Point {
     return new Point(this, id, anchor);
   }
 
@@ -68,7 +68,7 @@ export class Peritext implements Printable {
    *
    * @returns A point at the start of the text.
    */
-  public pointAtStart(): Point {
+  public pointAbsStart(): Point {
     return this.point(this.str.id, Anchor.After);
   }
 
@@ -78,7 +78,7 @@ export class Peritext implements Printable {
    *
    * @returns A point at the end of the text.
    */
-  public pointAtEnd(): Point {
+  public pointAbsEnd(): Point {
     return this.point(this.str.id, Anchor.Before);
   }
 
@@ -118,7 +118,7 @@ export class Peritext implements Printable {
     if (!length) {
       const startId = !start ? str.id : str.find(start - 1) || str.id;
       const point = this.point(startId, Anchor.After);
-      return this.range(point, point);
+      return this.range(point, point.clone());
     }
     const startId = str.find(start) || str.id;
     const endId = str.find(start + length - 1) || startId;

src/json-crdt-extensions/peritext/point/__tests__/Point.spec.ts

@@ -1019,7 +1019,6 @@ describe('.refAfter()', () => {
   });
 });
 
-
 describe('.refVisible()', () => {
   test('skips deleted chars, attaches to visible char', () => {
     const {peritext} = setupWithChunkedText();

src/json-crdt-extensions/peritext/slice/Range.ts

@@ -7,8 +7,8 @@ import type {Printable} from '../../../util/print/types';
 
 /**
  * A range is a pair of points that represent a selection in the text. A range
- * can be collapsed to a single point, at which point it is called a *marker*,
- * if it is stored in the text, or *caret*, if it is a cursor position. 
+ * can be collapsed to a single point, then it is called a *marker*
+ * (if it is stored in the text), or *caret* (if it is a cursor position).
  */
 export class Range implements Printable {
   /**
@@ -52,24 +52,13 @@ export class Range implements Printable {
    * @returns True if the range is collapsed to a single point.
    */
   public isCollapsed(): boolean {
-    const start = this.start;
-    const end = this.end;
-    if (start === end) return true;
-    const pos1 = start.pos();
-    const pos2 = end.pos();
-    if (pos1 === pos2) {
-      if (start.anchor === end.anchor) return true;
-      if (start.anchor === Anchor.After) return true;
-      else {
-        const chunk = start.chunk();
-        if (chunk && chunk.del) {
-          // TODO: Revisit where is the best place for this normalization.
-          // this.start = this.end.clone();
-          return true;
-        }
-      }
-    }
-    return false;
+    const {start, end} = this;
+    if (start.compareSpatial(end) === 0) return true;
+    const start2 = start.clone();
+    const end2 = end.clone();
+    start2.refAfter();
+    end2.refAfter();
+    return start2.compare(end2) === 0;
   }
 
   /**
@@ -92,7 +81,12 @@ export class Range implements Printable {
     this.start = this.end.clone();
   }
 
-  public viewRange(): [at: number, len: number] {
+  /**
+   * Returns the range in the view coordinates as a position and length.
+   *
+   * @returns The range as a view position and length.
+   */
+  public views(): [at: number, len: number] {
     const start = this.start.viewPos();
     const end = this.end.viewPos();
     return [start, end - start];
@@ -108,6 +102,7 @@ export class Range implements Printable {
   }
 
   public setAt(start: number, length: number = 0): void {
+    // TODO: move implementation to here
     const range = this.txt.rangeAt(start, length);
     this.setRange(range);
   }

src/json-crdt-extensions/peritext/slice/__tests__/Range.spec.ts

@@ -1,7 +1,6 @@
 import {Model} from '../../../../json-crdt/model';
 import {Peritext} from '../../Peritext';
 import {Anchor} from '../../constants';
-import {Editor} from '../../editor/Editor';
 
 const setup = (insert: (peritext: Peritext) => void = (peritext) => peritext.strApi().ins(0, 'Hello world!')) => {
   const model = Model.withLogicalClock();
@@ -74,15 +73,15 @@ describe('.isCollapsed()', () => {
   describe('when range is collapsed', () => {
     test('returns true at the beginning of string', () => {
       const {peritext} = setup();
-      const point = peritext.pointAtStart();
+      const point = peritext.pointAbsStart();
       const range = peritext.range(point, point);
       const isCollapsed = range.isCollapsed();
       expect(isCollapsed).toBe(true);
     });
 
     test('returns true at the end of string', () => {
       const {peritext} = setup();
-      const point = peritext.pointAtEnd();
+      const point = peritext.pointAbsEnd();
       const range = peritext.range(point, point);
       const isCollapsed = range.isCollapsed();
       expect(isCollapsed).toBe(true);
@@ -117,7 +116,7 @@ describe('.isCollapsed()', () => {
     describe('when first character is deleted', () => {
       test('returns true at the beginning of string', () => {
         const {peritext} = setupEvenDeleted();
-        const point = peritext.pointAtStart();
+        const point = peritext.pointAbsStart();
         const range = peritext.range(point, point);
         const isCollapsed = range.isCollapsed();
         expect(isCollapsed).toBe(true);
@@ -130,7 +129,9 @@ describe('.isCollapsed()', () => {
         const isCollapsed = range.isCollapsed();
         expect(isCollapsed).toBe(true);
       });
+    });
 
+    describe('when characters are deleted', () => {
       test('returns true when in the middle of deleted characters', () => {
         const {peritext} = setupEvenDeleted();
         const range = peritext.rangeAt(2, 1);
@@ -146,10 +147,48 @@ describe('.isCollapsed()', () => {
         peritext.strApi().del(0, 5);
         expect(range.isCollapsed()).toBe(true);
       });
+
+      test('when all text is selected', () => {
+        const {peritext} = setupEvenDeleted();
+        const range = peritext.range(peritext.pointAbsStart(), peritext.pointAbsEnd());
+        expect(range.isCollapsed()).toBe(false);
+        peritext.strApi().del(0, 5);
+        expect(range.isCollapsed()).toBe(true);
+      });
     });
   });
 });
 
+describe('.collapseToStart()', () => {
+  test('collapses range to start', () => {
+    const {peritext} = setup();
+    const range = peritext.rangeAt(2, 3);
+    range.collapseToStart();
+    expect(range.isCollapsed()).toBe(true);
+    expect(range.start.rightChar()?.view()).toBe('l');
+    expect(range.end.rightChar()?.view()).toBe('l');
+  });
+});
+
+describe('.collapseToEnd()', () => {
+  test('collapses range to end', () => {
+    const {peritext} = setup();
+    const range = peritext.rangeAt(2, 3);
+    range.collapseToEnd();
+    expect(range.isCollapsed()).toBe(true);
+    expect(range.start.leftChar()?.view()).toBe('o');
+    expect(range.end.leftChar()?.view()).toBe('o');
+  });
+});
+
+describe('.view()', () => {
+  test('returns correct view', () => {
+    const {peritext} = setup();
+    const range = peritext.rangeAt(2, 3);
+    expect(range.views()).toEqual([2, 3]);
+  });
+});
+
 describe('.contains()', () => {
   test('returns true if slice is contained', () => {
     const {peritext} = setup();