flashier remote cursors

6 files changed, 106 insertions, 37 deletions

diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index fd756972b..7942367f5 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -40,7 +40,7 @@ import { faMusic } from '@fortawesome/free-solid-svg-icons';
 import Measure from 'react-measure';
 import { DashUserModel } from '../../server/authentication/models/user_model';
 import { ServerUtils } from '../../server/ServerUtil';
-import { UserUtils } from '../../server/authentication/models/user_utils';
+import { CurrentUserUtils } from '../../server/authentication/models/current_user_utils';
 
 @observer
 export class Main extends React.Component {
@@ -63,7 +63,7 @@ export class Main extends React.Component {
             this.mainDocId = pathname[pathname.length - 1];
         }
 
-        UserUtils.loadCurrentUserId();
+        CurrentUserUtils.loadCurrentUser();
 
         library.add(faFont);
         library.add(faImage);
diff --git a/src/client/views/collections/CollectionFreeFormView.tsx b/src/client/views/collections/CollectionFreeFormView.tsx
index 89edd1397..4a82bdb77 100644
--- a/src/client/views/collections/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/CollectionFreeFormView.tsx
@@ -29,7 +29,10 @@ import { CollectionViewBase } from "./CollectionViewBase";
 import { MarqueeView } from "./MarqueeView";
 import { PreviewCursor } from "./PreviewCursor";
 import React = require("react");
+import { Utils } from "../../../Utils";
 const JsxParser = require('react-jsx-parser').default;//TODO Why does this need to be imported like this?
+import v5 = require("uuid/v5");
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 
 @observer
 export class CollectionFreeFormView extends CollectionViewBase {
@@ -310,6 +313,40 @@ export class CollectionFreeFormView extends CollectionViewBase {
         this.PreviewCursorVisible = false;
     }
 
+    private crosshairs?: HTMLCanvasElement;
+    drawCrosshairs = (backgroundColor: string) => {
+        if (this.crosshairs) {
+            let c = this.crosshairs;
+            let ctx = c.getContext('2d');
+            if (ctx) {
+                ctx.fillStyle = backgroundColor;
+                ctx.fillRect(0, 0, 20, 20);
+
+                ctx.fillStyle = "black";
+                ctx.lineWidth = 0.5;
+
+                ctx.beginPath();
+
+                ctx.moveTo(10, 0);
+                ctx.lineTo(10, 8);
+
+                ctx.moveTo(10, 20);
+                ctx.lineTo(10, 12);
+
+                ctx.moveTo(0, 10);
+                ctx.lineTo(8, 10);
+
+                ctx.moveTo(20, 10);
+                ctx.lineTo(12, 10);
+
+                ctx.stroke();
+
+                // ctx.font = "10px Arial";
+                // ctx.fillText(CurrentUserUtils.email[0].toUpperCase(), 10, 10);
+            }
+        }
+    }
+
     render() {
         let [dx, dy] = [this.centeringShiftX, this.centeringShiftY];
 
@@ -339,22 +376,42 @@ export class CollectionFreeFormView extends CollectionViewBase {
                     {this.views}
                     {super.getCursors().map(entry => {
                         if (entry.Data.length > 0) {
-                            let point = entry.Data[1]
+                            let id = entry.Data[0];
+                            let point = entry.Data[1];
+                            this.drawCrosshairs("#" + v5(id, v5.URL).substring(0, 6).toUpperCase() + "22")
                             return (
                                 <div
-                                    key={entry.Data[0]}
+                                    key={id}
                                     style={{
-                                        position: 'absolute',
+                                        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"
                                     }}
-                                />
+                                >
+                                    <canvas
+                                        ref={(el) => { if (el) this.crosshairs = el }}
+                                        width={20}
+                                        height={20}
+                                        style={{
+                                            position: 'absolute',
+                                            width: "20px",
+                                            height: "20px",
+                                            opacity: 0.5,
+                                            borderRadius: "50%",
+                                            border: "2px solid black"
+                                        }}
+                                    />
+                                    <p
+                                        style={{
+                                            fontSize: 14,
+                                            color: "black",
+                                            // fontStyle: "italic",
+                                            marginLeft: -12,
+                                            marginTop: 4
+                                        }}
+                                    >{CurrentUserUtils.email[0].toUpperCase()}</p>
+                                </div>
                             );
                         }
                     })}
diff --git a/src/client/views/collections/CollectionViewBase.tsx b/src/client/views/collections/CollectionViewBase.tsx
index 02ee49a38..9b5c88d14 100644
--- a/src/client/views/collections/CollectionViewBase.tsx
+++ b/src/client/views/collections/CollectionViewBase.tsx
@@ -14,7 +14,7 @@ import { CollectionView } from "./CollectionView";
 import { RouteStore } from "../../../server/RouteStore";
 import { TupleField } from "../../../fields/TupleField";
 import { DashUserModel } from "../../../server/authentication/models/user_model";
-import { UserUtils } from "../../../server/authentication/models/user_utils";
+import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 
 export interface CollectionViewProps {
     fieldKey: Key;
@@ -53,7 +53,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
     protected setCursorPosition(position: [number, number]) {
         let ind;
         let doc = this.props.Document;
-        let id = UserUtils.currentUserId;
+        let id = CurrentUserUtils.id;
         if (id) {
             doc.GetOrCreateAsync<ListField<CursorEntry>>(KeyStore.Cursors, ListField, field => {
                 let cursors = field.Data;
@@ -71,7 +71,7 @@ export class CollectionViewBase extends React.Component<SubCollectionViewProps>
 
     protected getCursors(): CursorEntry[] {
         let doc = this.props.Document;
-        let id = UserUtils.currentUserId;
+        let id = CurrentUserUtils.id;
         let cursors = doc.GetList<CursorEntry>(KeyStore.Cursors, []);
         let notMe = cursors.filter(entry => entry.Data[0] !== id);
         return id ? notMe : [];
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
new file mode 100644
index 000000000..cc433eb73
--- /dev/null
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -0,0 +1,29 @@
+import { DashUserModel } from "./user_model";
+import * as request from 'request'
+import { RouteStore } from "../../RouteStore";
+import { ServerUtils } from "../../ServerUtil";
+
+export class CurrentUserUtils {
+    private static curr_email: string;
+    private static curr_id: string;
+
+    public static get email() {
+        return CurrentUserUtils.curr_email;
+    }
+
+    public static get id() {
+        return CurrentUserUtils.curr_id;
+    }
+
+    public static loadCurrentUser() {
+        request.get(ServerUtils.prepend(RouteStore.getCurrUser), (error, response, body) => {
+            if (body) {
+                let obj = JSON.parse(body);
+                CurrentUserUtils.curr_id = obj.id as string;
+                CurrentUserUtils.curr_email = obj.email as string;
+            } else {
+                throw new Error("There should be a user! Why does Dash think there isn't one?")
+            }
+        });
+    }
+}
\ No newline at end of file
diff --git a/src/server/authentication/models/user_utils.ts b/src/server/authentication/models/user_utils.ts
deleted file mode 100644
index 1497a4ba4..000000000
--- a/src/server/authentication/models/user_utils.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { DashUserModel } from "./user_model";
-import * as request from 'request'
-import { RouteStore } from "../../RouteStore";
-import { ServerUtils } from "../../ServerUtil";
-
-export class UserUtils {
-    private static current: string;
-
-    public static get currentUserId() {
-        return UserUtils.current;
-    }
-
-    public static loadCurrentUserId() {
-        request.get(ServerUtils.prepend(RouteStore.getCurrUser), (error, response, body) => {
-            if (body) {
-                UserUtils.current = JSON.parse(body) as string;
-            } else {
-                throw new Error("There should be a user! Why does Dash think there isn't one?")
-            }
-        });
-    }
-}
\ No newline at end of file
diff --git a/src/server/index.ts b/src/server/index.ts
index 0512ebf72..6d8dd2d6c 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -151,7 +151,12 @@ addSecureRoute(
 
 addSecureRoute(
     Method.GET,
-    (user, res) => res.send(JSON.stringify(user.id)),
+    (user, res) => {
+        res.send(JSON.stringify({
+            id: user.id,
+            email: user.email
+        }));
+    },
     undefined,
     RouteStore.getCurrUser
 );