From 34f3b837334eb3d4a9416a8397c88cbd1ca421e0 Mon Sep 17 00:00:00 2001
From: Sam Wilkins <abdullah_ahmed@brown.edu>
Date: Mon, 18 Mar 2019 01:43:50 -0400
Subject: flashier remote cursors

---
 .../views/collections/CollectionFreeFormView.tsx   | 75 +++++++++++++++++++---
 1 file changed, 66 insertions(+), 9 deletions(-)

(limited to 'src/client/views/collections/CollectionFreeFormView.tsx')

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>
                             );
                         }
                     })}
-- 
cgit v1.2.3-70-g09d2