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

package/bundles/collab/_api.d.ts

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

package/bundles/collab/_api.js

@@ -1,4 +1,4 @@
-export * from './collaborate-history';
+export * from './collaborate-cursor';
 export * from './local-to-remote';
 export * from './remote-to-local';
 //# sourceMappingURL=_api.js.map

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,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA","sourcesContent":["export * from './collaborate-cursor'\nexport * from './local-to-remote'\nexport * from './remote-to-local'\n"]}

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

@@ -0,0 +1,37 @@
+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;
+}
+export interface SelectionInfo {
+    color: string;
+    username: string;
+    rects: SelectionRect[];
+}
+export interface RemoteSelectionCursor {
+    cursor: HTMLElement;
+    anchor: HTMLElement;
+    userTip: HTMLElement;
+}
+export declare class CollaborateCursor {
+    private container;
+    private document;
+    private nativeSelection;
+    private selection;
+    private canvas;
+    private context;
+    private tooltips;
+    private onRectsChange;
+    constructor(container: HTMLElement, document: Document, nativeSelection: SelectionBridge, selection: Selection);
+    draw(paths: RemoteSelection[]): void;
+    private drawUserCursor;
+    private getUserCursor;
+}

package/bundles/collab/collaborate-cursor.js

@@ -0,0 +1,254 @@
+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) {
+        Object.defineProperty(this, "container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: container
+        });
+        Object.defineProperty(this, "document", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: document
+        });
+        Object.defineProperty(this, "nativeSelection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: nativeSelection
+        });
+        Object.defineProperty(this, "selection", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: selection
+        });
+        Object.defineProperty(this, "canvas", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createElement('canvas', {
+                styles: {
+                    position: 'absolute',
+                    opacity: 0.5,
+                    left: 0,
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none'
+                }
+            })
+        });
+        Object.defineProperty(this, "context", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: this.canvas.getContext('2d')
+        });
+        Object.defineProperty(this, "tooltips", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: createElement('div', {
+                styles: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'none',
+                    fontSize: '12px'
+                }
+            })
+        });
+        Object.defineProperty(this, "onRectsChange", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Subject()
+        });
+        container.appendChild(this.canvas);
+        container.appendChild(this.tooltips);
+        this.onRectsChange.subscribe(info => {
+            const color = info.color;
+            const rects = info.rects;
+            for (const rect of rects) {
+                this.context.fillStyle = color;
+                this.context.beginPath();
+                this.context.rect(rect.x, rect.y, rect.width, 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);
+        const users = [];
+        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();
+                    const selectionRects = [];
+                    for (let i = rects.length - 1; i >= 0; i--) {
+                        const rect = rects[i];
+                        selectionRects.push({
+                            x: rect.x,
+                            y: rect.y,
+                            width: rect.width,
+                            height: rect.height,
+                        });
+                    }
+                    if (rects.length === 0) {
+                        const rect = nativeRange.getBoundingClientRect();
+                        if (rect.x !== 0 || rect.y !== 0 || rect.width !== 0 || rect.height !== 0) {
+                            selectionRects.push({
+                                x: rect.x,
+                                y: rect.y,
+                                width: 1,
+                                height: rect.height,
+                            });
+                        }
+                    }
+                    const info = Object.assign(Object.assign({}, item), { rects: selectionRects });
+                    this.onRectsChange.next(info);
+                    users.push(info);
+                }
+            }
+        });
+        this.drawUserCursor(users);
+    }
+    drawUserCursor(users) {
+        for (let i = 0; i < users.length; i++) {
+            const user = users[i];
+            const last = user.rects[user.rects.length - 1];
+            const { cursor, userTip, anchor } = this.getUserCursor(i);
+            if (!last) {
+                cursor.style.display = 'none';
+            }
+            else {
+                Object.assign(cursor.style, {
+                    left: last.x + last.width + 'px',
+                    top: last.y + 'px',
+                    width: '2px',
+                    height: last.height + 'px',
+                    background: user.color,
+                    display: 'block'
+                });
+                anchor.style.background = user.color;
+                userTip.innerText = user.username;
+                userTip.style.background = user.color;
+            }
+        }
+        for (let i = users.length; i < this.tooltips.children.length; i++) {
+            this.tooltips.removeChild(this.tooltips.children[i]);
+        }
+    }
+    getUserCursor(index) {
+        let child = this.tooltips.children[index];
+        if (child) {
+            const anchor = child.children[0];
+            return {
+                cursor: child,
+                anchor,
+                userTip: anchor.children[0]
+            };
+        }
+        const userTip = createElement('span', {
+            styles: {
+                position: 'absolute',
+                display: 'none',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                marginBottom: '2px',
+                bottom: '100%',
+                whiteSpace: 'nowrap',
+                color: '#fff',
+                boxShadow: '0 1px 2px rgba(0,0,0,.1)',
+                borderRadius: '3px',
+                padding: '3px 5px',
+                pointerEvents: 'none',
+            }
+        });
+        const anchor = createElement('span', {
+            styles: {
+                position: 'absolute',
+                top: '-2px',
+                left: '-2px',
+                width: '6px',
+                height: '6px',
+                pointerEvents: 'auto',
+                pointer: 'cursor',
+            },
+            children: [userTip],
+            on: {
+                mouseenter() {
+                    anchor.style.transform = 'scale(1.2)';
+                    userTip.style.display = 'block';
+                },
+                mouseleave() {
+                    userTip.style.display = 'none';
+                    anchor.style.transform = '';
+                }
+            }
+        });
+        child = createElement('span', {
+            styles: {
+                position: 'absolute',
+            },
+            children: [
+                anchor
+            ]
+        });
+        this.tooltips.append(child);
+        return {
+            cursor: child,
+            anchor,
+            userTip
+        };
+    }
+};
+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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","sourcesContent":["import { Inject, Injectable } from '@tanbo/di'\nimport { createElement, EDITABLE_DOCUMENT, EDITOR_CONTAINER, SelectionBridge } from '@textbus/browser'\nimport { Selection, SelectionPaths } from '@textbus/core'\nimport { Subject } from '@tanbo/stream'\n\nexport interface RemoteSelection {\n  color: string\n  username: string\n  paths: SelectionPaths\n}\n\nexport interface SelectionRect {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport interface SelectionInfo {\n  color: string\n  username: string\n  rects: SelectionRect[]\n}\n\nexport interface RemoteSelectionCursor {\n  cursor: HTMLElement\n  anchor: HTMLElement\n  userTip: HTMLElement\n}\n\n@Injectable()\nexport class CollaborateCursor {\n  private canvas = createElement('canvas', {\n    styles: {\n      position: 'absolute',\n      opacity: 0.5,\n      left: 0,\n      top: 0,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none'\n    }\n  }) as HTMLCanvasElement\n  private context = this.canvas.getContext('2d')!\n  private tooltips = createElement('div', {\n    styles: {\n      position: 'absolute',\n      left: 0,\n      top: 0,\n      width: '100%',\n      height: '100%',\n      pointerEvents: 'none',\n      fontSize: '12px'\n    }\n  })\n\n  private onRectsChange = new Subject<SelectionInfo>()\n\n  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,\n              @Inject(EDITABLE_DOCUMENT) private document: Document,\n              private nativeSelection: SelectionBridge,\n              private selection: Selection) {\n    container.appendChild(this.canvas)\n    container.appendChild(this.tooltips)\n    this.onRectsChange.subscribe(info => {\n      const color = info.color\n      const rects = info.rects\n      for (const rect of rects) {\n        this.context.fillStyle = color\n        this.context.beginPath()\n        this.context.rect(rect.x, rect.y, rect.width, rect.height)\n        this.context.fill()\n        this.context.closePath()\n      }\n    })\n  }\n\n  draw(paths: RemoteSelection[]) {\n    this.canvas.width = this.container.offsetWidth\n    this.canvas.height = this.container.offsetHeight\n    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)\n\n    const users: SelectionInfo[] = []\n\n    paths.filter(i => {\n      return i.paths.start.length && i.paths.end.length\n    }).forEach(item => {\n      const startOffset = item.paths.start.pop()!\n      const startSlot = this.selection.findSlotByPaths(item.paths.start)\n      const endOffset = item.paths.end.pop()!\n      const endSlot = this.selection.findSlotByPaths(item.paths.end)\n\n      if (startSlot && endSlot) {\n        const position = this.nativeSelection.getPositionByRange({\n          startOffset,\n          endOffset,\n          startSlot,\n          endSlot\n        })\n        if (position.start && position.end) {\n          const nativeRange = this.document.createRange()\n          nativeRange.setStart(position.start.node, position.start.offset)\n          nativeRange.setEnd(position.end.node, position.end.offset)\n\n          const rects = nativeRange.getClientRects()\n          const selectionRects: SelectionRect[] = []\n          for (let i = rects.length - 1; i >= 0; i--) {\n            const rect = rects[i]\n            selectionRects.push({\n              x: rect.x,\n              y: rect.y,\n              width: rect.width,\n              height: rect.height,\n            })\n          }\n\n          if (rects.length === 0) {\n            const rect = nativeRange.getBoundingClientRect()\n            if (rect.x !== 0 || rect.y !== 0 || rect.width !== 0 || rect.height !== 0) {\n              selectionRects.push({\n                x: rect.x,\n                y: rect.y,\n                width: 1,\n                height: rect.height,\n              })\n            }\n          }\n          const info: SelectionInfo = {\n            ...item,\n            rects: selectionRects\n          }\n          this.onRectsChange.next(info)\n\n          users.push(info)\n        }\n      }\n    })\n    this.drawUserCursor(users)\n  }\n\n  private drawUserCursor(users: SelectionInfo[]) {\n    for (let i = 0; i < users.length; i++) {\n      const user = users[i]\n      const last = user.rects[user.rects.length - 1]\n\n      const {cursor, userTip, anchor} = this.getUserCursor(i)\n      if (!last) {\n        cursor.style.display = 'none'\n      } else {\n        Object.assign(cursor.style, {\n          left: last.x + last.width + 'px',\n          top: last.y + 'px',\n          width: '2px',\n          height: last.height + 'px',\n          background: user.color,\n          display: 'block'\n        })\n        anchor.style.background = user.color\n        userTip.innerText = user.username\n        userTip.style.background = user.color\n      }\n    }\n\n    for (let i = users.length; i < this.tooltips.children.length; i++) {\n      this.tooltips.removeChild(this.tooltips.children[i])\n    }\n  }\n\n  private getUserCursor(index: number): RemoteSelectionCursor {\n    let child: HTMLElement = this.tooltips.children[index] as HTMLElement\n    if (child) {\n      const anchor = child.children[0] as HTMLElement\n      return {\n        cursor: child,\n        anchor,\n        userTip: anchor.children[0] as HTMLElement\n      }\n    }\n    const userTip = createElement('span', {\n      styles: {\n        position: 'absolute',\n        display: 'none',\n        left: '50%',\n        transform: 'translateX(-50%)',\n        marginBottom: '2px',\n        bottom: '100%',\n        whiteSpace: 'nowrap',\n        color: '#fff',\n        boxShadow: '0 1px 2px rgba(0,0,0,.1)',\n        borderRadius: '3px',\n        padding: '3px 5px',\n        pointerEvents: 'none',\n      }\n    })\n\n    const anchor = createElement('span', {\n      styles: {\n        position: 'absolute',\n        top: '-2px',\n        left: '-2px',\n        width: '6px',\n        height: '6px',\n        pointerEvents: 'auto',\n        pointer: 'cursor',\n      },\n      children: [userTip],\n      on: {\n        mouseenter() {\n          anchor.style.transform = 'scale(1.2)'\n          userTip.style.display = 'block'\n        },\n        mouseleave() {\n          userTip.style.display = 'none'\n          anchor.style.transform = ''\n        }\n      }\n    })\n    child = createElement('span', {\n      styles: {\n        position: 'absolute',\n      },\n      children: [\n        anchor\n      ]\n    })\n    this.tooltips.append(child)\n    return {\n      cursor: child,\n      anchor,\n      userTip\n    }\n  }\n}\n"]}

package/bundles/collab/local-to-remote.d.ts

@@ -1,3 +1,11 @@
 import { Operation } from '@textbus/core';
-import { Array as YArray } from 'yjs';
-export declare function localToRemote(operation: Operation, root: YArray<any>): void;
+import { Text as YText } from 'yjs';
+export declare class LocalToRemote {
+    transform(operation: Operation, root: YText): void;
+    private applyComponentOperationToSharedComponent;
+    private applySlotOperationToSharedSlot;
+    private mergeActionsToSharedSlot;
+    private makeSharedSlotBySlotLiteral;
+    private makeSharedComponentByComponentLiteral;
+    private getSharedComponentByIndex;
+}