From 461af95c312fc7aff85551c014fb93dc7a89cecd Mon Sep 17 00:00:00 2001 From: kimdahey Date: Sun, 10 Nov 2019 16:28:48 -0500 Subject: first commit --- src/client/util/SettingsManager.tsx | 58 +++++++++++++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 src/client/util/SettingsManager.tsx (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx new file mode 100644 index 000000000..5bcfd2449 --- /dev/null +++ b/src/client/util/SettingsManager.tsx @@ -0,0 +1,58 @@ +import { observable, runInAction, action } from "mobx"; +import * as React from "react"; +import MainViewModal from "../views/MainViewModal"; +import { observer } from "mobx-react"; +import { library } from '@fortawesome/fontawesome-svg-core'; +import * as fa from '@fortawesome/free-solid-svg-icons'; +import { DocumentView } from "../views/nodes/DocumentView"; +import { SelectionManager } from "./SelectionManager"; + +library.add(fa.faCopy); + +@observer +export default class SettingsManager extends React.Component<{}> { + public static Instance: SettingsManager; + @observable private isOpen = false; + @observable private dialogueBoxOpacity = 1; + @observable private overlayOpacity = 0.4; + + public open = action(() => { + SelectionManager.DeselectAll(); + this.isOpen = true; + console.log('oppin'); + }); + + // public open = (target: DocumentView) => { + // SelectionManager.DeselectAll(); + // } + + public close = action(() => { + this.isOpen = false; + }); + + constructor(props: {}) { + super(props); + SettingsManager.Instance = this; + } + + private get settingsInterface() { + return ( +
+

sdfsldkfhlksdjf

+
+ ); + } + + render() { + return ( + + ); + } + +} \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 272bc257aba8bd2f1ac2e1f3248c482c4da7edcb Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 12 Nov 2019 17:22:42 -0500 Subject: fixed button issue --- src/client/util/SettingsManager.scss | 55 ++++++++++++++++++++++++++++++++++++ src/client/util/SettingsManager.tsx | 8 ++---- src/client/views/MainView.scss | 37 ++++++++++++++++++------ 3 files changed, 86 insertions(+), 14 deletions(-) create mode 100644 src/client/util/SettingsManager.scss (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss new file mode 100644 index 000000000..2b3e455e0 --- /dev/null +++ b/src/client/util/SettingsManager.scss @@ -0,0 +1,55 @@ +.settings-interface { + display: flex; + flex-direction: column; + + .focus-span { + text-decoration: underline; + } + + p { + font-size: 20px; + text-align: left; + font-style: italic; + padding: 0; + margin: 0 0 20px 0; + } + + .container { + display: block; + position: relative; + margin-top: 10px; + margin-bottom: 10px; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + width: 700px; + min-width: 700px; + max-width: 700px; + text-align: left; + font-style: normal; + font-size: 15; + font-weight: normal; + padding: 0; + + .padding { + padding: 0 0 0 20px; + color: black; + } + + .close-button { + border-radius: 5px; + margin-top: 20px; + padding: 10px 0; + background: aliceblue; + transition: 0.5s ease all; + border: 1px solid; + border-color: aliceblue; + } + + .close-button:hover { + border-color: black; + } + } +} \ No newline at end of file diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 5bcfd2449..4701c5f88 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -4,8 +4,8 @@ import MainViewModal from "../views/MainViewModal"; import { observer } from "mobx-react"; import { library } from '@fortawesome/fontawesome-svg-core'; import * as fa from '@fortawesome/free-solid-svg-icons'; -import { DocumentView } from "../views/nodes/DocumentView"; import { SelectionManager } from "./SelectionManager"; +import "./SettingsManager.scss"; library.add(fa.faCopy); @@ -19,13 +19,8 @@ export default class SettingsManager extends React.Component<{}> { public open = action(() => { SelectionManager.DeselectAll(); this.isOpen = true; - console.log('oppin'); }); - // public open = (target: DocumentView) => { - // SelectionManager.DeselectAll(); - // } - public close = action(() => { this.isOpen = false; }); @@ -39,6 +34,7 @@ export default class SettingsManager extends React.Component<{}> { return (

sdfsldkfhlksdjf

+
Done
); } diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss index a858a73c7..a940e6889 100644 --- a/src/client/views/MainView.scss +++ b/src/client/views/MainView.scss @@ -4,8 +4,9 @@ .mainView-tabButtons { position: relative; - width:100%; + width: 100%; } + // add nodes menu. Note that the + button is actually an input label, not an actual button. .mainView-docButtons { position: absolute; @@ -22,21 +23,25 @@ overflow: auto; z-index: 1; } + .mainView-mainContent { - width:100%; - height:100%; - position:absolute; + width: 100%; + height: 100%; + position: absolute; } -.mainView-flyoutContainer{ - display:flex; + +.mainView-flyoutContainer { + display: flex; flex-direction: column; position: absolute; - width:100%; - height:100%; + width: 100%; + height: 100%; + .documentView-node-topmost { background: lightgrey; } } + .mainView-mainDiv { width: 100%; height: 100%; @@ -46,6 +51,18 @@ overflow: hidden; } + +.mainView-settings { + position: absolute; + left: 0; + bottom: 0; + font-size: 8px; +} + +.mainView-settings:hover { + transform: none !important; +} + .mainView-logout { position: absolute; right: 0; @@ -53,6 +70,10 @@ font-size: 8px; } +.mainView-logout:hover { + transform: none !important; +} + .mainView-libraryFlyout { height: 100%; position: absolute; -- cgit v1.2.3-70-g09d2 From 79260cec351f1f76505c44c338222082dc4a666e Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 12 Nov 2019 18:54:17 -0500 Subject: css changes --- src/client/util/SettingsManager.scss | 35 ++++++++++++++++++++--------------- src/client/util/SettingsManager.tsx | 19 ++++++++++++++++--- 2 files changed, 36 insertions(+), 18 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 2b3e455e0..1e44a6a3c 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -1,19 +1,35 @@ +@import "../views/globalCssVariables"; + .settings-interface { display: flex; - flex-direction: column; .focus-span { text-decoration: underline; } p { - font-size: 20px; text-align: left; - font-style: italic; padding: 0; margin: 0 0 20px 0; } + h1 { + color: $dark-color; + text-transform: uppercase; + letter-spacing: 2px; + font-size: 75%; + } + + .close-button { + position: absolute; + right: 0; + top: 0; + } + + .close-button:hover { + border-color: black; + } + .container { display: block; position: relative; @@ -38,18 +54,7 @@ color: black; } - .close-button { - border-radius: 5px; - margin-top: 20px; - padding: 10px 0; - background: aliceblue; - transition: 0.5s ease all; - border: 1px solid; - border-color: aliceblue; - } - .close-button:hover { - border-color: black; - } + } } \ No newline at end of file diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 4701c5f88..ca9124ef6 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -6,8 +6,9 @@ import { library } from '@fortawesome/fontawesome-svg-core'; import * as fa from '@fortawesome/free-solid-svg-icons'; import { SelectionManager } from "./SelectionManager"; import "./SettingsManager.scss"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -library.add(fa.faCopy); +library.add(fa.faWindowClose); @observer export default class SettingsManager extends React.Component<{}> { @@ -33,8 +34,20 @@ export default class SettingsManager extends React.Component<{}> { private get settingsInterface() { return (
-

sdfsldkfhlksdjf

-
Done
+
+ +
+

settings

