aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/InteractionUtils.tsx (renamed from src/client/util/InteractionUtils.ts)69
-rw-r--r--src/client/util/SettingsManager.scss136
-rw-r--r--src/client/util/SettingsManager.tsx131
3 files changed, 330 insertions, 6 deletions
diff --git a/src/client/util/InteractionUtils.ts b/src/client/util/InteractionUtils.tsx
index 2e4e8c7ca..1fe95474c 100644
--- a/src/client/util/InteractionUtils.ts
+++ b/src/client/util/InteractionUtils.tsx
@@ -8,12 +8,69 @@ export namespace InteractionUtils {
const REACT_POINTER_PEN_BUTTON = 0;
const ERASER_BUTTON = 5;
- export function GetMyTargetTouches(e: TouchEvent | React.TouchEvent, prevPoints: Map<number, React.Touch>): React.Touch[] {
+ export function CreatePolyline(points: { X: number, Y: number }[], left: number, top: number, color: string, width: number) {
+ const pts = points.reduce((acc: string, pt: { X: number, Y: number }) => acc + `${pt.X - left},${pt.Y - top} `, "");
+ return (
+ <polyline
+ points={pts}
+ style={{
+ fill: "none",
+ stroke: color,
+ strokeWidth: width
+ }}
+ />
+ );
+ }
+
+ export class MultiTouchEvent<T extends React.TouchEvent | TouchEvent> {
+ 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<React.TouchEvent>) => void,
+ ): MultiTouchEventDisposer {
+ const onMultiTouchStartHandler = (e: Event) => startFunc(e, (e as CustomEvent<MultiTouchEvent<React.TouchEvent>>).detail);
+ // const onMultiTouchMoveHandler = moveFunc ? (e: Event) => moveFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).detail) : undefined;
+ // const onMultiTouchEndHandler = endFunc ? (e: Event) => endFunc(e, (e as CustomEvent<MultiTouchEvent<TouchEvent>>).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<React.TouchEvent | TouchEvent>, prevPoints: Map<number, React.Touch>, ignorePen: boolean): React.Touch[] {
const myTouches = new Array<React.Touch>();
- for (let i = 0; i < e.targetTouches.length; i++) {
- const pt = e.targetTouches.item(i);
- if (pt && prevPoints.has(pt.identifier)) {
- myTouches.push(pt);
+ 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;
@@ -23,7 +80,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/util/SettingsManager.scss b/src/client/util/SettingsManager.scss
new file mode 100644
index 000000000..7a0fb0741
--- /dev/null
+++ b/src/client/util/SettingsManager.scss
@@ -0,0 +1,136 @@
+@import "../views/globalCssVariables";
+
+.dialogue-box {
+ background-color: whitesmoke !important;
+ color: grey;
+ width: 450px;
+ height: 300px;
+
+ 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;
+ margin: 10px;
+ transition: transform 0.2s;
+ margin: 2px;
+ }
+}
+
+.settings-interface {
+ display: flex;
+ flex-direction: column;
+
+ button {
+ width: 100%;
+ align-self: center;
+ background: $darker-alt-accent;
+ margin-top: 4px;
+ }
+
+ .delete-button {
+ background: rgb(227, 86, 86);
+ }
+
+ .close-button {
+ position: absolute;
+ right: 1em;
+ top: 1em;
+ }
+
+ .settings-heading {
+ letter-spacing: .5em;
+ }
+
+
+ .settings-body {
+ display: flex;
+ justify-content: space-between;
+
+ .settings-type {
+ display: flex;
+ flex-direction: column;
+ flex-basis: 30%;
+
+ }
+
+ .settings-content {
+ padding-left: 1em;
+ padding-right: 1em;
+ display: flex;
+ flex-direction: column;
+ flex-basis: 70%;
+ justify-content: space-around;
+ text-align: left;
+
+ ::placeholder {
+ color: $intermediate-color;
+ }
+
+ input {
+ border-radius: 5px;
+ border: none;
+ padding: 4px;
+ min-width: 100%;
+ margin: 2px 0;
+ }
+
+ .error-text {
+ color: #C40233;
+ }
+
+ .success-text {
+ color: #009F6B;
+ }
+
+ p {
+ padding: 0 0 .1em .2em;
+ }
+
+ }
+ }
+
+ .focus-span {
+ text-decoration: underline;
+ }
+
+ h1 {
+ color: $dark-color;
+ text-transform: uppercase;
+ letter-spacing: 2px;
+ font-size: 120%;
+ }
+
+ .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;
+ }
+
+
+
+ }
+} \ No newline at end of file
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
new file mode 100644
index 000000000..ff0b22381
--- /dev/null
+++ b/src/client/util/SettingsManager.tsx
@@ -0,0 +1,131 @@
+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 { SelectionManager } from "./SelectionManager";
+import "./SettingsManager.scss";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Networking } from "../Network";
+
+library.add(fa.faWindowClose);
+
+@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;
+ @observable private settingsContent = "password";
+ @observable private errorText = "";
+ @observable private successText = "";
+ private curr_password_ref = React.createRef<HTMLInputElement>();
+ private new_password_ref = React.createRef<HTMLInputElement>();
+ private new_confirm_ref = React.createRef<HTMLInputElement>();
+
+ public open = action(() => {
+ SelectionManager.DeselectAll();
+ this.isOpen = true;
+ });
+
+ public close = action(() => {
+ this.isOpen = false;
+ });
+
+ constructor(props: {}) {
+ super(props);
+ 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)) {
+ this.changeAlertText("Hey, we're missing some fields!", "");
+ return;
+ }
+
+ const passwordBundle = {
+ curr_pass,
+ new_pass,
+ new_confirm
+ };
+
+ const { error } = await Networking.PostToServer('/internalResetPassword', passwordBundle);
+ if (error) {
+ this.changeAlertText("Uh oh! " + error[0].msg + "...", "");
+ return;
+ }
+
+ this.changeAlertText("", "Password successfully updated!");
+ }
+
+ @action
+ private changeAlertText = (errortxt: string, successtxt: string) => {
+ this.errorText = errortxt;
+ this.successText = successtxt;
+ }
+
+ @action
+ onClick = (event: any) => {
+ this.settingsContent = event.currentTarget.value;
+ this.errorText = "";
+ this.successText = "";
+ }
+
+ private get settingsInterface() {
+ return (
+ <div className={"settings-interface"}>
+ <div className="settings-heading">
+ <h1>settings</h1>
+ <div className={"close-button"} onClick={this.close}>
+ <FontAwesomeIcon icon={fa.faWindowClose} size={"lg"} />
+ </div>
+ </div>
+ <div className="settings-body">
+ <div className="settings-type">
+ <button onClick={this.onClick} value="password">reset password</button>
+ <button onClick={this.onClick} value="data">reset data</button>
+ </div>
+ {this.settingsContent === "password" ?
+ <div className="settings-content">
+ <input placeholder="current password" ref={this.curr_password_ref} />
+ <input placeholder="new password" ref={this.new_password_ref} />
+ <input placeholder="confirm new password" ref={this.new_confirm_ref} />
+ {this.errorText ? <div className="error-text">{this.errorText}</div> : undefined}
+ {this.successText ? <div className="success-text">{this.successText}</div> : undefined}
+ <button onClick={this.dispatchRequest}>submit</button>
+ <a href="/forgotPassword">forgot password?</a>
+
+ </div>
+ : undefined}
+ {this.settingsContent === "data" ?
+ <div className="settings-content">
+ <p>WARNING: <br />
+ THIS WILL ERASE ALL YOUR CURRENT DOCUMENTS STORED ON DASH. IF YOU WISH TO PROCEED, CLICK THE BUTTON BELOW.</p>
+ <button className="delete-button">DELETE</button>
+ </div>
+ : undefined}
+ </div>
+
+ </div>
+ );
+ }
+
+ render() {
+ return (
+ <MainViewModal
+ contents={this.settingsInterface}
+ isDisplayed={this.isOpen}
+ interactive={true}
+ dialogueBoxDisplayedOpacity={this.dialogueBoxOpacity}
+ overlayDisplayedOpacity={this.overlayOpacity}
+ />
+ );
+ }
+
+} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-17 20:43:15 +0000