@textbus/collaborate 2.0.0-alpha.37 → 2.0.0-alpha.38

package/bundles/collab/_api.d.ts

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

package/bundles/collab/_api.js

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

package/bundles/collab/_api.js.map

@@ -1 +1 @@
-{"version":3,"file":"_api.js","sourceRoot":"","sources":["../../src/collab/_api.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}
+{"version":3,"file":"_api.js","sourceRoot":"","sources":["../../src/collab/_api.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA"}

package/bundles/collab/collaborate-cursor.d.ts

@@ -0,0 +1,25 @@
+import { SelectionBridge } from '@textbus/browser';
+import { Selection, SelectionPaths } from '@textbus/core';
+export interface RemoteSelection {
+    color: string;
+    username: string;
+    paths: SelectionPaths;
+}
+export interface SelectionRect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    color: string;
+}
+export declare class CollaborateCursor {
+    private container;
+    private document;
+    private nativeSelection;
+    private selection;
+    private canvas;
+    private context;
+    private onRectChange;
+    constructor(container: HTMLElement, document: Document, nativeSelection: SelectionBridge, selection: Selection);
+    draw(paths: RemoteSelection[]): void;
+}

package/bundles/collab/collaborate-cursor.js

@@ -0,0 +1,108 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+var __param = (this && this.__param) || function (paramIndex, decorator) {
+    return function (target, key) { decorator(target, key, paramIndex); }
+};
+import { Inject, Injectable } from '@tanbo/di';
+import { createElement, EDITABLE_DOCUMENT, EDITOR_CONTAINER, SelectionBridge } from '@textbus/browser';
+import { Selection } from '@textbus/core';
+import { Subject } from '@tanbo/stream';
+let CollaborateCursor = class CollaborateCursor {
+    constructor(container, document, nativeSelection, selection) {
+        this.container = container;
+        this.document = document;
+        this.nativeSelection = nativeSelection;
+        this.selection = selection;
+        this.canvas = createElement('canvas', {
+            styles: {
+                position: 'absolute',
+                opacity: 0.5,
+                left: 0,
+                top: 0,
+                width: '100%',
+                height: '100%',
+                pointerEvents: 'none'
+            }
+        });
+        this.context = this.canvas.getContext('2d');
+        this.onRectChange = new Subject();
+        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) {
+        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 = {};
+                    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
+                        });
+                    }
+                }
+            }
+        });
+    }
+};
+CollaborateCursor = __decorate([
+    Injectable(),
+    __param(0, Inject(EDITOR_CONTAINER)),
+    __param(1, Inject(EDITABLE_DOCUMENT)),
+    __metadata("design:paramtypes", [HTMLElement,
+        Document,
+        SelectionBridge,
+        Selection])
+], CollaborateCursor);
+export { CollaborateCursor };
+//# sourceMappingURL=collaborate-cursor.js.map

package/bundles/collab/collaborate-cursor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collaborate-cursor.js","sourceRoot":"","sources":["../../src/collab/collaborate-cursor.ts"],"names":[],"mappings":"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"}

package/bundles/collaborate.d.ts

@@ -1,18 +1,23 @@
-import { RootComponentRef, Starter, Translator, Registry } from '@textbus/core';
+import { Observable } from '@tanbo/stream';
+import { RootComponentRef, Starter, Translator, Registry, Selection, SelectionPaths } from '@textbus/core';
 import { Doc as YDoc } from 'yjs';
-import { Awareness } from 'y-protocols/awareness';
-import { CollaborateHistory } from './collab/_api';
+import { CollaborateHistory, CollaborateCursor, RemoteSelection } from './collab/_api';
 export declare class Collaborate {
     private rootComponentRef;
+    private collaborateCursor;
     private translator;
     private registry;
+    private selection;
     private collaborateHistory;
     private starter;
+    onSelectionChange: Observable<SelectionPaths>;
     yDoc: YDoc;
     private subscriptions;
     private updateFromSelf;
-    constructor(rootComponentRef: RootComponentRef, translator: Translator, registry: Registry, collaborateHistory: CollaborateHistory, starter: Starter);
-    setup(awareness: Awareness): void;
+    private selectionChangeEvent;
+    constructor(rootComponentRef: RootComponentRef, collaborateCursor: CollaborateCursor, translator: Translator, registry: Registry, selection: Selection, collaborateHistory: CollaborateHistory, starter: Starter);
+    setup(): void;
+    updateRemoteSelection(paths: RemoteSelection[]): void;
     destroy(): void;
     private listen;
 }

package/bundles/collaborate.js

@@ -8,37 +8,37 @@ 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, Registry } from '@textbus/core';
+import { debounceTime, filter, Subject, tap } from '@tanbo/stream';
+import { RootComponentRef, Starter, Translator, Registry, Selection } from '@textbus/core';
 import { Doc as YDoc } from 'yjs';
 import { localToRemote } from './collab/local-to-remote';
 import { remoteToLocal } from './collab/remote-to-local';
