@textbus/collaborate 2.0.0-alpha.36 → 2.0.0-alpha.39

package/bundles/collaborate.js

@@ -8,39 +8,205 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 import { Injectable } from '@tanbo/di';
-import { debounceTime, filter, tap } from '@tanbo/stream';
-import { RootComponentRef, Starter, Translator, FormatterList } from '@textbus/core';
-import { Doc as YDoc } from 'yjs';
-import { localToRemote } from './local-to-remote';
-import { remoteToLocal } from './remote-to-local';
-// const collaborateErrorFn = makeError('Collaborate')
+import { debounceTime, filter, Subject, tap } from '@tanbo/stream';
+import { RootComponentRef, Starter, Translator, Registry, Selection, Renderer } from '@textbus/core';
+import { Doc as YDoc, UndoManager } from 'yjs';
+import { LocalToRemote } from './collab/local-to-remote';
+import { RemoteToLocal } from './collab/remote-to-local';
+import { CollaborateCursor } from './collab/_api';
 let Collaborate = class Collaborate {
-    constructor(rootComponentRef, translator, formatterList, starter) {
-        this.rootComponentRef = rootComponentRef;
-        this.translator = translator;
-        this.formatterList = formatterList;
-        this.starter = starter;
-        this.yDoc = new YDoc();
-        this.subscriptions = [];
-        this.updateFromSelf = true;
+    constructor(rootComponentRef, collaborateCursor, translator, renderer, registry, selection, starter) {
+        Object.defineProperty(this, "rootComponentRef", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: rootComponentRef
+        });
+        Object.defineProperty(this, "collaborateCursor", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: collaborateCursor
+        });
+        Object.defineProperty(this, "translator", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: translator
+        });
+        Object.defineProperty(this, "renderer", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: renderer
+        });
+        Object.defineProperty(this, "registry", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: registry
+        });
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selection
+        });
+        Object.defineProperty(this, "starter", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: starter
+        });
+        Object.defineProperty(this, "onSelectionChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "yDoc", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new YDoc()
+        });
+        Object.defineProperty(this, "onBack", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onForward", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "onPush", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "localToRemote", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new LocalToRemote()
+        });
+        Object.defineProperty(this, "remoteToLocal", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new RemoteToLocal(this.translator, this.registry)
+        });
+        Object.defineProperty(this, "backEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "forwardEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "changeEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "pushEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        Object.defineProperty(this, "manager", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "subscriptions", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "updateFromSelf", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: true
+        });
+        Object.defineProperty(this, "selectionChangeEvent", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        this.onSelectionChange = this.selectionChangeEvent.asObservable();
+        this.onBack = this.backEvent.asObservable();
+        this.onForward = this.forwardEvent.asObservable();
+        this.onChange = this.changeEvent.asObservable();
+        this.onPush = this.pushEvent.asObservable();
+    }
+    get canBack() {
+        var _a;
+        return (_a = this.manager) === null || _a === void 0 ? void 0 : _a.canUndo();
+    }
+    get canForward() {
+        var _a;
+        return (_a = this.manager) === null || _a === void 0 ? void 0 : _a.canRedo();
     }
     setup() {
         this.subscriptions.push(this.starter.onReady.subscribe(() => {
-            this.listen();
+            this.listen2();
+        }), this.selection.onChange.subscribe(() => {
+            const paths = this.selection.getPaths();
+            this.selectionChangeEvent.next(paths);
         }));
     }
+    updateRemoteSelection(paths) {
+        this.collaborateCursor.draw(paths);
+    }
+    listen() {
+        //
+    }
+    back() {
+        if (this.canBack) {
+            this.manager.undo();
+        }
+    }
+    forward() {
+        if (this.canForward) {
+            this.manager.redo();
+        }
+    }
     destroy() {
         this.subscriptions.forEach(i => i.unsubscribe());
     }
