From b4a23b21bbe0a44df1328419c7d94b97a772e54f Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Tue, 19 Nov 2019 19:06:47 -0500
Subject: progress w password

---
 src/server/index.ts | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'src/server')

diff --git a/src/server/index.ts b/src/server/index.ts
index 1595781dc..d5dbe8913 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -668,6 +668,16 @@ addSecureRoute({
     onRejection: (_req, res) => res.send(JSON.stringify({ id: "__guest__", email: "" }))
 });
 
+addSecureRoute({
+    method: Method.POST,
+    subscribers: '/internalResetPassword',
+    onValidation: (user, _req, res) => {
+        // user password auth
+        // new pass same
+        // do extra stuff
+    }
+});
+
 const ServicesApiKeyMap = new Map<string, string | undefined>([
     ["face", process.env.FACE],
     ["vision", process.env.VISION],
-- 
cgit v1.2.3-70-g09d2


From 56b83d89f37a5523ab319977e3385f539ecaf996 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Sat, 23 Nov 2019 16:59:53 -0500
Subject: pushing progress...need to figure out bcrypt.compare"

---
 src/client/util/SettingsManager.scss | 16 ++++++++----
 src/client/util/SettingsManager.tsx  | 22 +++++++++++++----
 src/server/index.ts                  | 48 +++++++++++++++++++++++++++++++++---
 3 files changed, 73 insertions(+), 13 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index cd9d2569a..0d637868b 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -17,18 +17,24 @@
         .settings-content {
             padding-left: 1em;
             display: flex;
+            flex-direction: column;
             justify-content: space-between;
+
+            input {
+                min-width: 100%;
+            }
         }
     }
 
     .focus-span {
         text-decoration: underline;
     }
-p {
-    text-align: left;
-    padding: 0;
-    margin: 0 0 20px 0;
-}
+
+    p {
+        text-align: left;
+        padding: 0;
+        margin: 0 0 20px 0;
+    }
 
     h1 {
         color: $dark-color;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 76f4bb964..ee2d9ff21 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -18,6 +18,8 @@ export default class SettingsManager extends React.Component<{}> {
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
     private curr_password_ref = React.createRef<HTMLInputElement>();
+    private new_password_ref = React.createRef<HTMLInputElement>();
+    private new_confirm_ref = React.createRef<HTMLInputElement>();
 
     public open = action(() => {
         SelectionManager.DeselectAll();
@@ -35,12 +37,19 @@ export default class SettingsManager extends React.Component<{}> {
 
     private dispatchRequest = async () => {
         const curr_pass = this.curr_password_ref.current!.value;
-        const { error: resultError, ...others } = await Identified.PostToServer('/internalResetPassword', { curr_pass });
-        if (resultError) {
+        const new_pass = this.new_password_ref.current!.value;
+        const new_confirm = this.new_confirm_ref.current!.value;
+        console.log('ready!');
+        // const { error, hello } = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
+        const resp = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
+        console.log('set!');
+        console.log('response', resp);
+        console.log('hm', resp.hm);
+        if (resp.error) {
             // we failed
-            console.log(resultError);
+            console.log(resp.error);
         }
-        console.log(others);
+        console.log('go!');
         // do stuff with response
     }
 
@@ -59,7 +68,10 @@ export default class SettingsManager extends React.Component<{}> {
                         <p>static data</p>
                     </div>
                     <div className="settings-content">
-                        <input ref={this.curr_password_ref}></input>
+                        <input ref={this.curr_password_ref} />
+                        <input ref={this.new_password_ref} />
+                        <input ref={this.new_confirm_ref} />
+                        <button onClick={this.dispatchRequest}>submit</button>
                         this changes with what you select!
                     </div>
                 </div>
diff --git a/src/server/index.ts b/src/server/index.ts
index d96bd4d9a..df9edac50 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -19,7 +19,7 @@ import { Socket } from 'socket.io';
 import * as webpack from 'webpack';
 import * as wdm from 'webpack-dev-middleware';
 import * as whm from 'webpack-hot-middleware';
-import { Utils } from '../Utils';
+import { Utils, returnEmptyString } from '../Utils';
 import { getForgot, getLogin, getLogout, getReset, getSignup, postForgot, postLogin, postReset, postSignup } from './authentication/controllers/user_controller';
 import { DashUserModel } from './authentication/models/user_model';
 import { Client } from './Client';
@@ -56,6 +56,8 @@ import { reject } from 'bluebird';
 import { ExifData } from 'exif';
 import { Result } from '../client/northstar/model/idea/idea';
 import RouteSubscriber from './RouteSubscriber';
+//@ts-ignore
+import * as bcrypt from "bcrypt-nodejs";
 
 const download = (url: string, dest: fs.PathLike) => request.get(url).pipe(fs.createWriteStream(dest));
 let youtubeApiKey: string;
@@ -671,10 +673,51 @@ addSecureRoute({
 addSecureRoute({
     method: Method.POST,
     subscribers: '/internalResetPassword',
-    onValidation: (user, _req, res) => {
+    onValidation: async (user, req, res) => {
+        const result: any = {};
+        // perhaps should assert whether curr password is entered correctly
+        const validated = await new Promise<Opt<boolean>>(resolve => {
+            bcrypt.compare(req.body.curr_pass, user.password, (err, result_1) => {
+                if (err) {
+                    result.error = "Incorrect current password";
+                    res.send(result);
+                    resolve(undefined);
+                } else {
+                    result.hm = err;
+                    resolve(result_1);
+                }
+            });
+        });
+
+        if (validated === undefined) {
+            return;
+        }
+
+        result.hello = validated;
+        req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
+        req.assert("new_confirm", "Passwords do not match").equals(req.body.new_pass);
+
+        // was there error in validating new passwords?
+        if (req.validationErrors()) {
+            // was there error?
+            result.error = req.validationErrors();
+            result.pass = user.password;
+        }
+
+        user.password = req.body.password;
+        user.passwordResetToken = undefined;
+        user.passwordResetExpires = undefined;
+
+        user.save(function (err) {
+            result.error = "saving";
+            // was there error?
+        });
+
         // user password auth
         // new pass same
         // do extra stuff
+        //
+        res.send(result);
     }
 });
 
@@ -1173,7 +1216,6 @@ const suffixMap: { [type: string]: (string | [string, string | ((json: any) => a
     "pdf": ["_t", "url"],
     "audio": ["_t", "url"],
     "web": ["_t", "url"],
-    "RichTextField": ["_t", value => value.Text],
     "date": ["_d", value => new Date(value.date).toISOString()],
     "proxy": ["_i", "fieldId"],
     "list": ["_l", list => {
-- 
cgit v1.2.3-70-g09d2


From 88a716d8b7abb0255feea5bc32843ba68910eff5 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Thu, 5 Dec 2019 11:57:15 -0500
Subject: password reset live

---
 package.json                          |  2 +-
 src/client/util/SettingsManager.scss  | 34 +++++++++++++++++++++++-
 src/client/util/SettingsManager.tsx   | 50 +++++++++++++++++++++--------------
 src/server/ApiManagers/UserManager.ts | 49 ++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+), 22 deletions(-)

(limited to 'src/server')

diff --git a/package.json b/package.json
index 499aefdb5..574c7e7fa 100644
--- a/package.json
+++ b/package.json
@@ -229,4 +229,4 @@
         "xoauth2": "^1.2.0",
         "youtube": "^0.1.0"
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 0d637868b..228625182 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -1,17 +1,45 @@
 @import "../views/globalCssVariables";
 
+.dialogue-box {
+    background-color: whitesmoke !important;
+    color: grey;
+
+    button {
+        background: $lighter-alt-accent;
+        outline: none;
+        border-radius: 5px;
+        border: 0px;
+        color: #fcfbf7;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        font-size: 75%;
+        padding: 10px;
+        transition: transform 0.2s;
+        margin: 2px;
+    }
+}
+
 .settings-interface {
     display: flex;
     flex-direction: column;
 
+    input {
+        border-radius: 5px;
+        border: none;
+        padding: 4px 4px 4px 10px;
+        margin: 2px;
+    }
+
     .settings-body {
         display: flex;
         flex-direction: row;
 
+
         .settings-type {
             display: flex;
             flex-direction: column;
             flex-basis: 30%;
+
         }
 
         .settings-content {
@@ -20,6 +48,10 @@
             flex-direction: column;
             justify-content: space-between;
 
+            button {
+                background: $darker-alt-accent;
+            }
+
             input {
                 min-width: 100%;
             }
@@ -40,7 +72,7 @@
         color: $dark-color;
         text-transform: uppercase;
         letter-spacing: 2px;
-        font-size: 75%;
+        font-size: 120%;
     }
 
     .close-button {
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index ee2d9ff21..0fcb80a3f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -7,7 +7,7 @@ import * as fa from '@fortawesome/free-solid-svg-icons';
 import { SelectionManager } from "./SelectionManager";
 import "./SettingsManager.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Identified } from "../Network";
+import { Networking } from "../Network";
 
 library.add(fa.faWindowClose);
 
@@ -36,21 +36,31 @@ export default class SettingsManager extends React.Component<{}> {
     }
 
     private dispatchRequest = async () => {
-        const curr_pass = this.curr_password_ref.current!.value;
-        const new_pass = this.new_password_ref.current!.value;
-        const new_confirm = this.new_confirm_ref.current!.value;
-        console.log('ready!');
-        // const { error, hello } = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
-        const resp = await Identified.PostToServer('/internalResetPassword', { curr_pass, new_pass, new_confirm });
-        console.log('set!');
-        console.log('response', resp);
-        console.log('hm', resp.hm);
-        if (resp.error) {
-            // we failed
-            console.log(resp.error);
+        const curr_pass = this.curr_password_ref.current?.value;
+        const new_pass = this.new_password_ref.current?.value;
+        const new_confirm = this.new_confirm_ref.current?.value;
+
+        if (!(curr_pass && new_pass && new_confirm)) {
+            alert("Hey we're missing some fields!");
+            return;
+        }
+
+        const passwordBundle = {
+            curr_pass,
+            new_pass,
+            new_confirm
+        };
+        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+        if (error) {
+            alert("Uh oh! " + error);
+            return;
         }
-        console.log('go!');
-        // do stuff with response
+
+        alert("Password successfully updated!");
+    }
+
+    onClick = (event: any) => {
+        console.log(event);
     }
 
     private get settingsInterface() {
@@ -64,13 +74,13 @@ export default class SettingsManager extends React.Component<{}> {
                 </div>
                 <div className="settings-body">
                     <div className="settings-type">
-                        <p>changeable settings</p>
-                        <p>static data</p>
+                        <button onClick={this.onClick} value="settings">settings</button>
+                        <button onClick={this.onClick} value="data">data</button>
                     </div>
                     <div className="settings-content">
-                        <input ref={this.curr_password_ref} />
-                        <input ref={this.new_password_ref} />
-                        <input ref={this.new_confirm_ref} />
+                        <input placeholder="current password" ref={this.curr_password_ref} />
+                        <input placeholder="new password" ref={this.new_password_ref} />
+                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
                         <button onClick={this.dispatchRequest}>submit</button>
                         this changes with what you select!
                     </div>
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 0f7d14320..7e8ceb189 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -2,6 +2,8 @@ import ApiManager, { Registration } from "./ApiManager";
 import { Method } from "../RouteManager";
 import { Database } from "../database";
 import { msToTime } from "../ActionUtilities";
+import * as bcrypt from "bcrypt-nodejs";
+import { Opt } from "../../new_fields/Doc";
 
 export const timeMap: { [id: string]: number } = {};
 interface ActivityUnit {
@@ -36,6 +38,53 @@ export default class UserManager extends ApiManager {
             onUnauthenticated: ({ res }) => res.send(JSON.stringify({ id: "__guest__", email: "" }))
         });
 
+        register({
+            method: Method.POST,
+            subscription: '/internalResetPassword',
+            onValidation: async ({ user, req, res }) => {
+                const result: any = {};
+                const { curr_pass, new_pass, new_confirm } = req.body;
+                // perhaps should assert whether curr password is entered correctly
+                const validated = await new Promise<Opt<boolean>>(resolve => {
+                    bcrypt.compare(curr_pass, user.password, (err, passwords_match) => {
+                        if (err) {
+                            result.error = "Incorrect current password";
+                            res.send(result);
+                            resolve(undefined);
+                        } else {
+                            resolve(passwords_match);
+                        }
+                    });
+                });
+
+                if (validated === undefined) {
+                    return;
+                }
+
+                req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
+                req.assert("new_confirm", "Passwords do not match").equals(new_pass);
+
+                // was there error in validating new passwords?
+                if (req.validationErrors()) {
+                    // was there error?
+                    result.error = req.validationErrors();
+                }
+
+                user.password = new_pass;
+                user.passwordResetToken = undefined;
+                user.passwordResetExpires = undefined;
+
+                user.save(err => {
+                    if (err) {
+                        result.error = "saving";
+                    }
+                });
+
+                res.send(result);
+            }
+        });
+
+
         register({
             method: Method.GET,
             subscription: "/activity",
-- 
cgit v1.2.3-70-g09d2


From a9dab5e6befa36c54afd1e46507f266fda30a42e Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Sat, 7 Dec 2019 17:07:36 -0500
Subject: progress

---
 src/client/util/SettingsManager.scss    |  9 ++++++
 src/client/util/SettingsManager.tsx     | 49 +++++++++++++++++++++++++--------
 src/server/ApiManagers/DeleteManager.ts | 17 +++++++++++-
 src/server/ApiManagers/UserManager.ts   | 12 +++++---
 4 files changed, 70 insertions(+), 17 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 228625182..5839fa748 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -47,6 +47,7 @@
             display: flex;
             flex-direction: column;
             justify-content: space-between;
+            text-align: left;
 
             button {
                 background: $darker-alt-accent;
@@ -55,6 +56,14 @@
             input {
                 min-width: 100%;
             }
+
+            .error-text {
+                color: #C40233;
+            }
+
+            .success-text {
+                color: #009F6B;
+            }
         }
     }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 0fcb80a3f..e475cac1f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -17,6 +17,9 @@ export default class SettingsManager extends React.Component<{}> {
     @observable private isOpen = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
+    @observable private settingsContent = "settings";
+    @observable private errorText = "";
+    @observable private successText = "";
     private curr_password_ref = React.createRef<HTMLInputElement>();
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
@@ -35,13 +38,15 @@ export default class SettingsManager extends React.Component<{}> {
         SettingsManager.Instance = this;
     }
 
+    @action
     private dispatchRequest = async () => {
         const curr_pass = this.curr_password_ref.current?.value;
         const new_pass = this.new_password_ref.current?.value;
         const new_confirm = this.new_confirm_ref.current?.value;
 
         if (!(curr_pass && new_pass && new_confirm)) {
-            alert("Hey we're missing some fields!");
+            this.changeAlertText("Hey, we're missing some fields!", "");
+            // alert("Hey we're missing some fields!");
             return;
         }
 
@@ -50,17 +55,31 @@ export default class SettingsManager extends React.Component<{}> {
             new_pass,
             new_confirm
         };
-        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+
+        const res = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+        const error = res.error;
+        console.log(res, "is res");
         if (error) {
-            alert("Uh oh! " + error);
+            console.log(error, error[0].msg);
+            this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
+            // alert("Uh oh! " + error.msg);
             return;
         }
 
-        alert("Password successfully updated!");
+        this.changeAlertText("", "Password successfully updated!");
+        console.log('success!');
+        // alert("Password successfully updated!");
+    }
+
+    @action
+    private changeAlertText = (errortxt: string, successtxt: string) => {
+        this.errorText = errortxt;
+        this.successText = successtxt;
     }
 
+    @action
     onClick = (event: any) => {
-        console.log(event);
+        this.settingsContent = event.currentTarget.value;
     }
 
     private get settingsInterface() {
@@ -77,13 +96,19 @@ export default class SettingsManager extends React.Component<{}> {
                         <button onClick={this.onClick} value="settings">settings</button>
                         <button onClick={this.onClick} value="data">data</button>
                     </div>
-                    <div className="settings-content">
-                        <input placeholder="current password" ref={this.curr_password_ref} />
-                        <input placeholder="new password" ref={this.new_password_ref} />
-                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
-                        <button onClick={this.dispatchRequest}>submit</button>
-                        this changes with what you select!
-                    </div>
+                    {this.settingsContent === "settings" ?
+                        <div className="settings-content">
+                            change password here:
+                            <input placeholder="current password" ref={this.curr_password_ref} />
+                            <input placeholder="new password" ref={this.new_password_ref} />
+                            <input placeholder="confirm new password" ref={this.new_confirm_ref} />
+                            {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+                            {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+                            <button onClick={this.dispatchRequest}>submit</button>
+
+                        </div>
+                        :
+                        <div className="settings-content">hello?</div>}
                 </div>
 
             </div>
diff --git a/src/server/ApiManagers/DeleteManager.ts b/src/server/ApiManagers/DeleteManager.ts
index 71818c673..1fdc7cc36 100644
--- a/src/server/ApiManagers/DeleteManager.ts
+++ b/src/server/ApiManagers/DeleteManager.ts
@@ -1,5 +1,5 @@
 import ApiManager, { Registration } from "./ApiManager";
-import { Method, _permission_denied } from "../RouteManager";
+import { Method, _permission_denied, OnUnauthenticated } from "../RouteManager";
 import { WebSocket } from "../Websocket/Websocket";
 import { Database } from "../database";
 
@@ -31,6 +31,21 @@ export default class DeleteManager extends ApiManager {
             }
         });
 
+        const hi: OnUnauthenticated = async ({ res, isRelease }) => {
+            if (isRelease) {
+                return _permission_denied(res, deletionPermissionError);
+            }
+            await Database.Instance.deleteAll('users');
+            res.redirect("/home");
+        };
+
+        // register({
+        //     method: Method.GET,
+        //     subscription: "/deleteUsers",
+        //     onValidation: hi,
+        //     onUnauthenticated: hi
+        // });
+
 
         register({
             method: Method.GET,
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 7e8ceb189..3ae2a5d30 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -47,8 +47,8 @@ export default class UserManager extends ApiManager {
                 // perhaps should assert whether curr password is entered correctly
                 const validated = await new Promise<Opt<boolean>>(resolve => {
                     bcrypt.compare(curr_pass, user.password, (err, passwords_match) => {
-                        if (err) {
-                            result.error = "Incorrect current password";
+                        if (err || !passwords_match) {
+                            result.error = [{ msg: "Incorrect current password" }];
                             res.send(result);
                             resolve(undefined);
                         } else {
@@ -61,9 +61,13 @@ export default class UserManager extends ApiManager {
                     return;
                 }
 
-                req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
+                // req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
                 req.assert("new_confirm", "Passwords do not match").equals(new_pass);
 
+                if (req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 })) {
+                    result.inch = "interesting";
+                }
+
                 // was there error in validating new passwords?
                 if (req.validationErrors()) {
                     // was there error?
@@ -76,7 +80,7 @@ export default class UserManager extends ApiManager {
 
                 user.save(err => {
                     if (err) {
-                        result.error = "saving";
+                        result.error = [{ msg: "Error while saving new password" }];
                     }
                 });
 
-- 
cgit v1.2.3-70-g09d2


From 130aaa1a8f2525db12479fcfef2204ed85a2b58b Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Sat, 7 Dec 2019 17:21:40 -0500
Subject: rolled back to working state, saving new changes

---
 src/client/util/SettingsManager.tsx   | 49 ++++++++++++++++++++++++++---------
 src/server/ApiManagers/UserManager.ts | 13 +++++++---
 2 files changed, 46 insertions(+), 16 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 0fcb80a3f..e475cac1f 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -17,6 +17,9 @@ export default class SettingsManager extends React.Component<{}> {
     @observable private isOpen = false;
     @observable private dialogueBoxOpacity = 1;
     @observable private overlayOpacity = 0.4;
+    @observable private settingsContent = "settings";
+    @observable private errorText = "";
+    @observable private successText = "";
     private curr_password_ref = React.createRef<HTMLInputElement>();
     private new_password_ref = React.createRef<HTMLInputElement>();
     private new_confirm_ref = React.createRef<HTMLInputElement>();
@@ -35,13 +38,15 @@ export default class SettingsManager extends React.Component<{}> {
         SettingsManager.Instance = this;
     }
 
+    @action
     private dispatchRequest = async () => {
         const curr_pass = this.curr_password_ref.current?.value;
         const new_pass = this.new_password_ref.current?.value;
         const new_confirm = this.new_confirm_ref.current?.value;
 
         if (!(curr_pass && new_pass && new_confirm)) {
-            alert("Hey we're missing some fields!");
+            this.changeAlertText("Hey, we're missing some fields!", "");
+            // alert("Hey we're missing some fields!");
             return;
         }
 
@@ -50,17 +55,31 @@ export default class SettingsManager extends React.Component<{}> {
             new_pass,
             new_confirm
         };
-        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+
+        const res = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+        const error = res.error;
+        console.log(res, "is res");
         if (error) {
-            alert("Uh oh! " + error);
+            console.log(error, error[0].msg);
+            this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
+            // alert("Uh oh! " + error.msg);
             return;
         }
 
-        alert("Password successfully updated!");
+        this.changeAlertText("", "Password successfully updated!");
+        console.log('success!');
+        // alert("Password successfully updated!");
+    }
+
+    @action
+    private changeAlertText = (errortxt: string, successtxt: string) => {
+        this.errorText = errortxt;
+        this.successText = successtxt;
     }
 
+    @action
     onClick = (event: any) => {
-        console.log(event);
+        this.settingsContent = event.currentTarget.value;
     }
 
     private get settingsInterface() {
@@ -77,13 +96,19 @@ export default class SettingsManager extends React.Component<{}> {
                         <button onClick={this.onClick} value="settings">settings</button>
                         <button onClick={this.onClick} value="data">data</button>
                     </div>
-                    <div className="settings-content">
-                        <input placeholder="current password" ref={this.curr_password_ref} />
-                        <input placeholder="new password" ref={this.new_password_ref} />
-                        <input placeholder="confirm new password" ref={this.new_confirm_ref} />
-                        <button onClick={this.dispatchRequest}>submit</button>
-                        this changes with what you select!
-                    </div>
+                    {this.settingsContent === "settings" ?
+                        <div className="settings-content">
+                            change password here:
+                            <input placeholder="current password" ref={this.curr_password_ref} />
+                            <input placeholder="new password" ref={this.new_password_ref} />
+                            <input placeholder="confirm new password" ref={this.new_confirm_ref} />
+                            {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+                            {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+                            <button onClick={this.dispatchRequest}>submit</button>
+
+                        </div>
+                        :
+                        <div className="settings-content">hello?</div>}
                 </div>
 
             </div>
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 7e8ceb189..3a7e924ee 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -47,8 +47,8 @@ export default class UserManager extends ApiManager {
                 // perhaps should assert whether curr password is entered correctly
                 const validated = await new Promise<Opt<boolean>>(resolve => {
                     bcrypt.compare(curr_pass, user.password, (err, passwords_match) => {
-                        if (err) {
-                            result.error = "Incorrect current password";
+                        if (err || !passwords_match) {
+                            result.error = [{ msg: "Incorrect current password" }];
                             res.send(result);
                             resolve(undefined);
                         } else {
@@ -61,9 +61,13 @@ export default class UserManager extends ApiManager {
                     return;
                 }
 
-                req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
+                // req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
                 req.assert("new_confirm", "Passwords do not match").equals(new_pass);
 
+                // if (req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 })) {
+                //     result.inch = "interesting";
+                // }
+
                 // was there error in validating new passwords?
                 if (req.validationErrors()) {
                     // was there error?
@@ -76,7 +80,7 @@ export default class UserManager extends ApiManager {
 
                 user.save(err => {
                     if (err) {
-                        result.error = "saving";
+                        result.error = [{ msg: "Error while saving new password" }];
                     }
                 });
 
@@ -85,6 +89,7 @@ export default class UserManager extends ApiManager {
         });
 
 
+
         register({
             method: Method.GET,
             subscription: "/activity",
-- 
cgit v1.2.3-70-g09d2


From 4e3037dac61105f01397d55febb38b2d5bfa50f1 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Sat, 7 Dec 2019 18:04:34 -0500
Subject: added forgot password indication

---
 src/client/util/SettingsManager.tsx   | 10 ++--------
 src/server/ApiManagers/UserManager.ts | 23 +++++++++--------------
 views/login.pug                       |  2 +-
 3 files changed, 12 insertions(+), 23 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index e475cac1f..4872d7280 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -46,7 +46,6 @@ export default class SettingsManager extends React.Component<{}> {
 
         if (!(curr_pass && new_pass && new_confirm)) {
             this.changeAlertText("Hey, we're missing some fields!", "");
-            // alert("Hey we're missing some fields!");
             return;
         }
 
@@ -56,19 +55,13 @@ export default class SettingsManager extends React.Component<{}> {
             new_confirm
         };
 
-        const res = await Networking.PostToServer('/internalResetPassword', passwordBundle);
-        const error = res.error;
-        console.log(res, "is res");
+        const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
         if (error) {
-            console.log(error, error[0].msg);
             this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
-            // alert("Uh oh! " + error.msg);
             return;
         }
 
         this.changeAlertText("", "Password successfully updated!");
-        console.log('success!');
-        // alert("Password successfully updated!");
     }
 
     @action
@@ -105,6 +98,7 @@ export default class SettingsManager extends React.Component<{}> {
                             {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
                             {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
                             <button onClick={this.dispatchRequest}>submit</button>
+                            <a href="/forgotPassword">forgot password?</a>
 
                         </div>
                         :
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 6997cb192..4556e01ea 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -61,28 +61,23 @@ export default class UserManager extends ApiManager {
                     return;
                 }
 
-                // req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
+                req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 });
                 req.assert("new_confirm", "Passwords do not match").equals(new_pass);
-
-<<<<<<< HEAD
-                // if (req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 })) {
-                //     result.inch = "interesting";
-                // }
-=======
-                if (req.assert("new_pass", "Password must be at least 4 characters long").len({ min: 4 })) {
-                    result.inch = "interesting";
+                if (curr_pass === new_pass) {
+                    result.error = [{ msg: "Current and new password are the same" }];
                 }
->>>>>>> a9dab5e6befa36c54afd1e46507f266fda30a42e
-
                 // was there error in validating new passwords?
                 if (req.validationErrors()) {
                     // was there error?
                     result.error = req.validationErrors();
                 }
 
-                user.password = new_pass;
-                user.passwordResetToken = undefined;
-                user.passwordResetExpires = undefined;
+                // will only change password if there are no errors.
+                if (!result.error) {
+                    user.password = new_pass;
+                    user.passwordResetToken = undefined;
+                    user.passwordResetExpires = undefined;
+                }
 
                 user.save(err => {
                     if (err) {
diff --git a/views/login.pug b/views/login.pug
index 26da5e29e..98816e9c8 100644
--- a/views/login.pug
+++ b/views/login.pug
@@ -9,7 +9,7 @@ block content
         .overlay(id='overlay_login')
             a(href="/signup")
                 img(id='new_user', src="https://bit.ly/2EuqPb4", alt="")
-            a(href="/forgot")
+            a(href="/forgotPassword")
                 img(id='forgot', src="https://bit.ly/2XjHpSo", alt="")
             .inner.login
                 h3.auth_header Log In
-- 
cgit v1.2.3-70-g09d2


From 36eed6cc3a3387a1f7755a848aea4e19e2645e14 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Thu, 9 Jan 2020 19:55:52 -0500
Subject: some stuff that ive played around with today. mobile interface, five
 fingers, other stuff

---
 package-lock.json                                  | 27 +++++++++
 package.json                                       |  1 +
 src/client/views/GestureOverlay.scss               |  2 +-
 src/client/views/GestureOverlay.tsx                | 69 +++++++++++++---------
 src/client/views/InkingControl.tsx                 | 21 ++++---
 src/client/views/MainView.tsx                      |  4 +-
 src/client/views/Palette.scss                      | 18 ++++++
 src/client/views/Palette.tsx                       | 25 ++++++++
 src/client/views/Touchable.tsx                     | 18 ++++++
 .../views/collections/CollectionSchemaView.scss    | 14 +++--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 54 +++++++++++++++++
 src/client/views/nodes/DocumentView.tsx            | 17 +-----
 src/mobile/ImageUpload.tsx                         | 31 +++++++---
 src/mobile/MobileInterface.tsx                     | 69 ++++++++++++++++++++++
 src/new_fields/InkField.ts                         |  3 +-
 src/pen-gestures/GestureUtils.ts                   |  3 +-
 .../authentication/models/current_user_utils.ts    | 26 ++++++++
 17 files changed, 335 insertions(+), 67 deletions(-)
 create mode 100644 src/client/views/Palette.scss
 create mode 100644 src/client/views/Palette.tsx
 create mode 100644 src/mobile/MobileInterface.tsx

(limited to 'src/server')

diff --git a/package-lock.json b/package-lock.json
index d807d75a1..244b2e7e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2040,6 +2040,11 @@
             "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
             "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
         },
+        "avl": {
+            "version": "1.4.4",
+            "resolved": "https://registry.npmjs.org/avl/-/avl-1.4.4.tgz",
+            "integrity": "sha512-vMjF4jhT2N0naO1fsBTA/lZ2AB70ECBv41na7oBe8B5PCgMVvNrWG+VRKMlbG5Mk5UGbMxzUD9fXK/IBsmmO5A=="
+        },
         "awesome-typescript-loader": {
             "version": "5.2.1",
             "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-5.2.1.tgz",
@@ -2314,6 +2319,14 @@
                 "tweetnacl": "^0.14.3"
             }
         },
+        "bentley-ottman-sweepline": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/bentley-ottman-sweepline/-/bentley-ottman-sweepline-0.1.4.tgz",
+            "integrity": "sha512-Qptw9uoNLM0zLiJfA+9PqFrF5b6pMiJNyoWgqONq4/wVml4NC2N8S4RXYXn4xXR4JEBhHF+euVwwML7D9X1LqA==",
+            "requires": {
+                "avl": "^1.4.0"
+            }
+        },
         "better-assert": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz",
@@ -4316,6 +4329,14 @@
                 "minimalistic-crypto-utils": "^1.0.0"
             }
         },
+        "emit-logger": {
+            "version": "github:chocolateboy/emit-logger#b9d25a2d939e42f29c940861e9648bd0fb810070",
+            "from": "github:chocolateboy/emit-logger#better-emitter-name",
+            "requires": {
+                "chalk": "^1.1.1",
+                "moment": "^2.10.6"
+            }
+        },
         "emoji-regex": {
             "version": "7.0.3",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz",
@@ -7065,6 +7086,7 @@
                 "babel-runtime": "^6.22.0",
                 "bluebird": "^3.4.7",
                 "boolify-string": "^2.0.2",
+                "emit-logger": "github:chocolateboy/emit-logger#better-emitter-name",
                 "lodash": "^4.17.4",
                 "semver": "^5.0.3",
                 "source-map-support": "^0.5.9"
@@ -8545,6 +8567,11 @@
                 }
             }
         },
+        "moment": {
+            "version": "2.24.0",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
+            "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
+        },
         "mongodb": {
             "version": "3.2.7",
             "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-3.2.7.tgz",
diff --git a/package.json b/package.json
index 9bd2273f8..2a72fac80 100644
--- a/package.json
+++ b/package.json
@@ -121,6 +121,7 @@
         "async": "^2.6.2",
         "babel-runtime": "^6.26.0",
         "bcrypt-nodejs": "0.0.3",
+        "bentley-ottman-sweepline": "^0.1.4",
         "bluebird": "^3.5.3",
         "body-parser": "^1.18.3",
         "bootstrap": "^4.3.1",
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index cbc1b6e7d..31601efd4 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -1,6 +1,6 @@
 .gestureOverlay-cont {
     width: 100vw;
-    height: 100vw;
+    height: 100vh;
     position: absolute;
     top: 0;
     left: 0;
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index c88e3f7ae..848927912 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -43,9 +43,43 @@ export default class GestureOverlay extends Touchable {
 
     @action
     onPointerMove = (e: PointerEvent) => {
-        this._points.push({ X: e.clientX, Y: e.clientY });
-        e.stopPropagation();
-        e.preventDefault();
+        if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
+            this._points.push({ X: e.clientX, Y: e.clientY });
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    }
+
+    handleLineGesture = (): boolean => {
+        let actionPerformed = false;
+        const B = this.svgBounds;
+        const ep1 = this._points[0];
+        const ep2 = this._points[this._points.length - 1];
+
+        const target1 = document.elementFromPoint(ep1.X, ep1.Y);
+        const target2 = document.elementFromPoint(ep2.X, ep2.Y);
+        const callback = (doc: Doc) => {
+            if (!this._d1) {
+                this._d1 = doc;
+            }
+            else if (this._d1 !== doc && !LinkManager.Instance.doesLinkExist(this._d1, doc)) {
+                DocUtils.MakeLink({ doc: this._d1 }, { doc: doc });
+                actionPerformed = true;
+            }
+        }
+        const ge = new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
+            {
+                bubbles: true,
+                detail: {
+                    points: this._points,
+                    gesture: GestureUtils.Gestures.Line,
+                    bounds: B,
+                    callbackFn: callback
+                }
+            });
+        target1?.dispatchEvent(ge);
+        target2?.dispatchEvent(ge);
+        return actionPerformed;
     }
 
     @action
@@ -72,31 +106,10 @@ export default class GestureOverlay extends Touchable {
                         actionPerformed = true;
                         break;
                     case GestureUtils.Gestures.Line:
-                        const ep1 = this._points[0];
-                        const ep2 = this._points[this._points.length - 1];
-                        const target1 = document.elementFromPoint(ep1.X, ep1.Y);
-                        const target2 = document.elementFromPoint(ep2.X, ep2.Y);
-                        const callback = (doc: Doc) => {
-                            if (!this._d1) {
-                                this._d1 = doc;
-                            }
-                            else if (this._d1 !== doc && !LinkManager.Instance.doesLinkExist(this._d1, doc)) {
-                                DocUtils.MakeLink({ doc: this._d1 }, { doc: doc });
-                                actionPerformed = true;
-                            }
-                        }
-                        const ge = new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
-                            {
-                                bubbles: true,
-                                detail: {
-                                    points: this._points,
-                                    gesture: GestureUtils.Gestures.Line,
-                                    bounds: B,
-                                    callbackFn: callback
-                                }
-                            })
-                        target1?.dispatchEvent(ge);
-                        target2?.dispatchEvent(ge);
+                        actionPerformed = this.handleLineGesture();
+                        break;
+                    case GestureUtils.Gestures.Scribble:
+                        console.log("scribble");
                         break;
                 }
                 if (actionPerformed) {
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index e33f193b8..243123352 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -4,19 +4,18 @@ import { Doc } from "../../new_fields/Doc";
 import { InkTool } from "../../new_fields/InkField";
 import { List } from "../../new_fields/List";
 import { listSpec } from "../../new_fields/Schema";
-import { Cast, NumCast, StrCast } from "../../new_fields/Types";
+import { Cast, NumCast, StrCast, FieldValue } from "../../new_fields/Types";
 import { Utils } from "../../Utils";
 import { Scripting } from "../util/Scripting";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch, UndoManager } from "../util/UndoManager";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 
-
 export class InkingControl {
     @observable static Instance: InkingControl;
-    @observable private _selectedTool: InkTool = InkTool.None;
-    @observable private _selectedColor: string = "rgb(244, 67, 54)";
-    @observable private _selectedWidth: string = "5";
+    @computed private get _selectedTool(): InkTool { return FieldValue(NumCast(CurrentUserUtils.UserDocument.inkTool)) ?? InkTool.None; }
+    @computed private get _selectedColor(): string { return FieldValue(StrCast(CurrentUserUtils.UserDocument.inkColor)) ?? "rgb(244, 67, 54)"; }
+    @computed private get _selectedWidth(): string { return FieldValue(StrCast(CurrentUserUtils.UserDocument.inkWidth)) ?? "5"; }
     @observable public _open: boolean = false;
 
     constructor() {
@@ -24,7 +23,8 @@ export class InkingControl {
     }
 
     switchTool = action((tool: InkTool): void => {
-        this._selectedTool = tool;
+        // this._selectedTool = tool;
+        CurrentUserUtils.UserDocument.inkTool = tool;
     });
     decimalToHexString(number: number) {
         if (number < 0) {
@@ -36,7 +36,7 @@ export class InkingControl {
 
     @undoBatch
     switchColor = action((color: ColorState): void => {
-        this._selectedColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff");
+        CurrentUserUtils.UserDocument.inkColor = color.hex + (color.rgb.a !== undefined ? this.decimalToHexString(Math.round(color.rgb.a * 255)) : "ff");
 
         if (InkingControl.Instance.selectedTool === InkTool.None) {
             const selected = SelectionManager.SelectedDocuments();
@@ -99,7 +99,8 @@ export class InkingControl {
     });
     @action
     switchWidth = (width: string): void => {
-        this._selectedWidth = width;
+        // this._selectedWidth = width;
+        CurrentUserUtils.UserDocument.inkWidth = width;
     }
 
     @computed
@@ -114,7 +115,8 @@ export class InkingControl {
 
     @action
     updateSelectedColor(value: string) {
-        this._selectedColor = value;
+        // this._selectedColor = value;
+        CurrentUserUtils.UserDocument.inkColor = value;
     }
 
     @computed
@@ -127,6 +129,7 @@ Scripting.addGlobal(function activatePen(pen: any, width: any, color: any) { Ink
 Scripting.addGlobal(function activateBrush(pen: any, width: any, color: any) { InkingControl.Instance.switchTool(pen ? InkTool.Highlighter : InkTool.None); InkingControl.Instance.switchWidth(width); InkingControl.Instance.updateSelectedColor(color); });
 Scripting.addGlobal(function activateEraser(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Eraser : InkTool.None); });
 Scripting.addGlobal(function activateScrubber(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Scrubber : InkTool.None); });
+Scripting.addGlobal(function activateStamp(pen: any) { return InkingControl.Instance.switchTool(pen ? InkTool.Stamp : InkTool.None); });
 Scripting.addGlobal(function deactivateInk() { return InkingControl.Instance.switchTool(InkTool.None); });
 Scripting.addGlobal(function setInkWidth(width: any) { return InkingControl.Instance.switchWidth(width); });
 Scripting.addGlobal(function setInkColor(color: any) { return InkingControl.Instance.updateSelectedColor(color); });
\ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 14c1803c0..f463ca306 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faChevronRight, faClone, faCloudUploadAlt, faCommentAlt, faCut, faEllipsisV, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight,
-    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt
+    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt, faPhone, faStamp
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -135,6 +135,8 @@ export class MainView extends React.Component {
         library.add(faChevronRight);
         library.add(faEllipsisV);
         library.add(faMusic);
+        library.add(faPhone);
+        library.add(faStamp);
         this.initEventListeners();
         this.initAuthenticationRouters();
     }
diff --git a/src/client/views/Palette.scss b/src/client/views/Palette.scss
new file mode 100644
index 000000000..60004c81f
--- /dev/null
+++ b/src/client/views/Palette.scss
@@ -0,0 +1,18 @@
+.palette-container {
+    .palette-thumb {
+        width: 300px;
+        height: 300px;
+        touch-action: pan-x;
+        overflow: scroll;
+
+        .palette-thumbContent {
+            width: 100%;
+            height: 100%;
+
+            .palette-button {
+                width: 100px;
+                height: 100px;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
new file mode 100644
index 000000000..390b7e2c2
--- /dev/null
+++ b/src/client/views/Palette.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import "./Palette.scss";
+import { PointData } from "../../new_fields/InkField";
+
+export interface PaletteProps {
+    x: number;
+    y: number;
+    thumb: number[];
+}
+
+export default class Palette extends React.Component<PaletteProps> {
+    render() {
+        return (
+            <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
+                <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
+                    <div className="palette-thumbContent">
+                        <div className="palette-button" style={{ background: "green" }} onPointerDown={() => console.log("hi")}>1</div>
+                        <div className="palette-button" style={{ background: "red" }}>2</div>
+                        <div className="palette-button" style={{ background: "blue" }}>3</div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 251cd41e5..3eb66ff72 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { action } from 'mobx';
 import { InteractionUtils } from '../util/InteractionUtils';
+import { SelectionManager } from '../util/SelectionManager';
 
 const HOLD_DURATION = 1000;
 
@@ -34,11 +35,19 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
                 case 1:
                     this.handle1PointerDown(e);
                     e.persist();
+                    if (this.holdTimer) {
+                        clearTimeout(this.holdTimer)
+                        this.holdTimer = undefined;
+                    }
                     this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(e), HOLD_DURATION);
+                    console.log(this.holdTimer);
                     break;
                 case 2:
                     this.handle2PointersDown(e);
                     break;
+                case 5:
+                    this.handleHandDown(e);
+                    break;
             }
         }
     }
@@ -54,7 +63,9 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
         if (this.holdTimer) {
+            console.log("clear");
             clearTimeout(this.holdTimer);
+            this.holdTimer = undefined;
         }
         switch (myTouches.length) {
             case 1:
@@ -88,7 +99,9 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
             }
         }
         if (this.holdTimer) {
+            console.log("clear");
             clearTimeout(this.holdTimer);
+            this.holdTimer = undefined;
         }
         this._touchDrag = false;
         e.stopPropagation();
@@ -137,4 +150,9 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         e.stopPropagation();
         e.preventDefault();
     }
+
+    handleHandDown = (e: React.TouchEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index cb95dcbbc..8b3d332af 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -15,6 +15,11 @@
     display: flex;
     justify-content: space-between;
     flex-wrap: nowrap;
+    touch-action: none;
+
+    div {
+        touch-action: none;
+    }
 
 
     .collectionSchemaView-tableContainer {
@@ -49,7 +54,7 @@
     .rt-table {
         height: 100%;
         display: -webkit-inline-box;
-        direction: ltr; 
+        direction: ltr;
         overflow: visible;
     }
 
@@ -202,7 +207,7 @@ button.add-column {
         border-bottom: 1px solid lightgray;
 
         &:first-child {
-            padding-top : 0;
+            padding-top: 0;
         }
 
         &:last-child {
@@ -231,7 +236,7 @@ button.add-column {
         transition: background-color 0.2s;
 
         &:hover {
-            background-color: $light-color-secondary; 
+            background-color: $light-color-secondary;
         }
 
         &.active {
@@ -267,7 +272,7 @@ button.add-column {
             overflow-y: scroll;
             position: absolute;
             top: 28px;
-            box-shadow: 0 10px 16px rgba(0,0,0,0.1);
+            box-shadow: 0 10px 16px rgba(0, 0, 0, 0.1);
 
             .key-option {
                 background-color: $light-color;
@@ -380,6 +385,7 @@ button.add-column {
 
     &.editing {
         padding: 0;
+
         input {
             outline: 0;
             border: none;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9656debf3..d7cccc036 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -44,6 +44,7 @@ import { TraceMobx } from "../../../../new_fields/util";
 import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
 import { LinkManager } from "../../../util/LinkManager";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
+import Palette from "../../Palette";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
 
@@ -444,6 +445,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
             }
             return;
         }
+        if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
+            return;
+        }
         if (!e.cancelBubble) {
             const selectedTool = InkingControl.Instance.selectedTool;
             if (selectedTool === InkTool.None) {
@@ -844,6 +848,53 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         CognitiveServices.Inking.Appliers.ConcatenateHandwriting(this.dataDoc, ["inkAnalysis", "handwriting"], inkData);
     }
 
+    private thumbIdentifier?: number;
+    private hand?: React.Touch[];
+
+    @action
+    handleHandDown = (e: React.TouchEvent) => {
+        const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+        this.hand = fingers;
+        const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+        this.thumbIdentifier = thumb?.identifier;
+        const others = fingers.filter(f => f !== thumb);
+        const minX = Math.min(...others.map(f => f.clientX));
+        const minY = Math.min(...others.map(f => f.clientY));
+        const t = this.getTransform().transformPoint(minX, minY);
+        const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
+        this._palette = <Palette x={t[0]} y={t[1]} thumb={th} />;
+
+        document.removeEventListener("touchmove", this.onTouch);
+        document.removeEventListener("touchmove", this.handleHandMove);
+        document.addEventListener("touchmove", this.handleHandMove);
+        document.removeEventListener("touchend", this.handleHandUp);
+        document.addEventListener("touchend", this.handleHandUp);
+    }
+
+    @action
+    handleHandMove = (e: TouchEvent) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const pt = e.changedTouches.item(i);
+            if (pt?.identifier === this.thumbIdentifier) {
+            }
+        }
+    }
+
+    @action
+    handleHandUp = (e: TouchEvent) => {
+        console.log(e.changedTouches.length);
+        this.onTouchEnd(e);
+        if (this.prevPoints.size < 3) {
+            if (this.hand) {
+                for (const h of this.hand) {
+                    this.prevPoints.has(h.identifier) && this.prevPoints.delete(h.identifier);
+                }
+            }
+            this._palette = undefined;
+            document.removeEventListener("touchend", this.handleHandUp);
+        }
+    }
+
     onContextMenu = (e: React.MouseEvent) => {
         const layoutItems: ContextMenuProps[] = [];
 
@@ -907,9 +958,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         ];
     }
 
+    @observable private _palette?: JSX.Element;
+
     children = () => {
         const eles: JSX.Element[] = [];
         this.extensionDoc && (eles.push(...this.childViews()));
+        this._palette && (eles.push(this._palette));
         // this.currentStroke && (eles.push(this.currentStroke));
         eles.push(<CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />);
         return eles;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 7d6b8bf01..415d0e2ef 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -256,7 +256,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             document.removeEventListener("touchend", this.onTouchEnd);
             document.addEventListener("touchend", this.onTouchEnd);
             if ((e.nativeEvent as any).formattedHandled) e.stopPropagation();
-            console.log("down")
         }
     }
 
@@ -327,6 +326,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                 const fixedAspect = e.ctrlKey || (!layoutDoc.ignoreAspect && nwidth && nheight);
                 if (fixedAspect && e.ctrlKey && layoutDoc.ignoreAspect) {
                     layoutDoc.ignoreAspect = false;
+
                     layoutDoc.nativeWidth = nwidth = layoutDoc.width || 0;
                     layoutDoc.nativeHeight = nheight = layoutDoc.height || 0;
                 }
@@ -357,8 +357,6 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
                     dH && layoutDoc.autoHeight && (layoutDoc.autoHeight = false);
                 }
             }
-            // let newWidth = Math.max(Math.abs(oldPoint1!.clientX - oldPoint2!.clientX), Math.abs(pt1.clientX - pt2.clientX))
-            // this.props.Document.width = newWidth;
             e.stopPropagation();
             e.preventDefault();
         }
@@ -374,19 +372,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             }
             return;
         }
-        // if (!InteractionUtils.IsType(e, InteractionUtils.MOUSETYPE)) {
-        //     e.stopPropagation();
-        //     return;
-        // }
         if (!e.nativeEvent.cancelBubble || this.Document.onClick || this.Document.onDragStart) {
-            // if ((e.nativeEvent.cancelBubble && (e.button === 0 || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE)))
-            //     // return if we're inking, and not selecting a button document
-            //     || (InkingControl.Instance.selectedTool !== InkTool.None && !this.Document.onClick)
-            //     // return if using pen or eraser
-            //     || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || InteractionUtils.IsType(e, InteractionUtils.ERASERTYPE)) {
-            //     return;
-            // }
-
             this._downX = e.clientX;
             this._downY = e.clientY;
             this._hitTemplateDrag = false;
@@ -408,6 +394,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     onPointerMove = (e: PointerEvent): void => {
         if ((e as any).formattedHandled) { e.stopPropagation(); return; }
+        if ((InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) return;
         if (e.cancelBubble && this.active) {
             document.removeEventListener("pointermove", this.onPointerMove); // stop listening to pointerMove if something else has stopPropagated it (e.g., the MarqueeView)
         }
diff --git a/src/mobile/ImageUpload.tsx b/src/mobile/ImageUpload.tsx
index ec698b151..0b0280519 100644
--- a/src/mobile/ImageUpload.tsx
+++ b/src/mobile/ImageUpload.tsx
@@ -11,6 +11,8 @@ import { List } from '../new_fields/List';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
 import { Utils } from '../Utils';
+import MobileInterface from './MobileInterface';
+import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
 
 
 
@@ -104,10 +106,25 @@ class Uploader extends React.Component {
 }
 
 
-DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload");
-
-ReactDOM.render((
-    <Uploader />
-),
-    document.getElementById('root')
-);
\ No newline at end of file
+// DocServer.init(window.location.protocol, window.location.hostname, 4321, "image upload");
+(async () => {
+    const info = await CurrentUserUtils.loadCurrentUser();
+    DocServer.init(window.location.protocol, window.location.hostname, 4321, info.email + "mobile");
+    await Docs.Prototypes.initialize();
+    if (info.id !== "__guest__") {
+        // a guest will not have an id registered
+        await CurrentUserUtils.loadUserDocument(info);
+    }
+    document.getElementById('root')!.addEventListener('wheel', event => {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }, true);
+    ReactDOM.render((
+        // <Uploader />
+        <MobileInterface />
+    ),
+        document.getElementById('root')
+    );
+}
+)();
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
new file mode 100644
index 000000000..ea2fc917f
--- /dev/null
+++ b/src/mobile/MobileInterface.tsx
@@ -0,0 +1,69 @@
+import React = require('react');
+import { observer } from 'mobx-react';
+import { computed, action } from 'mobx';
+import { CurrentUserUtils } from '../server/authentication/models/current_user_utils';
+import { FieldValue, Cast } from '../new_fields/Types';
+import { Doc } from '../new_fields/Doc';
+import { Docs } from '../client/documents/Documents';
+import { CollectionView } from '../client/views/collections/CollectionView';
+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 } from '@fortawesome/free-solid-svg-icons';
+
+@observer
+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; }
+
+    @action
+    componentDidMount = () => {
+        library.add(...[faPenNib, faHighlighter, faEraser, faMousePointer]);
+
+        if (this.userDoc && !this.mainContainer) {
+            const doc = CurrentUserUtils.setupMobileDoc(this.userDoc);
+            this.userDoc.activeMobile = doc;
+        }
+    }
+
+    @computed
+    get mainContent() {
+        if (this.mainContainer) {
+            return <DocumentView
+                Document={this.mainContainer}
+                DataDoc={undefined}
+                LibraryPath={emptyPath}
+                addDocument={undefined}
+                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>;
+        }
+        return "hello";
+    }
+
+    render() {
+        return (
+            <div className="mobile-container">
+                {this.mainContent}
+            </div>
+        );
+    }
+}
\ No newline at end of file
diff --git a/src/new_fields/InkField.ts b/src/new_fields/InkField.ts
index 83d631958..20dbf4b17 100644
--- a/src/new_fields/InkField.ts
+++ b/src/new_fields/InkField.ts
@@ -9,7 +9,8 @@ export enum InkTool {
     Pen,
     Highlighter,
     Eraser,
-    Scrubber
+    Scrubber,
+    Stamp
 }
 
 export interface PointData {
diff --git a/src/pen-gestures/GestureUtils.ts b/src/pen-gestures/GestureUtils.ts
index 4edcfa623..062604458 100644
--- a/src/pen-gestures/GestureUtils.ts
+++ b/src/pen-gestures/GestureUtils.ts
@@ -37,7 +37,8 @@ export namespace GestureUtils {
     export enum Gestures {
         Box = "box",
         Line = "line",
-        Stroke = "stroke"
+        Stroke = "stroke",
+        Scribble = "scribble"
     }
 
     export const GestureRecognizer = new NDollarRecognizer(false);
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 220c37e2b..71dd34e68 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -28,6 +28,7 @@ export class CurrentUserUtils {
 
     @observable public static GuestTarget: Doc | undefined;
     @observable public static GuestWorkspace: Doc | undefined;
+    @observable public static GuestMobile: Doc | undefined;
 
     // a default set of note types .. not being used yet...
     static setupNoteTypes(doc: Doc) {
@@ -55,8 +56,10 @@ export class CurrentUserUtils {
             { title: "clickable button", icon: "bolt", ignoreClick: true, drag: 'Docs.Create.ButtonDocument({ width: 150, height: 50, title: "Button" })' },
             { title: "presentation", icon: "tv", ignoreClick: true, drag: 'Doc.UserDoc().curPresentation = Docs.Create.PresDocument(new List<Doc>(), { width: 200, height: 500, title: "a presentation trail" })' },
             { title: "import folder", icon: "cloud-upload-alt", ignoreClick: true, drag: 'Docs.Create.DirectoryImportDocument({ title: "Directory Import", width: 400, height: 400 })' },
+            { title: "mobile view", icon: "phone", ignoreClick: true, drag: 'Doc.UserDoc().activeMobile' },
             { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
             { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { title: "use stamp", icon: "stamp", click: 'activateStamp(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this)', backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
             { 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 },
@@ -90,6 +93,29 @@ export class CurrentUserUtils {
         }
     }
 
+    static setupMobileButtons(doc: Doc, buttons?: string[]) {
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, click?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
+            { title: "record", icon: "microphone", ignoreClick: true, click: "FILL" },
+            { title: "use pen", icon: "pen-nib", click: 'activatePen(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
+            { title: "use highlighter", icon: "highlighter", click: 'activateBrush(this.activePen.pen = sameDocs(this.activePen.pen, this) ? undefined : this,20,this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { 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 },
+        ];
+        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,
+            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined, onClick: data.click ? ScriptField.MakeScript(data.click) : undefined,
+            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen,
+            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+        }));
+    }
+
+    static setupMobileDoc(userDoc: Doc) {
+        return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
+            columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
+        });
+    }
+
     // 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 d86b4db095379d473820271868e8f7cd5830d502 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Mon, 13 Jan 2020 15:25:07 -0500
Subject: palette events are now on gestureOverlay, but cffv and dv is still
 capturing one and two finger events, which makes it impossible for the
 gestureoverlay to capture 5 fingers spread across different targets

---
 src/client/documents/Documents.ts                  |  3 +
 src/client/util/InteractionUtils.ts                | 10 ++-
 src/client/views/GestureOverlay.tsx                | 64 ++++++++++++++-
 src/client/views/InkingControl.tsx                 |  5 +-
 src/client/views/Palette.scss                      | 10 ++-
 src/client/views/Palette.tsx                       | 44 +++++++++-
 src/client/views/Touchable.tsx                     | 21 +++--
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 94 +++++++++++-----------
 src/client/views/nodes/DocumentView.tsx            | 24 +++++-
 src/new_fields/documentSchemas.ts                  |  2 +
 .../authentication/models/current_user_utils.ts    | 23 ++++++
 11 files changed, 224 insertions(+), 76 deletions(-)

(limited to 'src/server')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1853be529..64abd4f57 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -103,6 +103,8 @@ export interface DocumentOptions {
     ischecked?: ScriptField; // returns whether a font icon box is checked
     activePen?: Doc; // which pen document is currently active (used as the radio button state for the 'unhecked' pen tool scripts)
     onClick?: ScriptField;
+    onPointerDown?: ScriptField;
+    onPointerUp?: ScriptField;
     dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script
     onDragStart?: ScriptField; //script to execute at start of drag operation --  e.g., when a "creator" button is dragged this script generates a different document to drop
     icon?: string;
@@ -116,6 +118,7 @@ export interface DocumentOptions {
     color?: string;
     limitHeight?: number; // maximum height for newly created (eg, from pasting) text documents
     // [key: string]: Opt<Field>;
+    pointerHack?: boolean; // for buttons, allows onClick handler to fire onPointerDown
 }
 
 class EmptyBox {
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
index 2e4e8c7ca..76b43da3c 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.ts
@@ -8,12 +8,14 @@ export namespace InteractionUtils {
     const REACT_POINTER_PEN_BUTTON = 0;
     const ERASER_BUTTON = 5;
 
-    export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map<number, React.Touch>): React.Touch[] {
+    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 = e.targetTouches.item(i);
+            const pt: any = e.targetTouches.item(i);
             if (pt && prevPoints.has(pt.identifier)) {
-                myTouches.push(pt);
+                if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
+                    myTouches.push(pt);
+                }
             }
         }
         return myTouches;
@@ -23,7 +25,7 @@ export namespace InteractionUtils {
         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 === (e instanceof PointerEvent ? POINTER_PEN_BUTTON : REACT_POINTER_PEN_BUTTON);
+                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:
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 848927912..830c06f1f 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { Touchable } from "./Touchable";
 import { observer } from "mobx-react";
 import "./GestureOverlay.scss"
-import { computed, observable, action } from "mobx";
+import { computed, observable, action, runInAction } from "mobx";
 import { CreatePolyline } from "./InkingStroke";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
 import { InteractionUtils } from "../util/InteractionUtils";
@@ -12,14 +12,22 @@ import { Doc } from "../../new_fields/Doc";
 import { LinkManager } from "../util/LinkManager";
 import { DocUtils } from "../documents/Documents";
 import { undoBatch } from "../util/UndoManager";
+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";
 
 @observer
 export default class GestureOverlay extends Touchable {
     static Instance: GestureOverlay;
 
     @observable private _points: { X: number, Y: number }[] = [];
+    @observable private _palette?: JSX.Element;
+    @observable public Color: string = "rgb(244, 67, 54)";
+    @observable public Width: number = 5;
 
     private _d1: Doc | undefined;
+    private thumbIdentifier?: number;
 
     constructor(props: Readonly<{}>) {
         super(props);
@@ -27,6 +35,47 @@ export default class GestureOverlay extends Touchable {
         GestureOverlay.Instance = this;
     }
 
+    @action
+    handleHandDown = (e: React.TouchEvent) => {
+        const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+        const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+        this.thumbIdentifier = thumb?.identifier;
+        const others = fingers.filter(f => f !== thumb);
+        const minX = Math.min(...others.map(f => f.clientX));
+        const minY = Math.min(...others.map(f => f.clientY));
+        // const t = this.getTransform().transformPoint(minX, minY);
+        // const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
+
+        const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
+        if (thumbDoc) {
+            this._palette = <Palette x={minX} y={minY} thumb={[thumb.clientX, thumb.clientY]} thumbDoc={thumbDoc} />;
+        }
+
+        document.removeEventListener("touchmove", this.onTouch);
+        document.removeEventListener("touchmove", this.handleHandMove);
+        document.addEventListener("touchmove", this.handleHandMove);
+        document.removeEventListener("touchend", this.handleHandUp);
+        document.addEventListener("touchend", this.handleHandUp);
+    }
+
+    @action
+    handleHandMove = (e: TouchEvent) => {
+        for (let i = 0; i < e.changedTouches.length; i++) {
+            const pt = e.changedTouches.item(i);
+            if (pt?.identifier === this.thumbIdentifier) {
+            }
+        }
+    }
+
+    @action
+    handleHandUp = (e: TouchEvent) => {
+        this.onTouchEnd(e);
+        if (this.prevPoints.size < 3) {
+            this._palette = undefined;
+            document.removeEventListener("touchend", this.handleHandUp);
+        }
+    }
+
     @action
     onPointerDown = (e: React.PointerEvent) => {
         if (InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
@@ -82,6 +131,8 @@ export default class GestureOverlay extends Touchable {
         return actionPerformed;
     }
 
+
+
     @action
     onPointerUp = (e: PointerEvent) => {
         if (this._points.length > 1) {
@@ -157,16 +208,21 @@ 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 }}>
-                {CreatePolyline(this._points, B.left, B.top)}
+                {CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)}
             </svg>
         );
     }
 
     render() {
         return (
-            <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown}>
+            <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onTouchStart}>
                 {this.props.children}
+                {this._palette}
                 {this.currentStroke}
             </div>);
     }
-}
\ No newline at end of file
+}
+
+Scripting.addGlobal("GestureOverlay", GestureOverlay);
+Scripting.addGlobal(function setPen(width: any, color: any) { runInAction(() => { GestureOverlay.Instance.Color = color; GestureOverlay.Instance.Width = width; }); });
+Scripting.addGlobal(function resetPen() { runInAction(() => { GestureOverlay.Instance.Color = "rgb(244, 67, 54)"; GestureOverlay.Instance.Width = 5; }); });
\ No newline at end of file
diff --git a/src/client/views/InkingControl.tsx b/src/client/views/InkingControl.tsx
index 243123352..be07a9024 100644
--- a/src/client/views/InkingControl.tsx
+++ b/src/client/views/InkingControl.tsx
@@ -10,12 +10,13 @@ import { Scripting } from "../util/Scripting";
 import { SelectionManager } from "../util/SelectionManager";
 import { undoBatch, UndoManager } from "../util/UndoManager";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
+import GestureOverlay from "./GestureOverlay";
 
 export class InkingControl {
     @observable static Instance: InkingControl;
     @computed private get _selectedTool(): InkTool { return FieldValue(NumCast(CurrentUserUtils.UserDocument.inkTool)) ?? InkTool.None; }
-    @computed private get _selectedColor(): string { return FieldValue(StrCast(CurrentUserUtils.UserDocument.inkColor)) ?? "rgb(244, 67, 54)"; }
-    @computed private get _selectedWidth(): string { return FieldValue(StrCast(CurrentUserUtils.UserDocument.inkWidth)) ?? "5"; }
+    @computed private get _selectedColor(): string { return GestureOverlay.Instance.Color ?? FieldValue(StrCast(CurrentUserUtils.UserDocument.inkColor)) ?? "rgb(244, 67, 54)"; }
+    @computed private get _selectedWidth(): string { return GestureOverlay.Instance.Width?.toString() ?? FieldValue(StrCast(CurrentUserUtils.UserDocument.inkWidth)) ?? "5"; }
     @observable public _open: boolean = false;
 
     constructor() {
diff --git a/src/client/views/Palette.scss b/src/client/views/Palette.scss
index 60004c81f..2626774cb 100644
--- a/src/client/views/Palette.scss
+++ b/src/client/views/Palette.scss
@@ -4,15 +4,17 @@
         height: 300px;
         touch-action: pan-x;
         overflow: scroll;
+        position: absolute;
 
         .palette-thumbContent {
             width: 100%;
             height: 100%;
+        }
 
-            .palette-button {
-                width: 100px;
-                height: 100px;
-            }
+        .palette-button {
+            width: 100px;
+            height: 100px;
+            background: blue;
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index 390b7e2c2..3649cccfe 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -1,22 +1,60 @@
 import * as React from "react";
 import "./Palette.scss";
 import { PointData } from "../../new_fields/InkField";
+import { Doc } from "../../new_fields/Doc";
+import { Docs } from "../documents/Documents";
+import { ScriptField, ComputedField } from "../../new_fields/ScriptField";
+import { List } from "../../new_fields/List";
+import { DocumentView } from "./nodes/DocumentView";
+import { emptyPath, returnFalse, emptyFunction, returnOne, returnEmptyString, returnTrue } from "../../Utils";
+import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
+import { Transform } from "../util/Transform";
+import { computed, action } from "mobx";
+import { FieldValue, Cast } from "../../new_fields/Types";
+import { observer } from "mobx-react";
+import { DocumentContentsView } from "./nodes/DocumentContentsView";
+import { CollectionStackingView } from "./collections/CollectionStackingView";
+import { CollectionView } from "./collections/CollectionView";
 
 export interface PaletteProps {
     x: number;
     y: number;
     thumb: number[];
+    thumbDoc: Doc;
 }
 
+@observer
 export default class Palette extends React.Component<PaletteProps> {
     render() {
         return (
             <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
                 <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
                     <div className="palette-thumbContent">
-                        <div className="palette-button" style={{ background: "green" }} onPointerDown={() => console.log("hi")}>1</div>
-                        <div className="palette-button" style={{ background: "red" }}>2</div>
-                        <div className="palette-button" style={{ background: "blue" }}>3</div>
+                        <DocumentView
+                            Document={this.props.thumbDoc}
+                            DataDoc={undefined}
+                            LibraryPath={emptyPath}
+                            addDocument={undefined}
+                            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>
                 </div>
             </div>
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index 3eb66ff72..24ea801a0 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -21,15 +21,26 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
      */
     @action
     protected onTouchStart = (e: React.TouchEvent): void => {
+        const actualPts: React.Touch[] = [];
         for (let i = 0; i < e.targetTouches.length; i++) {
             const pt: any = e.targetTouches.item(i);
+            actualPts.push(pt);
             // pen is also a touch, but with a radius of 0.5 (at least with the surface pens)
             // and this seems to be the only way of differentiating pen and touch on touch events
-            if (pt.radiusX > 0.5 && pt.radiusY > 0.5) {
+            if (pt.radiusX > 1 && pt.radiusY > 1) {
                 this.prevPoints.set(pt.identifier, pt);
             }
         }
 
+        const ptsToDelete: number[] = [];
+        this.prevPoints.forEach(pt => {
+            if (!actualPts.includes(pt)) {
+                ptsToDelete.push(pt.identifier);
+            }
+        });
+
+        ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
+
         if (this.prevPoints.size) {
             switch (this.prevPoints.size) {
                 case 1:
@@ -57,13 +68,12 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     */
     @action
     protected onTouch = (e: TouchEvent): void => {
-        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
 
         // if we're not actually moving a lot, don't consider it as dragging yet
         if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
         this._touchDrag = true;
         if (this.holdTimer) {
-            console.log("clear");
             clearTimeout(this.holdTimer);
             this.holdTimer = undefined;
         }
@@ -99,7 +109,6 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
             }
         }
         if (this.holdTimer) {
-            console.log("clear");
             clearTimeout(this.holdTimer);
             this.holdTimer = undefined;
         }
@@ -152,7 +161,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     }
 
     handleHandDown = (e: React.TouchEvent) => {
-        e.stopPropagation();
-        e.preventDefault();
+        // e.stopPropagation();
+        // e.preventDefault();
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index d7cccc036..84945c6e6 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -9,7 +9,7 @@ import { Id } from "../../../../new_fields/FieldSymbols";
 import { InkTool, InkField, InkData } from "../../../../new_fields/InkField";
 import { createSchema, makeInterface } from "../../../../new_fields/Schema";
 import { ScriptField } from "../../../../new_fields/ScriptField";
-import { BoolCast, Cast, DateCast, NumCast, StrCast } from "../../../../new_fields/Types";
+import { BoolCast, Cast, DateCast, NumCast, StrCast, FieldValue } from "../../../../new_fields/Types";
 import { CurrentUserUtils } from "../../../../server/authentication/models/current_user_utils";
 import { aggregateBounds, emptyFunction, intersectRect, returnOne, Utils } from "../../../../Utils";
 import { DocServer } from "../../../DocServer";
@@ -468,7 +468,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     handle1PointerMove = (e: TouchEvent) => {
         // panning a workspace
         if (!e.cancelBubble) {
-            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
             const pt = myTouches[0];
             if (pt) {
                 if (InkingControl.Instance.selectedTool === InkTool.None) {
@@ -490,7 +490,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     handle2PointersMove = (e: TouchEvent) => {
         // pinch zooming
         if (!e.cancelBubble) {
-            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
             const pt1 = myTouches[0];
             const pt2 = myTouches[1];
 
@@ -849,51 +849,47 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     private thumbIdentifier?: number;
-    private hand?: React.Touch[];
 
-    @action
-    handleHandDown = (e: React.TouchEvent) => {
-        const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
-        this.hand = fingers;
-        const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
-        this.thumbIdentifier = thumb?.identifier;
-        const others = fingers.filter(f => f !== thumb);
-        const minX = Math.min(...others.map(f => f.clientX));
-        const minY = Math.min(...others.map(f => f.clientY));
-        const t = this.getTransform().transformPoint(minX, minY);
-        const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
-        this._palette = <Palette x={t[0]} y={t[1]} thumb={th} />;
-
-        document.removeEventListener("touchmove", this.onTouch);
-        document.removeEventListener("touchmove", this.handleHandMove);
-        document.addEventListener("touchmove", this.handleHandMove);
-        document.removeEventListener("touchend", this.handleHandUp);
-        document.addEventListener("touchend", this.handleHandUp);
-    }
-
-    @action
-    handleHandMove = (e: TouchEvent) => {
-        for (let i = 0; i < e.changedTouches.length; i++) {
-            const pt = e.changedTouches.item(i);
-            if (pt?.identifier === this.thumbIdentifier) {
-            }
-        }
-    }
-
-    @action
-    handleHandUp = (e: TouchEvent) => {
-        console.log(e.changedTouches.length);
-        this.onTouchEnd(e);
-        if (this.prevPoints.size < 3) {
-            if (this.hand) {
-                for (const h of this.hand) {
-                    this.prevPoints.has(h.identifier) && this.prevPoints.delete(h.identifier);
-                }
-            }
-            this._palette = undefined;
-            document.removeEventListener("touchend", this.handleHandUp);
-        }
-    }
+    // @action
+    // handleHandDown = (e: React.TouchEvent) => {
+    //     const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+    //     const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+    //     this.thumbIdentifier = thumb?.identifier;
+    //     const others = fingers.filter(f => f !== thumb);
+    //     const minX = Math.min(...others.map(f => f.clientX));
+    //     const minY = Math.min(...others.map(f => f.clientY));
+    //     const t = this.getTransform().transformPoint(minX, minY);
+    //     const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
+
+    //     const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
+    //     if (thumbDoc) {
+    //         this._palette = <Palette x={t[0]} y={t[1]} thumb={th} thumbDoc={thumbDoc} />;
+    //     }
+
+    //     document.removeEventListener("touchmove", this.onTouch);
+    //     document.removeEventListener("touchmove", this.handleHandMove);
+    //     document.addEventListener("touchmove", this.handleHandMove);
+    //     document.removeEventListener("touchend", this.handleHandUp);
+    //     document.addEventListener("touchend", this.handleHandUp);
+    // }
+
+    // @action
+    // handleHandMove = (e: TouchEvent) => {
+    //     for (let i = 0; i < e.changedTouches.length; i++) {
+    //         const pt = e.changedTouches.item(i);
+    //         if (pt?.identifier === this.thumbIdentifier) {
+    //         }
+    //     }
+    // }
+
+    // @action
+    // handleHandUp = (e: TouchEvent) => {
+    //     this.onTouchEnd(e);
+    //     if (this.prevPoints.size < 3) {
+    //         this._palette = undefined;
+    //         document.removeEventListener("touchend", this.handleHandUp);
+    //     }
+    // }
 
     onContextMenu = (e: React.MouseEvent) => {
         const layoutItems: ContextMenuProps[] = [];
@@ -958,12 +954,12 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         ];
     }
 
-    @observable private _palette?: JSX.Element;
+    // @observable private _palette?: JSX.Element;
 
     children = () => {
         const eles: JSX.Element[] = [];
         this.extensionDoc && (eles.push(...this.childViews()));
-        this._palette && (eles.push(this._palette));
+        // this._palette && (eles.push(this._palette));
         // this.currentStroke && (eles.push(this.currentStroke));
         eles.push(<CollectionFreeFormRemoteCursors {...this.props} key="remoteCursors" />);
         return eles;
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 415d0e2ef..bdec94eb3 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -59,6 +59,8 @@ export interface DocumentViewProps {
     LibraryPath: Doc[];
     fitToBox?: boolean;
     onClick?: ScriptField;
+    onPointerDown?: ScriptField;
+    onPointerUp?: ScriptField;
     dragDivName?: string;
     addDocument?: (doc: Doc) => boolean;
     removeDocument?: (doc: Doc) => boolean;
@@ -105,6 +107,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     @computed get nativeWidth() { return this.layoutDoc.nativeWidth || 0; }
     @computed get nativeHeight() { return this.layoutDoc.nativeHeight || 0; }
     @computed get onClickHandler() { return this.props.onClick ? this.props.onClick : this.Document.onClick; }
+    @computed get onPointerDownHandler() { return this.props.onPointerDown ? this.props.onPointerDown : this.Document.onPointerDown; }
+    @computed get onPointerUpHandler() { return this.props.onPointerUp ? this.props.onPointerUp : this.Document.onPointerUp; }
 
     @action
     componentDidMount() {
@@ -180,7 +184,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    onClick = async (e: React.MouseEvent) => {
+    onClick = async (e: React.MouseEvent | React.PointerEvent) => {
         if (!e.nativeEvent.cancelBubble && !this.Document.ignoreClick && CurrentUserUtils.MainDocId !== this.props.Document[Id] &&
             (Math.abs(e.clientX - this._downX) < Utils.DRAG_THRESHOLD && Math.abs(e.clientY - this._downY) < Utils.DRAG_THRESHOLD)) {
             e.stopPropagation();
@@ -240,8 +244,9 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     handle1PointerDown = (e: React.TouchEvent) => {
+        if (this.Document.onPointerDown) return;
         if (!e.nativeEvent.cancelBubble) {
-            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints)[0];
+            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
             this._downX = touch.clientX;
             this._downY = touch.clientY;
             this._hitTemplateDrag = false;
@@ -265,7 +270,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
             document.removeEventListener("touchmove", this.onTouch);
         }
         else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.Document.onDragStart || this.Document.onClick) && !this.Document.lockedPosition && !this.Document.inOverlay) {
-            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints)[0];
+            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
             if (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3) {
                 if (!e.altKey && (!this.topMost || this.Document.onDragStart || this.Document.onClick)) {
                     document.removeEventListener("touchmove", this.onTouch);
@@ -293,7 +298,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
 
     @action
     handle2PointersMove = (e: TouchEvent) => {
-        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints);
+        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
         const pt1 = myTouches[0];
         const pt2 = myTouches[1];
         const oldPoint1 = this.prevPoints.get(pt1.identifier);
@@ -363,6 +368,12 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onPointerDown = (e: React.PointerEvent): void => {
+        if (this.onPointerDownHandler && this.onPointerDownHandler.script) {
+            this.onPointerDownHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            document.addEventListener("pointerup", this.onPointerUp);
+            return;
+        }
         // console.log(e.button)
         // console.log(e.nativeEvent)
         // continue if the event hasn't been canceled AND we are using a moues or this is has an onClick or onDragStart function (meaning it is a button document)
@@ -412,6 +423,11 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     onPointerUp = (e: PointerEvent): void => {
+        if (this.onPointerUpHandler && this.onPointerUpHandler.script && !InteractionUtils.IsType(e, InteractionUtils.PENTYPE)) {
+            this.onPointerUpHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log);
+            document.removeEventListener("pointerup", this.onPointerUp);
+            return;
+        }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
         this._doubleTap = (Date.now() - this._lastTap < 300 && e.button === 0 && Math.abs(e.clientX - this._downX) < 2 && Math.abs(e.clientY - this._downY) < 2);
diff --git a/src/new_fields/documentSchemas.ts b/src/new_fields/documentSchemas.ts
index 21e69fbed..1cba3cba9 100644
--- a/src/new_fields/documentSchemas.ts
+++ b/src/new_fields/documentSchemas.ts
@@ -20,6 +20,8 @@ export const documentSchema = createSchema({
     dropAction: "string",       // override specifying what should happen when this document is dropped (can be "alias" or "copy")
     removeDropProperties: listSpec("string"), // properties that should be removed from the alias/copy/etc of this document when it is dropped
     onClick: ScriptField,       // script to run when document is clicked (can be overriden by an onClick prop)
+    onPointerDown: ScriptField,       // script to run when document is clicked (can be overriden by an onClick prop)
+    onPointerUp: ScriptField,       // script to run when document is clicked (can be overriden by an onClick prop)
     onDragStart: ScriptField,   // script to run when document is dragged (without being selected).  the script should return the Doc to be dropped.
     dragFactory: Doc,           // the document that serves as the "template" for the onDragStart script.  ie, to drag out copies of the dragFactory document.
     ignoreAspect: "boolean",    // whether aspect ratio should be ignored when laying out or manipulating the document
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 71dd34e68..2ade6f102 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -110,6 +110,29 @@ export class CurrentUserUtils {
         }));
     }
 
+    static setupThumbButtons(doc: Doc) {
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
+            { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
+            { title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+        ];
+        return docProtoData.map(data => Docs.Create.FontIconDocument({
+            nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
+            onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
+            onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined, onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
+            ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, pointerHack: true,
+            backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
+        }));
+    }
+
+    static setupThumbDoc(userDoc: Doc) {
+        if (!userDoc.thumbDoc) {
+            return Docs.Create.MasonryDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
+                width: 300, columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
+            });
+        }
+        return userDoc.thumbDoc;
+    }
+
     static setupMobileDoc(userDoc: Doc) {
         return userDoc.activeMoble ?? Docs.Create.MasonryDocument(CurrentUserUtils.setupMobileButtons(userDoc), {
             columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
-- 
cgit v1.2.3-70-g09d2


From 19be14b5807b117f477b57b9ecc7b96247bf4fef Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Wed, 15 Jan 2020 13:30:08 -0500
Subject: the quick brown fox jumped over the lazy dog

---
 src/client/util/InteractionUtils.ts                | 13 ++--
 src/client/views/CollectionLinearView.tsx          | 14 +++-
 src/client/views/GestureOverlay.tsx                | 50 ++++++-------
 src/client/views/Palette.tsx                       |  4 ++
 src/client/views/Touchable.tsx                     | 35 ++++-----
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 41 +++++------
 src/client/views/nodes/DocumentView.tsx            | 82 +++++++++++-----------
 .../authentication/models/current_user_utils.ts    |  2 +-
 8 files changed, 126 insertions(+), 115 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
index 63ee2fb92..da42bdc93 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.ts
@@ -11,7 +11,10 @@ export namespace InteractionUtils {
     export class MultiTouchEvent<T extends React.TouchEvent | TouchEvent> {
         constructor(
             readonly fingers: number,
-            readonly points: T extends React.TouchEvent ? React.TouchList : TouchList,
+            // readonly points: T extends React.TouchEvent ? React.TouchList : TouchList,
+            readonly targetTouches: T extends React.TouchEvent ? React.Touch[] : Touch[],
+            readonly touches: T extends React.TouchEvent ? React.Touch[] : Touch[],
+            readonly changedTouches: T extends React.TouchEvent ? React.Touch[] : Touch[],
             readonly touchEvent: T extends React.TouchEvent ? React.TouchEvent : TouchEvent
         ) { }
     }
@@ -43,13 +46,11 @@ export namespace InteractionUtils {
         };
     }
 
-    export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
+    export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent<React.TouchEvent | TouchEvent>, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
         const myTouches = new Array<React.Touch>();
-        for (let i = 0; i < e.touches.length; i++) {
-            const pt: any = e.touches.item(i);
+        for (const pt of mte.touches) {
             if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
-                for (let j = 0; j < e.targetTouches.length; j++) {
-                    const tPt = e.targetTouches.item(j);
+                for (const tPt of mte.targetTouches) {
                     if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
                         if (pt && prevPoints.has(pt.identifier)) {
                             myTouches.push(pt);
diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx
index 38f2decdd..2262a3c0c 100644
--- a/src/client/views/CollectionLinearView.tsx
+++ b/src/client/views/CollectionLinearView.tsx
@@ -1,4 +1,4 @@
-import { action, IReactionDisposer, observable, reaction } from 'mobx';
+import { action, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, HeightSym, WidthSym } from '../../new_fields/Doc';
@@ -21,12 +21,15 @@ const LinearDocument = makeInterface(documentSchema);
 @observer
 export class CollectionLinearView extends CollectionSubView(LinearDocument) {
     @observable public addMenuToggle = React.createRef<HTMLInputElement>();
+    @observable private _selectedIndex = -1;
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _widthDisposer?: IReactionDisposer;
+    private _selectedDisposer?: IReactionDisposer;
 
     componentWillUnmount() {
         this._dropDisposer && this._dropDisposer();
         this._widthDisposer && this._widthDisposer();
+        this._selectedDisposer && this._selectedDisposer();
     }
 
     componentDidMount() {
@@ -35,6 +38,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
             () => this.props.Document.width = 5 + (this.props.Document.isExpanded ? this.childDocs.length * (this.props.Document[HeightSym]()) : 10),
             { fireImmediately: true }
         );
+
+        this._selectedDisposer = reaction(
+            () => NumCast(this.props.Document.selectedIndex),
+            (i) => runInAction(() => this._selectedIndex = i),
+            { fireImmediately: true }
+        );
     }
     protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view
         this._dropDisposer && this._dropDisposer();
@@ -61,11 +70,12 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 <label htmlFor={`${guid}`} style={{ marginTop: "auto", marginBottom: "auto", background: StrCast(this.props.Document.backgroundColor, "black") === StrCast(this.props.Document.color, "white") ? "black" : StrCast(this.props.Document.backgroundColor, "black") }} title="Close Menu"><p>+</p></label>
 
                 <div className="collectionLinearView-content" style={{ height: this.dimension(), width: NumCast(this.props.Document.width, 25) }}>
-                    {this.childLayoutPairs.filter(pair => this.isCurrent(pair.layout)).map(pair => {
+                    {this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map((pair, ind) => {
                         const nested = pair.layout.viewType === CollectionViewType.Linear;
                         const dref = React.createRef<HTMLDivElement>();
                         const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension());
                         const deltaSize = nativeWidth * .15 / 2;
+                        const isSelected = this._selectedIndex === ind;
                         return <div className={`collectionLinearView-docBtn` + (pair.layout.onClick || pair.layout.onDragStart ? "-scalable" : "")} key={pair.layout[Id]} ref={dref}
                             style={{
                                 width: nested ? pair.layout[WidthSym]() : this.dimension() - deltaSize,
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index a5fba362c..e4c14f6b8 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -40,28 +40,28 @@ export default class GestureOverlay extends Touchable {
     }
 
     getNewTouches(e: React.TouchEvent | TouchEvent) {
-        const ntt: (React.Touch | Touch)[] = [];
-        const nct: (React.Touch | Touch)[] = [];
-        const nt: (React.Touch | Touch)[] = [];
+        const ntt: (React.Touch | Touch)[] = Array.from(e.targetTouches);
+        const nct: (React.Touch | Touch)[] = Array.from(e.changedTouches);
+        const nt: (React.Touch | Touch)[] = Array.from(e.touches);
         this._hands.forEach((hand) => {
             for (let i = 0; i < e.targetTouches.length; i++) {
                 const pt = e.targetTouches.item(i);
-                if (pt && !hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    ntt.push(pt);
+                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
+                    ntt.splice(ntt.indexOf(pt));
                 }
             }
 
             for (let i = 0; i < e.changedTouches.length; i++) {
                 const pt = e.changedTouches.item(i);
-                if (pt && !hand.some((finger: React.Touch) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    nct.push(pt);
+                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
+                    nct.splice(nct.indexOf(pt));
                 }
             }
 
-            for (let i = 0; i < e.changedTouches.length; i++) {
+            for (let i = 0; i < e.touches.length; i++) {
                 const pt = e.touches.item(i);
-                if (pt && !hand.some((finger: React.Touch) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    nt.push(pt);
+                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
+                    nt.splice(ntt.indexOf(pt));
                 }
             }
         });
@@ -93,7 +93,7 @@ export default class GestureOverlay extends Touchable {
         ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
 
         if (this.prevPoints.size && this.prevPoints.size < 5) {
-            const nts: any = this.getNewTouches(te);
+            const nts = this.getNewTouches(te);
             const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
             target?.dispatchEvent(
                 new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchStart",
@@ -101,12 +101,10 @@ export default class GestureOverlay extends Touchable {
                         bubbles: true,
                         detail: {
                             fingers: this.prevPoints.size,
-                            points: te.targetTouches,
-                            touchEvent: new React.TouchEvent("start", {
-                                targetTouches: nts.ntt,
-                                touches: nts.nt,
-                                changedTouches: nts.nct
-                            });
+                            targetTouches: nts.ntt,
+                            touches: nts.nt,
+                            changedTouches: nts.nct,
+                            touchEvent: te
                         }
                     }
                 )
@@ -131,25 +129,26 @@ export default class GestureOverlay extends Touchable {
                     bubbles: true,
                     detail: {
                         fingers: this.prevPoints.size,
-                        points: e.touches,
-                        touchEvent: new TouchEvent("move", {
-                            targetTouches: nts.ntt,
-                            changedTouches: nts.nct,
-                            touches: nts.nt,
-                        })
+                        targetTouches: nts.ntt,
+                        touches: nts.nt,
+                        changedTouches: nts.nct,
+                        touchEvent: e
                     }
                 })
         );
     }
 
     onReactTouchEnd = (e: TouchEvent) => {
+        const nts: any = this.getNewTouches(e);
         document.dispatchEvent(
             new CustomEvent<InteractionUtils.MultiTouchEvent<TouchEvent>>("dashOnTouchEnd",
                 {
                     bubbles: true,
                     detail: {
                         fingers: this.prevPoints.size,
-                        points: e.touches,
+                        targetTouches: nts.ntt,
+                        touches: nts.nt,
+                        changedTouches: nts.nct,
                         touchEvent: e
                     }
                 })
@@ -171,7 +170,7 @@ export default class GestureOverlay extends Touchable {
     }
 
     handleHandDown = (e: React.TouchEvent) => {
-        const fingers = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+        const fingers = Array.from(e.touches);
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
         this.thumbIdentifier = thumb?.identifier;
         fingers.forEach((f) => this.prevPoints.delete(f.identifier));
@@ -201,6 +200,7 @@ export default class GestureOverlay extends Touchable {
         for (let i = 0; i < e.changedTouches.length; i++) {
             const pt = e.changedTouches.item(i);
             if (pt?.identifier === this.thumbIdentifier) {
+                console.log("thumby movey")
             }
         }
     }
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index 3649cccfe..aca1811a4 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -15,6 +15,9 @@ import { observer } from "mobx-react";
 import { DocumentContentsView } from "./nodes/DocumentContentsView";
 import { CollectionStackingView } from "./collections/CollectionStackingView";
 import { CollectionView } from "./collections/CollectionView";
+import { CollectionSubView, SubCollectionViewProps } from "./collections/CollectionSubView";
+import { makeInterface } from "../../new_fields/Schema";
+import { documentSchema } from "../../new_fields/documentSchemas";
 
 export interface PaletteProps {
     x: number;
@@ -25,6 +28,7 @@ export interface PaletteProps {
 
 @observer
 export default class Palette extends React.Component<PaletteProps> {
+
     render() {
         return (
             <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx
index a71015b05..7800c4019 100644
--- a/src/client/views/Touchable.tsx
+++ b/src/client/views/Touchable.tsx
@@ -29,15 +29,13 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         const actualPts: React.Touch[] = [];
         const te = me.touchEvent;
         // loop through all touches on screen
-        for (let i = 0; i < te.touches.length; i++) {
-            const pt: any = te.touches.item(i);
+        for (const pt of me.touches) {
             actualPts.push(pt);
             if (this.prevPoints.has(pt.identifier)) {
                 this.prevPoints.set(pt.identifier, pt);
             }
             // only add the ones that are targeted on "this" element, but with the identifier that the screen touch gives
-            for (let j = 0; j < te.changedTouches.length; j++) {
-                const tPt = te.changedTouches.item(j);
+            for (const tPt of me.changedTouches) {
                 if (pt.clientX === tPt.clientX && pt.clientY === tPt.clientY) {
                     // pen is also a touch, but with a radius of 0.5 (at least with the surface pens)
                     // and this seems to be the only way of differentiating pen and touch on touch events
@@ -58,22 +56,21 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         // console.log(ptsToDelete.length);
         ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
 
-        // console.log(this.prevPoints.size);
         if (this.prevPoints.size) {
             switch (this.prevPoints.size) {
                 case 1:
-                    this.handle1PointerDown(te);
+                    this.handle1PointerDown(te, me);
                     te.persist();
                     // if (this.holdTimer) {
                     //     clearTimeout(this.holdTimer)
                     //     this.holdTimer = undefined;
                     // }
-                    this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(te), HOLD_DURATION);
+                    this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(te, me), HOLD_DURATION);
                     // e.stopPropagation();
                     // console.log(this.holdTimer);
                     break;
                 case 2:
-                    this.handle2PointersDown(te);
+                    this.handle2PointersDown(te, me);
                     // e.stopPropagation();
                     break;
                 // case 5:
@@ -89,7 +86,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
     @action
     protected onTouch = (e: Event, me: InteractionUtils.MultiTouchEvent<TouchEvent>): void => {
         const te = me.touchEvent;
-        const myTouches = InteractionUtils.GetMyTargetTouches(te, this.prevPoints, true);
+        const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
 
         // if we're not actually moving a lot, don't consider it as dragging yet
         if (!InteractionUtils.IsDragging(this.prevPoints, myTouches, 5) && !this._touchDrag) return;
@@ -102,15 +99,14 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         // console.log(myTouches.length);
         switch (myTouches.length) {
             case 1:
-                this.handle1PointerMove(te);
+                this.handle1PointerMove(te, me);
                 break;
             case 2:
-                this.handle2PointersMove(te);
+                this.handle2PointersMove(te, me);
                 break;
         }
 
-        for (let i = 0; i < te.touches.length; i++) {
-            const pt = te.touches.item(i);
+        for (const pt of me.touches) {
             if (pt) {
                 if (this.prevPoints.has(pt.identifier)) {
                     this.prevPoints.set(pt.identifier, pt);
@@ -124,8 +120,7 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         // console.log(InteractionUtils.GetMyTargetTouches(e, this.prevPoints).length + " up");
         // remove all the touches associated with the event
         const te = me.touchEvent;
-        for (let i = 0; i < te.changedTouches.length; i++) {
-            const pt = te.changedTouches.item(i);
+        for (const pt of me.changedTouches) {
             if (pt) {
                 if (this.prevPoints.has(pt.identifier)) {
                     this.prevPoints.delete(pt.identifier);
@@ -155,31 +150,31 @@ export abstract class Touchable<T = {}> extends React.Component<T> {
         this.removeEndListeners();
     }
 
-    handle1PointerMove = (e: TouchEvent): any => {
+    handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>): any => {
         e.stopPropagation();
         e.preventDefault();
     }
 
-    handle2PointersMove = (e: TouchEvent): any => {
+    handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>): any => {
         e.stopPropagation();
         e.preventDefault();
     }
 
-    handle1PointerDown = (e: React.TouchEvent): any => {
+    handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         this.removeMoveListeners();
         this.addMoveListeners();
         this.removeEndListeners();
         this.addEndListeners();
     }
 
-    handle2PointersDown = (e: React.TouchEvent): any => {
+    handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         this.removeMoveListeners();
         this.addMoveListeners();
         this.removeEndListeners();
         this.addEndListeners();
     }
 
-    handle1PointerHoldStart = (e: React.TouchEvent): any => {
+    handle1PointerHoldStart = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>): any => {
         e.stopPropagation();
         e.preventDefault();
         this.removeMoveListeners();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 3894e9d63..aaa585b55 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -44,7 +44,7 @@ import { TraceMobx } from "../../../../new_fields/util";
 import { GestureUtils } from "../../../../pen-gestures/GestureUtils";
 import { LinkManager } from "../../../util/LinkManager";
 import { CognitiveServices } from "../../../cognitive_services/CognitiveServices";
-import Palette from "../../Palette";
+import CollectionPaletteVIew from "../../Palette";
 
 library.add(faEye as any, faTable, faPaintBrush, faExpandArrowsAlt, faCompressArrowsAlt, faCompass, faUpload, faBraille, faChalkboard, faFileUpload);
 
@@ -276,7 +276,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
 
     @action
     onPointerDown = (e: React.PointerEvent): void => {
-        if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
+        if (e.nativeEvent.cancelBubble || InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) || InteractionUtils.IsType(e, InteractionUtils.PENTYPE) || (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen)) {
             return;
         }
         this._hitCluster = this.props.Document.useClusters ? this.pickCluster(this.getTransform().transformPoint(e.clientX, e.clientY)) !== -1 : false;
@@ -325,10 +325,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     @action
-    handle1PointerDown = (e: React.TouchEvent) => {
+    handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         if (!e.nativeEvent.cancelBubble) {
             // const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
-            const pt = e.changedTouches.item(0);
+            const pt = me.changedTouches[0];
             if (pt) {
                 this._hitCluster = this.props.Document.useCluster ? this.pickCluster(this.getTransform().transformPoint(pt.clientX, pt.clientY)) !== -1 : false;
                 if (!e.shiftKey && !e.altKey && !e.ctrlKey && this.props.active(true)) {
@@ -466,10 +466,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         }
     }
 
-    handle1PointerMove = (e: TouchEvent) => {
+    handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
         // panning a workspace
         if (!e.cancelBubble) {
-            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+            const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
             const pt = myTouches[0];
             if (pt) {
                 if (InkingControl.Instance.selectedTool === InkTool.None) {
@@ -488,10 +488,10 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
         }
     }
 
-    handle2PointersMove = (e: TouchEvent) => {
+    handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
         // pinch zooming
         if (!e.cancelBubble) {
-            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+            const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
             const pt1 = myTouches[0];
             const pt2 = myTouches[1];
 
@@ -534,24 +534,25 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     }
 
     @action
-    handle2PointersDown = (e: React.TouchEvent) => {
+    handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         if (!e.nativeEvent.cancelBubble && this.props.active(true)) {
             // const pt1: React.Touch | null = e.targetTouches.item(0);
             // const pt2: React.Touch | null = e.targetTouches.item(1);
             // // if (!pt1 || !pt2) return;
-            const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+            const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
             const pt1 = myTouches[0];
             const pt2 = myTouches[1];
-
-            const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2;
-            const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2;
-            this._lastX = centerX;
-            this._lastY = centerY;
-            this.removeMoveListeners();
-            this.addMoveListeners();
-            this.removeEndListeners();
-            this.addEndListeners();
-            e.stopPropagation();
+            if (pt1 && pt2) {
+                const centerX = Math.min(pt1.clientX, pt2.clientX) + Math.abs(pt2.clientX - pt1.clientX) / 2;
+                const centerY = Math.min(pt1.clientY, pt2.clientY) + Math.abs(pt2.clientY - pt1.clientY) / 2;
+                this._lastX = centerX;
+                this._lastY = centerY;
+                this.removeMoveListeners();
+                this.addMoveListeners();
+                this.removeEndListeners();
+                this.addEndListeners();
+                e.stopPropagation();
+            }
         }
     }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index b33bebe7d..0b6a284d6 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -134,46 +134,46 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     //     document.addEventListener("touchend", this.handle1PointerHoldEnd);
     // }
 
-    handle1PointerHoldMove = (e: TouchEvent): void => {
-        const pt = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
-        if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
-            this.handleRelease();
-        }
-        document.removeEventListener("touchmove", this.handle1PointerHoldMove);
-        document.addEventListener("touchmove", this.handle1PointerHoldMove);
-        document.removeEventListener("touchend", this.handle1PointerHoldEnd);
-        document.addEventListener("touchend", this.handle1PointerHoldEnd);
-    }
+    // handle1PointerHoldMove = (e: TouchEvent): void => {
+    //     const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
+    //     if (Math.abs(pt.pageX - this._firstX) > 150 || Math.abs(pt.pageY - this._firstY) > 150) {
+    //         this.handleRelease();
+    //     }
+    //     document.removeEventListener("touchmove", this.handle1PointerHoldMove);
+    //     document.addEventListener("touchmove", this.handle1PointerHoldMove);
+    //     document.removeEventListener("touchend", this.handle1PointerHoldEnd);
+    //     document.addEventListener("touchend", this.handle1PointerHoldEnd);
+    // }
 
-    handleRelease() {
-        RadialMenu.Instance.closeMenu();
-        document.removeEventListener("touchmove", this.handle1PointerHoldMove);
-        document.removeEventListener("touchend", this.handle1PointerHoldEnd);
-    }
+    // handleRelease() {
+    //     RadialMenu.Instance.closeMenu();
+    //     document.removeEventListener("touchmove", this.handle1PointerHoldMove);
+    //     document.removeEventListener("touchend", this.handle1PointerHoldEnd);
+    // }
 
-    handle1PointerHoldEnd = (e: TouchEvent): void => {
-        RadialMenu.Instance.closeMenu();
-        document.removeEventListener("touchmove", this.handle1PointerHoldMove);
-        document.removeEventListener("touchend", this.handle1PointerHoldEnd);
-    }
+    // handle1PointerHoldEnd = (e: TouchEvent): void => {
+    //     RadialMenu.Instance.closeMenu();
+    //     document.removeEventListener("touchmove", this.handle1PointerHoldMove);
+    //     document.removeEventListener("touchend", this.handle1PointerHoldEnd);
+    // }
 
-    @action
-    onRadialMenu = (e: React.TouchEvent): void => {
-        const pt = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
+    // @action
+    // onRadialMenu = (e: React.TouchEvent): void => {
+    //     const pt = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
 
-        RadialMenu.Instance.openMenu();
+    //     RadialMenu.Instance.openMenu();
 
-        RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 });
-        RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
+    //     RadialMenu.Instance.addItem({ description: "Open Fields", event: () => this.props.addDocTab(Docs.Create.KVPDocument(this.props.Document, { width: 300, height: 300 }), undefined, "onRight"), icon: "layer-group", selected: -1 });
+    //     RadialMenu.Instance.addItem({ description: "Delete this document", event: () => this.props.ContainingCollectionView?.removeDocument(this.props.Document), icon: "trash", selected: -1 });
+    //     RadialMenu.Instance.addItem({ description: "Open in a new tab", event: () => this.props.addDocTab(this.props.Document, undefined, "onRight"), icon: "folder", selected: -1 });
+    //     RadialMenu.Instance.addItem({ description: "Pin to Presentation", event: () => this.props.pinToPres(this.props.Document), icon: "map-pin", selected: -1 });
 
-        RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15);
-        if (!SelectionManager.IsSelected(this, true)) {
-            SelectionManager.SelectDoc(this, false);
-        }
-        e.stopPropagation();
-    }
+    //     RadialMenu.Instance.displayMenu(pt.pageX - 15, pt.pageY - 15);
+    //     if (!SelectionManager.IsSelected(this, true)) {
+    //         SelectionManager.SelectDoc(this, false);
+    //     }
+    //     e.stopPropagation();
+    // }
 
     @action
     componentDidMount() {
@@ -313,10 +313,10 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    handle1PointerDown = (e: React.TouchEvent) => {
+    handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         if (this.Document.onPointerDown) return;
         if (!e.nativeEvent.cancelBubble) {
-            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
+            const touch = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
             this._downX = touch.clientX;
             this._downY = touch.clientY;
             this._hitTemplateDrag = false;
@@ -334,13 +334,13 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    handle1PointerMove = (e: TouchEvent) => {
+    handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
         if ((e as any).formattedHandled) { e.stopPropagation; return; }
         if (e.cancelBubble && this.active) {
             this.removeMoveListeners();
         }
         else if (!e.cancelBubble && (SelectionManager.IsSelected(this, true) || this.props.parentActive(true) || this.Document.onDragStart || this.Document.onClick) && !this.Document.lockedPosition && !this.Document.inOverlay) {
-            const touch = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true)[0];
+            const touch = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true)[0];
             if (Math.abs(this._downX - touch.clientX) > 3 || Math.abs(this._downY - touch.clientY) > 3) {
                 if (!e.altKey && (!this.topMost || this.Document.onDragStart || this.Document.onClick)) {
                     this.cleanUpInteractions();
@@ -353,7 +353,7 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
         }
     }
 
-    handle2PointersDown = (e: React.TouchEvent) => {
+    handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         if (!e.nativeEvent.cancelBubble && !this.isSelected()) {
             e.stopPropagation();
             e.preventDefault();
@@ -366,8 +366,8 @@ export class DocumentView extends DocComponent<DocumentViewProps, Document>(Docu
     }
 
     @action
-    handle2PointersMove = (e: TouchEvent) => {
-        const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+    handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent<TouchEvent>) => {
+        const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
         const pt1 = myTouches[0];
         const pt2 = myTouches[1];
         const oldPoint1 = this.prevPoints.get(pt1.identifier);
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 2ade6f102..a850b0f9f 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -126,7 +126,7 @@ export class CurrentUserUtils {
 
     static setupThumbDoc(userDoc: Doc) {
         if (!userDoc.thumbDoc) {
-            return Docs.Create.MasonryDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
+            return Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
                 width: 300, columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
             });
         }
-- 
cgit v1.2.3-70-g09d2


From 4bf88786cc8a7e617bca4eb57f7639d69be06dcd Mon Sep 17 00:00:00 2001
From: andrewdkim <adkim414@gmail.com>
Date: Wed, 15 Jan 2020 17:42:41 -0500
Subject: wow this almost drove me crazy but swipey swipes on five fingers

---
 package-lock.json                                  |  6 +--
 src/client/views/CollectionLinearView.tsx          |  6 ++-
 src/client/views/GestureOverlay.tsx                | 45 ++++++++++++++++++----
 src/client/views/Palette.scss                      | 19 ++++-----
 src/client/views/Palette.tsx                       | 20 ++++++++--
 .../authentication/models/current_user_utils.ts    |  4 +-
 6 files changed, 75 insertions(+), 25 deletions(-)

(limited to 'src/server')

diff --git a/package-lock.json b/package-lock.json
index da2648d9a..4a5de1c66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2645,7 +2645,7 @@
         },
         "buffer": {
             "version": "4.9.1",
-            "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
+            "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
             "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
             "dev": true,
             "requires": {
@@ -15527,7 +15527,7 @@
         },
         "string_decoder": {
             "version": "1.1.1",
-            "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+            "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
             "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
             "requires": {
                 "safe-buffer": "~5.1.0"
@@ -17768,7 +17768,7 @@
         },
         "wrap-ansi": {
             "version": "2.1.0",
-            "resolved": "http://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
+            "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",
             "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=",
             "requires": {
                 "string-width": "^1.0.1",
diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx
index 2262a3c0c..0a3096833 100644
--- a/src/client/views/CollectionLinearView.tsx
+++ b/src/client/views/CollectionLinearView.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, HeightSym, WidthSym } from '../../new_fields/Doc';
 import { makeInterface } from '../../new_fields/Schema';
-import { BoolCast, NumCast, StrCast } from '../../new_fields/Types';
+import { BoolCast, NumCast, StrCast, Cast } from '../../new_fields/Types';
 import { emptyFunction, returnEmptyString, returnOne, returnTrue, Utils } from '../../Utils';
 import { DragManager } from '../util/DragManager';
 import { Transform } from '../util/Transform';
@@ -13,6 +13,7 @@ import { CollectionSubView } from './collections/CollectionSubView';
 import { DocumentView } from './nodes/DocumentView';
 import { documentSchema } from '../../new_fields/documentSchemas';
 import { Id } from '../../new_fields/FieldSymbols';
+import { ScriptField } from '../../new_fields/ScriptField';
 
 
 type LinearDocument = makeInterface<[typeof documentSchema,]>;
@@ -76,6 +77,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                         const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension());
                         const deltaSize = nativeWidth * .15 / 2;
                         const isSelected = this._selectedIndex === ind;
+                        if (isSelected) {
+                            Cast(pair.layout.proto?.onPointerDown, ScriptField)?.script.run({ this: pair.layout.proto }, console.log);
+                        }
                         return <div className={`collectionLinearView-docBtn` + (pair.layout.onClick || pair.layout.onDragStart ? "-scalable" : "")} key={pair.layout[Id]} ref={dref}
                             style={{
                                 width: nested ? pair.layout[WidthSym]() : this.dimension() - deltaSize,
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index e4c14f6b8..96c1513ff 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -13,7 +13,7 @@ import { LinkManager } from "../util/LinkManager";
 import { DocUtils } from "../documents/Documents";
 import { undoBatch } from "../util/UndoManager";
 import { Scripting } from "../util/Scripting";
-import { FieldValue, Cast } from "../../new_fields/Types";
+import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import Palette from "./Palette";
 import { Utils } from "../../Utils";
@@ -28,6 +28,9 @@ export default class GestureOverlay extends Touchable {
     @observable public Width: number = 5;
 
     private _d1: Doc | undefined;
+    private _thumbDoc: Doc | undefined;
+    private _thumbX?: number;
+    private _thumbY?: number;
     private thumbIdentifier?: number;
     private _hands: (React.Touch[])[] = [];
 
@@ -170,8 +173,26 @@ export default class GestureOverlay extends Touchable {
     }
 
     handleHandDown = (e: React.TouchEvent) => {
-        const fingers = Array.from(e.touches);
+        const fingers = new Array<React.Touch>();
+        for (let i = 0; i < e.touches.length; i++) {
+            const pt: any = e.touches.item(i);
+            if (pt.radiusX > 1 && pt.radiusY > 1) {
+                for (let j = 0; j < e.targetTouches.length; j++) {
+                    const tPt = e.targetTouches.item(j);
+                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
+                        if (pt && this.prevPoints.has(pt.identifier)) {
+                            fingers.push(pt);
+                        }
+                    }
+                }
+            }
+        }
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+        if (thumb.identifier === this.thumbIdentifier) {
+            this._thumbX = thumb.clientX;
+            this._thumbY = thumb.clientY;
+            return;
+        }
         this.thumbIdentifier = thumb?.identifier;
         fingers.forEach((f) => this.prevPoints.delete(f.identifier));
         this._hands.push(fingers);
@@ -184,6 +205,9 @@ export default class GestureOverlay extends Touchable {
         const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
         if (thumbDoc) {
             runInAction(() => {
+                this._thumbDoc = thumbDoc;
+                this._thumbX = thumb.clientX;
+                this._thumbY = thumb.clientY;
                 this._palette = <Palette x={minX} y={minY} thumb={[thumb.clientX, thumb.clientY]} thumbDoc={thumbDoc} />;
             });
         }
@@ -199,17 +223,24 @@ export default class GestureOverlay extends Touchable {
     handleHandMove = (e: TouchEvent) => {
         for (let i = 0; i < e.changedTouches.length; i++) {
             const pt = e.changedTouches.item(i);
-            if (pt?.identifier === this.thumbIdentifier) {
-                console.log("thumby movey")
+            if (pt && pt.identifier === this.thumbIdentifier && this._thumbX && this._thumbDoc) {
+                if (Math.abs(pt.clientX - this._thumbX) > 20) {
+                    this._thumbDoc.selectedIndex = Math.max(0, NumCast(this._thumbDoc.selectedIndex) - Math.sign(pt.clientX - this._thumbX));
+                    this._thumbX = pt.clientX;
+                }
             }
         }
     }
 
     @action
     handleHandUp = (e: TouchEvent) => {
-        // this.onTouchEnd(e);
-        this._palette = undefined;
-        document.removeEventListener("touchend", this.handleHandUp);
+        if (e.touches.length < 3) {
+            // this.onTouchEnd(e);
+            this._palette = undefined;
+            this.thumbIdentifier = undefined;
+            this._thumbDoc = undefined;
+            document.removeEventListener("touchend", this.handleHandUp);
+        }
     }
 
     @action
diff --git a/src/client/views/Palette.scss b/src/client/views/Palette.scss
index 2626774cb..4513de2b0 100644
--- a/src/client/views/Palette.scss
+++ b/src/client/views/Palette.scss
@@ -1,20 +1,21 @@
 .palette-container {
     .palette-thumb {
-        width: 300px;
-        height: 300px;
         touch-action: pan-x;
         overflow: scroll;
         position: absolute;
+        width: 90px;
+        height: 70px;
 
         .palette-thumbContent {
-            width: 100%;
-            height: 100%;
-        }
+            transition: transform .3s;
+
+            .collectionView {
+                overflow: visible;
 
-        .palette-button {
-            width: 100px;
-            height: 100px;
-            background: blue;
+                .collectionLinearView-outer {
+                    overflow: visible;
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
index aca1811a4..811c24f53 100644
--- a/src/client/views/Palette.tsx
+++ b/src/client/views/Palette.tsx
@@ -9,8 +9,8 @@ import { DocumentView } from "./nodes/DocumentView";
 import { emptyPath, returnFalse, emptyFunction, returnOne, returnEmptyString, returnTrue } from "../../Utils";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import { Transform } from "../util/Transform";
-import { computed, action } from "mobx";
-import { FieldValue, Cast } from "../../new_fields/Types";
+import { computed, action, IReactionDisposer, reaction, observable } from "mobx";
+import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
 import { observer } from "mobx-react";
 import { DocumentContentsView } from "./nodes/DocumentContentsView";
 import { CollectionStackingView } from "./collections/CollectionStackingView";
@@ -28,12 +28,26 @@ export interface PaletteProps {
 
 @observer
 export default class Palette extends React.Component<PaletteProps> {
+    private _selectedDisposer?: IReactionDisposer;
+    @observable private _selectedIndex: number = 0;
+
+    componentDidMount = () => {
+        this._selectedDisposer = reaction(
+            () => NumCast(this.props.thumbDoc.selectedIndex),
+            (i) => this._selectedIndex = i,
+            { fireImmediately: true }
+        );
+    }
+
+    componentWillUnmount = () => {
+        this._selectedDisposer && this._selectedDisposer();
+    }
 
     render() {
         return (
             <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
                 <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
-                    <div className="palette-thumbContent">
+                    <div className="palette-thumbContent" style={{ transform: `translate(-${(this._selectedIndex * 50) + 10}px, 0px)` }}>
                         <DocumentView
                             Document={this.props.thumbDoc}
                             DataDoc={undefined}
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index a850b0f9f..8b8b1e029 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -116,7 +116,7 @@ export class CurrentUserUtils {
             { title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
         ];
         return docProtoData.map(data => Docs.Create.FontIconDocument({
-            nativeWidth: 100, nativeHeight: 100, width: 100, height: 100, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
+            nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
             onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
             onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined, onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
             ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, pointerHack: true,
@@ -127,7 +127,7 @@ export class CurrentUserUtils {
     static setupThumbDoc(userDoc: Doc) {
         if (!userDoc.thumbDoc) {
             return Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
-                width: 300, columnWidth: 100, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5
+                width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true
             });
         }
         return userDoc.thumbDoc;
-- 
cgit v1.2.3-70-g09d2


From acf72eb45bdcdda5a87a7017f698793d2feea1c4 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Thu, 16 Jan 2020 11:46:12 -0500
Subject: extra fixes after pull from master

---
 src/client/views/MainView.tsx         | 3 ---
 src/server/ApiManagers/UserManager.ts | 2 +-
 2 files changed, 1 insertion(+), 4 deletions(-)

(limited to 'src/server')

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 05bfee95b..b300b0471 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -39,12 +39,9 @@ import MarqueeOptionsMenu from './collections/collectionFreeForm/MarqueeOptionsM
 import InkSelectDecorations from './InkSelectDecorations';
 import { Scripting } from '../util/Scripting';
 import { AudioBox } from './nodes/AudioBox';
-<<<<<<< HEAD
 import SettingsManager from '../util/SettingsManager';
-=======
 import { TraceMobx } from '../../new_fields/util';
 import RichTextMenu from '../util/RichTextMenu';
->>>>>>> e410cde0e430553002d4e1a2f64364b57b65fdbc
 
 @observer
 export class MainView extends React.Component {
diff --git a/src/server/ApiManagers/UserManager.ts b/src/server/ApiManagers/UserManager.ts
index 36d48e366..b0d868918 100644
--- a/src/server/ApiManagers/UserManager.ts
+++ b/src/server/ApiManagers/UserManager.ts
@@ -41,7 +41,7 @@ export default class UserManager extends ApiManager {
         register({
             method: Method.POST,
             subscription: '/internalResetPassword',
-            onValidation: async ({ user, req, res }) => {
+            secureHandler: async ({ user, req, res }) => {
                 const result: any = {};
                 const { curr_pass, new_pass, new_confirm } = req.body;
                 // perhaps should assert whether curr password is entered correctly
-- 
cgit v1.2.3-70-g09d2


From 42b325a94f66e6da0a9fdb0ca0740c01ac7b52f1 Mon Sep 17 00:00:00 2001
From: kimdahey <claire_kim1@brown.edu>
Date: Thu, 16 Jan 2020 14:59:37 -0500
Subject: additional qol changes

---
 src/client/util/SettingsManager.scss | 38 ++++++++++++++++++++++++------------
 src/client/util/SettingsManager.tsx  |  6 +++++-
 src/client/views/MainView.scss       | 12 +++++++-----
 src/server/Websocket/Websocket.ts    |  7 ++++++-
 4 files changed, 44 insertions(+), 19 deletions(-)

(limited to 'src/server')

diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
index 5839fa748..9b6a2ccae 100644
--- a/src/client/util/SettingsManager.scss
+++ b/src/client/util/SettingsManager.scss
@@ -3,6 +3,8 @@
 .dialogue-box {
     background-color: whitesmoke !important;
     color: grey;
+    width: 400px;
+    height: 300px;
 
     button {
         background: $lighter-alt-accent;
@@ -14,6 +16,7 @@
         letter-spacing: 2px;
         font-size: 75%;
         padding: 10px;
+        margin: 10px;
         transition: transform 0.2s;
         margin: 2px;
     }
@@ -23,6 +26,23 @@
     display: flex;
     flex-direction: column;
 
+    button {
+        width: 100px;
+        align-self: center;
+        background: $darker-alt-accent;
+    }
+
+    .delete-button {
+        background: rgb(227, 86, 86);
+    }
+
+    .close-button {
+        position: absolute;
+        right: 1em;
+        top: 1em;
+    }
+
+
     input {
         border-radius: 5px;
         border: none;
@@ -32,8 +52,7 @@
 
     .settings-body {
         display: flex;
-        flex-direction: row;
-
+        justify-content: space-between;
 
         .settings-type {
             display: flex;
@@ -44,13 +63,14 @@
 
         .settings-content {
             padding-left: 1em;
+            padding-right: 1em;
             display: flex;
             flex-direction: column;
-            justify-content: space-between;
-            text-align: left;
+            justify-content: space-around;
+            // text-align: left;
 
-            button {
-                background: $darker-alt-accent;
+            ::placeholder {
+                color: $intermediate-color;
             }
 
             input {
@@ -84,12 +104,6 @@
         font-size: 120%;
     }
 
-    .close-button {
-        position: absolute;
-        right: 1em;
-        top: 1em;
-    }
-
     .container {
         display: block;
         position: relative;
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 652af438b..6f852a3e6 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -101,7 +101,11 @@ export default class SettingsManager extends React.Component<{}> {
                         </div>
                         : undefined}
                     {this.settingsContent === "data" ?
-                        <div className="settings-content">hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</div>
+                        <div className="settings-content">
+                            WARNING: <br />
+                            THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.
+                            <button className="delete-button">DELETE</button>
+                        </div>
                         : undefined}
                 </div>
 
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index ab0a8e49b..0bc07fa43 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -5,6 +5,7 @@
 .mainView-tabButtons {
     position: relative;
     width: 100%;
+
     .documentView-node-topmost {
         height: 200% !important;
     }
@@ -12,8 +13,8 @@
 
 .mainContent-div {
     position: relative;
-    width:100%;
-    height:100%;
+    width: 100%;
+    height: 100%;
 }
 
 .mainView-contentArea {
@@ -21,6 +22,7 @@
         height: 200% !important;
     }
 }
+
 // add nodes menu. Note that the + button is actually an input label, not an actual button.
 .mainView-docButtons {
     position: absolute;
@@ -79,8 +81,8 @@
 
 .mainView-logout {
     position: absolute;
-    right: 5;
-    bottom: 5;
+    right: 0;
+    bottom: 0;
     font-size: 8px;
 }
 
@@ -90,7 +92,7 @@
 
 .mainView-libraryFlyout {
     height: 100%;
-    width:100%;
+    width: 100%;
     position: absolute;
     display: flex;
     flex-direction: column;
diff --git a/src/server/Websocket/Websocket.ts b/src/server/Websocket/Websocket.ts
index 6dda6956e..9e6ad1c72 100644
--- a/src/server/Websocket/Websocket.ts
+++ b/src/server/Websocket/Websocket.ts
@@ -28,7 +28,7 @@ export namespace WebSocket {
 
     function initialize(isRelease: boolean) {
         const endpoint = io();
-        endpoint.on("connection", function(socket: Socket) {
+        endpoint.on("connection", function (socket: Socket) {
             _socket = socket;
 
             socket.use((_packet, next) => {
@@ -89,6 +89,11 @@ export namespace WebSocket {
         await Database.Instance.deleteAll('newDocuments');
     }
 
+    // export async function deleteUserDocuments() {
+    //     await Database.Instance.deleteAll();
+    //     await Database.Instance.deleteAll('newDocuments');
+    // }
+
     export async function deleteAll() {
         await Database.Instance.deleteAll();
         await Database.Instance.deleteAll('newDocuments');
-- 
cgit v1.2.3-70-g09d2


From 4b0a056f1afaf20dea4be64c7b238748d99ad12e Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Fri, 17 Jan 2020 15:36:22 -0500
Subject: palette now doesn't interfere with touch

---
 src/client/documents/Documents.ts                  |  1 +
 src/client/util/InteractionUtils.ts                |  2 +-
 src/client/views/GestureOverlay.tsx                | 82 +++++++++++++++++-----
 src/client/views/MainView.tsx                      |  5 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  2 +-
 .../authentication/models/current_user_utils.ts    |  1 +
 6 files changed, 70 insertions(+), 23 deletions(-)

(limited to 'src/server')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 64abd4f57..c49642de0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -119,6 +119,7 @@ export interface DocumentOptions {
     limitHeight?: number; // maximum height for newly created (eg, from pasting) text documents
     // [key: string]: Opt<Field>;
     pointerHack?: boolean; // for buttons, allows onClick handler to fire onPointerDown
+    isExpanded?: boolean; // is linear view expanded
 }
 
 class EmptyBox {
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts
index da42bdc93..3e6d27242 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.ts
@@ -49,7 +49,7 @@ export namespace InteractionUtils {
     export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent<React.TouchEvent | TouchEvent>, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
         const myTouches = new Array<React.Touch>();
         for (const pt of mte.touches) {
-            if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
+            if (!ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) {
                 for (const tPt of mte.targetTouches) {
                     if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
                         if (pt && prevPoints.has(pt.identifier)) {
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 96c1513ff..854dff0e2 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -16,7 +16,8 @@ import { Scripting } from "../util/Scripting";
 import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import Palette from "./Palette";
-import { Utils } from "../../Utils";
+import { Utils, emptyPath, emptyFunction } from "../../Utils";
+import { DocumentView } from "./nodes/DocumentView";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -24,15 +25,15 @@ export default class GestureOverlay extends Touchable {
 
     @observable private _points: { X: number, Y: number }[] = [];
     @observable private _palette?: JSX.Element;
+    @observable private _elements: JSX.Element[];
     @observable public Color: string = "rgb(244, 67, 54)";
     @observable public Width: number = 5;
 
     private _d1: Doc | undefined;
     private _thumbDoc: Doc | undefined;
     private _thumbX?: number;
-    private _thumbY?: number;
     private thumbIdentifier?: number;
-    private _hands: (React.Touch[])[] = [];
+    private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
 
     protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
 
@@ -49,22 +50,22 @@ export default class GestureOverlay extends Touchable {
         this._hands.forEach((hand) => {
             for (let i = 0; i < e.targetTouches.length; i++) {
                 const pt = e.targetTouches.item(i);
-                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    ntt.splice(ntt.indexOf(pt));
+                if (pt && hand.some((finger) => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
+                    ntt.splice(ntt.indexOf(pt), 1);
                 }
             }
 
             for (let i = 0; i < e.changedTouches.length; i++) {
                 const pt = e.changedTouches.item(i);
-                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    nct.splice(nct.indexOf(pt));
+                if (pt && hand.some((finger) => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
+                    nct.splice(nct.indexOf(pt), 1);
                 }
             }
 
             for (let i = 0; i < e.touches.length; i++) {
                 const pt = e.touches.item(i);
-                if (pt && hand.some((finger) => finger.screenX === pt?.screenX && finger.screenY === pt.screenY)) {
-                    nt.splice(ntt.indexOf(pt));
+                if (pt && hand.some((finger) => finger.screenX === pt.screenX && finger.screenY === pt.screenY)) {
+                    nt.splice(nt.indexOf(pt), 1);
                 }
             }
         });
@@ -94,9 +95,10 @@ export default class GestureOverlay extends Touchable {
         });
 
         ptsToDelete.forEach(pt => this.prevPoints.delete(pt));
+        const nts = this.getNewTouches(te);
+        console.log(nts.nt.length);
 
-        if (this.prevPoints.size && this.prevPoints.size < 5) {
-            const nts = this.getNewTouches(te);
+        if (nts.nt.length < 5) {
             const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY);
             target?.dispatchEvent(
                 new CustomEvent<InteractionUtils.MultiTouchEvent<React.TouchEvent>>("dashOnTouchStart",
@@ -190,12 +192,12 @@ export default class GestureOverlay extends Touchable {
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
         if (thumb.identifier === this.thumbIdentifier) {
             this._thumbX = thumb.clientX;
-            this._thumbY = thumb.clientY;
+            this._hands.set(thumb.identifier, fingers);
             return;
         }
         this.thumbIdentifier = thumb?.identifier;
-        fingers.forEach((f) => this.prevPoints.delete(f.identifier));
-        this._hands.push(fingers);
+        // fingers.forEach((f) => this.prevPoints.delete(f.identifier));
+        this._hands.set(thumb.identifier, fingers);
         const others = fingers.filter(f => f !== thumb);
         const minX = Math.min(...others.map(f => f.clientX));
         const minY = Math.min(...others.map(f => f.clientY));
@@ -207,7 +209,6 @@ export default class GestureOverlay extends Touchable {
             runInAction(() => {
                 this._thumbDoc = thumbDoc;
                 this._thumbX = thumb.clientX;
-                this._thumbY = thumb.clientY;
                 this._palette = <Palette x={minX} y={minY} thumb={[thumb.clientX, thumb.clientY]} thumbDoc={thumbDoc} />;
             });
         }
@@ -221,6 +222,29 @@ export default class GestureOverlay extends Touchable {
 
     @action
     handleHandMove = (e: TouchEvent) => {
+        const fingers = new Array<React.Touch>();
+        for (let i = 0; i < e.touches.length; i++) {
+            const pt: any = e.touches.item(i);
+            if (pt.radiusX > 1 && pt.radiusY > 1) {
+                for (let j = 0; j < e.targetTouches.length; j++) {
+                    const tPt = e.targetTouches.item(j);
+                    if (tPt?.screenX === pt?.screenX && tPt?.screenY === pt?.screenY) {
+                        if (pt && this.prevPoints.has(pt.identifier)) {
+                            this._hands.forEach(hand => hand.some(f => {
+                                if (f.identifier === pt.identifier) {
+                                    fingers.push(pt);
+                                }
+                            }));
+                        }
+                    }
+                }
+            }
+        }
+        const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+        if (thumb?.identifier === this.thumbIdentifier) {
+            this._hands.set(thumb.identifier, fingers);
+        }
+
         for (let i = 0; i < e.changedTouches.length; i++) {
             const pt = e.changedTouches.item(i);
             if (pt && pt.identifier === this.thumbIdentifier && this._thumbX && this._thumbDoc) {
@@ -236,6 +260,7 @@ export default class GestureOverlay extends Touchable {
     handleHandUp = (e: TouchEvent) => {
         if (e.touches.length < 3) {
             // this.onTouchEnd(e);
+            if (this.thumbIdentifier) this._hands.delete(this.thumbIdentifier);
             this._palette = undefined;
             this.thumbIdentifier = undefined;
             this._thumbDoc = undefined;
@@ -380,16 +405,35 @@ export default class GestureOverlay extends Touchable {
         );
     }
 
+    @computed get elements() {
+        return [
+            this.props.children,
+            this._elements,
+            this._palette,
+            this.currentStroke
+        ]
+    }
+
+    @action
+    openFloatingDoc = (doc: Doc) => {
+        // this._elements.push(
+        //     <DocumentView 
+        //     Document={doc}
+        //     LibraryPath={emptyPath}
+        //     addDocument={undefined}
+        //     addDocTab={emptyFunction}
+        //     />
+        // )
+    }
+
     render() {
         return (
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
-                {this.props.children}
-                {this._palette}
-                {this.currentStroke}
+                {this.elements}
             </div>);
     }
 }
 
 Scripting.addGlobal("GestureOverlay", GestureOverlay);
 Scripting.addGlobal(function setPen(width: any, color: any) { runInAction(() => { GestureOverlay.Instance.Color = color; GestureOverlay.Instance.Width = width; }); });
-Scripting.addGlobal(function resetPen() { runInAction(() => { GestureOverlay.Instance.Color = "rgb(244, 67, 54)"; GestureOverlay.Instance.Width = 5; }); });
\ No newline at end of file
+Scripting.addGlobal(function resetPen() { runInAction(() => { runInAction(() => { GestureOverlay.Instance.Color = "rgb(244, 67, 54)"; GestureOverlay.Instance.Width = 5; })); });
\ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 93fb0a07c..b8b956270 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,7 +1,7 @@
 import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faArrowDown, faArrowUp, faBolt, faCaretUp, faCat, faCheck, faChevronRight, faClone, faCloudUploadAlt, faCommentAlt, faCut, faEllipsisV, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faLongArrowAltRight,
-    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt, faPhone, faStamp
+    faMusic, faObjectGroup, faPause, faMousePointer, faPenNib, faFileAudio, faPen, faEraser, faPlay, faPortrait, faRedoAlt, faThumbtack, faTree, faTv, faUndoAlt, faHighlighter, faMicrophone, faCompressArrowsAlt, faPhone, faStamp, faClipboard
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
@@ -137,6 +137,7 @@ export class MainView extends React.Component {
         library.add(faEllipsisV);
         library.add(faMusic);
         library.add(faPhone);
+        library.add(faClipboard);
         library.add(faStamp);
         this.initEventListeners();
         this.initAuthenticationRouters();
@@ -518,7 +519,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 aaa585b55..b302bb1dc 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -327,7 +327,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
     @action
     handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent<React.TouchEvent>) => {
         if (!e.nativeEvent.cancelBubble) {
-            // const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true);
+            // const myTouches = InteractionUtils.GetMyTargetTouches(me, this.prevPoints, true);
             const pt = me.changedTouches[0];
             if (pt) {
                 this._hitCluster = this.props.Document.useCluster ? this.pickCluster(this.getTransform().transformPoint(pt.clientX, pt.clientY)) !== -1 : false;
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 8b8b1e029..eb48b28f2 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -114,6 +114,7 @@ export class CurrentUserUtils {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
             { title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            // { title: "notepad", icon: "clipboard", pointerUp: "closeFloatingDoc(this.clipboard)", pointerDown: 'openFloatingDoc(this.clipboard)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
         ];
         return docProtoData.map(data => Docs.Create.FontIconDocument({
             nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
-- 
cgit v1.2.3-70-g09d2


From a61dfaab422886733a727eebe80b619230d59684 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Mon, 20 Jan 2020 13:40:57 -0500
Subject: working palette

---
 src/client/documents/Documents.ts                  |  1 +
 src/client/views/GestureOverlay.scss               |  6 ++
 src/client/views/GestureOverlay.tsx                | 87 +++++++++++++++++-----
 .../views/collections/CollectionLinearView.tsx     | 24 ++++--
 .../authentication/models/current_user_utils.ts    |  7 +-
 5 files changed, 99 insertions(+), 26 deletions(-)

(limited to 'src/server')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 3617630f3..2aa848f5c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -109,6 +109,7 @@ export interface DocumentOptions {
     onPointerUp?: ScriptField;
     dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script
     onDragStart?: ScriptField; //script to execute at start of drag operation --  e.g., when a "creator" button is dragged this script generates a different document to drop
+    clipboard?: Doc; //script to execute at start of drag operation --  e.g., when a "creator" button is dragged this script generates a different document to drop
     icon?: string;
     gridGap?: number; // gap between items in masonry view
     xMargin?: number; // gap between left edge of document and start of masonry/stacking layouts
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index 31601efd4..f9a52d976 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -5,4 +5,10 @@
     top: 0;
     left: 0;
     touch-action: none;
+}
+
+.clipboardDoc-cont {
+    position: absolute;
+    width: 300px;
+    height: 300px;
 }
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index ab26687d7..7fb8e7797 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -2,7 +2,7 @@ import React = require("react");
 import { Touchable } from "./Touchable";
 import { observer } from "mobx-react";
 import "./GestureOverlay.scss";
-import { computed, observable, action, runInAction } from "mobx";
+import { computed, observable, action, runInAction, IReactionDisposer, reaction } from "mobx";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
 import { InteractionUtils } from "../util/InteractionUtils";
 import { InkingControl } from "./InkingControl";
@@ -12,11 +12,13 @@ import { LinkManager } from "../util/LinkManager";
 import { DocUtils } from "../documents/Documents";
 import { undoBatch } from "../util/UndoManager";
 import { Scripting } from "../util/Scripting";
-import { FieldValue, Cast, NumCast } from "../../new_fields/Types";
+import { FieldValue, Cast, NumCast, BoolCast } from "../../new_fields/Types";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import Palette from "./Palette";
-import { Utils, emptyPath, emptyFunction } from "../../Utils";
+import { Utils, emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue } from "../../Utils";
 import { DocumentView } from "./nodes/DocumentView";
+import { Transform } from "../util/Transform";
+import { DocumentContentsView } from "./nodes/DocumentContentsView";
 
 @observer
 export default class GestureOverlay extends Touchable {
@@ -24,13 +26,16 @@ export default class GestureOverlay extends Touchable {
 
     @observable private _points: { X: number, Y: number }[] = [];
     @observable private _palette?: JSX.Element;
-    @observable private _elements: JSX.Element[];
+    @observable private _clipboardDoc?: JSX.Element;
     @observable public Color: string = "rgb(244, 67, 54)";
     @observable public Width: number = 5;
+    @observable public SavedColor?: string;
+    @observable public SavedWidth?: number;
 
     private _d1: Doc | undefined;
     private _thumbDoc: Doc | undefined;
-    private _thumbX?: number;
+    @observable private _thumbX?: number;
+    @observable private _thumbY?: number;
     private thumbIdentifier?: number;
     private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
 
@@ -191,6 +196,7 @@ export default class GestureOverlay extends Touchable {
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
         if (thumb.identifier === this.thumbIdentifier) {
             this._thumbX = thumb.clientX;
+            this._thumbY = thumb.clientY;
             this._hands.set(thumb.identifier, fingers);
             return;
         }
@@ -208,6 +214,7 @@ export default class GestureOverlay extends Touchable {
             runInAction(() => {
                 this._thumbDoc = thumbDoc;
                 this._thumbX = thumb.clientX;
+                this._thumbY = thumb.clientY;
                 this._palette = <Palette x={minX} y={minY} thumb={[thumb.clientX, thumb.clientY]} thumbDoc={thumbDoc} />;
             });
         }
@@ -407,32 +414,76 @@ export default class GestureOverlay extends Touchable {
     @computed get elements() {
         return [
             this.props.children,
-            this._elements,
+            // this._clipboardDoc,
             this._palette,
             this.currentStroke
-        ]
+        ];
     }
 
     @action
-    openFloatingDoc = (doc: Doc) => {
-        // this._elements.push(
-        //     <DocumentView 
-        //     Document={doc}
-        //     LibraryPath={emptyPath}
-        //     addDocument={undefined}
-        //     addDocTab={emptyFunction}
-        //     />
-        // )
+    public openFloatingDoc = (doc: Doc) => {
+        // const t = new Transform(-(this._clipboardDoc ? (this._thumbX ?? 0) : -350), -(this._thumbY ?? 0) + 350, 1);
+        // let t =
+        this._clipboardDoc =
+            <DocumentView
+                Document={doc}
+                DataDoc={undefined}
+                LibraryPath={emptyPath}
+                addDocument={undefined}
+                addDocTab={returnFalse}
+                pinToPres={emptyFunction}
+                onClick={undefined}
+                ruleProvider={undefined}
+                removeDocument={undefined}
+                ScreenToLocalTransform={() => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + 350, 1)}
+                ContentScaling={returnOne}
+                PanelWidth={() => 300}
+                PanelHeight={() => 300}
+                renderDepth={0}
+                backgroundColor={returnEmptyString}
+                focus={emptyFunction}
+                parentActive={returnTrue}
+                whenActiveChanged={emptyFunction}
+                bringToFront={emptyFunction}
+                ContainingCollectionView={undefined}
+                ContainingCollectionDoc={undefined}
+                zoomToScale={emptyFunction}
+                getScale={returnOne}
+            />;
+    }
+
+    @action
+    public closeFloatingDoc = () => {
+        this._clipboardDoc = undefined;
     }
 
     render() {
         return (
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
                 {this.elements}
+                <div className="clipboardDoc-cont" style={{
+                    transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - 350}px)`,
+                    pointerEvents: this._clipboardDoc ? "unset" : "none",
+                    touchAction: this._clipboardDoc ? "unset" : "none"
+                }}>
+                    {this._clipboardDoc}
+                </div>
             </div>);
     }
 }
 
 Scripting.addGlobal("GestureOverlay", GestureOverlay);
-Scripting.addGlobal(function setPen(width: any, color: any) { runInAction(() => { GestureOverlay.Instance.Color = color; GestureOverlay.Instance.Width = width; }); });
-Scripting.addGlobal(function resetPen() { runInAction(() => { runInAction(() => { GestureOverlay.Instance.Color = "rgb(244, 67, 54)"; GestureOverlay.Instance.Width = 5; }); }); });
\ No newline at end of file
+Scripting.addGlobal(function setPen(width: any, color: any) {
+    runInAction(() => {
+        GestureOverlay.Instance.SavedColor = GestureOverlay.Instance.Color;
+        GestureOverlay.Instance.Color = color;
+        GestureOverlay.Instance.SavedWidth = GestureOverlay.Instance.Width;
+        GestureOverlay.Instance.Width = width;
+    });
+});
+Scripting.addGlobal(function resetPen() {
+    runInAction(() => {
+        GestureOverlay.Instance.Color = GestureOverlay.Instance.SavedColor ?? "rgb(244, 67, 54)";
+        GestureOverlay.Instance.Width = GestureOverlay.Instance.SavedWidth ?? 5;
+    });
+});
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index e91c2a01d..8b0638aa1 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -31,6 +31,9 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
         this._dropDisposer && this._dropDisposer();
         this._widthDisposer && this._widthDisposer();
         this._selectedDisposer && this._selectedDisposer();
+        this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map((pair, ind) => {
+            Cast(pair.layout.proto?.onPointerUp, ScriptField)?.script.run({ this: pair.layout.proto }, console.log);
+        });
     }
 
     componentDidMount() {
@@ -42,7 +45,22 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
 
         this._selectedDisposer = reaction(
             () => NumCast(this.props.Document.selectedIndex),
-            (i) => runInAction(() => this._selectedIndex = i),
+            (i) => runInAction(() => {
+                this._selectedIndex = i;
+                let selected: any = undefined;
+                this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map((pair, ind) => {
+                    const isSelected = this._selectedIndex === ind;
+                    if (isSelected) {
+                        selected = pair;
+                    }
+                    else {
+                        Cast(pair.layout.proto?.onPointerUp, ScriptField)?.script.run({ this: pair.layout.proto }, console.log);
+                    }
+                });
+                if (selected && selected.layout) {
+                    Cast(selected.layout.proto?.onPointerDown, ScriptField)?.script.run({ this: selected.layout.proto }, console.log);
+                }
+            }),
             { fireImmediately: true }
         );
     }
@@ -76,10 +94,6 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                         const dref = React.createRef<HTMLDivElement>();
                         const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension());
                         const deltaSize = nativeWidth * .15 / 2;
-                        const isSelected = this._selectedIndex === ind;
-                        if (isSelected) {
-                            Cast(pair.layout.proto?.onPointerDown, ScriptField)?.script.run({ this: pair.layout.proto }, console.log);
-                        }
                         return <div className={`collectionLinearView-docBtn` + (pair.layout.onClick || pair.layout.onDragStart ? "-scalable" : "")} key={pair.layout[Id]} ref={dref}
                             style={{
                                 width: nested ? pair.layout[WidthSym]() : this.dimension() - deltaSize,
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 4a12c1ee9..adeee452c 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -111,14 +111,15 @@ export class CurrentUserUtils {
     }
 
     static setupThumbButtons(doc: Doc) {
-        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
+        const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
             { title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
-            // { title: "notepad", icon: "clipboard", pointerUp: "closeFloatingDoc(this.clipboard)", pointerDown: 'openFloatingDoc(this.clipboard)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { title: "notepad", icon: "clipboard", pointerUp: "GestureOverlay.Instance.closeFloatingDoc()", pointerDown: 'GestureOverlay.Instance.openFloatingDoc(this.clipboard)', clipboard: Docs.Create.FreeformDocument([], { width: 300, height: 300 }), backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
         ];
         return docProtoData.map(data => Docs.Create.FontIconDocument({
             nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
             onDragStart: data.drag ? ScriptField.MakeFunction(data.drag) : undefined,
+            clipboard: data.clipboard,
             onPointerUp: data.pointerUp ? ScriptField.MakeScript(data.pointerUp) : undefined, onPointerDown: data.pointerDown ? ScriptField.MakeScript(data.pointerDown) : undefined,
             ischecked: data.ischecked ? ComputedField.MakeFunction(data.ischecked) : undefined, activePen: data.activePen, pointerHack: true,
             backgroundColor: data.backgroundColor, removeDropProperties: new List<string>(["dropAction"]), dragFactory: data.dragFactory,
@@ -127,7 +128,7 @@ export class CurrentUserUtils {
 
     static setupThumbDoc(userDoc: Doc) {
         if (!userDoc.thumbDoc) {
-            return Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
+            userDoc.thumbDoc = Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
                 width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true
             });
         }
-- 
cgit v1.2.3-70-g09d2


From dabb4a9c66083b88eba7bfb07a2614634e124b10 Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Mon, 20 Jan 2020 16:33:49 -0500
Subject: resizable palette

---
 src/client/documents/Documents.ts                  |  4 +-
 src/client/views/GestureOverlay.scss               |  6 ++
 src/client/views/GestureOverlay.tsx                | 68 +++++++++++++++-------
 src/client/views/MainView.tsx                      |  2 +-
 .../views/collections/CollectionLinearView.tsx     |  2 +-
 src/client/views/nodes/ButtonBox.tsx               |  5 +-
 src/new_fields/documentSchemas.ts                  |  2 +
 .../authentication/models/current_user_utils.ts    | 16 +++--
 8 files changed, 75 insertions(+), 30 deletions(-)

(limited to 'src/server')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 7e7b10ae8..821185518 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -80,7 +80,7 @@ export interface DocumentOptions {
     isTemplateDoc?: boolean;
     templates?: List<string>;
     viewType?: number;
-    backgroundColor?: string;
+    backgroundColor?: string | ScriptField;
     ignoreClick?: boolean;
     lockedPosition?: boolean; // lock the x,y coordinates of the document so that it can't be dragged
     lockedTransform?: boolean; // lock the panx,pany and scale parameters of the document so that it be panned/zoomed
@@ -127,6 +127,8 @@ export interface DocumentOptions {
     // [key: string]: Opt<Field>;
     pointerHack?: boolean; // for buttons, allows onClick handler to fire onPointerDown
     isExpanded?: boolean; // is linear view expanded
+    textTransform?: string; // is linear view expanded
+    letterSpacing?: string; // is linear view expanded
 }
 
 class EmptyBox {
diff --git a/src/client/views/GestureOverlay.scss b/src/client/views/GestureOverlay.scss
index f9a52d976..d980b0a91 100644
--- a/src/client/views/GestureOverlay.scss
+++ b/src/client/views/GestureOverlay.scss
@@ -11,4 +11,10 @@
     position: absolute;
     width: 300px;
     height: 300px;
+}
+
+.filter-cont {
+    position: absolute;
+    background-color: transparent;
+    border: 1px solid black;
 }
\ No newline at end of file
diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index 7fb8e7797..e44db4463 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -24,19 +24,25 @@ import { DocumentContentsView } from "./nodes/DocumentContentsView";
 export default class GestureOverlay extends Touchable {
     static Instance: GestureOverlay;
 
-    @observable private _points: { X: number, Y: number }[] = [];
-    @observable private _palette?: JSX.Element;
-    @observable private _clipboardDoc?: JSX.Element;
     @observable public Color: string = "rgb(244, 67, 54)";
     @observable public Width: number = 5;
     @observable public SavedColor?: string;
     @observable public SavedWidth?: number;
 
-    private _d1: Doc | undefined;
-    private _thumbDoc: Doc | undefined;
     @observable private _thumbX?: number;
     @observable private _thumbY?: number;
+    @observable private _pointerY?: number;
+    @observable private _points: { X: number, Y: number }[] = [];
+    @observable private _palette?: JSX.Element;
+    @observable private _clipboardDoc?: JSX.Element;
+    @observable private _showBounds: boolean = false;
+
+    @computed private get height(): number { return Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 300, 300); }
+
+    private _d1: Doc | undefined;
+    private _thumbDoc: Doc | undefined;
     private thumbIdentifier?: number;
+    private pointerIdentifier?: number;
     private _hands: Map<number, React.Touch[]> = new Map<number, React.Touch[]>();
 
     protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer;
@@ -178,7 +184,7 @@ export default class GestureOverlay extends Touchable {
         e.stopPropagation();
     }
 
-    handleHandDown = (e: React.TouchEvent) => {
+    handleHandDown = async (e: React.TouchEvent) => {
         const fingers = new Array<React.Touch>();
         for (let i = 0; i < e.touches.length; i++) {
             const pt: any = e.touches.item(i);
@@ -194,6 +200,22 @@ export default class GestureOverlay extends Touchable {
             }
         }
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
+        const rightMost = Math.max(...fingers.map(f => f.clientX));
+        const leftMost = Math.min(...fingers.map(f => f.clientX));
+        let pointer: React.Touch | undefined;
+        // left hand
+        if (thumb.clientX === rightMost) {
+            pointer = fingers.reduce((a, v) => a.clientX > v.clientX || v.identifier === thumb.identifier ? a : v);
+        }
+        // right hand
+        else if (thumb.clientX === leftMost) {
+            pointer = fingers.reduce((a, v) => a.clientX < v.clientX || v.identifier === thumb.identifier ? a : v);
+        }
+        else {
+            console.log("not hand");
+        }
+        this.pointerIdentifier = pointer?.identifier;
+        runInAction(() => this._pointerY = pointer?.clientY);
         if (thumb.identifier === this.thumbIdentifier) {
             this._thumbX = thumb.clientX;
             this._thumbY = thumb.clientY;
@@ -201,15 +223,12 @@ export default class GestureOverlay extends Touchable {
             return;
         }
         this.thumbIdentifier = thumb?.identifier;
-        // fingers.forEach((f) => this.prevPoints.delete(f.identifier));
         this._hands.set(thumb.identifier, fingers);
         const others = fingers.filter(f => f !== thumb);
         const minX = Math.min(...others.map(f => f.clientX));
         const minY = Math.min(...others.map(f => f.clientY));
-        // const t = this.getTransform().transformPoint(minX, minY);
-        // const th = this.getTransform().transformPoint(thumb.clientX, thumb.clientY);
 
-        const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc));
+        const thumbDoc = await Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc);
         if (thumbDoc) {
             runInAction(() => {
                 this._thumbDoc = thumbDoc;
@@ -247,7 +266,7 @@ export default class GestureOverlay extends Touchable {
             }
         }
         const thumb = fingers.reduce((a, v) => a.clientY > v.clientY ? a : v, fingers[0]);
-        if (thumb?.identifier === this.thumbIdentifier) {
+        if (thumb?.identifier && thumb?.identifier === this.thumbIdentifier) {
             this._hands.set(thumb.identifier, fingers);
         }
 
@@ -259,6 +278,9 @@ export default class GestureOverlay extends Touchable {
                     this._thumbX = pt.clientX;
                 }
             }
+            if (pt && pt.identifier === this.pointerIdentifier) {
+                this._pointerY = pt.clientY;
+            }
         }
     }
 
@@ -329,8 +351,6 @@ export default class GestureOverlay extends Touchable {
         return actionPerformed;
     }
 
-
-
     @action
     onPointerUp = (e: PointerEvent) => {
         if (this._points.length > 1) {
@@ -414,7 +434,6 @@ export default class GestureOverlay extends Touchable {
     @computed get elements() {
         return [
             this.props.children,
-            // this._clipboardDoc,
             this._palette,
             this.currentStroke
         ];
@@ -422,8 +441,6 @@ export default class GestureOverlay extends Touchable {
 
     @action
     public openFloatingDoc = (doc: Doc) => {
-        // const t = new Transform(-(this._clipboardDoc ? (this._thumbX ?? 0) : -350), -(this._thumbY ?? 0) + 350, 1);
-        // let t =
         this._clipboardDoc =
             <DocumentView
                 Document={doc}
@@ -435,7 +452,7 @@ export default class GestureOverlay extends Touchable {
                 onClick={undefined}
                 ruleProvider={undefined}
                 removeDocument={undefined}
-                ScreenToLocalTransform={() => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + 350, 1)}
+                ScreenToLocalTransform={() => new Transform(-(this._thumbX ?? 0), -(this._thumbY ?? 0) + this.height, 1)}
                 ContentScaling={returnOne}
                 PanelWidth={() => 300}
                 PanelHeight={() => 300}
@@ -462,13 +479,24 @@ export default class GestureOverlay extends Touchable {
             <div className="gestureOverlay-cont" onPointerDown={this.onPointerDown} onTouchStart={this.onReactTouchStart}>
                 {this.elements}
                 <div className="clipboardDoc-cont" style={{
-                    transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - 350}px)`,
+                    transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - this.height}px)`,
+                    height: this.height,
+                    width: this.height,
                     pointerEvents: this._clipboardDoc ? "unset" : "none",
-                    touchAction: this._clipboardDoc ? "unset" : "none"
+                    touchAction: this._clipboardDoc ? "unset" : "none",
                 }}>
                     {this._clipboardDoc}
                 </div>
-            </div>);
+                <div className="filter-cont" style={{
+                    transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - this.height}px)`,
+                    height: this.height,
+                    width: this.height,
+                    pointerEvents: this._showBounds ? "unset" : "none",
+                    touchAction: this._showBounds ? "unset" : "none",
+                    display: this._showBounds ? "unset" : "none",
+                }}>
+                </div>
+            </div >);
     }
 }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 168d2ea18..14ee0dc53 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -46,7 +46,7 @@ import RichTextMenu from '../util/RichTextMenu';
 @observer
 export class MainView extends React.Component {
     public static Instance: MainView;
-    private _buttonBarHeight = 75;
+    private _buttonBarHeight = 35;
     private _flyoutSizeOnDown = 0;
     private _urlState: HistoryUtil.DocUrl;
     private _docBtnRef = React.createRef<HTMLDivElement>();
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 8b0638aa1..77af2dc0e 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -48,7 +48,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
             (i) => runInAction(() => {
                 this._selectedIndex = i;
                 let selected: any = undefined;
-                this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map((pair, ind) => {
+                this.childLayoutPairs.filter((pair) => this.isCurrent(pair.layout)).map(async (pair, ind) => {
                     const isSelected = this._selectedIndex === ind;
                     if (isSelected) {
                         selected = pair;
diff --git a/src/client/views/nodes/ButtonBox.tsx b/src/client/views/nodes/ButtonBox.tsx
index d1272c266..d29fe1711 100644
--- a/src/client/views/nodes/ButtonBox.tsx
+++ b/src/client/views/nodes/ButtonBox.tsx
@@ -80,7 +80,10 @@ export class ButtonBox extends DocComponent<FieldViewProps, ButtonDocument>(Butt
         return (
             <div className="buttonBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu}
                 style={{ boxShadow: this.Document.opacity === 0 ? undefined : StrCast(this.Document.boxShadow, "") }}>
-                <div className="buttonBox-mainButton" style={{ background: this.Document.backgroundColor || "", color: this.Document.color || "black", fontSize: this.Document.fontSize }} >
+                <div className="buttonBox-mainButton" style={{
+                    background: this.Document.backgroundColor, color: this.Document.color || "black",
+                    fontSize: this.Document.fontSize, letterSpacing: this.Document.letterSpacing || "", textTransform: this.Document.textTransform || ""
+                }} >
                     <div className="buttonBox-mainButtonCenter">
                         {(this.Document.text || this.Document.title)}
                     </div>
diff --git a/src/new_fields/documentSchemas.ts b/src/new_fields/documentSchemas.ts
index 24f6224eb..d5c34e128 100644
--- a/src/new_fields/documentSchemas.ts
+++ b/src/new_fields/documentSchemas.ts
@@ -57,6 +57,8 @@ export const documentSchema = createSchema({
     yPadding: "number",         // pixels of padding on left/right of collectionfreeformview contents when fitToBox is set
     LODarea: "number",          // area (width*height) where CollectionFreeFormViews switch from a label to rendering contents
     LODdisable: "boolean",      // whether to disbale LOD switching for CollectionFreeFormViews
+    letterSpacing: "string",
+    textTransform: "string"
 });
 
 export const positionSchema = createSchema({
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index adeee452c..3e6399d82 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -129,7 +129,7 @@ export class CurrentUserUtils {
     static setupThumbDoc(userDoc: Doc) {
         if (!userDoc.thumbDoc) {
             userDoc.thumbDoc = Docs.Create.LinearDocument(CurrentUserUtils.setupThumbButtons(userDoc), {
-                width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true
+                width: 100, height: 50, ignoreClick: true, lockedPosition: true, chromeStatus: "disabled", title: "buttons", autoHeight: true, yMargin: 5, isExpanded: true, backgroundColor: "white"
             });
         }
         return userDoc.thumbDoc;
@@ -154,7 +154,8 @@ export class CurrentUserUtils {
         });
 
         return Docs.Create.ButtonDocument({
-            width: 35, height: 35, backgroundColor: "#222222", color: "lightgrey", title: "Tools", fontSize: 10, targetContainer: sidebarContainer,
+            width: 35, height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Tools", fontSize: 10, targetContainer: sidebarContainer,
+            letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.StackingDocument([dragCreators, color], {
                 width: 500, height: 800, lockedPosition: true, chromeStatus: "disabled", title: "tools stack"
             }),
@@ -179,9 +180,10 @@ export class CurrentUserUtils {
         });
 
         return Docs.Create.ButtonDocument({
-            width: 50, height: 35, backgroundColor: "#222222", color: "lightgrey", title: "Library", fontSize: 10,
+            width: 50, height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Library", fontSize: 10,
+            letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.TreeDocument([doc.workspaces as Doc, doc.documents as Doc, doc.recentlyClosed as Doc], {
-                title: "Library", xMargin: 5, yMargin: 5, gridGap: 5, forceActive: true, dropAction: "alias", lockedPosition: true
+                title: "Library", xMargin: 5, yMargin: 5, gridGap: 5, forceActive: true, dropAction: "alias", lockedPosition: true, boxShadow: "0 0",
             }),
             targetContainer: sidebarContainer,
             onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel;")
@@ -191,7 +193,8 @@ export class CurrentUserUtils {
     // setup the Search button which will display the search panel.  
     static setupSearchPanel(sidebarContainer: Doc) {
         return Docs.Create.ButtonDocument({
-            width: 50, height: 35, backgroundColor: "#222222", color: "lightgrey", title: "Search", fontSize: 10,
+            width: 50, height: 25, backgroundColor: "lightgrey", color: "rgb(34, 34, 34)", title: "Search", fontSize: 10,
+            letterSpacing: "0px", textTransform: "unset", borderRounding: "5px 5px 0px 0px", boxShadow: "3px 3px 0px rgb(34, 34, 34)",
             sourcePanel: Docs.Create.QueryDocument({
                 title: "search stack", ignoreClick: true
             }),
@@ -214,7 +217,8 @@ export class CurrentUserUtils {
         // Finally, setup the list of buttons to display in the sidebar
         doc.sidebarButtons = Docs.Create.StackingDocument([doc.SearchBtn as Doc, doc.LibraryBtn as Doc, doc.ToolsBtn as Doc], {
             width: 500, height: 80, boxShadow: "0 0", sectionFilter: "title", hideHeadings: true, ignoreClick: true,
-            backgroundColor: "lightgrey", chromeStatus: "disabled", title: "library stack"
+            backgroundColor: "rgb(100, 100, 100)", chromeStatus: "disabled", title: "library stack",
+            yMargin: 10,
         });
     }
 
-- 
cgit v1.2.3-70-g09d2


From 42d82210f3bbfce5d79c9fe93889ddfe8944d5be Mon Sep 17 00:00:00 2001
From: Stanley Yip <stanley_yip@brown.edu>
Date: Mon, 20 Jan 2020 17:28:01 -0500
Subject: stufs

---
 src/client/views/GestureOverlay.tsx                | 102 ++++++++++++---------
 .../authentication/models/current_user_utils.ts    |   3 +-
 2 files changed, 63 insertions(+), 42 deletions(-)

(limited to 'src/server')

diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx
index e44db4463..84d089b47 100644
--- a/src/client/views/GestureOverlay.tsx
+++ b/src/client/views/GestureOverlay.tsx
@@ -15,7 +15,7 @@ import { Scripting } from "../util/Scripting";
 import { FieldValue, Cast, NumCast, BoolCast } from "../../new_fields/Types";
 import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils";
 import Palette from "./Palette";
-import { Utils, emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue } from "../../Utils";
+import { Utils, emptyPath, emptyFunction, returnFalse, returnOne, returnEmptyString, returnTrue, numberRange } from "../../Utils";
 import { DocumentView } from "./nodes/DocumentView";
 import { Transform } from "../util/Transform";
 import { DocumentContentsView } from "./nodes/DocumentContentsView";
@@ -28,6 +28,7 @@ export default class GestureOverlay extends Touchable {
     @observable public Width: number = 5;
     @observable public SavedColor?: string;
     @observable public SavedWidth?: number;
+    @observable public Tool: ToolglassTools = ToolglassTools.None;
 
     @observable private _thumbX?: number;
     @observable private _thumbY?: number;
@@ -35,9 +36,9 @@ export default class GestureOverlay extends Touchable {
     @observable private _points: { X: number, Y: number }[] = [];
     @observable private _palette?: JSX.Element;
     @observable private _clipboardDoc?: JSX.Element;
-    @observable private _showBounds: boolean = false;
 
     @computed private get height(): number { return Math.max(this._pointerY && this._thumbY ? this._thumbY - this._pointerY : 300, 300); }
+    @computed private get showBounds() { return this.Tool !== ToolglassTools.None; }
 
     private _d1: Doc | undefined;
     private _thumbDoc: Doc | undefined;
@@ -357,51 +358,62 @@ 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 }));
 
-            const result = GestureUtils.GestureRecognizer.Recognize(new Array(points));
-            let actionPerformed = false;
-            if (result && result.Score > 0.7) {
-                switch (result.Name) {
-                    case GestureUtils.Gestures.Box:
-                        const target = document.elementFromPoint(this._points[0].X, this._points[0].Y);
-                        target?.dispatchEvent(new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
+            const xInGlass = points[0].X > (this._thumbX ?? Number.MAX_SAFE_INTEGER) && points[0].X < (this._thumbX ?? Number.MAX_SAFE_INTEGER) + this.height;
+            const yInGlass = points[0].Y > (this._thumbY ?? Number.MAX_SAFE_INTEGER) - this.height && points[0].Y < (this._thumbY ?? Number.MAX_SAFE_INTEGER);
+
+            if (this.Tool !== ToolglassTools.None && xInGlass && yInGlass) {
+                switch (this.Tool) {
+                    case ToolglassTools.InkToText:
+                        break;
+                }
+            }
+            else {
+                const result = GestureUtils.GestureRecognizer.Recognize(new Array(points));
+                let actionPerformed = false;
+                if (result && result.Score > 0.7) {
+                    switch (result.Name) {
+                        case GestureUtils.Gestures.Box:
+                            const target = document.elementFromPoint(this._points[0].X, this._points[0].Y);
+                            target?.dispatchEvent(new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
+                                {
+                                    bubbles: true,
+                                    detail: {
+                                        points: this._points,
+                                        gesture: GestureUtils.Gestures.Box,
+                                        bounds: B
+                                    }
+                                }));
+                            actionPerformed = true;
+                            break;
+                        case GestureUtils.Gestures.Line:
+                            actionPerformed = this.handleLineGesture();
+                            break;
+                        case GestureUtils.Gestures.Scribble:
+                            console.log("scribble");
+                            break;
+                    }
+                    if (actionPerformed) {
+                        this._points = [];
+                    }
+                }
+
+                if (!actionPerformed) {
+                    const target = document.elementFromPoint(this._points[0].X, this._points[0].Y);
+                    target?.dispatchEvent(
+                        new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
                             {
                                 bubbles: true,
                                 detail: {
                                     points: this._points,
-                                    gesture: GestureUtils.Gestures.Box,
+                                    gesture: GestureUtils.Gestures.Stroke,
                                     bounds: B
                                 }
-                            }));
-                        actionPerformed = true;
-                        break;
-                    case GestureUtils.Gestures.Line:
-                        actionPerformed = this.handleLineGesture();
-                        break;
-                    case GestureUtils.Gestures.Scribble:
-                        console.log("scribble");
-                        break;
-                }
-                if (actionPerformed) {
+                            }
+                        )
+                    );
                     this._points = [];
                 }
             }
-
-            if (!actionPerformed) {
-                const target = document.elementFromPoint(this._points[0].X, this._points[0].Y);
-                target?.dispatchEvent(
-                    new CustomEvent<GestureUtils.GestureEvent>("dashOnGesture",
-                        {
-                            bubbles: true,
-                            detail: {
-                                points: this._points,
-                                gesture: GestureUtils.Gestures.Stroke,
-                                bounds: B
-                            }
-                        }
-                    )
-                );
-                this._points = [];
-            }
         }
         document.removeEventListener("pointermove", this.onPointerMove);
         document.removeEventListener("pointerup", this.onPointerUp);
@@ -491,16 +503,24 @@ export default class GestureOverlay extends Touchable {
                     transform: `translate(${this._thumbX}px, ${(this._thumbY ?? 0) - this.height}px)`,
                     height: this.height,
                     width: this.height,
-                    pointerEvents: this._showBounds ? "unset" : "none",
-                    touchAction: this._showBounds ? "unset" : "none",
-                    display: this._showBounds ? "unset" : "none",
+                    pointerEvents: "none",
+                    touchAction: "none",
+                    display: this.showBounds ? "unset" : "none",
                 }}>
                 </div>
             </div >);
     }
 }
 
+export enum ToolglassTools {
+    InkToText = "inktotext",
+    None = "none",
+}
+
 Scripting.addGlobal("GestureOverlay", GestureOverlay);
+Scripting.addGlobal(function setToolglass(tool: any) {
+    runInAction(() => GestureOverlay.Instance.Tool = tool);
+});
 Scripting.addGlobal(function setPen(width: any, color: any) {
     runInAction(() => {
         GestureOverlay.Instance.SavedColor = GestureOverlay.Instance.Color;
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 3e6399d82..5375c8ac8 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -114,7 +114,8 @@ export class CurrentUserUtils {
         const docProtoData: { title: string, icon: string, drag?: string, ignoreClick?: boolean, pointerDown?: string, pointerUp?: string, ischecked?: string, clipboard?: Doc, activePen?: Doc, backgroundColor?: string, dragFactory?: Doc }[] = [
             { title: "use pen", icon: "pen-nib", pointerUp: "resetPen()", pointerDown: 'setPen(2, this.backgroundColor)', backgroundColor: "blue", ischecked: `sameDocs(this.activePen.pen,  this)`, activePen: doc },
             { title: "use highlighter", icon: "highlighter", pointerUp: "resetPen()", pointerDown: 'setPen(20, this.backgroundColor)', backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
-            { title: "notepad", icon: "clipboard", pointerUp: "GestureOverlay.Instance.closeFloatingDoc()", pointerDown: 'GestureOverlay.Instance.openFloatingDoc(this.clipboard)', clipboard: Docs.Create.FreeformDocument([], { width: 300, height: 300 }), backgroundColor: "yellow", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { title: "notepad", icon: "clipboard", pointerUp: "GestureOverlay.Instance.closeFloatingDoc()", pointerDown: 'GestureOverlay.Instance.openFloatingDoc(this.clipboard)', clipboard: Docs.Create.FreeformDocument([], { width: 300, height: 300 }), backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
+            { title: "interpret text", icon: "font", pointerUp: "setToolglass('none')", pointerDown: "setToolglass('inktotext')", clipboard: Docs.Create.FreeformDocument([], { width: 300, height: 300 }), backgroundColor: "orange", ischecked: `sameDocs(this.activePen.pen, this)`, activePen: doc },
         ];
         return docProtoData.map(data => Docs.Create.FontIconDocument({
             nativeWidth: 10, nativeHeight: 10, width: 10, height: 10, dropAction: data.pointerDown ? "copy" : undefined, title: data.title, icon: data.icon, ignoreClick: data.ignoreClick,
-- 
cgit v1.2.3-70-g09d2