@textbus/collaborate 2.0.0-beta.4 → 2.0.0-beta.42

package/bundles/collab/collaborate-cursor.js

@@ -1,245 +0,0 @@
-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, getLayoutRectByRange, 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',
-                    zIndex: 10
-                }
-            })
-        });
-        Object.defineProperty(this, "onRectsChange", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: new Subject()
-        });
-        container.prepend(this.canvas, this.tooltips);
-        this.onRectsChange.subscribe(rects => {
-            for (const rect of rects) {
-                this.context.fillStyle = rect.color;
-                this.context.beginPath();
-                this.context.rect(rect.x, rect.y, rect.width, rect.height);
-                this.context.fill();
-                this.context.closePath();
-            }
-        });
-    }
-    draw(paths) {
-        const containerRect = this.container.getBoundingClientRect();
-        this.canvas.width = containerRect.width;
-        this.canvas.height = containerRect.height;
-        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({
-                            color: item.color,
-                            username: item.username,
-                            x: rect.x - containerRect.x,
-                            y: rect.y - containerRect.y,
-                            width: rect.width,
-                            height: rect.height,
-                        });
-                    }
-                    this.onRectsChange.next(selectionRects);
-                    const cursorRange = nativeRange.cloneRange();
-                    cursorRange.collapse(!item.paths.focusEnd);
-                    const cursorRect = getLayoutRectByRange(cursorRange);
-                    users.push({
-                        username: item.username,
-                        color: item.color,
-                        x: cursorRect.x - containerRect.x,
-                        y: cursorRect.y - containerRect.y,
-                        width: 2,
-                        height: cursorRect.height
-                    });
-                }
-            }
-        });
-        this.drawUserCursor(users);
-    }
-    drawUserCursor(rects) {
-        for (let i = 0; i < rects.length; i++) {
-            const rect = rects[i];
-            const { cursor, userTip, anchor } = this.getUserCursor(i);
-            Object.assign(cursor.style, {
-                left: rect.x + 'px',
-                top: rect.y + 'px',
-                width: rect.width + 'px',
-                height: rect.height + 'px',
-                background: rect.color,
-                display: 'block'
-            });
-            anchor.style.background = rect.color;
-            userTip.innerText = rect.username;
-            userTip.style.background = rect.color;
-        }
-        for (let i = rects.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() {
-                    userTip.style.display = 'block';
-                },
-                mouseleave() {
-                    userTip.style.display = 'none';
-                }
-            }
-        });
-        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=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29sbGFib3JhdGUtY3Vyc29yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2NvbGxhYi9jb2xsYWJvcmF0ZS1jdXJzb3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLE1BQU0sRUFBRSxVQUFVLEVBQUUsTUFBTSxXQUFXLENBQUE7QUFDOUMsT0FBTyxFQUNMLGFBQWEsRUFDYixpQkFBaUIsRUFDakIsZ0JBQWdCLEVBQ2hCLG9CQUFvQixFQUNwQixlQUFlLEVBQ2hCLE1BQU0sa0JBQWtCLENBQUE7QUFDekIsT0FBTyxFQUFFLFNBQVMsRUFBa0IsTUFBTSxlQUFlLENBQUE7QUFDekQsT0FBTyxFQUFFLE9BQU8sRUFBRSxNQUFNLGVBQWUsQ0FBQTtBQXdCdkMsSUFBYSxpQkFBaUIsR0FBOUIsTUFBYSxpQkFBaUI7SUE0QjVCLFlBQThDLFNBQXNCLEVBQ3JCLFFBQWtCLEVBQzdDLGVBQWdDLEVBQ2hDLFNBQW9COzs7OzttQkFITTs7Ozs7O21CQUNDOzs7Ozs7bUJBQzNCOzs7Ozs7bUJBQ0E7O1FBOUJwQjs7OzttQkFBaUIsYUFBYSxDQUFDLFFBQVEsRUFBRTtnQkFDdkMsTUFBTSxFQUFFO29CQUNOLFFBQVEsRUFBRSxVQUFVO29CQUNwQixPQUFPLEVBQUUsR0FBRztvQkFDWixJQUFJLEVBQUUsQ0FBQztvQkFDUCxHQUFHLEVBQUUsQ0FBQztvQkFDTixLQUFLLEVBQUUsTUFBTTtvQkFDYixNQUFNLEVBQUUsTUFBTTtvQkFDZCxhQUFhLEVBQUUsTUFBTTtpQkFDdEI7YUFDRixDQUFzQjtXQUFBO1FBQ3ZCOzs7O21CQUFrQixJQUFJLENBQUMsTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUU7V0FBQTtRQUMvQzs7OzttQkFBbUIsYUFBYSxDQUFDLEtBQUssRUFBRTtnQkFDdEMsTUFBTSxFQUFFO29CQUNOLFFBQVEsRUFBRSxVQUFVO29CQUNwQixJQUFJLEVBQUUsQ0FBQztvQkFDUCxHQUFHLEVBQUUsQ0FBQztvQkFDTixLQUFLLEVBQUUsTUFBTTtvQkFDYixNQUFNLEVBQUUsTUFBTTtvQkFDZCxhQUFhLEVBQUUsTUFBTTtvQkFDckIsUUFBUSxFQUFFLE1BQU07b0JBQ2hCLE1BQU0sRUFBRSxFQUFFO2lCQUNYO2FBQ0YsQ0FBQztXQUFBO1FBRUY7Ozs7bUJBQXdCLElBQUksT0FBTyxFQUFtQjtXQUFBO1FBTXBELFNBQVMsQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLENBQUMsUUFBUSxDQUFDLENBQUE7UUFDN0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsS0FBSyxDQUFDLEVBQUU7WUFDbkMsS0FBSyxNQUFNLElBQUksSUFBSSxLQUFLLEVBQUU7Z0JBQ3hCLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUE7Z0JBQ25DLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxFQUFFLENBQUE7Z0JBQ3hCLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUMsRUFBRSxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQTtnQkFDMUQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxJQUFJLEVBQUUsQ0FBQTtnQkFDbkIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxTQUFTLEVBQUUsQ0FBQTthQUN6QjtRQUNILENBQUMsQ0FBQyxDQUFBO0lBQ0osQ0FBQztJQUVELElBQUksQ0FBQyxLQUF3QjtRQUMzQixNQUFNLGFBQWEsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLHFCQUFxQixFQUFFLENBQUE7UUFDNUQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEdBQUcsYUFBYSxDQUFDLEtBQUssQ0FBQTtRQUN2QyxJQUFJLENBQUMsTUFBTSxDQUFDLE1BQU0sR0FBRyxhQUFhLENBQUMsTUFBTSxDQUFBO1FBQ3pDLElBQUksQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQTtRQUVuRSxNQUFNLEtBQUssR0FBb0IsRUFBRSxDQUFBO1FBR2pDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUU7WUFDZixPQUFPLENBQUMsQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLE1BQU0sSUFBSSxDQUFDLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUE7UUFDbkQsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxFQUFFO1lBQ2hCLE1BQU0sV0FBVyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLEdBQUcsRUFBRyxDQUFBO1lBQzNDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxTQUFTLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsS0FBSyxDQUFDLENBQUE7WUFDbEUsTUFBTSxTQUFTLEdBQUcsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFHLENBQUE7WUFDdkMsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFNBQVMsQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQTtZQUU5RCxJQUFJLFNBQVMsSUFBSSxPQUFPLEVBQUU7Z0JBQ3hCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxlQUFlLENBQUMsa0JBQWtCLENBQUM7b0JBQ3ZELFdBQVc7b0JBQ1gsU0FBUztvQkFDVCxTQUFTO29CQUNULE9BQU87aUJBQ1IsQ0FBQyxDQUFBO2dCQUNGLElBQUksUUFBUSxDQUFDLEtBQUssSUFBSSxRQUFRLENBQUMsR0FBRyxFQUFFO29CQUNsQyxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFdBQVcsRUFBRSxDQUFBO29CQUMvQyxXQUFXLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsSUFBSSxFQUFFLFFBQVEsQ0FBQyxLQUFLLENBQUMsTUFBTSxDQUFDLENBQUE7b0JBQ2hFLFdBQVcsQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLEdBQUcsQ0FBQyxJQUFJLEVBQUUsUUFBUSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsQ0FBQTtvQkFFMUQsTUFBTSxLQUFLLEdBQUcsV0FBVyxDQUFDLGNBQWMsRUFBRSxDQUFBO29CQUMxQyxNQUFNLGNBQWMsR0FBb0IsRUFBRSxDQUFBO29CQUMxQyxLQUFLLElBQUksQ0FBQyxHQUFHLEtBQUssQ0FBQyxNQUFNLEdBQUcsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxFQUFFLEVBQUU7d0JBQzFDLE1BQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQTt3QkFDckIsY0FBYyxDQUFDLElBQUksQ0FBQzs0QkFDbEIsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLOzRCQUNqQixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7NEJBQ3ZCLENBQUMsRUFBRSxJQUFJLENBQUMsQ0FBQyxHQUFHLGFBQWEsQ0FBQyxDQUFDOzRCQUMzQixDQUFDLEVBQUUsSUFBSSxDQUFDLENBQUMsR0FBRyxhQUFhLENBQUMsQ0FBQzs0QkFDM0IsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLOzRCQUNqQixNQUFNLEVBQUUsSUFBSSxDQUFDLE1BQU07eUJBQ3BCLENBQUMsQ0FBQTtxQkFDSDtvQkFDRCxJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxjQUFjLENBQUMsQ0FBQTtvQkFFdkMsTUFBTSxXQUFXLEdBQUcsV0FBVyxDQUFDLFVBQVUsRUFBRSxDQUFBO29CQUM1QyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxRQUFRLENBQUMsQ0FBQTtvQkFFMUMsTUFBTSxVQUFVLEdBQUcsb0JBQW9CLENBQUMsV0FBVyxDQUFDLENBQUE7b0JBRXBELEtBQUssQ0FBQyxJQUFJLENBQUM7d0JBQ1QsUUFBUSxFQUFFLElBQUksQ0FBQyxRQUFRO3dCQUN2QixLQUFLLEVBQUUsSUFBSSxDQUFDLEtBQUs7d0JBQ2pCLENBQUMsRUFBRSxVQUFVLENBQUMsQ0FBQyxHQUFHLGFBQWEsQ0FBQyxDQUFDO3dCQUNqQyxDQUFDLEVBQUUsVUFBVSxDQUFDLENBQUMsR0FBRyxhQUFhLENBQUMsQ0FBQzt3QkFDakMsS0FBSyxFQUFFLENBQUM7d0JBQ1IsTUFBTSxFQUFFLFVBQVUsQ0FBQyxNQUFNO3FCQUMxQixDQUFDLENBQUE7aUJBQ0g7YUFDRjtRQUNILENBQUMsQ0FBQyxDQUFBO1FBQ0YsSUFBSSxDQUFDLGNBQWMsQ0FBQyxLQUFLLENBQUMsQ0FBQTtJQUM1QixDQUFDO0lBRU8sY0FBYyxDQUFDLEtBQXNCO1FBQzNDLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFFO1lBQ3JDLE1BQU0sSUFBSSxHQUFHLEtBQUssQ0FBQyxDQUFDLENBQUMsQ0FBQTtZQUNyQixNQUFNLEVBQUMsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUMsR0FBRyxJQUFJLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxDQUFBO1lBQ3ZELE1BQU0sQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRTtnQkFDMUIsSUFBSSxFQUFFLElBQUksQ0FBQyxDQUFDLEdBQUcsSUFBSTtnQkFDbkIsR0FBRyxFQUFFLElBQUksQ0FBQyxDQUFDLEdBQUcsSUFBSTtnQkFDbEIsS0FBSyxFQUFFLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSTtnQkFDeEIsTUFBTSxFQUFFLElBQUksQ0FBQyxNQUFNLEdBQUcsSUFBSTtnQkFDMUIsVUFBVSxFQUFFLElBQUksQ0FBQyxLQUFLO2dCQUN0QixPQUFPLEVBQUUsT0FBTzthQUNqQixDQUFDLENBQUE7WUFDRixNQUFNLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFBO1lBQ3BDLE9BQU8sQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQTtZQUNqQyxPQUFPLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxJQUFJLENBQUMsS0FBSyxDQUFBO1NBQ3RDO1FBRUQsS0FBSyxJQUFJLENBQUMsR0FBRyxLQUFLLENBQUMsTUFBTSxFQUFFLENBQUMsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxNQUFNLEVBQUUsQ0FBQyxFQUFFLEVBQUU7WUFDakUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQTtTQUNyRDtJQUNILENBQUM7SUFFTyxhQUFhLENBQUMsS0FBYTtRQUNqQyxJQUFJLEtBQUssR0FBZ0IsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFnQixDQUFBO1FBQ3JFLElBQUksS0FBSyxFQUFFO1lBQ1QsTUFBTSxNQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQWdCLENBQUE7WUFDL0MsT0FBTztnQkFDTCxNQUFNLEVBQUUsS0FBSztnQkFDYixNQUFNO2dCQUNOLE9BQU8sRUFBRSxNQUFNLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBZ0I7YUFDM0MsQ0FBQTtTQUNGO1FBQ0QsTUFBTSxPQUFPLEdBQUcsYUFBYSxDQUFDLE1BQU0sRUFBRTtZQUNwQyxNQUFNLEVBQUU7Z0JBQ04sUUFBUSxFQUFFLFVBQVU7Z0JBQ3BCLE9BQU8sRUFBRSxNQUFNO2dCQUNmLElBQUksRUFBRSxLQUFLO2dCQUNYLFNBQVMsRUFBRSxrQkFBa0I7Z0JBQzdCLFlBQVksRUFBRSxLQUFLO2dCQUNuQixNQUFNLEVBQUUsTUFBTTtnQkFDZCxVQUFVLEVBQUUsUUFBUTtnQkFDcEIsS0FBSyxFQUFFLE1BQU07Z0JBQ2IsU0FBUyxFQUFFLDBCQUEwQjtnQkFDckMsWUFBWSxFQUFFLEtBQUs7Z0JBQ25CLE9BQU8sRUFBRSxTQUFTO2dCQUNsQixhQUFhLEVBQUUsTUFBTTthQUN0QjtTQUNGLENBQUMsQ0FBQTtRQUVGLE1BQU0sTUFBTSxHQUFHLGFBQWEsQ0FBQyxNQUFNLEVBQUU7WUFDbkMsTUFBTSxFQUFFO2dCQUNOLFFBQVEsRUFBRSxVQUFVO2dCQUNwQixHQUFHLEVBQUUsTUFBTTtnQkFDWCxJQUFJLEVBQUUsTUFBTTtnQkFDWixLQUFLLEVBQUUsS0FBSztnQkFDWixNQUFNLEVBQUUsS0FBSztnQkFDYixhQUFhLEVBQUUsTUFBTTtnQkFDckIsT0FBTyxFQUFFLFFBQVE7YUFDbEI7WUFDRCxRQUFRLEVBQUUsQ0FBQyxPQUFPLENBQUM7WUFDbkIsRUFBRSxFQUFFO2dCQUNGLFVBQVU7b0JBQ1IsT0FBTyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsT0FBTyxDQUFBO2dCQUNqQyxDQUFDO2dCQUNELFVBQVU7b0JBQ1IsT0FBTyxDQUFDLEtBQUssQ0FBQyxPQUFPLEdBQUcsTUFBTSxDQUFBO2dCQUNoQyxDQUFDO2FBQ0Y7U0FDRixDQUFDLENBQUE7UUFDRixLQUFLLEdBQUcsYUFBYSxDQUFDLE1BQU0sRUFBRTtZQUM1QixNQUFNLEVBQUU7Z0JBQ04sUUFBUSxFQUFFLFVBQVU7YUFDckI7WUFDRCxRQUFRLEVBQUU7Z0JBQ1IsTUFBTTthQUNQO1NBQ0YsQ0FBQyxDQUFBO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUE7UUFDM0IsT0FBTztZQUNMLE1BQU0sRUFBRSxLQUFLO1lBQ2IsTUFBTTtZQUNOLE9BQU87U0FDUixDQUFBO0lBQ0gsQ0FBQztDQUNGLENBQUE7QUEvTFksaUJBQWlCO0lBRDdCLFVBQVUsRUFBRTtJQTZCRSxXQUFBLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFBO0lBQ3hCLFdBQUEsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUE7cUNBRG1CLFdBQVc7UUFDWCxRQUFRO1FBQzVCLGVBQWU7UUFDckIsU0FBUztHQS9CN0IsaUJBQWlCLENBK0w3QjtTQS9MWSxpQkFBaUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3QsIEluamVjdGFibGUgfSBmcm9tICdAdGFuYm8vZGknXG5pbXBvcnQge1xuICBjcmVhdGVFbGVtZW50LFxuICBFRElUQUJMRV9ET0NVTUVOVCxcbiAgRURJVE9SX0NPTlRBSU5FUixcbiAgZ2V0TGF5b3V0UmVjdEJ5UmFuZ2UsXG4gIFNlbGVjdGlvbkJyaWRnZVxufSBmcm9tICdAdGV4dGJ1cy9icm93c2VyJ1xuaW1wb3J0IHsgU2VsZWN0aW9uLCBTZWxlY3Rpb25QYXRocyB9IGZyb20gJ0B0ZXh0YnVzL2NvcmUnXG5pbXBvcnQgeyBTdWJqZWN0IH0gZnJvbSAnQHRhbmJvL3N0cmVhbSdcblxuZXhwb3J0IGludGVyZmFjZSBSZW1vdGVTZWxlY3Rpb24ge1xuICBjb2xvcjogc3RyaW5nXG4gIHVzZXJuYW1lOiBzdHJpbmdcbiAgcGF0aHM6IFNlbGVjdGlvblBhdGhzXG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgU2VsZWN0aW9uUmVjdCB7XG4gIGNvbG9yOiBzdHJpbmdcbiAgdXNlcm5hbWU6IHN0cmluZ1xuICB4OiBudW1iZXJcbiAgeTogbnVtYmVyXG4gIHdpZHRoOiBudW1iZXJcbiAgaGVpZ2h0OiBudW1iZXJcbn1cblxuZXhwb3J0IGludGVyZmFjZSBSZW1vdGVTZWxlY3Rpb25DdXJzb3Ige1xuICBjdXJzb3I6IEhUTUxFbGVtZW50XG4gIGFuY2hvcjogSFRNTEVsZW1lbnRcbiAgdXNlclRpcDogSFRNTEVsZW1lbnRcbn1cblxuQEluamVjdGFibGUoKVxuZXhwb3J0IGNsYXNzIENvbGxhYm9yYXRlQ3Vyc29yIHtcbiAgcHJpdmF0ZSBjYW52YXMgPSBjcmVhdGVFbGVtZW50KCdjYW52YXMnLCB7XG4gICAgc3R5bGVzOiB7XG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIG9wYWNpdHk6IDAuNSxcbiAgICAgIGxlZnQ6IDAsXG4gICAgICB0b3A6IDAsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgICBwb2ludGVyRXZlbnRzOiAnbm9uZSdcbiAgICB9XG4gIH0pIGFzIEhUTUxDYW52YXNFbGVtZW50XG4gIHByaXZhdGUgY29udGV4dCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoJzJkJykhXG4gIHByaXZhdGUgdG9vbHRpcHMgPSBjcmVhdGVFbGVtZW50KCdkaXYnLCB7XG4gICAgc3R5bGVzOiB7XG4gICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIGxlZnQ6IDAsXG4gICAgICB0b3A6IDAsXG4gICAgICB3aWR0aDogJzEwMCUnLFxuICAgICAgaGVpZ2h0OiAnMTAwJScsXG4gICAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgICBmb250U2l6ZTogJzEycHgnLFxuICAgICAgekluZGV4OiAxMFxuICAgIH1cbiAgfSlcblxuICBwcml2YXRlIG9uUmVjdHNDaGFuZ2UgPSBuZXcgU3ViamVjdDxTZWxlY3Rpb25SZWN0W10+KClcblxuICBjb25zdHJ1Y3RvcihASW5qZWN0KEVESVRPUl9DT05UQUlORVIpIHByaXZhdGUgY29udGFpbmVyOiBIVE1MRWxlbWVudCxcbiAgICAgICAgICAgICAgQEluamVjdChFRElUQUJMRV9ET0NVTUVOVCkgcHJpdmF0ZSBkb2N1bWVudDogRG9jdW1lbnQsXG4gICAgICAgICAgICAgIHByaXZhdGUgbmF0aXZlU2VsZWN0aW9uOiBTZWxlY3Rpb25CcmlkZ2UsXG4gICAgICAgICAgICAgIHByaXZhdGUgc2VsZWN0aW9uOiBTZWxlY3Rpb24pIHtcbiAgICBjb250YWluZXIucHJlcGVuZCh0aGlzLmNhbnZhcywgdGhpcy50b29sdGlwcylcbiAgICB0aGlzLm9uUmVjdHNDaGFuZ2Uuc3Vic2NyaWJlKHJlY3RzID0+IHtcbiAgICAgIGZvciAoY29uc3QgcmVjdCBvZiByZWN0cykge1xuICAgICAgICB0aGlzLmNvbnRleHQuZmlsbFN0eWxlID0gcmVjdC5jb2xvclxuICAgICAgICB0aGlzLmNvbnRleHQuYmVnaW5QYXRoKClcbiAgICAgICAgdGhpcy5jb250ZXh0LnJlY3QocmVjdC54LCByZWN0LnksIHJlY3Qud2lkdGgsIHJlY3QuaGVpZ2h0KVxuICAgICAgICB0aGlzLmNvbnRleHQuZmlsbCgpXG4gICAgICAgIHRoaXMuY29udGV4dC5jbG9zZVBhdGgoKVxuICAgICAgfVxuICAgIH0pXG4gIH1cblxuICBkcmF3KHBhdGhzOiBSZW1vdGVTZWxlY3Rpb25bXSkge1xuICAgIGNvbnN0IGNvbnRhaW5lclJlY3QgPSB0aGlzLmNvbnRhaW5lci5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKVxuICAgIHRoaXMuY2FudmFzLndpZHRoID0gY29udGFpbmVyUmVjdC53aWR0aFxuICAgIHRoaXMuY2FudmFzLmhlaWdodCA9IGNvbnRhaW5lclJlY3QuaGVpZ2h0XG4gICAgdGhpcy5jb250ZXh0LmNsZWFyUmVjdCgwLCAwLCB0aGlzLmNhbnZhcy53aWR0aCwgdGhpcy5jYW52YXMuaGVpZ2h0KVxuXG4gICAgY29uc3QgdXNlcnM6IFNlbGVjdGlvblJlY3RbXSA9IFtdXG5cblxuICAgIHBhdGhzLmZpbHRlcihpID0+IHtcbiAgICAgIHJldHVybiBpLnBhdGhzLnN0YXJ0Lmxlbmd0aCAmJiBpLnBhdGhzLmVuZC5sZW5ndGhcbiAgICB9KS5mb3JFYWNoKGl0ZW0gPT4ge1xuICAgICAgY29uc3Qgc3RhcnRPZmZzZXQgPSBpdGVtLnBhdGhzLnN0YXJ0LnBvcCgpIVxuICAgICAgY29uc3Qgc3RhcnRTbG90ID0gdGhpcy5zZWxlY3Rpb24uZmluZFNsb3RCeVBhdGhzKGl0ZW0ucGF0aHMuc3RhcnQpXG4gICAgICBjb25zdCBlbmRPZmZzZXQgPSBpdGVtLnBhdGhzLmVuZC5wb3AoKSFcbiAgICAgIGNvbnN0IGVuZFNsb3QgPSB0aGlzLnNlbGVjdGlvbi5maW5kU2xvdEJ5UGF0aHMoaXRlbS5wYXRocy5lbmQpXG5cbiAgICAgIGlmIChzdGFydFNsb3QgJiYgZW5kU2xvdCkge1xuICAgICAgICBjb25zdCBwb3NpdGlvbiA9IHRoaXMubmF0aXZlU2VsZWN0aW9uLmdldFBvc2l0aW9uQnlSYW5nZSh7XG4gICAgICAgICAgc3RhcnRPZmZzZXQsXG4gICAgICAgICAgZW5kT2Zmc2V0LFxuICAgICAgICAgIHN0YXJ0U2xvdCxcbiAgICAgICAgICBlbmRTbG90XG4gICAgICAgIH0pXG4gICAgICAgIGlmIChwb3NpdGlvbi5zdGFydCAmJiBwb3NpdGlvbi5lbmQpIHtcbiAgICAgICAgICBjb25zdCBuYXRpdmVSYW5nZSA9IHRoaXMuZG9jdW1lbnQuY3JlYXRlUmFuZ2UoKVxuICAgICAgICAgIG5hdGl2ZVJhbmdlLnNldFN0YXJ0KHBvc2l0aW9uLnN0YXJ0Lm5vZGUsIHBvc2l0aW9uLnN0YXJ0Lm9mZnNldClcbiAgICAgICAgICBuYXRpdmVSYW5nZS5zZXRFbmQocG9zaXRpb24uZW5kLm5vZGUsIHBvc2l0aW9uLmVuZC5vZmZzZXQpXG5cbiAgICAgICAgICBjb25zdCByZWN0cyA9IG5hdGl2ZVJhbmdlLmdldENsaWVudFJlY3RzKClcbiAgICAgICAgICBjb25zdCBzZWxlY3Rpb25SZWN0czogU2VsZWN0aW9uUmVjdFtdID0gW11cbiAgICAgICAgICBmb3IgKGxldCBpID0gcmVjdHMubGVuZ3RoIC0gMTsgaSA+PSAwOyBpLS0pIHtcbiAgICAgICAgICAgIGNvbnN0IHJlY3QgPSByZWN0c1tpXVxuICAgICAgICAgICAgc2VsZWN0aW9uUmVjdHMucHVzaCh7XG4gICAgICAgICAgICAgIGNvbG9yOiBpdGVtLmNvbG9yLFxuICAgICAgICAgICAgICB1c2VybmFtZTogaXRlbS51c2VybmFtZSxcbiAgICAgICAgICAgICAgeDogcmVjdC54IC0gY29udGFpbmVyUmVjdC54LFxuICAgICAgICAgICAgICB5OiByZWN0LnkgLSBjb250YWluZXJSZWN0LnksXG4gICAgICAgICAgICAgIHdpZHRoOiByZWN0LndpZHRoLFxuICAgICAgICAgICAgICBoZWlnaHQ6IHJlY3QuaGVpZ2h0LFxuICAgICAgICAgICAgfSlcbiAgICAgICAgICB9XG4gICAgICAgICAgdGhpcy5vblJlY3RzQ2hhbmdlLm5leHQoc2VsZWN0aW9uUmVjdHMpXG5cbiAgICAgICAgICBjb25zdCBjdXJzb3JSYW5nZSA9IG5hdGl2ZVJhbmdlLmNsb25lUmFuZ2UoKVxuICAgICAgICAgIGN1cnNvclJhbmdlLmNvbGxhcHNlKCFpdGVtLnBhdGhzLmZvY3VzRW5kKVxuXG4gICAgICAgICAgY29uc3QgY3Vyc29yUmVjdCA9IGdldExheW91dFJlY3RCeVJhbmdlKGN1cnNvclJhbmdlKVxuXG4gICAgICAgICAgdXNlcnMucHVzaCh7XG4gICAgICAgICAgICB1c2VybmFtZTogaXRlbS51c2VybmFtZSxcbiAgICAgICAgICAgIGNvbG9yOiBpdGVtLmNvbG9yLFxuICAgICAgICAgICAgeDogY3Vyc29yUmVjdC54IC0gY29udGFpbmVyUmVjdC54LFxuICAgICAgICAgICAgeTogY3Vyc29yUmVjdC55IC0gY29udGFpbmVyUmVjdC55LFxuICAgICAgICAgICAgd2lkdGg6IDIsXG4gICAgICAgICAgICBoZWlnaHQ6IGN1cnNvclJlY3QuaGVpZ2h0XG4gICAgICAgICAgfSlcbiAgICAgICAgfVxuICAgICAgfVxuICAgIH0pXG4gICAgdGhpcy5kcmF3VXNlckN1cnNvcih1c2VycylcbiAgfVxuXG4gIHByaXZhdGUgZHJhd1VzZXJDdXJzb3IocmVjdHM6IFNlbGVjdGlvblJlY3RbXSkge1xuICAgIGZvciAobGV0IGkgPSAwOyBpIDwgcmVjdHMubGVuZ3RoOyBpKyspIHtcbiAgICAgIGNvbnN0IHJlY3QgPSByZWN0c1tpXVxuICAgICAgY29uc3Qge2N1cnNvciwgdXNlclRpcCwgYW5jaG9yfSA9IHRoaXMuZ2V0VXNlckN1cnNvcihpKVxuICAgICAgT2JqZWN0LmFzc2lnbihjdXJzb3Iuc3R5bGUsIHtcbiAgICAgICAgbGVmdDogcmVjdC54ICsgJ3B4JyxcbiAgICAgICAgdG9wOiByZWN0LnkgKyAncHgnLFxuICAgICAgICB3aWR0aDogcmVjdC53aWR0aCArICdweCcsXG4gICAgICAgIGhlaWdodDogcmVjdC5oZWlnaHQgKyAncHgnLFxuICAgICAgICBiYWNrZ3JvdW5kOiByZWN0LmNvbG9yLFxuICAgICAgICBkaXNwbGF5OiAnYmxvY2snXG4gICAgICB9KVxuICAgICAgYW5jaG9yLnN0eWxlLmJhY2tncm91bmQgPSByZWN0LmNvbG9yXG4gICAgICB1c2VyVGlwLmlubmVyVGV4dCA9IHJlY3QudXNlcm5hbWVcbiAgICAgIHVzZXJUaXAuc3R5bGUuYmFja2dyb3VuZCA9IHJlY3QuY29sb3JcbiAgICB9XG5cbiAgICBmb3IgKGxldCBpID0gcmVjdHMubGVuZ3RoOyBpIDwgdGhpcy50b29sdGlwcy5jaGlsZHJlbi5sZW5ndGg7IGkrKykge1xuICAgICAgdGhpcy50b29sdGlwcy5yZW1vdmVDaGlsZCh0aGlzLnRvb2x0aXBzLmNoaWxkcmVuW2ldKVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZ2V0VXNlckN1cnNvcihpbmRleDogbnVtYmVyKTogUmVtb3RlU2VsZWN0aW9uQ3Vyc29yIHtcbiAgICBsZXQgY2hpbGQ6IEhUTUxFbGVtZW50ID0gdGhpcy50b29sdGlwcy5jaGlsZHJlbltpbmRleF0gYXMgSFRNTEVsZW1lbnRcbiAgICBpZiAoY2hpbGQpIHtcbiAgICAgIGNvbnN0IGFuY2hvciA9IGNoaWxkLmNoaWxkcmVuWzBdIGFzIEhUTUxFbGVtZW50XG4gICAgICByZXR1cm4ge1xuICAgICAgICBjdXJzb3I6IGNoaWxkLFxuICAgICAgICBhbmNob3IsXG4gICAgICAgIHVzZXJUaXA6IGFuY2hvci5jaGlsZHJlblswXSBhcyBIVE1MRWxlbWVudFxuICAgICAgfVxuICAgIH1cbiAgICBjb25zdCB1c2VyVGlwID0gY3JlYXRlRWxlbWVudCgnc3BhbicsIHtcbiAgICAgIHN0eWxlczoge1xuICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgICAgZGlzcGxheTogJ25vbmUnLFxuICAgICAgICBsZWZ0OiAnNTAlJyxcbiAgICAgICAgdHJhbnNmb3JtOiAndHJhbnNsYXRlWCgtNTAlKScsXG4gICAgICAgIG1hcmdpbkJvdHRvbTogJzJweCcsXG4gICAgICAgIGJvdHRvbTogJzEwMCUnLFxuICAgICAgICB3aGl0ZVNwYWNlOiAnbm93cmFwJyxcbiAgICAgICAgY29sb3I6ICcjZmZmJyxcbiAgICAgICAgYm94U2hhZG93OiAnMCAxcHggMnB4IHJnYmEoMCwwLDAsLjEpJyxcbiAgICAgICAgYm9yZGVyUmFkaXVzOiAnM3B4JyxcbiAgICAgICAgcGFkZGluZzogJzNweCA1cHgnLFxuICAgICAgICBwb2ludGVyRXZlbnRzOiAnbm9uZScsXG4gICAgICB9XG4gICAgfSlcblxuICAgIGNvbnN0IGFuY2hvciA9IGNyZWF0ZUVsZW1lbnQoJ3NwYW4nLCB7XG4gICAgICBzdHlsZXM6IHtcbiAgICAgICAgcG9zaXRpb246ICdhYnNvbHV0ZScsXG4gICAgICAgIHRvcDogJy0ycHgnLFxuICAgICAgICBsZWZ0OiAnLTJweCcsXG4gICAgICAgIHdpZHRoOiAnNnB4JyxcbiAgICAgICAgaGVpZ2h0OiAnNnB4JyxcbiAgICAgICAgcG9pbnRlckV2ZW50czogJ2F1dG8nLFxuICAgICAgICBwb2ludGVyOiAnY3Vyc29yJyxcbiAgICAgIH0sXG4gICAgICBjaGlsZHJlbjogW3VzZXJUaXBdLFxuICAgICAgb246IHtcbiAgICAgICAgbW91c2VlbnRlcigpIHtcbiAgICAgICAgICB1c2VyVGlwLnN0eWxlLmRpc3BsYXkgPSAnYmxvY2snXG4gICAgICAgIH0sXG4gICAgICAgIG1vdXNlbGVhdmUoKSB7XG4gICAgICAgICAgdXNlclRpcC5zdHlsZS5kaXNwbGF5ID0gJ25vbmUnXG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9KVxuICAgIGNoaWxkID0gY3JlYXRlRWxlbWVudCgnc3BhbicsIHtcbiAgICAgIHN0eWxlczoge1xuICAgICAgICBwb3NpdGlvbjogJ2Fic29sdXRlJyxcbiAgICAgIH0sXG4gICAgICBjaGlsZHJlbjogW1xuICAgICAgICBhbmNob3JcbiAgICAgIF1cbiAgICB9KVxuICAgIHRoaXMudG9vbHRpcHMuYXBwZW5kKGNoaWxkKVxuICAgIHJldHVybiB7XG4gICAgICBjdXJzb3I6IGNoaWxkLFxuICAgICAgYW5jaG9yLFxuICAgICAgdXNlclRpcFxuICAgIH1cbiAgfVxufVxuIl19

