From 066560311b62e0482c8f9567f7cf5037eace4f49 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Sat, 6 Feb 2021 21:22:28 +0530 Subject: [PATCH] feat: add props zenModeEnabled and gridModeEnabled so host can control completely (#2901) * 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 * Update src/packages/excalidraw/README.md Co-authored-by: David Luzar * Apply suggestions from code review Co-authored-by: David Luzar * fix specs Co-authored-by: Lipis Co-authored-by: David Luzar --- src/components/App.tsx | 35 ++++++++++- src/components/LayerUI.tsx | 4 +- src/packages/excalidraw/CHANGELOG.md | 1 + src/packages/excalidraw/README.md | 14 ++++- src/packages/excalidraw/index.tsx | 4 ++ src/tests/excalidrawPackage.test.tsx | 89 ++++++++++++++++++++++++++++ src/types.ts | 2 + 7 files changed, 144 insertions(+), 5 deletions(-) create mode 100644 src/tests/excalidrawPackage.test.tsx diff --git a/src/components/App.tsx b/src/components/App.tsx index fd6759fb..f215c9c6 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -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 { offsetTop, excalidrawRef, viewModeEnabled = false, + zenModeEnabled = false, + gridModeEnabled = false, } = props; this.state = { ...defaultAppState, @@ -307,6 +310,8 @@ class App extends React.Component { 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 { onExportToBackend={onExportToBackend} renderCustomFooter={renderFooter} viewModeEnabled={viewModeEnabled} + showExitZenModeBtn={ + typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled + } />
{this.state.showStats && ( @@ -511,11 +519,21 @@ class App extends React.Component { } 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 { offsetTop: state.offsetTop, offsetLeft: state.offsetLeft, viewModeEnabled, + zenModeEnabled, + gridSize, }), () => { if (actionResult.syncHistory) { @@ -845,6 +865,15 @@ class App extends React.Component { 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 { separator, actionSelectAll, separator, - actionToggleGridMode, - actionToggleZenMode, + typeof this.props.gridModeEnabled === "undefined" && + actionToggleGridMode, + typeof this.props.zenModeEnabled === "undefined" && + actionToggleZenMode, typeof this.props.viewModeEnabled === "undefined" && actionToggleViewMode, actionToggleStats, diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 2bb8c984..de95a889 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -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 = ({