diff options
Diffstat (limited to 'src/client/views/collections')
| -rw-r--r-- | src/client/views/collections/CollectionFreeFormView.tsx | 75 | ||||
| -rw-r--r-- | src/client/views/collections/CollectionViewBase.tsx | 6 |
2 files changed, 69 insertions, 12 deletions
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 : []; |