From c11ecfb40021d108ee1d035637fac08976948095 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Tue, 15 Oct 2019 18:08:57 -0400
Subject: Room notifications added

---
 src/server/Message.ts | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/server/Message.ts')

diff --git a/src/server/Message.ts b/src/server/Message.ts
index aaee143e8..7b72b693e 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -58,4 +58,5 @@ export namespace MessageStore {
     export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
+    export const NotifyRoommates = new Message<string>("Notify Roommates");
 }
-- 
cgit v1.2.3-70-g09d2


From f5fc9d12c2843d6d9241045150983d30e4eaa4d1 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Sun, 20 Oct 2019 17:00:06 -0400
Subject: Server side pretty much done for 2 person call

---
 src/Utils.ts          |  8 +++++++-
 src/server/Message.ts | 10 +++++++++-
 src/server/index.ts   | 46 +++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 59 insertions(+), 5 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/Utils.ts b/src/Utils.ts
index 4b892aa70..b481b3b47 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -1,6 +1,6 @@
 import v4 = require('uuid/v4');
 import v5 = require("uuid/v5");
-import { Socket } from 'socket.io';
+import { Socket, Room } from 'socket.io';
 import { Message } from './server/Message';
 import { RouteStore } from './server/RouteStore';
 
@@ -211,6 +211,12 @@ export namespace Utils {
             handler([arg, loggingCallback('S sending', fn, message.Name)]);
         });
     }
+    export type RoomHandler = (socket: Socket, room: string) => any;
+    export type UsedSockets = Socket | SocketIOClient.Socket;
+    export type RoomMessage = "create or join" | "created" | "joined";
+    export function AddRoomHandler(socket: Socket, message: RoomMessage, handler: RoomHandler) {
+        socket.on(message, room => handler(socket, room));
+    }
 }
 
 export function OmitKeys(obj: any, keys: string[], addKeyFunc?: (dup: any) => void): { omit: any, extract: any } {
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 7b72b693e..60ffa215f 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -42,6 +42,11 @@ export interface Diff extends Reference {
     readonly diff: any;
 }
 
+export interface RoomMessage {
+    readonly message: string;
+    readonly room: string;
+}
+
 export namespace MessageStore {
     export const Foo = new Message<string>("Foo");
     export const Bar = new Message<string>("Bar");
@@ -58,5 +63,8 @@ export namespace MessageStore {
     export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
-    export const NotifyRoommates = new Message<string>("Notify Roommates");
+    export const NotifyRoommates = new Message<RoomMessage>("Notify Roommates");
+    export const HangUpCall = new Message<string>("bye");
+
+
 }
diff --git a/src/server/index.ts b/src/server/index.ts
index 6b884d099..b37822eec 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -24,7 +24,7 @@ import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLo
 import { DashUserModel } from './authentication/models/user_model';
 import { Client } from './Client';
 import { Database } from './database';
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryTypes as YoutubeQueryType, YoutubeQueryInput } from "./Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryTypes as YoutubeQueryType, YoutubeQueryInput, RoomMessage } from "./Message";
 import { RouteStore } from './RouteStore';
 import v4 = require('uuid/v4');
 const app = express();
@@ -777,6 +777,10 @@ server.on("connection", function (socket: Socket) {
     Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
     Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
     Utils.AddServerHandler(socket, MessageStore.NotifyRoommates, message => HandleRoommateNotification(socket, message));
+    Utils.AddServerHandler(socket, MessageStore.HangUpCall, message => HandleHangUp(socket, message));
+    Utils.AddRoomHandler(socket, "create or join", HandleCreateOrJoin);
+
+
 
 
 });
@@ -840,9 +844,45 @@ function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any
     }
 }
 
