implemented multi-client remote cursor

2 files changed, 46 insertions, 36 deletions

diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index a3a596c37..89edd1397 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -322,7 +322,7 @@ export class CollectionFreeFormView extends CollectionViewBase {
         return (
             <div className={`collectionfreeformview${this.isAnnotationOverlay ? "-overlay" : "-container"}`}
                 onPointerDown={this.onPointerDown}
-                onPointerMove={(e) => super.setCursorPosition(this.props.ScreenToLocalTransform().transformPoint(e.screenX, e.screenY))}
+                onPointerMove={(e) => super.setCursorPosition(this.getTransform().transformPoint(e.clientX, e.clientY))}
                 onWheel={this.onPointerWheel}
                 onDrop={this.onDrop.bind(this)}
                 onDragOver={this.onDragOver}
@@ -330,20 +330,6 @@ export class CollectionFreeFormView extends CollectionViewBase {
                 style={{ borderWidth: `${COLLECTION_BORDER_WIDTH}px`, }}
                 tabIndex={0}
                 ref={this.createDropTarget}>
-                {super.getCursors().map(entry => {
-                    let point = entry.Data[1]
-                    return (
-                        <div
-                            style={{
-                                position: 'absolute',
-                                left: point[0],
-                                top: point[1],
-                                borderRadius: "50%",
-                                background: "pink"
-                            }}
-                        />
-                    );
-                })}
                 <div className="collectionfreeformview"
                     style={{ transformOrigin: "left top", transform: `translate(${dx}px, ${dy}px) scale(${this.zoomScaling}, ${this.zoomScaling}) translate(${panx}px, ${pany}px)` }}
                     ref={this._canvasRef}>
@@ -351,11 +337,33 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     <InkingCanvas getScreenTransform={this.getTransform} Document={this.props.Document} />
                     <PreviewCursor container={this} addLiveTextDocument={this.addLiveTextBox} getTransform={this.getTransform} />
                     {this.views}
+                    {super.getCursors().map(entry => {
+                        if (entry.Data.length > 0) {
+                            let point = entry.Data[1]
+                            return (
+                                <div
+                                    key={entry.Data[0]}
+                                    style={{
+                                        position: 'absolute',
+                                        transform: `translate(${point[0] - 10}px, ${point[1] - 10}px)`,
+                                        zIndex: 10000,
+                                        transformOrigin: 'center center',
+                                        width: "20px",
+                                        height: "20px",
+                                        borderRadius: "50%",
+                                        background: "pink",
+                                        border: "2px solid black"
+                                    }}
+                                />
+                            );
+                        }
+                    })}
                 </div>
                 <MarqueeView container={this} activeDocuments={this.getActiveDocuments} selectDocuments={this.selectDocuments}
                     addDocument={this.props.addDocument} removeDocument={this.props.removeDocument}
                     getMarqueeTransform={this.getMarqueeTransform} getTransform={this.getTransform} />
                 {this.overlayView}
+
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 81d7f4077..02ee49a38 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -13,8 +13,8 @@ import { Transform } from "../../util/Transform";
 import { CollectionView } from "./CollectionView";
 import { RouteStore } from "../../../server/RouteStore";
 import { TupleField } from "../../../fields/TupleField";
-import { Server } from "mongodb";
 import { DashUserModel } from "../../../server/authentication/models/user_model";
+import { UserUtils } from "../../../server/authentication/models/user_utils";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -34,10 +34,9 @@ export interface SubCollectionViewProps extends CollectionViewProps {
     addDocument: (doc: Document) => void;
     removeDocument: (doc: Document) => boolean;
     CollectionView: CollectionView;
-    currentUser?: DashUserModel;
 }
 
-export type CursorEntry = TupleField<DashUserModel, [number, number]>;
+export type CursorEntry = TupleField<string, [number, number]>;
 
 export class CollectionViewBase extends React.Component<SubCollectionViewProps> {
     private dropDisposer?: DragManager.DragDropDisposer;
@@ -50,31 +49,34 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
         }
     }
 
+    @action
     protected setCursorPosition(position: [number, number]) {
-        let user = this.props.currentUser;
-        if (user && user.id) {
-            let ind;
-            let doc = this.props.Document;
-            let cursors = doc.GetOrCreate<ListField<CursorEntry>>(KeyStore.Cursors, ListField, false).Data;
-            let entry = new TupleField<DashUserModel, [number, number]>([user.id, position]);
-            // if ((ind = cursors.findIndex(entry => entry.Data[0] === user.id)) > -1) {
-            //     cursors[ind] = entry;
-            // } else {
-            //     cursors.push(entry);
-            // }
+        let ind;
+        let doc = this.props.Document;
+        let id = UserUtils.currentUserId;
+        if (id) {
+            doc.GetOrCreateAsync<ListField<CursorEntry>>(KeyStore.Cursors, ListField, field => {
+                let cursors = field.Data;
+                if (cursors.length > 0 && (ind = cursors.findIndex(entry => entry.Data[0] === id)) > -1) {
+                    cursors[ind].Data[1] = position;
+                } else {
+                    let entry = new TupleField<string, [number, number]>([id, position]);
+                    cursors.push(entry);
+                }
+            })
+
+
         }
     }
 
     protected getCursors(): CursorEntry[] {
-        let user = this.props.currentUser;
-        if (user && user.id) {
-            let doc = this.props.Document;
-            // return doc.GetList<CursorEntry>(KeyStore.Cursors, []).filter(entry => entry.Data[0] !== user.id);
-        }
-        return [];
+        let doc = this.props.Document;
+        let id = UserUtils.currentUserId;
+        let cursors = doc.GetList<CursorEntry>(KeyStore.Cursors, []);
+        let notMe = cursors.filter(entry => entry.Data[0] !== id);
+        return id ? notMe : [];
     }
 
-
     @undoBatch
     @action
     protected drop(e: Event, de: DragManager.DropEvent) {