-import { CollaborateHistory } from './collab/_api';
-// const collaborateErrorFn = makeError('Collaborate')
+import { CollaborateHistory, CollaborateCursor } from './collab/_api';
 let Collaborate = class Collaborate {
-    constructor(rootComponentRef, translator, registry, collaborateHistory, starter) {
+    constructor(rootComponentRef, collaborateCursor, translator, registry, selection, collaborateHistory, starter) {
         this.rootComponentRef = rootComponentRef;
+        this.collaborateCursor = collaborateCursor;
         this.translator = translator;
         this.registry = registry;
+        this.selection = selection;
         this.collaborateHistory = collaborateHistory;
         this.starter = starter;
         this.yDoc = new YDoc();
         this.subscriptions = [];
         this.updateFromSelf = true;
+        this.selectionChangeEvent = new Subject();
+        this.onSelectionChange = this.selectionChangeEvent.asObservable();
     }
-    setup(awareness) {
+    setup() {
         this.subscriptions.push(this.starter.onReady.subscribe(() => {
             this.listen();
+        }), this.selection.onChange.subscribe(() => {
+            const paths = this.selection.getPaths();
+            this.selectionChangeEvent.next(paths);
         }));
-        awareness.on('update', () => {
-            const users = [];
-            awareness.getStates().forEach(state => {
-                if (state.user) {
-                    users.push(state.user);
-                }
-            });
-            console.log(users);
-        });
+    }
+    updateRemoteSelection(paths) {
+        this.collaborateCursor.draw(paths);
     }
     destroy() {
         this.subscriptions.forEach(i => i.unsubscribe());
@@ -73,8 +73,10 @@ let Collaborate = class Collaborate {
 Collaborate = __decorate([
     Injectable(),
     __metadata("design:paramtypes", [RootComponentRef,
+        CollaborateCursor,
         Translator,
         Registry,
+        Selection,
         CollaborateHistory,
         Starter])
 ], 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-alpha.37",
+  "version": "2.0.0-alpha.38",
   "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,8 +26,9 @@
   ],
   "dependencies": {
     "@tanbo/di": "^1.0.5",
-    "@tanbo/stream": "^0.0.11",
-    "@textbus/core": "^2.0.0-alpha.37",
+    "@tanbo/stream": "^0.0.12",
+    "@textbus/browser": "^2.0.0-alpha.38",
+    "@textbus/core": "^2.0.0-alpha.38",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
     "yjs": "^13.5.27"
@@ -43,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "fca1880bd4a9fb21d4c28a76c492a6b98ba6dd8d"
+  "gitHead": "ee9175a3ad0ecf1e3470bd36faa5a2b336df2cea"
 }

package/src/collab/_api.ts

@@ -1,3 +1,4 @@
+export * from './collaborate-cursor'
 export * from './collaborate-history'
 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/collaborate.ts

@@ -1,49 +1,53 @@
 import { Injectable } from '@tanbo/di'
-import { debounceTime, filter, Subscription, tap } from '@tanbo/stream'
+import { debounceTime, filter, Observable, Subject, Subscription, tap } from '@tanbo/stream'
 import {
   RootComponentRef,
   Starter,
   Operation,
   Translator,
-  Registry
+  Registry,
+  Selection,
+  SelectionPaths
 } from '@textbus/core'
 import { Doc as YDoc } from 'yjs'
-import { Awareness } from 'y-protocols/awareness'
 import { localToRemote } from './collab/local-to-remote'
 import { remoteToLocal } from './collab/remote-to-local'
-import { CollaborateHistory } from './collab/_api'
-
-// const collaborateErrorFn = makeError('Collaborate')
+import { CollaborateHistory, CollaborateCursor, RemoteSelection } from './collab/_api'
 
 @Injectable()
 export class Collaborate {
+  onSelectionChange: Observable<SelectionPaths>
   yDoc = new YDoc()
 
   private subscriptions: Subscription[] = []
   private updateFromSelf = true
 
+  private selectionChangeEvent = new Subject<SelectionPaths>()
+
   constructor(private rootComponentRef: RootComponentRef,
+              private collaborateCursor: CollaborateCursor,
               private translator: Translator,
               private registry: Registry,
+              private selection: Selection,
               private collaborateHistory: CollaborateHistory,
               private starter: Starter) {
+    this.onSelectionChange = this.selectionChangeEvent.asObservable()
   }
 
-  setup(awareness: Awareness) {
+  setup() {
     this.subscriptions.push(
       this.starter.onReady.subscribe(() => {
         this.listen()
+      }),
+      this.selection.onChange.subscribe(() => {
+        const paths = this.selection.getPaths()
+        this.selectionChangeEvent.next(paths)
       })
     )
-    awareness.on('update', () => {
-      const users: any[] = []
-      awareness.getStates().forEach(state => {
-        if (state.user) {
-          users.push(state.user)
-        }
-      })
-      console.log(users)
-    })
+  }
+
+  updateRemoteSelection(paths: RemoteSelection[]) {
+    this.collaborateCursor.draw(paths)
   }
 
   destroy() {