-function HandleRoommateNotification(socket: Socket, message: String) {
-    socket.broadcast.emit('message', message);
+function HandleRoommateNotification(socket: Socket, message: RoomMessage) {
+    //socket.broadcast.emit('message', message);
+    server.sockets.in(message.room).emit('message', message.message);
+
+}
+
+function HandleCreateOrJoin(socket: io.Socket, room: string) {
+    console.log("Received request to create or join room " + room);
+
+
+    let clientsInRoom = server.sockets.adapter.rooms[room];
+    let numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
+    console.log('Room ' + room + ' now has ' + numClients + ' client(s)');
+
+
+    if (numClients === 0) {
+        socket.join(room);
+        console.log('Client ID ' + socket.id + ' created room ' + room);
+        socket.emit('created', room, socket.id);
+
+    } else if (numClients === 1) {
+        console.log('Client ID ' + socket.id + ' joined room ' + room);
+        server.sockets.in(room).emit('join', room);
+        socket.join(room);
+        socket.emit('joined', room, socket.id);
+        server.sockets.in(room).emit('ready');
+
+    } else {
+        socket.emit('full', room);
+    }
+
+
+
+
+
+}
 
+function HandleHangUp(socket: io.Socket, message: string) {
+    console.log("Receive bye from someone");
 }
 
 const credentialsPath = path.join(__dirname, "./credentials/google_docs_credentials.json");
-- 
cgit v1.2.3-70-g09d2


From 76bc6041ddbbda7ba4c1560199acc08324648e99 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <muhammedamoush@gmail.com>
Date: Wed, 6 Nov 2019 19:20:45 -0500
Subject: 2 person call done

---
 src/client/northstar/utils/Utils.ts         |  6 ++++++
 src/client/views/webcam/DashWebRTC.ts       | 26 +++++++++++++++-----------
 src/client/views/webcam/DashWebRTCVideo.tsx | 24 ++++++++++++++++++++----
 src/server/Message.ts                       |  2 +-
 4 files changed, 42 insertions(+), 16 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/northstar/utils/Utils.ts b/src/client/northstar/utils/Utils.ts
index d071dec62..09f83ce80 100644
--- a/src/client/northstar/utils/Utils.ts
+++ b/src/client/northstar/utils/Utils.ts
@@ -4,6 +4,12 @@ import { IBaseFilterProvider } from '../core/filter/IBaseFilterProvider';
 import { AggregateFunction } from '../model/idea/idea';
 
 export class Utils {
+    static Emit() {
+        throw new Error("Method not implemented.");
+    }
+    static EmitCallback() {
+        throw new Error("Method not implemented.");
+    }
 
     public static EqualityHelper(a: Object, b: Object): boolean {
         if (a === b) return true;
diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts
index bd0bd7f9a..846de4115 100644
--- a/src/client/views/webcam/DashWebRTC.ts
+++ b/src/client/views/webcam/DashWebRTC.ts
@@ -1,4 +1,7 @@
 import { DocServer } from '../../DocServer';
+import { Utils } from '../../../Utils';
+import { MessageStore } from '../../../server/Message';
+
 
 
 /**
@@ -30,8 +33,7 @@ export namespace DashWebRTC {
         offerToReceiveVideo: true
     };
 
-    export function init() {
-        let room = 'test';
+    export function init(room: string) {
 
         if (room !== '') {
             DocServer._socket.emit('create or join', room);
@@ -68,20 +70,21 @@ export namespace DashWebRTC {
         // This client receives a message
         DocServer._socket.on('message', function (message: any) {
             console.log('Client received message:', message);
-            if (message === 'got user media') {
+            if (message.message === 'got user media') {
                 maybeStart();
-            } else if (message.type === 'offer') {
+            } else if (message.message.type === 'offer') {
+                console.log("I have entered here bro!!!");
                 if (!isInitiator && !isStarted) {
                     maybeStart();
                 }
-                pc.setRemoteDescription(new RTCSessionDescription(message));
+                pc.setRemoteDescription(new RTCSessionDescription(message.message));
                 doAnswer();
-            } else if (message.type === 'answer' && isStarted) {
-                pc.setRemoteDescription(new RTCSessionDescription(message));
-            } else if (message.type === 'candidate' && isStarted) {
+            } else if (message.message.type === 'answer' && isStarted) {
+                pc.setRemoteDescription(new RTCSessionDescription(message.message));
+            } else if (message.message.type === 'candidate' && isStarted) {
                 var candidate = new RTCIceCandidate({
-                    sdpMLineIndex: message.label,
-                    candidate: message.candidate
+                    sdpMLineIndex: message.message.label,
+                    candidate: message.message.candidate
                 });
                 pc.addIceCandidate(candidate);
             } else if (message === 'bye' && isStarted) {
@@ -120,7 +123,8 @@ export namespace DashWebRTC {
 
     function sendMessage(message: any) {
         console.log('Client sending message: ', message);
-        DocServer._socket.emit('message', message);
+        Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: "" });
+        //DocServer._socket.emit('message', message);
     }
 
 
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index 503b71569..0c4e594e4 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -9,6 +9,7 @@ import "../../views/nodes/WebBox.scss";
 import "./DashWebRTC.scss";
 import adapter from 'webrtc-adapter';
 import { DashWebRTC } from "./DashWebRTC";
+import { DocServer } from "../../DocServer";
 
 
 
@@ -37,11 +38,12 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     private callButton: HTMLButtonElement | undefined;
     private startButton: HTMLButtonElement | undefined;
     private hangupButton: HTMLButtonElement | undefined;
+    private roomText: HTMLInputElement | undefined;
 
-    componentDidMount() {
-        // DashWebRTC.setVideoObjects(this.localVideoEl!, this.peerVideoEl!);
-        DashWebRTC.init();
-    }
+    // componentDidMount() {
+    //     // DashWebRTC.setVideoObjects(this.localVideoEl!, this.peerVideoEl!);
+    //     //DashWebRTC.init();
+    // }
 
 
     // componentDidMount() {
@@ -279,6 +281,19 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     // }
 
 
+    /**
+      * Function that submits the title entered by user on enter press.
+      */
+    onEnterKeyDown = (e: React.KeyboardEvent) => {
+        if (e.keyCode === 13) {
+            let submittedTitle = this.roomText!.value;
+            this.roomText!.value = "";
+            this.roomText!.blur();
+            DashWebRTC.init(submittedTitle);
+        }
+    }
+
+
 
 
 
@@ -319,6 +334,7 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
     render() {
         let content =
             <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
+                <input type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
                 <video id="localVideo" autoPlay playsInline ref={(e) => {
                     this.localVideoEl = e!;
                     DashWebRTC.setLocalVideoObject(e!);
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 60ffa215f..ed778e889 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -63,7 +63,7 @@ export namespace MessageStore {
     export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
-    export const NotifyRoommates = new Message<RoomMessage>("Notify Roommates");
+    export const NotifyRoommates = new Message<RoomMessage>("message");
     export const HangUpCall = new Message<string>("bye");
 
 
-- 
cgit v1.2.3-70-g09d2


From 65e164eaec42d1850de7f5e1eba1d4302c3e8230 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Wed, 15 Jan 2020 16:08:48 -0500
Subject: mobile interface emits events when switched to inking view and when
 strokes are drawn, currently with dummy callbacks

---
 src/client/DocServer.ts                            | 22 ++++++++++++++++++-
 src/client/views/GestureOverlay.tsx                | 21 ++++++++++++++++++
 src/client/views/MainView.tsx                      | 13 +++++++++--
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  3 ---
 src/mobile/MobileInterface.tsx                     | 25 +++++++++++++++-------
 src/server/Message.ts                              | 13 +++++++++++
 src/server/Websocket/Websocket.ts                  | 12 ++++++++++-
 7 files changed, 94 insertions(+), 15 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index ed7fbd7ba..cfd9612ed 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,10 +1,11 @@
 import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent } from "./../server/Message";
 import { Opt, Doc } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
 import { RefField } from '../new_fields/RefField';
 import { Id, HandleUpdate } from '../new_fields/FieldSymbols';
+import GestureOverlay from './views/GestureOverlay';
 
 /**
  * This class encapsulates the transfer and cross-client synchronization of
@@ -64,6 +65,19 @@ export namespace DocServer {
         }
     }
 
+    export namespace Mobile {
+
+        export function dispatchGesturePoints(content: GestureContent) {
+            Utils.Emit(_socket, MessageStore.GesturePoints, content);
+        }
+
+        export function dispatchBoxTrigger(enableBox: boolean) {
+            // _socket.emit("dispatchBoxTrigger");
+            Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, enableBox);
+        }
+
+    }
+
     export function init(protocol: string, hostname: string, port: number, identifier: string) {
         _cache = {};
         GUID = identifier;
@@ -85,6 +99,12 @@ export namespace DocServer {
         Utils.AddServerHandler(_socket, MessageStore.ConnectionTerminated, () => {
             alert("Your connection to the server has been terminated.");
         });
+        _socket.addEventListener("receiveGesturePoints", (content: GestureContent) => {
+            GestureOverlay.Instance.manualDispatch(content);
+        });
+        _socket.addEventListener("receiveBoxTrigger", (enableBox: boolean) => {
+            GestureOverlay.Instance.showBox(enableBox);
+        });
     }
 
     function errorFunc(): never {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 4d487c032..4b8dfa119 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -16,6 +16,10 @@ import { Scripting } from "../util/Scripting";
 import { FieldValue, Cast } from "../../new_fields/Types";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import Palette from "./Palette";
+import MobileInterface from "../../mobile/MobileInterface";
+import { MainView } from "./MainView";
+import { DocServer } from "../DocServer";
+import { GestureContent } from "../../server/Message";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -35,6 +39,14 @@ export default class GestureOverlay extends Touchable {
         GestureOverlay.Instance = this;
     }
 
+    manualDispatch = (content: GestureContent) => {
+        console.log(content);
+    }
+
+    showBox = (enableBox: boolean) => {
+        console.log("enable box?", enableBox);
+    }
+
     @action
     handleHandDown = (e: React.TouchEvent) => {
         const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
@@ -139,6 +151,15 @@ export default class GestureOverlay extends Touchable {
             const B = this.svgBounds;
             const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
 
+            if (MobileInterface.Instance.drawingInk) {
+                const { selectedColor, selectedWidth } = InkingControl.Instance;
+                DocServer.Mobile.dispatchGesturePoints({
+                    points: this._points,
+                    color: selectedColor,
+                    width: selectedWidth
+                });
+            }
+
             const result = GestureUtils.GestureRecognizer.Recognize(new Array(points));
             let actionPerformed = false;
             if (result && result.Score > 0.7) {
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 93fb0a07c..f1f7c37a3 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -49,6 +49,7 @@ export class MainView extends React.Component {
     private _flyoutSizeOnDown = 0;
     private _urlState: HistoryUtil.DocUrl;
     private _docBtnRef = React.createRef<HTMLDivElement>();
+    private _mainViewRef = React.createRef<HTMLDivElement>();
 
     @observable private _panelWidth: number = 0;
     @observable private _panelHeight: number = 0;
@@ -507,8 +508,16 @@ export class MainView extends React.Component {
         return (null);
     }
 
+    get mainViewElement() {
+        return document.getElementById("mainView-container");
+    }
+
+    get mainViewRef() {
+        return this._mainViewRef;
+    }
+
     render() {
-        return (<div id="mainView-container">
+        return (<div id="mainView-container" ref={this._mainViewRef}>
             <DictationOverlay />
             <SharingManager />
             <GoogleAuthenticationManager />
@@ -518,7 +527,7 @@ export class MainView extends React.Component {
             </GestureOverlay>
             <PreviewCursor />
             <ContextMenu />
-            <RadialMenu/>
+            <RadialMenu />
             <PDFMenu />
             <MarqueeOptionsMenu />
             <OverlayView />
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 8d376fb57..bbfd22f50 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -114,7 +114,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
     private addDocument = (newBox: Doc) => {
         const added = this.props.addDocument(newBox);
-        console.log("adding doc from freeform", added);
         added && this.bringToFront(newBox);
         added && this.updateCluster(newBox);
         return added;
@@ -362,7 +361,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
                 const points = ge.points;
                 const B = this.getTransform().transformBounds(ge.bounds.left, ge.bounds.top, ge.bounds.width, ge.bounds.height);
                 const inkDoc = Docs.Create.InkDocument(InkingControl.Instance.selectedColor, InkingControl.Instance.selectedTool, parseInt(InkingControl.Instance.selectedWidth), points, { x: B.x, y: B.y, width: B.width, height: B.height });
-                console.log("make stroke", inkDoc);
                 this.addDocument(inkDoc);
                 e.stopPropagation();
                 break;
@@ -991,7 +989,6 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         // otherwise, they are stored in fieldKey.  All annotations to this document are stored in the extension document
         if (!this.extensionDoc) return (null);
         // let lodarea = this.Document[WidthSym]() * this.Document[HeightSym]() / this.props.ScreenToLocalTransform().Scale / this.props.ScreenToLocalTransform().Scale;
-        console.log("height freeform", this.isAnnotationOverlay, this.Document.scrollHeight, this.props.PanelHeight());
         return <div className={"collectionfreeformview-container"} ref={this.createDropAndGestureTarget} onWheel={this.onPointerWheel}//pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined,
             style={{ pointerEvents: SelectionManager.GetIsDragging() ? "all" : undefined, height: this.isAnnotationOverlay ? (this.props.Document.scrollHeight ? this.Document.scrollHeight : "100%") : this.props.PanelHeight() }}
             onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu} onTouchStart={this.onTouchStart}>
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 3cb08afa7..1429226b4 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -2,7 +2,7 @@ import React = require('react');
 import { observer } from 'mobx-react';
 import { computed, action, observable } from 'mobx';
 import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
-import { FieldValue, Cast } from '../new_fields/Types';
+import { FieldValue, Cast, StrCast } from '../new_fields/Types';
 import { Doc } from '../new_fields/Doc';
 import { Docs } from '../client/documents/Documents';
 import { CollectionView } from '../client/views/collections/CollectionView';
@@ -18,6 +18,10 @@ import { InkingControl } from '../client/views/InkingControl';
 import { InkTool } from '../new_fields/InkField';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import "./MobileInterface.scss";
+import { SelectionManager } from '../client/util/SelectionManager';
+import { DateField } from '../new_fields/DateField';
+import { GestureUtils } from '../pen-gestures/GestureUtils';
+import { DocServer } from '../client/DocServer';
 
 library.add(faTrash, faCheck);
 
@@ -30,6 +34,7 @@ export default class MobileInterface extends React.Component {
 
     private mainDoc = CurrentUserUtils.setupMobileDoc(this.userDoc);
     private inkDoc?: Doc;
+    public drawingInk: boolean = false;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -61,6 +66,10 @@ export default class MobileInterface extends React.Component {
                     this.inkDoc = CurrentUserUtils.setupMobileInkingDoc(this.userDoc);
                     this.userDoc.activeMobile = this.inkDoc;
                     InkingControl.Instance.switchTool(InkTool.Pen);
+                    this.drawingInk = true;
+
+                    DocServer.Mobile.dispatchBoxTrigger(true);
+
                     break;
                 }
             }
@@ -100,17 +109,17 @@ export default class MobileInterface extends React.Component {
     }
 
     onClick = (e: React.MouseEvent) => {
-        // insert ink as collection into active displayed doc view
-        // reset ink collection
-        this.inkDoc = undefined;
-        console.log("clicked");
         this.switchCurrentView("main");
         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
+
+        DocServer.Mobile.dispatchBoxTrigger(false);
+
+        this.inkDoc = undefined;
+        this.drawingInk = false;
     }
 
     @computed
     get inkContent() {
-        // TODO: get props from active collection and pass to the new freeform
         if (this.mainContainer) {
             return (
                 <GestureOverlay>
@@ -128,9 +137,9 @@ export default class MobileInterface extends React.Component {
                         PanelHeight={() => window.innerHeight}
                         PanelWidth={() => window.innerWidth}
                         focus={emptyFunction}
-                        isSelected={returnTrue}
+                        isSelected={returnFalse}
                         select={emptyFunction}
-                        active={returnTrue}
+                        active={returnFalse}
                         ContentScaling={returnOne}
                         whenActiveChanged={returnFalse}
                         ScreenToLocalTransform={Transform.Identity}
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 621abfd1e..fe74dafa5 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -1,4 +1,5 @@
 import { Utils } from "../Utils";
+import { Point } from "../pen-gestures/ndollar";
 
 export class Message<T> {
     private _name: string;
@@ -42,6 +43,16 @@ export interface Diff extends Reference {
     readonly diff: any;
 }
 
+export interface GestureContent {
+    readonly points: Array<Point>;
+    readonly width?: string;
+    readonly color?: string;
+}
+
+export interface MobileInkBoxTriggerContent {
+    readonly enableBox: boolean;
+}
+
 export namespace MessageStore {
     export const Foo = new Message<string>("Foo");
     export const Bar = new Message<string>("Bar");
@@ -51,6 +62,8 @@ export namespace MessageStore {
     export const GetDocument = new Message<string>("Get Document");
     export const DeleteAll = new Message<any>("Delete All");
     export const ConnectionTerminated = new Message<string>("Connection Terminated");
+    export const GesturePoints = new Message<GestureContent>("Gesture Points");
+    export const MobileInkBoxTrigger = new Message<boolean>("Trigger Mobile Ink Box");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 578147d60..67777f023 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
 import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent } from "../Message";
 import { Client } from "../Client";
 import { Socket } from "socket.io";
 import { Database } from "../database";
@@ -54,6 +54,8 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.UpdateField, diff => UpdateField(socket, diff));
             Utils.AddServerHandler(socket, MessageStore.DeleteField, id => DeleteField(socket, id));
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
+            Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
+            Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, enableBox => processBoxTrigger(socket, enableBox));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
 
@@ -68,6 +70,14 @@ export namespace WebSocket {
         logPort("websocket", socketPort);
     }
 
+    function processGesturePoints(socket: Socket, content: GestureContent) {
+        socket.broadcast.emit("receiveGesturePoints", content);
+    }
+
+    function processBoxTrigger(socket: Socket, enableBox: boolean) {
+        socket.broadcast.emit("receiveBoxTrigger", enableBox);
+    }
+
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
         const { ProjectCredentials } = GoogleCredentialsLoader;
         switch (query.type) {
-- 
cgit v1.2.3-70-g09d2


From 43c4ff69d515b874f71f9c638a267cd896036854 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Wed, 15 Jan 2020 17:20:09 -0500
Subject: strokes from mobile interface get properly inserted into desktop with
 offset of the mobile ink overlay

---
 src/client/DocServer.ts              | 12 +++----
 src/client/views/GestureOverlay.scss |  4 +++
 src/client/views/GestureOverlay.tsx  | 70 ++++++++++++++++++++++++++++++------
 src/mobile/MobileInterface.tsx       | 12 +++++--
 src/server/Message.ts                |  7 ++--
 src/server/Websocket/Websocket.ts    |  8 ++---
 6 files changed, 89 insertions(+), 24 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index cfd9612ed..132128182 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,5 +1,5 @@
 import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes, GestureContent } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "./../server/Message";
 import { Opt, Doc } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
@@ -71,9 +71,9 @@ export namespace DocServer {
             Utils.Emit(_socket, MessageStore.GesturePoints, content);
         }
 
-        export function dispatchBoxTrigger(enableBox: boolean) {
+        export function dispatchBoxTrigger(content: MobileInkBoxContent) {
             // _socket.emit("dispatchBoxTrigger");
-            Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, enableBox);
+            Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, content);
         }
 
     }
@@ -100,10 +100,10 @@ export namespace DocServer {
             alert("Your connection to the server has been terminated.");
         });
         _socket.addEventListener("receiveGesturePoints", (content: GestureContent) => {
-            GestureOverlay.Instance.manualDispatch(content);
+            GestureOverlay.Instance.drawStrokeToMobileInkBox(content);
         });
-        _socket.addEventListener("receiveBoxTrigger", (enableBox: boolean) => {
-            GestureOverlay.Instance.showBox(enableBox);
+        _socket.addEventListener("receiveBoxTrigger", (content: MobileInkBoxContent) => {
+            GestureOverlay.Instance.enableMobileInkBox(content);
         });
     }
 
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 31601efd4..2996b7073 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -5,4 +5,8 @@
     top: 0;
     left: 0;
     touch-action: none;
+}
+
+.mobileInkOverlay {
+    border: 5px dashed red;
 }
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 4b8dfa119..7e74d1d33 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -19,7 +19,8 @@ import Palette from "./Palette";
 import MobileInterface from "../../mobile/MobileInterface";
 import { MainView } from "./MainView";
 import { DocServer } from "../DocServer";
-import { GestureContent } from "../../server/Message";
+import { GestureContent, MobileInkBoxContent } from "../../server/Message";
+import { Point } from "../northstar/model/idea/idea";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -30,6 +31,10 @@ export default class GestureOverlay extends Touchable {
     @observable public Color: string = "rgb(244, 67, 54)";
     @observable public Width: number = 5;
 
+    @observable private showMobileInkOverlay: boolean = false;
+    @observable private mobileInkOverlaySize: { width: number, height: number } = { width: 500, height: 700 };
+    @observable private mobileInkOverlayPosition: { x: number, y: number } = { x: 300, y: 0 };
+
     private _d1: Doc | undefined;
     private thumbIdentifier?: number;
 
@@ -39,14 +44,6 @@ export default class GestureOverlay extends Touchable {
         GestureOverlay.Instance = this;
     }
 
-    manualDispatch = (content: GestureContent) => {
-        console.log(content);
-    }
-
-    showBox = (enableBox: boolean) => {
-        console.log("enable box?", enableBox);
-    }
-
     @action
     handleHandDown = (e: React.TouchEvent) => {
         const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
@@ -151,10 +148,11 @@ export default class GestureOverlay extends Touchable {
             const B = this.svgBounds;
             const points = this._points.map(p => ({ X: p.X - B.left, Y: p.Y - B.top }));
 
-            if (MobileInterface.Instance.drawingInk) {
+            if (MobileInterface.Instance && MobileInterface.Instance.drawingInk) {
                 const { selectedColor, selectedWidth } = InkingControl.Instance;
                 DocServer.Mobile.dispatchGesturePoints({
                     points: this._points,
+                    bounds: B,
                     color: selectedColor,
                     width: selectedWidth
                 });
@@ -249,12 +247,64 @@ export default class GestureOverlay extends Touchable {
         );
     }
 
+    drawStrokeToMobileInkBox = (content: GestureContent) => {
+        console.log(content);
+        const { points, bounds } = content;
+
+        const B = {
+            right: bounds.right + this.mobileInkOverlayPosition.x,
+            left: bounds.left + this.mobileInkOverlayPosition.x,
+            bottom: bounds.bottom + this.mobileInkOverlayPosition.y,
+            top: bounds.top + this.mobileInkOverlayPosition.y,
+            width: bounds.width,
+            height: bounds.height
+        };
+
+        const target = document.elementFromPoint(points[0].X, points[0].Y);
+        target?.dispatchEvent(
+            new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
+                {
+                    bubbles: true,
+                    detail: {
+                        points: points,
+                        gesture: GestureUtils.Gestures.Stroke,
+                        bounds: B
+                    }
+                }
+            )
+        );
+    }
+
+    @action
+    enableMobileInkBox = (content: MobileInkBoxContent) => {
+        const { enableBox, width, height } = content;
+        console.log("enable box?", enableBox, width, height);
+        this.showMobileInkOverlay = enableBox;
+        this.mobileInkOverlaySize = { width: width ? width : 0, height: height ? height : 0 };
+        this.mobileInkOverlayPosition = { x: 300, y: 25 }; // TODO put at center of screen
+
+    }
+
+    @computed get mobileInkOverlay() {
+        return (
+            <div className="mobileInkOverlay" style={{
+                width: this.mobileInkOverlaySize.width,
+                height: this.mobileInkOverlaySize.height,
+                position: "absolute",
+                transform: `translate(${this.mobileInkOverlayPosition.x}px, ${this.mobileInkOverlayPosition.y}px)`,
+                zIndex: 30000,
+                pointerEvents: "none"
+            }}></div>
+        );
+    }
+
     render() {
         return (
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onTouchStart}>
                 {this.currentStroke}
                 {this.props.children}
                 {this._palette}
+                {this.showMobileInkOverlay ? this.mobileInkOverlay : <></>}
             </div>);
     }
 }
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 1429226b4..4840ea374 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -68,7 +68,11 @@ export default class MobileInterface extends React.Component {
                     InkingControl.Instance.switchTool(InkTool.Pen);
                     this.drawingInk = true;
 
-                    DocServer.Mobile.dispatchBoxTrigger(true);
+                    DocServer.Mobile.dispatchBoxTrigger({
+                        enableBox: true,
+                        width: window.innerWidth,
+                        height: window.innerHeight
+                    });
 
                     break;
                 }
@@ -112,7 +116,11 @@ export default class MobileInterface extends React.Component {
         this.switchCurrentView("main");
         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
 
-        DocServer.Mobile.dispatchBoxTrigger(false);
+        DocServer.Mobile.dispatchBoxTrigger({
+            enableBox: false,
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
 
         this.inkDoc = undefined;
         this.drawingInk = false;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index fe74dafa5..1958286df 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -45,12 +45,15 @@ export interface Diff extends Reference {
 
 export interface GestureContent {
     readonly points: Array<Point>;
+    readonly bounds: { right: number, left: number, bottom: number, top: number, width: number, height: number };
     readonly width?: string;
     readonly color?: string;
 }
 
-export interface MobileInkBoxTriggerContent {
+export interface MobileInkBoxContent {
     readonly enableBox: boolean;
+    readonly width?: number;
+    readonly height?: number;
 }
 
 export namespace MessageStore {
@@ -63,7 +66,7 @@ export namespace MessageStore {
     export const DeleteAll = new Message<any>("Delete All");
     export const ConnectionTerminated = new Message<string>("Connection Terminated");
     export const GesturePoints = new Message<GestureContent>("Gesture Points");
-    export const MobileInkBoxTrigger = new Message<boolean>("Trigger Mobile Ink Box");
+    export const MobileInkBoxTrigger = new Message<MobileInkBoxContent>("Trigger Mobile Ink Box");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 67777f023..16e34bdfc 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
 import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "../Message";
 import { Client } from "../Client";
 import { Socket } from "socket.io";
 import { Database } from "../database";
@@ -55,7 +55,7 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteField, id => DeleteField(socket, id));
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
-            Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, enableBox => processBoxTrigger(socket, enableBox));
+            Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, content => processBoxTrigger(socket, content));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
 
@@ -74,8 +74,8 @@ export namespace WebSocket {
         socket.broadcast.emit("receiveGesturePoints", content);
     }
 
-    function processBoxTrigger(socket: Socket, enableBox: boolean) {
-        socket.broadcast.emit("receiveBoxTrigger", enableBox);
+    function processBoxTrigger(socket: Socket, content: MobileInkBoxContent) {
+        socket.broadcast.emit("receiveBoxTrigger", content);
     }
 
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
-- 
cgit v1.2.3-70-g09d2


From ecf0f5b8f426db9e66c05e759f61294811b15fca Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Sat, 1 Feb 2020 14:56:19 -0500
Subject: mobile ink overlay is draggable from desktop

---
 src/client/DocServer.ts                            |  19 ++-
 src/client/util/InteractionUtils.ts                | 165 -------------------
 src/client/util/InteractionUtils.tsx               | 182 +++++++++++++++++++++
 src/client/views/GestureOverlay.scss               |   4 -
 src/client/views/GestureOverlay.tsx                |  25 +--
 src/client/views/InkingStroke.tsx                  |  17 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   1 -
 src/client/views/nodes/DocumentView.tsx            |   1 +
 src/mobile/MobileInkOverlay.scss                   |  38 +++++
 src/mobile/MobileInkOverlay.tsx                    |  91 +++++++++--
 src/mobile/MobileInterface.scss                    |   2 +-
 src/mobile/MobileInterface.tsx                     |  90 ++++++----
 src/server/Message.ts                              |  14 +-
 src/server/Websocket/Websocket.ts                  |   8 +-
 14 files changed, 393 insertions(+), 264 deletions(-)
 delete mode 100644 src/client/util/InteractionUtils.ts
 create mode 100644 src/client/util/InteractionUtils.tsx
 create mode 100644 src/mobile/MobileInkOverlay.scss

(limited to 'src/server/Message.ts')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index a1cb42df2..b20cd3521 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,5 +1,5 @@
 import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPosition } from "./../server/Message";
 import { Opt, Doc } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
@@ -72,9 +72,13 @@ export namespace DocServer {
             Utils.Emit(_socket, MessageStore.GesturePoints, content);
         }
 
-        export function dispatchBoxTrigger(content: MobileInkBoxContent) {
+        export function dispatchOverlayTrigger(content: MobileInkOverlayContent) {
             // _socket.emit("dispatchBoxTrigger");
-            Utils.Emit(_socket, MessageStore.MobileInkBoxTrigger, content);
+            Utils.Emit(_socket, MessageStore.MobileInkOverlayTrigger, content);
+        }
+
+        export function dispatchOverlayPositionUpdate(content: UpdateMobileInkOverlayPosition) {
+            Utils.Emit(_socket, MessageStore.UpdateMobileInkOverlayPosition, content);
         }
 
     }
@@ -100,13 +104,18 @@ export namespace DocServer {
         Utils.AddServerHandler(_socket, MessageStore.ConnectionTerminated, () => {
             alert("Your connection to the server has been terminated.");
         });
+
+        // mobile ink overlay socket events to communicate between mobile view and desktop view
         _socket.addEventListener("receiveGesturePoints", (content: GestureContent) => {
             MobileInkOverlay.Instance.drawStroke(content);
         });
-        _socket.addEventListener("receiveBoxTrigger", (content: MobileInkBoxContent) => {
-            GestureOverlay.Instance.enableMobileInkBox(content);
+        _socket.addEventListener("receiveOverlayTrigger", (content: MobileInkOverlayContent) => {
+            GestureOverlay.Instance.enableMobileInkOverlay(content);
             MobileInkOverlay.Instance.initMobileInkOverlay(content);
         });
+        _socket.addEventListener("updateMobileOverlayPosition", (content: UpdateMobileInkOverlayPosition) => {
+            MobileInkOverlay.Instance.updatePosition(content);
+        });
     }
 
     function errorFunc(): never {
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
deleted file mode 100644
index 76b43da3c..000000000
--- a/src/client/util/InteractionUtils.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-export namespace InteractionUtils {
-    export const MOUSETYPE = "mouse";
-    export const TOUCHTYPE = "touch";
-    export const PENTYPE = "pen";
-    export const ERASERTYPE = "eraser";
-
-    const POINTER_PEN_BUTTON = -1;
-    const REACT_POINTER_PEN_BUTTON = 0;
-    const ERASER_BUTTON = 5;
-
-    export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
-        const myTouches = new Array<React.Touch>();
-        for (let i = 0; i < e.targetTouches.length; i++) {
-            const pt: any = e.targetTouches.item(i);
-            if (pt && prevPoints.has(pt.identifier)) {
-                if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
-                    myTouches.push(pt);
-                }
-            }
-        }
-        return myTouches;
-    }
-
-    export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean {
-        switch (type) {
-            // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2
-            case PENTYPE:
-                return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0);
-            case ERASERTYPE:
-                return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
-            default:
-                return e.pointerType === type;
-        }
-    }
-
-    export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
-        return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
-    }
-
-    /**
-     * Returns the centroid of an n-arbitrary long list of points (takes the average the x and y components of each point)
-     * @param pts - n-arbitrary long list of points
-     */
-    export function CenterPoint(pts: React.Touch[]): { X: number, Y: number } {
-        const centerX = pts.map(pt => pt.clientX).reduce((a, b) => a + b, 0) / pts.length;
-        const centerY = pts.map(pt => pt.clientY).reduce((a, b) => a + b, 0) / pts.length;
-        return { X: centerX, Y: centerY };
-    }
-
-    /**
-     * Returns -1 if pinching out, 0 if not pinching, and 1 if pinching in
-     * @param pt1 - new point that corresponds to oldPoint1
-     * @param pt2 - new point that corresponds to oldPoint2
-     * @param oldPoint1 - previous point 1
-     * @param oldPoint2 - previous point 2
-     */
-    export function Pinching(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
-        const threshold = 4;
-        const oldDist = TwoPointEuclidist(oldPoint1, oldPoint2);
-        const newDist = TwoPointEuclidist(pt1, pt2);
-
-        /** if they have the same sign, then we are either pinching in or out.
-          * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch)
-          * so that it can still pan without freaking out
-          */
-        if (Math.sign(oldDist) === Math.sign(newDist) && Math.abs(oldDist - newDist) > threshold) {
-            return Math.sign(oldDist - newDist);
-        }
-        return 0;
-    }
-
-    /**
-     * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in
-     * @param pt1 - new point that corresponds to oldPoint1
-     * @param pt2 - new point that corresponds to oldPoint2
-     * @param oldPoint1 - previous point 1
-     * @param oldPoint2 - previous point 2
-     */
-    export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
-        const threshold = 4;
-
-        const pt1Dist = TwoPointEuclidist(oldPoint1, pt1);
-        const pt2Dist = TwoPointEuclidist(oldPoint2, pt2);
-
-        const pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2);
-
-        if (pinching !== 0) {
-            if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) {
-                return pinching;
-            }
-        }
-        return 0;
-    }
-
-    export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: React.Touch[], leniency: number): boolean {
-        for (const touch of newTouches) {
-            if (touch) {
-                const oldTouch = oldTouches.get(touch.identifier);
-                if (oldTouch) {
-                    if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
-                        return true;
-                    }
-                }
-            }
-        }
-        return false;
-    }
-
-    // These might not be very useful anymore, but I'll leave them here for now -syip2
-    {
-
-
-        /**
-         * Returns the type of Touch Interaction from a list of points.
-         * Also returns any data that is associated with a Touch Interaction
-         * @param pts - List of points
-         */
-        // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
-        //     const leniency = 200;
-        //     switch (pts.length) {
-        //         case 1:
-        //             return { type: OneFinger };
-        //         case 2:
-        //             return { type: TwoSeperateFingers };
-        //         case 3:
-        //             let pt1 = pts[0];
-        //             let pt2 = pts[1];
-        //             let pt3 = pts[2];
-        //             if (pt1 && pt2 && pt3) {
-        //                 let dist12 = TwoPointEuclidist(pt1, pt2);
-        //                 let dist23 = TwoPointEuclidist(pt2, pt3);
-        //                 let dist13 = TwoPointEuclidist(pt1, pt3);
-        //                 console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
-        //                 let dist12close = dist12 < leniency;
-        //                 let dist23close = dist23 < leniency;
-        //                 let dist13close = dist13 < leniency;
-        //                 let xor2313 = dist23close ? !dist13close : dist13close;
-        //                 let xor = dist12close ? !xor2313 : xor2313;
-        //                 // three input xor because javascript doesn't have logical xor's
-        //                 if (xor) {
-        //                     let points: number[] = [];
-        //                     let min = Math.min(dist12, dist23, dist13);
-        //                     switch (min) {
-        //                         case dist12:
-        //                             points = [0, 1, 2];
-        //                             break;
-        //                         case dist23:
-        //                             points = [1, 2, 0];
-        //                             break;
-        //                         case dist13:
-        //                             points = [0, 2, 1];
-        //                             break;
-        //                     }
-        //                     return { type: TwoToOneFingers, data: points };
-        //                 }
-        //                 else {
-        //                     return { type: ThreeSeperateFingers, data: null };
-        //                 }
-        //             }
-        //         default:
-        //             return { type: undefined };
-        //     }
-        // }
-    }
-}
\ No newline at end of file
diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx
new file mode 100644
index 000000000..34c7cfa74
--- /dev/null
+++ b/src/client/util/InteractionUtils.tsx
@@ -0,0 +1,182 @@
+import React = require("react");
+
+export namespace InteractionUtils {
+    export const MOUSETYPE = "mouse";
+    export const TOUCHTYPE = "touch";
+    export const PENTYPE = "pen";
+    export const ERASERTYPE = "eraser";
+
+    const POINTER_PEN_BUTTON = -1;
+    const REACT_POINTER_PEN_BUTTON = 0;
+    const ERASER_BUTTON = 5;
+
+    export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
+        const myTouches = new Array<React.Touch>();
+        for (let i = 0; i < e.targetTouches.length; i++) {
+            const pt: any = e.targetTouches.item(i);
+            if (pt && prevPoints.has(pt.identifier)) {
+                if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
+                    myTouches.push(pt);
+                }
+            }
+        }
+        return myTouches;
+    }
+
+    // TODO: find a way to reference this function from InkingStroke instead of copy pastign here. copied bc of weird error when on mobile view
+    export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number) {
+        const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, "");
+        return (
+            <polyline
+                points={pts}
+                style={{
+                    fill: "none",
+                    stroke: color,
+                    strokeWidth: width
+                }}
+            />
+        );
+    }
+
+    export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean {
+        switch (type) {
+            // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2
+            case PENTYPE:
+                return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0);
+            case ERASERTYPE:
+                return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON);
+            default:
+                return e.pointerType === type;
+        }
+    }
+
+    export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number {
+        return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2));
+    }
+
+    /**
+     * Returns the centroid of an n-arbitrary long list of points (takes the average the x and y components of each point)
+     * @param pts - n-arbitrary long list of points
+     */
+    export function CenterPoint(pts: React.Touch[]): { X: number, Y: number } {
+        const centerX = pts.map(pt => pt.clientX).reduce((a, b) => a + b, 0) / pts.length;
+        const centerY = pts.map(pt => pt.clientY).reduce((a, b) => a + b, 0) / pts.length;
+        return { X: centerX, Y: centerY };
+    }
+
+    /**
+     * Returns -1 if pinching out, 0 if not pinching, and 1 if pinching in
+     * @param pt1 - new point that corresponds to oldPoint1
+     * @param pt2 - new point that corresponds to oldPoint2
+     * @param oldPoint1 - previous point 1
+     * @param oldPoint2 - previous point 2
+     */
+    export function Pinching(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
+        const threshold = 4;
+        const oldDist = TwoPointEuclidist(oldPoint1, oldPoint2);
+        const newDist = TwoPointEuclidist(pt1, pt2);
+
+        /** if they have the same sign, then we are either pinching in or out.
+          * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch)
+          * so that it can still pan without freaking out
+          */
+        if (Math.sign(oldDist) === Math.sign(newDist) && Math.abs(oldDist - newDist) > threshold) {
+            return Math.sign(oldDist - newDist);
+        }
+        return 0;
+    }
+
+    /**
+     * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in
+     * @param pt1 - new point that corresponds to oldPoint1
+     * @param pt2 - new point that corresponds to oldPoint2
+     * @param oldPoint1 - previous point 1
+     * @param oldPoint2 - previous point 2
+     */
+    export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number {
+        const threshold = 4;
+
+        const pt1Dist = TwoPointEuclidist(oldPoint1, pt1);
+        const pt2Dist = TwoPointEuclidist(oldPoint2, pt2);
+
+        const pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2);
+
+        if (pinching !== 0) {
+            if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) {
+                return pinching;
+            }
+        }
+        return 0;
+    }
+
+    export function IsDragging(oldTouches: Map<number, React.Touch>, newTouches: React.Touch[], leniency: number): boolean {
+        for (const touch of newTouches) {
+            if (touch) {
+                const oldTouch = oldTouches.get(touch.identifier);
+                if (oldTouch) {
+                    if (TwoPointEuclidist(touch, oldTouch) >= leniency) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    }
+
+    // These might not be very useful anymore, but I'll leave them here for now -syip2
+    {
+
+
+        /**
+         * Returns the type of Touch Interaction from a list of points.
+         * Also returns any data that is associated with a Touch Interaction
+         * @param pts - List of points
+         */
+        // export function InterpretPointers(pts: React.Touch[]): { type: Opt<TouchInteraction>, data?: any } {
+        //     const leniency = 200;
+        //     switch (pts.length) {
+        //         case 1:
+        //             return { type: OneFinger };
+        //         case 2:
+        //             return { type: TwoSeperateFingers };
+        //         case 3:
+        //             let pt1 = pts[0];
+        //             let pt2 = pts[1];
+        //             let pt3 = pts[2];
+        //             if (pt1 && pt2 && pt3) {
+        //                 let dist12 = TwoPointEuclidist(pt1, pt2);
+        //                 let dist23 = TwoPointEuclidist(pt2, pt3);
+        //                 let dist13 = TwoPointEuclidist(pt1, pt3);
+        //                 console.log(`distances: ${dist12}, ${dist23}, ${dist13}`);
+        //                 let dist12close = dist12 < leniency;
+        //                 let dist23close = dist23 < leniency;
+        //                 let dist13close = dist13 < leniency;
+        //                 let xor2313 = dist23close ? !dist13close : dist13close;
+        //                 let xor = dist12close ? !xor2313 : xor2313;
+        //                 // three input xor because javascript doesn't have logical xor's
+        //                 if (xor) {
+        //                     let points: number[] = [];
+        //                     let min = Math.min(dist12, dist23, dist13);
+        //                     switch (min) {
+        //                         case dist12:
+        //                             points = [0, 1, 2];
+        //                             break;
+        //                         case dist23:
+        //                             points = [1, 2, 0];
+        //                             break;
+        //                         case dist13:
+        //                             points = [0, 2, 1];
+        //                             break;
+        //                     }
+        //                     return { type: TwoToOneFingers, data: points };
+        //                 }
+        //                 else {
+        //                     return { type: ThreeSeperateFingers, data: null };
+        //                 }
+        //             }
+        //         default:
+        //             return { type: undefined };
+        //     }
+        // }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 2996b7073..31601efd4 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -5,8 +5,4 @@
     top: 0;
     left: 0;
     touch-action: none;
-}
-
-.mobileInkOverlay {
-    border: 5px dashed red;
 }
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 81284b543..a01a86b53 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -19,7 +19,7 @@ import Palette from "./Palette";
 import MobileInterface from "../../mobile/MobileInterface";
 import { MainView } from "./MainView";
 import { DocServer } from "../DocServer";
-import { GestureContent, MobileInkBoxContent } from "../../server/Message";
+import { GestureContent, MobileInkOverlayContent } from "../../server/Message";
 import { Point } from "../northstar/model/idea/idea";
 import MobileInkOverlay from "../../mobile/MobileInkOverlay";
 
@@ -217,21 +217,6 @@ export default class GestureOverlay extends Touchable {
         return { right: right, left: left, bottom: bottom, top: top, width: right - left, height: bottom - top };
     }
 
-    // TODO: find a way to reference this function from InkingStroke instead of copy pastign here. copied bc of weird error when on mobile view
-    CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color?: string, width?: number) {
-        const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, "");
-        return (
-            <polyline
-                points={pts}
-                style={{
-                    fill: "none",
-                    stroke: color ?? InkingControl.Instance.selectedColor,
-                    strokeWidth: width ?? InkingControl.Instance.selectedWidth
-                }}
-            />
-        );
-    }
-
     @computed get currentStroke() {
         if (this._points.length <= 1) {
             return (null);
@@ -241,23 +226,23 @@ export default class GestureOverlay extends Touchable {
 
         return (
             <svg width={B.width} height={B.height} style={{ transform: `translate(${B.left}px, ${B.top}px)`, pointerEvents: "none", position: "absolute", zIndex: 30000 }}>
-                {this.CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)}
+                {InteractionUtils.CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)}
             </svg>
         );
     }
 
     @action
-    enableMobileInkBox = (content: MobileInkBoxContent) => {
-        this.showMobileInkOverlay = content.enableBox;
+    enableMobileInkOverlay = (content: MobileInkOverlayContent) => {
+        this.showMobileInkOverlay = content.enableOverlay;
     }
 
     render() {
         return (
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onTouchStart}>
+                {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
                 {this.currentStroke}
                 {this.props.children}
                 {this._palette}
-                {this.showMobileInkOverlay ? <MobileInkOverlay /> : <></>}
             </div>);
     }
 }
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 8b346d5d9..aca507147 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -10,24 +10,11 @@ import "./InkingStroke.scss";
 import { FieldView, FieldViewProps } from "./nodes/FieldView";
 import React = require("react");
 import { TraceMobx } from "../../new_fields/util";
+import { InteractionUtils } from "../util/InteractionUtils";
 
 type InkDocument = makeInterface<[typeof documentSchema]>;
 const InkDocument = makeInterface(documentSchema);
 
-export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color?: string, width?: number) {
-    const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, "");
-    return (
-        <polyline
-            points={pts}
-            style={{
-                fill: "none",
-                stroke: color ?? InkingControl.Instance.selectedColor,
-                strokeWidth: width ?? InkingControl.Instance.selectedWidth
-            }}
-        />
-    );
-}
-
 @observer
 export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocument>(InkDocument) {
     public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); }