-    listen() {
-        const root = this.yDoc.getArray('content');
+    listen2() {
+        const root = this.yDoc.getText('content');
         const slot = this.rootComponentRef.component.slots.get(0);
+        this.manager = new UndoManager(root);
         root.observeDeep((events, transaction) => {
             if (transaction.origin === this.yDoc) {
                 return;
             }
             this.updateFromSelf = false;
-            remoteToLocal(events, slot, this.translator, this.formatterList);
+            this.remoteToLocal.transform(events, slot);
+            this.renderer.render();
+            this.selection.restore();
             this.updateFromSelf = true;
         });
         const operations = [];
@@ -51,18 +217,23 @@ let Collaborate = class Collaborate {
         }), debounceTime(1)).subscribe(() => {
             this.yDoc.transact(() => {
                 operations.forEach(operation => {
-                    localToRemote(operation, root);
+                    this.localToRemote.transform(operation, root);
                 });
                 operations.length = 0;
             }, this.yDoc);
+            this.renderer.render();
+            this.selection.restore();
         }));
     }
 };
 Collaborate = __decorate([
     Injectable(),
     __metadata("design:paramtypes", [RootComponentRef,
+        CollaborateCursor,
         Translator,
-        FormatterList,
+        Renderer,
+        Registry,
+        Selection,
         Starter])
 ], Collaborate);
 export { Collaborate };

package/bundles/collaborate.js.map

