@textbus/collaborate 2.0.0-beta.9 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@textbus/collaborate",
-  "version": "2.0.0-beta.9",
+  "version": "2.0.0",
   "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",
@@ -25,13 +25,13 @@
     "typescript editor"
   ],
   "dependencies": {
-    "@tanbo/di": "^1.1.1",
-    "@tanbo/stream": "^1.0.1",
-    "@textbus/browser": "^2.0.0-beta.9",
-    "@textbus/core": "^2.0.0-beta.9",
+    "@tanbo/di": "^1.1.3",
+    "@tanbo/stream": "^1.1.5",
+    "@textbus/browser": "^2.0.0",
+    "@textbus/core": "^2.0.0",
     "reflect-metadata": "^0.1.13",
     "y-protocols": "^1.0.5",
-    "yjs": "^13.5.27"
+    "yjs": "^13.5.39"
   },
   "author": {
     "name": "Tanbo",
@@ -44,5 +44,5 @@
   "bugs": {
     "url": "https://github.com/textbus/textbus.git/issues"
   },
-  "gitHead": "471125b715d9092979574a89d5ffd15ca51c1498"
+  "gitHead": "df5108327f1edd1bbf662bb8da193c22b659abe9"
 }

package/src/collaborate-cursor.ts

@@ -1,13 +1,13 @@
 import { Inject, Injectable, Optional } from '@tanbo/di'
 import {
   createElement,
-  EDITABLE_DOCUMENT,
-  EDITOR_CONTAINER,
+  VIEW_CONTAINER,
   getLayoutRectByRange,
-  SelectionBridge
+  SelectionBridge,
+  getBoundingClientRect
 } from '@textbus/browser'