+ +
toggle + second toggle +
+
hellow + heree + s + a + lot of information hahahahahahahah +
); } -- cgit v1.2.3-70-g09d2 From b4a23b21bbe0a44df1328419c7d94b97a772e54f Mon Sep 17 00:00:00 2001 From: kimdahey Date: Tue, 19 Nov 2019 19:06:47 -0500 Subject: progress w password --- src/client/util/SettingsManager.scss | 37 +++++++++++++++++++++++------------ src/client/util/SettingsManager.tsx | 38 ++++++++++++++++++++++++------------ src/server/index.ts | 10 ++++++++++ 3 files changed, 61 insertions(+), 24 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 1e44a6a3c..cd9d2569a 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -2,16 +2,33 @@ .settings-interface { display: flex; + flex-direction: column; - .focus-span { - text-decoration: underline; + .settings-body { + display: flex; + flex-direction: row; + + .settings-type { + display: flex; + flex-direction: column; + flex-basis: 30%; + } + + .settings-content { + padding-left: 1em; + display: flex; + justify-content: space-between; + } } - p { - text-align: left; - padding: 0; - margin: 0 0 20px 0; + .focus-span { + text-decoration: underline; } +p { + text-align: left; + padding: 0; + margin: 0 0 20px 0; +} h1 { color: $dark-color; @@ -22,12 +39,8 @@ .close-button { position: absolute; - right: 0; - top: 0; - } - - .close-button:hover { - border-color: black; + right: 1em; + top: 1em; } .container { diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index ca9124ef6..c7d4d1786 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -7,6 +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"; library.add(fa.faWindowClose); @@ -16,6 +17,7 @@ export default class SettingsManager extends React.Component<{}> { @observable private isOpen = false; @observable private dialogueBoxOpacity = 1; @observable private overlayOpacity = 0.4; + private curr_password_ref = React.createRef(); public open = action(() => { SelectionManager.DeselectAll(); @@ -31,23 +33,35 @@ export default class SettingsManager extends React.Component<{}> { SettingsManager.Instance = this; } + private dispatchRequest = async () => { + const curr_pass = this.curr_password_ref.current!.value; + const { error: resultError, ...others } = await Identified.PostToServer('/internalResetPassword', { curr_pass }); + if (resultError) { + // we failed + } + // do stuff with response + } + private get settingsInterface() { return (
-
- +
+

settings

+
+ +
-

settings

- -
toggle - second toggle -
-
hellow - heree - s - a - lot of information hahahahahahahah +
+
+

changeable settings

+

static data

+
+
+ + this changes with what you select! +
+
); } 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([ ["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 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/client/util') 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(); + private new_password_ref = React.createRef(); + private new_confirm_ref = React.createRef(); 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<{}> {

static data

- + + + + this changes with what you select!
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>(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 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/client/util') 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<{}> {
-

changeable settings

-

static data

+ +
- - - + + + this changes with what you select!
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>(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 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/client/util') 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(); private new_password_ref = React.createRef(); private new_confirm_ref = React.createRef(); @@ -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<{}> {
-
- - - - - this changes with what you select! -
+ {this.settingsContent === "settings" ? +
+ change password here: + + + + {this.errorText ?
{this.errorText}
: undefined} + {this.successText ?
{this.successText}
: undefined} + + +
+ : +
hello?
} 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>(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 4e3037dac61105f01397d55febb38b2d5bfa50f1 Mon Sep 17 00:00:00 2001 From: kimdahey 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/client/util') 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 ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} + forgot password? : 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 5cde81d8c6b4dcd8d0796f8669b668763957f395 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Sat, 7 Dec 2019 18:30:54 -0500 Subject: pushing commit for today --- src/client/util/SettingsManager.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 4872d7280..652af438b 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -17,7 +17,7 @@ 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 settingsContent = "password"; @observable private errorText = ""; @observable private successText = ""; private curr_password_ref = React.createRef(); @@ -86,10 +86,10 @@ export default class SettingsManager extends React.Component<{}> {
- - + +
- {this.settingsContent === "settings" ? + {this.settingsContent === "password" ?
change password here: @@ -97,12 +97,12 @@ export default class SettingsManager extends React.Component<{}> { {this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} - - forgot password? - + forgot password?
- : -
hello?
} + : undefined} + {this.settingsContent === "data" ? +
hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
+ : undefined}
-- cgit v1.2.3-70-g09d2 From d86b4db095379d473820271868e8f7cd5830d502 Mon Sep 17 00:00:00 2001 From: Stanley Yip 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/client/util') 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; + 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): React.Touch[] { + export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map, ignorePen: boolean): React.Touch[] { const myTouches = new Array(); 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 = ; + } + + 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 ( - {CreatePolyline(this._points, B.left, B.top)} + {CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)} ); } render() { return ( -
+
{this.props.children} + {this._palette} {this.currentStroke}
); } -} \ 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 { render() { return (
-
console.log("hi")}>1
-
2
-
3
+ 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}> +
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 extends React.Component { */ @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 extends React.Component { */ @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 extends React.Component { } } if (this.holdTimer) { - console.log("clear"); clearTimeout(this.holdTimer); this.holdTimer = undefined; } @@ -152,7 +161,7 @@ export abstract class Touchable extends React.Component { } 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 = ; - - 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 = ; + // } + + // 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(); 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(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(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(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(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(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(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(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(["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 de0c00ff0bb1f58a0736da24acc984f5a090d009 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Tue, 14 Jan 2020 18:35:28 -0500 Subject: ok we now use custom events for touch. im struggling with figuring out how to ignore a hand lol --- src/client/util/InteractionUtils.ts | 50 ++++++- src/client/views/CollectionLinearView.tsx | 4 +- src/client/views/GestureOverlay.tsx | 160 +++++++++++++++++++-- src/client/views/Touchable.tsx | 114 ++++++++++----- .../views/collections/CollectionStackingView.tsx | 6 +- src/client/views/collections/CollectionSubView.tsx | 8 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 80 ++++++----- src/client/views/nodes/DocumentView.tsx | 32 +++-- src/pen-gestures/GestureUtils.ts | 2 +- 9 files changed, 344 insertions(+), 112 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts index 76b43da3c..63ee2fb92 100644 --- a/src/client/util/InteractionUtils.ts +++ b/src/client/util/InteractionUtils.ts @@ -8,13 +8,53 @@ export namespace InteractionUtils { const REACT_POINTER_PEN_BUTTON = 0; const ERASER_BUTTON = 5; + export class MultiTouchEvent { + constructor( + readonly fingers: number, + readonly points: T extends React.TouchEvent ? React.TouchList : TouchList, + readonly touchEvent: T extends React.TouchEvent ? React.TouchEvent : TouchEvent + ) { } + } + + export interface MultiTouchEventDisposer { (): void; } + + export function MakeMultiTouchTarget( + element: HTMLElement, + startFunc: (e: Event, me: MultiTouchEvent) => void, + ): MultiTouchEventDisposer { + const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent>).detail); + // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent>).detail) : undefined; + // const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent>).detail) : undefined; + element.addEventListener("dashOnTouchStart", onMultiTouchStartHandler); + // if (onMultiTouchMoveHandler) { + // element.addEventListener("dashOnTouchMove", onMultiTouchMoveHandler); + // } + // if (onMultiTouchEndHandler) { + // element.addEventListener("dashOnTouchEnd", onMultiTouchEndHandler); + // } + return () => { + element.removeEventListener("dashOnTouchStart", onMultiTouchStartHandler); + // if (onMultiTouchMoveHandler) { + // element.removeEventListener("dashOnTouchMove", onMultiTouchMoveHandler); + // } + // if (onMultiTouchEndHandler) { + // element.removeEventListener("dashOnTouchend", onMultiTouchEndHandler); + // } + }; + } + export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map, ignorePen: boolean): React.Touch[] { const myTouches = new Array(); - for (let i = 0; i < e.targetTouches.length; i++) { - const pt: any = e.targetTouches.item(i); - if (pt && prevPoints.has(pt.identifier)) { - if (ignorePen || (pt.radiusX > 1 && pt.radiusY > 1)) { - myTouches.push(pt); + for (let i = 0; i < e.touches.length; i++) { + const pt: any = e.touches.item(i); + if (ignorePen || (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 && prevPoints.has(pt.identifier)) { + myTouches.push(pt); + } + } } } } diff --git a/src/client/views/CollectionLinearView.tsx b/src/client/views/CollectionLinearView.tsx index 5d6a58656..38f2decdd 100644 --- a/src/client/views/CollectionLinearView.tsx +++ b/src/client/views/CollectionLinearView.tsx @@ -36,7 +36,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { { fireImmediately: true } ); } - protected createDropAndGestureTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view + protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view this._dropDisposer && this._dropDisposer(); if (ele) { this._dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)); @@ -55,7 +55,7 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) { render() { const guid = Utils.GenerateGuid(); return
-
+
this.props.Document.isExpanded = this.addMenuToggle.current!.checked)} /> diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 830c06f1f..a5fba362c 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -1,7 +1,7 @@ import React = require("react"); import { Touchable } from "./Touchable"; import { observer } from "mobx-react"; -import "./GestureOverlay.scss" +import "./GestureOverlay.scss"; import { computed, observable, action, runInAction } from "mobx"; import { CreatePolyline } from "./InkingStroke"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; @@ -16,6 +16,7 @@ import { Scripting } from "../util/Scripting"; import { FieldValue, Cast } from "../../new_fields/Types"; import { CurrentUserUtils } from "../../server/authentication/models/current_user_utils"; import Palette from "./Palette"; +import { Utils } from "../../Utils"; @observer export default class GestureOverlay extends Touchable { @@ -28,6 +29,9 @@ export default class GestureOverlay extends Touchable { private _d1: Doc | undefined; private thumbIdentifier?: number; + private _hands: (React.Touch[])[] = []; + + protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; constructor(props: Readonly<{}>) { super(props); @@ -35,11 +39,143 @@ export default class GestureOverlay extends Touchable { GestureOverlay.Instance = this; } - @action + getNewTouches(e: React.TouchEvent | TouchEvent) { + const ntt: (React.Touch | Touch)[] = []; + const nct: (React.Touch | Touch)[] = []; + const nt: (React.Touch | Touch)[] = []; + 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); + } + } + + 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); + } + } + + for (let i = 0; i < e.changedTouches.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); + } + } + }); + return { ntt, nct, nt }; + } + + onReactTouchStart = (te: React.TouchEvent) => { + const actualPts: React.Touch[] = []; + for (let i = 0; i < te.touches.length; i++) { + const pt: any = te.touches.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 > 1 && pt.radiusY > 1) { + // if (typeof pt.identifier !== "string") { + // pt.identifier = Utils.GenerateGuid(); + // } + 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 && this.prevPoints.size < 5) { + const nts: any = this.getNewTouches(te); + const target = document.elementFromPoint(te.changedTouches.item(0).clientX, te.changedTouches.item(0).clientY); + target?.dispatchEvent( + new CustomEvent>("dashOnTouchStart", + { + bubbles: true, + detail: { + fingers: this.prevPoints.size, + points: te.targetTouches, + touchEvent: new React.TouchEvent("start", { + targetTouches: nts.ntt, + touches: nts.nt, + changedTouches: nts.nct + }); + } + } + ) + ); + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + document.addEventListener("touchmove", this.onReactTouchMove); + document.addEventListener("touchend", this.onReactTouchEnd); + } + else { + this.handleHandDown(te); + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + } + } + + onReactTouchMove = (e: TouchEvent) => { + const nts: any = this.getNewTouches(e); + document.dispatchEvent( + new CustomEvent>("dashOnTouchMove", + { + bubbles: true, + detail: { + fingers: this.prevPoints.size, + points: e.touches, + touchEvent: new TouchEvent("move", { + targetTouches: nts.ntt, + changedTouches: nts.nct, + touches: nts.nt, + }) + } + }) + ); + } + + onReactTouchEnd = (e: TouchEvent) => { + document.dispatchEvent( + new CustomEvent>("dashOnTouchEnd", + { + bubbles: true, + detail: { + fingers: this.prevPoints.size, + points: e.touches, + touchEvent: e + } + }) + ); + for (let i = 0; i < e.changedTouches.length; i++) { + const pt = e.changedTouches.item(i); + if (pt) { + if (this.prevPoints.has(pt.identifier)) { + this.prevPoints.delete(pt.identifier); + } + } + } + + if (this.prevPoints.size === 0) { + document.removeEventListener("touchmove", this.onReactTouchMove); + document.removeEventListener("touchend", this.onReactTouchEnd); + } + e.stopPropagation(); + } + 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; + fingers.forEach((f) => this.prevPoints.delete(f.identifier)); + this._hands.push(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)); @@ -48,10 +184,12 @@ export default class GestureOverlay extends Touchable { const thumbDoc = FieldValue(Cast(CurrentUserUtils.setupThumbDoc(CurrentUserUtils.UserDocument), Doc)); if (thumbDoc) { - this._palette = ; + runInAction(() => { + this._palette = ; + }); } - document.removeEventListener("touchmove", this.onTouch); + this.removeMoveListeners(); document.removeEventListener("touchmove", this.handleHandMove); document.addEventListener("touchmove", this.handleHandMove); document.removeEventListener("touchend", this.handleHandUp); @@ -69,11 +207,9 @@ export default class GestureOverlay extends Touchable { @action handleHandUp = (e: TouchEvent) => { - this.onTouchEnd(e); - if (this.prevPoints.size < 3) { - this._palette = undefined; - document.removeEventListener("touchend", this.handleHandUp); - } + // this.onTouchEnd(e); + this._palette = undefined; + document.removeEventListener("touchend", this.handleHandUp); } @action @@ -115,7 +251,7 @@ export default class GestureOverlay extends Touchable { DocUtils.MakeLink({ doc: this._d1 }, { doc: doc }); actionPerformed = true; } - } + }; const ge = new CustomEvent("dashOnGesture", { bubbles: true, @@ -181,7 +317,7 @@ export default class GestureOverlay extends Touchable { } } ) - ) + ); this._points = []; } } @@ -215,7 +351,7 @@ export default class GestureOverlay extends Touchable { render() { return ( -
+
{this.props.children} {this._palette} {this.currentStroke} diff --git a/src/client/views/Touchable.tsx b/src/client/views/Touchable.tsx index 2a7599fbf..a71015b05 100644 --- a/src/client/views/Touchable.tsx +++ b/src/client/views/Touchable.tsx @@ -8,8 +8,11 @@ const HOLD_DURATION = 1000; export abstract class Touchable extends React.Component { //private holdTimer: NodeJS.Timeout | undefined; - holdTimer: NodeJS.Timeout | undefined; + private holdTimer: NodeJS.Timeout | undefined; + private moveDisposer?: InteractionUtils.MultiTouchEventDisposer; + private endDisposer?: InteractionUtils.MultiTouchEventDisposer; + protected abstract multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; protected _touchDrag: boolean = false; protected prevPoints: Map = new Map(); @@ -22,16 +25,27 @@ export abstract class Touchable extends React.Component { * When a touch even starts, we keep track of each touch that is associated with that event */ @action - protected onTouchStart = (e: React.TouchEvent): void => { + protected onTouchStart = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { const actualPts: React.Touch[] = []; - for (let i = 0; i < e.targetTouches.length; i++) { - const pt: any = e.targetTouches.item(i); + 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); 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 > 1 && pt.radiusY > 1) { + 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); + 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 + if (pt.radiusX > 1 && pt.radiusY > 1) { + this.prevPoints.set(pt.identifier, pt); + } + } + } } const ptsToDelete: number[] = []; @@ -41,26 +55,30 @@ export abstract class Touchable extends React.Component { } }); + // 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(e); - e.persist(); + this.handle1PointerDown(te); + te.persist(); // if (this.holdTimer) { // clearTimeout(this.holdTimer) // this.holdTimer = undefined; // } - this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(e), HOLD_DURATION); + this.holdTimer = setTimeout(() => this.handle1PointerHoldStart(te), HOLD_DURATION); + // e.stopPropagation(); // console.log(this.holdTimer); break; case 2: - this.handle2PointersDown(e); - break; - case 5: - this.handleHandDown(e); + this.handle2PointersDown(te); + // e.stopPropagation(); break; + // case 5: + // this.handleHandDown(te); + // break; } } } @@ -69,28 +87,30 @@ export abstract class Touchable extends React.Component { * Handle touch move event */ @action - protected onTouch = (e: TouchEvent): void => { - const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true); + protected onTouch = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { + const te = me.touchEvent; + const myTouches = InteractionUtils.GetMyTargetTouches(te, 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") + console.log("CLEAR"); clearTimeout(this.holdTimer); // this.holdTimer = undefined; } + // console.log(myTouches.length); switch (myTouches.length) { case 1: - this.handle1PointerMove(e); + this.handle1PointerMove(te); break; case 2: - this.handle2PointersMove(e); + this.handle2PointersMove(te); break; } - for (let i = 0; i < e.targetTouches.length; i++) { - const pt = e.targetTouches.item(i); + for (let i = 0; i < te.touches.length; i++) { + const pt = te.touches.item(i); if (pt) { if (this.prevPoints.has(pt.identifier)) { this.prevPoints.set(pt.identifier, pt); @@ -100,11 +120,12 @@ export abstract class Touchable extends React.Component { } @action - protected onTouchEnd = (e: TouchEvent): void => { + protected onTouchEnd = (e: Event, me: InteractionUtils.MultiTouchEvent): void => { // console.log(InteractionUtils.GetMyTargetTouches(e, this.prevPoints).length + " up"); // remove all the touches associated with the event - for (let i = 0; i < e.changedTouches.length; i++) { - const pt = e.changedTouches.item(i); + const te = me.touchEvent; + for (let i = 0; i < te.changedTouches.length; i++) { + const pt = te.changedTouches.item(i); if (pt) { if (this.prevPoints.has(pt.identifier)) { this.prevPoints.delete(pt.identifier); @@ -116,7 +137,7 @@ export abstract class Touchable extends React.Component { console.log("clear"); } this._touchDrag = false; - e.stopPropagation(); + te.stopPropagation(); // if (e.targetTouches.length === 0) { @@ -126,11 +147,12 @@ export abstract class Touchable extends React.Component { if (this.prevPoints.size === 0) { this.cleanUpInteractions(); } + e.stopPropagation(); } cleanUpInteractions = (): void => { - document.removeEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.removeEndListeners(); } handle1PointerMove = (e: TouchEvent): any => { @@ -144,23 +166,43 @@ export abstract class Touchable extends React.Component { } handle1PointerDown = (e: React.TouchEvent): any => { - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); } handle2PointersDown = (e: React.TouchEvent): any => { - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); } handle1PointerHoldStart = (e: React.TouchEvent): any => { e.stopPropagation(); e.preventDefault(); - document.removeEventListener("touchmove", this.onTouch); + this.removeMoveListeners(); + } + + addMoveListeners = () => { + const handler = (e: Event) => this.onTouch(e, (e as CustomEvent>).detail); + document.addEventListener("dashOnTouchMove", handler); + this.moveDisposer = () => document.removeEventListener("dashOnTouchMove", handler); + } + + removeMoveListeners = () => { + this.moveDisposer && this.moveDisposer(); + } + + addEndListeners = () => { + const handler = (e: Event) => this.onTouchEnd(e, (e as CustomEvent>).detail); + document.addEventListener("dashOnTouchEnd", handler); + this.endDisposer = () => document.removeEventListener("dashOnTouchEnd", handler); + } + + removeEndListeners = () => { + this.endDisposer && this.endDisposer(); } handleHandDown = (e: React.TouchEvent) => { diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx index 992820fc7..b8423af20 100644 --- a/src/client/views/collections/CollectionStackingView.tsx +++ b/src/client/views/collections/CollectionStackingView.tsx @@ -153,7 +153,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { } createRef = (ele: HTMLDivElement | null) => { this._masonryGridRef = ele; - this.createDropAndGestureTarget(ele!); //so the whole grid is the drop target? + this.createDashEventsTarget(ele!); //so the whole grid is the drop target? } overlays = (doc: Doc) => { @@ -309,7 +309,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { docList={docList} parent={this} type={type} - createDropTarget={this.createDropAndGestureTarget} + createDropTarget={this.createDashEventsTarget} screenToLocalTransform={this.props.ScreenToLocalTransform} />; } @@ -342,7 +342,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) { docList={docList} parent={this} type={type} - createDropTarget={this.createDropAndGestureTarget} + createDropTarget={this.createDashEventsTarget} screenToLocalTransform={this.props.ScreenToLocalTransform} setDocHeight={this.setDocHeight} />; diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx index 73dc7edc6..4133956fc 100644 --- a/src/client/views/collections/CollectionSubView.tsx +++ b/src/client/views/collections/CollectionSubView.tsx @@ -24,6 +24,7 @@ import { GooglePhotos } from "../../apis/google_docs/GooglePhotosClientUtils"; import { ImageUtils } from "../../util/Import & Export/ImageUtils"; import { Networking } from "../../Network"; import { GestureUtils } from "../../../pen-gestures/GestureUtils"; +import { InteractionUtils } from "../../util/InteractionUtils"; export interface CollectionViewProps extends FieldViewProps { addDocument: (document: Doc) => boolean; @@ -49,17 +50,20 @@ export function CollectionSubView(schemaCtor: (doc: Doc) => T) { class CollectionSubView extends DocComponent(schemaCtor) { private dropDisposer?: DragManager.DragDropDisposer; private gestureDisposer?: GestureUtils.GestureEventDisposer; + protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; private _childLayoutDisposer?: IReactionDisposer; - protected createDropAndGestureTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view + protected createDashEventsTarget = (ele: HTMLDivElement) => { //used for stacking and masonry view this.dropDisposer && this.dropDisposer(); this.gestureDisposer && this.gestureDisposer(); + this.multiTouchDisposer && this.multiTouchDisposer(); if (ele) { this.dropDisposer = DragManager.MakeDropTarget(ele, this.drop.bind(this)); this.gestureDisposer = GestureUtils.MakeGestureTarget(ele, this.onGesture.bind(this)); + this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(ele, this.onTouchStart.bind(this)); } } protected CreateDropTarget(ele: HTMLDivElement) { //used in schema view - this.createDropAndGestureTarget(ele); + this.createDashEventsTarget(ele); } componentDidMount() { diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 84945c6e6..3894e9d63 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -326,29 +326,30 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { @action handle1PointerDown = (e: React.TouchEvent) => { - const pt = e.targetTouches.item(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)) { - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); - // if (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen) { - // e.stopPropagation(); - // e.preventDefault(); - // const point = this.getTransform().transformPoint(pt.pageX, pt.pageY); - // this._points.push({ X: point[0], Y: point[1] }); - // } - if (InkingControl.Instance.selectedTool === InkTool.None) { - this._lastX = pt.pageX; - this._lastY = pt.pageY; - e.stopPropagation(); - e.preventDefault(); - } - else { - e.stopPropagation(); - e.preventDefault(); + if (!e.nativeEvent.cancelBubble) { + // const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true); + const pt = e.changedTouches.item(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)) { + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); + // if (InkingControl.Instance.selectedTool === InkTool.Highlighter || InkingControl.Instance.selectedTool === InkTool.Pen) { + // e.stopPropagation(); + // e.preventDefault(); + // const point = this.getTransform().transformPoint(pt.pageX, pt.pageY); + // this._points.push({ X: point[0], Y: point[1] }); + // } + if (InkingControl.Instance.selectedTool === InkTool.None) { + this._lastX = pt.pageX; + this._lastY = pt.pageY; + e.preventDefault(); + } + else { + e.preventDefault(); + } } } } @@ -395,8 +396,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); - document.removeEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.removeEndListeners(); } @action @@ -482,7 +483,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { this.pan(pt); } } - e.stopPropagation(); + // e.stopPropagation(); e.preventDefault(); } } @@ -527,7 +528,7 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { } } } - e.stopPropagation(); + // e.stopPropagation(); e.preventDefault(); } } @@ -535,18 +536,21 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { @action handle2PointersDown = (e: 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 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 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; - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); e.stopPropagation(); } } @@ -554,8 +558,8 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { cleanUpInteractions = () => { document.removeEventListener("pointermove", this.onPointerMove); document.removeEventListener("pointerup", this.onPointerUp); - document.removeEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.removeEndListeners(); } @action @@ -989,9 +993,9 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) { // otherwise, they are stored in fieldKey. All annotations to this document are stored in the extension document if (!this.extensionDoc) return (null); // let lodarea = this.Document[WidthSym]() * this.Document[HeightSym]() / this.props.ScreenToLocalTransform().Scale / this.props.ScreenToLocalTransform().Scale; - return
+ onPointerDown={this.onPointerDown} onPointerMove={this.onCursorMove} onDrop={this.onDrop.bind(this)} onContextMenu={this.onContextMenu}> {!this.Document.LODdisable && !this.props.active() && !this.props.isAnnotationOverlay && !this.props.annotationsKey && this.props.renderDepth > 0 ? // && this.props.CollectionView && lodarea < NumCast(this.Document.LODarea, 100000) ? this.placeholder : this.marqueeView} diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 2e0ae09ba..b33bebe7d 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -103,6 +103,8 @@ export class DocumentView extends DocComponent(Docu private _gestureEventDisposer?: GestureUtils.GestureEventDisposer; private _titleRef = React.createRef(); + protected multiTouchDisposer?: InteractionUtils.MultiTouchEventDisposer; + public get displayName() { return "DocumentView(" + this.props.Document.title + ")"; } // this makes mobx trace() statements more descriptive public get ContentDiv() { return this._mainCont.current; } @computed get active() { return SelectionManager.IsSelected(this, true) || this.props.parentActive(true); } @@ -177,6 +179,7 @@ export class DocumentView extends DocComponent(Docu componentDidMount() { this._mainCont.current && (this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this))); this._mainCont.current && (this._gestureEventDisposer = GestureUtils.MakeGestureTarget(this._mainCont.current, this.onGesture.bind(this))); + this._mainCont.current && (this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this))); !this.props.dontRegisterView && DocumentManager.Instance.DocumentViews.push(this); } @@ -184,7 +187,11 @@ export class DocumentView extends DocComponent(Docu @action componentDidUpdate() { this._dropDisposer && this._dropDisposer(); + this._gestureEventDisposer && this._gestureEventDisposer(); + this.multiTouchDisposer && this.multiTouchDisposer(); this._mainCont.current && (this._dropDisposer = DragManager.MakeDropTarget(this._mainCont.current, this.drop.bind(this))); + this._mainCont.current && (this._gestureEventDisposer = GestureUtils.MakeGestureTarget(this._mainCont.current, this.onGesture.bind(this))); + this._mainCont.current && (this.multiTouchDisposer = InteractionUtils.MakeMultiTouchTarget(this._mainCont.current, this.onTouchStart.bind(this))); } @action @@ -319,25 +326,24 @@ export class DocumentView extends DocComponent(Docu } } if ((this.active || this.Document.onDragStart || this.Document.onClick) && !e.ctrlKey && !this.Document.lockedPosition && !this.Document.inOverlay) e.stopPropagation(); - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); - if ((e.nativeEvent as any).formattedHandled) e.stopPropagation(); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); + e.stopPropagation(); } } handle1PointerMove = (e: TouchEvent) => { if ((e as any).formattedHandled) { e.stopPropagation; return; } if (e.cancelBubble && this.active) { - document.removeEventListener("touchmove", this.onTouch); + 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]; 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); - document.removeEventListener("touchend", this.onTouchEnd); + this.cleanUpInteractions(); this.startDragging(this._downX, this._downY, this.Document.dropAction ? this.Document.dropAction as any : e.ctrlKey || e.altKey ? "alias" : undefined, this._hitTemplateDrag); } } @@ -352,10 +358,10 @@ export class DocumentView extends DocComponent(Docu e.stopPropagation(); e.preventDefault(); - document.removeEventListener("touchmove", this.onTouch); - document.addEventListener("touchmove", this.onTouch); - document.removeEventListener("touchend", this.onTouchEnd); - document.addEventListener("touchend", this.onTouchEnd); + this.removeMoveListeners(); + this.addMoveListeners(); + this.removeEndListeners(); + this.addEndListeners(); } } @@ -970,7 +976,7 @@ export class DocumentView extends DocComponent(Docu width: animwidth, height: animheight, opacity: this.Document.opacity - }} onTouchStart={this.onTouchStart}> + }}> {this.innards}
; } diff --git a/src/pen-gestures/GestureUtils.ts b/src/pen-gestures/GestureUtils.ts index 062604458..4b5ad6684 100644 --- a/src/pen-gestures/GestureUtils.ts +++ b/src/pen-gestures/GestureUtils.ts @@ -31,7 +31,7 @@ export namespace GestureUtils { element.addEventListener("dashOnGesture", handler); return () => { element.removeEventListener("dashOnGesture", handler); - } + }; } export enum Gestures { -- cgit v1.2.3-70-g09d2 From 19be14b5807b117f477b57b9ecc7b96247bf4fef Mon Sep 17 00:00:00 2001 From: Stanley Yip 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/client/util') 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 { 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, ignorePen: boolean): React.Touch[] { + export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent, prevPoints: Map, ignorePen: boolean): React.Touch[] { const myTouches = new Array(); - 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(); + @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) {
- {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(); const nativeWidth = NumCast(pair.layout.nativeWidth, this.dimension()); const deltaSize = nativeWidth * .15 / 2; + const isSelected = this._selectedIndex === ind; return
{ 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>("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>("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 { + render() { return (
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 extends React.Component { 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 extends React.Component { // 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 extends React.Component { @action protected onTouch = (e: Event, me: InteractionUtils.MultiTouchEvent): 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 extends React.Component { // 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 extends React.Component { // 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 extends React.Component { this.removeEndListeners(); } - handle1PointerMove = (e: TouchEvent): any => { + handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent): any => { e.stopPropagation(); e.preventDefault(); } - handle2PointersMove = (e: TouchEvent): any => { + handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent): any => { e.stopPropagation(); e.preventDefault(); } - handle1PointerDown = (e: React.TouchEvent): any => { + handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent): any => { this.removeMoveListeners(); this.addMoveListeners(); this.removeEndListeners(); this.addEndListeners(); } - handle2PointersDown = (e: React.TouchEvent): any => { + handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent): any => { this.removeMoveListeners(); this.addMoveListeners(); this.removeEndListeners(); this.addEndListeners(); } - handle1PointerHoldStart = (e: React.TouchEvent): any => { + handle1PointerHoldStart = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent): 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) => { 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) => { // 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) => { // 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) => { 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(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(Docu } } - handle1PointerDown = (e: React.TouchEvent) => { + handle1PointerDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { 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(Docu } } - handle1PointerMove = (e: TouchEvent) => { + handle1PointerMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { 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(Docu } } - handle2PointersDown = (e: React.TouchEvent) => { + handle2PointersDown = (e: React.TouchEvent, me: InteractionUtils.MultiTouchEvent) => { if (!e.nativeEvent.cancelBubble && !this.isSelected()) { e.stopPropagation(); e.preventDefault(); @@ -366,8 +366,8 @@ export class DocumentView extends DocComponent(Docu } @action - handle2PointersMove = (e: TouchEvent) => { - const myTouches = InteractionUtils.GetMyTargetTouches(e, this.prevPoints, true); + handle2PointersMove = (e: TouchEvent, me: InteractionUtils.MultiTouchEvent) => { + 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 42b325a94f66e6da0a9fdb0ca0740c01ac7b52f1 Mon Sep 17 00:00:00 2001 From: kimdahey 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/client/util') 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<{}> {
: undefined} {this.settingsContent === "data" ? -
hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
+
+ WARNING:
+ THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW. + +
: undefined}
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 b71d2cd765ea8b81fa60bc82ae962feba832baaf Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 17 Jan 2020 13:27:23 -0500 Subject: css updates --- package-lock.json | 386 +++++++++++++++++------------------ src/client/util/SettingsManager.scss | 32 +-- src/client/util/SettingsManager.tsx | 9 +- 3 files changed, 215 insertions(+), 212 deletions(-) (limited to 'src/client/util') diff --git a/package-lock.json b/package-lock.json index 0ec256f02..2cfdfbbc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,7 +35,7 @@ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "requires": { - "color-convert": "1.9.3" + "color-convert": "^1.9.0" } }, "chalk": { @@ -43,9 +43,9 @@ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.5.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "supports-color": { @@ -53,7 +53,7 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -1504,7 +1504,7 @@ "resolved": "https://registry.npmjs.org/bl/-/bl-3.0.0.tgz", "integrity": "sha512-EUAyP5UHU5hxF8BPT0LKW8gjYLhq1DQIcneOX/pL/m2Alo+OYDQAJlHq+yseMP50Os2nHXOSic6Ss3vSQeyf4A==", "requires": { - "readable-stream": "3.4.0" + "readable-stream": "^3.0.1" } }, "readable-stream": { @@ -1512,9 +1512,9 @@ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", "requires": { - "inherits": "2.0.3", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" } }, "tar-stream": { @@ -1522,11 +1522,11 @@ "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.1.0.tgz", "integrity": "sha512-+DAn4Nb4+gz6WZigRzKEZl1QuJVOLtAwwF+WUxy1fJ6X63CaGaUAxJRD2KEn1OMfcbCjySTYpNC6WmfQoIEOdw==", "requires": { - "bl": "3.0.0", - "end-of-stream": "1.4.1", - "fs-constants": "1.0.0", - "inherits": "2.0.3", - "readable-stream": "3.4.0" + "bl": "^3.0.0", + "end-of-stream": "^1.4.1", + "fs-constants": "^1.0.0", + "inherits": "^2.0.3", + "readable-stream": "^3.1.1" } } } @@ -5143,7 +5143,7 @@ "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "ms": { @@ -5207,7 +5207,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.3" + "color-convert": "^1.9.0" } }, "chalk": { @@ -5216,9 +5216,9 @@ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.5.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "supports-color": { @@ -5227,7 +5227,7 @@ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -5358,8 +5358,8 @@ "bundled": true, "optional": true, "requires": { - "delegates": "1.0.0", - "readable-stream": "2.3.6" + "delegates": "^1.0.0", + "readable-stream": "^2.0.6" } }, "balanced-match": { @@ -5372,7 +5372,7 @@ "bundled": true, "optional": true, "requires": { - "balanced-match": "1.0.0", + "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, @@ -5406,7 +5406,7 @@ "bundled": true, "optional": true, "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "deep-extend": { @@ -5442,14 +5442,14 @@ "bundled": true, "optional": true, "requires": { - "aproba": "1.2.0", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.3" + "aproba": "^1.0.3", + "console-control-strings": "^1.0.0", + "has-unicode": "^2.0.0", + "object-assign": "^4.1.0", + "signal-exit": "^3.0.0", + "string-width": "^1.0.1", + "strip-ansi": "^3.0.1", + "wide-align": "^1.1.0" } }, "glob": { @@ -5457,12 +5457,12 @@ "bundled": true, "optional": true, "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.4", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" } }, "has-unicode": { @@ -5475,7 +5475,7 @@ "bundled": true, "optional": true, "requires": { - "safer-buffer": "2.1.2" + "safer-buffer": ">= 2.1.2 < 3" } }, "ignore-walk": { @@ -5483,7 +5483,7 @@ "bundled": true, "optional": true, "requires": { - "minimatch": "3.0.4" + "minimatch": "^3.0.4" } }, "inflight": { @@ -5491,8 +5491,8 @@ "bundled": true, "optional": true, "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" + "once": "^1.3.0", + "wrappy": "1" } }, "inherits": { @@ -5510,7 +5510,7 @@ "bundled": true, "optional": true, "requires": { - "number-is-nan": "1.0.1" + "number-is-nan": "^1.0.0" } }, "isarray": { @@ -5523,7 +5523,7 @@ "bundled": true, "optional": true, "requires": { - "brace-expansion": "1.1.11" + "brace-expansion": "^1.1.7" } }, "minimist": { @@ -5566,9 +5566,9 @@ "bundled": true, "optional": true, "requires": { - "debug": "3.2.6", - "iconv-lite": "0.4.24", - "sax": "1.2.4" + "debug": "^3.2.6", + "iconv-lite": "^0.4.4", + "sax": "^1.2.4" } }, "node-pre-gyp": { @@ -5593,8 +5593,8 @@ "bundled": true, "optional": true, "requires": { - "abbrev": "1.1.1", - "osenv": "0.1.5" + "abbrev": "1", + "osenv": "^0.1.4" } }, "npm-bundled": { @@ -5602,7 +5602,7 @@ "bundled": true, "optional": true, "requires": { - "npm-normalize-package-bin": "1.0.1" + "npm-normalize-package-bin": "^1.0.1" } }, "npm-normalize-package-bin": { @@ -5615,8 +5615,8 @@ "bundled": true, "optional": true, "requires": { - "ignore-walk": "3.0.3", - "npm-bundled": "1.1.1" + "ignore-walk": "^3.0.1", + "npm-bundled": "^1.0.1" } }, "npmlog": { @@ -5624,10 +5624,10 @@ "bundled": true, "optional": true, "requires": { - "are-we-there-yet": "1.1.5", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" + "are-we-there-yet": "~1.1.2", + "console-control-strings": "~1.1.0", + "gauge": "~2.7.3", + "set-blocking": "~2.0.0" } }, "number-is-nan": { @@ -5645,7 +5645,7 @@ "bundled": true, "optional": true, "requires": { - "wrappy": "1.0.2" + "wrappy": "1" } }, "os-homedir": { @@ -5663,8 +5663,8 @@ "bundled": true, "optional": true, "requires": { - "os-homedir": "1.0.2", - "os-tmpdir": "1.0.2" + "os-homedir": "^1.0.0", + "os-tmpdir": "^1.0.0" } }, "path-is-absolute": { @@ -5682,10 +5682,10 @@ "bundled": true, "optional": true, "requires": { - "deep-extend": "0.6.0", - "ini": "1.3.5", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" + "deep-extend": "^0.6.0", + "ini": "~1.3.0", + "minimist": "^1.2.0", + "strip-json-comments": "~2.0.1" }, "dependencies": { "minimist": { @@ -5700,13 +5700,13 @@ "bundled": true, "optional": true, "requires": { - "core-util-is": "1.0.2", - "inherits": "2.0.4", - "isarray": "1.0.0", - "process-nextick-args": "2.0.1", - "safe-buffer": "5.1.2", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" } }, "rimraf": { @@ -5714,7 +5714,7 @@ "bundled": true, "optional": true, "requires": { - "glob": "7.1.6" + "glob": "^7.1.3" } }, "safe-buffer": { @@ -5752,9 +5752,9 @@ "bundled": true, "optional": true, "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" + "code-point-at": "^1.0.0", + "is-fullwidth-code-point": "^1.0.0", + "strip-ansi": "^3.0.0" } }, "string_decoder": { @@ -5762,7 +5762,7 @@ "bundled": true, "optional": true, "requires": { - "safe-buffer": "5.1.2" + "safe-buffer": "~5.1.0" } }, "strip-ansi": { @@ -5770,7 +5770,7 @@ "bundled": true, "optional": true, "requires": { - "ansi-regex": "2.1.1" + "ansi-regex": "^2.0.0" } }, "strip-json-comments": { @@ -5802,7 +5802,7 @@ "bundled": true, "optional": true, "requires": { - "string-width": "1.0.2" + "string-width": "^1.0.2 || 2" } }, "wrappy": { @@ -7324,9 +7324,9 @@ "integrity": "sha512-yQyJ0u4pZsv9D4clxO69OEjLWYw+jbgspjTue4lTQZLfV0c5l1VmK2y1JK8E9ahdpltPOaAThPcp5nKPUgSnsg==", "dev": true, "requires": { - "ip-regex": "2.1.0", - "psl": "1.2.0", - "punycode": "2.1.1" + "ip-regex": "^2.1.0", + "psl": "^1.1.28", + "punycode": "^2.1.1" } } } @@ -8704,7 +8704,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "ms": { @@ -8722,7 +8722,7 @@ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -12535,7 +12535,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.3" + "color-convert": "^1.9.0" } }, "chalk": { @@ -12544,9 +12544,9 @@ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.5.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" }, "dependencies": { "supports-color": { @@ -12555,7 +12555,7 @@ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -12572,7 +12572,7 @@ "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -13406,7 +13406,7 @@ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "requires": { - "loose-envify": "1.4.0" + "loose-envify": "^1.0.0" } } } @@ -13599,7 +13599,7 @@ "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "requires": { - "loose-envify": "1.4.0" + "loose-envify": "^1.0.0" } } } @@ -15054,7 +15054,7 @@ "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "ms": { @@ -15205,7 +15205,7 @@ "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", "dev": true, "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "faye-websocket": { @@ -15344,7 +15344,7 @@ "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "ms": { @@ -15838,9 +15838,9 @@ "integrity": "sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==", "dev": true, "requires": { - "commondir": "1.0.1", - "make-dir": "2.1.0", - "pkg-dir": "3.0.0" + "commondir": "^1.0.1", + "make-dir": "^2.0.0", + "pkg-dir": "^3.0.0" } }, "find-up": { @@ -15849,7 +15849,7 @@ "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "dev": true, "requires": { - "locate-path": "3.0.0" + "locate-path": "^3.0.0" } }, "locate-path": { @@ -15858,8 +15858,8 @@ "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "dev": true, "requires": { - "p-locate": "3.0.0", - "path-exists": "3.0.0" + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" } }, "lru-cache": { @@ -15868,7 +15868,7 @@ "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==", "dev": true, "requires": { - "yallist": "3.0.3" + "yallist": "^3.0.2" } }, "make-dir": { @@ -15877,8 +15877,8 @@ "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "dev": true, "requires": { - "pify": "4.0.1", - "semver": "5.7.0" + "pify": "^4.0.1", + "semver": "^5.6.0" } }, "mississippi": { @@ -15887,16 +15887,16 @@ "integrity": "sha512-x471SsVjUtBRtcvd4BzKE9kFC+/2TeWgKCgw0bZcw1b9l2X3QX5vCWgF+KaZaYm87Ss//rHnWryupDrgLvmSkA==", "dev": true, "requires": { - "concat-stream": "1.6.2", - "duplexify": "3.7.1", - "end-of-stream": "1.4.1", - "flush-write-stream": "1.1.1", - "from2": "2.3.0", - "parallel-transform": "1.1.0", - "pump": "3.0.0", - "pumpify": "1.5.1", - "stream-each": "1.2.3", - "through2": "2.0.5" + "concat-stream": "^1.5.0", + "duplexify": "^3.4.2", + "end-of-stream": "^1.1.0", + "flush-write-stream": "^1.0.0", + "from2": "^2.1.0", + "parallel-transform": "^1.1.0", + "pump": "^3.0.0", + "pumpify": "^1.3.3", + "stream-each": "^1.1.0", + "through2": "^2.0.0" } }, "p-locate": { @@ -15905,7 +15905,7 @@ "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", "dev": true, "requires": { - "p-limit": "2.2.2" + "p-limit": "^2.0.0" } }, "pify": { @@ -15920,7 +15920,7 @@ "integrity": "sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==", "dev": true, "requires": { - "find-up": "3.0.0" + "find-up": "^3.0.0" } }, "pump": { @@ -15929,8 +15929,8 @@ "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", "dev": true, "requires": { - "end-of-stream": "1.4.1", - "once": "1.4.0" + "end-of-stream": "^1.1.0", + "once": "^1.3.1" } }, "rimraf": { @@ -15971,7 +15971,7 @@ "integrity": "sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==", "dev": true, "requires": { - "figgy-pudding": "3.5.1" + "figgy-pudding": "^3.5.1" } }, "y18n": { @@ -16268,7 +16268,7 @@ "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==", "dev": true, "requires": { - "glob": "7.1.4" + "glob": "^7.1.3" } } } @@ -16326,7 +16326,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.3" + "color-convert": "^1.9.0" } }, "chalk": { @@ -16335,9 +16335,9 @@ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.5.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" } }, "diff": { @@ -16352,7 +16352,7 @@ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } } } @@ -16989,7 +16989,7 @@ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", "dev": true, "requires": { - "color-convert": "1.9.3" + "color-convert": "^1.9.0" } }, "camelcase": { @@ -17004,9 +17004,9 @@ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", "dev": true, "requires": { - "ansi-styles": "3.2.1", - "escape-string-regexp": "1.0.5", - "supports-color": "5.5.0" + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" }, "dependencies": { "supports-color": { @@ -17037,13 +17037,13 @@ "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { - "cross-spawn": "6.0.5", - "get-stream": "4.1.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, "find-up": { @@ -17052,7 +17052,7 @@ "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "dev": true, "requires": { - "locate-path": "3.0.0" + "locate-path": "^3.0.0" } }, "get-caller-file": { @@ -17067,7 +17067,7 @@ "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", "dev": true, "requires": { - "pump": "3.0.0" + "pump": "^3.0.0" } }, "invert-kv": { @@ -17088,7 +17088,7 @@ "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==", "dev": true, "requires": { - "invert-kv": "2.0.0" + "invert-kv": "^2.0.0" } }, "locate-path": { @@ -17097,8 +17097,8 @@ "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "dev": true, "requires": { - "p-locate": "3.0.0", - "path-exists": "3.0.0" + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" } }, "os-locale": { @@ -17107,9 +17107,9 @@ "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", "dev": true, "requires": { - "execa": "1.0.0", - "lcid": "2.0.0", - "mem": "4.3.0" + "execa": "^1.0.0", + "lcid": "^2.0.0", + "mem": "^4.0.0" } }, "p-locate": { @@ -17118,7 +17118,7 @@ "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", "dev": true, "requires": { - "p-limit": "2.2.2" + "p-limit": "^2.0.0" } }, "pump": { @@ -17127,8 +17127,8 @@ "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", "dev": true, "requires": { - "end-of-stream": "1.4.1", - "once": "1.4.0" + "end-of-stream": "^1.1.0", + "once": "^1.3.1" } }, "require-main-filename": { @@ -17245,8 +17245,8 @@ "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", "dev": true, "requires": { - "ansi-colors": "3.2.4", - "uuid": "3.3.3" + "ansi-colors": "^3.0.0", + "uuid": "^3.3.2" } } } @@ -17310,9 +17310,9 @@ "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", "dev": true, "requires": { - "string-width": "2.1.1", - "strip-ansi": "4.0.0", - "wrap-ansi": "2.1.0" + "string-width": "^2.1.1", + "strip-ansi": "^4.0.0", + "wrap-ansi": "^2.0.0" }, "dependencies": { "strip-ansi": { @@ -17321,7 +17321,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -17332,7 +17332,7 @@ "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", "dev": true, "requires": { - "ms": "2.1.2" + "ms": "^2.1.1" } }, "execa": { @@ -17341,13 +17341,13 @@ "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==", "dev": true, "requires": { - "cross-spawn": "6.0.5", - "get-stream": "4.1.0", - "is-stream": "1.1.0", - "npm-run-path": "2.0.2", - "p-finally": "1.0.0", - "signal-exit": "3.0.2", - "strip-eof": "1.0.0" + "cross-spawn": "^6.0.0", + "get-stream": "^4.0.0", + "is-stream": "^1.1.0", + "npm-run-path": "^2.0.0", + "p-finally": "^1.0.0", + "signal-exit": "^3.0.0", + "strip-eof": "^1.0.0" } }, "find-up": { @@ -17356,7 +17356,7 @@ "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", "dev": true, "requires": { - "locate-path": "3.0.0" + "locate-path": "^3.0.0" } }, "get-stream": { @@ -17365,7 +17365,7 @@ "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==", "dev": true, "requires": { - "pump": "3.0.0" + "pump": "^3.0.0" } }, "invert-kv": { @@ -17386,7 +17386,7 @@ "integrity": "sha512-avPEb8P8EGnwXKClwsNUgryVjllcRqtMYa49NTsbQagYuT1DcXnl1915oxWjoyGrXR6zH/Y0Zc96xWsPcoDKeA==", "dev": true, "requires": { - "invert-kv": "2.0.0" + "invert-kv": "^2.0.0" } }, "locate-path": { @@ -17395,8 +17395,8 @@ "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", "dev": true, "requires": { - "p-locate": "3.0.0", - "path-exists": "3.0.0" + "p-locate": "^3.0.0", + "path-exists": "^3.0.0" } }, "loglevel": { @@ -17417,9 +17417,9 @@ "integrity": "sha512-Z8l3R4wYWM40/52Z+S265okfFj8Kt2cC2MKY+xNi3kFs+XGI7WXu/I309QQQYbRW4ijiZ+yxs9pqEhJh0DqW3Q==", "dev": true, "requires": { - "execa": "1.0.0", - "lcid": "2.0.0", - "mem": "4.3.0" + "execa": "^1.0.0", + "lcid": "^2.0.0", + "mem": "^4.0.0" } }, "p-locate": { @@ -17428,7 +17428,7 @@ "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", "dev": true, "requires": { - "p-limit": "2.2.2" + "p-limit": "^2.0.0" } }, "pump": { @@ -17437,8 +17437,8 @@ "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==", "dev": true, "requires": { - "end-of-stream": "1.4.1", - "once": "1.4.0" + "end-of-stream": "^1.1.0", + "once": "^1.3.1" } }, "schema-utils": { @@ -17464,8 +17464,8 @@ "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", "dev": true, "requires": { - "is-fullwidth-code-point": "2.0.0", - "strip-ansi": "4.0.0" + "is-fullwidth-code-point": "^2.0.0", + "strip-ansi": "^4.0.0" }, "dependencies": { "strip-ansi": { @@ -17474,7 +17474,7 @@ "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "dev": true, "requires": { - "ansi-regex": "3.0.0" + "ansi-regex": "^3.0.0" } } } @@ -17485,7 +17485,7 @@ "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", "dev": true, "requires": { - "has-flag": "3.0.0" + "has-flag": "^3.0.0" } }, "webpack-log": { @@ -17494,8 +17494,8 @@ "integrity": "sha512-cX8G2vR/85UYG59FgkoMamwHUIkSSlV3bBMRsbxVXVUk2j6NleCKjQ/WE9eYg9WY4w25O9w8wKP4rzNZFmUcUg==", "dev": true, "requires": { - "ansi-colors": "3.2.4", - "uuid": "3.3.3" + "ansi-colors": "^3.0.0", + "uuid": "^3.3.2" } }, "which-module": { @@ -17519,18 +17519,18 @@ "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==", "dev": true, "requires": { - "cliui": "4.1.0", - "decamelize": "1.2.0", - "find-up": "3.0.0", - "get-caller-file": "1.0.3", - "os-locale": "3.1.0", - "require-directory": "2.1.1", - "require-main-filename": "1.0.1", - "set-blocking": "2.0.0", - "string-width": "2.1.1", - "which-module": "2.0.0", - "y18n": "3.2.1", - "yargs-parser": "11.1.1" + "cliui": "^4.0.0", + "decamelize": "^1.2.0", + "find-up": "^3.0.0", + "get-caller-file": "^1.0.1", + "os-locale": "^3.0.0", + "require-directory": "^2.1.1", + "require-main-filename": "^1.0.1", + "set-blocking": "^2.0.0", + "string-width": "^2.0.0", + "which-module": "^2.0.0", + "y18n": "^3.2.1 || ^4.0.0", + "yargs-parser": "^11.1.1" } }, "yargs-parser": { @@ -17539,8 +17539,8 @@ "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==", "dev": true, "requires": { - "camelcase": "5.3.1", - "decamelize": "1.2.0" + "camelcase": "^5.0.0", + "decamelize": "^1.2.0" } } } @@ -18156,9 +18156,9 @@ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.4.0.tgz", "integrity": "sha512-jItXPLmrSR8jmTRmRWJXCnGJsfy85mB3Wd/uINMXA65yrnFo0cPClFIUWzo2najVNSl+mx7/4W8ttlLWJe99pQ==", "requires": { - "inherits": "2.0.3", - "string_decoder": "1.1.1", - "util-deprecate": "1.0.2" + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" } } } diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 9b6a2ccae..0b5cbe74f 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -4,7 +4,7 @@ background-color: whitesmoke !important; color: grey; width: 400px; - height: 300px; + height: 250px; button { background: $lighter-alt-accent; @@ -27,9 +27,10 @@ flex-direction: column; button { - width: 100px; + width: 100%; align-self: center; background: $darker-alt-accent; + margin-top: 4px; } .delete-button { @@ -42,14 +43,11 @@ top: 1em; } - - input { - border-radius: 5px; - border: none; - padding: 4px 4px 4px 10px; - margin: 2px; + .settings-heading { + letter-spacing: .5em; } + .settings-body { display: flex; justify-content: space-between; @@ -66,15 +64,20 @@ padding-right: 1em; display: flex; flex-direction: column; + flex-basis: 65%; justify-content: space-around; - // text-align: left; + text-align: left; ::placeholder { color: $intermediate-color; } input { + border-radius: 5px; + border: none; + padding: 4px; min-width: 100%; + margin: 2px 0; } .error-text { @@ -84,6 +87,11 @@ .success-text { color: #009F6B; } + + p { + padding: 0 0 .1em .2em; + } + } } @@ -91,12 +99,6 @@ text-decoration: underline; } - p { - text-align: left; - padding: 0; - margin: 0 0 20px 0; - } - h1 { color: $dark-color; text-transform: uppercase; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 6f852a3e6..e1fbeb138 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -91,19 +91,20 @@ export default class SettingsManager extends React.Component<{}> {
{this.settingsContent === "password" ?
- change password here: + + forgot password? {this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} - forgot password? +
: undefined} {this.settingsContent === "data" ?
- WARNING:
- THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW. +

WARNING:
+ THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.

: undefined} -- cgit v1.2.3-70-g09d2 From 19f525d244d1619f8456b8a455bc2043cf9dbe21 Mon Sep 17 00:00:00 2001 From: kimdahey Date: Fri, 17 Jan 2020 15:10:31 -0500 Subject: minor visual changes --- src/client/util/SettingsManager.scss | 6 +++--- src/client/util/SettingsManager.tsx | 6 ++++-- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/SettingsManager.scss b/src/client/util/SettingsManager.scss index 0b5cbe74f..7a0fb0741 100644 --- a/src/client/util/SettingsManager.scss +++ b/src/client/util/SettingsManager.scss @@ -3,8 +3,8 @@ .dialogue-box { background-color: whitesmoke !important; color: grey; - width: 400px; - height: 250px; + width: 450px; + height: 300px; button { background: $lighter-alt-accent; @@ -64,7 +64,7 @@ padding-right: 1em; display: flex; flex-direction: column; - flex-basis: 65%; + flex-basis: 70%; justify-content: space-around; text-align: left; diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index e1fbeb138..ff0b22381 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -73,6 +73,8 @@ export default class SettingsManager extends React.Component<{}> { @action onClick = (event: any) => { this.settingsContent = event.currentTarget.value; + this.errorText = ""; + this.successText = ""; } private get settingsInterface() { @@ -94,10 +96,10 @@ export default class SettingsManager extends React.Component<{}> { - - forgot password? {this.errorText ?
{this.errorText}
: undefined} {this.successText ?
{this.successText}
: undefined} + + forgot password?
: undefined} -- cgit v1.2.3-70-g09d2 From 4b0a056f1afaf20dea4be64c7b238748d99ad12e Mon Sep 17 00:00:00 2001 From: Stanley Yip 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/client/util') 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; 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, prevPoints: Map, ignorePen: boolean): React.Touch[] { const myTouches = new Array(); 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 = new Map(); 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>("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 = ; }); } @@ -221,6 +222,29 @@ export default class GestureOverlay extends Touchable { @action handleHandMove = (e: TouchEvent) => { + const fingers = new Array(); + 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( + // + // ) + } + render() { return (
- {this.props.children} - {this._palette} - {this.currentStroke} + {this.elements}
); } } 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 { - + 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) => { 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 3bb4d8324b6101a82122ecb31f025c2e0420df89 Mon Sep 17 00:00:00 2001 From: Stanley Yip Date: Fri, 17 Jan 2020 16:22:38 -0500 Subject: moving around the createPolyline function --- src/client/util/InteractionUtils.ts | 206 ------------------- src/client/util/InteractionUtils.tsx | 220 +++++++++++++++++++++ src/client/views/GestureOverlay.tsx | 3 +- src/client/views/InkingStroke.tsx | 17 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 1 - 5 files changed, 223 insertions(+), 224 deletions(-) delete mode 100644 src/client/util/InteractionUtils.ts create mode 100644 src/client/util/InteractionUtils.tsx (limited to 'src/client/util') diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.ts deleted file mode 100644 index 3e6d27242..000000000 --- a/src/client/util/InteractionUtils.ts +++ /dev/null @@ -1,206 +0,0 @@ -export namespace InteractionUtils { - export const MOUSETYPE = "mouse"; - export const TOUCHTYPE = "touch"; - export const PENTYPE = "pen"; - export const ERASERTYPE = "eraser"; - - const POINTER_PEN_BUTTON = -1; - const REACT_POINTER_PEN_BUTTON = 0; - const ERASER_BUTTON = 5; - - export class MultiTouchEvent { - constructor( - readonly fingers: number, - // 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 - ) { } - } - - export interface MultiTouchEventDisposer { (): void; } - - export function MakeMultiTouchTarget( - element: HTMLElement, - startFunc: (e: Event, me: MultiTouchEvent) => void, - ): MultiTouchEventDisposer { - const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent>).detail); - // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent>).detail) : undefined; - // const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent>).detail) : undefined; - element.addEventListener("dashOnTouchStart", onMultiTouchStartHandler); - // if (onMultiTouchMoveHandler) { - // element.addEventListener("dashOnTouchMove", onMultiTouchMoveHandler); - // } - // if (onMultiTouchEndHandler) { - // element.addEventListener("dashOnTouchEnd", onMultiTouchEndHandler); - // } - return () => { - element.removeEventListener("dashOnTouchStart", onMultiTouchStartHandler); - // if (onMultiTouchMoveHandler) { - // element.removeEventListener("dashOnTouchMove", onMultiTouchMoveHandler); - // } - // if (onMultiTouchEndHandler) { - // element.removeEventListener("dashOnTouchend", onMultiTouchEndHandler); - // } - }; - } - - export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent, prevPoints: Map, ignorePen: boolean): React.Touch[] { - const myTouches = new Array(); - for (const pt of mte.touches) { - 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)) { - myTouches.push(pt); - } - } - } - } - } - return myTouches; - } - - export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean { - switch (type) { - // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2 - case PENTYPE: - return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0); - case ERASERTYPE: - return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON); - default: - return e.pointerType === type; - } - } - - export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number { - return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2)); - } - - /** - * Returns the centroid of an n-arbitrary long list of points (takes the average the x and y components of each point) - * @param pts - n-arbitrary long list of points - */ - export function CenterPoint(pts: React.Touch[]): { X: number, Y: number } { - const centerX = pts.map(pt => pt.clientX).reduce((a, b) => a + b, 0) / pts.length; - const centerY = pts.map(pt => pt.clientY).reduce((a, b) => a + b, 0) / pts.length; - return { X: centerX, Y: centerY }; - } - - /** - * Returns -1 if pinching out, 0 if not pinching, and 1 if pinching in - * @param pt1 - new point that corresponds to oldPoint1 - * @param pt2 - new point that corresponds to oldPoint2 - * @param oldPoint1 - previous point 1 - * @param oldPoint2 - previous point 2 - */ - export function Pinching(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number { - const threshold = 4; - const oldDist = TwoPointEuclidist(oldPoint1, oldPoint2); - const newDist = TwoPointEuclidist(pt1, pt2); - - /** if they have the same sign, then we are either pinching in or out. - * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch) - * so that it can still pan without freaking out - */ - if (Math.sign(oldDist) === Math.sign(newDist) && Math.abs(oldDist - newDist) > threshold) { - return Math.sign(oldDist - newDist); - } - return 0; - } - - /** - * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in - * @param pt1 - new point that corresponds to oldPoint1 - * @param pt2 - new point that corresponds to oldPoint2 - * @param oldPoint1 - previous point 1 - * @param oldPoint2 - previous point 2 - */ - export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number { - const threshold = 4; - - const pt1Dist = TwoPointEuclidist(oldPoint1, pt1); - const pt2Dist = TwoPointEuclidist(oldPoint2, pt2); - - const pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2); - - if (pinching !== 0) { - if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) { - return pinching; - } - } - return 0; - } - - export function IsDragging(oldTouches: Map, newTouches: React.Touch[], leniency: number): boolean { - for (const touch of newTouches) { - if (touch) { - const oldTouch = oldTouches.get(touch.identifier); - if (oldTouch) { - if (TwoPointEuclidist(touch, oldTouch) >= leniency) { - return true; - } - } - } - } - return false; - } - - // These might not be very useful anymore, but I'll leave them here for now -syip2 - { - - - /** - * Returns the type of Touch Interaction from a list of points. - * Also returns any data that is associated with a Touch Interaction - * @param pts - List of points - */ - // export function InterpretPointers(pts: React.Touch[]): { type: Opt, data?: any } { - // const leniency = 200; - // switch (pts.length) { - // case 1: - // return { type: OneFinger }; - // case 2: - // return { type: TwoSeperateFingers }; - // case 3: - // let pt1 = pts[0]; - // let pt2 = pts[1]; - // let pt3 = pts[2]; - // if (pt1 && pt2 && pt3) { - // let dist12 = TwoPointEuclidist(pt1, pt2); - // let dist23 = TwoPointEuclidist(pt2, pt3); - // let dist13 = TwoPointEuclidist(pt1, pt3); - // console.log(`distances: ${dist12}, ${dist23}, ${dist13}`); - // let dist12close = dist12 < leniency; - // let dist23close = dist23 < leniency; - // let dist13close = dist13 < leniency; - // let xor2313 = dist23close ? !dist13close : dist13close; - // let xor = dist12close ? !xor2313 : xor2313; - // // three input xor because javascript doesn't have logical xor's - // if (xor) { - // let points: number[] = []; - // let min = Math.min(dist12, dist23, dist13); - // switch (min) { - // case dist12: - // points = [0, 1, 2]; - // break; - // case dist23: - // points = [1, 2, 0]; - // break; - // case dist13: - // points = [0, 2, 1]; - // break; - // } - // return { type: TwoToOneFingers, data: points }; - // } - // else { - // return { type: ThreeSeperateFingers, data: null }; - // } - // } - // default: - // return { type: undefined }; - // } - // } - } -} \ No newline at end of file diff --git a/src/client/util/InteractionUtils.tsx b/src/client/util/InteractionUtils.tsx new file mode 100644 index 000000000..1fe95474c --- /dev/null +++ b/src/client/util/InteractionUtils.tsx @@ -0,0 +1,220 @@ +export namespace InteractionUtils { + export const MOUSETYPE = "mouse"; + export const TOUCHTYPE = "touch"; + export const PENTYPE = "pen"; + export const ERASERTYPE = "eraser"; + + const POINTER_PEN_BUTTON = -1; + const REACT_POINTER_PEN_BUTTON = 0; + const ERASER_BUTTON = 5; + + export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number) { + const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, ""); + return ( + + ); + } + + export class MultiTouchEvent { + constructor( + readonly fingers: number, + // 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 + ) { } + } + + export interface MultiTouchEventDisposer { (): void; } + + export function MakeMultiTouchTarget( + element: HTMLElement, + startFunc: (e: Event, me: MultiTouchEvent) => void, + ): MultiTouchEventDisposer { + const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent>).detail); + // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent>).detail) : undefined; + // const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent>).detail) : undefined; + element.addEventListener("dashOnTouchStart", onMultiTouchStartHandler); + // if (onMultiTouchMoveHandler) { + // element.addEventListener("dashOnTouchMove", onMultiTouchMoveHandler); + // } + // if (onMultiTouchEndHandler) { + // element.addEventListener("dashOnTouchEnd", onMultiTouchEndHandler); + // } + return () => { + element.removeEventListener("dashOnTouchStart", onMultiTouchStartHandler); + // if (onMultiTouchMoveHandler) { + // element.removeEventListener("dashOnTouchMove", onMultiTouchMoveHandler); + // } + // if (onMultiTouchEndHandler) { + // element.removeEventListener("dashOnTouchend", onMultiTouchEndHandler); + // } + }; + } + + export function GetMyTargetTouches(mte: InteractionUtils.MultiTouchEvent, prevPoints: Map, ignorePen: boolean): React.Touch[] { + const myTouches = new Array(); + for (const pt of mte.touches) { + 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)) { + myTouches.push(pt); + } + } + } + } + } + return myTouches; + } + + export function IsType(e: PointerEvent | React.PointerEvent, type: string): boolean { + switch (type) { + // pen and eraser are both pointer type 'pen', but pen is button 0 and eraser is button 5. -syip2 + case PENTYPE: + return e.pointerType === PENTYPE && (e.button === -1 || e.button === 0); + case ERASERTYPE: + return e.pointerType === PENTYPE && e.button === (e instanceof PointerEvent ? ERASER_BUTTON : ERASER_BUTTON); + default: + return e.pointerType === type; + } + } + + export function TwoPointEuclidist(pt1: React.Touch, pt2: React.Touch): number { + return Math.sqrt(Math.pow(pt1.clientX - pt2.clientX, 2) + Math.pow(pt1.clientY - pt2.clientY, 2)); + } + + /** + * Returns the centroid of an n-arbitrary long list of points (takes the average the x and y components of each point) + * @param pts - n-arbitrary long list of points + */ + export function CenterPoint(pts: React.Touch[]): { X: number, Y: number } { + const centerX = pts.map(pt => pt.clientX).reduce((a, b) => a + b, 0) / pts.length; + const centerY = pts.map(pt => pt.clientY).reduce((a, b) => a + b, 0) / pts.length; + return { X: centerX, Y: centerY }; + } + + /** + * Returns -1 if pinching out, 0 if not pinching, and 1 if pinching in + * @param pt1 - new point that corresponds to oldPoint1 + * @param pt2 - new point that corresponds to oldPoint2 + * @param oldPoint1 - previous point 1 + * @param oldPoint2 - previous point 2 + */ + export function Pinching(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number { + const threshold = 4; + const oldDist = TwoPointEuclidist(oldPoint1, oldPoint2); + const newDist = TwoPointEuclidist(pt1, pt2); + + /** if they have the same sign, then we are either pinching in or out. + * threshold it by 10 (it has to be pinching by at least threshold to be a valid pinch) + * so that it can still pan without freaking out + */ + if (Math.sign(oldDist) === Math.sign(newDist) && Math.abs(oldDist - newDist) > threshold) { + return Math.sign(oldDist - newDist); + } + return 0; + } + + /** + * Returns -1 if pinning and pinching out, 0 if not pinning, and 1 if pinching in + * @param pt1 - new point that corresponds to oldPoint1 + * @param pt2 - new point that corresponds to oldPoint2 + * @param oldPoint1 - previous point 1 + * @param oldPoint2 - previous point 2 + */ + export function Pinning(pt1: React.Touch, pt2: React.Touch, oldPoint1: React.Touch, oldPoint2: React.Touch): number { + const threshold = 4; + + const pt1Dist = TwoPointEuclidist(oldPoint1, pt1); + const pt2Dist = TwoPointEuclidist(oldPoint2, pt2); + + const pinching = Pinching(pt1, pt2, oldPoint1, oldPoint2); + + if (pinching !== 0) { + if ((pt1Dist < threshold && pt2Dist > threshold) || (pt1Dist > threshold && pt2Dist < threshold)) { + return pinching; + } + } + return 0; + } + + export function IsDragging(oldTouches: Map, newTouches: React.Touch[], leniency: number): boolean { + for (const touch of newTouches) { + if (touch) { + const oldTouch = oldTouches.get(touch.identifier); + if (oldTouch) { + if (TwoPointEuclidist(touch, oldTouch) >= leniency) { + return true; + } + } + } + } + return false; + } + + // These might not be very useful anymore, but I'll leave them here for now -syip2 + { + + + /** + * Returns the type of Touch Interaction from a list of points. + * Also returns any data that is associated with a Touch Interaction + * @param pts - List of points + */ + // export function InterpretPointers(pts: React.Touch[]): { type: Opt, data?: any } { + // const leniency = 200; + // switch (pts.length) { + // case 1: + // return { type: OneFinger }; + // case 2: + // return { type: TwoSeperateFingers }; + // case 3: + // let pt1 = pts[0]; + // let pt2 = pts[1]; + // let pt3 = pts[2]; + // if (pt1 && pt2 && pt3) { + // let dist12 = TwoPointEuclidist(pt1, pt2); + // let dist23 = TwoPointEuclidist(pt2, pt3); + // let dist13 = TwoPointEuclidist(pt1, pt3); + // console.log(`distances: ${dist12}, ${dist23}, ${dist13}`); + // let dist12close = dist12 < leniency; + // let dist23close = dist23 < leniency; + // let dist13close = dist13 < leniency; + // let xor2313 = dist23close ? !dist13close : dist13close; + // let xor = dist12close ? !xor2313 : xor2313; + // // three input xor because javascript doesn't have logical xor's + // if (xor) { + // let points: number[] = []; + // let min = Math.min(dist12, dist23, dist13); + // switch (min) { + // case dist12: + // points = [0, 1, 2]; + // break; + // case dist23: + // points = [1, 2, 0]; + // break; + // case dist13: + // points = [0, 2, 1]; + // break; + // } + // return { type: TwoToOneFingers, data: points }; + // } + // else { + // return { type: ThreeSeperateFingers, data: null }; + // } + // } + // default: + // return { type: undefined }; + // } + // } + } +} \ No newline at end of file diff --git a/src/client/views/GestureOverlay.tsx b/src/client/views/GestureOverlay.tsx index 3de901ff5..ab26687d7 100644 --- a/src/client/views/GestureOverlay.tsx +++ b/src/client/views/GestureOverlay.tsx @@ -3,7 +3,6 @@ import { Touchable } from "./Touchable"; import { observer } from "mobx-react"; import "./GestureOverlay.scss"; import { computed, observable, action, runInAction } from "mobx"; -import { CreatePolyline } from "./InkingStroke"; import { GestureUtils } from "../../pen-gestures/GestureUtils"; import { InteractionUtils } from "../util/InteractionUtils"; import { InkingControl } from "./InkingControl"; @@ -400,7 +399,7 @@ export default class GestureOverlay extends Touchable { return ( - {CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)} + {InteractionUtils.CreatePolyline(this._points, B.left, B.top, this.Color, this.Width)} ); } diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx index 8b346d5d9..aca507147 100644 --- a/src/client/views/InkingStroke.tsx +++ b/src/client/views/InkingStroke.tsx @@ -10,24 +10,11 @@ import "./InkingStroke.scss"; import { FieldView, FieldViewProps } from "./nodes/FieldView"; import React = require("react"); import { TraceMobx } from "../../new_fields/util"; +import { InteractionUtils } from "../util/InteractionUtils"; type InkDocument = makeInterface<[typeof documentSchema]>; const InkDocument = makeInterface(documentSchema); -export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color?: string, width?: number) { - const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, ""); - return ( - - ); -} - @observer export class InkingStroke extends DocExtendableComponent(InkDocument) { public static LayoutString(fieldStr: string) { return FieldView.LayoutString(InkingStroke, fieldStr); } @@ -44,7 +31,7 @@ export class InkingStroke extends DocExtendableComponent Date: Mon, 20 Jan 2020 00:34:45 -0500 Subject: close to buxton's initial workflow --- src/client/documents/Documents.ts | 4 ++++ src/client/util/DropConverter.ts | 3 +-- src/client/views/collections/CollectionPivotView.tsx | 2 +- src/client/views/collections/CollectionTreeView.tsx | 17 +++++++++++++++++ src/client/views/nodes/DocumentView.tsx | 2 +- 5 files changed, 24 insertions(+), 4 deletions(-) (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index c3f03aede..4fe13fa78 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -518,6 +518,10 @@ export namespace Docs { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Stacking }); } + export function MulticolumnDocument(documents: Array, options: DocumentOptions) { + return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Multicolumn }); + } + export function MasonryDocument(documents: Array, options: DocumentOptions) { return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { chromeStatus: "collapsed", schemaColumns: new List([new SchemaHeaderField("title", "#f1efeb")]), ...options, viewType: CollectionViewType.Masonry }); } diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index dc66bceee..3e2cc6a2e 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -7,8 +7,7 @@ import { StrCast } from "../../new_fields/Types"; import { Docs } from "../documents/Documents"; import { ScriptField } from "../../new_fields/ScriptField"; - -function makeTemplate(doc: Doc): boolean { +export function makeTemplate(doc: Doc): boolean { const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateField ? doc.layout : doc; const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)![0]; const fieldKey = layout.replace("fieldKey={'", "").replace(/'}$/, ""); diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx index 6af7cce70..02cd2e2c9 100644 --- a/src/client/views/collections/CollectionPivotView.tsx +++ b/src/client/views/collections/CollectionPivotView.tsx @@ -34,7 +34,7 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) { facetCollection.onCheckedClick = new ScriptField(script); } - const openDocText = "const alias = getAlias(this); alias.layoutKey = 'layoutCustom'; useRightSplit(alias); "; + const openDocText = "const alias = getAlias(this); alias.layoutKey = 'detailedDeviceView'; useRightSplit(alias); "; const openDocScript = CompileScript(openDocText, { params: { this: Doc.name, heading: "boolean", checked: "boolean", context: Doc.name }, typecheck: false, diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 70860b6bd..239e6caa6 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -29,6 +29,8 @@ import "./CollectionTreeView.scss"; import React = require("react"); import { CurrentUserUtils } from '../../../server/authentication/models/current_user_utils'; import { ScriptBox } from '../ScriptBox'; +import { ImageBox } from '../nodes/ImageBox'; +import { makeTemplate } from '../../util/DropConverter'; export interface TreeViewProps { @@ -628,6 +630,21 @@ export class CollectionTreeView extends CollectionSubView(Document) { layoutItems.push({ description: (this.props.Document.hideHeaderFields ? "Show" : "Hide") + " Header Fields", event: () => this.props.Document.hideHeaderFields = !this.props.Document.hideHeaderFields, icon: "paint-brush" }); ContextMenu.Instance.addItem({ description: "Treeview Options ...", subitems: layoutItems, icon: "eye" }); } + ContextMenu.Instance.addItem({ + description: "Buxton Layout", icon: "eye", event: () => { + // const [first, second, third] = new Array(3).map(() => Docs.Create.MulticolumnDocument([], {})); + const year = Docs.Create.FreeformDocument([], { title: "year" }); + const wrapper = Docs.Create.FreeformDocument([year], {}); + makeTemplate(wrapper); + const detailedLayout = Doc.MakeAlias(wrapper); + const cardLayout = ImageBox.LayoutString("hero"); + this.childLayoutPairs.forEach(({ layout }) => { + layout.layout = cardLayout; + layout.detailedDeviceView = detailedLayout; + // Doc.ApplyTemplateTo(wrapper, layout, "detailedDeviceView"); + }); + } + }); const existingOnClick = ContextMenu.Instance.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; onClicks.push({ description: "Edit onChecked Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Checked Changed ...", this.props.Document, "onCheckedClick", obj.x, obj.y, { heading: "boolean", checked: "boolean" }) }); diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx index 60dc253f7..8c7361673 100644 --- a/src/client/views/nodes/DocumentView.tsx +++ b/src/client/views/nodes/DocumentView.tsx @@ -562,7 +562,7 @@ export class DocumentView extends DocComponent(Docu this.props.Document.viewType = CollectionViewType.Stacking; this.props.Document.layoutKey = "layout_narrative"; } else { - DocumentView.makeNativeViewClicked(this.props.Document) + DocumentView.makeNativeViewClicked(this.props.Document); } } -- cgit v1.2.3-70-g09d2 From cdde5624bac14ba6e0520a2d30d8d3926f2cc27f Mon Sep 17 00:00:00 2001 From: Sam Wilkins Date: Mon, 20 Jan 2020 12:19:40 -0500 Subject: buxton layout improvements --- src/client/util/DropConverter.ts | 4 +-- .../views/collections/CollectionTreeView.tsx | 30 +++++++++++++--------- src/scraping/buxton/scraper.py | 2 +- 3 files changed, 21 insertions(+), 15 deletions(-) (limited to 'src/client/util') diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index 3e2cc6a2e..ff0e19347 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -7,7 +7,7 @@ import { StrCast } from "../../new_fields/Types"; import { Docs } from "../documents/Documents"; import { ScriptField } from "../../new_fields/ScriptField"; -export function makeTemplate(doc: Doc): boolean { +export function makeTemplate(doc: Doc, suppressTitle = false): boolean { const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateField ? doc.layout : doc; const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)![0]; const fieldKey = layout.replace("fieldKey={'", "").replace(/'}$/, ""); @@ -16,7 +16,7 @@ export function makeTemplate(doc: Doc): boolean { docs.forEach(d => { if (!StrCast(d.title).startsWith("-")) { any = true; - Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc)); + Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc), suppressTitle); } else if (d.type === DocumentType.COL) { any = makeTemplate(d) || any; } diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx index 0f61756f4..a48208bd9 100644 --- a/src/client/views/collections/CollectionTreeView.tsx +++ b/src/client/views/collections/CollectionTreeView.tsx @@ -633,27 +633,33 @@ export class CollectionTreeView extends CollectionSubView(Document) { } ContextMenu.Instance.addItem({ description: "Buxton Layout", icon: "eye", event: () => { - // const [first, second, third] = new Array(3).map(() => Docs.Create.MulticolumnDocument([], {})); - const year = Docs.Create.TextDocument({ title: "year" }); - const wrapper = Docs.Create.StackingDocument([year], { autoHeight: true, chromeStatus: "disabled" }); + const { TextDocument, ImageDocument } = Docs.Create; + const wrapper = Docs.Create.StackingDocument([ + ImageDocument("http://www.cs.brown.edu/~bcz/face.gif", { title: "hero" }), + TextDocument({ title: "year" }), + TextDocument({ title: "degrees_of_freedom" }), + TextDocument({ title: "company" }), + TextDocument({ title: "short_description" }), + ], { autoHeight: true, chromeStatus: "disabled" }); wrapper.disableLOD = true; - makeTemplate(wrapper); - delete Doc.GetProto(year).showTitle; - delete year.showTitle; - + makeTemplate(wrapper, true); const detailedLayout = Doc.MakeAlias(wrapper); const cardLayout = ImageBox.LayoutString("hero"); this.childLayoutPairs.forEach(({ layout }) => { - Doc.GetProto(layout).layout = cardLayout; - Doc.GetProto(layout).layout_detailed = detailedLayout; - // Doc.ApplyTemplateTo(wrapper, layout, "layout_detailed"); + const proto = Doc.GetProto(layout); + proto.layout = cardLayout; + proto.layout_detailed = detailedLayout; + layout.showTitle = "title"; + layout.showTitleHover = "titlehover"; }); - CollectionDockingView.AddRightSplit(wrapper, undefined); } }); const existingOnClick = ContextMenu.Instance.findByDescription("OnClick..."); const onClicks: ContextMenuProps[] = existingOnClick && "subitems" in existingOnClick ? existingOnClick.subitems : []; - onClicks.push({ description: "Edit onChecked Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Checked Changed ...", this.props.Document, "onCheckedClick", obj.x, obj.y, { heading: "boolean", checked: "boolean" }) }); + onClicks.push({ + description: "Edit onChecked Script", icon: "edit", event: (obj: any) => ScriptBox.EditButtonScript("On Checked Changed ...", this.props.Document, + "onCheckedClick", obj.x, obj.y, { heading: "boolean", checked: "boolean", context: Doc.name }) + }); !existingOnClick && ContextMenu.Instance.addItem({ description: "OnClick...", subitems: onClicks, icon: "hand-point-right" }); } outerXf = () => Utils.GetScreenTransform(this._mainEle!); diff --git a/src/scraping/buxton/scraper.py b/src/scraping/buxton/scraper.py index 15b5844f7..998c7617d 100644 --- a/src/scraping/buxton/scraper.py +++ b/src/scraping/buxton/scraper.py @@ -100,9 +100,9 @@ def write_collection(parse_results, display_fields, storage_key, viewType): fields[storage_key] = listify(proxify_guids(view_guids)) fields["schemaColumns"] = listify(display_fields) fields["backgroundColor"] = "white" - fields["scale"] = 0.5 fields["viewType"] = 2 fields["author"] = "Bill Buxton" + fielsd["disableLOD"] = True, fields["creationDate"] = { "date": datetime.datetime.utcnow().microsecond, "__type": "date" -- cgit v1.2.3-70-g09d2 From d528b9d19a685d8447a9d54715dc94cd66034852 Mon Sep 17 00:00:00 2001 From: Bob Zeleznik Date: Mon, 20 Jan 2020 21:18:10 -0500 Subject: fixed linking to text region. fixed link displays. removed old tooltiptextmenu. fixed brushes in richTextMenu. --- src/client/util/ProsemirrorExampleTransfer.ts | 2 - src/client/util/RichTextMenu.tsx | 25 +- src/client/util/RichTextRules.ts | 4 +- src/client/util/RichTextSchema.tsx | 3 +- src/client/util/TooltipLinkingMenu.tsx | 68 -- src/client/util/TooltipTextMenu.scss | 372 ------- src/client/util/TooltipTextMenu.tsx | 1042 -------------------- src/client/views/DocumentButtonBar.tsx | 8 +- src/client/views/DocumentDecorations.tsx | 8 - src/client/views/nodes/DocumentContentsView.tsx | 2 +- src/client/views/nodes/FormattedTextBox.tsx | 22 +- .../authentication/models/current_user_utils.ts | 4 +- 12 files changed, 37 insertions(+), 1523 deletions(-) delete mode 100644 src/client/util/TooltipLinkingMenu.tsx delete mode 100644 src/client/util/TooltipTextMenu.scss delete mode 100644 src/client/util/TooltipTextMenu.tsx (limited to 'src/client/util') diff --git a/src/client/util/ProsemirrorExampleTransfer.ts b/src/client/util/ProsemirrorExampleTransfer.ts index c028dbf8b..da3815181 100644 --- a/src/client/util/ProsemirrorExampleTransfer.ts +++ b/src/client/util/ProsemirrorExampleTransfer.ts @@ -5,9 +5,7 @@ import { Schema } from "prosemirror-model"; import { liftListItem, sinkListItem } from "./prosemirrorPatches.js"; import { splitListItem, wrapInList, } from "prosemirror-schema-list"; import { EditorState, Transaction, TextSelection } from "prosemirror-state"; -import { TooltipTextMenu } from "./TooltipTextMenu"; import { SelectionManager } from "./SelectionManager"; -import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false; diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx index 419d7caf9..f070589ae 100644 --- a/src/client/util/RichTextMenu.tsx +++ b/src/client/util/RichTextMenu.tsx @@ -32,8 +32,9 @@ export default class RichTextMenu extends AntimodeMenu { public overMenu: boolean = false; // kind of hacky way to prevent selects not being selectable private view?: EditorView; - private editorProps: FieldViewProps & FormattedTextBoxProps | undefined; + public editorProps: FieldViewProps & FormattedTextBoxProps | undefined; + public _brushMap: Map> = new Map(); private fontSizeOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[]; private fontFamilyOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[]; private listTypeOptions: { node: NodeType | any | null, title: string, label: string, command: any, style?: {} }[]; @@ -142,6 +143,17 @@ export default class RichTextMenu extends AntimodeMenu { this.updateFromDash(view, lastState, this.editorProps); } + + public MakeLinkToSelection = (linkDocId: string, title: string, location: string, targetDocId: string): string => { + if (this.view) { + const link = this.view.state.schema.marks.link.create({ href: Utils.prepend("/doc/" + linkDocId), title: title, location: location, targetId: targetDocId }); + this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link). + addMark(this.view.state.selection.from, this.view.state.selection.to, link)); + return this.view.state.selection.$from.nodeAfter?.text || ""; + } + return ""; + } + @action public async updateFromDash(view: EditorView, lastState: EditorState | undefined, props: any) { if (!view) { @@ -417,6 +429,15 @@ export default class RichTextMenu extends AntimodeMenu { @action toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; } + // todo: add brushes to brushMap to save with a style name + onBrushNameKeyPress = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + RichTextMenu.Instance.brushMarks && RichTextMenu.Instance._brushMap.set(this._brushNameRef.current!.value, RichTextMenu.Instance.brushMarks); + this._brushNameRef.current!.style.background = "lightGray"; + } + } + _brushNameRef = React.createRef(); + createBrushButton() { const self = this; function onBrushClick(e: React.PointerEvent) { @@ -447,7 +468,7 @@ export default class RichTextMenu extends AntimodeMenu {

{label}

- {/* */} +
; return ( diff --git a/src/client/util/RichTextRules.ts b/src/client/util/RichTextRules.ts index 29b378299..e20abb04c 100644 --- a/src/client/util/RichTextRules.ts +++ b/src/client/util/RichTextRules.ts @@ -5,11 +5,11 @@ import { NodeSelection, TextSelection } from "prosemirror-state"; import { NumCast, Cast } from "../../new_fields/Types"; import { Doc } from "../../new_fields/Doc"; import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; -import { TooltipTextMenuManager } from "../util/TooltipTextMenu"; import { Docs, DocUtils } from "../documents/Documents"; import { Id } from "../../new_fields/FieldSymbols"; import { DocServer } from "../DocServer"; import { returnFalse, Utils } from "../../Utils"; +import RichTextMenu from "./RichTextMenu"; export const inpRules = { rules: [ @@ -264,7 +264,7 @@ export const inpRules = { new RegExp(/%[a-z]+$/), (state, match, start, end) => { const color = match[0].substring(1, match[0].length); - const marks = TooltipTextMenuManager.Instance._brushMap.get(color); + const marks = RichTextMenu.Instance._brushMap.get(color); if (marks) { const tr = state.tr.deleteRange(start, end); return marks ? Array.from(marks).reduce((tr, m) => tr.addStoredMark(m), tr) : tr; diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index ef90a7294..1f70cafc4 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -855,7 +855,8 @@ export class FootnoteView { }), new Plugin({ view(newView) { - return FormattedTextBox.getToolTip(newView); + // TODO -- make this work with RichTextMenu + // return FormattedTextBox.getToolTip(newView); } }) ], diff --git a/src/client/util/TooltipLinkingMenu.tsx b/src/client/util/TooltipLinkingMenu.tsx deleted file mode 100644 index b46675a04..000000000 --- a/src/client/util/TooltipLinkingMenu.tsx +++ /dev/null @@ -1,68 +0,0 @@ -import { EditorState } from "prosemirror-state"; -import { EditorView } from "prosemirror-view"; -import { FieldViewProps } from "../views/nodes/FieldView"; -import "./TooltipTextMenu.scss"; - -//appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc. -export class TooltipLinkingMenu { - - private tooltip: HTMLElement; - private view: EditorView; - private editorProps: FieldViewProps; - - constructor(view: EditorView, editorProps: FieldViewProps) { - this.view = view; - this.editorProps = editorProps; - this.tooltip = document.createElement("div"); - this.tooltip.className = "tooltipMenu linking"; - - //add the div which is the tooltip - view.dom.parentNode!.parentNode!.appendChild(this.tooltip); - - const target = "https://www.google.com"; - - const link = document.createElement("a"); - link.href = target; - link.textContent = target; - link.target = "_blank"; - link.style.color = "white"; - this.tooltip.appendChild(link); - - this.update(view, undefined); - } - - //updates the tooltip menu when the selection changes - update(view: EditorView, lastState: EditorState | undefined) { - const state = view.state; - // Don't do anything if the document/selection didn't change - if (lastState && lastState.doc.eq(state.doc) && - lastState.selection.eq(state.selection)) return; - - // Hide the tooltip if the selection is empty - if (state.selection.empty) { - this.tooltip.style.display = "none"; - return; - } - - console.log("STORED:"); - console.log(state.doc.content.firstChild!.content); - - // Otherwise, reposition it and update its content - this.tooltip.style.display = ""; - const { from, to } = state.selection; - const start = view.coordsAtPos(from), end = view.coordsAtPos(to); - // The box in which the tooltip is positioned, to use as base - const box = this.tooltip.offsetParent!.getBoundingClientRect(); - // Find a center-ish x position from the selection endpoints (when - // crossing lines, end may be more to the left) - const left = Math.max((start.left + end.left) / 2, start.left + 3); - this.tooltip.style.left = (left - box.left) * this.editorProps.ScreenToLocalTransform().Scale + "px"; - const width = Math.abs(start.left - end.left) / 2 * this.editorProps.ScreenToLocalTransform().Scale; - const mid = Math.min(start.left, end.left) + width; - - this.tooltip.style.width = "auto"; - this.tooltip.style.bottom = (box.bottom - start.top) * this.editorProps.ScreenToLocalTransform().Scale + "px"; - } - - destroy() { this.tooltip.remove(); } -} diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss deleted file mode 100644 index 2a38fe118..000000000 --- a/src/client/util/TooltipTextMenu.scss +++ /dev/null @@ -1,372 +0,0 @@ -@import "../views/globalCssVariables"; -.ProseMirror-menu-dropdown-wrap { - display: inline-block; - position: relative; -} - -.ProseMirror-menu-dropdown { - vertical-align: 1px; - cursor: pointer; - position: relative; - padding: 0 15px 0 4px; - background: white; - border-radius: 2px; - text-align: left; - font-size: 12px; - white-space: nowrap; - margin-right: 4px; - - &:after { - content: ""; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid currentColor; - opacity: .6; - position: absolute; - right: 4px; - top: calc(50% - 2px); - } -} - -.ProseMirror-menu-submenu-wrap { - position: relative; - margin-right: -4px; -} - -.ProseMirror-menu-dropdown-menu, -.ProseMirror-menu-submenu { - font-size: 12px; - background: white; - border: 1px solid rgb(223, 223, 223); - min-width: 40px; - z-index: 50000; - position: absolute; - box-sizing: content-box; - - .ProseMirror-menu-dropdown-item { - cursor: pointer; - z-index: 100000; - text-align: left; - padding: 3px; - - &:hover { - background-color: $light-color-secondary; - } - } -} - - -.ProseMirror-menu-submenu-label:after { - content: ""; - border-top: 4px solid transparent; - border-bottom: 4px solid transparent; - border-left: 4px solid currentColor; - opacity: .6; - position: absolute; - right: 4px; - top: calc(50% - 4px); -} - - .ProseMirror-icon { - display: inline-block; - // line-height: .8; - // vertical-align: -2px; /* Compensate for padding */ - // padding: 2px 8px; - cursor: pointer; - - &.ProseMirror-menu-disabled { - cursor: default; - } - - svg { - fill:white; - height: 1em; - } - - span { - vertical-align: text-top; - } - } - -.wrapper { - position: absolute; - pointer-events: all; - display: flex; - align-items: center; - transform: translateY(-85px); - - height: 35px; - background: #323232; - border-radius: 6px; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - -} - -.tooltipMenu, .basic-tools { - z-index: 20000; - pointer-events: all; - padding: 3px; - padding-bottom: 5px; - display: flex; - align-items: center; - - .ProseMirror-example-setup-style hr { - padding: 2px 10px; - border: none; - margin: 1em 0; - } - - .ProseMirror-example-setup-style hr:after { - content: ""; - display: block; - height: 1px; - background-color: silver; - line-height: 2px; - } -} - -.menuicon { - width: 25px; - height: 25px; - cursor: pointer; - text-align: center; - line-height: 25px; - margin: 0 2px; - border-radius: 3px; - - &:hover { - background-color: black; - - #link-drag { - background-color: black; - } - } - - &> * { - margin-top: 50%; - margin-left: 50%; - transform: translate(-50%, -50%); - } - - svg { - fill: inherit; - width: 18px; - height: 18px; - } -} - -.menuicon-active { - width: 25px; - height: 25px; - cursor: pointer; - text-align: center; - line-height: 25px; - margin: 0 2px; - border-radius: 3px; - - &:hover { - background-color: black; - } - - &> * { - margin-top: 50%; - margin-left: 50%; - transform: translate(-50%, -50%); - } - - svg { - fill: greenyellow; - width: 18px; - height: 18px; - } -} - -.colorPicker { - position: relative; - - svg { - width: 18px; - height: 18px; - // margin-top: 11px; - } - - .buttonColor { - position: absolute; - top: 24px; - left: 1px; - width: 24px; - height: 4px; - margin-top: 0; - } -} - -#link-drag { - background-color: #323232; -} - -.underline svg { - margin-top: 13px; -} - - .font-size-indicator { - font-size: 12px; - padding-right: 0px; - } - .summarize{ - color: white; - height: 20px; - text-align: center; - } - - -.brush{ - display: inline-block; - width: 1em; - height: 1em; - stroke-width: 0; - stroke: currentColor; - fill: currentColor; - margin-right: 15px; -} - -.brush-active{ - display: inline-block; - width: 1em; - height: 1em; - stroke-width: 3; - fill: greenyellow; - margin-right: 15px; -} - -.dragger-wrapper { - color: #eee; - height: 22px; - padding: 0 5px; - box-sizing: content-box; - cursor: grab; - - .dragger { - width: 18px; - height: 100%; - display: flex; - justify-content: space-evenly; - } - - .dragger-line { - width: 2px; - height: 100%; - background-color: black; - } -} - -.button-dropdown-wrapper { - display: flex; - align-content: center; - - &:hover { - background-color: black; - } -} - -.buttonSettings-dropdown { - - &.ProseMirror-menu-dropdown { - width: 10px; - height: 25px; - margin: 0; - padding: 0 2px; - background-color: #323232; - text-align: center; - - &:after { - border-top: 4px solid white; - right: 2px; - } - - &:hover { - background-color: black; - } - } - - &.ProseMirror-menu-dropdown-menu { - min-width: 150px; - left: -27px; - top: 31px; - background-color: #323232; - border: 1px solid #4d4d4d; - color: $light-color-secondary; - // border: none; - // border: 1px solid $light-color-secondary; - border-radius: 0 6px 6px 6px; - padding: 3px; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - - .ProseMirror-menu-dropdown-item{ - cursor: default; - - &:last-child { - border-bottom: none; - } - - &:hover { - background-color: #323232; - } - - .button-setting, .button-setting-disabled { - padding: 2px; - border-radius: 2px; - } - - .button-setting:hover { - cursor: pointer; - background-color: black; - } - - .separated-button { - border-top: 1px solid $light-color-secondary; - padding-top: 6px; - } - - input { - color: black; - border: none; - border-radius: 1px; - padding: 3px; - } - - button { - padding: 6px; - background-color: #323232; - border: 1px solid black; - border-radius: 1px; - - &:hover { - background-color: black; - } - } - } - - - } -} - -.colorPicker-wrapper { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin-top: 3px; - margin-left: -3px; - width: calc(100% + 6px); -} - -button.colorPicker { - width: 20px; - height: 20px; - border-radius: 15px !important; - margin: 3px; - border: none !important; - - &.active { - border: 2px solid white !important; - } -} \ No newline at end of file diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx deleted file mode 100644 index 1c15dca7f..000000000 --- a/src/client/util/TooltipTextMenu.tsx +++ /dev/null @@ -1,1042 +0,0 @@ -import { Dropdown, icons, MenuItem } from "prosemirror-menu"; //no import css -import { Mark, MarkType, Node as ProsNode, NodeType, ResolvedPos, Schema } from "prosemirror-model"; -import { wrapInList } from 'prosemirror-schema-list'; -import { EditorState, NodeSelection, TextSelection } from "prosemirror-state"; -import { EditorView } from "prosemirror-view"; -import { Doc, Field, Opt } from "../../new_fields/Doc"; -import { Utils } from "../../Utils"; -import { DocServer } from "../DocServer"; -import { FieldViewProps } from "../views/nodes/FieldView"; -import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; -import { LinkManager } from "./LinkManager"; -import { schema } from "./RichTextSchema"; -import "./TooltipTextMenu.scss"; -import { Cast, NumCast, StrCast } from '../../new_fields/Types'; -import { updateBullets } from './ProsemirrorExampleTransfer'; -import { DocumentDecorations } from '../views/DocumentDecorations'; -import { SelectionManager } from './SelectionManager'; -import { PastelSchemaPalette, DarkPastelSchemaPalette } from '../../new_fields/SchemaHeaderField'; -const { toggleMark } = require("prosemirror-commands"); - -//appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc. -export class TooltipTextMenu { - public static Toolbar: HTMLDivElement | undefined; - - // editor state properties - private view: EditorView; - private editorProps: FieldViewProps & FormattedTextBoxProps | undefined; - - private fontStyles: Mark[] = []; - private fontSizes: Mark[] = []; - private _marksToDoms: Map = new Map(); - private _collapsed: boolean = false; - - // editor doms - public tooltip: HTMLElement = document.createElement("div"); - private wrapper: HTMLDivElement = document.createElement("div"); - - // editor button doms - private colorDom?: Node; - private colorDropdownDom?: Node; - private linkDom?: Node; - private highighterDom?: Node; - private highlighterDropdownDom?: Node; - private linkDropdownDom?: Node; - private _brushdom?: Node; - private _brushDropdownDom?: Node; - private fontSizeDom?: Node; - private fontStyleDom?: Node; - private basicTools?: HTMLElement; - - static createDiv(className: string) { const div = document.createElement("div"); div.className = className; return div; } - static createSpan(className: string) { const div = document.createElement("span"); div.className = className; return div; } - constructor(view: EditorView) { - this.view = view; - - // initialize the tooltip -- sets this.tooltip - this.initTooltip(view); - - // initialize the wrapper - this.wrapper = TooltipTextMenu.createDiv("wrapper"); - this.wrapper.appendChild(this.tooltip); - - TooltipTextMenu.Toolbar = this.wrapper; - } - - private async initTooltip(view: EditorView) { - const self = this; - this.tooltip = TooltipTextMenu.createDiv("tooltipMenu"); - this.basicTools = TooltipTextMenu.createDiv("basic-tools"); - - const svgIcon = (name: string, title: string = name, dpath: string) => { - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("viewBox", "-100 -100 650 650"); - const path = document.createElementNS('http://www.w3.org/2000/svg', "path"); - path.setAttributeNS(null, "d", dpath); - svg.appendChild(path); - - const span = TooltipTextMenu.createSpan(name + " menuicon"); - span.title = title; - span.appendChild(svg); - - return span; - }; - - const basicItems = [ // init basicItems in minimized toolbar -- paths to svgs are obtained from fontawesome - { mark: schema.marks.strong, dom: svgIcon("strong", "Bold", "M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z") }, - { mark: schema.marks.em, dom: svgIcon("em", "Italic", "M320 48v32a16 16 0 0 1-16 16h-62.76l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1-16 16H16a16 16 0 0 1-16-16v-32a16 16 0 0 1 16-16h62.76l80-320H112a16 16 0 0 1-16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z") }, - { mark: schema.marks.underline, dom: svgIcon("underline", "Underline", "M32 64h32v160c0 88.22 71.78 160 160 160s160-71.78 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H272a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1-160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0-16-16H32a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z") }, - ]; - const items = [ // init items in full size toolbar - { mark: schema.marks.strikethrough, dom: svgIcon("strikethrough", "Strikethrough", "M496 224H293.9l-87.17-26.83A43.55 43.55 0 0 1 219.55 112h66.79A49.89 49.89 0 0 1 331 139.58a16 16 0 0 0 21.46 7.15l42.94-21.47a16 16 0 0 0 7.16-21.46l-.53-1A128 128 0 0 0 287.51 32h-68a123.68 123.68 0 0 0-123 135.64c2 20.89 10.1 39.83 21.78 56.36H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm-180.24 96A43 43 0 0 1 336 356.45 43.59 43.59 0 0 1 292.45 400h-66.79A49.89 49.89 0 0 1 181 372.42a16 16 0 0 0-21.46-7.15l-42.94 21.47a16 16 0 0 0-7.16 21.46l.53 1A128 128 0 0 0 224.49 480h68a123.68 123.68 0 0 0 123-135.64 114.25 114.25 0 0 0-5.34-24.36z") }, - { mark: schema.marks.superscript, dom: svgIcon("superscript", "Superscript", "M496 160h-16V16a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 64h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z") }, - { mark: schema.marks.subscript, dom: svgIcon("subscript", "Subscript", "M496 448h-16V304a16 16 0 0 0-16-16h-48a16 16 0 0 0-14.29 8.83l-16 32A16 16 0 0 0 400 352h16v96h-16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h96a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zM336 64h-67a16 16 0 0 0-13.14 6.87l-79.9 115-79.9-115A16 16 0 0 0 83 64H16A16 16 0 0 0 0 80v48a16 16 0 0 0 16 16h33.48l77.81 112-77.81 112H16a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h67a16 16 0 0 0 13.14-6.87l79.9-115 79.9 115A16 16 0 0 0 269 448h67a16 16 0 0 0 16-16v-48a16 16 0 0 0-16-16h-33.48l-77.81-112 77.81-112H336a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16z") }, - ]; - - basicItems.map(({ dom, mark }) => this.basicTools ?.appendChild(dom.cloneNode(true))); - basicItems.concat(items).forEach(({ dom, mark }) => { - this.tooltip.appendChild(dom); - this._marksToDoms.set(mark, dom); - - //pointer down handler to activate button effects - dom.addEventListener("pointerdown", e => { - this.view.focus(); - if (dom.contains(e.target as Node)) { - e.preventDefault(); - e.stopPropagation(); - toggleMark(mark)(this.view.state, this.view.dispatch, this.view); - this.updateHighlightStateOfButtons(); - } - }); - }); - - // summarize menu - this.highighterDom = this.createHighlightTool().render(this.view).dom; - this.highlighterDropdownDom = this.createHighlightDropdown().render(this.view).dom; - this.tooltip.appendChild(this.highighterDom); - this.tooltip.appendChild(this.highlighterDropdownDom); - - // color menu - this.colorDom = this.createColorTool().render(this.view).dom; - this.colorDropdownDom = this.createColorDropdown().render(this.view).dom; - this.tooltip.appendChild(this.colorDom); - this.tooltip.appendChild(this.colorDropdownDom); - - // link menu - this.linkDom = this.createLinkTool().render(this.view).dom; - this.linkDropdownDom = this.createLinkDropdown("").render(this.view).dom; - this.tooltip.appendChild(this.linkDom); - this.tooltip.appendChild(this.linkDropdownDom); - - // list of font styles - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 7 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 8 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 9 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 10 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 12 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 14 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 16 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 18 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 20 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 24 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 32 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 48 })); - this.fontSizes.push(schema.marks.pFontSize.create({ fontSize: 72 })); - - // font sizes - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Times New Roman" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Arial" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Georgia" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Comic Sans MS" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Tahoma" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Impact" })); - this.fontStyles.push(schema.marks.pFontFamily.create({ family: "Crimson Text" })); - - - // init brush tool - this._brushdom = this.createBrushTool().render(this.view).dom; - this.tooltip.appendChild(this._brushdom); - this._brushDropdownDom = this.createBrushDropdown().render(this.view).dom; - this.tooltip.appendChild(this._brushDropdownDom); - - // summarizer tool - const summarizer = new MenuItem({ - title: "Summarize", - label: "Summarize", - icon: icons.join, - css: "fill:white;", - class: "menuicon", - execEvent: "", - run: (state, dispatch) => TooltipTextMenu.insertSummarizer(state, dispatch) - }); - this.tooltip.appendChild(summarizer.render(this.view).dom); - - // list types dropdown - const listDropdownTypes = [{ mapStyle: "bullet", label: ":" }, { mapStyle: "decimal", label: "1.1" }, { mapStyle: "multi", label: "A.1" }, { label: "X" }]; - const listTypes = new Dropdown(listDropdownTypes.map(({ mapStyle, label }) => - new MenuItem({ - title: "Set Bullet Style", - label: label, - execEvent: "", - class: "dropdown-item", - css: "color: black; width: 40px;", - enable() { return true; }, - run() { - const marks = self.view.state.storedMarks || (view.state.selection.$to.parentOffset && view.state.selection.$from.marks()); - if (!wrapInList(schema.nodes.ordered_list)(view.state, (tx2: any) => { - const tx3 = updateBullets(tx2, schema, mapStyle); - marks && tx3.ensureMarks([...marks]); - marks && tx3.setStoredMarks([...marks]); - - view.dispatch(tx2); - })) { - const tx2 = view.state.tr; - const tx3 = updateBullets(tx2, schema, mapStyle); - marks && tx3.ensureMarks([...marks]); - marks && tx3.setStoredMarks([...marks]); - - view.dispatch(tx3); - } - } - })), { label: ":", css: "color:black; width: 40px;" }); - this.tooltip.appendChild(listTypes.render(this.view).dom); - - await this.updateFromDash(view, undefined, undefined); - - const draggerWrapper = TooltipTextMenu.createDiv("dragger-wrapper"); - const dragger = TooltipTextMenu.createDiv("dragger"); - dragger.appendChild(TooltipTextMenu.createSpan("dragger-line")); - dragger.appendChild(TooltipTextMenu.createSpan("dragger-line")); - dragger.appendChild(TooltipTextMenu.createSpan("dragger-line")); - draggerWrapper.appendChild(dragger); - this.wrapper.appendChild(draggerWrapper); - this.setupDragElementInteractions(draggerWrapper); - } - - setupDragElementInteractions(elmnt: HTMLElement) { - var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; - if (elmnt) { - // if present, the header is where you move the DIV from: - elmnt.onpointerdown = dragPointerDown; - elmnt.ondblclick = onClick; - } - const self = this; - - function dragPointerDown(e: PointerEvent) { - e = e || window.event; - e.preventDefault(); - // get the mouse cursor position at startup: - pos3 = e.clientX; - pos4 = e.clientY; - document.onpointerup = closeDragElement; - // call a function whenever the cursor moves: - document.onpointermove = elementDrag; - } - - function onClick(e: MouseEvent) { - self._collapsed = !self._collapsed; - const children = self.wrapper.childNodes; - if (self._collapsed && children.length > 0) { - self.wrapper.removeChild(self.tooltip); - self.basicTools && self.wrapper.prepend(self.basicTools); - } - else { - self.wrapper.prepend(self.tooltip); - self.basicTools && self.wrapper.removeChild(self.basicTools); - } - } - - function elementDrag(e: PointerEvent) { - e = e || window.event; - //e.preventDefault(); - // calculate the new cursor position: - pos1 = pos3 - e.clientX; - pos2 = pos4 - e.clientY; - pos3 = e.clientX; - pos4 = e.clientY; - // set the element's new position: - // elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; - // elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; - - self.wrapper.style.top = (self.wrapper.offsetTop - pos2) + "px"; - self.wrapper.style.left = (self.wrapper.offsetLeft - pos1) + "px"; - } - - function closeDragElement() { - // stop moving when mouse button is released: - document.onpointerup = null; - document.onpointermove = null; - } - } - - //label of dropdown will change to given label - updateFontSizeDropdown(label: string) { - //font SIZES - const fontSizeBtns: MenuItem[] = []; - const self = this; - this.fontSizes.forEach(mark => - fontSizeBtns.push(new MenuItem({ - title: "Set Font Size", - label: String(mark.attrs.fontSize), - execEvent: "", - class: "dropdown-item", - css: "color: black; width: 50px;", - enable() { return true; }, - run() { - const size = mark.attrs.fontSize; - if (size) { self.updateFontSizeDropdown(String(size) + " pt"); } - if (self.editorProps) { - const ruleProvider = self.editorProps.ruleProvider; - const heading = NumCast(self.editorProps.Document.heading); - if (ruleProvider && heading) { - ruleProvider["ruleSize_" + heading] = size; - } - } - TooltipTextMenu.setMark(self.view.state.schema.marks.pFontSize.create({ fontSize: size }), self.view.state, self.view.dispatch); - } - }))); - - const newfontSizeDom = (new Dropdown(fontSizeBtns, { label: label, css: "color:black; min-width: 60px;" }) as MenuItem).render(this.view).dom; - if (this.fontSizeDom) { - this.tooltip.replaceChild(newfontSizeDom, this.fontSizeDom); - } - else { - this.tooltip.appendChild(newfontSizeDom); - } - this.fontSizeDom = newfontSizeDom; - } - - //label of dropdown will change to given label - updateFontStyleDropdown(label: string) { - //font STYLES - const fontBtns: MenuItem[] = []; - const self = this; - this.fontStyles.forEach(mark => - fontBtns.push(new MenuItem({ - title: "Set Font Family", - label: mark.attrs.family, - execEvent: "", - class: "dropdown-item", - css: "color: black; font-family: " + mark.attrs.family + ", sans-serif; width: 125px;", - enable() { return true; }, - run() { - const fontName = mark.attrs.family; - if (fontName) { self.updateFontStyleDropdown(fontName); } - if (self.editorProps) { - const ruleProvider = self.editorProps.ruleProvider; - const heading = NumCast(self.editorProps.Document.heading); - if (ruleProvider && heading) { - ruleProvider["ruleFont_" + heading] = fontName; - } - } - TooltipTextMenu.setMark(self.view.state.schema.marks.pFontFamily.create({ family: fontName }), self.view.state, self.view.dispatch); - } - }))); - - const newfontStyleDom = (new Dropdown(fontBtns, { label: label, css: "color:black; width: 125px;" }) as MenuItem).render(this.view).dom; - if (this.fontStyleDom) { - this.tooltip.replaceChild(newfontStyleDom, this.fontStyleDom); - } - else { - this.tooltip.appendChild(newfontStyleDom); - } - this.fontStyleDom = newfontStyleDom; - } - async getTextLinkTargetTitle() { - const node = this.view.state.selection.$from.nodeAfter; - const link = node && node.marks.find(m => m.type.name === "link"); - if (link) { - const href = link.attrs.href; - if (href) { - if (href.indexOf(Utils.prepend("/doc/")) === 0) { - const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0]; - if (linkclicked) { - const linkDoc = await DocServer.GetRefField(linkclicked); - if (linkDoc instanceof Doc) { - const anchor1 = await Cast(linkDoc.anchor1, Doc); - const anchor2 = await Cast(linkDoc.anchor2, Doc); - const currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document; - if (currentDoc && anchor1 && anchor2) { - if (Doc.AreProtosEqual(currentDoc, anchor1)) { - return StrCast(anchor2.title); - } - if (Doc.AreProtosEqual(currentDoc, anchor2)) { - return StrCast(anchor1.title); - } - } - } - } - } else { - return href; - } - } else { - return link.attrs.title; - } - } - } - - // LINK TOOL - createLinkTool(active: boolean = false) { - return new MenuItem({ - title: "Link tool", - label: "Link tool", - icon: icons.link, - css: "fill:white;", - class: active ? "menuicon-active" : "menuicon", - execEvent: "", - run: async (state, dispatch) => { }, - active: (state) => true - }); - } - - createLinkDropdown(targetTitle: string) { - const input = document.createElement("input"); - - // menu item for input for hyperlink url - // TODO: integrate search to allow users to search for a doc to link to - const linkInfo = new MenuItem({ - title: "", - execEvent: "", - class: "button-setting-disabled", - css: "", - render() { - const p = document.createElement("p"); - p.textContent = "Linked to:"; - - input.type = "text"; - input.placeholder = "Enter URL"; - if (targetTitle) input.value = targetTitle; - input.onclick = (e: MouseEvent) => { - input.select(); - input.focus(); - }; - - const div = document.createElement("div"); - div.appendChild(p); - div.appendChild(input); - return div; - }, - enable() { return false; }, - run(p1, p2, p3, event) { event.stopPropagation(); } - }); - - // menu item to update/apply the hyperlink to the selected text - const linkApply = new MenuItem({ - title: "", - execEvent: "", - class: "", - css: "", - render() { - const button = document.createElement("button"); - button.className = "link-url-button"; - button.textContent = "Apply hyperlink"; - return button; - }, - enable() { return false; }, - run: async (state, dispatch, view, event) => { - event.stopPropagation(); - let node = this.view.state.selection.$from.nodeAfter; - let link = this.view.state.schema.mark(this.view.state.schema.marks.link, { href: input.value, location: "onRight" }); - this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link)); - this.view.dispatch(this.view.state.tr.addMark(this.view.state.selection.from, this.view.state.selection.to, link)); - node = this.view.state.selection.$from.nodeAfter; - link = node && node.marks.find(m => m.type.name === "link"); - - // update link menu - const linkDom = self.createLinkTool(true).render(self.view).dom; - const linkDropdownDom = self.createLinkDropdown(await self.getTextLinkTargetTitle()).render(self.view).dom; - self.linkDom && self.tooltip.replaceChild(linkDom, self.linkDom); - self.linkDropdownDom && self.tooltip.replaceChild(linkDropdownDom, self.linkDropdownDom); - self.linkDom = linkDom; - self.linkDropdownDom = linkDropdownDom; - } - }); - - // menu item to remove the link - // TODO: allow this to be undoable - const self = this; - const deleteLink = new MenuItem({ - title: "Delete link", - execEvent: "", - class: "separated-button", - css: "", - render() { - const button = document.createElement("button"); - button.textContent = "Remove link"; - - const wrapper = document.createElement("div"); - wrapper.appendChild(button); - return wrapper; - }, - enable() { return true; }, - async run() { - // delete the link - const node = self.view.state.selection.$from.nodeAfter; - const link = node && node.marks.find(m => m.type === self.view.state.schema.marks.link); - const href = link!.attrs.href; - if (href ?.indexOf(Utils.prepend("/doc/")) === 0) { - const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0]; - linkclicked && DocServer.GetRefField(linkclicked).then(async linkDoc => { - if (linkDoc instanceof Doc) { - LinkManager.Instance.deleteLink(linkDoc); - self.view.dispatch(self.view.state.tr.removeMark(self.view.state.selection.from, self.view.state.selection.to, self.view.state.schema.marks.link)); - } - }); - } - // update link menu - const linkDom = self.createLinkTool(false).render(self.view).dom; - const linkDropdownDom = self.createLinkDropdown("").render(self.view).dom; - self.linkDom && self.tooltip.replaceChild(linkDom, self.linkDom); - self.linkDropdownDom && self.tooltip.replaceChild(linkDropdownDom, self.linkDropdownDom); - self.linkDom = linkDom; - self.linkDropdownDom = linkDropdownDom; - } - }); - - return new Dropdown(targetTitle ? [linkInfo, linkApply, deleteLink] : [linkInfo, linkApply], { class: "buttonSettings-dropdown" }) as MenuItem; - } - - public MakeLinkToSelection = (linkDocId: string, title: string, location: string, targetDocId: string): string => { - const link = this.view.state.schema.marks.link.create({ href: Utils.prepend("/doc/" + linkDocId), title: title, location: location, targetId: targetDocId }); - this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link). - addMark(this.view.state.selection.from, this.view.state.selection.to, link)); - return this.view.state.selection.$from.nodeAfter ?.text || ""; - } - - // SUMMARIZER TOOL - static insertSummarizer(state: EditorState, dispatch: any) { - if (!state.selection.empty) { - const mark = state.schema.marks.summarize.create(); - const tr = state.tr.addMark(state.selection.from, state.selection.to, mark); - const content = tr.selection.content(); - const newNode = state.schema.nodes.summary.create({ visibility: false, text: content, textslice: content.toJSON() }); - dispatch ?.(tr.replaceSelectionWith(newNode).removeMark(tr.selection.from - 1, tr.selection.from, mark)); - } - } - - // HIGHLIGHTER TOOL - createHighlightTool() { - return new MenuItem({ - title: "Highlight", - css: "fill:white;", - class: "menuicon", - execEvent: "", - render() { - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("viewBox", "-100 -100 650 650"); - const path = document.createElementNS('http://www.w3.org/2000/svg', "path"); - path.setAttributeNS(null, "d", "M0 479.98L99.92 512l35.45-35.45-67.04-67.04L0 479.98zm124.61-240.01a36.592 36.592 0 0 0-10.79 38.1l13.05 42.83-50.93 50.94 96.23 96.23 50.86-50.86 42.74 13.08c13.73 4.2 28.65-.01 38.15-10.78l35.55-41.64-173.34-173.34-41.52 35.44zm403.31-160.7l-63.2-63.2c-20.49-20.49-53.38-21.52-75.12-2.35L190.55 183.68l169.77 169.78L530.27 154.4c19.18-21.74 18.15-54.63-2.35-75.13z"); - svg.appendChild(path); - - const color = TooltipTextMenu.createDiv("buttonColor"); - color.style.backgroundColor = TooltipTextMenuManager.Instance.highlighter.toString(); - - const wrapper = TooltipTextMenu.createDiv("colorPicker"); - wrapper.appendChild(svg); - wrapper.appendChild(color); - return wrapper; - }, - run: (state, dispatch) => TooltipTextMenu.insertHighlight(TooltipTextMenuManager.Instance.highlighter, state, dispatch) - }); - } - - static insertHighlight(color: String, state: EditorState, dispatch: any) { - if (!state.selection.empty) { - toggleMark(state.schema.marks.marker, { highlight: color })(state, dispatch); - } - } - - createHighlightDropdown() { - // menu item for color picker - const self = this; - const colors = new MenuItem({ - title: "", - execEvent: "", - class: "button-setting-disabled", - css: "", - render() { - const p = document.createElement("p"); - p.textContent = "Change highlight:"; - - const colorsWrapper = TooltipTextMenu.createDiv("colorPicker-wrapper"); - - const colors = [ - PastelSchemaPalette.get("pink2"), - PastelSchemaPalette.get("purple4"), - PastelSchemaPalette.get("bluegreen1"), - PastelSchemaPalette.get("yellow4"), - PastelSchemaPalette.get("red2"), - PastelSchemaPalette.get("bluegreen7"), - PastelSchemaPalette.get("bluegreen5"), - PastelSchemaPalette.get("orange1"), - "white", - "transparent" - ]; - - colors.forEach(color => { - const button = document.createElement("button"); - button.className = color === TooltipTextMenuManager.Instance.highlighter ? "colorPicker active" : "colorPicker"; - if (color) { - button.style.backgroundColor = color; - button.textContent = color === "transparent" ? "X" : ""; - button.onclick = e => { - TooltipTextMenuManager.Instance.highlighter = color; - - TooltipTextMenu.insertHighlight(TooltipTextMenuManager.Instance.highlighter, self.view.state, self.view.dispatch); - - // update color menu - const highlightDom = self.createHighlightTool().render(self.view).dom; - const highlightDropdownDom = self.createHighlightDropdown().render(self.view).dom; - self.highighterDom && self.tooltip.replaceChild(highlightDom, self.highighterDom); - self.highlighterDropdownDom && self.tooltip.replaceChild(highlightDropdownDom, self.highlighterDropdownDom); - self.highighterDom = highlightDom; - self.highlighterDropdownDom = highlightDropdownDom; - }; - } - colorsWrapper.appendChild(button); - }); - - const div = document.createElement("div"); - div.appendChild(p); - div.appendChild(colorsWrapper); - return div; - }, - enable() { return false; }, - run(p1, p2, p3, event) { - event.stopPropagation(); - } - }); - - return new Dropdown([colors], { class: "buttonSettings-dropdown" }) as MenuItem; - } - - // COLOR TOOL - createColorTool() { - return new MenuItem({ - title: "Color", - css: "fill:white;", - class: "menuicon", - execEvent: "", - render() { - const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); - svg.setAttribute("viewBox", "-100 -100 650 650"); - const path = document.createElementNS('http://www.w3.org/2000/svg', "path"); - path.setAttributeNS(null, "d", "M204.3 5C104.9 24.4 24.8 104.3 5.2 203.4c-37 187 131.7 326.4 258.8 306.7 41.2-6.4 61.4-54.6 42.5-91.7-23.1-45.4 9.9-98.4 60.9-98.4h79.7c35.8 0 64.8-29.6 64.9-65.3C511.5 97.1 368.1-26.9 204.3 5zM96 320c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm32-128c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128-64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32zm128 64c-17.7 0-32-14.3-32-32s14.3-32 32-32 32 14.3 32 32-14.3 32-32 32z"); - svg.appendChild(path); - - const color = TooltipTextMenu.createDiv("buttonColor"); - color.style.backgroundColor = TooltipTextMenuManager.Instance.color.toString(); - - const wrapper = TooltipTextMenu.createDiv("colorPicker"); - wrapper.appendChild(svg); - wrapper.appendChild(color); - return wrapper; - }, - run: (state, dispatch) => TooltipTextMenu.insertColor(TooltipTextMenuManager.Instance.color, state, dispatch) - }); - } - - static insertColor(color: String, state: EditorState, dispatch: any) { - const colorMark = state.schema.mark(state.schema.marks.pFontColor, { color: color }); - if (state.selection.empty) { - dispatch(state.tr.addStoredMark(colorMark)); - } else { - this.setMark(colorMark, state, dispatch); - } - } - - createColorDropdown() { - // menu item for color picker - const self = this; - const colors = new MenuItem({ - title: "", - execEvent: "", - class: "button-setting-disabled", - css: "", - render() { - const p = document.createElement("p"); - p.textContent = "Change color:"; - - const colorsWrapper = TooltipTextMenu.createDiv("colorPicker-wrapper"); - - const colors = [ - DarkPastelSchemaPalette.get("pink2"), - DarkPastelSchemaPalette.get("purple4"), - DarkPastelSchemaPalette.get("bluegreen1"), - DarkPastelSchemaPalette.get("yellow4"), - DarkPastelSchemaPalette.get("red2"), - DarkPastelSchemaPalette.get("bluegreen7"), - DarkPastelSchemaPalette.get("bluegreen5"), - DarkPastelSchemaPalette.get("orange1"), - "#757472", - "#000" - ]; - - colors.forEach(color => { - const button = document.createElement("button"); - button.className = color === TooltipTextMenuManager.Instance.color ? "colorPicker active" : "colorPicker"; - if (color) { - button.style.backgroundColor = color; - button.onclick = e => { - TooltipTextMenuManager.Instance.color = color; - - TooltipTextMenu.insertColor(TooltipTextMenuManager.Instance.color, self.view.state, self.view.dispatch); - - // update color menu - const colorDom = self.createColorTool().render(self.view).dom; - const colorDropdownDom = self.createColorDropdown().render(self.view).dom; - self.colorDom && self.tooltip.replaceChild(colorDom, self.colorDom); - self.colorDropdownDom && self.tooltip.replaceChild(colorDropdownDom, self.colorDropdownDom); - self.colorDom = colorDom; - self.colorDropdownDom = colorDropdownDom; - }; - } - colorsWrapper.appendChild(button); - }); - - const div = document.createElement("div"); - div.appendChild(p); - div.appendChild(colorsWrapper); - return div; - }, - enable() { return false; }, - run(p1, p2, p3, event) { event.stopPropagation(); } - }); - - return new Dropdown([colors], { class: "buttonSettings-dropdown" }) as MenuItem; - } - - // BRUSH TOOL - createBrushTool(active: boolean = false) { - const icon = { - height: 32, width: 32, - path: "M30.828 1.172c-1.562-1.562-4.095-1.562-5.657 0l-5.379 5.379-3.793-3.793-4.243 4.243 3.326 3.326-14.754 14.754c-0.252 0.252-0.358 0.592-0.322 0.921h-0.008v5c0 0.552 0.448 1 1 1h5c0 0 0.083 0 0.125 0 0.288 0 0.576-0.11 0.795-0.329l14.754-14.754 3.326 3.326 4.243-4.243-3.793-3.793 5.379-5.379c1.562-1.562 1.562-4.095 0-5.657zM5.409 30h-3.409v-3.409l14.674-14.674 3.409 3.409-14.674 14.674z" - }; - const self = this; - return new MenuItem({ - title: "Brush tool", - label: "Brush tool", - icon: icon, - css: "fill:white;", - class: active ? "menuicon-active" : "menuicon", - execEvent: "", - run: (state, dispatch) => { - this.brush_function(state, dispatch); - - // update dropdown with marks - const newBrushDropdowndom = self.createBrushDropdown().render(self.view).dom; - self._brushDropdownDom && self.tooltip.replaceChild(newBrushDropdowndom, self._brushDropdownDom); - self._brushDropdownDom = newBrushDropdowndom; - }, - active: (state) => true - }); - } - - brush_function(state: EditorState, dispatch: any) { - if (TooltipTextMenuManager.Instance._brushIsEmpty) { - // get marks in the selection - const selected_marks = new Set(); - const { from, to } = state.selection as TextSelection; - state.doc.nodesBetween(from, to, (node) => node.marks ?.forEach(m => selected_marks.add(m))); - - if (this._brushdom && selected_marks.size >= 0) { - TooltipTextMenuManager.Instance._brushMarks = selected_marks; - const newbrush = this.createBrushTool(true).render(this.view).dom; - this.tooltip.replaceChild(newbrush, this._brushdom); - this._brushdom = newbrush; - TooltipTextMenuManager.Instance._brushIsEmpty = !TooltipTextMenuManager.Instance._brushIsEmpty; - } - } - else { - const { from, to, $from } = this.view.state.selection; - if (this._brushdom) { - if (!this.view.state.selection.empty && $from && $from.nodeAfter) { - if (TooltipTextMenuManager.Instance._brushMarks && to - from > 0) { - this.view.dispatch(this.view.state.tr.removeMark(from, to)); - Array.from(TooltipTextMenuManager.Instance._brushMarks).filter(m => m.type !== schema.marks.user_mark).forEach((mark: Mark) => { - TooltipTextMenu.setMark(mark, this.view.state, this.view.dispatch); - }); - } - } - else { - const newbrush = this.createBrushTool(false).render(this.view).dom; - this.tooltip.replaceChild(newbrush, this._brushdom); - this._brushdom = newbrush; - TooltipTextMenuManager.Instance._brushIsEmpty = !TooltipTextMenuManager.Instance._brushIsEmpty; - } - } - } - } - - createBrushDropdown(active: boolean = false) { - let label = "Stored marks: "; - if (TooltipTextMenuManager.Instance._brushMarks && TooltipTextMenuManager.Instance._brushMarks.size > 0) { - TooltipTextMenuManager.Instance._brushMarks.forEach((mark: Mark) => label += mark.type.name + ", "); - label = label.substring(0, label.length - 2); - } else { - label = "No marks are currently stored"; - } - - const brushInfo = new MenuItem({ - title: "", - label: label, - execEvent: "", - class: "button-setting-disabled", - css: "", - enable() { return false; }, - run(p1, p2, p3, event) { event.stopPropagation(); } - }); - - const self = this; - const input = document.createElement("input"); - const clearBrush = new MenuItem({ - title: "Clear brush", - execEvent: "", - class: "separated-button", - css: "", - render() { - const button = document.createElement("button"); - button.textContent = "Clear brush"; - - input.textContent = "editme"; - input.style.width = "75px"; - input.style.height = "30px"; - input.style.background = "white"; - input.setAttribute("contenteditable", "true"); - input.style.whiteSpace = "nowrap"; - input.type = "text"; - input.placeholder = "Enter URL"; - input.onpointerdown = (e: PointerEvent) => { - e.stopPropagation(); - e.preventDefault(); - }; - input.onclick = (e: MouseEvent) => { - input.select(); - input.focus(); - }; - input.onkeypress = (e: KeyboardEvent) => { - if (e.key === "Enter") { - TooltipTextMenuManager.Instance._brushMarks && TooltipTextMenuManager.Instance._brushMap.set(input.value, TooltipTextMenuManager.Instance._brushMarks); - input.style.background = "lightGray"; - } - }; - - const wrapper = document.createElement("div"); - wrapper.appendChild(input); - wrapper.appendChild(button); - return wrapper; - }, - enable() { return true; }, - run() { - TooltipTextMenuManager.Instance._brushIsEmpty = true; - TooltipTextMenuManager.Instance._brushMarks = new Set(); - - // update brush tool - // TODO: this probably isn't very clean - const newBrushdom = self.createBrushTool().render(self.view).dom; - self._brushdom && self.tooltip.replaceChild(newBrushdom, self._brushdom); - self._brushdom = newBrushdom; - const newBrushDropdowndom = self.createBrushDropdown().render(self.view).dom; - self._brushDropdownDom && self.tooltip.replaceChild(newBrushDropdowndom, self._brushDropdownDom); - self._brushDropdownDom = newBrushDropdowndom; - } - }); - - const hasMarks = TooltipTextMenuManager.Instance._brushMarks && TooltipTextMenuManager.Instance._brushMarks.size > 0; - return new Dropdown(hasMarks ? [brushInfo, clearBrush] : [brushInfo], { class: "buttonSettings-dropdown" }) as MenuItem; - } - - static setMark = (mark: Mark, state: EditorState, dispatch: any) => { - if (mark) { - const node = (state.selection as NodeSelection).node; - if (node ?.type === schema.nodes.ordered_list) { - let attrs = node.attrs; - if (mark.type === schema.marks.pFontFamily) attrs = { ...attrs, setFontFamily: mark.attrs.family }; - if (mark.type === schema.marks.pFontSize) attrs = { ...attrs, setFontSize: mark.attrs.fontSize }; - if (mark.type === schema.marks.pFontColor) attrs = { ...attrs, setFontColor: mark.attrs.color }; - const tr = updateBullets(state.tr.setNodeMarkup(state.selection.from, node.type, attrs), state.schema); - dispatch(tr.setSelection(new NodeSelection(tr.doc.resolve(state.selection.from)))); - } else { - toggleMark(mark.type, mark.attrs)(state, (tx: any) => { - const { from, $from, to, empty } = tx.selection; - if (!tx.doc.rangeHasMark(from, to, mark.type)) { - toggleMark(mark.type, mark.attrs)({ tr: tx, doc: tx.doc, selection: tx.selection, storedMarks: tx.storedMarks }, dispatch); - } else dispatch(tx); - }); - } - } - } - - // called by Prosemirror - update(view: EditorView, lastState: EditorState | undefined) { this.updateFromDash(view, lastState, this.editorProps); } - //updates the tooltip menu when the selection changes - public async updateFromDash(view: EditorView, lastState: EditorState | undefined, props: any) { - if (!view) { - console.log("no editor? why?"); - return; - } - this.view = view; - DocumentDecorations.Instance.showTextBar(); - props && (this.editorProps = props); - - // Don't do anything if the document/selection didn't change - if (!lastState || !lastState.doc.eq(view.state.doc) || !lastState.selection.eq(view.state.selection)) { - - // UPDATE LINK DROPDOWN - const linkTarget = await this.getTextLinkTargetTitle(); - const linkDom = this.createLinkTool(linkTarget ? true : false).render(this.view).dom; - const linkDropdownDom = this.createLinkDropdown(linkTarget).render(this.view).dom; - this.linkDom && this.tooltip.replaceChild(linkDom, this.linkDom); - this.linkDropdownDom && this.tooltip.replaceChild(linkDropdownDom, this.linkDropdownDom); - this.linkDom = linkDom; - this.linkDropdownDom = linkDropdownDom; - - //UPDATE FONT STYLE DROPDOWN - const activeStyles = this.activeFontFamilyOnSelection(); - this.updateFontStyleDropdown(activeStyles.length === 1 ? activeStyles[0] : activeStyles.length ? "various" : "default"); - - //UPDATE FONT SIZE DROPDOWN - const activeSizes = this.activeFontSizeOnSelection(); - this.updateFontSizeDropdown(activeSizes.length === 1 ? String(activeSizes[0]) + " pt" : activeSizes.length ? "various" : "default"); - - //UPDATE ALL OTHER BUTTONS - this.updateHighlightStateOfButtons(); - } - } - - updateHighlightStateOfButtons() { - Array.from(this._marksToDoms.values()).forEach(val => val.style.fill = "white"); - this.activeMarksOnSelection().filter(mark => this._marksToDoms.has(mark)).forEach(mark => - this._marksToDoms.get(mark)!.style.fill = "greenyellow"); - - // keeps brush tool highlighted if active when switching between textboxes - if (!TooltipTextMenuManager.Instance._brushIsEmpty && this._brushdom) { - const newbrush = this.createBrushTool(true).render(this.view).dom; - this.tooltip.replaceChild(newbrush, this._brushdom); - this._brushdom = newbrush; - } - } - - //finds fontSize at start of selection - activeFontSizeOnSelection() { - //current selection - const state = this.view.state; - const activeSizes: number[] = []; - const pos = this.view.state.selection.$from; - const ref_node: ProsNode = this.reference_node(pos); - if (ref_node && ref_node !== this.view.state.doc && ref_node.isText) { - ref_node.marks.forEach(m => m.type === state.schema.marks.pFontSize && activeSizes.push(m.attrs.fontSize)); - } - return activeSizes; - } - //finds fontSize at start of selection - activeFontFamilyOnSelection() { - //current selection - const state = this.view.state; - const activeFamilies: string[] = []; - const pos = this.view.state.selection.$from; - const ref_node: ProsNode = this.reference_node(pos); - if (ref_node && ref_node !== this.view.state.doc && ref_node.isText) { - ref_node.marks.forEach(m => m.type === state.schema.marks.pFontFamily && activeFamilies.push(m.attrs.family)); - } - return activeFamilies; - } - //finds all active marks on selection in given group - activeMarksOnSelection() { - const markGroup = Array.from(this._marksToDoms.keys()); - if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type); - //current selection - const { empty, ranges, $to } = this.view.state.selection as TextSelection; - const state = this.view.state; - let activeMarks: MarkType[] = []; - if (!empty) { - activeMarks = markGroup.filter(mark => { - const has = false; - for (let i = 0; !has && i < ranges.length; i++) { - return state.doc.rangeHasMark(ranges[i].$from.pos, ranges[i].$to.pos, mark); - } - return false; - }); - } - else { - const pos = this.view.state.selection.$from; - const ref_node: ProsNode = this.reference_node(pos); - if (ref_node !== null && ref_node !== this.view.state.doc) { - if (ref_node.isText) { - } - else { - return []; - } - activeMarks = markGroup.filter(mark_type => { - if (mark_type === state.schema.marks.pFontSize) { - return ref_node.marks.some(m => m.type.name === state.schema.marks.pFontSize.name); - } - const mark = state.schema.mark(mark_type); - return ref_node.marks.includes(mark); - }); - } - } - return activeMarks; - } - - reference_node(pos: ResolvedPos): ProsNode { - let ref_node: ProsNode = this.view.state.doc; - if (pos.nodeBefore !== null && pos.nodeBefore !== undefined) { - ref_node = pos.nodeBefore; - } - else if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) { - ref_node = pos.nodeAfter; - } - else if (pos.pos > 0) { - let skip = false; - for (let i: number = pos.pos - 1; i > 0; i--) { - this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode) => { - if (node.isLeaf && !skip) { - ref_node = node; - skip = true; - } - - }); - } - } - if (!ref_node.isLeaf && ref_node.childCount > 0) { - ref_node = ref_node.child(0); - } - return ref_node; - } - - destroy() { - // this.wrapper.remove(); - } -} - - -export class TooltipTextMenuManager { - private static _instance: TooltipTextMenuManager; - private _isPinned: boolean = false; - - public pinnedX: number = 0; - public pinnedY: number = 0; - public unpinnedX: number = 0; - public unpinnedY: number = 0; - - public _brushMarks: Set | undefined; - public _brushMap: Map> = new Map(); - public _brushIsEmpty: boolean = true; - - public color: String = "#000"; - public highlighter: String = "transparent"; - - public activeMenu: TooltipTextMenu | undefined; - - static get Instance() { - if (!TooltipTextMenuManager._instance) { - TooltipTextMenuManager._instance = new TooltipTextMenuManager(); - } - return TooltipTextMenuManager._instance; - } - - public get isPinned() { return this._isPinned; } - - public toggleIsPinned() { this._isPinned = !this._isPinned; } -} diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx index 202bfe400..4441356dc 100644 --- a/src/client/views/DocumentButtonBar.tsx +++ b/src/client/views/DocumentButtonBar.tsx @@ -20,6 +20,7 @@ import React = require("react"); import { DocumentView } from './nodes/DocumentView'; import { ParentDocSelector } from './collections/ParentDocumentSelector'; import { CollectionDockingView } from './collections/CollectionDockingView'; +import RichTextMenu from '../util/RichTextMenu'; import { Id } from '../../new_fields/FieldSymbols'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; @@ -112,14 +113,15 @@ export class DocumentButtonBar extends React.Component<{ views: (DocumentView | const linkDrag = UndoManager.StartBatch("Drag Link"); this.view0 && DragManager.StartLinkDrag(this._linkButton.current, this.view0.props.Document, e.pageX, e.pageY, { dragComplete: dropEv => { - const linkDoc = dropEv.linkDragData?.linkDocument; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop - if (this.view0 && linkDoc && FormattedTextBox.ToolTipTextMenu) { + const linkDoc = dropEv.linkDragData?.linkDocument as Doc; // equivalent to !dropEve.aborted since linkDocument is only assigned on a completed drop + if (this.view0 && linkDoc) { const proto = Doc.GetProto(linkDoc); proto.sourceContext = this.view0.props.ContainingCollectionDoc; const anchor2Title = linkDoc.anchor2 instanceof Doc ? StrCast(linkDoc.anchor2.title) : "-untitled-"; + const anchor2Id = linkDoc.anchor2 instanceof Doc ? linkDoc.anchor2[Id] : ""; + const text = RichTextMenu.Instance.MakeLinkToSelection(linkDoc[Id], anchor2Title, e.ctrlKey ? "onRight" : "inTab", anchor2Id); if (linkDoc.anchor2 instanceof Doc) { - const text = FormattedTextBox.ToolTipTextMenu.MakeLinkToSelection(linkDoc[Id], anchor2Title, e.ctrlKey ? "onRight" : "inTab", linkDoc.anchor2[Id]); proto.title = text === "" ? proto.title : text + " to " + linkDoc.anchor2.title; // TODO open to more descriptive descriptions of following in text link } } diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx index 799b3695c..32fea15fb 100644 --- a/src/client/views/DocumentDecorations.tsx +++ b/src/client/views/DocumentDecorations.tsx @@ -14,7 +14,6 @@ import { Docs, DocUtils } from "../documents/Documents"; import { DocumentManager } from "../util/DocumentManager"; import { DragManager } from "../util/DragManager"; import { SelectionManager } from "../util/SelectionManager"; -import { TooltipTextMenu } from '../util/TooltipTextMenu'; import { undoBatch, UndoManager } from "../util/UndoManager"; import { MINIMIZED_ICON_SIZE } from "../views/globalCssVariables.scss"; import { CollectionView } from "./collections/CollectionView"; @@ -26,8 +25,6 @@ import { IconBox } from "./nodes/IconBox"; import React = require("react"); import { DocumentType } from '../documents/DocumentTypes'; import { ScriptField } from '../../new_fields/ScriptField'; -import { render } from 'react-dom'; -import RichTextMenu from '../util/RichTextMenu'; const higflyout = require("@hig/flyout"); export const { anchorPoints } = higflyout; export const Flyout = higflyout.default; @@ -546,11 +543,6 @@ export class DocumentDecorations extends React.Component<{}, { value: string }> this.TextBar = ele; } } - public showTextBar = () => { - if (this.TextBar && TooltipTextMenu.Toolbar && Array.from(this.TextBar.childNodes).indexOf(TooltipTextMenu.Toolbar) === -1) { - this.TextBar.appendChild(TooltipTextMenu.Toolbar); - } - } render() { const bounds = this.Bounds; const seldoc = SelectionManager.SelectedDocuments().length ? SelectionManager.SelectedDocuments()[0] : undefined; diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx index 867be287f..b9f601a9a 100644 --- a/src/client/views/nodes/DocumentContentsView.tsx +++ b/src/client/views/nodes/DocumentContentsView.tsx @@ -61,7 +61,7 @@ export class DocumentContentsView extends React.Componentawaiting layout

"; - const layout = Cast(this.layoutDoc[StrCast(this.layoutDoc.layoutKey, "layout")], "string"); + const layout = Cast(this.layoutDoc[StrCast(this.layoutDoc.layoutKey, this.layoutDoc === this.props.Document ? this.props.layoutKey : "layout")], "string"); if (layout === undefined) { return this.props.Document.data ? "" : diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx index 60842bcb0..1cd5cdcea 100644 --- a/src/client/views/nodes/FormattedTextBox.tsx +++ b/src/client/views/nodes/FormattedTextBox.tsx @@ -29,8 +29,6 @@ import buildKeymap from "../../util/ProsemirrorExampleTransfer"; import { inpRules } from "../../util/RichTextRules"; import { DashDocCommentView, FootnoteView, ImageResizeView, DashDocView, OrderedListView, schema, SummaryView } from "../../util/RichTextSchema"; import { SelectionManager } from "../../util/SelectionManager"; -import { TooltipLinkingMenu } from "../../util/TooltipLinkingMenu"; -import { TooltipTextMenu } from "../../util/TooltipTextMenu"; import { undoBatch, UndoManager } from "../../util/UndoManager"; import { DocAnnotatableComponent } from "../DocComponent"; import { DocumentButtonBar } from '../DocumentButtonBar'; @@ -77,7 +75,6 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & public static LayoutString(fieldStr: string) { return FieldView.LayoutString(FormattedTextBox, fieldStr); } public static blankState = () => EditorState.create(FormattedTextBox.Instance.config); public static Instance: FormattedTextBox; - public static ToolTipTextMenu: TooltipTextMenu | undefined = undefined; public ProseRef?: HTMLDivElement; private _ref: React.RefObject = React.createRef(); private _scrollRef: React.RefObject = React.createRef(); @@ -127,10 +124,6 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & return ""; } - public static getToolTip(ev: EditorView) { - return this.ToolTipTextMenu ? this.ToolTipTextMenu : this.ToolTipTextMenu = new TooltipTextMenu(ev); - } - @undoBatch public setFontColor(color: string) { const view = this._editorView!; @@ -485,11 +478,10 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & schema, plugins: [ inputRules(inpRules), - this.tooltipTextMenuPlugin(), + this.richTextMenuPlugin(), history(), keymap(this._keymap), keymap(baseKeymap), - // this.tooltipLinkingMenuPlugin(), new Plugin({ props: { attributes: { class: "ProseMirror-example-setup-style" } @@ -1038,25 +1030,16 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & } } - tooltipTextMenuPlugin() { + richTextMenuPlugin() { const self = FormattedTextBox; return new Plugin({ view(newView) { - // return self.ToolTipTextMenu = FormattedTextBox.getToolTip(newView); RichTextMenu.Instance.changeView(newView); return RichTextMenu.Instance; } }); } - tooltipLinkingMenuPlugin() { - const myprops = this.props; - return new Plugin({ - view(_editorView) { - return new TooltipLinkingMenu(_editorView, myprops); - } - }); - } onBlur = (e: any) => { //DictationManager.Controls.stop(false); if (this._undoTyping) { @@ -1138,7 +1121,6 @@ export class FormattedTextBox extends DocAnnotatableComponent<(FieldViewProps & if (this.props.isSelected()) { // TODO: ftong --> update from dash in richtextmenu RichTextMenu.Instance.updateFromDash(this._editorView!, undefined, this.props); - // FormattedTextBox.ToolTipTextMenu!.updateFromDash(this._editorView!, undefined, this.props); } else if (FormattedTextBoxComment.textBox === this) { FormattedTextBoxComment.Hide(); } diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts index 5375c8ac8..e502a06b8 100644 --- a/src/server/authentication/models/current_user_utils.ts +++ b/src/server/authentication/models/current_user_utils.ts @@ -151,14 +151,14 @@ export class CurrentUserUtils { }); // setup a color picker const color = Docs.Create.ColorDocument({ - title: "color picker", width: 400, dropAction: "alias", forceActive: true, removeDropProperties: new List(["dropAction", "forceActive"]) + title: "color picker", width: 300, dropAction: "alias", forceActive: true, removeDropProperties: new List(["dropAction", "forceActive"]) }); return Docs.Create.ButtonDocument({ 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" + width: 500, lockedPosition: true, chromeStatus: "disabled", title: "tools stack" }), onClick: ScriptField.MakeScript("this.targetContainer.proto = this.sourcePanel"), }); -- cgit v1.2.3-70-g09d2 From 5a6f6868dc25b2b24c6c7f4a7bc25670e6a35f47 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 22 Jan 2020 12:08:20 -0500 Subject: fixed template/scripting problem. added collectionDoc parameter for onClick scripts. made buxton layout update hero image on click. --- src/client/documents/Documents.ts | 3 ++- src/client/util/DropConverter.ts | 4 ++-- .../collections/CollectionStackingViewFieldColumn.tsx | 2 +- src/client/views/collections/CollectionTreeView.tsx | 13 +++++++------ .../CollectionMulticolumnView.tsx | 6 +++++- src/client/views/nodes/DocumentView.tsx | 19 ++++++++++--------- src/new_fields/Doc.ts | 5 +---- 7 files changed, 28 insertions(+), 24 deletions(-) (limited to 'src/client/util') diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts index d7292837c..634c223a7 100644 --- a/src/client/documents/Documents.ts +++ b/src/client/documents/Documents.ts @@ -88,6 +88,7 @@ export interface DocumentOptions { defaultBackgroundColor?: string; dropAction?: dropActionType; chromeStatus?: string; + disableLOD?: boolean; columnWidth?: number; fontSize?: number; curPage?: number; @@ -330,7 +331,7 @@ export namespace Docs { */ export namespace Create { - const delegateKeys = ["x", "y", "width", "height", "panX", "panY", "nativeWidth", "nativeHeight", "dropAction", "annotationOn", "forceActive", "fitWidth"]; + const delegateKeys = ["x", "y", "width", "height", "panX", "panY", "nativeWidth", "nativeHeight", "dropAction", "annotationOn", "forceActive", "fitWidth", "diableLOD"]; /** * This function receives the relevant document prototype and uses diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts index ff0e19347..3e2cc6a2e 100644 --- a/src/client/util/DropConverter.ts +++ b/src/client/util/DropConverter.ts @@ -7,7 +7,7 @@ import { StrCast } from "../../new_fields/Types"; import { Docs } from "../documents/Documents"; import { ScriptField } from "../../new_fields/ScriptField"; -export function makeTemplate(doc: Doc, suppressTitle = false): boolean { +export function makeTemplate(doc: Doc): boolean { const layoutDoc = doc.layout instanceof Doc && doc.layout.isTemplateField ? doc.layout : doc; const layout = StrCast(layoutDoc.layout).match(/fieldKey={'[^']*'}/)![0]; const fieldKey = layout.replace("fieldKey={'", "").replace(/'}$/, ""); @@ -16,7 +16,7 @@ export function makeTemplate(doc: Doc, suppressTitle = false): boolean { docs.forEach(d => { if (!StrCast(d.title).startsWith("-")) { any = true; - Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc), suppressTitle); + Doc.MakeMetadataFieldTemplate(d, Doc.GetProto(layoutDoc)); } else if (d.type === DocumentType.COL) { any = makeTemplate(d) || any; } diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx index 229a23294..f0dcadb5b 100644 --- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx +++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx @@ -145,7 +145,7 @@ export class CollectionStackingViewFieldColumn extends React.Component { - const { TextDocument, ImageDocument } = Docs.Create; + const { TextDocument, ImageDocument, MulticolumnDocument } = Docs.Create; const { Document } = this.props; const fallback = "http://www.cs.brown.edu/~bcz/face.gif"; + const imageRack = MulticolumnDocument([], { title: "data", height: 100 }); const wrapper = Docs.Create.StackingDocument([ ImageDocument(fallback, { title: "hero" }), + imageRack, ...["short_description", "year", "company", "degrees_of_freedom"].map(key => TextDocument({ title: key })) - ], { autoHeight: true, chromeStatus: "disabled" }); - wrapper.disableLOD = true; - wrapper.isTemplateDoc = makeTemplate(wrapper, true); + ], { autoHeight: true, chromeStatus: "disabled", disableLOD: true, title: "detailed layout stack" }); + wrapper.isTemplateDoc = makeTemplate(wrapper); + imageRack.onChildClick = ScriptField.MakeFunction(`containingCollection.resolvedDataDoc.hero = copyField(this.data)`, { containingCollection: Doc.name }); const cardLayout = ImageDocument(fallback); - const proto = Doc.GetProto(cardLayout); - proto.layout = ImageBox.LayoutString("hero"); + cardLayout.proto!.layout = ImageBox.LayoutString("hero"); cardLayout.showTitle = "title"; cardLayout.showTitleHover = "titlehover"; cardLayout.isTemplateField = true; // make this document act like a template field diff --git a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx index 70e56183c..b9b367106 100644 --- a/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx +++ b/src/client/views/collections/collectionMulticolumn/CollectionMulticolumnView.tsx @@ -4,7 +4,7 @@ import { documentSchema } from '../../../../new_fields/documentSchemas'; import { CollectionSubView, SubCollectionViewProps } from '../CollectionSubView'; import * as React from "react"; import { Doc } from '../../../../new_fields/Doc'; -import { NumCast, StrCast, BoolCast } from '../../../../new_fields/Types'; +import { NumCast, StrCast, BoolCast, ScriptCast } from '../../../../new_fields/Types'; import { ContentFittingDocumentView } from '../../nodes/ContentFittingDocumentView'; import { Utils } from '../../../../Utils'; import "./collectionMulticolumnView.scss"; @@ -186,6 +186,8 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu return Transform.Identity(); // type coersion, this case should never be hit } + @computed get onChildClickHandler() { return ScriptCast(this.Document.onChildClick); } + /** * @returns the resolved list of rendered child documents, displayed * at their resolved pixel widths, each separated by a resizer. @@ -206,9 +208,11 @@ export class CollectionMulticolumnView extends CollectionSubView(MulticolumnDocu {...this.props} Document={layout} DataDocument={layout.resolvedDataDoc as Doc} + CollectionDoc={this.props.Document} PanelWidth={() => this.lookupPixels(layout)} PanelHeight={() => PanelHeight() - (BoolCast(Document.showWidthLabels) ? 20 : 0)} getTransform={() => this.lookupIndividualTransform(layout)} + onClick={this.onChildClickHandler} /> (Docu SelectionManager.DeselectAll(); Doc.UnBrushDoc(this.props.Document); } else if (this.onClickHandler && this.onClickHandler.script) { - this.onClickHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document }, console.log); + this.onClickHandler.script.run({ this: this.Document.isTemplateField && this.props.DataDoc ? this.props.DataDoc : this.props.Document, containingCollection: this.props.ContainingCollectionDoc }, console.log); } else if (this.Document.type === DocumentType.BUTTON) { ScriptBox.EditButtonScript("On Button Clicked ...", this.props.Document, "onClick", e.clientX, e.clientY); } else if (this.props.Document.isButton === "Selector") { // this should be moved to an OnClick script @@ -552,7 +552,7 @@ export class DocumentView extends DocComponent(Docu const docTemplate = Docs.Create.FreeformDocument([fieldTemplate], { title: doc.title + "_layout", width: width + 20, height: Math.max(100, height + 45) }); - Doc.MakeMetadataFieldTemplate(fieldTemplate, Doc.GetProto(docTemplate), true); + Doc.MakeMetadataFieldTemplate(fieldTemplate, Doc.GetProto(docTemplate)); Doc.ApplyTemplateTo(docTemplate, dataDoc || doc, "layoutCustom", undefined); } else { doc.layoutKey = "layoutCustom"; @@ -659,14 +659,14 @@ export class DocumentView extends DocComponent(Docu @undoBatch @action - setCustomView = - (custom: boolean): void => { - if (this.props.ContainingCollectionView?.props.DataDoc || this.props.ContainingCollectionView?.props.Document.isTemplateDoc) { - Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.Document); - } else { - custom ? DocumentView.makeCustomViewClicked(this.props.Document, this.props.DataDoc) : DocumentView.makeNativeViewClicked(this.props.Document); + setCustomView = + (custom: boolean): void => { + if (this.props.ContainingCollectionView?.props.DataDoc || this.props.ContainingCollectionView?.props.Document.isTemplateDoc) { + Doc.MakeMetadataFieldTemplate(this.props.Document, this.props.ContainingCollectionView.props.Document); + } else { + custom ? DocumentView.makeCustomViewClicked(this.props.Document, this.props.DataDoc) : DocumentView.makeNativeViewClicked(this.props.Document); + } } - } @undoBatch @action @@ -996,6 +996,7 @@ export class DocumentView extends DocComponent(Docu color: StrCast(this.Document.color), outline: highlighting && !borderRounding ? `${highlightColors[fullDegree]} ${highlightStyles[fullDegree]} ${localScale}px` : "solid 0px", border: highlighting && borderRounding ? `${highlightStyles[fullDegree]} ${highlightColors[fullDegree]} ${localScale}px` : undefined, + boxShadow: this.props.Document.isTemplateField ? "black 0.2vw 0.2vw 0.8vw" : undefined, background: this.layoutDoc.type === DocumentType.FONTICON || this.layoutDoc.viewType === CollectionViewType.Linear ? undefined : backgroundColor, width: animwidth, height: animheight, diff --git a/src/new_fields/Doc.ts b/src/new_fields/Doc.ts index 674c7cc25..9620f753f 100644 --- a/src/new_fields/Doc.ts +++ b/src/new_fields/Doc.ts @@ -614,7 +614,7 @@ export namespace Doc { templateField.templateField = metadataFieldKey; templateField.isTemplateField = true; templateField.title = metadataFieldKey; - templateField.showTitle = suppressTitle ? undefined : "title"; + // templateField.showTitle = suppressTitle ? undefined : "title"; // move any data that the template field had been rendering over to the template doc so that things will // appear the same after the conversion to a template has completed. (otherwise, there would be no data for the template to render) @@ -636,9 +636,6 @@ export namespace Doc { templateField.defaultBackgroundColor = templateField.backgroundColor; } - // finally, make the templateField be a delegate of the templateDoc so that it can find all the fields needed to render itselt - // (note that this is only useful to see the template doc itself which may not be necessary for many use cases) - templateField.proto = templateDoc; return true; } -- cgit v1.2.3-70-g09d2 From bfebed91e12abca324d7a638adeb1da9755a9057 Mon Sep 17 00:00:00 2001 From: bob Date: Wed, 22 Jan 2020 15:41:04 -0500 Subject: basic cleanup for warnings --- src/client/apis/youtube/YoutubeBox.tsx | 2 +- src/client/util/ProseMirrorEditorView.tsx | 74 ---------------------- src/client/util/RichTextMenu.tsx | 68 ++++++++++---------- src/client/util/RichTextSchema.tsx | 2 +- src/client/views/EditableView.tsx | 2 +- src/client/views/MainView.tsx | 2 +- .../views/collections/CollectionPivotView.tsx | 11 ++-- .../views/collections/CollectionTreeView.tsx | 2 +- .../views/collections/CollectionViewChromes.tsx | 3 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 4 +- .../collectionFreeForm/MarqueeOptionsMenu.tsx | 3 + src/client/views/linking/LinkMenu.tsx | 2 +- src/client/views/nodes/WebBox.tsx | 2 +- src/client/views/search/SearchItem.tsx | 1 - src/new_fields/Doc.ts | 10 +-- src/new_fields/documentSchemas.ts | 1 + src/server/Websocket/Websocket.ts | 2 - 17 files changed, 59 insertions(+), 132 deletions(-) delete mode 100644 src/client/util/ProseMirrorEditorView.tsx (limited to 'src/client/util') diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx index fd3d9e2f1..d654e2530 100644 --- a/src/client/apis/youtube/YoutubeBox.tsx +++ b/src/client/apis/youtube/YoutubeBox.tsx @@ -46,7 +46,7 @@ export class YoutubeBox extends React.Component { * When component mounts, last search's results are laoded in based on the back up stored * in the document of the props. */ - async componentWillMount() { + async componentDidMount() { //DocServer.getYoutubeChannels(); const castedSearchBackUp = Cast(this.props.Document.cachedSearchResults, Doc); const awaitedBackUp = await castedSearchBackUp; diff --git a/src/client/util/ProseMirrorEditorView.tsx b/src/client/util/ProseMirrorEditorView.tsx deleted file mode 100644 index b42adfbb4..000000000 --- a/src/client/util/ProseMirrorEditorView.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import React from "react"; -import { EditorView } from "prosemirror-view"; -import { EditorState } from "prosemirror-state"; - -export interface ProseMirrorEditorViewProps { - /* EditorState instance to use. */ - editorState: EditorState; - /* Called when EditorView produces new EditorState. */ - onEditorState: (editorState: EditorState) => any; -} - -/** - * This wraps ProseMirror's EditorView into React component. - * This code was found on https://discuss.prosemirror.net/t/using-with-react/904 - */ -export class ProseMirrorEditorView extends React.Component { - - private _editorView?: EditorView; - - _createEditorView = (element: HTMLDivElement | null) => { - if (element !== null) { - this._editorView = new EditorView(element, { - state: this.props.editorState, - dispatchTransaction: this.dispatchTransaction, - }); - } - } - - dispatchTransaction = (tx: any) => { - // In case EditorView makes any modification to a state we funnel those - // modifications up to the parent and apply to the EditorView itself. - const editorState = this.props.editorState.apply(tx); - if (this._editorView) { - this._editorView.updateState(editorState); - } - this.props.onEditorState(editorState); - } - - focus() { - if (this._editorView) { - this._editorView.focus(); - } - } - - componentWillReceiveProps(nextProps: { editorState: EditorState; }) { - // In case we receive new EditorState through props — we apply it to the - // EditorView instance. - if (this._editorView) { - if (nextProps.editorState !== this.props.editorState) { - this._editorView.updateState(nextProps.editorState); - } - } - } - - componentWillUnmount() { - if (this._editorView) { - this._editorView.destroy(); - } - } - - shouldComponentUpdate() { - // Note that EditorView manages its DOM itself so we'd ratrher don't mess - // with it. - return false; - } - - render() { - // Render just an empty div which is then used as a container for an - // EditorView instance. - return ( -
- ); - } -} \ No newline at end of file diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx index f070589ae..eb5c90654 100644 --- a/src/client/util/RichTextMenu.tsx +++ b/src/client/util/RichTextMenu.tsx @@ -73,7 +73,7 @@ export default class RichTextMenu extends AntimodeMenu { this.fontSizeOptions = [ { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize }, { mark: schema.marks.pFontSize.create({ fontSize: 8 }), title: "Set font size", label: "8pt", command: this.changeFontSize }, - { mark: schema.marks.pFontSize.create({ fontSize: 9 }), title: "Set font size", label: "8pt", command: this.changeFontSize }, + { mark: schema.marks.pFontSize.create({ fontSize: 9 }), title: "Set font size", label: "9pt", command: this.changeFontSize }, { mark: schema.marks.pFontSize.create({ fontSize: 10 }), title: "Set font size", label: "10pt", command: this.changeFontSize }, { mark: schema.marks.pFontSize.create({ fontSize: 12 }), title: "Set font size", label: "12pt", command: this.changeFontSize }, { mark: schema.marks.pFontSize.create({ fontSize: 14 }), title: "Set font size", label: "14pt", command: this.changeFontSize }, @@ -312,22 +312,22 @@ export default class RichTextMenu extends AntimodeMenu { } return ( - ); } - createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[]): JSX.Element { + createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element { const items = options.map(({ title, label, hidden, style }) => { if (hidden) { return label === activeOption ? - : - ; + : + ; } return label === activeOption ? - : - ; + : + ; }); const self = this; @@ -340,19 +340,19 @@ export default class RichTextMenu extends AntimodeMenu { } }); } - return ; + return ; } - createNodesDropdown(activeOption: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[]): JSX.Element { + createNodesDropdown(activeOption: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element { const items = options.map(({ title, label, hidden, style }) => { if (hidden) { return label === activeOption ? - : - ; + : + ; } return label === activeOption ? - : - ; + : + ; }); const self = this; @@ -363,7 +363,7 @@ export default class RichTextMenu extends AntimodeMenu { } }); } - return ; + return ; } changeFontSize = (mark: Mark, view: EditorView) => { @@ -472,7 +472,7 @@ export default class RichTextMenu extends AntimodeMenu {
; return ( - + ); } @@ -535,21 +535,21 @@ export default class RichTextMenu extends AntimodeMenu { ; const dropdownContent = -
+

Change font color:

{this.fontColors.map(color => { if (color) { return this.activeFontColor === color ? - : - ; + : + ; } })}
; return ( - + ); } @@ -582,7 +582,7 @@ export default class RichTextMenu extends AntimodeMenu { } const button = - ; @@ -594,15 +594,15 @@ export default class RichTextMenu extends AntimodeMenu { {this.highlightColors.map(color => { if (color) { return this.activeHighlightColor === color ? - : - ; + : + ; } })}
; return ( - + ); } @@ -635,7 +635,7 @@ export default class RichTextMenu extends AntimodeMenu {
; return ( - + ); } @@ -773,7 +773,7 @@ export default class RichTextMenu extends AntimodeMenu { render() { - const row1 =
{[ + const row1 =
{[ this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)), this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)), this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)), @@ -787,14 +787,14 @@ export default class RichTextMenu extends AntimodeMenu { this.createButton("indent", "Summarize", undefined, this.insertSummarizer), ]}
; - const row2 =
-
- {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions), - this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions), - this.createNodesDropdown(this.activeListType, this.listTypeOptions)]} + const row2 =
+
+ {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"), + this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"), + this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes")]}
-
- {this.getDragger()} @@ -864,12 +864,12 @@ class ButtonDropdown extends React.Component { : <> {this.props.button} - } - {this.showDropdown ? this.props.dropdownContent : <>} + {this.showDropdown ? this.props.dropdownContent : (null)}
); } diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 1f70cafc4..5751c8c7e 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -306,7 +306,7 @@ export const marks: { [index: string]: MarkSpec } = { } }], toDOM(node: any) { - return node.attrs.color ? ['span', { style: 'color:' + node.attrs.color }] : ['span', { style: 'color: black' }]; + return node.attrs.color ? ['span', { style: 'color:' + node.attrs.color }] : ['span', 0]; } }, diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx index 0d677b8ce..394caba72 100644 --- a/src/client/views/EditableView.tsx +++ b/src/client/views/EditableView.tsx @@ -66,7 +66,7 @@ export class EditableView extends React.Component { } @action - componentWillReceiveProps(nextProps: EditableProps) { + componentDidUpdate(nextProps: EditableProps) { // this is done because when autosuggest is turned on, the suggestions are passed in as a prop, // so when the suggestions are passed in, and no editing prop is passed in, it used to set it // to false. this will no longer do so -syip diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx index 0958c434a..79e0cfea5 100644 --- a/src/client/views/MainView.tsx +++ b/src/client/views/MainView.tsx @@ -64,7 +64,7 @@ export class MainView extends React.Component { public isPointerDown = false; - componentWillMount() { + componentDidMount() { const tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; diff --git a/src/client/views/collections/CollectionPivotView.tsx b/src/client/views/collections/CollectionPivotView.tsx index f23540529..aa68cc18f 100644 --- a/src/client/views/collections/CollectionPivotView.tsx +++ b/src/client/views/collections/CollectionPivotView.tsx @@ -28,6 +28,7 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) { if (!this.props.Document.facetCollection) { const facetCollection = Docs.Create.TreeDocument([], { title: "facetFilters", yMargin: 0, treeViewHideTitle: true }); facetCollection.target = this.props.Document; + facetCollection.dontCopyOnAlias = true; const scriptText = "setDocFilter(containingTreeView.target, heading, this.title, checked)"; const script = CompileScript(scriptText, { @@ -122,8 +123,8 @@ export class CollectionPivotView extends CollectionSubView(doc => doc) { const facetCollection = Cast(this.props.Document?.facetCollection, Doc, null); const flyout = (
- {this._allFacets.map(facet =>