Skip to content

Commit

Permalink
[pr] stats
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwelle
dwelle committed Jun 12, 2024
1 parent 3f1f8dd commit cfe1bd0
Show file tree
Hide file tree
Showing 39 changed files with 3,561 additions and 402 deletions.
1 change: 1 addition & 0 deletions excalidraw-app/index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
margin-bottom: auto;
margin-inline-start: auto;
margin-inline-end: 0.6em;
z-index: var(--zIndex-layerUI);

svg {
width: 1.2rem;
Expand Down
7 changes: 4 additions & 3 deletions packages/excalidraw/actions/actionToggleStats.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,22 @@ import { StoreAction } from "../store";

export const actionToggleStats = register({
name: "stats",
label: "stats.title",
label: "stats.fullTitle",
icon: abacusIcon,
paletteName: "Toggle stats",
viewMode: true,
trackEvent: { category: "menu" },
keywords: ["edit", "attributes", "customize"],
perform(elements, appState) {
return {
appState: {
...appState,
showStats: !this.checked!(appState),
showStats: { ...appState.showStats, open: !this.checked!(appState) },
},
storeAction: StoreAction.NONE,
};
},
checked: (appState) => appState.showStats,
checked: (appState) => appState.showStats.open,
keyTest: (event) =>
!event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.SLASH,
});
3 changes: 2 additions & 1 deletion packages/excalidraw/actions/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,8 @@ export type ActionName =
| "createContainerFromText"
| "wrapTextInContainer"
| "commandPalette"
| "autoResize";
| "autoResize"
| "elementStats";

export type PanelComponentProps = {
elements: readonly ExcalidrawElement[];
Expand Down
6 changes: 5 additions & 1 deletion packages/excalidraw/appState.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
DEFAULT_TEXT_ALIGN,
DEFAULT_ZOOM_VALUE,
EXPORT_SCALES,
STATS_PANELS,
THEME,
} from "./constants";
import type { AppState } from "./types";
Expand Down Expand Up @@ -81,7 +82,10 @@ export const getDefaultAppState = (): Omit<
selectedElementsAreBeingDragged: false,
selectionElement: null,
shouldCacheIgnoreZoom: false,
showStats: false,
showStats: {
open: false,
panels: STATS_PANELS.generalStats | STATS_PANELS.elementProperties,
},
startBoundElement: null,
suggestedBindings: [],
frameRendering: { enabled: true, clip: true, name: true, outline: true },
Expand Down
153 changes: 77 additions & 76 deletions packages/excalidraw/components/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2150,95 +2150,96 @@ class App extends React.Component<AppProps, AppState> {
});
};

