smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add stats for nerds (#2453)

Browse source 
Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Lipis 2020-12-07 18:35:16 +02:00 • committed by GitHub
parent 5cdb9bd2ed
commit dd993adc5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 361 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/Actions.tsx
View file

@ -7,7 +7,7 @@ import {
hasStroke,
canChangeSharpness,
hasText,
getTargetElement,
getTargetElements,
} from "../scene";
import { t } from "../i18n";
import { SHAPES } from "../shapes";
@ -29,7 +29,7 @@ export const SelectedShapeActions = ({
renderAction: ActionManager["renderAction"];
elementType: ExcalidrawElement["type"];
}) => {
const targetElements = getTargetElement(
const targetElements = getTargetElements(
getNonDeletedElements(elements),
appState,
);

21
src/components/App.tsx
View file

@ -175,6 +175,7 @@ import {
EVENT_SHAPE,
trackEvent,
} from "../analytics";
import { Stats } from "./Stats";
const { history } = createHistory();
@ -377,6 +378,13 @@ class App extends React.Component<ExcalidrawProps, AppState> {
lng={getLanguage().lng}
isCollaborating={this.props.isCollaborating || false}
/>
{this.state.showStats && (
<Stats
appState={this.state}
elements={this.scene.getElements()}
onClose={this.toggleStats}
/>
)}
<main>
<canvas
id="canvas"
@ -1133,6 +1141,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
});
};
toggleStats = () => {
if (!this.state.showStats) {
trackEvent(EVENT_DIALOG, "stats");
}
this.setState({
showStats: !this.state.showStats,
});
};
setScrollToCenter = (remoteElements: readonly ExcalidrawElement[]) => {
this.setState({
...calculateScrollCenter(
@ -3564,6 +3581,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
label: t("labels.toggleGridMode"),
action: this.toggleGridMode,
},
{
label: t("labels.toggleStats"),
action: this.toggleStats,
},
],
top: clientY,
left: clientX,

37
src/components/Stats.scss Normal file
View file

@ -0,0 +1,37 @@
@import "../css/_variables";
.Stats {
position: fixed;
top: 64px;
right: 12px;
font-size: 12px;
z-index: 999;
h3 {
margin: 0 24px 8px 0;
}
.close {
float: right;
height: 16px;
width: 16px;
cursor: pointer;
svg {
width: 100%;
height: 100%;
}
}
table {
width: 100%;
th {
border-bottom: 1px solid var(--input-border-color);
padding: 4px;
}
tr {
td:nth-child(2) {
min-width: 48px;
text-align: right;
}
}
}
}

159
src/components/Stats.tsx Normal file
View file

@ -0,0 +1,159 @@
import React, { useEffect, useState } from "react";
import { getCommonBounds } from "../element/bounds";
import { NonDeletedExcalidrawElement } from "../element/types";
import {
getElementsStorageSize,
getTotalStorageSize,
} from "../excalidraw-app/data/localStorage";
import { t } from "../i18n";
import { getTargetElements } from "../scene";
import { AppState } from "../types";
import { debounce, nFormatter } from "../utils";
import { close } from "./icons";
import { Island } from "./Island";
import "./Stats.scss";
type StorageSizes = { scene: number; total: number };
const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => {
cb({
scene: getElementsStorageSize(),
total: getTotalStorageSize(),
});
}, 500);
export const Stats = (props: {
appState: AppState;
elements: readonly NonDeletedExcalidrawElement[];
onClose: () => void;
}) => {
const [storageSizes, setStorageSizes] = useState<StorageSizes>({
scene: 0,
total: 0,
});
useEffect(() => {
getStorageSizes((sizes) => {
setStorageSizes(sizes);
});
});
useEffect(() => () => getStorageSizes.cancel(), []);
const boundingBox = getCommonBounds(props.elements);
const selectedElements = getTargetElements(props.elements, props.appState);
const selectedBoundingBox = getCommonBounds(selectedElements);
return (
<div className="Stats">
<Island padding={2}>
<div className="close" onClick={props.onClose}>
{close}
</div>
<h3>{t("stats.title")}</h3>
<table>
<tbody>
<tr>
<th colSpan={2}>{t("stats.scene")}</th>
</tr>
<tr>
<td>{t("stats.elements")}</td>
<td>{props.elements.length}</td>
</tr>
<tr>
<td>{t("stats.width")}</td>
<td>{Math.round(boundingBox[2]) - Math.round(boundingBox[0])}</td>
</tr>
<tr>
<td>{t("stats.height")}</td>
<td>{Math.round(boundingBox[3]) - Math.round(boundingBox[1])}</td>
</tr>
<tr>
<th colSpan={2}>{t("stats.storage")}</th>
</tr>
<tr>
<td>{t("stats.scene")}</td>
<td>{nFormatter(storageSizes.scene, 1)}</td>
</tr>
<tr>
<td>{t("stats.total")}</td>
<td>{nFormatter(storageSizes.total, 1)}</td>
</tr>
{selectedElements.length === 1 && (
<tr>
<th colSpan={2}>{t("stats.element")}</th>
</tr>
)}
{selectedElements.length > 1 && (
<>
<tr>
<th colSpan={2}>{t("stats.selected")}</th>
</tr>
<tr>
<td>{t("stats.elements")}</td>
<td>{selectedElements.length}</td>
</tr>
</>
)}
{selectedElements.length > 0 && (
<>
<tr>
<td>{"x"}</td>
<td>
{Math.round(
selectedElements.length === 1
? selectedElements[0].x
: selectedBoundingBox[0],
)}
</td>
</tr>
<tr>
<td>{"y"}</td>
<td>
{Math.round(
selectedElements.length === 1
? selectedElements[0].y
: selectedBoundingBox[1],
)}
</td>
</tr>
<tr>
<td>{t("stats.width")}</td>
<td>
{Math.round(
selectedElements.length === 1
? selectedElements[0].width
: selectedBoundingBox[2] - selectedBoundingBox[0],
)}
</td>
</tr>
<tr>
<td>{t("stats.height")}</td>
<td>
{Math.round(
selectedElements.length === 1
? selectedElements[0].height
: selectedBoundingBox[3] - selectedBoundingBox[1],
)}
</td>
</tr>
</>
)}
{selectedElements.length === 1 && (
<tr>
<td>{t("stats.angle")}</td>
<td>
{`${Math.round(
(selectedElements[0].angle * 180) / Math.PI,
)}°`}
</td>
</tr>
)}
</tbody>
</table>
</Island>
</div>
);
};