foss/excalidraw
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Aakansha Doshi 2021-02-07 20:03:37 +05:30
parent 69a1b74e05
commit 63af29d345
7 changed files with 101 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/appState.ts
View File

@ -74,7 +74,7 @@ export const getDefaultAppState = (): Omit<
zoom: { value: 1 as NormalizedZoomValue, translation: { x: 0, y: 0 } },
viewModeEnabled: false,
networkSpeed: 0,
ping: "…",
networkPing: 0,
};
};
@ -156,7 +156,7 @@ const APP_STATE_STORAGE_CONF = (<
zoom: { browser: true, export: false },
viewModeEnabled: { browser: false, export: false },
networkSpeed: { browser: false, export: false },
ping: { browser: false, export: false },
networkPing: { browser: false, export: false },
});
const _clearAppStateForStorage = <ExportType extends "export" | "browser">(

21
src/components/App.tsx
View File

@ -292,7 +292,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
};
private scene: Scene;
private networkSpeedIntervalId?: any;
private pingIntervalId?: any;
private networkPingIntervalId?: any;
constructor(props: ExcalidrawProps) {
super(props);
const defaultAppState = getDefaultAppState();
@ -1028,21 +1028,24 @@ class App extends React.Component<ExcalidrawProps, AppState> {
}
private calculateNetStats = () => {
this.checkPing();
this.checkNetworkPing();
this.checkNetworkSpeed();
};
private checkPing = async () => {
private checkNetworkPing = async () => {
if (!this.state.showStats || !this.props.isCollaborating) {
clearTimeout(this.pingIntervalId);
clearTimeout(this.networkPingIntervalId);
return;
}
const ping = await simulatePing();
this.setState({ ping });
if (this.pingIntervalId) {
clearTimeout(this.pingIntervalId);
const networkPing = await simulatePing();
this.setState({ networkPing });
if (this.networkPingIntervalId) {
clearTimeout(this.networkPingIntervalId);
}
this.pingIntervalId = setTimeout(this.checkPing, NETWORK_SPEED_TIMEOUT_MS);
this.networkPingIntervalId = setTimeout(
this.checkNetworkPing,
NETWORK_SPEED_TIMEOUT_MS,
);
};
private checkNetworkSpeed = async () => {

16
src/components/Stats.tsx
View File

@ -11,7 +11,13 @@ import { t } from "../i18n";
import useIsMobile from "../is-mobile";
import { getTargetElements } from "../scene";
import { AppState } from "../types";
import { debounce, formatSpeedBits, getVersion, nFormatter } from "../utils";
import {
debounce,
formatSpeedBits,
formatTime,
getVersion,
nFormatter,
} from "../utils";
import { close } from "./icons";
import { Island } from "./Island";
import "./Stats.scss";
@ -182,7 +188,13 @@ export const Stats = (props: {
</tr>
<tr>
<td>{t("stats.ping")}</td>
<td>{props.appState.ping}</td>
<td>
{props.appState.networkPing === 0
? "…"
: props.appState.networkPing > 0
? formatTime(props.appState.networkPing)
: t("stats.error")}
</td>
</tr>
<tr>
<td>{t("stats.speed")}</td>

5
src/networkStats.ts
View File

@ -59,9 +59,8 @@ export const simulatePing = async () => {
method: "HEAD",
});
const endTime = new Date().getTime();
const delay = endTime - startTime;
return delay < 1000 ? `${delay} ms` : `${(delay / 1000).toFixed(1)} s`;
return endTime - startTime;
} catch (e) {
return "Error!";
return -1;
}
};

67
src/tests/__snapshots__/regressionTests.test.tsx.snap
View File

@ -40,6 +40,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -501,6 +502,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -968,6 +970,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -1744,6 +1747,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -1948,6 +1952,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -2406,6 +2411,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -2659,6 +2665,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -2823,6 +2830,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -3300,6 +3308,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -3608,6 +3617,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -3812,6 +3822,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -4056,6 +4067,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -4308,6 +4320,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -4691,6 +4704,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -4986,6 +5000,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -5293,6 +5308,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -5501,6 +5517,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -5665,6 +5682,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -6118,6 +6136,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -6436,6 +6455,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -8470,6 +8490,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -8832,6 +8853,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -9087,6 +9109,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -9340,6 +9363,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -9655,6 +9679,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -9819,6 +9844,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -9983,6 +10009,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -10147,6 +10174,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -10341,6 +10369,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -10535,6 +10564,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -10729,6 +10759,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -10923,6 +10954,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -11087,6 +11119,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -11251,6 +11284,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -11445,6 +11479,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -11609,6 +11644,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -11803,6 +11839,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -12519,6 +12556,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -12772,6 +12810,7 @@ Object {
"lastPointerDownWith": "touch",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -12874,6 +12913,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -12974,6 +13014,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -13138,6 +13179,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -13446,6 +13488,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -13754,6 +13797,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -13918,6 +13962,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -14114,6 +14159,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -14363,6 +14409,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -14687,6 +14734,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -15526,6 +15574,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -15834,6 +15883,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -16142,6 +16192,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -16521,6 +16572,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -16688,6 +16740,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -17009,6 +17062,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -17248,6 +17302,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -17503,6 +17558,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -17830,6 +17886,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -17930,6 +17987,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -18094,6 +18152,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -18915,6 +18974,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -19015,6 +19075,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -19769,6 +19830,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -20174,6 +20236,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -20447,6 +20510,7 @@ Object {
"lastPointerDownWith": "touch",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -20549,6 +20613,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -21047,6 +21112,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,
@ -21147,6 +21213,7 @@ Object {
"lastPointerDownWith": "mouse",
"multiElement": null,
"name": "Untitled-201933152653",
"networkPing": 0,
"networkSpeed": 0,
"offsetLeft": 0,
"offsetTop": 0,

2
src/types.ts
View File

@ -89,7 +89,7 @@ export type AppState = {
gridSize: number | null;
viewModeEnabled: boolean;
networkSpeed: number;
ping: string;
networkPing: number;
/** top-most selected groups (i.e. does not include nested groups) */
selectedGroupIds: { [groupId: string]: boolean };

3
src/utils.ts
View File

@ -381,6 +381,9 @@ export const getVersion = () => {
);
};
export const formatTime = (time: number): string => {
return time < 1000 ? `${time} ms` : `${(time / 1000).toFixed(1)} s`;
};
// Adapted from https://github.com/Modernizr/Modernizr/blob/master/feature-detects/emoji.js
export const supportsEmoji = () => {
const canvas = document.createElement("canvas");