package/src/collab/_api.ts

@@ -1 +0,0 @@
-export * from './collaborate-cursor'

package/src/collab/collaborate-cursor.ts

@@ -1,225 +0,0 @@
-import { Inject, Injectable } from '@tanbo/di'
-import {
-  createElement,
-  EDITABLE_DOCUMENT,
-  EDITOR_CONTAINER,
-  getLayoutRectByRange,
-  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 {
-  color: string
-  username: string
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export interface RemoteSelectionCursor {
-  cursor: HTMLElement
-  anchor: HTMLElement
-  userTip: HTMLElement
-}
-
-@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 tooltips = createElement('div', {
-    styles: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      fontSize: '12px',
-      zIndex: 10
-    }
-  })
-
-  private onRectsChange = new Subject<SelectionRect[]>()
-
-  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
-              @Inject(EDITABLE_DOCUMENT) private document: Document,
-              private nativeSelection: SelectionBridge,
-              private selection: Selection) {
-    container.prepend(this.canvas, this.tooltips)
-    this.onRectsChange.subscribe(rects => {
-      for (const rect of rects) {
-        this.context.fillStyle = rect.color
-        this.context.beginPath()
-        this.context.rect(rect.x, rect.y, rect.width, rect.height)
-        this.context.fill()
-        this.context.closePath()
-      }
-    })
-  }
-
-  draw(paths: RemoteSelection[]) {
-    const containerRect = this.container.getBoundingClientRect()
-    this.canvas.width = containerRect.width
-    this.canvas.height = containerRect.height
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-
-    const users: SelectionRect[] = []
-
-
-    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: SelectionRect[] = []
-          for (let i = rects.length - 1; i >= 0; i--) {
-            const rect = rects[i]
-            selectionRects.push({
-              color: item.color,
-              username: item.username,
-              x: rect.x - containerRect.x,
-              y: rect.y - containerRect.y,
-              width: rect.width,
-              height: rect.height,
-            })
-          }
-          this.onRectsChange.next(selectionRects)
-
-          const cursorRange = nativeRange.cloneRange()
-          cursorRange.collapse(!item.paths.focusEnd)
-
-          const cursorRect = getLayoutRectByRange(cursorRange)
-
-          users.push({
-            username: item.username,
-            color: item.color,
-            x: cursorRect.x - containerRect.x,
-            y: cursorRect.y - containerRect.y,
-            width: 2,
-            height: cursorRect.height
-          })
-        }
-      }
-    })
-    this.drawUserCursor(users)
-  }
-
-  private drawUserCursor(rects: SelectionRect[]) {
-    for (let i = 0; i < rects.length; i++) {
-      const rect = rects[i]
-      const {cursor, userTip, anchor} = this.getUserCursor(i)
-      Object.assign(cursor.style, {
-        left: rect.x + 'px',
-        top: rect.y + 'px',
-        width: rect.width + 'px',
-        height: rect.height + 'px',
-        background: rect.color,
-        display: 'block'
-      })
-      anchor.style.background = rect.color
-      userTip.innerText = rect.username
-      userTip.style.background = rect.color
-    }
-
-    for (let i = rects.length; i < this.tooltips.children.length; i++) {
-      this.tooltips.removeChild(this.tooltips.children[i])
-    }
-  }
-
-  private getUserCursor(index: number): RemoteSelectionCursor {
-    let child: HTMLElement = this.tooltips.children[index] as HTMLElement
-    if (child) {
-      const anchor = child.children[0] as HTMLElement
-      return {
-        cursor: child,
-        anchor,
-        userTip: anchor.children[0] as HTMLElement
-      }
-    }
-    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() {
-          userTip.style.display = 'block'
-        },
-        mouseleave() {
-          userTip.style.display = 'none'
-        }
-      }
-    })
-    child = createElement('span', {
-      styles: {
-        position: 'absolute',
-      },
-      children: [
-        anchor
-      ]
-    })
-    this.tooltips.append(child)
-    return {
-      cursor: child,
-      anchor,
-      userTip
-    }
-  }
-}