@@ -44,7 +31,7 @@ export class InkingStroke extends DocExtendableComponent<FieldViewProps, InkDocu
         const top = Math.min(...ys);
         const right = Math.max(...xs);
         const bottom = Math.max(...ys);
-        const points = CreatePolyline(data, left, top, this.Document.color, this.Document.strokeWidth);
+        const points = InteractionUtils.CreatePolyline(data, left, top, this.Document.color ?? InkingControl.Instance.selectedColor, this.Document.strokeWidth ?? parseInt(InkingControl.Instance.selectedWidth));
         const width = right - left;
         const height = bottom - top;
         const scaleX = this.PanelWidth / width;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index bbfd22f50..4d216cb2a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -26,7 +26,6 @@ import { COLLECTION_BORDER_WIDTH } from "../../../views/globalCssVariables.scss"
 import { ContextMenu } from "../../ContextMenu";
 import { ContextMenuProps } from "../../ContextMenuItem";
 import { InkingControl } from "../../InkingControl";
-import { CreatePolyline } from "../../InkingStroke";
 import { CollectionFreeFormDocumentView } from "../../nodes/CollectionFreeFormDocumentView";
 import { DocumentViewProps } from "../../nodes/DocumentView";
 import { FormattedTextBox } from "../../nodes/FormattedTextBox";
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 2e0ae09ba..03f37595f 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -443,6 +443,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         if (!(InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
             if (!InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
                 e.stopPropagation();
+                // TODO: check here for panning/inking
             }
             return;
         }
diff --git a/src/mobile/MobileInkOverlay.scss b/src/mobile/MobileInkOverlay.scss
new file mode 100644
index 000000000..2e45d0441
--- /dev/null
+++ b/src/mobile/MobileInkOverlay.scss
@@ -0,0 +1,38 @@
+.mobileInkOverlay {
+    border: 5px dashed red;
+}
+
+.mobileInkOverlay-border {
+    background-color: rgba(0, 255, 0, .4);
+    position: absolute;
+    pointer-events: auto;
+    cursor: pointer;
+
+    &.top {
+        width: calc(100% + 20px);
+        height: 10px;
+        top: -10px;
+        left: -10px;
+    }
+
+    &.left {
+        width: 10px;
+        height: calc(100% + 20px);
+        top: -10px;
+        left: -10px;
+    }
+
+    &.right {
+        width: 10px;
+        height: calc(100% + 20px);
+        top: -10px;
+        right: -10px;
+    }
+
+    &.bottom {
+        width: calc(100% + 20px);
+        height: 10px;
+        bottom: -10px;
+        left: -10px;
+    }
+}
\ No newline at end of file
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 71dd20c51..5efc7b83a 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,8 +1,9 @@
 import React = require('react');
 import { observer } from "mobx-react";
-import { MobileInkBoxContent, GestureContent } from "../server/Message";
+import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition } from "../server/Message";
 import { observable, action } from "mobx";
 import { GestureUtils } from "../pen-gestures/GestureUtils";
+import "./MobileInkOverlay.scss";
 
 
 @observer
