feat(json-crdt-extensions): 🎸 cleanup internal data structures after local changes

Author: streamich

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

@@ -5,6 +5,7 @@ import {Range} from './rga/Range';
 import {Editor} from './editor/Editor';
 import {ArrNode, StrNode} from '../../json-crdt/nodes';
 import {Slices} from './slice/Slices';
+import {LocalSlices} from './slice/LocalSlices';
 import {Overlay} from './overlay/Overlay';
 import {Chars} from './constants';
 import {interval} from '../../json-crdt-patch/clock';
@@ -63,7 +64,9 @@ export class Peritext implements Printable {
     const localModel = Model
       .withLogicalClock(SESSION.LOCAL)
       .setSchema(s.vec(s.arr([])));
-    this.localSlices = new Slices(localModel, localModel.root.node().get(0)!, this.str);
+    const localApi = localModel.api;
+    localApi.onLocalChange.listen(() => { localApi.flush(); });
+    this.localSlices = new LocalSlices(localModel, localModel.root.node().get(0)!, this.str);
 
     this.editor = new Editor(this, this.localSlices);
   }

src/json-crdt-extensions/peritext/__tests__/Peritext.localSlices.spec.ts

@@ -0,0 +1,46 @@
+import {Model} from '../../../json-crdt/model';
+import {Peritext} from '../Peritext';
+
+const setup = () => {
+  const model = Model.withLogicalClock();
+  model.api.root({
+    text: '',
+    slices: [],
+  });
+  model.api.str(['text']).ins(0, 'wworld');
+  model.api.str(['text']).ins(0, 'helo ');
+  model.api.str(['text']).ins(2, 'l');
+  model.api.str(['text']).del(7, 1);
+  const peritext = new Peritext(model, model.api.str(['text']).node, model.api.arr(['slices']).node);
+  return {model, peritext};
+};
+
+test('clears change history', () => {
+  const {peritext} = setup();
+  const {editor} = peritext;
+  editor.cursor.setAt(0);
+  editor.cursor.setAt(1);
+  editor.cursor.setAt(2);
+  editor.cursor.setAt(3);
+  expect(peritext.localSlices.model.api.flush().ops.length).toBe(0);
+});
+
+test('clears slice set tombstones', () => {
+  const _random = Math.random;
+  // It is probabilistic, if we set `Math.random` to 0 it will always remove tombstones.
+  Math.random = () => 0;
+  const {peritext} = setup();
+  const slicesRga = peritext.localSlices.model.root.node()!.get(0)!;
+  const count = slicesRga.size();
+  const slice1 = peritext.localSlices.insOverwrite(peritext.rangeAt(1, 2), 1);
+  const slice2 = peritext.localSlices.insOverwrite(peritext.rangeAt(1, 2), 3);
+  const slice3 = peritext.localSlices.insOverwrite(peritext.rangeAt(1, 2), 2);
+  expect(slicesRga.size()).toBe(count + 3);
+  peritext.localSlices.del(slice2.id);
+  expect(slicesRga.size()).toBe(count + 2);
+  peritext.localSlices.del(slice1.id);
+  expect(slicesRga.size()).toBe(count + 1);
+  peritext.localSlices.del(slice3.id);
+  expect(slicesRga.size()).toBe(count);
+  Math.random = _random;
+});

src/json-crdt-extensions/peritext/editor/Cursor.ts

@@ -29,7 +29,7 @@ export class Cursor<T = string> extends PersistedSlice<T> {
     });
   }
 
-  /** Move to persisted slice. */
+  /** TODO: Move to {@link PersistedSlice}. */
   public setAt(start: number, length: number = 0): void {
     let at = start;
     let len = length;

src/json-crdt-extensions/peritext/overlay/__tests__/Overlay.refresh.spec.ts

@@ -142,21 +142,31 @@ describe('Overlay.refresh()', () => {
   });
 
   describe('cursor', () => {
-    test.only('updates state hash, when cursor char ID changes', () => {
-      const {peritext} = setup();
-      const overlay = peritext.overlay;
-      peritext.editor.cursor.setAt(1);
-      overlay.refresh();
-      console.log(peritext + '');
-      peritext.editor.cursor.setAt(2);
-      overlay.refresh();
-      console.log(peritext + '');
-      // const hash1 = overlay.refresh();
-      // peritext.editor.cursor.setAt(2);
-      // const hash2 = overlay.refresh();
-      // const hash3 = overlay.refresh();
-      // expect(hash1).not.toBe(hash2);
-      // expect(hash2).toBe(hash3);
+    describe('updates hash', () => {
+      testRefresh('when cursor char ID changes', (kit, refresh) => {
+        kit.peritext.editor.cursor.setAt(1);
+        refresh();
+        kit.peritext.editor.cursor.setAt(1);
+      });
+
+      testRefresh('when cursor start anchor changes', (kit, refresh) => {
+        kit.peritext.editor.cursor.setAt(3, 3);
+        expect(kit.peritext.editor.cursor.start.anchor).toBe(Anchor.Before);
+        refresh();
+        const start = kit.peritext.editor.cursor.start.clone();
+        start.anchor = Anchor.After;
+        kit.peritext.editor.cursor.setRange(kit.peritext.range(start, kit.peritext.editor.cursor.end));
+      });
+
+      testRefresh('when cursor end anchor changes', (kit, refresh) => {
+        kit.peritext.editor.cursor.setAt(3, 3);
+        expect(kit.peritext.editor.cursor.end.anchor).toBe(Anchor.After);
+        refresh();
+        const end = kit.peritext.editor.cursor.start.clone();
+        end.anchor = Anchor.Before;
+        kit.peritext.editor.cursor.setRange(kit.peritext.range(kit.peritext.editor.cursor.start, end));
+        console.log(kit.peritext.localSlices.model.api.flush());
+      });
     });
   });
 });

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

@@ -0,0 +1,9 @@
+import {Slices} from './Slices';
+import type {ITimestampStruct} from '../../../json-crdt-patch';
+
+export class LocalSlices extends Slices {
+  public del(id: ITimestampStruct): void {
+    super.del(id);
+    if (Math.random() < 0.1) this.set.removeTombstones();
+  }  
+}