Merge remote-tracking branch 'origin/master' into aakansha-net-stats

src/components/App.tsx

@@ -48,6 +48,7 @@ import {
   ELEMENT_TRANSLATE_AMOUNT,
   ENV,
   EVENT,
+  GRID_SIZE,
   LINE_CONFIRM_THRESHOLD,
   MIME_TYPES,
   POINTER_BUTTON,
@@ -300,6 +301,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       offsetTop,
       excalidrawRef,
       viewModeEnabled = false,
+      zenModeEnabled = false,
+      gridModeEnabled = false,
     } = props;
     this.state = {
       ...defaultAppState,
@@ -308,6 +311,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       height,
       ...this.getCanvasOffsets({ offsetLeft, offsetTop }),
       viewModeEnabled,
+      zenModeEnabled,
+      gridSize: gridModeEnabled ? GRID_SIZE : null,
     };
     if (excalidrawRef) {
       const readyPromise =
@@ -454,6 +459,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 && (
@@ -513,11 +521,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,
@@ -528,6 +546,8 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             offsetTop: state.offsetTop,
             offsetLeft: state.offsetLeft,
             viewModeEnabled,
+            zenModeEnabled,
+            gridSize,
           }),
           () => {
             if (actionResult.syncHistory) {
@@ -847,6 +867,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,
+      });
+    }
     if (
       prevState.showStats !== this.state.showStats ||
       prevProps.isCollaborating !== this.props.isCollaborating
@@ -3745,8 +3774,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,

src/components/HelpDialog.tsx

@@ -224,7 +224,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
                   shortcuts={[getShortcutKey("Alt+Z")]}
                 />
                 <Shortcut
-                  label={t("labels.gridMode")}
+                  label={t("labels.showGrid")}
                   shortcuts={[getShortcutKey("CtrlOrCmd+'")]}
                 />
                 <Shortcut

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,
@@ -513,17 +515,18 @@ const LayerUI = ({
               "transition-right": zenModeEnabled,
             })}
           >
-            {Array.from(appState.collaborators)
-              // Collaborator is either not initialized or is actually the current user.
-              .filter(([_, client]) => Object.keys(client).length !== 0)
-              .map(([clientId, client]) => (
-                <Tooltip
-                  label={client.username || "Unknown user"}
-                  key={clientId}
-                >
-                  {actionManager.renderAction("goToCollaborator", clientId)}
-                </Tooltip>
-              ))}
+            {appState.collaborators.size > 0 &&
+              Array.from(appState.collaborators)
+                // Collaborator is either not initialized or is actually the current user.
+                .filter(([_, client]) => Object.keys(client).length !== 0)
+                .map(([clientId, client]) => (
+                  <Tooltip
+                    label={client.username || "Unknown user"}
+                    key={clientId}
+                  >
+                    {actionManager.renderAction("goToCollaborator", clientId)}
+                  </Tooltip>
+                ))}
           </UserList>
         </div>
       </FixedSideContainer>
@@ -578,7 +581,7 @@ const LayerUI = ({
       </div>
       <button
         className={clsx("disable-zen-mode", {
-          "disable-zen-mode--visible": zenModeEnabled,
+          "disable-zen-mode--visible": showExitZenModeBtn,
         })}
         onClick={toggleZenMode}
       >

src/components/MobileMenu.tsx

@@ -152,24 +152,26 @@ export const MobileMenu = ({
                 <Stack.Col gap={4}>
                   {renderCanvasActions()}
                   {renderCustomFooter?.(true)}
-                  <fieldset>
-                    <legend>{t("labels.collaborators")}</legend>
-                    <UserList mobile>
-                      {Array.from(appState.collaborators)
-                        // Collaborator is either not initialized or is actually the current user.
-                        .filter(
-                          ([_, client]) => Object.keys(client).length !== 0,
-                        )
-                        .map(([clientId, client]) => (
-                          <React.Fragment key={clientId}>
-                            {actionManager.renderAction(
-                              "goToCollaborator",
-                              clientId,
-                            )}
-                          </React.Fragment>
-                        ))}
-                    </UserList>
-                  </fieldset>
+                  {appState.collaborators.size > 0 && (
+                    <fieldset>
+                      <legend>{t("labels.collaborators")}</legend>
+                      <UserList mobile>
+                        {Array.from(appState.collaborators)
+                          // Collaborator is either not initialized or is actually the current user.
+                          .filter(
+                            ([_, client]) => Object.keys(client).length !== 0,
+                          )
+                          .map(([clientId, client]) => (
+                            <React.Fragment key={clientId}>
+                              {actionManager.renderAction(
+                                "goToCollaborator",
+                                clientId,
+                              )}
+                            </React.Fragment>
+                          ))}
+                      </UserList>
+                    </fieldset>
+                  )}
                 </Stack.Col>
               </div>
             </Section>