@@ -15,6 +16,11 @@ export default class MobileInkOverlay extends React.Component {
     @observable private _x: number = -300;
     @observable private _y: number = -300;
 
+    @observable private _offsetX: number = 0;
+    @observable private _offsetY: number = 0;
+    @observable private _isDragging: boolean = false;
+    private _mainCont: React.RefObject<HTMLDivElement> = React.createRef();
+
     constructor(props: Readonly<{}>) {
         super(props);
         MobileInkOverlay.Instance = this;
@@ -28,18 +34,27 @@ export default class MobileInkOverlay extends React.Component {
     }
 
     @action
-    initMobileInkOverlay(content: MobileInkBoxContent) {
+    initMobileInkOverlay(content: MobileInkOverlayContent) {
         const { width, height } = content;
         const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
-        this._width = scaledSize.width;
-        this._height = scaledSize.height;
-        this._scale = scaledSize.scale;
+        this._width = scaledSize.width * .5;
+        this._height = scaledSize.height * .5;
+        this._scale = .5; //scaledSize.scale;
         this._x = 300; // TODO: center on screen
         this._y = 25; // TODO: center on screen
     }
 
+    @action
+    updatePosition(content: UpdateMobileInkOverlayPosition) {
+        const { dx, dy, dsize } = content;
+        console.log(dx, dy, dsize);
+    }
+
     drawStroke = (content: GestureContent) => {
+        // TODO: figure out why strokes drawn in corner of mobile interface dont get inserted
+
         const { points, bounds } = content;
+        console.log("received points", points, bounds);
 
         const B = {
             right: (bounds.right * this._scale) + this._x,
@@ -65,16 +80,66 @@ export default class MobileInkOverlay extends React.Component {
         );
     }
 
+    @action
+    dragStart = (e: React.PointerEvent) => {
+        console.log("pointer down");
+        document.removeEventListener("pointermove", this.dragging);
+        document.removeEventListener("pointerup", this.dragEnd);
+        document.addEventListener("pointermove", this.dragging);
+        document.addEventListener("pointerup", this.dragEnd);
+
+        this._isDragging = true;
+        this._offsetX = e.pageX - this._mainCont.current!.getBoundingClientRect().left;
+        this._offsetY = e.pageY - this._mainCont.current!.getBoundingClientRect().top;
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    @action
+    dragging = (e: PointerEvent) => {
+        const x = e.pageX - this._offsetX;
+        const y = e.pageY - this._offsetY;
+
+        // TODO: don't allow drag over library?
+        this._x = Math.min(Math.max(x, 0), window.innerWidth - this._width);
+        this._y = Math.min(Math.max(y, 0), window.innerHeight - this._height);
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
+    @action
+    dragEnd = (e: PointerEvent) => {
+        document.removeEventListener("pointermove", this.dragging);
+        document.removeEventListener("pointerup", this.dragEnd);
+
+        this._isDragging = false;
+
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
     render() {
+
         return (
-            <div className="mobileInkOverlay" style={{
-                width: this._width,
-                height: this._height,
-                position: "absolute",
-                transform: `translate(${this._x}px, ${this._y}px)`,
-                zIndex: 30000,
-                pointerEvents: "none"
-            }}></div>
+            <div className="mobileInkOverlay"
+                style={{
+                    width: this._width,
+                    height: this._height,
+                    position: "absolute",
+                    transform: `translate(${this._x}px, ${this._y}px)`,
+                    zIndex: 30000,
+                    pointerEvents: "none",
+                    borderStyle: this._isDragging ? "solid" : "dashed"
+                }}
+                ref={this._mainCont}
+            >
+                <div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
+                <div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
+                <div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
+                <div className="mobileInkOverlay-border right" onPointerDown={this.dragStart}></div>
+            </div>
         );
     }
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index e4cc919a5..8abe5a40d 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -1,4 +1,4 @@
-.mobileInterface-topButtons {
+.mobileInterface-inkInterfaceButtons {
     position: absolute;
     display: flex;
     justify-content: space-between;
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 4840ea374..b191b3afb 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -10,7 +10,7 @@ import { DocumentView } from '../client/views/nodes/DocumentView';
 import { emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue } from '../Utils';
 import { Transform } from '../client/util/Transform';
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faPenNib, faHighlighter, faEraser, faMousePointer, faBreadSlice, faTrash, faCheck } from '@fortawesome/free-solid-svg-icons';
+import { faPenNib, faHighlighter, faEraser, faMousePointer, faBreadSlice, faTrash, faCheck, faLongArrowAltLeft } from '@fortawesome/free-solid-svg-icons';
 import { Scripting } from '../client/util/Scripting';
 import { CollectionFreeFormView } from '../client/views/collections/collectionFreeForm/CollectionFreeFormView';
 import GestureOverlay from '../client/views/GestureOverlay';
@@ -23,7 +23,7 @@ import { DateField } from '../new_fields/DateField';
 import { GestureUtils } from '../pen-gestures/GestureUtils';
 import { DocServer } from '../client/DocServer';
 
-library.add(faTrash, faCheck);
+library.add(faLongArrowAltLeft);
 
 @observer
 export default class MobileInterface extends React.Component {
@@ -68,8 +68,8 @@ export default class MobileInterface extends React.Component {
                     InkingControl.Instance.switchTool(InkTool.Pen);
                     this.drawingInk = true;
 
-                    DocServer.Mobile.dispatchBoxTrigger({
-                        enableBox: true,
+                    DocServer.Mobile.dispatchOverlayTrigger({
+                        enableOverlay: true,
                         width: window.innerWidth,
                         height: window.innerHeight
                     });
@@ -112,12 +112,12 @@ export default class MobileInterface extends React.Component {
         return "hello";
     }
 
-    onClick = (e: React.MouseEvent) => {
+    onBack = (e: React.MouseEvent) => {
         this.switchCurrentView("main");
         InkingControl.Instance.switchTool(InkTool.None); // TODO: switch to previous tool
 
-        DocServer.Mobile.dispatchBoxTrigger({
-            enableBox: false,
+        DocServer.Mobile.dispatchOverlayTrigger({
+            enableOverlay: false,
             width: window.innerWidth,
             height: window.innerHeight
         });
@@ -126,37 +126,61 @@ export default class MobileInterface extends React.Component {
         this.drawingInk = false;
     }
 
+    shiftLeft = (e: React.MouseEvent) => {
+        DocServer.Mobile.dispatchOverlayPositionUpdate({
+            dx: -10
+        });
+    }
+
+    shiftRight = (e: React.MouseEvent) => {
+        DocServer.Mobile.dispatchOverlayPositionUpdate({
+            dx: 10
+        });
+    }
+
     @computed
     get inkContent() {
+        // TODO: support panning and zooming
+        // TODO: handle moving of ink strokes
         if (this.mainContainer) {
             return (
-                <GestureOverlay>
-                    <div className="mobileInterface-topButtons">
-                        <button className="mobileInterface-button cancel" onClick={this.onClick} title="Cancel drawing"><FontAwesomeIcon icon="trash" /></button>
-                        <button className="mobileInterface-button cancel" onClick={this.onClick} title="Insert drawing"><FontAwesomeIcon icon="check" /></button>
+                <div className="mobileInterface">
+                    <div className="mobileInterface-inkInterfaceButtons">
+                        <div className="navButtons">
+                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+                        </div>
+                        <div className="inkSettingButtons">
+                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+                        </div>
+                        <div className="navButtons">
+                            <button className="mobileInterface-button" onClick={this.shiftLeft} title="Shift left">left</button>
+                            <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
+                        </div>
                     </div>
-                    <CollectionView
-                        Document={this.mainContainer}
-                        DataDoc={undefined}
-                        LibraryPath={emptyPath}
-                        fieldKey={""}
-                        addDocTab={returnFalse}
-                        pinToPres={emptyFunction}
-                        PanelHeight={() => window.innerHeight}
-                        PanelWidth={() => window.innerWidth}
-                        focus={emptyFunction}
-                        isSelected={returnFalse}
-                        select={emptyFunction}
-                        active={returnFalse}
-                        ContentScaling={returnOne}
-                        whenActiveChanged={returnFalse}
-                        ScreenToLocalTransform={Transform.Identity}
-                        ruleProvider={undefined}
-                        renderDepth={0}
-                        ContainingCollectionView={undefined}
-                        ContainingCollectionDoc={undefined}>
-                    </CollectionView>
-                </GestureOverlay>
+                    <GestureOverlay>
+                        <CollectionView
+                            Document={this.mainContainer}
+                            DataDoc={undefined}
+                            LibraryPath={emptyPath}
+                            fieldKey={""}
+                            addDocTab={returnFalse}
+                            pinToPres={emptyFunction}
+                            PanelHeight={() => window.innerHeight}
+                            PanelWidth={() => window.innerWidth}
+                            focus={emptyFunction}
+                            isSelected={returnFalse}
+                            select={emptyFunction}
+                            active={returnFalse}
+                            ContentScaling={returnOne}
+                            whenActiveChanged={returnFalse}
+                            ScreenToLocalTransform={Transform.Identity}
+                            ruleProvider={undefined}
+                            renderDepth={0}
+                            ContainingCollectionView={undefined}
+                            ContainingCollectionDoc={undefined}>
+                        </CollectionView>
+                    </GestureOverlay>
+                </div>
             );
         }
     }
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 1958286df..064a19653 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -50,12 +50,18 @@ export interface GestureContent {
     readonly color?: string;
 }
 
-export interface MobileInkBoxContent {
-    readonly enableBox: boolean;
+export interface MobileInkOverlayContent {
+    readonly enableOverlay: boolean;
     readonly width?: number;
     readonly height?: number;
 }
 
+export interface UpdateMobileInkOverlayPosition {
+    readonly dx?: number;
+    readonly dy?: number;
+    readonly dsize?: number;
+}
+
 export namespace MessageStore {
     export const Foo = new Message<string>("Foo");
     export const Bar = new Message<string>("Bar");
@@ -65,8 +71,10 @@ export namespace MessageStore {
     export const GetDocument = new Message<string>("Get Document");
     export const DeleteAll = new Message<any>("Delete All");
     export const ConnectionTerminated = new Message<string>("Connection Terminated");
+
     export const GesturePoints = new Message<GestureContent>("Gesture Points");
-    export const MobileInkBoxTrigger = new Message<MobileInkBoxContent>("Trigger Mobile Ink Box");
+    export const MobileInkOverlayTrigger = new Message<MobileInkOverlayContent>("Trigger Mobile Ink Overlay");
+    export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPosition>("Update Mobile Ink Overlay Position");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 16e34bdfc..fe253400c 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
 import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkBoxContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent } from "../Message";
 import { Client } from "../Client";
 import { Socket } from "socket.io";
 import { Database } from "../database";
@@ -55,7 +55,7 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteField, id => DeleteField(socket, id));
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
-            Utils.AddServerHandler(socket, MessageStore.MobileInkBoxTrigger, content => processBoxTrigger(socket, content));
+            Utils.AddServerHandler(socket, MessageStore.MobileInkOverlayTrigger, content => processOverlayTrigger(socket, content));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
 
@@ -74,8 +74,8 @@ export namespace WebSocket {
         socket.broadcast.emit("receiveGesturePoints", content);
     }
 
-    function processBoxTrigger(socket: Socket, content: MobileInkBoxContent) {
-        socket.broadcast.emit("receiveBoxTrigger", content);
+    function processOverlayTrigger(socket: Socket, content: MobileInkOverlayContent) {
+        socket.broadcast.emit("receiveOverlayTrigger", content);
     }
 
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
-- 
cgit v1.2.3-70-g09d2


From 7249f3f2bd12794ca86775853aee700e398eeb00 Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Sun, 2 Feb 2020 16:13:23 -0500
Subject: started creating upload from web on mobile

---
 src/client/DocServer.ts                            |  6 +-
 src/mobile/MobileInkOverlay.tsx                    | 15 ++---
 src/mobile/MobileInterface.tsx                     | 72 ++++++++++++++++++++--
 src/server/Message.ts                              |  4 +-
 src/server/Websocket/Websocket.ts                  |  7 ++-
 .../authentication/models/current_user_utils.ts    | 14 ++++-
 6 files changed, 99 insertions(+), 19 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index b20cd3521..c03764471 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,5 +1,5 @@
 import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPosition } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "./../server/Message";
 import { Opt, Doc } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
@@ -77,7 +77,7 @@ export namespace DocServer {
             Utils.Emit(_socket, MessageStore.MobileInkOverlayTrigger, content);
         }
 
-        export function dispatchOverlayPositionUpdate(content: UpdateMobileInkOverlayPosition) {
+        export function dispatchOverlayPositionUpdate(content: UpdateMobileInkOverlayPositionContent) {
             Utils.Emit(_socket, MessageStore.UpdateMobileInkOverlayPosition, content);
         }
 
@@ -113,7 +113,7 @@ export namespace DocServer {
             GestureOverlay.Instance.enableMobileInkOverlay(content);
             MobileInkOverlay.Instance.initMobileInkOverlay(content);
         });
-        _socket.addEventListener("updateMobileOverlayPosition", (content: UpdateMobileInkOverlayPosition) => {
+        _socket.addEventListener("receiveUpdateOverlayPosition", (content: UpdateMobileInkOverlayPositionContent) => {
             MobileInkOverlay.Instance.updatePosition(content);
         });
     }
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 5efc7b83a..600e8a91b 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,6 +1,6 @@
 import React = require('react');
 import { observer } from "mobx-react";
-import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition } from "../server/Message";
+import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent } from "../server/Message";
 import { observable, action } from "mobx";
 import { GestureUtils } from "../pen-gestures/GestureUtils";
 import "./MobileInkOverlay.scss";
@@ -37,17 +37,19 @@ export default class MobileInkOverlay extends React.Component {
     initMobileInkOverlay(content: MobileInkOverlayContent) {
         const { width, height } = content;
         const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
-        this._width = scaledSize.width * .5;
-        this._height = scaledSize.height * .5;
-        this._scale = .5; //scaledSize.scale;
+        this._width = scaledSize.width * .8;
+        this._height = scaledSize.height * .8;
+        this._scale = .8; //scaledSize.scale;
         this._x = 300; // TODO: center on screen
         this._y = 25; // TODO: center on screen
     }
 
     @action
-    updatePosition(content: UpdateMobileInkOverlayPosition) {
+    updatePosition(content: UpdateMobileInkOverlayPositionContent) {
         const { dx, dy, dsize } = content;
-        console.log(dx, dy, dsize);
+        if (dx) this._x += dx;
+        if (dy) this._y += dy;
+        // TODO: scale dsize
     }
 
     drawStroke = (content: GestureContent) => {
@@ -82,7 +84,6 @@ export default class MobileInkOverlay extends React.Component {
 
     @action
     dragStart = (e: React.PointerEvent) => {
-        console.log("pointer down");
         document.removeEventListener("pointermove", this.dragging);
         document.removeEventListener("pointerup", this.dragEnd);
         document.addEventListener("pointermove", this.dragging);
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index b191b3afb..03bcbca80 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -30,12 +30,15 @@ export default class MobileInterface extends React.Component {
     @observable static Instance: MobileInterface;
     @computed private get userDoc() { return CurrentUserUtils.UserDocument; }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
-    @observable private currentView: "main" | "ink" | "library" = "main";
+    @observable private currentView: "main" | "ink" | "upload" = "main";
 
     private mainDoc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+
     private inkDoc?: Doc;
     public drawingInk: boolean = false;
 
+    private uploadDoc?: Doc;
+
     constructor(props: Readonly<{}>) {
         super(props);
         MobileInterface.Instance = this;
@@ -52,7 +55,7 @@ export default class MobileInterface extends React.Component {
     }
 
     @action
-    switchCurrentView = (view: "main" | "ink" | "library") => {
+    switchCurrentView = (view: "main" | "ink" | "upload") => {
         this.currentView = view;
 
         if (this.userDoc) {
@@ -76,6 +79,11 @@ export default class MobileInterface extends React.Component {
 
                     break;
                 }
+                case "upload": {
+                    this.uploadDoc = CurrentUserUtils.setupMobileUploadDoc(this.userDoc);
+                    this.userDoc.activeMobile = this.uploadDoc;
+
+                }
             }
         }
     }
@@ -127,15 +135,20 @@ export default class MobileInterface extends React.Component {
     }
 
     shiftLeft = (e: React.MouseEvent) => {
+        console.log("shift left!");
         DocServer.Mobile.dispatchOverlayPositionUpdate({
             dx: -10
         });
+        e.preventDefault();
+        e.stopPropagation();
     }
 
     shiftRight = (e: React.MouseEvent) => {
         DocServer.Mobile.dispatchOverlayPositionUpdate({
             dx: 10
         });
+        e.preventDefault();
+        e.stopPropagation();
     }
 
     @computed
@@ -147,7 +160,7 @@ export default class MobileInterface extends React.Component {
                 <div className="mobileInterface">
                     <div className="mobileInterface-inkInterfaceButtons">
                         <div className="navButtons">
-                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
+                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing">BACK</button>
                         </div>
                         <div className="inkSettingButtons">
                             <button className="mobileInterface-button cancel" onClick={this.onBack} title="Cancel drawing"><FontAwesomeIcon icon="long-arrow-alt-left" /></button>
@@ -185,8 +198,57 @@ export default class MobileInterface extends React.Component {
         }
     }
 
+    upload = () => {
+
+    }
+
+    @computed
+    get uploadContent() {
+        if (this.mainContainer) {
+            return (
+                <div className="mobileInterface">
+                    <div className="mobileInterface-inkInterfaceButtons">
+                        <div className="navButtons">
+                            <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
+                        </div>
+                        <div className="uploadSettings">
+                            <button className="mobileInterface-button" onClick={this.upload} title="Shift left">UPLOAD</button>
+                        </div>
+                    </div>
+                    <DocumentView
+                        Document={this.mainContainer}
+                        DataDoc={undefined}
+                        LibraryPath={emptyPath}
+                        addDocument={returnFalse}
+                        addDocTab={returnFalse}
+                        pinToPres={emptyFunction}
+                        removeDocument={undefined}
+                        ruleProvider={undefined}
+                        onClick={undefined}
+                        ScreenToLocalTransform={Transform.Identity}
+                        ContentScaling={returnOne}
+                        PanelWidth={() => window.screen.width}
+                        PanelHeight={() => window.screen.height}
+                        renderDepth={0}
+                        focus={emptyFunction}
+                        backgroundColor={returnEmptyString}
+                        parentActive={returnTrue}
+                        whenActiveChanged={emptyFunction}
+                        bringToFront={emptyFunction}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}
+                        zoomToScale={emptyFunction}
+                        getScale={returnOne}>
+                    </DocumentView>
+                </div>
+            );
+        }
+    }
+
     render() {
-        const content = this.currentView === "main" ? this.mainContent : this.currentView === "ink" ? this.inkContent : <></>;
+        const content = this.currentView === "main" ? this.mainContent :
+            this.currentView === "ink" ? this.inkContent :
+                this.currentView === "upload" ? this.uploadContent : <></>;
         return (
             <div className="mobile-container">
                 {content}
@@ -195,4 +257,4 @@ export default class MobileInterface extends React.Component {
     }
 }
 
-Scripting.addGlobal(function switchMobileView(view: "main" | "ink" | "library") { return MobileInterface.Instance.switchCurrentView(view); });
+Scripting.addGlobal(function switchMobileView(view: "main" | "ink" | "upload") { return MobileInterface.Instance.switchCurrentView(view); });
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 064a19653..236df3f3c 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -56,7 +56,7 @@ export interface MobileInkOverlayContent {
     readonly height?: number;
 }
 
-export interface UpdateMobileInkOverlayPosition {
+export interface UpdateMobileInkOverlayPositionContent {
     readonly dx?: number;
     readonly dy?: number;
     readonly dsize?: number;
@@ -74,7 +74,7 @@ export namespace MessageStore {
 
     export const GesturePoints = new Message<GestureContent>("Gesture Points");
     export const MobileInkOverlayTrigger = new Message<MobileInkOverlayContent>("Trigger Mobile Ink Overlay");
-    export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPosition>("Update Mobile Ink Overlay Position");
+    export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPositionContent>("Update Mobile Ink Overlay Position");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index fe253400c..77816c897 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
 import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "../Message";
 import { Client } from "../Client";
 import { Socket } from "socket.io";
 import { Database } from "../database";
@@ -56,6 +56,7 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
             Utils.AddServerHandler(socket, MessageStore.MobileInkOverlayTrigger, content => processOverlayTrigger(socket, content));
+            Utils.AddServerHandler(socket, MessageStore.UpdateMobileInkOverlayPosition, content => processUpdateOverlayPosition(socket, content));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
 
@@ -78,6 +79,10 @@ export namespace WebSocket {
         socket.broadcast.emit("receiveOverlayTrigger", content);
     }
 
+    function processUpdateOverlayPosition(socket: Socket, content: UpdateMobileInkOverlayPositionContent) {
+        socket.broadcast.emit("receiveUpdateOverlayPosition", content);
+    }
+
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
         const { ProjectCredentials } = GoogleCredentialsLoader;
         switch (query.type) {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 98092ddfe..82bed76f7 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -101,7 +101,8 @@ export class CurrentUserUtils {
             { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
             { title: "use scrubber", icon: "eraser", click: 'activateScrubber(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "green", activePen: doc },
             { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
-            { title: "draw", icon: "mouse-pointer", click: 'switchMobileView("ink");', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+            { title: "draw", icon: "pen-nib", click: 'switchMobileView("ink");', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+            { title: "upload", icon: "upload", click: 'switchMobileView("upload");', backgroundColor: "orange" },
         ];
         return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
             nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
@@ -144,6 +145,17 @@ export class CurrentUserUtils {
         return Docs.Create.FreeformDocument([], { title: "Mobile Inking", backgroundColor: "white" });
     }
 
+    static setupMobileUploadDoc(userDoc: Doc) {
+        console.log("setup mobile upload", window.innerWidth, window.innerHeight);
+        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled", ignoreClick: true });
+        const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload", backgroundColor: "pink" });
+        return Docs.Create.StackingDocument([webDoc, uploadDoc], {
+            title: "Mobile Upload", backgroundColor: "white",
+            columnWidth: window.innerWidth, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", autoHeight: true, yMargin: 5,
+            width: window.innerWidth, height: window.innerHeight
+        });
+    }
+
     // setup the Creator button which will display the creator panel.  This panel will include the drag creators and the color picker.  when clicked, this panel will be displayed in the target container (ie, sidebarContainer)  
     static setupToolsPanel(sidebarContainer: Doc, doc: Doc) {
         // setup a masonry view of all he creators
-- 
cgit v1.2.3-70-g09d2


From dac1b07c4b5ed42d50531e66ea3a1561f62ed11e Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <47069173+mamoush34@users.noreply.github.com>
Date: Sun, 9 Feb 2020 14:33:51 -0500
Subject: CleanUp

---
 src/client/documents/Documents.ts            |   1 -
 src/client/views/webcam/DashWebCam.tsx       | 396 ---------------------------
 src/client/views/webcam/DashWebRTC.scss      |  23 --
 src/client/views/webcam/DashWebRTC.ts        | 314 ---------------------
 src/client/views/webcam/DashWebRTCVideo.scss |  18 --
 src/client/views/webcam/DashWebRTCVideo.tsx  | 312 +--------------------
 src/client/views/webcam/WebCamLogic.js       |   6 -
 src/server/Message.ts                        |   2 -
 src/server/Websocket/Websocket.ts            |  47 ----
 9 files changed, 1 insertion(+), 1118 deletions(-)
 delete mode 100644 src/client/views/webcam/DashWebCam.tsx
 delete mode 100644 src/client/views/webcam/DashWebRTC.scss
 delete mode 100644 src/client/views/webcam/DashWebRTC.ts

(limited to 'src/server/Message.ts')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ba0f69846..7233fbea5 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -44,7 +44,6 @@ import { ComputedField, ScriptField } from "../../new_fields/ScriptField";
 import { ProxyField } from "../../new_fields/Proxy";
 import { DocumentType } from "./DocumentTypes";
 import { LinkFollowBox } from "../views/linking/LinkFollowBox";
-import { DashWebCam } from "../views/webcam/DashWebCam";
 import { PresElementBox } from "../views/presentationview/PresElementBox";
 import { DashWebRTCVideo } from "../views/webcam/DashWebRTCVideo";
 import { QueryBox } from "../views/nodes/QueryBox";
diff --git a/src/client/views/webcam/DashWebCam.tsx b/src/client/views/webcam/DashWebCam.tsx
deleted file mode 100644
index a9669750f..000000000
--- a/src/client/views/webcam/DashWebCam.tsx
+++ /dev/null
@@ -1,396 +0,0 @@
-import React = require("react");
-import { observer } from "mobx-react";
-import { FieldViewProps, FieldView } from "../nodes/FieldView";
-import { observable, action } from "mobx";
-import { DocumentDecorations } from "../DocumentDecorations";
-import { InkingControl } from "../InkingControl";
-import { CollectionFreeFormDocumentViewProps } from "../nodes/CollectionFreeFormDocumentView";
-import "../../views/nodes/WebBox.scss";
-
-
-//https://github.com/mozmorris/react-webcam is the source code used for the bigger part of this implementation. It's only modified to fit our current system.
-
-
-function hasGetUserMedia() {
-    return !!(
-        (navigator.mediaDevices && navigator.mediaDevices.getUserMedia));
-}
-
-interface WebcamProps {
-    audio: boolean;
-    audioConstraints?: MediaStreamConstraints["audio"];
-    imageSmoothing: boolean;
-    minScreenshotHeight?: number;
-    minScreenshotWidth?: number;
-    onUserMedia: () => void;
-    onUserMediaError: (error: string) => void;
-    screenshotFormat: "image/webp" | "image/png" | "image/jpeg";
-    screenshotQuality: number;
-    videoConstraints?: MediaStreamConstraints["video"];
-}
-
-interface WebcamState {
-    hasUserMedia: boolean;
-    src?: string;
-}
-
-@observer
-export class DashWebCam extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps & WebcamProps & React.HTMLAttributes<HTMLVideoElement> & {
-    layoutKey: string,
-}, WebcamState> {
-    static defaultProps = {
-        audio: true,
-        imageSmoothing: true,
-        onUserMedia: () => { },
-        onUserMediaError: () => { },
-        screenshotFormat: "image/webp",
-        screenshotQuality: 0.92
-    };
-
-    private static mountedInstances: DashWebCam[] = [];
-    private static userMediaRequested = false;
-    private canvas: HTMLCanvasElement | undefined;
-    private ctx: CanvasRenderingContext2D | null = null;
-    private stream: MediaStream | undefined;
-    private video: HTMLVideoElement | null | undefined;
-
-    // @observable private hasUserMedia: boolean | undefined;
-    // @observable private src: string | undefined;
-
-    constructor(props: any) {
-        super(props);
-        this.state = {
-            hasUserMedia: false
-        };
-    }
-
-    componentDidMount() {
-        if (!hasGetUserMedia()) return;
-
-        const { state } = this;
-
-        DashWebCam.mountedInstances.push(this);
-
-        if (!state.hasUserMedia && !DashWebCam.userMediaRequested) {
-            this.requestUserMedia();
-        }
-    }
-
-    componentDidUpdate(nextProps: WebcamProps) {
-        const { props } = this;
-        if (
-            JSON.stringify(nextProps.audioConstraints) !==
-            JSON.stringify(props.audioConstraints) ||
-            JSON.stringify(nextProps.videoConstraints) !==
-            JSON.stringify(props.videoConstraints)
-        ) {
-            this.requestUserMedia();
-        }
-    }
-
-    componentWillUnmount() {
-        const { state } = this;
-        const index = DashWebCam.mountedInstances.indexOf(this);
-        DashWebCam.mountedInstances.splice(index, 1);
-
-        DashWebCam.userMediaRequested = false;
-        if (DashWebCam.mountedInstances.length === 0 && state.hasUserMedia) {
-            if (this.stream!.getVideoTracks && this.stream!.getAudioTracks) {
-                this.stream!.getVideoTracks().map(track => track.stop());
-                this.stream!.getAudioTracks().map(track => track.stop());
-            } else {
-                ((this.stream as unknown) as MediaStreamTrack).stop();
-            }
-
-            if (state.src) {
-                window.URL.revokeObjectURL(state.src);
-            }
-        }
-    }
-
-    //These are for screenshot if wanted.
-
-    // getScreenshot() {
-    //     const { state, props } = this;
-
-    //     if (!state.hasUserMedia) return null;
-
-    //     const canvas = this.getCanvas();
-    //     return (
-    //         canvas &&
-    //         canvas.toDataURL(props.screenshotFormat, props.screenshotQuality)
-    //     );
-    // }
-
-    // getCanvas() {
-    //     const { state, props } = this;
-
-    //     if (!this.video) {
-    //         return null;
-    //     }
-
-    //     if (!state.hasUserMedia || !this.video.videoHeight) return null;
-
-    //     if (!this.ctx) {
-    //         const canvas = document.createElement("canvas");
-    //         const aspectRatio = this.video.videoWidth / this.video.videoHeight;
-
-    //         let canvasWidth = props.minScreenshotWidth || this.video.clientWidth;
-    //         let canvasHeight = canvasWidth / aspectRatio;
-
-    //         if (
-    //             props.minScreenshotHeight &&
-    //             canvasHeight < props.minScreenshotHeight
-    //         ) {
-    //             canvasHeight = props.minScreenshotHeight;
-    //             canvasWidth = canvasHeight * aspectRatio;
-    //         }
-
-    //         canvas.width = canvasWidth;
-    //         canvas.height = canvasHeight;
-
-    //         this.canvas = canvas;
-    //         this.ctx = canvas.getContext("2d");
-    //     }
-
-    //     const { ctx, canvas } = this;
-
-    //     if (ctx) {
-    //         ctx.imageSmoothingEnabled = props.imageSmoothing;
-    //         ctx.drawImage(this.video, 0, 0, canvas!.width, canvas!.height);
-    //     }
-
-    //     return canvas;
-    // }
-
-    requestUserMedia() {
-        const { props } = this;
-
-        navigator.getUserMedia =
-            navigator.mediaDevices.getUserMedia;
-
-        const sourceSelected = (audioConstraints: any, videoConstraints: any) => {
-            const constraints: MediaStreamConstraints = {
-                video: typeof videoConstraints !== "undefined" ? videoConstraints : true
-            };
-
-            if (props.audio) {
-                constraints.audio =
-                    typeof audioConstraints !== "undefined" ? audioConstraints : true;
-            }
-
-            navigator.mediaDevices
-                .getUserMedia(constraints)
-                .then(stream => {
-                    DashWebCam.mountedInstances.forEach(instance =>
-                        instance.handleUserMedia(null, stream)
-                    );
-                })
-                .catch(e => {
-                    DashWebCam.mountedInstances.forEach(instance =>
-                        instance.handleUserMedia(e)
-                    );
-                });
-        };
-
-        if ("mediaDevices" in navigator) {
-            sourceSelected(props.audioConstraints, props.videoConstraints);
-        } else {
-            const optionalSource = (id: any) => ({ optional: [{ sourceId: id }] });
-
-            const constraintToSourceId = (constraint: any) => {
-                const { deviceId } = constraint;
-
-                if (typeof deviceId === "string") {
-                    return deviceId;
-                }
-
-                if (Array.isArray(deviceId) && deviceId.length > 0) {
-                    return deviceId[0];
-                }
-
-                if (typeof deviceId === "object" && deviceId.ideal) {
-                    return deviceId.ideal;
-                }
-
-                return null;
-            };
-
-            // @ts-ignore: deprecated api
-            MediaStreamTrack.getSources(sources => {
-                let audioSource = null;
-                let videoSource = null;
-
-                sources.forEach((source: { kind: string; id: any; }) => {
-                    if (source.kind === "audio") {
-                        audioSource = source.id;
-                    } else if (source.kind === "video") {
-                        videoSource = source.id;
-                    }
-                });
-
-                const audioSourceId = constraintToSourceId(props.audioConstraints);
-                if (audioSourceId) {
-                    audioSource = audioSourceId;
-                }
-
-                const videoSourceId = constraintToSourceId(props.videoConstraints);
-                if (videoSourceId) {
-                    videoSource = videoSourceId;
-                }
-
-                sourceSelected(
-                    optionalSource(audioSource),
-                    optionalSource(videoSource)
-                );
-            });
-        }
-
-        DashWebCam.userMediaRequested = true;
-    }
-
-    handleUserMedia(err: string | null, stream?: MediaStream) {
-        const { props } = this;
-
-        if (err || !stream) {
-            this.setState({ hasUserMedia: false });
-            // action(() => this.hasUserMedia = false);
-            props.onUserMediaError(err!);
-
-            return;
-        }
-
-        this.stream = stream;
-
-        console.log("Stream done: ", stream);
-
-        try {
-            if (this.video) {
-                this.video.srcObject = stream;
-                console.log("Source  object: ", stream);
-
-            }
-            this.setState({ hasUserMedia: true });
-            // action(() => this.hasUserMedia = true);
-
-        } catch (error) {
-            this.setState({
-                hasUserMedia: true,
-                src: window.URL.createObjectURL(stream)
-            });
-            console.log("State  src set: ", this.state.src);
-
-            // action(() => this.hasUserMedia = true);
-            // action(() => this.src = window.URL.createObjectURL(stream));
-        }
-
-        props.onUserMedia();
-    }
-
-    _ignore = 0;
-    onPreWheel = (e: React.WheelEvent) => {
-        this._ignore = e.timeStamp;
-    }
-    onPrePointer = (e: React.PointerEvent) => {
-        this._ignore = e.timeStamp;
-    }
-    onPostPointer = (e: React.PointerEvent) => {
-        if (this._ignore !== e.timeStamp) {
-            e.stopPropagation();
-        }
-    }
-    onPostWheel = (e: React.WheelEvent) => {
-        if (this._ignore !== e.timeStamp) {
-            e.stopPropagation();
-        }
-    }
-
-
-
-
-    public static LayoutString(fieldKey: string) { return FieldView.LayoutString(DashWebCam, fieldKey); }
-
-    render() {
-        const { state, props } = this;
-
-
-
-        const {
-            audio,
-            onUserMedia,
-            onUserMediaError,
-            screenshotFormat,
-            screenshotQuality,
-            minScreenshotWidth,
-            minScreenshotHeight,
-            audioConstraints,
-            videoConstraints,
-            imageSmoothing,
-            fieldKey,
-            fitToBox,
-            ContainingCollectionView,
-            Document,
-            DataDoc,
-            onClick,
-            isSelected,
-            select,
-            renderDepth,
-            addDocument,
-            addDocTab,
-            pinToPres,
-            removeDocument,
-            moveDocument,
-            ScreenToLocalTransform,
-            active,
-            whenActiveChanged,
-            focus,
-            PanelWidth,
-            PanelHeight,
-            setVideoBox,
-            ContentScaling,
-            ChromeHeight,
-            jitterRotation,
-            backgroundColor,
-            bringToFront,
-            zoomToScale,
-            getScale,
-            animateBetweenIcon,
-            layoutKey,
-            ...rest
-        } = props;
-
-        console.log("Source produced: ", state.src);
-
-
-
-        let content =
-            <div className="webcam-cont" style={{ width: "100%", height: "100%" }} onWheel={this.onPostWheel} onPointerDown={this.onPostPointer} onPointerMove={this.onPostPointer} onPointerUp={this.onPostPointer}>
-                <video
-                    autoPlay
-                    src={state.src}
-                    muted={!audio}
-                    playsInline
-                    ref={ref => {
-                        console.log("Source produced: ", state.src);
-                        console.log("HasUser Media produced: ", state.hasUserMedia);
-
-                        this.video = ref;
-                    }}
-                    {...rest}
-                />
-            </div>;
-
-
-        let frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
-        let classname = "webBox-cont" + (this.props.isSelected() && !InkingControl.Instance.selectedTool && !DocumentDecorations.Instance.Interacting ? "-interactive" : "");
-
-        return (
-            <>
-                <div className={classname}  >
-                    {content}
-                </div>
-                {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
-            </>);
-
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTC.scss b/src/client/views/webcam/DashWebRTC.scss
deleted file mode 100644
index ddf4777a8..000000000
--- a/src/client/views/webcam/DashWebRTC.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.webcam-cont {
-    button {
-        margin: 10px;
-        position: relative;
-        top: 20%;
-        left: -60%;
-    }
-
-    #localVideo {
-        margin: 10px;
-        position: relative;
-        width: 300px;
-        max-height: 300px;
-    }
-
-    #remoteVideo {
-        margin: 10px;
-        position: relative;
-        width: 300px;
-        max-height: 300px;
-
-    }
-}
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTC.ts b/src/client/views/webcam/DashWebRTC.ts
deleted file mode 100644
index ef5ecf0fc..000000000
--- a/src/client/views/webcam/DashWebRTC.ts
+++ /dev/null
@@ -1,314 +0,0 @@
-// import { DocServer } from '../../DocServer';
-// import { Utils } from '../../../Utils';
-// import { MessageStore } from '../../../server/Message';
-
-
-
-// /**
-//  * This namespace will have the code required to have functionality code for the usage of webRTC.
-//  */
-// export class DashWebRTC {
-
-
-//     private isChannelReady = false;
-//     private isInitiator = false;
-//     private isStarted = false;
-//     localStream: MediaStream | undefined;
-//     private pc: any;
-//     remoteStream: MediaStream | undefined;
-//     private turnReady: boolean | undefined;
-//     localVideo: HTMLVideoElement | undefined;
-//     remoteVideo: HTMLVideoElement | undefined;
-//     curRoom: string = "";
-
-
-//     private pcConfig: any;
-//     private sdpConstraints: any;
-
-//     constructor() {
-//         this.pcConfig = {
-//             'iceServers': [{
-//                 'urls': 'stun:stun.l.google.com:19302'
-//             }]
-//         };
-
-//         // Set up audio and video regardless of what devices are present.
-//         this.sdpConstraints = {
-//             offerToReceiveAudio: true,
-//             offerToReceiveVideo: true
-//         };
-//     }
-
-
-
-//     init(room: string) {
-
-//         this.curRoom = room;
-//         let self = this;
-
-//         if (room !== '') {
-//             DocServer._socket.emit('create or join', room);
-//             console.log('Attempted to create or  join room', room);
-
-//         }
-
-//         DocServer._socket.on('created', function (room: string) {
-//             console.log('Created room ' + room);
-//             self.isInitiator = true;
-//         });
-
-//         DocServer._socket.on('full', function (room: string) {
-//             console.log('Room ' + room + ' is full');
-//         });
-
-//         DocServer._socket.on('join', function (room: string) {
-//             console.log('Another peer made a request to join room ' + room);
-//             console.log('This peer is the initiator of room ' + room + '!');
-//             self.isChannelReady = true;
-//         });
-
-
-//         DocServer._socket.on('joined', function (room: string) {
-//             console.log('joined: ' + room);
-//             self.isChannelReady = true;
-//         });
-
-
-//         DocServer._socket.on('log', function (array: any) {
-//             console.log.apply(console, array);
-//         });
-
-//         // This client receives a message
-//         DocServer._socket.on('message', function (message: any) {
-//             console.log('Client received message:', message);
-//             if (message.message === 'got user media') {
-//                 self.maybeStart();
-//             } else if (message.message.type === 'offer') {
-//                 if (!self.isInitiator && !self.isStarted) {
-//                     self.maybeStart();
-//                 }
-//                 self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-//                 self.doAnswer();
-//             } else if (message.message.type === 'answer' && self.isStarted) {
-//                 self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-//             } else if (message.message.type === 'candidate' && self.isStarted) {
-//                 let candidate = new RTCIceCandidate({
-//                     sdpMLineIndex: message.message.label,
-//                     candidate: message.message.candidate
-//                 });
-//                 self.pc.addIceCandidate(candidate);
-//             } else if (message === 'bye' && self.isStarted) {
-//                 self.handleRemoteHangup();
-//             }
-//         });
-
-//         navigator.mediaDevices.getUserMedia({
-//             audio: false,
-//             video: true
-//         })
-//             .then(this.gotStream)
-//             .catch(function (e) {
-//                 alert('getUserMedia() error: ' + e.name);
-//             });
-
-//         //Trying this one out!!!
-//         console.log('Getting user media with constraints', this.constraints);
-
-//         if (location.hostname !== 'localhost') {
-//             this.requestTurn(
-//                 'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
-//             );
-//         }
-
-
-//     }
-
-
-//     sendMessage(message: any) {
-//         console.log('Client sending message: ', message);
-//         Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: this.curRoom });
-//         //DocServer._socket.emit('message', message);
-//     }
-
-
-
-
-
-//     setVideoObjects(localVideo: HTMLVideoElement, remoteVideo: HTMLVideoElement) {
-//         this.localVideo = localVideo;
-//         this.remoteVideo = remoteVideo;
-//     }
-
-//     setLocalVideoObject(localVideoRef: HTMLVideoElement) {
-//         this.localVideo = localVideoRef;
-//     }
-
-//     setRemoteVideoObject(remoteVideoRef: HTMLVideoElement) {
-//         this.remoteVideo = remoteVideoRef;
-//     }
-
-
-
-
-//     gotStream(stream: any) {
-//         console.log('Adding local stream.');
-//         this.localStream = stream;
-//         this.localVideo!.srcObject = stream;
-//         this.sendMessage('got user media');
-//         if (this.isInitiator) {
-//             this.maybeStart();
-//         }
-//     }
-
-//     constraints = {
-//         video: true,
-//         audio: true
-//     };
-
-
-
-
-
-//     maybeStart() {
-//         console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
-//         if (!this.isStarted && typeof this.localStream !== 'undefined' && this.isChannelReady) {
-//             console.log('>>>>>> creating peer connection');
-//             this.createPeerConnection();
-//             this.pc.addStream(this.localStream);
-//             this.isStarted = true;
-//             console.log('isInitiator', this.isInitiator);
-//             if (this.isInitiator) {
-//                 this.doCall();
-//             }
-//         }
-//     }
-
-
-//     // //this will need to be changed to our version of hangUp
-//     // window.onbeforeunload = function () {
-//     //     sendMessage('bye');
-//     // };
-
-//     createPeerConnection() {
-//         try {
-//             this.pc = new RTCPeerConnection(undefined);
-//             this.pc.onicecandidate = this.handleIceCandidate;
-//             this.pc.onaddstream = this.handleRemoteStreamAdded;
-//             this.pc.onremovestream = this.handleRemoteStreamRemoved;
-//             console.log('Created RTCPeerConnnection');
-//         } catch (e) {
-//             console.log('Failed to create PeerConnection, exception: ' + e.message);
-//             alert('Cannot create RTCPeerConnection object.');
-//             return;
-//         }
-//     }
-
-//     handleIceCandidate(event: any) {
-//         console.log('icecandidate event: ', event);
-//         if (event.candidate) {
-//             this.sendMessage({
-//                 type: 'candidate',
-//                 label: event.candidate.sdpMLineIndex,
-//                 id: event.candidate.sdpMid,
-//                 candidate: event.candidate.candidate
-//             });
-//         } else {
-//             console.log('End of candidates.');
-//         }
-//     }
-
-//     handleCreateOfferError(event: any) {
-//         console.log('createOffer() error: ', event);
-//     }
-
-//     doCall() {
-//         console.log('Sending offer to peer');
-//         this.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
-//     }
-
-//     doAnswer() {
-//         console.log('Sending answer to peer.');
-//         this.pc.createAnswer().then(
-//             this.setLocalAndSendMessage,
-//             this.onCreateSessionDescriptionError
-//         );
-//     }
-
-//     setLocalAndSendMessage(sessionDescription: any) {
-//         this.pc.setLocalDescription(sessionDescription);
-//         console.log('setLocalAndSendMessage sending message', sessionDescription);
-//         this.sendMessage(sessionDescription);
-//     }
-
-//     onCreateSessionDescriptionError(error: any) {
-//         console.log('Failed to create session description: ' + error.toString());
-//     }
-
-
-//     requestTurn(turnURL: any) {
-//         var turnExists = false;
-//         let self = this;
-//         for (var i in this.pcConfig.iceServers) {
-//             if (this.pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
-//                 turnExists = true;
-//                 this.turnReady = true;
-//                 break;
-//             }
-//         }
-//         if (!turnExists) {
-//             console.log('Getting TURN server from ', turnURL);
-//             // No TURN server. Get one from computeengineondemand.appspot.com:
-//             var xhr = new XMLHttpRequest();
-//             xhr.onreadystatechange = function () {
-//                 if (xhr.readyState === 4 && xhr.status === 200) {
-//                     var turnServer = JSON.parse(xhr.responseText);
-//                     console.log('Got TURN server: ', turnServer);
-//                     self.pcConfig.iceServers.push({
-//                         'urls': 'turn:' + turnServer.username + '@' + turnServer.turn,
-//                         //'credential': turnServer.password
-//                     });
-//                     self.turnReady = true;
-//                 }
-//             };
-//             xhr.open('GET', turnURL, true);
-//             xhr.send();
-//         }
-//     }
-
-//     handleRemoteStreamAdded(event: MediaStreamEvent) {
-//         console.log('Remote stream added.');
-//         this.remoteStream = event.stream!;
-//         this.remoteVideo!.srcObject = this.remoteStream;
-//     }
-
-//     handleRemoteStreamRemoved(event: MediaStreamEvent) {
-//         console.log('Remote stream removed. Event: ', event);
-//     }
-
-//     hangup() {
-//         console.log('Hanging up.');
-//         if (this.pc) {
-//             stop();
-//             this.sendMessage('bye');
-//         }
-
-//         if (this.localStream) {
-//             this.localStream.getTracks().forEach(track => track.stop());
-//         }
-
-//     }
-
-//     handleRemoteHangup() {
-//         console.log('Session terminated.');
-//         stop();
-//         this.isInitiator = false;
-//     }
-
-//     stop() {
-//         this.isStarted = false;
-//         this.pc.close();
-//         this.pc = null;
-//     }
-
-
-// }
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.scss b/src/client/views/webcam/DashWebRTCVideo.scss
index 052832db5..2f35eeca2 100644
--- a/src/client/views/webcam/DashWebRTCVideo.scss
+++ b/src/client/views/webcam/DashWebRTCVideo.scss
@@ -1,7 +1,6 @@
 @import "../globalCssVariables";
 
 .webcam-cont {
-    // position: absolute;
     background: whitesmoke;
     color: grey;
     border-radius: 15px;
@@ -27,15 +26,6 @@
         border: 1px solid #BBBBBBBB;
     }
 
-    // #localVideo {
-    //     width: 50%;
-    //     height: 50%;
-    //     position: relative;
-    //     // top: 65%;
-    //     // z-index: 2;
-    //     // right: 5%;
-    // }
-
     .side {
         width: 25%;
         height: 20%;
@@ -53,12 +43,4 @@
         align-self: center;
     }
 
-    // #remoteVideo {
-    //     position: relative;
-    //     width: 50%;
-    //     height: 50%;
-    //     // top: 20%;
-    //     // align-self: center;
-    // }
-
 }
\ No newline at end of file
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index f93d4a662..0eefbbc91 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -8,60 +8,19 @@ import { InkingControl } from "../InkingControl";
 import "../../views/nodes/WebBox.scss";
 import "./DashWebRTCVideo.scss";
 import adapter from 'webrtc-adapter';
-import { DocServer } from "../../DocServer";
-import { DocumentView } from "../nodes/DocumentView";
-import { Utils } from "../../../Utils";
-import { MessageStore } from "../../../server/Message";
 import { initialize, hangup } from "./WebCamLogic";
 
-const mediaStreamConstraints = {
-    video: true,
-};
-
-const offerOptions = {
-    offerToReceiveVideo: 1,
-};
-
 /**
  * This models the component that will be rendered, that can be used as a doc that will reflect the video cams.
  */
 @observer
 export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentViewProps & FieldViewProps> {
-    @observable private localVideoEl: HTMLVideoElement | undefined;
-    @observable private peerVideoEl: HTMLVideoElement | undefined;
+
     private roomText: HTMLInputElement | undefined;
-    // private roomOfCam: string = "";
-    // private isChannelReady = false;
-    // private isInitiator = false;
-    // private isStarted = false;
     @observable remoteVideoAdded: boolean = false;
-    // localStream: MediaStream | undefined;
-    // private pc: any;
-    // remoteStream: MediaStream | undefined;
-    // private turnReady: boolean | undefined;
-    // //localVideo: HTMLVideoElement | undefined;
-    // //remoteVideo: HTMLVideoElement | undefined;
-    // curRoom: string = "";
-
-    // private pcConfig = {
-    //     'iceServers': [{
-    //         'urls': 'stun:stun.l.google.com:19302'
-    //     }]
-    // };
-
-    // // Set up audio and video regardless of what devices are present.
-    // private sdpConstraints = {
-    //     offerToReceiveAudio: true,
-    //     offerToReceiveVideo: true
-    // };
 
     componentDidMount() {
         DocumentDecorations.Instance.addCloseCall(this.closeConnection);
-        // setTimeout(() => initialize(), 10000);
-        // let self = this;
-        // window.onbeforeunload = function () {
-        //     self.sendMessage('bye');
-        // };
     }
 
     closeConnection: CloseCall = () => {
@@ -73,273 +32,6 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
         this.remoteVideoAdded = true;
     }
 
-    // componentWillUnmount() {
-    // }
-
-
-    // init(room: string) {
-
-    //     this.curRoom = room;
-    //     let self = this;
-
-    //     if (room !== '') {
-    //         DocServer._socket.emit('create or join', room);
-    //         console.log('Attempted to create or  join room', room);
-
-    //     }
-
-    //     DocServer._socket.on('created', function (room: string) {
-    //         console.log('Created room ' + room);
-    //         self.isInitiator = true;
-    //     });
-
-    //     DocServer._socket.on('full', function (room: string) {
-    //         console.log('Room ' + room + ' is full');
-    //     });
-
-    //     DocServer._socket.on('join', function (room: string) {
-    //         console.log('Another peer made a request to join room ' + room);
-    //         console.log('This peer is the initiator of room ' + room + '!');
-    //         self.isChannelReady = true;
-    //     });
-
-
-    //     DocServer._socket.on('joined', function (room: string) {
-    //         console.log('joined: ' + room);
-    //         self.isChannelReady = true;
-    //     });
-
-
-    //     DocServer._socket.on('log', function (array: any) {
-    //         console.log.apply(console, array);
-    //     });
-
-    //     // This client receives a message
-    //     DocServer._socket.on('message', async function (message: any) {
-    //         console.log('Client received message:', message);
-    //         if (message.message === 'got user media') {
-    //             self.maybeStart();
-    //         } else if (message.message.type === 'offer') {
-    //             if (!self.isInitiator && !self.isStarted) {
-    //                 self.maybeStart();
-    //             }
-    //             await self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-    //             self.doAnswer();
-    //         } else if (message.message.type === 'answer' && self.isStarted) {
-    //             await self.pc.setRemoteDescription(new RTCSessionDescription(message.message));
-    //         } else if (message.message.type === 'candidate' && self.isStarted) {
-    //             let candidate = new RTCIceCandidate({
-    //                 sdpMLineIndex: message.message.label,
-    //                 candidate: message.message.candidate
-    //             });
-    //             self.pc.addIceCandidate(candidate);
-    //         } else if (message.message === 'bye' && self.isStarted) {
-    //             self.handleRemoteHangup();
-    //         }
-    //     });
-
-    //     navigator.mediaDevices.getUserMedia({
-    //         audio: true,
-    //         video: true
-    //     })
-    //         .then(this.gotStream)
-    //         .catch(function (e) {
-    //             alert('getUserMedia() error: ' + e.name);
-    //         });
-
-    //     //Trying this one out!!!
-    //     console.log('Getting user media with constraints', this.constraints);
-
-    //     if (location.hostname !== 'localhost') {
-    //         this.requestTurn(
-    //             'https://computeengineondemand.appspot.com/turn?username=41784574&key=4080218913'
-    //         );
-    //     }
-
-
-    // }
-
-
-    // private sendMessage = (message: any) => {
-    //     console.log('Client sending message: ', message);
-    //     Utils.Emit(DocServer._socket, MessageStore.NotifyRoommates, { message: message, room: this.curRoom });
-    //     //DocServer._socket.emit('message', message);
-    // }
-
-
-
-    // private gotStream = (stream: any) => {
-    //     console.log('Adding local stream.');
-    //     this.localStream = stream;
-    //     this.localVideoEl!.srcObject = stream;
-    //     this.sendMessage('got user media');
-    //     if (this.isInitiator) {
-    //         this.maybeStart();
-    //     }
-    // }
-
-    // constraints = {
-    //     video: true,
-    //     audio: true
-    // };
-
-
-
-
-
-    // private maybeStart = () => {
-    //     console.log('>>>>>>> maybeStart() ', this.isStarted, this.localStream, this.isChannelReady);
-    //     if (!this.isStarted && typeof this.localStream !== 'undefined' && this.isChannelReady) {
-    //         console.log('>>>>>> creating peer connection');
-    //         this.createPeerConnection();
-    //         this.pc.addStream(this.localStream);
-    //         this.isStarted = true;
-    //         console.log('isInitiator', this.isInitiator);
-    //         if (this.isInitiator) {
-    //             this.doCall();
-    //         }
-    //     }
-    // }
-
-
-    // // //this will need to be changed to our version of hangUp
-    // // window.onbeforeunload = function () {
-    // //     sendMessage('bye');
-    // // };
-
-    // private createPeerConnection = () => {
-    //     try {
-    //         this.pc = new RTCPeerConnection(undefined);
-    //         this.pc.onicecandidate = this.handleIceCandidate;
-    //         this.pc.onaddstream = this.handleRemoteStreamAdded;
-    //         this.pc.onremovestream = this.handleRemoteStreamRemoved;
-    //         console.log('Created RTCPeerConnnection');
-    //     } catch (e) {
-    //         console.log('Failed to create PeerConnection, exception: ' + e.message);
-    //         alert('Cannot create RTCPeerConnection object.');
-    //         return;
-    //     }
-    // }
-
-    // private handleIceCandidate = (event: any) => {
-    //     console.log('icecandidate event: ', event);
-    //     if (event.candidate) {
-    //         this.sendMessage({
-    //             type: 'candidate',
-    //             label: event.candidate.sdpMLineIndex,
-    //             id: event.candidate.sdpMid,
-    //             candidate: event.candidate.candidate
-    //         });
-    //     } else {
-    //         console.log('End of candidates.');
-    //     }
-    // }
-
-    // private handleCreateOfferError = (event: any) => {
-    //     console.log('createOffer() error: ', event);
-    // }
-
-    // private doCall = () => {
-    //     console.log('Sending offer to peer');
-    //     this.pc.createOffer(this.setLocalAndSendMessage, this.handleCreateOfferError);
-    // }
-
-    // private doAnswer = () => {
-    //     console.log('Sending answer to peer.');
-    //     this.pc.createAnswer().then(
-    //         this.setLocalAndSendMessage,
-    //         this.onCreateSessionDescriptionError
-    //     );
-    // }
-
-    // private setLocalAndSendMessage = (sessionDescription: any) => {
-    //     this.pc.setLocalDescription(sessionDescription);
-    //     console.log('setLocalAndSendMessage sending message', sessionDescription);
-    //     this.sendMessage(sessionDescription);
-    // }
-
-    // private onCreateSessionDescriptionError = (error: any) => {
-    //     console.log('Failed to create session description: ' + error.toString());
-    // }
-
-
-    // private requestTurn = (turnURL: any) => {
-    //     var turnExists = false;
-    //     let self = this;
-    //     for (var i in this.pcConfig.iceServers) {
-    //         if (this.pcConfig.iceServers[i].urls.substr(0, 5) === 'turn:') {
-    //             turnExists = true;
-    //             this.turnReady = true;
-    //             break;
-    //         }
-    //     }
-    //     if (!turnExists) {
-    //         console.log('Getting TURN server from ', turnURL);
-    //         // No TURN server. Get one from computeengineondemand.appspot.com:
-    //         var xhr = new XMLHttpRequest();
-    //         xhr.onreadystatechange = function () {
-    //             if (xhr.readyState === 4 && xhr.status === 200) {
-    //                 var turnServer = JSON.parse(xhr.responseText);
-    //                 console.log('Got TURN server: ', turnServer);
-    //                 self.pcConfig.iceServers.push({
-    //                     'urls': 'turn:' + turnServer.username + '@' + turnServer.turn,
-    //                     //'credential': turnServer.password
-    //                 });
-    //                 self.turnReady = true;
-    //             }
-    //         };
-    //         xhr.open('GET', turnURL, true);
-    //         xhr.send();
-    //     }
-    // }
-    // @action
-    // private handleRemoteStreamAdded = (event: MediaStreamEvent) => {
-    //     console.log('Remote stream added.');
-    //     this.remoteStream = event.stream!;
-    //     this.peerVideoEl!.srcObject = this.remoteStream;
-    //     this.remoteVideoAdded = true;
-    // }
-
-    // private handleRemoteStreamRemoved = (event: MediaStreamEvent) => {
-    //     console.log('Remote stream removed. Event: ', event);
-    // }
-
-    // private hangup = () => {
-    //     console.log('Hanging up.');
-    //     if (this.pc) {
-    //         stop();
-    //         this.sendMessage('bye');
-    //     }
-
-    //     if (this.localStream) {
-    //         this.localStream.getTracks().forEach(track => track.stop());
-    //     }
-
-    // }
-
-    // private handleRemoteHangup = () => {
-    //     console.log('Session terminated.');
-    //     this.stop();
-    //     this.isInitiator = false;
-
-    //     if (this.localStream) {
-    //         this.localStream.getTracks().forEach(track => track.stop());
-    //     }
-
-
-    // }
-
-    // private stop = () => {
-    //     this.isStarted = false;
-    //     this.pc.close();
-    //     this.pc = null;
-    // }
-
-
-
-
-
-
     /**
       * Function that submits the title entered by user on enter press.
       */
@@ -379,10 +71,8 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
                 <div className="webcam-header">DashWebRTC</div>
                 <input id="roomName" type="text" placeholder="Enter room name" ref={(e) => this.roomText = e!} onKeyDown={this.onEnterKeyDown} />
                 <video id="localVideo" className={"RTCVideo" + (this.remoteVideoAdded ? " side" : " main")} autoPlay playsInline ref={(e) => {
-                    this.localVideoEl = e!;
                 }}></video>
                 <video id="remoteVideo" className="RTCVideo main" autoPlay playsInline ref={(e) => {
-                    this.peerVideoEl = e!;
                 }}></video>
 
             </div >;
diff --git a/src/client/views/webcam/WebCamLogic.js b/src/client/views/webcam/WebCamLogic.js
index ec8b2e8bf..a7af9c2c4 100644
--- a/src/client/views/webcam/WebCamLogic.js
+++ b/src/client/views/webcam/WebCamLogic.js
@@ -28,8 +28,6 @@ export function initialize(roomName, handlerUI) {
     /////////////////////////////////////////////
 
     room = roomName;
-    // Could prompt for room name:
-    // room = prompt('Enter room name:');
 
     socket = io.connect(`${window.location.protocol}//${window.location.hostname}:${4321}`);
 
@@ -94,10 +92,6 @@ export function initialize(roomName, handlerUI) {
     var localVideo = document.querySelector('#localVideo');
     var remoteVideo = document.querySelector('#remoteVideo');
 
-
-    console.log("Local Video: ", localVideo);
-    console.log("Remote Video: ", remoteVideo);
-
     const gotStream = (stream) => {
         console.log('Adding local stream.');
         localStream = stream;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 6ce5cd96a..79b6fa1e0 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -64,8 +64,6 @@ export namespace MessageStore {
     export const YoutubeApiQuery = new Message<YoutubeQueryInput>("Youtube Api Query");
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
-    export const NotifyRoommates = new Message<RoomMessage>("message");
-    export const HangUpCall = new Message<string>("bye");
 
 
 }
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index b4cd2dbe2..ba7ca8f35 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -19,7 +19,6 @@ export namespace WebSocket {
     const clients: { [key: string]: Client } = {};
     export const socketMap = new Map<SocketIO.Socket, string>();
     export let disconnect: Function;
-    let endpoint: io.Server;
 
 
     export async function start(isRelease: boolean) {
@@ -107,9 +106,6 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
-            //Utils.AddServerHandler(socket, MessageStore.NotifyRoommates, message => HandleRoommateNotification(socket, message));
-            //Utils.AddServerHandler(socket, MessageStore.HangUpCall, message => HandleHangUp(socket, message));
-            //Utils.AddRoomHandler(socket, "create or join", HandleCreateOrJoin);
 
             disconnect = () => {
                 socket.broadcast.emit("connection_terminated", Date.now());
@@ -122,49 +118,6 @@ export namespace WebSocket {
         logPort("websocket", socketPort);
     }
 
-
-    function HandleRoommateNotification(socket: Socket, message: RoomMessage) {
-        //socket.broadcast.emit('message', message);
-        console.log("The room that sent this: ", message.room, " and message is : ", message.message);
-        endpoint.sockets.in(message.room).emit('message', message);
-
-    }
-
-    function HandleCreateOrJoin(socket: io.Socket, room: string) {
-        console.log("Received request to create or join room " + room);
-
-
-        let clientsInRoom = endpoint.sockets.adapter.rooms[room];
-        let numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;
-        console.log('Room ' + room + ' now has ' + numClients + ' client(s)');
-
-
-        if (numClients === 0) {
-            socket.join(room);
-            console.log('Client ID ' + socket.id + ' created room ' + room);
-            socket.emit('created', room, socket.id);
-
-        } else if (numClients === 1) {
-            console.log('Client ID ' + socket.id + ' joined room ' + room);
-            endpoint.sockets.in(room).emit('join', room);
-            socket.join(room);
-            socket.emit('joined', room, socket.id);
-            endpoint.sockets.in(room).emit('ready');
-
-        } else {
-            socket.emit('full', room);
-        }
-
-
-
-
-
-    }
-
-    function HandleHangUp(socket: io.Socket, message: string) {
-        console.log("Receive bye from someone");
-    }
-
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
         const { ProjectCredentials } = GoogleCredentialsLoader;
         switch (query.type) {
-- 
cgit v1.2.3-70-g09d2


From e8fcbbf57b2a2f443d9c280ce10558cf9d51c632 Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Sun, 9 Feb 2020 17:11:24 -0500
Subject: can upload collection from mobile to desktop

---
 src/client/DocServer.ts                            |   9 +-
 src/client/util/DragManager.ts                     |   2 +-
 .../collections/CollectionMasonryViewFieldRow.tsx  |   1 +
 .../views/collections/CollectionStackingView.tsx   |   2 +
 .../CollectionStackingViewFieldColumn.tsx          |   1 +
 src/client/views/collections/CollectionSubView.tsx |   2 +-
 src/client/views/collections/CollectionView.tsx    |   2 +-
 .../views/collections/CollectionViewChromes.tsx    |   1 +
 src/mobile/ImageUpload.tsx                         |   1 +
 src/mobile/MobileInkOverlay.tsx                    |  53 +++++++-
 src/mobile/MobileInterface.scss                    |   8 ++
 src/mobile/MobileInterface.tsx                     | 150 ++++++++++++---------
 src/server/ApiManagers/UploadManager.ts            |   1 +
 src/server/Message.ts                              |   6 +
 src/server/Websocket/Websocket.ts                  |   7 +-
 .../authentication/models/current_user_utils.ts    |  21 +--
 src/server/server_Initialization.ts                |  24 ++--
 17 files changed, 195 insertions(+), 96 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index c03764471..e09251855 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,5 +1,5 @@
 import * as OpenSocket from 'socket.io-client';
-import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "./../server/Message";
+import { MessageStore, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent } from "./../server/Message";
 import { Opt, Doc } from '../new_fields/Doc';
 import { Utils, emptyFunction } from '../Utils';
 import { SerializationHelper } from './util/SerializationHelper';
@@ -81,6 +81,10 @@ export namespace DocServer {
             Utils.Emit(_socket, MessageStore.UpdateMobileInkOverlayPosition, content);
         }
 
+        export function dispatchMobileDocumentUpload(content: MobileDocumentUploadContent) {
+            Utils.Emit(_socket, MessageStore.MobileDocumentUpload, content);
+        }
+
     }
 
     export function init(protocol: string, hostname: string, port: number, identifier: string) {
@@ -116,6 +120,9 @@ export namespace DocServer {
         _socket.addEventListener("receiveUpdateOverlayPosition", (content: UpdateMobileInkOverlayPositionContent) => {
             MobileInkOverlay.Instance.updatePosition(content);
         });
+        _socket.addEventListener("receiveMobileDocumentUpload", (content: MobileDocumentUploadContent) => {
+            MobileInkOverlay.Instance.uploadDocument(content);
+        });
     }
 
     function errorFunc(): never {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index df2f5fe3c..0bb8b531d 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -179,7 +179,7 @@ export namespace DragManager {
             );
         }
         element.dataset.canDrop = "true";
-        const handler = (e: Event) => dropFunc(e, (e as CustomEvent<DropEvent>).detail);
+        const handler = (e: Event) => { console.log("drop target reveied docs"); dropFunc(e, (e as CustomEvent<DropEvent>).detail); };
         element.addEventListener("dashOnDrop", handler);
         return () => {
             element.removeEventListener("dashOnDrop", handler);
diff --git a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
index 80752303c..26e0cc35a 100644
--- a/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
+++ b/src/client/views/collections/CollectionMasonryViewFieldRow.tsx
@@ -73,6 +73,7 @@ export class CollectionMasonryViewFieldRow extends React.Component<CMVFieldRowPr
 
     @undoBatch
     rowDrop = action((e: Event, de: DragManager.DropEvent) => {
+        console.log("masronry row drop");
         this._createAliasSelected = false;
         if (de.complete.docDragData) {
             (this.props.parent.Document.dropConverter instanceof ScriptField) &&
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 992820fc7..83c90810e 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -240,6 +240,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @undoBatch
     @action
     drop = (e: Event, de: DragManager.DropEvent) => {
+        console.log("DROP STACKIN G2");
         const where = [de.x, de.y];
         let targInd = -1;
         let plusOne = 0;
@@ -270,6 +271,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     @undoBatch
     @action
     onDrop = async (e: React.DragEvent): Promise<void> => {
+        console.log("DROP STACKING");
         const where = [e.clientX, e.clientY];
         let targInd = -1;
         this._docXfs.map((cd, i) => {
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 39b4e4e1d..65c4b3195 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -57,6 +57,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     @undoBatch
     columnDrop = action((e: Event, de: DragManager.DropEvent) => {
+        console.log("column drop stacking");
         this._createAliasSelected = false;
         if (de.complete.docDragData) {
             const key = StrCast(this.props.parent.props.Document.sectionFilter);
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index e94f24f2c..b35af2314 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -6,7 +6,7 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import { listSpec } from "../../../new_fields/Schema";
 import { ScriptField } from "../../../new_fields/ScriptField";
-import { Cast } from "../../../new_fields/Types";
+import { Cast, StrCast } from "../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../server/authentication/models/current_user_utils";
 import { Utils } from "../../../Utils";
 import { DocServer } from "../../DocServer";
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 88023783b..1d399e26f 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -138,7 +138,7 @@ export class CollectionView extends Touchable<FieldViewProps> {
         let index = value.reduce((p, v, i) => (v instanceof Doc && v === doc) ? i : p, -1);
         index = index !== -1 ? index : value.reduce((p, v, i) => (v instanceof Doc && Doc.AreProtosEqual(v, doc)) ? i : p, -1);
 
-        ContextMenu.Instance.clearItems();
+        ContextMenu.Instance && ContextMenu.Instance.clearItems();
         if (index !== -1) {
             value.splice(index, 1);
             return true;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index a870b6043..01dc21f95 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -231,6 +231,7 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
 
     @action
     toggleCollapse = () => {
+        console.log("toggle collapse");
         this.props.CollectionView.props.Document.chromeStatus = this.props.CollectionView.props.Document.chromeStatus === "enabled" ? "collapsed" : "enabled";
         if (this.props.collapse) {
             this.props.collapse(this.props.CollectionView.props.Document.chromeStatus !== "enabled");
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 3304e8e22..10bd78075 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -47,6 +47,7 @@ class Uploader extends React.Component {
 
                     const upload = window.location.origin + "/upload";
                     this.status = "uploading image";
+                    console.log("uploading image", formData);
                     const res = await fetch(upload, {
                         method: 'POST',
                         body: formData
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 6b65aa436..ed4cca5b9 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -1,9 +1,13 @@
 import React = require('react');
 import { observer } from "mobx-react";
-import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent } from "../server/Message";
+import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent } from "../server/Message";
 import { observable, action } from "mobx";
 import { GestureUtils } from "../pen-gestures/GestureUtils";
 import "./MobileInkOverlay.scss";
+import { StrCast } from '../new_fields/Types';
+import { DragManager } from "../client/util/DragManager";
+import { DocServer } from '../client/DocServer';
+import { Doc } from '../new_fields/Doc';
 
 
 @observer
@@ -67,7 +71,7 @@ export default class MobileInkOverlay extends React.Component {
             height: bounds.height * this._scale,
         };
 
-        const target = document.elementFromPoint(points[0].X, points[0].Y);
+        const target = document.elementFromPoint(this._x + 10, this._y + 10);
         target?.dispatchEvent(
             new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
                 {
@@ -82,6 +86,43 @@ export default class MobileInkOverlay extends React.Component {
         );
     }
 
+    uploadDocument = async (content: MobileDocumentUploadContent) => {
+        const { docId } = content;
+        console.log("receive upload document id", docId);
+        const doc = await DocServer.GetRefField(docId);
+
+        if (doc && doc instanceof Doc) {
+            console.log("parsed upload document into doc", StrCast(doc.proto!.title));
+
+            const target = document.elementFromPoint(this._x + 10, this._y + 10);
+            console.log("the target is", target);
+
+            const dragData = new DragManager.DocumentDragData([doc]);
+            const complete = new DragManager.DragCompleteEvent(false, dragData);
+            console.log("the drag data is", dragData);
+
+            if (target) {
+                target.dispatchEvent(
+                    new CustomEvent<DragManager.DropEvent>("dashOnDrop",
+                        {
+                            bubbles: true,
+                            detail: {
+                                x: this._x,
+                                y: this._y,
+                                complete: complete,
+                                altKey: false,
+                                metaKey: false,
+                                ctrlKey: false
+                            }
+                        }
+                    )
+                );
+            } else {
+                alert("TARGET IS UNDEFINED");
+            }
+        }
+    }
+
     @action
     dragStart = (e: React.PointerEvent) => {
         document.removeEventListener("pointermove", this.dragging);
@@ -132,15 +173,17 @@ export default class MobileInkOverlay extends React.Component {
                     transform: `translate(${this._x}px, ${this._y}px)`,
                     zIndex: 30000,
                     pointerEvents: "none",
-                    borderStyle: this._isDragging ? "solid" : "dashed"
-                }}
+                    borderStyle: this._isDragging ? "solid" : "dashed",
+                    backgroundColor: "rgba(255, 0, 0, 0.3)"
+                }
+                }
                 ref={this._mainCont}
             >
                 <div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border right" onPointerDown={this.dragStart}></div>
-            </div>
+            </div >
         );
     }
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index 8abe5a40d..8b0ebcd53 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -1,7 +1,15 @@
 .mobileInterface-inkInterfaceButtons {
     position: absolute;
+    top: -50px;
     display: flex;
     justify-content: space-between;
     width: 100%;
     z-index: 9999;
+    height: 50px;
+}
+
+.mobileInterface-container {
+    height: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 665d9a168..a1ef0a5d1 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -22,6 +22,18 @@ import { SelectionManager } from '../client/util/SelectionManager';
 import { DateField } from '../new_fields/DateField';
 import { GestureUtils } from '../pen-gestures/GestureUtils';
 import { DocServer } from '../client/DocServer';
+import { DocumentDecorations } from '../client/views/DocumentDecorations';
+import { OverlayView } from '../client/views/OverlayView';
+import { DictationOverlay } from '../client/views/DictationOverlay';
+import SharingManager from '../client/util/SharingManager';
+import { PreviewCursor } from '../client/views/PreviewCursor';
+import { ContextMenu } from '../client/views/ContextMenu';
+import { RadialMenu } from '../client/views/nodes/RadialMenu';
+import PDFMenu from '../client/views/pdf/PDFMenu';
+import MarqueeOptionsMenu from '../client/views/collections/collectionFreeForm/MarqueeOptionsMenu';
+import GoogleAuthenticationManager from '../client/apis/GoogleAuthenticationManager';
+import { listSpec } from '../new_fields/Schema';
+import { Id } from '../new_fields/FieldSymbols';
 
 library.add(faLongArrowAltLeft);
 
@@ -31,7 +43,7 @@ export default class MobileInterface extends React.Component {
     @computed private get userDoc() { return CurrentUserUtils.UserDocument; }
     @computed private get mainContainer() { return this.userDoc ? FieldValue(Cast(this.userDoc.activeMobile, Doc)) : CurrentUserUtils.GuestMobile; }
     // @observable private currentView: "main" | "ink" | "upload" = "main";
-    private mainDoc: Doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+    private mainDoc: any = CurrentUserUtils.setupMobileDoc(this.userDoc);
     @observable private renderView?: () => JSX.Element;
 
     // private inkDoc?: Doc;
@@ -49,7 +61,6 @@ export default class MobileInterface extends React.Component {
         library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer]);
 
         if (this.userDoc && !this.mainContainer) {
-            // const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
             this.userDoc.activeMobile = this.mainDoc;
         }
     }
@@ -76,48 +87,22 @@ export default class MobileInterface extends React.Component {
         });
     }
 
-    // @action
-    // switchCurrentView = (view: "main" | "ink" | "upload") => {
-    //     this.currentView = view;
-
-    //     if (this.userDoc) {
-    //         switch (view) {
-    //             case "main": {
-    //                 // const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
-    //                 this.userDoc.activeMobile = this.mainDoc;
-    //                 break;
-    //             }
-    //             case "ink": {
-    //                 this.inkDoc = CurrentUserUtils.setupMobileInkingDoc(this.userDoc);
-    //                 this.userDoc.activeMobile = this.inkDoc;
-    //                 InkingControl.Instance.switchTool(InkTool.Pen);
-    //                 this.drawingInk = true;
-
-    //                 DocServer.Mobile.dispatchOverlayTrigger({
-    //                     enableOverlay: true,
-    //                     width: window.innerWidth,
-    //                     height: window.innerHeight
-    //                 });
-
-    //                 break;
-    //             }
-    //             case "upload": {
-    //                 this.uploadDoc = CurrentUserUtils.setupMobileUploadDoc(this.userDoc);
-    //                 this.userDoc.activeMobile = this.uploadDoc;
-
-    //             }
-    //         }
-    //     }
-    // }
+    onSwitchUpload = () => {
+        DocServer.Mobile.dispatchOverlayTrigger({
+            enableOverlay: true,
+            width: 100,
+            height: 100
+        });
+    }
 
     renderDefaultContent = () => {
-        console.log("rendering default content");
+        console.log("rendering default content", this.mainContainer);
         if (this.mainContainer) {
             return <DocumentView
                 Document={this.mainContainer}
                 DataDoc={undefined}
                 LibraryPath={emptyPath}
-                addDocument={returnFalse}
+                addDocument={(doc: Doc) => { console.log("want to add doc to default content", StrCast(doc.title)); return false; }}
                 addDocTab={returnFalse}
                 pinToPres={emptyFunction}
                 removeDocument={undefined}
@@ -192,42 +177,54 @@ export default class MobileInterface extends React.Component {
                             <button className="mobileInterface-button" onClick={this.shiftRight} title="Shift right">right</button>
                         </div>
                     </div>
-                    <GestureOverlay>
-                        <CollectionView
-                            Document={this.mainContainer}
-                            DataDoc={undefined}
-                            LibraryPath={emptyPath}
-                            fieldKey={""}
-                            addDocTab={returnFalse}
-                            pinToPres={emptyFunction}
-                            PanelHeight={() => window.innerHeight}
-                            PanelWidth={() => window.innerWidth}
-                            focus={emptyFunction}
-                            isSelected={returnFalse}
-                            select={emptyFunction}
-                            active={returnFalse}
-                            ContentScaling={returnOne}
-                            whenActiveChanged={returnFalse}
-                            ScreenToLocalTransform={Transform.Identity}
-                            ruleProvider={undefined}
-                            renderDepth={0}
-                            ContainingCollectionView={undefined}
-                            ContainingCollectionDoc={undefined}>
-                        </CollectionView>
-                    </GestureOverlay>
+                    <CollectionView
+                        Document={this.mainContainer}
+                        DataDoc={undefined}
+                        LibraryPath={emptyPath}
+                        fieldKey={""}
+                        addDocTab={returnFalse}
+                        pinToPres={emptyFunction}
+                        PanelHeight={() => window.innerHeight}
+                        PanelWidth={() => window.innerWidth}
+                        focus={emptyFunction}
+                        isSelected={returnFalse}
+                        select={emptyFunction}
+                        active={returnFalse}
+                        ContentScaling={returnOne}
+                        whenActiveChanged={returnFalse}
+                        ScreenToLocalTransform={Transform.Identity}
+                        ruleProvider={undefined}
+                        renderDepth={0}
+                        ContainingCollectionView={undefined}
+                        ContainingCollectionDoc={undefined}>
+                    </CollectionView>
                 </div>
             );
         }
     }
 
-    upload = () => {
+    upload = async (e: React.MouseEvent) => {
+        if (this.mainContainer) {
+            const data = Cast(this.mainContainer.data, listSpec(Doc));
+            if (data) {
+                const uploadDoc = await data[1]; // TODO: ensure this is the collection to upload
 
+                console.log("UPLOADING DOCUMENT FROM MOBILE", uploadDoc[Id], StrCast(uploadDoc.proto!.title));
+                if (uploadDoc) {
+                    DocServer.Mobile.dispatchMobileDocumentUpload({
+                        docId: uploadDoc[Id]
+                    });
+                }
+            }
+        }
+        e.stopPropagation();
+        e.preventDefault();
     }
 
     renderUploadContent() {
         if (this.mainContainer) {
             return (
-                <div className="mobileInterface">
+                <div className="mobileInterface" onDragOver={this.onDragOver}>
                     <div className="mobileInterface-inkInterfaceButtons">
                         <div className="navButtons">
                             <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
@@ -240,7 +237,7 @@ export default class MobileInterface extends React.Component {
                         Document={this.mainContainer}
                         DataDoc={undefined}
                         LibraryPath={emptyPath}
-                        addDocument={returnFalse}
+                        addDocument={(doc: Doc) => { console.log("want to add doc", StrCast(doc.title)); return false; }}
                         addDocTab={returnFalse}
                         pinToPres={emptyFunction}
                         removeDocument={undefined}
@@ -266,13 +263,35 @@ export default class MobileInterface extends React.Component {
         }
     }
 
+    onDragOver = (e: React.DragEvent) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+
     render() {
         // const content = this.currentView === "main" ? this.mainContent :
         //     this.currentView === "ink" ? this.inkContent :
         //         this.currentView === "upload" ? this.uploadContent : <></>;
         return (
-            <div className="mobile-container">
-                {this.renderView ? this.renderView() : this.renderDefaultContent()}
+            <div className="mobileInterface-container" onDragOver={this.onDragOver}>
+                {/* <DocumentDecorations />
+                <GestureOverlay>
+                    {this.renderView ? this.renderView() : this.renderDefaultContent()}
+                </GestureOverlay> */}
+
+                {/* <DictationOverlay />
+                <SharingManager />
+                <GoogleAuthenticationManager /> */}
+                <DocumentDecorations />
+                <GestureOverlay>
+                    {this.renderView ? this.renderView() : this.renderDefaultContent()}
+                </GestureOverlay>
+                <PreviewCursor />
+                {/* <ContextMenu /> */}
+                <RadialMenu />
+                {/* <PDFMenu />
+                <MarqueeOptionsMenu />
+                <OverlayView /> */}
             </div>
         );
     }
@@ -281,5 +300,6 @@ export default class MobileInterface extends React.Component {
 Scripting.addGlobal(function switchMobileView(doc: (userDoc: Doc) => Doc, renderView?: () => JSX.Element, onSwitch?: () => void) { return MobileInterface.Instance.switchCurrentView(doc, renderView, onSwitch); });
 Scripting.addGlobal(function onSwitchMobileInking() { return MobileInterface.Instance.onSwitchInking(); });
 Scripting.addGlobal(function renderMobileInking() { return MobileInterface.Instance.renderInkingContent(); });
+Scripting.addGlobal(function onSwitchMobileUpload() { return MobileInterface.Instance.onSwitchUpload(); });
 Scripting.addGlobal(function renderMobileUpload() { return MobileInterface.Instance.renderUploadContent(); });
 
diff --git a/src/server/ApiManagers/UploadManager.ts b/src/server/ApiManagers/UploadManager.ts
index 74f45ae62..e76d9b7a2 100644
--- a/src/server/ApiManagers/UploadManager.ts
+++ b/src/server/ApiManagers/UploadManager.ts
@@ -42,6 +42,7 @@ export default class UploadManager extends ApiManager {
             method: Method.POST,
             subscription: "/upload",
             secureHandler: async ({ req, res }) => {
+                console.log("/upload register");
                 const form = new formidable.IncomingForm();
                 form.uploadDir = pathToDirectory(Directory.parsed_files);
                 form.keepExtensions = true;
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 236df3f3c..c23a2f0a8 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -1,5 +1,6 @@
 import { Utils } from "../Utils";
 import { Point } from "../pen-gestures/ndollar";
+import { Doc } from "../new_fields/Doc";
 
 export class Message<T> {
     private _name: string;
@@ -62,6 +63,10 @@ export interface UpdateMobileInkOverlayPositionContent {
     readonly dsize?: number;
 }
 
+export interface MobileDocumentUploadContent {
+    readonly docId: string;
+}
+
 export namespace MessageStore {
     export const Foo = new Message<string>("Foo");
     export const Bar = new Message<string>("Bar");
@@ -75,6 +80,7 @@ export namespace MessageStore {
     export const GesturePoints = new Message<GestureContent>("Gesture Points");
     export const MobileInkOverlayTrigger = new Message<MobileInkOverlayContent>("Trigger Mobile Ink Overlay");
     export const UpdateMobileInkOverlayPosition = new Message<UpdateMobileInkOverlayPositionContent>("Update Mobile Ink Overlay Position");
+    export const MobileDocumentUpload = new Message<MobileDocumentUploadContent>("Upload Document From Mobile");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 77816c897..798bdae67 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -1,5 +1,5 @@
 import { Utils } from "../../Utils";
-import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent } from "../Message";
+import { MessageStore, Transferable, Types, Diff, YoutubeQueryInput, YoutubeQueryTypes, GestureContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, MobileDocumentUploadContent } from "../Message";
 import { Client } from "../Client";
 import { Socket } from "socket.io";
 import { Database } from "../database";
@@ -57,6 +57,7 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.GesturePoints, content => processGesturePoints(socket, content));
             Utils.AddServerHandler(socket, MessageStore.MobileInkOverlayTrigger, content => processOverlayTrigger(socket, content));
             Utils.AddServerHandler(socket, MessageStore.UpdateMobileInkOverlayPosition, content => processUpdateOverlayPosition(socket, content));
+            Utils.AddServerHandler(socket, MessageStore.MobileDocumentUpload, content => processMobileDocumentUpload(socket, content));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
 
@@ -83,6 +84,10 @@ export namespace WebSocket {
         socket.broadcast.emit("receiveUpdateOverlayPosition", content);
     }
 
+    function processMobileDocumentUpload(socket: Socket, content: MobileDocumentUploadContent) {
+        socket.broadcast.emit("receiveMobileDocumentUpload", content);
+    }
+
     function HandleYoutubeQuery([query, callback]: [YoutubeQueryInput, (result?: any[]) => void]) {
         const { ProjectCredentials } = GoogleCredentialsLoader;
         switch (query.type) {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 817cf40b1..3e5953ac1 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -103,7 +103,7 @@ export class CurrentUserUtils {
             { title: "use scrubber", icon: "eraser", click: 'activateScrubber(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "green", activePen: doc },
             { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
             { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
-            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload);', backgroundColor: "orange" },
+            { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
             { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
         ];
         return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
@@ -138,7 +138,9 @@ export class CurrentUserUtils {
     }
 
     static setupMobileDoc(userDoc: Doc) {
-        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
+        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled" });
+
+        return userDoc.activeMoble ?? Docs.Create.MasonryDocument([webDoc, ...CurrentUserUtils.setupMobileButtons(userDoc)], {
             columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
         });
     }
@@ -148,13 +150,14 @@ export class CurrentUserUtils {
     }
 
     static setupMobileUploadDoc(userDoc: Doc) {
-        console.log("setup mobile upload", window.innerWidth, window.innerHeight);
-        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled" });
-        const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload", backgroundColor: "pink" });
-        return Docs.Create.StackingDocument([webDoc, uploadDoc], {
-            title: "Mobile Upload", backgroundColor: "white",
-            columnWidth: window.innerWidth, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", autoHeight: true, yMargin: 5,
-            width: window.innerWidth, height: window.innerHeight
+        const webDoc = Docs.Create.WebDocument("https://yahoo.com", { title: "Upload Images From the Web", chromeStatus: "enabled" });
+        const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload Collection", backgroundColor: "pink" });
+        console.log("window size", window.innerWidth, window.innerHeight);
+        // return Docs.Create.StackingDocument([webDoc, uploadDoc], {
+        //     columnWidth: window.innerWidth, //ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "Mobile Upload", autoHeight: true, yMargin: 5
+        // });
+        return Docs.Create.StackingDocument([webDoc, uploadDoc], {//...CurrentUserUtils.setupMobileButtons(userDoc)], {
+            columnWidth: 100, lockedPosition: true, chromeStatus: "disabled", title: "Upload", autoHeight: true, yMargin: 30
         });
     }
 
diff --git a/src/server/server_Initialization.ts b/src/server/server_Initialization.ts
index cbe070293..5f1ecc733 100644
--- a/src/server/server_Initialization.ts
+++ b/src/server/server_Initialization.ts
@@ -42,18 +42,18 @@ export default async function InitializeServer(routeSetter: RouteSetter) {
         }
     };
     app.use(cors(corsOptions));
-    app.use("*", ({ user, originalUrl }, res, next) => {
-        if (user && !originalUrl.includes("Heartbeat")) {
-            const userEmail = (user as any).email;
-            if (userEmail) {
-                timeMap[userEmail] = Date.now();
-            }
-        }
-        if (!user && originalUrl === "/") {
-            return res.redirect("/login");
-        }
-        next();
-    });
+    // app.use("*", ({ user, originalUrl }, res, next) => {
+    //     if (user && !originalUrl.includes("Heartbeat")) {
+    //         const userEmail = (user as any).email;
+    //         if (userEmail) {
+    //             timeMap[userEmail] = Date.now();
+    //         }
+    //     }
+    //     if (!user && originalUrl === "/") {
+    //         return res.redirect("/login");
+    //     }
+    //     next();
+    // });
 
     app.use(wdm(compiler, { publicPath: config.output.publicPath }));
     app.use(whm(compiler));
-- 
cgit v1.2.3-70-g09d2


From bede55e2f8504a4b45c3adb96d6ba2d13c17b96f Mon Sep 17 00:00:00 2001
From: vellichora <fangrui_tong@brown.edu>
Date: Sun, 9 Feb 2020 17:43:54 -0500
Subject: option to upload as collection for mobile

---
 src/mobile/MobileInkOverlay.tsx | 15 +++++++++++----
 src/mobile/MobileInterface.tsx  |  8 +++++---
 src/server/Message.ts           |  1 +
 3 files changed, 17 insertions(+), 7 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index ed4cca5b9..9f810424a 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -4,10 +4,11 @@ import { MobileInkOverlayContent, GestureContent, UpdateMobileInkOverlayPosition
 import { observable, action } from "mobx";
 import { GestureUtils } from "../pen-gestures/GestureUtils";
 import "./MobileInkOverlay.scss";
-import { StrCast } from '../new_fields/Types';
+import { StrCast, Cast } from '../new_fields/Types';
 import { DragManager } from "../client/util/DragManager";
 import { DocServer } from '../client/DocServer';
-import { Doc } from '../new_fields/Doc';
+import { Doc, DocListCastAsync } from '../new_fields/Doc';
+import { listSpec } from '../new_fields/Schema';
 
 
 @observer
@@ -87,7 +88,7 @@ export default class MobileInkOverlay extends React.Component {
     }
 
     uploadDocument = async (content: MobileDocumentUploadContent) => {
-        const { docId } = content;
+        const { docId, asCollection } = content;
         console.log("receive upload document id", docId);
         const doc = await DocServer.GetRefField(docId);
 
@@ -97,7 +98,13 @@ export default class MobileInkOverlay extends React.Component {
             const target = document.elementFromPoint(this._x + 10, this._y + 10);
             console.log("the target is", target);
 
-            const dragData = new DragManager.DocumentDragData([doc]);
+            let uploadDocs = [doc];
+            if (!asCollection) {
+                const children = await DocListCastAsync(doc.data);
+                console.log("uploading children", children);
+                uploadDocs = children ? children : [];
+            }
+            const dragData = new DragManager.DocumentDragData(uploadDocs);
             const complete = new DragManager.DragCompleteEvent(false, dragData);
             console.log("the drag data is", dragData);
 
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index a1ef0a5d1..e21258c62 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -203,7 +203,7 @@ export default class MobileInterface extends React.Component {
         }
     }
 
-    upload = async (e: React.MouseEvent) => {
+    upload = async (e: React.MouseEvent, asCollection: boolean) => {
         if (this.mainContainer) {
             const data = Cast(this.mainContainer.data, listSpec(Doc));
             if (data) {
@@ -212,7 +212,8 @@ export default class MobileInterface extends React.Component {
                 console.log("UPLOADING DOCUMENT FROM MOBILE", uploadDoc[Id], StrCast(uploadDoc.proto!.title));
                 if (uploadDoc) {
                     DocServer.Mobile.dispatchMobileDocumentUpload({
-                        docId: uploadDoc[Id]
+                        docId: uploadDoc[Id],
+                        asCollection: asCollection
                     });
                 }
             }
@@ -230,7 +231,8 @@ export default class MobileInterface extends React.Component {
                             <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
                         </div>
                         <div className="uploadSettings">
-                            <button className="mobileInterface-button" onClick={this.upload} title="Shift left">UPLOAD</button>
+                            <button className="mobileInterface-button" onClick={e => this.upload(e, false)} title="Upload">UPLOAD</button>
+                            <button className="mobileInterface-button" onClick={e => this.upload(e, true)} title="Upload">UPLOAD AS COLLECTION</button>
                         </div>
                     </div>
                     <DocumentView
diff --git a/src/server/Message.ts b/src/server/Message.ts
index c23a2f0a8..6dac37a46 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -65,6 +65,7 @@ export interface UpdateMobileInkOverlayPositionContent {
 
 export interface MobileDocumentUploadContent {
     readonly docId: string;
+    readonly asCollection: boolean;
 }
 
 export namespace MessageStore {
-- 
cgit v1.2.3-70-g09d2


From 74ca8ac01e32faa8adab54ddfd806fe46cda03ec Mon Sep 17 00:00:00 2001
From: Hannah <hannah_chow@brown.edu>
Date: Tue, 11 Feb 2020 06:22:04 -0500
Subject: refined upload interaction

---
 src/client/util/DragManager.ts                     |  21 ++--
 src/client/views/nodes/WebBox.scss                 |  15 +++
 src/client/views/nodes/WebBox.tsx                  | 130 ++++++++++-----------
 src/mobile/ImageUpload.tsx                         |   2 -
 src/mobile/MobileInkOverlay.scss                   |   4 +-
 src/mobile/MobileInkOverlay.tsx                    |  35 +++---
 src/mobile/MobileInterface.scss                    |   7 +-
 src/mobile/MobileInterface.tsx                     |  42 ++++---
 src/server/Message.ts                              |   2 +-
 .../authentication/models/current_user_utils.ts    |  25 ++--
 10 files changed, 146 insertions(+), 137 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 745540ff9..702c10910 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -195,7 +195,7 @@ export namespace DragManager {
                     dragData.userDropAction === "alias" || (!dragData.userDropAction && dragData.dropAction === "alias") ? Doc.MakeAlias(d) :
                         dragData.userDropAction === "copy" || (!dragData.userDropAction && dragData.dropAction === "copy") ? Doc.MakeCopy(d, true) : d)
             );
-            e.docDragData?.droppedDocuments.forEach((drop: Doc, i: number) =>
+            e.docDragData ?.droppedDocuments.forEach((drop: Doc, i: number) =>
                 Cast(dragData.draggedDocuments[i].removeDropProperties, listSpec("string"), []).map(prop => drop[prop] = undefined));
         };
         dragData.draggedDocuments.map(d => d.dragFactory); // does this help?  trying to make sure the dragFactory Doc is loaded
@@ -288,6 +288,7 @@ export namespace DragManager {
             if (!ele.parentNode) dragDiv.appendChild(ele);
             const dragElement = ele.parentNode === dragDiv ? ele : ele.cloneNode(true) as HTMLElement;
             const rect = ele.getBoundingClientRect();
+            console.log("boudning", rect);
             const scaleX = rect.width / ele.offsetWidth,
                 scaleY = rect.height / ele.offsetHeight;
             xs.push(rect.left);
@@ -305,7 +306,7 @@ export namespace DragManager {
             dragElement.style.transformOrigin = "0 0";
             dragElement.style.borderRadius = getComputedStyle(ele).borderRadius;
             dragElement.style.zIndex = globalCssVariables.contextMenuZindex;// "1000";
-            dragElement.style.transform = `translate(${rect.left + (options?.offsetX || 0)}px, ${rect.top + (options?.offsetY || 0)}px) scale(${scaleX}, ${scaleY})`;
+            dragElement.style.transform = `translate(${rect.left + (options ?.offsetX || 0)}px, ${rect.top + (options ?.offsetY || 0)}px) scale(${scaleX}, ${scaleY})`;
             dragElement.style.width = `${rect.width / scaleX}px`;
             dragElement.style.height = `${rect.height / scaleY}px`;
 
@@ -334,8 +335,8 @@ export namespace DragManager {
             return dragElement;
         });
 
-        const hideSource = options?.hideSource ? true : false;
-        eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.parentElement.hidden = hideSource) : (ele.hidden = hideSource));
+        const hideSource = options ?.hideSource ? true : false;
+        eles.map(ele => ele.parentElement && ele.parentElement ?.className === dragData.dragDivName ? (ele.parentElement.hidden = hideSource) : (ele.hidden = hideSource));
 
         let lastX = downX;
         let lastY = downY;
@@ -346,7 +347,7 @@ export namespace DragManager {
             }
             if (e.shiftKey && CollectionDockingView.Instance) {
                 AbortDrag();
-                finishDrag?.(new DragCompleteEvent(true, dragData));
+                finishDrag ?.(new DragCompleteEvent(true, dragData));
                 CollectionDockingView.Instance.StartOtherDrag({
                     pageX: e.pageX,
                     pageY: e.pageY,
@@ -360,13 +361,13 @@ export namespace DragManager {
             lastX = e.pageX;
             lastY = e.pageY;
             dragElements.map((dragElement, i) => (dragElement.style.transform =
-                `translate(${(xs[i] += moveX) + (options?.offsetX || 0)}px, ${(ys[i] += moveY) + (options?.offsetY || 0)}px)  scale(${scaleXs[i]}, ${scaleYs[i]})`)
+                `translate(${(xs[i] += moveX) + (options ?.offsetX || 0)}px, ${(ys[i] += moveY) + (options ?.offsetY || 0)}px)  scale(${scaleXs[i]}, ${scaleYs[i]})`)
             );
         };
 
         const hideDragShowOriginalElements = () => {
             dragElements.map(dragElement => dragElement.parentNode === dragDiv && dragDiv.removeChild(dragElement));
-            eles.map(ele => ele.parentElement && ele.parentElement?.className === dragData.dragDivName ? (ele.parentElement.hidden = false) : (ele.hidden = false));
+            eles.map(ele => ele.parentElement && ele.parentElement ?.className === dragData.dragDivName ? (ele.parentElement.hidden = false) : (ele.hidden = false));
         };
         const endDrag = () => {
             document.removeEventListener("pointermove", moveHandler, true);
@@ -376,14 +377,14 @@ export namespace DragManager {
         AbortDrag = () => {
             hideDragShowOriginalElements();
             SelectionManager.SetIsDragging(false);
-            options?.dragComplete?.(new DragCompleteEvent(true, dragData));
+            options ?.dragComplete ?.(new DragCompleteEvent(true, dragData));
             endDrag();
         };
         const upHandler = (e: PointerEvent) => {
             hideDragShowOriginalElements();
             dispatchDrag(eles, e, dragData, options, finishDrag);
             SelectionManager.SetIsDragging(false);
-            options?.dragComplete?.(new DragCompleteEvent(false, dragData));
+            options ?.dragComplete ?.(new DragCompleteEvent(false, dragData));
             endDrag();
         };
         document.addEventListener("pointermove", moveHandler, true);
@@ -404,7 +405,7 @@ export namespace DragManager {
         });
         if (target) {
             const complete = new DragCompleteEvent(false, dragData);
-            finishDrag?.(complete);
+            finishDrag ?.(complete);
 
             target.dispatchEvent(
                 new CustomEvent<DropEvent>("dashOnDrop", {
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss
index fbe9bf063..226103a53 100644
--- a/src/client/views/nodes/WebBox.scss
+++ b/src/client/views/nodes/WebBox.scss
@@ -90,4 +90,19 @@
     width: 100%;
     margin-right: 10px;
     height: 100%;
+}
+
+.touch-iframe-overlay {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    pointer-events: all;
+
+    .indicator {
+        position: absolute;
+
+        &.active {
+            background-color: rgba(0, 0, 0, 0.1);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index c405dd9d4..ee5bf6f2f 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -39,6 +39,7 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
 
     private _longPressSecondsHack?: NodeJS.Timeout;
     private _iframeRef = React.createRef<HTMLIFrameElement>();
+    private _iframeIndicatorRef = React.createRef<HTMLDivElement>();
     private _iframeDragRef = React.createRef<HTMLDivElement>();
     @observable private _pressX: number = 0;
     @observable private _pressY: number = 0;
@@ -63,39 +64,6 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
     componentDidMount() {
         document.addEventListener("pointerup", this.onLongPressUp);
         document.addEventListener("pointermove", this.onLongPressMove);
-        // this._iframeRef.current?.contentWindow?.document.addEventListener("mousedown", (event: MouseEvent) => {
-        //     console.log("clicked inside the iframe?");
-        // });
-        // const iframe = document.getElementById(this.props.Document.proto![Id]);
-        // if (iframe) {
-        //     iframe.addEventListener('pointerdown', function (event) {
-        //         const B = iframe.getBoundingClientRect();
-        //         const e = new CustomEvent('pointerdown', { bubbles: true, cancelable: false });
-        //         // e.clientX = e.clientX + B?.left;
-        //         // e.clientY = e.clientY + B?.top;
-        //         console.log("custom event pointer down");
-        //         iframe.dispatchEvent(e);
-        //     })
-        // }
-        // if (this._iframeRef.current) {
-        //     console.log("resetting iframes events");
-        //     const self = this;
-        //     this._iframeRef.current.addEventListener('pointermove', function (event) {
-        //         const B = self._iframeRef.current?.getBoundingClientRect();
-        //         const e = new CustomEvent('pointermove', { bubbles: true, cancelable: false });
-        //         // e.clientX = e.clientX + B?.left;
-        //         // e.clientY = e.clientY + B?.top;
-        //         self._iframeRef.current?.dispatchEvent(e);
-        //     });
-        //     this._iframeRef.current.addEventListener('pointerdown', function (event) {
-        //         const B = self._iframeRef.current?.getBoundingClientRect();
-        //         const e = new CustomEvent('pointerdown', { bubbles: true, cancelable: false });
-        //         // e.clientX = e.clientX + B?.left;
-        //         // e.clientY = e.clientY + B?.top;
-        //         console.log("custom event pointer down");
-        //         self._iframeRef.current?.dispatchEvent(e);
-        //     })
-        // }
     }
 
     componentWillUnmount() {
@@ -217,59 +185,75 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
         }
     }
 
-    // TODO: make this actually a long press
     onLongPressDown = (e: React.PointerEvent) => {
-
-        console.log("press down", e.clientX, e.clientX);
         this._pressX = e.clientX;
         this._pressY = e.clientY;
-        this._longPressSecondsHack = setTimeout(() => {
-            console.log("start the drag!!");
-            const B = this._iframeRef.current?.getBoundingClientRect();
-            const iframeDoc = this._iframeRef.current?.contentDocument;
+
+        // find the pressed element in the iframe (currently only works if its an img)
+        let pressedElement: HTMLElement | undefined;
+        let pressedBound: ClientRect | undefined;
+        if (this._iframeRef.current) {
+            const B = this._iframeRef.current.getBoundingClientRect();
+            const iframeDoc = this._iframeRef.current.contentDocument;
             if (B && iframeDoc) {
-                console.log("frame doc", iframeDoc);
-                console.log("get point", this._pressX, B.left, this._pressY, B.top);
+                // TODO: this only works when scale = 1
                 const element = iframeDoc.elementFromPoint(this._pressX - B.left, this._pressY - B.top);
-                console.log("found element", element);
-                if (element) {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const clone = element.cloneNode(true) as HTMLElement;
-
-                    if (clone.nodeName === "IMG") {
-                        const src = clone.getAttribute("src"); // TODO: may not always work
-
-                        if (src) {
-                            const doc = Docs.Create.ImageDocument(src, { width: 300 });
-                            ImageUtils.ExtractExif(doc);
-
-                            console.log("start image drag", this._pressX, this._pressY, doc);
-                            // document.dispatchEvent()
-                            const dragData = new DragManager.DocumentDragData([doc]);
-                            DragManager.StartDocumentDrag([clone], dragData, this._pressX, this._pressY);
-                        }
+                if (element && element.nodeName === "IMG") {
+                    pressedBound = element.getBoundingClientRect();
+                    pressedElement = element.cloneNode(true) as HTMLElement;
+                }
+            }
+        }
+
+        // mark the pressed element
+        if (pressedElement && pressedBound) {
+            console.log("clones b", pressedElement.getBoundingClientRect(), pressedBound);
+            if (this._iframeIndicatorRef.current) {
+                this._iframeIndicatorRef.current.style.top = pressedBound.top + "px";
+                this._iframeIndicatorRef.current.style.left = pressedBound.left + "px";
+                this._iframeIndicatorRef.current.style.width = pressedBound.width + "px";
+                this._iframeIndicatorRef.current.style.height = pressedBound.height + "px";
+                this._iframeIndicatorRef.current.classList.add("active");
+            }
+        }
+
+        // start dragging the pressed element if long pressed
+        this._longPressSecondsHack = setTimeout(() => {
+            if (pressedElement && pressedBound) {
+                e.stopPropagation();
+                e.preventDefault();
+                if (pressedElement.nodeName === "IMG") {
+                    const src = pressedElement.getAttribute("src"); // TODO: may not always work
+                    if (src) {
+                        const doc = Docs.Create.ImageDocument(src, { width: 300 });
+                        ImageUtils.ExtractExif(doc);
+
+                        // add clone to div so that dragging ghost is placed properly
+                        if (this._iframeDragRef.current) this._iframeDragRef.current.appendChild(pressedElement);
+
+                        const dragData = new DragManager.DocumentDragData([doc]);
+                        DragManager.StartDocumentDrag([pressedElement], dragData, this._pressX, this._pressY, { hideSource: true });
                     }
                 }
             }
         }, 1500);
-        // e.stopPropagation();
-        // e.preventDefault();
     }
 
     onLongPressMove = (e: PointerEvent) => {
-        this._pressX = e.clientX;
-        this._pressY = e.clientY;
+        // this._pressX = e.clientX;
+        // this._pressY = e.clientY;
     }
 
     onLongPressUp = (e: PointerEvent) => {
-        console.log("press up");
         if (this._longPressSecondsHack) {
             clearTimeout(this._longPressSecondsHack);
-            console.log("long press cancelled");
         }
-        // e.stopPropagation();
-        // e.preventDefault();
+        if (this._iframeIndicatorRef.current) {
+            this._iframeIndicatorRef.current.classList.remove("active");
+        }
+        if (this._iframeDragRef.current) {
+            while (this._iframeDragRef.current.firstChild) this._iframeDragRef.current.removeChild(this._iframeDragRef.current.firstChild);
+        }
     }
 
 
@@ -300,9 +284,13 @@ export class WebBox extends DocAnnotatableComponent<FieldViewProps, WebDocument>
                 <div className={classname}  >
                     {content}
                 </div>
-                <div className="mobileIframeDragger" ref={this._iframeDragRef} draggable></div>
-                {!frozen ? (null) : <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer} />}
-                {/* onPointerDown={(e) => { this.onPrePointer(e); this.onLongPressDown(e) }} onPointerMove={this.onPrePointer} onPointerUp={(e) => { this.onPrePointer(e); }} />} */}
+                {!frozen ? (null) :
+                    <div className="webBox-overlay" onWheel={this.onPreWheel} onPointerDown={this.onPrePointer} onPointerMove={this.onPrePointer} onPointerUp={this.onPrePointer}>
+                        <div className="touch-iframe-overlay" onPointerDown={this.onLongPressDown} >
+                            <div className="indicator" ref={this._iframeIndicatorRef}></div>
+                            <div className="dragger" ref={this._iframeDragRef}></div>
+                        </div>
+                    </div>}
             </>);
     }
     render() {
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index 10bd78075..42dfd4e51 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -106,8 +106,6 @@ class Uploader extends React.Component {
 
 }
 
-// Scripting.addGlobal(function uploadImageMobile() { return Uploader.onClick(); });
-
 
 // DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload");
 (async () => {
diff --git a/src/mobile/MobileInkOverlay.scss b/src/mobile/MobileInkOverlay.scss
index 2e45d0441..0b4484519 100644
--- a/src/mobile/MobileInkOverlay.scss
+++ b/src/mobile/MobileInkOverlay.scss
@@ -1,10 +1,10 @@
 .mobileInkOverlay {
     border: 5px dashed red;
+    background-color: rgba(0, 0, 0, .05);
 }
 
 .mobileInkOverlay-border {
-    background-color: rgba(0, 255, 0, .4);
-    position: absolute;
+    // background-color: rgba(0, 255, 0, .4);    position: absolute;
     pointer-events: auto;
     cursor: pointer;
 
diff --git a/src/mobile/MobileInkOverlay.tsx b/src/mobile/MobileInkOverlay.tsx
index 9f810424a..db6cf21b4 100644
--- a/src/mobile/MobileInkOverlay.tsx
+++ b/src/mobile/MobileInkOverlay.tsx
@@ -20,6 +20,7 @@ export default class MobileInkOverlay extends React.Component {
     @observable private _height: number = 0;
     @observable private _x: number = -300;
     @observable private _y: number = -300;
+    @observable private _text: string = "";
 
     @observable private _offsetX: number = 0;
     @observable private _offsetY: number = 0;
@@ -32,21 +33,25 @@ export default class MobileInkOverlay extends React.Component {
     }
 
     initialSize(mobileWidth: number, mobileHeight: number) {
-        const maxWidth = window.innerWidth - 30; // TODO: may not be window ?? figure out how to not include library ????
+        const maxWidth = window.innerWidth - 30;
         const maxHeight = window.innerHeight - 30; // -30 for padding
-        const scale = Math.min(maxWidth / mobileWidth, maxHeight / mobileHeight);
-        return { width: mobileWidth * scale, height: mobileHeight * scale, scale: scale };
+        if (mobileWidth > maxWidth || mobileHeight > maxHeight) {
+            const scale = Math.min(maxWidth / mobileWidth, maxHeight / mobileHeight);
+            return { width: mobileWidth * scale, height: mobileHeight * scale, scale: scale };
+        }
+        return { width: mobileWidth, height: mobileHeight, scale: 1 };
     }
 
     @action
     initMobileInkOverlay(content: MobileInkOverlayContent) {
-        const { width, height } = content;
+        const { width, height, text } = content;
         const scaledSize = this.initialSize(width ? width : 0, height ? height : 0);
         this._width = scaledSize.width;
         this._height = scaledSize.height;
-        this._scale = scaledSize.scale; //scaledSize.scale;
+        this._scale = scaledSize.scale;
         this._x = 300; // TODO: center on screen
         this._y = 25; // TODO: center on screen
+        this._text = text ? text : "";
     }
 
     @action
@@ -73,7 +78,7 @@ export default class MobileInkOverlay extends React.Component {
         };
 
         const target = document.elementFromPoint(this._x + 10, this._y + 10);
-        target?.dispatchEvent(
+        target ?.dispatchEvent(
             new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
                 {
                     bubbles: true,
@@ -88,25 +93,13 @@ export default class MobileInkOverlay extends React.Component {
     }
 
     uploadDocument = async (content: MobileDocumentUploadContent) => {
-        const { docId, asCollection } = content;
-        console.log("receive upload document id", docId);
+        const { docId } = content;
         const doc = await DocServer.GetRefField(docId);
 
         if (doc && doc instanceof Doc) {
-            console.log("parsed upload document into doc", StrCast(doc.proto!.title));
-
             const target = document.elementFromPoint(this._x + 10, this._y + 10);
-            console.log("the target is", target);
-
-            let uploadDocs = [doc];
-            if (!asCollection) {
-                const children = await DocListCastAsync(doc.data);
-                console.log("uploading children", children);
-                uploadDocs = children ? children : [];
-            }
-            const dragData = new DragManager.DocumentDragData(uploadDocs);
+            const dragData = new DragManager.DocumentDragData([doc]);
             const complete = new DragManager.DragCompleteEvent(false, dragData);
-            console.log("the drag data is", dragData);
 
             if (target) {
                 target.dispatchEvent(
@@ -181,11 +174,11 @@ export default class MobileInkOverlay extends React.Component {
                     zIndex: 30000,
                     pointerEvents: "none",
                     borderStyle: this._isDragging ? "solid" : "dashed",
-                    backgroundColor: "rgba(255, 0, 0, 0.3)"
                 }
                 }
                 ref={this._mainCont}
             >
+                <p>{this._text}</p>
                 <div className="mobileInkOverlay-border top" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border bottom" onPointerDown={this.dragStart}></div>
                 <div className="mobileInkOverlay-border left" onPointerDown={this.dragStart}></div>
diff --git a/src/mobile/MobileInterface.scss b/src/mobile/MobileInterface.scss
index 8b0ebcd53..8083e5760 100644
--- a/src/mobile/MobileInterface.scss
+++ b/src/mobile/MobileInterface.scss
@@ -1,15 +1,18 @@
 .mobileInterface-inkInterfaceButtons {
     position: absolute;
-    top: -50px;
+    top: 0px;
     display: flex;
     justify-content: space-between;
     width: 100%;
     z-index: 9999;
     height: 50px;
+
+    .mobileInterface-button {
+        height: 100%;
+    }
 }
 
 .mobileInterface-container {
     height: calc(100% - 50px);
-    margin-top: 50px;
     position: relative;
 }
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index e21258c62..a3b956a15 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -34,6 +34,7 @@ import MarqueeOptionsMenu from '../client/views/collections/collectionFreeForm/M
 import GoogleAuthenticationManager from '../client/apis/GoogleAuthenticationManager';
 import { listSpec } from '../new_fields/Schema';
 import { Id } from '../new_fields/FieldSymbols';
+import { DocumentManager } from '../client/util/DocumentManager';
 
 library.add(faLongArrowAltLeft);
 
@@ -73,7 +74,6 @@ export default class MobileInterface extends React.Component {
         onSwitch && onSwitch();
 
         this.renderView = renderView;
-        console.log("switching current view", renderView);
     }
 
     onSwitchInking = () => {
@@ -87,22 +87,37 @@ export default class MobileInterface extends React.Component {
         });
     }
 
-    onSwitchUpload = () => {
+    onSwitchUpload = async () => {
+        let width = 300;
+        let height = 300;
+
+        // get width and height of the collection doc
+        if (this.mainContainer) {
+            const data = Cast(this.mainContainer.data, listSpec(Doc));
+            if (data) {
+                const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
+                const docView = DocumentManager.Instance.getDocumentView(collectionDoc);
+                if (docView) {
+                    width = docView.nativeWidth ? docView.nativeWidth : 300;
+                    height = docView.nativeHeight ? docView.nativeHeight : 300;
+                }
+            }
+        }
         DocServer.Mobile.dispatchOverlayTrigger({
             enableOverlay: true,
-            width: 100,
-            height: 100
+            width: width,
+            height: height,
+            text: "Documents uploaded from mobile will show here",
         });
     }
 
     renderDefaultContent = () => {
-        console.log("rendering default content", this.mainContainer);
         if (this.mainContainer) {
             return <DocumentView
                 Document={this.mainContainer}
                 DataDoc={undefined}
                 LibraryPath={emptyPath}
-                addDocument={(doc: Doc) => { console.log("want to add doc to default content", StrCast(doc.title)); return false; }}
+                addDocument={returnFalse}
                 addDocTab={returnFalse}
                 pinToPres={emptyFunction}
                 removeDocument={undefined}
@@ -142,7 +157,6 @@ export default class MobileInterface extends React.Component {
     }
 
     shiftLeft = (e: React.MouseEvent) => {
-        console.log("shift left!");
         DocServer.Mobile.dispatchOverlayPositionUpdate({
             dx: -10
         });
@@ -203,17 +217,16 @@ export default class MobileInterface extends React.Component {
         }
     }
 
-    upload = async (e: React.MouseEvent, asCollection: boolean) => {
+    upload = async (e: React.MouseEvent) => {
         if (this.mainContainer) {
             const data = Cast(this.mainContainer.data, listSpec(Doc));
             if (data) {
-                const uploadDoc = await data[1]; // TODO: ensure this is the collection to upload
-
-                console.log("UPLOADING DOCUMENT FROM MOBILE", uploadDoc[Id], StrCast(uploadDoc.proto!.title));
+                const collectionDoc = await data[1]; // this should be the collection doc since the positions should be locked
+                const children = Cast(collectionDoc.data, listSpec(Doc), []);
+                const uploadDoc = children.length === 1 ? await children[0] : collectionDoc;
                 if (uploadDoc) {
                     DocServer.Mobile.dispatchMobileDocumentUpload({
                         docId: uploadDoc[Id],
-                        asCollection: asCollection
                     });
                 }
             }
@@ -231,15 +244,14 @@ export default class MobileInterface extends React.Component {
                             <button className="mobileInterface-button cancel" onClick={this.onBack} title="Back">BACK</button>
                         </div>
                         <div className="uploadSettings">
-                            <button className="mobileInterface-button" onClick={e => this.upload(e, false)} title="Upload">UPLOAD</button>
-                            <button className="mobileInterface-button" onClick={e => this.upload(e, true)} title="Upload">UPLOAD AS COLLECTION</button>
+                            <button className="mobileInterface-button" onClick={this.upload} title="Upload">UPLOAD</button>
                         </div>
                     </div>
                     <DocumentView
                         Document={this.mainContainer}
                         DataDoc={undefined}
                         LibraryPath={emptyPath}
-                        addDocument={(doc: Doc) => { console.log("want to add doc", StrCast(doc.title)); return false; }}
+                        addDocument={returnFalse}
                         addDocTab={returnFalse}
                         pinToPres={emptyFunction}
                         removeDocument={undefined}
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 6dac37a46..b7bf2e81e 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -55,6 +55,7 @@ export interface MobileInkOverlayContent {
     readonly enableOverlay: boolean;
     readonly width?: number;
     readonly height?: number;
+    readonly text?: string;
 }
 
 export interface UpdateMobileInkOverlayPositionContent {
@@ -65,7 +66,6 @@ export interface UpdateMobileInkOverlayPositionContent {
 
 export interface MobileDocumentUploadContent {
     readonly docId: string;
-    readonly asCollection: boolean;
 }
 
 export namespace MessageStore {
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 3e5953ac1..491685e18 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -102,9 +102,9 @@ export class CurrentUserUtils {
             { title: "use eraser", icon: "eraser", click: 'activateEraser(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "pink", activePen: doc },
             { title: "use scrubber", icon: "eraser", click: 'activateScrubber(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "green", activePen: doc },
             { title: "use drag", icon: "mouse-pointer", click: 'deactivateInk();this.activePen.pen = this;', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "white", activePen: doc },
-            { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
+            // { title: "draw", icon: "pen-nib", click: 'switchMobileView(setupMobileInkingDoc, renderMobileInking, onSwitchMobileInking);', ischecked: `sameDocs(this.activePen.pen, this)`, backgroundColor: "red", activePen: doc },
             { title: "upload", icon: "upload", click: 'switchMobileView(setupMobileUploadDoc, renderMobileUpload, onSwitchMobileUpload);', backgroundColor: "orange" },
-            { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
+            // { title: "upload", icon: "upload", click: 'uploadImageMobile();', backgroundColor: "cyan" },
         ];
         return docProtoData.filter(d => !buttons || !buttons.includes(d.title)).map(data => Docs.Create.FontIconDocument({
             nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.click ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
@@ -138,9 +138,7 @@ export class CurrentUserUtils {
     }
 
     static setupMobileDoc(userDoc: Doc) {
-        const webDoc = Docs.Create.WebDocument("https://wikipedia.com", { title: "Mobile Upload Web", chromeStatus: "enabled" });
-
-        return userDoc.activeMoble ?? Docs.Create.MasonryDocument([webDoc, ...CurrentUserUtils.setupMobileButtons(userDoc)], {
+        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
             columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
         });
     }
@@ -150,14 +148,15 @@ export class CurrentUserUtils {
     }
 
     static setupMobileUploadDoc(userDoc: Doc) {
-        const webDoc = Docs.Create.WebDocument("https://yahoo.com", { title: "Upload Images From the Web", chromeStatus: "enabled" });
-        const uploadDoc = Docs.Create.StackingDocument([], { title: "Mobile Upload Collection", backgroundColor: "pink" });
-        console.log("window size", window.innerWidth, window.innerHeight);
-        // return Docs.Create.StackingDocument([webDoc, uploadDoc], {
-        //     columnWidth: window.innerWidth, //ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "Mobile Upload", autoHeight: true, yMargin: 5
-        // });
-        return Docs.Create.StackingDocument([webDoc, uploadDoc], {//...CurrentUserUtils.setupMobileButtons(userDoc)], {
-            columnWidth: 100, lockedPosition: true, chromeStatus: "disabled", title: "Upload", autoHeight: true, yMargin: 30
+        const webDoc = Docs.Create.WebDocument("https://www.britannica.com/animal/cat", {
+            title: "Upload Images From the Web", chromeStatus: "enabled", lockedPosition: true
+        });
+        const uploadDoc = Docs.Create.StackingDocument([], {
+            title: "Mobile Upload Collection", backgroundColor: "white", lockedPosition: true
+        });
+        console.log(window.innerWidth, screen.width, window.devicePixelRatio);
+        return Docs.Create.StackingDocument([webDoc, uploadDoc], {
+            columnWidth: screen.width - 10, lockedPosition: true, chromeStatus: "disabled", title: "Upload", autoHeight: true, yMargin: 80, backgroundColor: "lightgray"
         });
     }
 
-- 
cgit v1.2.3-70-g09d2


From 2daa348eb760dfd322a271bf3f9f69ebb713a91c Mon Sep 17 00:00:00 2001
From: Sam Wilkins <35748010+samwilkins333@users.noreply.github.com>
Date: Wed, 12 Feb 2020 04:36:31 -0500
Subject: switched importer to websocket for continual updates

---
 src/client/documents/Documents.ts           | 52 +++++++++++++++--------------
 src/scraping/buxton/final/BuxtonImporter.ts | 52 ++++++++++++++++++-----------
 src/server/ApiManagers/UtilManager.ts       |  9 -----
 src/server/Message.ts                       |  5 ++-
 src/server/Websocket/Websocket.ts           |  7 ++++
 5 files changed, 70 insertions(+), 55 deletions(-)

(limited to 'src/server/Message.ts')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b00a1a91d..cc18dc0a6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -55,6 +55,7 @@ import { InkingControl } from "../views/InkingControl";
 import { RichTextField } from "../../new_fields/RichTextField";
 import { Networking } from "../Network";
 import { extname } from "path";
+import { MessageStore } from "../../server/Message";
 const requestImageSize = require('../util/request-image-size');
 const path = require('path');
 
@@ -346,6 +347,7 @@ export namespace Docs {
     export namespace Create {
 
         export function Buxton() {
+            let responded = false;
             const loading = new Doc;
             loading.title = "Please wait for the import script...";
             const parent = TreeDocument([loading], {
@@ -354,36 +356,36 @@ export namespace Docs {
                 _height: 400,
                 _LODdisable: true
             });
-            Networking.FetchFromServer("/buxton").then(response => {
-                const devices = JSON.parse(response);
-                if (!Array.isArray(devices)) {
-                    if ("error" in devices) {
-                        loading.title = devices.error;
-                    } else {
-                        console.log(devices);
-                        alert("The importer returned an unexpected import format. Check the console.");
-                    }
-                    return;
+            const parentProto = Doc.GetProto(parent);
+            const { _socket } = DocServer;
+            Utils.AddServerHandler(_socket, MessageStore.BuxtonDocumentResult, ({ device, errors }) => {
+                if (!responded) {
+                    responded = true;
+                    parentProto.data = new List<Doc>();
                 }
-                const parentProto = Doc.GetProto(parent);
-                parentProto.data = new List<Doc>();
-                devices.forEach(device => {
+                if (device) {
                     const { __images } = device;
                     delete device.__images;
                     const { ImageDocument, StackingDocument } = Docs.Create;
-                    if (Array.isArray(__images)) {
-                        const constructed = __images.map(relative => Utils.prepend(relative));
-                        const hero = constructed[0];
-                        constructed.splice(0, 1);
-                        const deviceImages = constructed.map((url, i) => ImageDocument(url, { title: `image${i}.${extname(url)}` }));
-                        const doc = StackingDocument(deviceImages, { title: device.title, _LODdisable: true });
-                        const deviceProto = Doc.GetProto(doc);
-                        deviceProto.hero = new ImageField(hero);
-                        Docs.Get.DocumentHierarchyFromJson(device, undefined, deviceProto);
-                        Doc.AddDocToList(parentProto, "data", doc);
-                    }
-                });
+                    const constructed = __images.map(relative => Utils.prepend(relative));
+                    const deviceImages = constructed.map((url, i) => ImageDocument(url, { title: `image${i}.${extname(url)}` }));
+                    const doc = StackingDocument(deviceImages, { title: device.title, _LODdisable: true });
+                    const deviceProto = Doc.GetProto(doc);
+                    deviceProto.hero = new ImageField(constructed[0]);
+                    Docs.Get.DocumentHierarchyFromJson(device, undefined, deviceProto);
+                    Doc.AddDocToList(parentProto, "data", doc);
+                } else if (errors) {
+                    console.log(errors);
+                } else {
+                    alert("A Buxton document import was completely empty (??)");
+                }
+            });
+            Utils.AddServerHandler(_socket, MessageStore.BuxtonImportComplete, ({ deviceCount, errorCount }) => {
+                _socket.off(MessageStore.BuxtonDocumentResult.Message);
+                _socket.off(MessageStore.BuxtonImportComplete.Message);
+                alert(`Successfully imported ${deviceCount} device${deviceCount === 1 ? "" : "s"}, with ${errorCount} error${errorCount === 1 ? "" : "s"}.`);
             });
+            Utils.Emit(_socket, MessageStore.BeginBuxtonImport, "");
             return parent;
         }
 
diff --git a/src/scraping/buxton/final/BuxtonImporter.ts b/src/scraping/buxton/final/BuxtonImporter.ts
index 3d7421e90..d9d48d68c 100644
--- a/src/scraping/buxton/final/BuxtonImporter.ts
+++ b/src/scraping/buxton/final/BuxtonImporter.ts
@@ -8,7 +8,6 @@ const StreamZip = require('node-stream-zip');
 const createImageSizeStream = require("image-size-stream");
 import { parseXml } from "libxmljs";
 import { strictEqual } from "assert";
-import { BatchedArray, TimeUnit } from "array-batcher";
 
 interface DocumentContents {
     body: string;
@@ -24,21 +23,33 @@ export interface DeviceDocument {
     longDescription: string;
     company: string;
     year: number;
-    originalPrice: number;
-    degreesOfFreedom: number;
+    originalPrice?: number;
+    degreesOfFreedom?: number;
     dimensions?: string;
     primaryKey: string;
     secondaryKey: string;
     attribute: string;
+    __images: string[];
+    hyperlinks: string[];
+    captions: string[];
+    embeddedFileNames: string[];
 }
 
-interface AnalysisResult {
+export interface AnalysisResult {
     device?: DeviceDocument;
-    errors?: any;
+    errors?: { [key: string]: string };
 }
 
 type Transformer<T> = (raw: string) => { transformed?: T, error?: string };
 
+export interface ImportResults {
+    deviceCount: number,
+    errorCount: number
+}
+
+type ResultCallback = (result: AnalysisResult) => void;
+type TerminatorCallback = (result: ImportResults) => void;
+
 interface Processor<T> {
     exp: RegExp;
     matchIndex?: number;
@@ -168,7 +179,7 @@ const successOut = "buxton.json";
 const failOut = "incomplete.json";
 const deviceKeys = Array.from(RegexMap.keys());
 
-export default async function executeImport() {
+export default async function executeImport(emitter: ResultCallback, terminator: TerminatorCallback) {
     try {
         const contents = readdirSync(sourceDir);
         const wordDocuments = contents.filter(file => /.*\.docx?$/.test(file)).map(file => `${sourceDir}/${file}`);
@@ -176,7 +187,7 @@ export default async function executeImport() {
             rimraf.sync(dir);
             mkdirSync(dir);
         });
-        return parseFiles(wordDocuments);
+        return parseFiles(wordDocuments, emitter, terminator);
     } catch (e) {
         const message = [
             "Unable to find a source directory.",
@@ -188,23 +199,22 @@ export default async function executeImport() {
     }
 }
 
-async function parseFiles(wordDocuments: string[]): Promise<DeviceDocument[]> {
-    const imported = await BatchedArray.from(wordDocuments, { batchSize: 8 }).batchedMapPatientInterval<{ fileName: string, contents: DocumentContents }>({ magnitude: 10, unit: TimeUnit.Seconds }, async (batch, collector) => {
-        for (const filePath of batch) {
-            const fileName = path.basename(filePath).replace("Bill_Notes_", "");
-            console.log(cyan(`\nExtracting contents from ${fileName}...`));
-            collector.push({ fileName, contents: await extractFileContents(filePath) });
-        }
-    });
-    console.log(yellow("\nAnalyzing the extracted document text...\n"));
-    const results = imported.map(({ fileName, contents }) => analyze(fileName, contents));
+async function parseFiles(wordDocuments: string[], emitter: ResultCallback, terminator: TerminatorCallback): Promise<DeviceDocument[]> {
+    const results: AnalysisResult[] = [];
+    for (const filePath of wordDocuments) {
+        const fileName = path.basename(filePath).replace("Bill_Notes_", "");
+        console.log(cyan(`\nExtracting contents from ${fileName}...`));
+        const result = analyze(fileName, await extractFileContents(filePath));
+        emitter(result);
+        results.push(result);
+    }
 
     const masterDevices: DeviceDocument[] = [];
-    const masterErrors: any[] = [];
+    const masterErrors: { [key: string]: string }[] = [];
     results.forEach(({ device, errors }) => {
         if (device) {
             masterDevices.push(device);
-        } else {
+        } else if (errors) {
             masterErrors.push(errors);
         }
     });
@@ -219,6 +229,8 @@ async function parseFiles(wordDocuments: string[]): Promise<DeviceDocument[]> {
     await writeOutputFile(failOut, masterErrors, total, false);
     console.log();
 
+    terminator({ deviceCount: masterDevices.length, errorCount: masterErrors.length });
+
     return masterDevices;
 }
 
@@ -311,7 +323,7 @@ function analyze(fileName: string, contents: DocumentContents): AnalysisResult {
         embeddedFileNames,
         __images: imageUrls
     };
-    const errors: any = { fileName };
+    const errors: { [key: string]: string } = { fileName };
 
     for (const key of deviceKeys) {
         const { exp, transformer, matchIndex, required } = RegexMap.get(key)!;
diff --git a/src/server/ApiManagers/UtilManager.ts b/src/server/ApiManagers/UtilManager.ts
index 5aac8261e..8adc3da81 100644
--- a/src/server/ApiManagers/UtilManager.ts
+++ b/src/server/ApiManagers/UtilManager.ts
@@ -39,15 +39,6 @@ export default class UtilManager extends ApiManager {
             }
         });
 
-        register({
-            method: Method.GET,
-            subscription: "/buxton",
-            secureHandler: async ({ req, res }) => {
-                req.setTimeout(300000);
-                res.send(await executeImport());
-            }
-        });
-
         register({
             method: Method.GET,
             subscription: "/version",
diff --git a/src/server/Message.ts b/src/server/Message.ts
index 79b6fa1e0..2a03e2311 100644
--- a/src/server/Message.ts
+++ b/src/server/Message.ts
@@ -1,4 +1,5 @@
 import { Utils } from "../Utils";
+import { AnalysisResult, ImportResults } from "../scraping/buxton/final/BuxtonImporter";
 
 export class Message<T> {
     private _name: string;
@@ -56,6 +57,9 @@ export namespace MessageStore {
     export const GetDocument = new Message<string>("Get Document");
     export const DeleteAll = new Message<any>("Delete All");
     export const ConnectionTerminated = new Message<string>("Connection Terminated");
+    export const BeginBuxtonImport = new Message<string>("Begin Buxton Import");
+    export const BuxtonDocumentResult = new Message<AnalysisResult>("Buxton Document Result");
+    export const BuxtonImportComplete = new Message<ImportResults>("Buxton Import Complete");
 
     export const GetRefField = new Message<string>("Get Ref Field");
     export const GetRefFields = new Message<string[]>("Get Ref Fields");
@@ -65,5 +69,4 @@ export namespace MessageStore {
     export const DeleteField = new Message<string>("Delete field");
     export const DeleteFields = new Message<string[]>("Delete fields");
 
-
 }
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index ba7ca8f35..724221be1 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -12,6 +12,7 @@ import { timeMap } from "../ApiManagers/UserManager";
 import { green } from "colors";
 import { networkInterfaces, type } from "os";
 import { object } from "serializr";
+import executeImport from "../../scraping/buxton/final/BuxtonImporter";
 
 export namespace WebSocket {
 
@@ -106,6 +107,12 @@ export namespace WebSocket {
             Utils.AddServerHandler(socket, MessageStore.DeleteFields, ids => DeleteFields(socket, ids));
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefField, GetRefField);
             Utils.AddServerHandlerCallback(socket, MessageStore.GetRefFields, GetRefFields);
+            Utils.AddServerHandler(socket, MessageStore.BeginBuxtonImport, () => {
+                executeImport(
+                    deviceOrError => Utils.Emit(socket, MessageStore.BuxtonDocumentResult, deviceOrError),
+                    results => Utils.Emit(socket, MessageStore.BuxtonImportComplete, results)
+                );
+            });
 
             disconnect = () => {
                 socket.broadcast.emit("connection_terminated", Date.now());
-- 
cgit v1.2.3-70-g09d2