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

feat: add props zenModeEnabled and gridModeEnabled so host can control completely (#2901)

Browse source 
* feat: add props zenModeEnabled and gridModeEnabled so host can control completely

* dnt show exit zenmode button when prop present

* fix

* update when props change

* Add tests

* Add tests

* update changelog and readme

* update

* Update src/tests/excalidrawPackage.test.tsx

* Update src/packages/excalidraw/README.md

Co-authored-by: Lipis <lipiridis@gmail.com>

* Update src/packages/excalidraw/README.md

Co-authored-by: David Luzar <luzar.david@gmail.com>

* Apply suggestions from code review

Co-authored-by: David Luzar <luzar.david@gmail.com>

* fix specs

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: David Luzar <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2021-02-06 21:22:28 +05:30 • committed by GitHub
parent d6ca981f7a
commit 066560311b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 144 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/components/App.tsx
View file

@ -48,6 +48,7 @@ import {
ELEMENT_TRANSLATE_AMOUNT,
ENV,
EVENT,
GRID_SIZE,
LINE_CONFIRM_THRESHOLD,
MIME_TYPES,
POINTER_BUTTON,
@ -299,6 +300,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
offsetTop,
excalidrawRef,
viewModeEnabled = false,
zenModeEnabled = false,
gridModeEnabled = false,
} = props;
this.state = {
...defaultAppState,
@ -307,6 +310,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
height,
...this.getCanvasOffsets({ offsetLeft, offsetTop }),
viewModeEnabled,
zenModeEnabled,
gridSize: gridModeEnabled ? GRID_SIZE : null,
};
if (excalidrawRef) {
const readyPromise =
@ -453,6 +458,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
onExportToBackend={onExportToBackend}
renderCustomFooter={renderFooter}
viewModeEnabled={viewModeEnabled}
showExitZenModeBtn={
typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
}
/>
<div className="excalidraw-textEditorContainer" />
{this.state.showStats && (
@ -511,11 +519,21 @@ class App extends React.Component<ExcalidrawProps, AppState> {
}
let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
let gridSize = actionResult?.appState?.gridSize || null;
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
}
if (typeof this.props.zenModeEnabled !== "undefined") {
zenModeEnabled = this.props.zenModeEnabled;
}
if (typeof this.props.gridModeEnabled !== "undefined") {
gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
}
this.setState(
(state) => ({
...actionResult.appState,
@ -526,6 +544,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
offsetTop: state.offsetTop,
offsetLeft: state.offsetLeft,
viewModeEnabled,
zenModeEnabled,
gridSize,
}),
() => {
if (actionResult.syncHistory) {
@ -845,6 +865,15 @@ class App extends React.Component<ExcalidrawProps, AppState> {
this.addEventListeners();
}
if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
}
if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
this.setState({
gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
});
}
document
.querySelector(".excalidraw")
?.classList.toggle("Appearance_dark", this.state.appearance === "dark");
@ -3717,8 +3746,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
separator,
actionSelectAll,
separator,
actionToggleGridMode,
actionToggleZenMode,
typeof this.props.gridModeEnabled === "undefined" &&
actionToggleGridMode,
typeof this.props.zenModeEnabled === "undefined" &&
actionToggleZenMode,
typeof this.props.viewModeEnabled === "undefined" &&
actionToggleViewMode,
actionToggleStats,

4
src/components/LayerUI.tsx
View file

@ -52,6 +52,7 @@ interface LayerUIProps {
onLockToggle: () => void;
onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
zenModeEnabled: boolean;
showExitZenModeBtn: boolean;
toggleZenMode: () => void;
langCode: Language["code"];
isCollaborating: boolean;
@ -296,6 +297,7 @@ const LayerUI = ({
onLockToggle,
onInsertElements,
zenModeEnabled,
showExitZenModeBtn,
toggleZenMode,
isCollaborating,
onExportToBackend,
@ -579,7 +581,7 @@ const LayerUI = ({
</div>
<button
className={clsx("disable-zen-mode", {
"disable-zen-mode--visible": zenModeEnabled,
"disable-zen-mode--visible": showExitZenModeBtn,
})}
onClick={toggleZenMode}
>