private syncActionResult = withBatchedUpdates(
(actionResult: ActionResult) => {
if (this.unmounted || actionResult === false) {
return;
}
public syncActionResult = withBatchedUpdates((actionResult: ActionResult) => {
if (this.unmounted || actionResult === false) {
return;
}

let editingElement: AppState["editingElement"] | null = null;
if (actionResult.elements) {
actionResult.elements.forEach((element) => {
if (
this.state.editingElement?.id === element.id &&
this.state.editingElement !== element &&
isNonDeletedElement(element)
) {
editingElement = element;
}
});
if (actionResult.storeAction === StoreAction.UPDATE) {
this.store.shouldUpdateSnapshot();
} else if (actionResult.storeAction === StoreAction.CAPTURE) {
this.store.shouldCaptureIncrement();
}

if (actionResult.storeAction === StoreAction.UPDATE) {
this.store.shouldUpdateSnapshot();
} else if (actionResult.storeAction === StoreAction.CAPTURE) {
this.store.shouldCaptureIncrement();
let didUpdate = false;

let editingElement: AppState["editingElement"] | null = null;
if (actionResult.elements) {
actionResult.elements.forEach((element) => {
if (
this.state.editingElement?.id === element.id &&
this.state.editingElement !== element &&
isNonDeletedElement(element)
) {
editingElement = element;
}
});

this.scene.replaceAllElements(actionResult.elements);
}
this.scene.replaceAllElements(actionResult.elements);
didUpdate = true;
}

if (actionResult.files) {
this.files = actionResult.replaceFiles
? actionResult.files
: { ...this.files, ...actionResult.files };
this.addNewImagesToImageCache();
if (actionResult.files) {
this.files = actionResult.replaceFiles
? actionResult.files
: { ...this.files, ...actionResult.files };
this.addNewImagesToImageCache();
}

if (actionResult.appState || editingElement || this.state.contextMenu) {
let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
let gridSize = actionResult?.appState?.gridSize || null;
const theme =
actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
const name = actionResult?.appState?.name ?? this.state.name;
const errorMessage =
actionResult?.appState?.errorMessage ?? this.state.errorMessage;
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
}

if (actionResult.appState || editingElement || this.state.contextMenu) {
if (actionResult.storeAction === StoreAction.UPDATE) {
this.store.shouldUpdateSnapshot();
} else if (actionResult.storeAction === StoreAction.CAPTURE) {
this.store.shouldCaptureIncrement();
}
if (typeof this.props.zenModeEnabled !== "undefined") {
zenModeEnabled = this.props.zenModeEnabled;
}

let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
let gridSize = actionResult?.appState?.gridSize || null;
const theme =
actionResult?.appState?.theme || this.props.theme || THEME.LIGHT;
const name = actionResult?.appState?.name ?? this.state.name;
const errorMessage =
actionResult?.appState?.errorMessage ?? this.state.errorMessage;
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
}
if (typeof this.props.gridModeEnabled !== "undefined") {
gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
}

if (typeof this.props.zenModeEnabled !== "undefined") {
zenModeEnabled = this.props.zenModeEnabled;
}
editingElement =
editingElement || actionResult.appState?.editingElement || null;

if (typeof this.props.gridModeEnabled !== "undefined") {
gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
}
if (editingElement?.isDeleted) {
editingElement = null;
}

editingElement =
editingElement || actionResult.appState?.editingElement || null;
this.setState((state) => {
// using Object.assign instead of spread to fool TS 4.2.2+ into
// regarding the resulting type as not containing undefined
// (which the following expression will never contain)
return Object.assign(actionResult.appState || {}, {
// NOTE this will prevent opening context menu using an action
// or programmatically from the host, so it will need to be
// rewritten later
contextMenu: null,
editingElement,
viewModeEnabled,
zenModeEnabled,
gridSize,
theme,
name,
errorMessage,
});
});

if (editingElement?.isDeleted) {
editingElement = null;
}
didUpdate = true;
}

this.setState((state) => {
// using Object.assign instead of spread to fool TS 4.2.2+ into
// regarding the resulting type as not containing undefined
// (which the following expression will never contain)
return Object.assign(actionResult.appState || {}, {
// NOTE this will prevent opening context menu using an action
// or programmatically from the host, so it will need to be
// rewritten later
contextMenu: null,
editingElement,
viewModeEnabled,
zenModeEnabled,
gridSize,
theme,
name,
errorMessage,
});
});
}
},
);
if (!didUpdate && actionResult.storeAction !== StoreAction.NONE) {
this.scene.triggerUpdate();
}
});

// Lifecycle

Expand Down
2 changes: 1 addition & 1 deletion packages/excalidraw/components/HelpDialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -285,7 +285,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
shortcuts={[getShortcutKey("Alt+Shift+D")]}
/>
<Shortcut
label={t("stats.title")}
label={t("stats.fullTitle")}
shortcuts={[getShortcutKey("Alt+/")]}
/>
<Shortcut
Expand Down
93 changes: 93 additions & 0 deletions packages/excalidraw/components/LayerUI.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,99 @@
& > * {
pointer-events: var(--ui-pointerEvents);
}

& > .Stats {
width: 204px;
position: absolute;
top: 60px;
font-size: 12px;
z-index: var(--zIndex-layerUI);
pointer-events: var(--ui-pointerEvents);

.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;

h2 {
margin: 0;
}
}

.sectionContent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.elementType {
font-size: 12px;
font-weight: 700;
margin-top: 8px;
}

.elementsCount {
width: 100%;
font-size: 12px;
display: flex;
justify-content: space-between;
margin-top: 8px;
}

.statsItem {
margin-top: 8px;
width: 100%;
margin-bottom: 4px;
display: grid;
gap: 4px;

.label {
margin-right: 4px;
}
}

h3 {
white-space: nowrap;
margin: 0;
}

.close {
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: 24px;
text-align: right;
}
}
}

.divider {
width: 100%;
height: 1px;
background-color: var(--default-border-color);
}

:root[dir="rtl"] & {
left: 12px;
right: initial;
}
}
}

&__footer {
Expand Down
Loading

0 comments on commit cfe1bd0

Please sign in to comment.