-import { Selection, SelectionPaths, Range as TBRange } from '@textbus/core'
-import { Subject } from '@tanbo/stream'
+import { Selection, SelectionPaths, AbstractSelection, Scheduler, Rect } from '@textbus/core'
+import { fromEvent, Subject, Subscription } from '@tanbo/stream'
 
 export interface RemoteSelection {
   color: string
@@ -15,13 +15,6 @@ export interface RemoteSelection {
   paths: SelectionPaths
 }
 
-export interface Rect {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
 export interface SelectionRect extends Rect {
   color: string
   username: string
@@ -33,12 +26,33 @@ export interface RemoteSelectionCursor {
   userTip: HTMLElement
 }
 
-export abstract class CollaborateCursorAwarenessDelegate {
-  abstract getRects(range: TBRange, nativeRange: Range): false | Rect[]
+export abstract class CollaborateSelectionAwarenessDelegate {
+  abstract getRects(abstractSelection: AbstractSelection, nativeRange: Range): false | Rect[]
 }
 
 @Injectable()
 export class CollaborateCursor {
+  private host = createElement('div', {
+    styles: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+      zIndex: 1
+    }
+  })
+  private canvasContainer = createElement('div', {
+    styles: {
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  })
   private canvas = createElement('canvas', {
     styles: {
       position: 'absolute',
@@ -46,8 +60,8 @@ export class CollaborateCursor {
       left: 0,
       top: 0,
       width: '100%',
-      height: '100%',
-      pointerEvents: 'none'
+      height: document.documentElement.clientHeight + 'px',
+      pointerEvents: 'none',
     }
   }) as HTMLCanvasElement
   private context = this.canvas.getContext('2d')!
@@ -66,63 +80,88 @@ export class CollaborateCursor {
 
   private onRectsChange = new Subject<SelectionRect[]>()
 
-  constructor(@Inject(EDITOR_CONTAINER) private container: HTMLElement,
-              @Inject(EDITABLE_DOCUMENT) private document: Document,
-              @Optional() private awarenessDelegate: CollaborateCursorAwarenessDelegate,
+  private subscription = new Subscription()
+  private currentSelection: RemoteSelection[] = []
+
+  constructor(@Inject(VIEW_CONTAINER) private container: HTMLElement,
+              @Optional() private awarenessDelegate: CollaborateSelectionAwarenessDelegate,
               private nativeSelection: SelectionBridge,
+              private scheduler: Scheduler,
               private selection: Selection) {
-    container.prepend(this.canvas, this.tooltips)
-    this.onRectsChange.subscribe(rects => {
+    this.canvasContainer.append(this.canvas)
+    this.host.append(this.canvasContainer, this.tooltips)
+    container.prepend(this.host)
+    this.subscription.add(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.rect(rect.left, rect.top, rect.width, rect.height)
         this.context.fill()
         this.context.closePath()
       }
-    })
+    }), fromEvent(window, 'resize').subscribe(() => {
+      this.canvas.style.height = document.documentElement.clientHeight + 'px'
+      this.refresh()
+    }), this.scheduler.onDocChanged.subscribe(() => {
+      this.refresh()
+    }))
+  }
+
+  refresh() {
+    this.draw(this.currentSelection)
+  }
+
+  destroy() {
+    this.subscription.unsubscribe()
   }
 
   draw(paths: RemoteSelection[]) {
-    const containerRect = this.container.getBoundingClientRect()
-    this.canvas.width = containerRect.width
-    this.canvas.height = containerRect.height
+    this.currentSelection = paths
+    const containerRect = getBoundingClientRect(this.container)
+    this.canvas.style.top = containerRect.top * -1 + 'px'
+    this.canvas.width = this.canvas.offsetWidth
+    this.canvas.height = this.canvas.offsetHeight
     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
+      return i.paths.anchor.length && i.paths.focus.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 anchorPaths = [...item.paths.anchor]
+      const focusPaths = [...item.paths.focus]
+      const anchorOffset = anchorPaths.pop()!
+      const anchorSlot = this.selection.findSlotByPaths(anchorPaths)
+      const focusOffset = focusPaths.pop()!
+      const focusSlot = this.selection.findSlotByPaths(focusPaths)
+      if (!anchorSlot || !focusSlot) {
         return
       }
 
-      const {start, end} = this.nativeSelection.getPositionByRange({
-        startOffset,
-        endOffset,
-        startSlot,
-        endSlot
+      const { focus, anchor } = this.nativeSelection.getPositionByRange({
+        focusOffset,
+        anchorOffset,
+        focusSlot,
+        anchorSlot
       })
-      if (!start || !end) {
+      if (!focus || !anchor) {
         return
       }
-      const nativeRange = this.document.createRange()
-      nativeRange.setStart(start.node, start.offset)
-      nativeRange.setEnd(end.node, end.offset)
+      const nativeRange = document.createRange()
+      nativeRange.setStart(anchor.node, anchor.offset)
+      nativeRange.setEnd(focus.node, focus.offset)
+      if ((anchor.node !== focus.node || anchor.offset !== focus.offset) && nativeRange.collapsed) {
+        nativeRange.setStart(focus.node, focus.offset)
+        nativeRange.setEnd(anchor.node, anchor.offset)
+      }
 
       let rects: Rect[] | DOMRectList | false = false
       if (this.awarenessDelegate) {
         rects = this.awarenessDelegate.getRects({
-          startOffset,
-          endOffset,
-          startSlot,
-          endSlot
+          focusOffset,
+          anchorOffset,
+          focusSlot,
+          anchorSlot
         }, nativeRange)
       }
       if (!rects) {
@@ -134,8 +173,8 @@ export class CollaborateCursor {
         selectionRects.push({
           color: item.color,
           username: item.username,
-          x: rect.x - containerRect.x,
-          y: rect.y - containerRect.y,
+          left: rect.left - containerRect.left,
+          top: rect.top,
           width: rect.width,
           height: rect.height,
         })
@@ -143,18 +182,23 @@ export class CollaborateCursor {
       this.onRectsChange.next(selectionRects)
 
       const cursorRange = nativeRange.cloneRange()
-      cursorRange.collapse(!item.paths.focusEnd)
+      cursorRange.setStart(focus.node, focus.offset)
+      cursorRange.collapse(true)
 
       const cursorRect = getLayoutRectByRange(cursorRange)
 
-      users.push({
+      const rect: SelectionRect = {
         username: item.username,
         color: item.color,
-        x: cursorRect.x - containerRect.x,
-        y: cursorRect.y - containerRect.y,
+        left: cursorRect.left - containerRect.left,
+        top: cursorRect.top - containerRect.top,
         width: 2,
         height: cursorRect.height
-      })
+      }
+      if (rect.left < 0 || rect.top < 0 || rect.left > containerRect.width) {
+        return
+      }
+      users.push(rect)
     })
     this.drawUserCursor(users)
   }
@@ -162,10 +206,10 @@ export class CollaborateCursor {
   private drawUserCursor(rects: SelectionRect[]) {
     for (let i = 0; i < rects.length; i++) {
       const rect = rects[i]
-      const {cursor, userTip, anchor} = this.getUserCursor(i)
+      const { cursor, userTip, anchor } = this.getUserCursor(i)
       Object.assign(cursor.style, {
-        left: rect.x + 'px',
-        top: rect.y + 'px',
+        left: rect.left + 'px',
+        top: rect.top + 'px',
         width: rect.width + 'px',
         height: rect.height + 'px',
         background: rect.color,