@@ -1 +1 @@
-{"version":3,"file":"collaborate.js","sourceRoot":"","sources":["../src/collaborate.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"collaborate.js","sourceRoot":"","sources":["../src/collaborate.ts"],"names":[],"mappings":"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","sourcesContent":["import { Injectable } from '@tanbo/di'\nimport { debounceTime, filter, Observable, Subject, Subscription, tap } from '@tanbo/stream'\nimport {\n  RootComponentRef,\n  Starter,\n  Operation,\n  Translator,\n  Registry,\n  Selection,\n  SelectionPaths,\n  History, Renderer\n} from '@textbus/core'\nimport { Doc as YDoc, UndoManager } from 'yjs'\nimport { LocalToRemote } from './collab/local-to-remote'\nimport { RemoteToLocal } from './collab/remote-to-local'\nimport { CollaborateCursor, RemoteSelection } from './collab/_api'\n\n@Injectable()\nexport class Collaborate implements History {\n  onSelectionChange: Observable<SelectionPaths>\n  yDoc = new YDoc()\n  onBack: Observable<void>\n  onForward: Observable<void>\n  onChange: Observable<any>\n  onPush: Observable<void>\n\n  get canBack() {\n    return this.manager?.canUndo()\n  }\n\n  get canForward() {\n    return this.manager?.canRedo()\n  }\n\n  private localToRemote = new LocalToRemote()\n  private remoteToLocal = new RemoteToLocal(this.translator, this.registry)\n\n  private backEvent = new Subject<void>()\n  private forwardEvent = new Subject<void>()\n  private changeEvent = new Subject<void>()\n  private pushEvent = new Subject<void>()\n\n  private manager!: UndoManager\n\n  private subscriptions: Subscription[] = []\n  private updateFromSelf = true\n\n  private selectionChangeEvent = new Subject<SelectionPaths>()\n\n  constructor(private rootComponentRef: RootComponentRef,\n              private collaborateCursor: CollaborateCursor,\n              private translator: Translator,\n              private renderer: Renderer,\n              private registry: Registry,\n              private selection: Selection,\n              private starter: Starter) {\n    this.onSelectionChange = this.selectionChangeEvent.asObservable()\n    this.onBack = this.backEvent.asObservable()\n    this.onForward = this.forwardEvent.asObservable()\n    this.onChange = this.changeEvent.asObservable()\n    this.onPush = this.pushEvent.asObservable()\n  }\n\n  setup() {\n    this.subscriptions.push(\n      this.starter.onReady.subscribe(() => {\n        this.listen2()\n      }),\n      this.selection.onChange.subscribe(() => {\n        const paths = this.selection.getPaths()\n        this.selectionChangeEvent.next(paths)\n      })\n    )\n  }\n\n  updateRemoteSelection(paths: RemoteSelection[]) {\n    this.collaborateCursor.draw(paths)\n  }\n\n  listen() {\n    //\n  }\n\n  back() {\n    if (this.canBack) {\n      this.manager.undo()\n    }\n  }\n\n  forward() {\n    if (this.canForward) {\n      this.manager.redo()\n    }\n  }\n\n  destroy() {\n    this.subscriptions.forEach(i => i.unsubscribe())\n  }\n\n  private listen2() {\n    const root = this.yDoc.getText('content')\n    const slot = this.rootComponentRef.component.slots.get(0)!\n    this.manager = new UndoManager(root)\n    root.observeDeep((events, transaction) => {\n      if (transaction.origin === this.yDoc) {\n        return\n      }\n      this.updateFromSelf = false\n\n      this.remoteToLocal.transform(events, slot)\n      this.renderer.render()\n      this.selection.restore()\n      this.updateFromSelf = true\n    })\n    const operations: Operation[] = []\n    this.subscriptions.push(\n      this.rootComponentRef.component.changeMarker.onChange.pipe(\n        filter(() => {\n          return this.updateFromSelf\n        }),\n        tap(op => {\n          operations.push(op)\n        }),\n        debounceTime(1)\n      ).subscribe(() => {\n        this.yDoc.transact(() => {\n          operations.forEach(operation => {\n            this.localToRemote.transform(operation, root)\n          })\n          operations.length = 0\n        }, this.yDoc)\n        this.renderer.render()\n        this.selection.restore()\n      })\n    )\n  }\n}\n"]}

package/bundles/public-api.d.ts

@@ -1 +1,2 @@
+export * from './collab/_api';
 export * from './collaborate';

package/bundles/public-api.js

@@ -1,2 +1,3 @@
+export * from './collab/_api';
 export * from './collaborate';
 //# sourceMappingURL=public-api.js.map

package/bundles/public-api.js.map

@@ -1 +1 @@
-{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}
+{"version":3,"file":"public-api.js","sourceRoot":"","sources":["../src/public-api.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,eAAe,CAAA","sourcesContent":["export * from './collab/_api'\nexport * from './collaborate'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-alpha.36",
+  "version": "2.0.0-alpha.39",
   "description": "TextBus is a rich text editor and framework that is highly customizable and extensible to achieve rich wysiwyg effects.",
   "main": "./bundles/public-api.js",
   "module": "./bundles/public-api.js",
@@ -26,11 +26,12 @@
   ],
   "dependencies": {
     "@tanbo/di": "^1.0.5",
-    "@tanbo/stream": "^0.0.11",
-    "@textbus/core": "^2.0.0-alpha.36",
+    "@tanbo/stream": "^0.0.12",
+    "@textbus/browser": "^2.0.0-alpha.39",
+    "@textbus/core": "^2.0.0-alpha.39",
     "reflect-metadata": "^0.1.13",
-    "yjs": "^13.5.27",
-    "y-protocols": "^1.0.5"
+    "y-protocols": "^1.0.5",
+    "yjs": "^13.5.27"
   },
   "author": {
     "name": "Tanbo",
@@ -43,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "536327fc2609d3f2bbf3b0720738d3ed918d612c"
+  "gitHead": "a3de1ffbf0b8527eff875cd415b5d8d16df91ecb"
 }

package/src/collab/_api.ts

@@ -0,0 +1,3 @@
+export * from './collaborate-cursor'
+export * from './local-to-remote'
+export * from './remote-to-local'

package/src/collab/collaborate-cursor.ts

@@ -0,0 +1,107 @@
+import { Inject, Injectable } from '@tanbo/di'
+import { createElement, EDITABLE_DOCUMENT, EDITOR_CONTAINER, SelectionBridge } from '@textbus/browser'
+import { Selection, SelectionPaths } from '@textbus/core'
+import { Subject } from '@tanbo/stream'
+
+export interface RemoteSelection {
+  color: string
+  username: string
+  paths: SelectionPaths
+}
+
+export interface SelectionRect {
+  x: number
+  y: number
+  width: number
+  height: number
+  color: string
+}
+
+@Injectable()
+export class CollaborateCursor {
+  private canvas = createElement('canvas', {
+    styles: {
+      position: 'absolute',
+      opacity: 0.5,
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none'
+    }
+  }) as HTMLCanvasElement
+  private context = this.canvas.getContext('2d')!
+
+  private onRectChange = new Subject<SelectionRect>()
+
+  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
+              @Inject(EDITABLE_DOCUMENT) private document: Document,
+              private nativeSelection: SelectionBridge,
+              private selection: Selection) {
+    container.appendChild(this.canvas)
+    this.onRectChange.subscribe(rect => {
+      this.context.fillStyle = rect.color
+      this.context.beginPath()
+      this.context.rect(Math.ceil(rect.x), Math.ceil(rect.y), Math.ceil(rect.width), Math.ceil(rect.height))
+      this.context.fill()
+      this.context.closePath()
+    })
+  }
+
+  draw(paths: RemoteSelection[]) {
+    this.canvas.width = this.container.offsetWidth
+    this.canvas.height = this.container.offsetHeight
+    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
+
+    paths.filter(i => {
+      return i.paths.start.length && i.paths.end.length
+    }).forEach(item => {
+      const startOffset = item.paths.start.pop()!
+      const startSlot = this.selection.findSlotByPaths(item.paths.start)
+      const endOffset = item.paths.end.pop()!
+      const endSlot = this.selection.findSlotByPaths(item.paths.end)
+
+      if (startSlot && endSlot) {
+        const position = this.nativeSelection.getPositionByRange({
+          startOffset,
+          endOffset,
+          startSlot,
+          endSlot
+        })
+        if (position.start && position.end) {
+          const nativeRange = this.document.createRange()
+          nativeRange.setStart(position.start.node, position.start.offset)
+          nativeRange.setEnd(position.end.node, position.end.offset)
+
+          const rects = nativeRange.getClientRects()
+          let prev: any = {}
+          for (let i = rects.length - 1; i >= 0; i--) {
+            const rect = rects[i]
+            if (prev.y === rect.y) {
+              continue
+            }
+            prev = rect
+            this.onRectChange.next({
+              x: rect.x,
+              y: rect.y,
+              width: rect.width,
+              height: rect.height,
+              color: item.color
+            })
+          }
+
+          if (rects.length === 0) {
+            const rect = nativeRange.getBoundingClientRect()
+            this.onRectChange.next({
+              x: rect.x,
+              y: rect.y,
+              width: 1,
+              height: rect.height,
+              color: item.color
+            })
+          }
+        }
+      }
+    })
+  }
+}

package/src/collab/local-to-remote.ts

@@ -0,0 +1,158 @@
+import { Action, Operation, SlotLiteral, ComponentLiteral } from '@textbus/core'
+import { Array as YArray, Map as YMap, Text as YText } from 'yjs'
+
+export class LocalToRemote {
+  transform(operation: Operation, root: YText) {
+    const path = [...operation.path]
+    path.shift()
+    if (path.length) {
+      const componentIndex = path.shift()!
+      const sharedComponent = this.getSharedComponentByIndex(root, componentIndex)
+      if (sharedComponent) {
+        this.applyComponentOperationToSharedComponent(path, operation.apply, sharedComponent)
+      }
+      return
+    }
+    this.mergeActionsToSharedSlot(root, operation.apply)
+  }
+
+  private applyComponentOperationToSharedComponent(path: number[], actions: Action[], componentYMap: YMap<any>) {
+    const sharedSlots = componentYMap.get('slots') as YArray<any>
+    if (path.length) {
+      const slotIndex = path.shift()!
+      const sharedSlot = sharedSlots.get(slotIndex)
+      this.applySlotOperationToSharedSlot(path, actions, sharedSlot)
+      return
+    }
+    let index: number
+    actions.forEach(action => {
+      switch (action.type) {
+        case 'retain':
+          index = action.offset
+          break
+        case 'insertSlot':
+          sharedSlots.insert(index, [this.makeSharedSlotBySlotLiteral(action.slot)])
+          index++
+          break
+        case 'apply':
+          componentYMap.set('state', action.value)
+          break
+        case 'delete':
+          sharedSlots.delete(index, action.count)
+          break
+      }
+    })
+  }
+
+  private applySlotOperationToSharedSlot(path: number[], actions: Action[], slotYMap: YMap<any>) {
+    if (path.length) {
+      const componentIndex = path.shift()!
+      const sharedContent = slotYMap.get('content') as YText
+      const sharedComponent = this.getSharedComponentByIndex(sharedContent, componentIndex)!
+      this.applyComponentOperationToSharedComponent(path, actions, sharedComponent)
+      return
+    }
+    const content = slotYMap.get('content') as YText
+
+    this.mergeActionsToSharedSlot(content, actions)
+  }
+
+  private mergeActionsToSharedSlot(content: YText, actions: Action[]) {
+    let index: number
+    let length: number
+
+    actions.forEach(action => {
+      if (action.type === 'retain') {
+        if (action.formats) {
+          content.format(index, action.offset, action.formats)
+        } else {
+          index = action.offset
+        }
+      } else if (action.type === 'insert') {
+        const delta = content.toDelta()
+        const isEmpty = delta.length === 1 && delta[0].insert === '\n'
+
+        if (typeof action.content === 'string') {
+          length = action.content.length
+          content.insert(index, action.content)
+        } else {
+          length = 1
+          content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(action.content))
+        }
+        if (action.formats) {
+          content.format(index, length, action.formats)
+        }
+        if (isEmpty && index === 0) {
+          content.delete(content.length - 1, 1)
+        }
+        index += length
+      } else if (action.type === 'delete') {
+        const delta = content.toDelta()
+        content.delete(index, action.count)
+        if (content.length === 0) {
+          content.insert(0, '\n', delta[0]?.attributes)
+        }
+      } else if (action.type === 'apply') {
+        content.setAttribute('state', action.value)
+      }
+    })
+  }
+
+  private makeSharedSlotBySlotLiteral(slotLiteral: SlotLiteral): YMap<any> {
+    const content = new YText()
+    let index = 0
+    slotLiteral.content.forEach(i => {
+      let size: number
+      if (typeof i === 'string') {
+        size = i.length
+        content.insert(index, i)
+      } else {
+        size = 1
+        content.insertEmbed(index, this.makeSharedComponentByComponentLiteral(i))
+      }
+      index += size
+    })
+    const formats = slotLiteral.formats
+    Object.keys(formats).forEach(key => {
+      const formatRanges = formats[key]
+      formatRanges.forEach(formatRange => {
+        content.format(formatRange.startIndex, formatRange.endIndex - formatRange.startIndex, {
+          [key]: formatRange.value
+        })
+      })
+    })
+
+    const sharedSlot = new YMap()
+    sharedSlot.set('content', content)
+    sharedSlot.set('schema', slotLiteral.schema)
+    return sharedSlot
+  }
+
+  private makeSharedComponentByComponentLiteral(componentLiteral: ComponentLiteral): YMap<any> {
+    const slots = new YArray()
+    componentLiteral.slots.forEach(item => {
+      slots.push([this.makeSharedSlotBySlotLiteral(item)])
+    })
+    const sharedComponent = new YMap()
+    sharedComponent.set('name', componentLiteral.name)
+    sharedComponent.set('slots', slots)
+    sharedComponent.set('state', componentLiteral.state)
+    return sharedComponent
+  }
+
+  private getSharedComponentByIndex(host: YText, index: number): YMap<any> | null {
+    const delta = host.toDelta()
+    let i = 0
+    for (const action of delta) {
+      if (action.insert) {
+        if (i === index) {
+          return action.insert instanceof YMap ? action.insert : null
+        }
+        i += action.insert instanceof YMap ? 1 : action.insert.length
+      } else {
+        throw new Error('xxx')
+      }
+    }
+    return null
+  }
+}