@textbus/collaborate 2.0.0-beta.7 → 2.0.0

package/src/collaborate.ts

@@ -1,42 +1,100 @@
-import { Injectable } from '@tanbo/di'
-import { merge, microTask, Observable, Subject, Subscription } from '@tanbo/stream'
+import { Inject, Injectable } from '@tanbo/di'
+import { delay, filter, map, Observable, Subject, Subscription } from '@tanbo/stream'
 import {
-  RootComponentRef,
-  Starter,
-  Translator,
+  ChangeOrigin,
+  ComponentInstance,
+  ContentType, Controller,
+  Formats,
+  History, HISTORY_STACK_SIZE,
+  makeError,
   Registry,
+  RootComponentRef,
+  Scheduler,
   Selection,
   SelectionPaths,
-  History, Renderer, Slot, ComponentInstance, makeError, Formats
+  Slot,
+  Starter,
+  Translator
 } from '@textbus/core'
 import {
+  Array as YArray,
   Doc as YDoc,
   Map as YMap,
+  RelativePosition,
   Text as YText,
-  Array as YArray,
+  Transaction,
   UndoManager,
-  Transaction
+  createAbsolutePositionFromRelativePosition,
+  createRelativePositionFromTypeIndex
 } from 'yjs'
 
 import { CollaborateCursor, RemoteSelection } from './collaborate-cursor'
+import { createUnknownComponent } from './unknown.component'
 
 const collaborateErrorFn = makeError('Collaborate')
 
+interface CursorPosition {
+  anchor: RelativePosition
+  focus: RelativePosition
+}
+
+class ContentMap {
+  private slotAndYTextMap = new WeakMap<Slot, YText>()
+  private yTextAndSLotMap = new WeakMap<YText, Slot>()
+
+  set(key: Slot, value: YText): void
+  set(key: YText, value: Slot): void
+  set(key: any, value: any) {
+    if (key instanceof Slot) {
+      this.slotAndYTextMap.set(key, value)
+      this.yTextAndSLotMap.set(value, key)
+    } else {
+      this.slotAndYTextMap.set(value, key)
+      this.yTextAndSLotMap.set(key, value)
+    }
+  }
+
+  get(key: Slot): YText | null
+  get(key: YText): Slot | null
+  get(key: any) {
+    if (key instanceof Slot) {
+      return this.slotAndYTextMap.get(key) || null
+    }
+    return this.yTextAndSLotMap.get(key) || null
+  }
+
+  delete(key: Slot | YText) {
+    if (key instanceof Slot) {
+      const v = this.slotAndYTextMap.get(key)
+      this.slotAndYTextMap.delete(key)
+      if (v) {
+        this.yTextAndSLotMap.delete(v)
+      }
+    } else {
+      const v = this.yTextAndSLotMap.get(key)
+      this.yTextAndSLotMap.delete(key)
+      if (v) {
+        this.slotAndYTextMap.delete(v)
+      }
+    }
+  }
+}
+
 @Injectable()
 export class Collaborate implements History {
   onSelectionChange: Observable<SelectionPaths>
   yDoc = new YDoc()
   onBack: Observable<void>
   onForward: Observable<void>
-  onChange: Observable<any>
+  onChange: Observable<void>
   onPush: Observable<void>
 
   get canBack() {
-    return this.manager?.canUndo()
+    return this.manager?.canUndo() || false
   }
 
   get canForward() {
-    return this.manager?.canRedo()
+    return this.manager?.canRedo() || false
   }
 
   private backEvent = new Subject<void>()
@@ -44,7 +102,7 @@ export class Collaborate implements History {
   private changeEvent = new Subject<void>()
   private pushEvent = new Subject<void>()
 
-  private manager!: UndoManager
+  private manager: UndoManager | null = null
 
   private subscriptions: Subscription[] = []
   private updateFromRemote = false
@@ -55,87 +113,179 @@ export class Collaborate implements History {
   private componentStateSyncCaches = new WeakMap<ComponentInstance, () => void>()
 
   private selectionChangeEvent = new Subject<SelectionPaths>()
+  private contentMap = new ContentMap()
 
   private updateRemoteActions: Array<() => void> = []
 
-  constructor(private rootComponentRef: RootComponentRef,
+  constructor(@Inject(HISTORY_STACK_SIZE) private stackSize: number,
+              private rootComponentRef: RootComponentRef,
               private collaborateCursor: CollaborateCursor,
+              private controller: Controller,
+              private scheduler: Scheduler,
               private translator: Translator,
-              private renderer: Renderer,
               private registry: Registry,
               private selection: Selection,
               private starter: Starter) {
-    this.onSelectionChange = this.selectionChangeEvent.asObservable()
+    this.onSelectionChange = this.selectionChangeEvent.asObservable().pipe(delay())
     this.onBack = this.backEvent.asObservable()
     this.onForward = this.forwardEvent.asObservable()
     this.onChange = this.changeEvent.asObservable()
     this.onPush = this.pushEvent.asObservable()
   }
 
-  setup() {
+  listen() {
+    const root = this.yDoc.getMap('RootComponent')
+    const rootComponent = this.rootComponentRef.component!
+    this.manager = new UndoManager(root, {
+      trackedOrigins: new Set<any>([this.yDoc])
+    })
+    const cursorKey = 'cursor-position'
+    this.manager.on('stack-item-added', event => {
+      event.stackItem.meta.set(cursorKey, this.getRelativeCursorLocation())
+      if (this.manager!.undoStack.length > this.stackSize) {
+        this.manager!.undoStack.shift()
+      }
+      if (event.origin === this.yDoc) {
+        this.pushEvent.next()
+      }
+      this.changeEvent.next()
+    })
+    this.manager.on('stack-item-popped', event => {
+      const position = event.stackItem.meta.get(cursorKey) as CursorPosition
+      if (position) {
+        this.restoreCursorLocation(position)
+      }
+    })
     this.subscriptions.push(
-      this.starter.onReady.subscribe(() => {
-        this.listen2()
-      }),
       this.selection.onChange.subscribe(() => {
         const paths = this.selection.getPaths()
         this.selectionChangeEvent.next(paths)
+      }),
+      this.scheduler.onDocChanged.pipe(
+        map(item => {
+          return item.filter(i => {
+            return i.from !== ChangeOrigin.Remote
+          })
+        }),
+        filter(item => {
+          return item.length
+        })
+      ).subscribe(() => {
+        this.yDoc.transact(() => {
+          this.updateRemoteActions.forEach(fn => {
+            fn()
+          })
+          this.updateRemoteActions = []
+        }, this.yDoc)
       })
     )
+    this.syncRootComponent(root, rootComponent)
   }
 
   updateRemoteSelection(paths: RemoteSelection[]) {
     this.collaborateCursor.draw(paths)
   }
 
-  listen() {
-    //
-  }
-
   back() {
     if (this.canBack) {
-      this.manager.undo()
+      this.manager?.undo()
+      this.backEvent.next()
     }
   }
 
   forward() {
     if (this.canForward) {
-      this.manager.redo()
+      this.manager?.redo()
+      this.forwardEvent.next()
     }
   }
 
+  clear() {
+    this.manager?.clear()
+    this.changeEvent.next()
+  }
+
   destroy() {
     this.subscriptions.forEach(i => i.unsubscribe())
+    this.collaborateCursor.destroy()
+    this.manager?.destroy()
   }
 
-  private listen2() {
-    const root = this.yDoc.getText('content')
-    const rootComponent = this.rootComponentRef.component!
-    this.manager = new UndoManager(root, {
-      trackedOrigins: new Set<any>([this.yDoc])
-    })
-    this.syncContent(root, rootComponent.slots.get(0)!)
-
-    this.subscriptions.push(
-      merge(
-        rootComponent.changeMarker.onForceChange,
-        rootComponent.changeMarker.onChange
-      ).pipe(
-        microTask()
-      ).subscribe(() => {
-        this.yDoc.transact(() => {
-          this.updateRemoteActions.forEach(fn => {
-            fn()
-          })
-          this.updateRemoteActions = []
-        }, this.yDoc)
-        this.renderer.render()
-        this.selection.restore()
+  private syncRootComponent(root: YMap<any>, rootComponent: ComponentInstance) {
+    let slots = root.get('slots') as YArray<YMap<any>>
+    if (!slots) {
+      slots = new YArray()
+      rootComponent.slots.toArray().forEach(i => {
+        const sharedSlot = this.createSharedSlotBySlot(i)
+        slots.push([sharedSlot])
       })
-    )
+      this.yDoc.transact(() => {
+        root.set('state', rootComponent.state)
+        root.set('slots', slots)
+      })
+    } else if (slots.length === 0) {
+      rootComponent.updateState(() => {
+        return root.get('state')
+      })
+      this.yDoc.transact(() => {
+        rootComponent.slots.toArray().forEach(i => {
+          const sharedSlot = this.createSharedSlotBySlot(i)
+          slots.push([sharedSlot])
+        })
+      })
+    } else {
+      rootComponent.updateState(() => {
+        return root.get('state')
+      })
+      rootComponent.slots.clean()
+      slots.forEach(sharedSlot => {
+        const slot = this.createSlotBySharedSlot(sharedSlot)
+        this.syncContent(sharedSlot.get('content'), slot)
+        this.syncSlot(sharedSlot, slot)
+        rootComponent.slots.insert(slot)
+      })
+    }
+    this.syncComponent(root, rootComponent)
+    this.syncSlots(slots, rootComponent)
+  }
+
+  private restoreCursorLocation(position: CursorPosition) {
+    const anchorPosition = createAbsolutePositionFromRelativePosition(position.anchor, this.yDoc)
+    const focusPosition = createAbsolutePositionFromRelativePosition(position.focus, this.yDoc)
+    if (anchorPosition && focusPosition) {
+      const focusSlot = this.contentMap.get(focusPosition.type as YText)
+      const anchorSlot = this.contentMap.get(anchorPosition.type as YText)
+      if (focusSlot && anchorSlot) {
+        this.selection.setBaseAndExtent(anchorSlot, anchorPosition.index, focusSlot, focusPosition.index)
+        return
+      }
+    }
+    this.selection.unSelect()
+  }
+
+  private getRelativeCursorLocation(): CursorPosition | null {
+    const { anchorSlot, anchorOffset, focusSlot, focusOffset } = this.selection
+    if (anchorSlot) {
+      const anchorYText = this.contentMap.get(anchorSlot)
+      if (anchorYText) {
+        const anchorPosition = createRelativePositionFromTypeIndex(anchorYText, anchorOffset!)
+        if (focusSlot) {
+          const focusYText = this.contentMap.get(focusSlot)
+          if (focusYText) {
+            const focusPosition = createRelativePositionFromTypeIndex(focusYText, focusOffset!)
+            return {
+              focus: focusPosition,
+              anchor: anchorPosition
+            }
+          }
+        }
+      }
+    }
+    return null
   }
 
   private syncContent(content: YText, slot: Slot) {
+    this.contentMap.set(slot, content)
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
         slot.retain(0)
@@ -146,6 +296,7 @@ export class Collaborate implements History {
               if (formats.length) {
                 slot.retain(action.retain!, formats)
               }
+              slot.retain(slot.index + action.retain)
             } else {
               slot.retain(action.retain)
             }
@@ -157,17 +308,18 @@ export class Collaborate implements History {
               slot.insert(action.insert, makeFormats(this.registry, action.attributes))
             } else {
               const sharedComponent = action.insert as YMap<any>
-              const component = this.createComponentBySharedComponent(sharedComponent)
+              const canInsertInlineComponent = slot.schema.includes(ContentType.InlineComponent)
+              const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent)
               this.syncSlots(sharedComponent.get('slots'), component)
               this.syncComponent(sharedComponent, component)
               slot.insert(component)
             }
             if (this.selection.isSelected) {
-              if (slot === this.selection.startSlot && this.selection.startOffset! >= index) {
-                this.selection.setStart(slot, this.selection.startOffset! + length)
+              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! > index) {
+                this.selection.setAnchor(slot, this.selection.anchorOffset! + length)
               }
-              if (slot === this.selection.endSlot && this.selection.endOffset! >= index) {
-                this.selection.setEnd(slot, this.selection.endOffset! + length)
+              if (slot === this.selection.focusSlot && this.selection.focusOffset! > index) {
+                this.selection.setFocus(slot, this.selection.focusOffset! + length)
               }
             }
           } else if (action.delete) {
@@ -175,16 +327,20 @@ export class Collaborate implements History {
             slot.retain(slot.index)
             slot.delete(action.delete)
             if (this.selection.isSelected) {
-              if (slot === this.selection.startSlot && this.selection.startOffset! >= index) {
-                this.selection.setStart(slot, this.selection.startOffset! - action.delete)
+              if (slot === this.selection.anchorSlot && this.selection.anchorOffset! >= index) {
+                this.selection.setAnchor(slot, this.selection.startOffset! - action.delete)
               }
-              if (slot === this.selection.endSlot && this.selection.endOffset! >= index) {
-                this.selection.setEnd(slot, this.selection.endOffset! - action.delete)
+              if (slot === this.selection.focusSlot && this.selection.focusOffset! >= index) {
+                this.selection.setFocus(slot, this.selection.focusOffset! - action.delete)
               }
             }
           } else if (action.attributes) {
             slot.updateState(draft => {
-              Object.assign(draft, action.attributes)
+              if (typeof draft === 'object' && draft !== null) {
+                Object.assign(draft, action.attributes)
+              } else {
+                return action.attributes
+              }
             })
           }
         })
@@ -219,23 +375,22 @@ export class Collaborate implements History {
             const isEmpty = delta.length === 1 && delta[0].insert === Slot.emptyPlaceholder
             if (typeof action.content === 'string') {
               length = action.content.length
-              content.insert(offset, action.content)
+              content.insert(offset, action.content, action.formats || {})
             } else {
               length = 1
-              const component = slot.getContentAtIndex(offset) as ComponentInstance
-              const sharedComponent = this.createSharedComponentByComponent(component)
+              const sharedComponent = this.createSharedComponentByComponent(action.ref as ComponentInstance)
               content.insertEmbed(offset, sharedComponent)
             }
-            if (action.formats) {
-              content.format(offset, length, action.formats)
-            }
+
             if (isEmpty && offset === 0) {
               content.delete(content.length - 1, 1)
             }
             offset += length
           } else if (action.type === 'delete') {
             const delta = content.toDelta()
-            content.delete(offset, action.count)
+            if (content.length) {
+              content.delete(offset, action.count)
+            }
             if (content.length === 0) {
               content.insert(0, '\n', delta[0]?.attributes)
             }
@@ -243,6 +398,12 @@ export class Collaborate implements History {
         }
       })
     })
+
+    sub.add(slot.onChildComponentRemove.subscribe(components => {
+      components.forEach(c => {
+        this.cleanSubscriptionsByComponent(c)
+      })
+    }))
     this.contentSyncCaches.set(slot, () => {
       content.unobserve(syncRemote)
       sub.unsubscribe()
@@ -256,7 +417,11 @@ export class Collaborate implements History {
           if (key === 'state') {
             const state = (ev.target as YMap<any>).get('state')
             slot.updateState(draft => {
-              Object.assign(draft, state)
+              if (typeof draft === 'object' && draft !== null) {
+                Object.assign(draft, state)
+              } else {
+                return state
+              }
             })
           }
         })
@@ -281,18 +446,21 @@ export class Collaborate implements History {
     const slots = component.slots
     const syncRemote = (ev, tr) => {
       this.runRemoteUpdate(tr, () => {
+        let index = 0
         ev.delta.forEach(action => {
           if (Reflect.has(action, 'retain')) {
-            slots.retain(action.retain!)
+            index += action.retain
+            slots.retain(index)
           } else if (action.insert) {
             (action.insert as Array<YMap<any>>).forEach(item => {
               const slot = this.createSlotBySharedSlot(item)
               slots.insert(slot)
               this.syncContent(item.get('content'), slot)
               this.syncSlot(item, slot)
+              index++
             })
           } else if (action.delete) {
-            slots.retain(slots.index)
+            slots.retain(index)
             slots.delete(action.delete)
           }
         })
@@ -308,20 +476,22 @@ export class Collaborate implements History {
           if (action.type === 'retain') {
             index = action.offset
           } else if (action.type === 'insertSlot') {
-            const slot = slots.get(index)!
-            const sharedSlot = this.createSharedSlotBySlot(slot)
+            const sharedSlot = this.createSharedSlotBySlot(action.ref)
             remoteSlots.insert(index, [sharedSlot])
             index++
           } else if (action.type === 'delete') {
-            slots.slice(index, index + action.count).forEach(slot => {
-              this.cleanSubscriptionsBySlot(slot)
-            })
             remoteSlots.delete(index, action.count)
           }
         })
       })
     })
 
+    sub.add(slots.onChildSlotRemove.subscribe(slots => {
+      slots.forEach(slot => {
+        this.cleanSubscriptionsBySlot(slot)
+      })
+    }))
+
     this.slotsSyncCaches.set(component, () => {
       remoteSlots.unobserve(syncRemote)
       sub.unsubscribe()
@@ -335,7 +505,11 @@ export class Collaborate implements History {
           if (key === 'state') {
             const state = (ev.target as YMap<any>).get('state')
             component.updateState(draft => {
-              Object.assign(draft, state)
+              if (typeof draft === 'object' && draft !== null) {
+                Object.assign(draft, state)
+              } else {
+                return state
+              }
             })
           }
         })
@@ -355,7 +529,7 @@ export class Collaborate implements History {
   }
 
   private runLocalUpdate(fn: () => void) {
-    if (this.updateFromRemote) {
+    if (this.updateFromRemote || this.controller.readonly) {
       return
     }
     this.updateRemoteActions.push(fn)
@@ -366,7 +540,11 @@ export class Collaborate implements History {
       return
     }
     this.updateFromRemote = true
-    fn()
+    if (tr.origin === this.manager) {
+      this.scheduler.historyApplyTransact(fn)
+    } else {
+      this.scheduler.remoteUpdateTransact(fn)
+    }
     this.updateFromRemote = false
   }
 
@@ -414,7 +592,7 @@ export class Collaborate implements History {
     return sharedSlot
   }
 
-  private createComponentBySharedComponent(yMap: YMap<any>): ComponentInstance {
+  private createComponentBySharedComponent(yMap: YMap<any>, canInsertInlineComponent: boolean): ComponentInstance {
     const sharedSlots = yMap.get('slots') as YArray<YMap<any>>
     const slots: Slot[] = []
     sharedSlots.forEach(sharedSlot => {
@@ -438,7 +616,7 @@ export class Collaborate implements History {
       })
       return instance
     }
-    throw collaborateErrorFn(`cannot find component factory \`${name}\`.`)
+    return createUnknownComponent(name, canInsertInlineComponent).createInstance(this.starter)
   }
 
   private createSlotBySharedSlot(sharedSlot: YMap<any>): Slot {
@@ -458,7 +636,8 @@ export class Collaborate implements History {
           slot.insert(action.insert, makeFormats(this.registry, action.attributes))
         } else {
           const sharedComponent = action.insert as YMap<any>
-          const component = this.createComponentBySharedComponent(sharedComponent)
+          const canInsertInlineComponent = slot.schema.includes(ContentType.InlineComponent)
+          const component = this.createComponentBySharedComponent(sharedComponent, canInsertInlineComponent)
           slot.insert(component)
           this.syncSlots(sharedComponent.get('slots'), component)
           this.syncComponent(sharedComponent, component)
@@ -471,6 +650,7 @@ export class Collaborate implements History {
   }
 
   private cleanSubscriptionsBySlot(slot: Slot) {
+    this.contentMap.delete(slot);
     [this.contentSyncCaches.get(slot), this.slotStateSyncCaches.get(slot)].forEach(fn => {
       if (fn) {
         fn()
@@ -498,7 +678,7 @@ export class Collaborate implements History {
 function makeFormats(registry: Registry, attrs?: any) {
   const formats: Formats = []
   if (attrs) {
-    Object.keys(attrs).map(key => {
+    Object.keys(attrs).forEach(key => {
       const formatter = registry.getFormatter(key)
       if (formatter) {
         formats.push([formatter, attrs[key]])

package/src/public-api.ts

@@ -1,2 +1,18 @@
+import { History, Module } from '@textbus/core'
+
+import { Collaborate } from './collaborate'
+import { CollaborateCursor } from './collaborate-cursor'
+
 export * from './collaborate'
 export * from './collaborate-cursor'
+
+export const collaborateModule: Module = {
+  providers: [
+    Collaborate,
+    CollaborateCursor,
+    {
+      provide: History,
+      useClass: Collaborate
+    }
+  ]
+}

package/src/unknown.component.ts

@@ -0,0 +1,22 @@
+import { ContentType, defineComponent, VElement } from '@textbus/core'
+
+export function createUnknownComponent(factoryName: string, canInsertInlineComponent: boolean) {
+  const unknownComponent = defineComponent({
+    type: canInsertInlineComponent ? ContentType.InlineComponent : ContentType.BlockComponent,
+    name: 'UnknownComponent',
+    setup() {
+      console.error(`cannot find component factory \`${factoryName}\`.`)
+      return {
+        render() {
+          return VElement.createElement('textbus-unknown-component', {
+            style: {
+              display: canInsertInlineComponent ? 'inline' : 'block',
+              color: '#f00'
+            }
+          }, unknownComponent.name)
+        }
+      }
+    }
+  })
+  return unknownComponent
+}

package/tsconfig-build.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "declaration": true,
-    "useDefineForClassFields": true,
+    "useDefineForClassFields": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "allowSyntheticDefaultImports": true,