feat: Introduce ExcalidrawElements and ExcalidrawAppState provider (#5463)

* feat: Introduce ExcalidrawData provider so that app state and elements need not be passed to children

* fix

* fix zen mode

* Separate providers for data and elements

* pass appState and elements to layerUI

* pass appState and elements to selectedShapeActions

* pass appState and elements to MobileMenu

* pass appState to librarymenu

* rename

* rename to ExcalidrawAppState

src/components/Actions.tsx

@@ -31,12 +31,10 @@ export const SelectedShapeActions = ({
   appState,
   elements,
   renderAction,
-  activeTool,
 }: {
   appState: AppState;
   elements: readonly ExcalidrawElement[];
   renderAction: ActionManager["renderAction"];
-  activeTool: AppState["activeTool"]["type"];
 }) => {
   const targetElements = getTargetElements(
     getNonDeletedElements(elements),
@@ -56,13 +54,13 @@ export const SelectedShapeActions = ({
   const isRTL = document.documentElement.getAttribute("dir") === "rtl";
 
   const showFillIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some(
       (element) =>
         hasBackground(element.type) && !isTransparent(element.backgroundColor),
     );
   const showChangeBackgroundIcons =
-    hasBackground(activeTool) ||
+    hasBackground(appState.activeTool.type) ||
     targetElements.some((element) => hasBackground(element.type));
 
   const showLinkIcon =
@@ -79,23 +77,23 @@ export const SelectedShapeActions = ({
 
   return (
     <div className="panelColumn">
-      {((hasStrokeColor(activeTool) &&
+      {((hasStrokeColor(appState.activeTool.type) &&
-        activeTool !== "image" &&
+        appState.activeTool.type !== "image" &&
         commonSelectedType !== "image") ||
         targetElements.some((element) => hasStrokeColor(element.type))) &&
         renderAction("changeStrokeColor")}
       {showChangeBackgroundIcons && renderAction("changeBackgroundColor")}
       {showFillIcons && renderAction("changeFillStyle")}
 
-      {(hasStrokeWidth(activeTool) ||
+      {(hasStrokeWidth(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeWidth(element.type))) &&
         renderAction("changeStrokeWidth")}
 
-      {(activeTool === "freedraw" ||
+      {(appState.activeTool.type === "freedraw" ||
         targetElements.some((element) => element.type === "freedraw")) &&
         renderAction("changeStrokeShape")}
 
-      {(hasStrokeStyle(activeTool) ||
+      {(hasStrokeStyle(appState.activeTool.type) ||
         targetElements.some((element) => hasStrokeStyle(element.type))) && (
         <>
           {renderAction("changeStrokeStyle")}
@@ -103,12 +101,12 @@ export const SelectedShapeActions = ({
         </>
       )}
 
-      {(canChangeSharpness(activeTool) ||
+      {(canChangeSharpness(appState.activeTool.type) ||
         targetElements.some((element) => canChangeSharpness(element.type))) && (
         <>{renderAction("changeSharpness")}</>
       )}
 
-      {(hasText(activeTool) ||
+      {(hasText(appState.activeTool.type) ||
         targetElements.some((element) => hasText(element.type))) && (
         <>
           {renderAction("changeFontSize")}
@@ -123,7 +121,7 @@ export const SelectedShapeActions = ({
         (element) =>
           hasBoundTextElement(element) || isBoundToContainer(element),
       ) && renderAction("changeVerticalAlign")}
-      {(canHaveArrowheads(activeTool) ||
+      {(canHaveArrowheads(appState.activeTool.type) ||
         targetElements.some((element) => canHaveArrowheads(element.type))) && (
         <>{renderAction("changeArrowhead")}</>
       )}

src/components/App.tsx

@@ -272,6 +272,7 @@ const deviceContextInitialValue = {
 };
 const DeviceContext = React.createContext<Device>(deviceContextInitialValue);
 export const useDevice = () => useContext<Device>(DeviceContext);
+
 const ExcalidrawContainerContext = React.createContext<{
   container: HTMLDivElement | null;
   id: string | null;
@@ -279,6 +280,22 @@ const ExcalidrawContainerContext = React.createContext<{
 export const useExcalidrawContainer = () =>
   useContext(ExcalidrawContainerContext);
 
+const ExcalidrawElementsContext = React.createContext<
+  readonly NonDeletedExcalidrawElement[]
+>([]);
+
+const ExcalidrawAppStateContext = React.createContext<AppState>({
+  ...getDefaultAppState(),
+  width: 0,
+  height: 0,
+  offsetLeft: 0,
+  offsetTop: 0,
+});
+export const useExcalidrawElements = () =>
+  useContext(ExcalidrawElementsContext);
+export const useExcalidrawAppState = () =>
+  useContext(ExcalidrawAppStateContext);
+
 let didTapTwice: boolean = false;
 let tappedTwiceTimer = 0;
 let cursorX = 0;
@@ -505,63 +522,69 @@ class App extends React.Component<AppProps, AppState> {
           value={this.excalidrawContainerValue}
         >
           <DeviceContext.Provider value={this.device}>
-            <LayerUI
+            <ExcalidrawAppStateContext.Provider value={this.state}>
-              canvas={this.canvas}
+              <ExcalidrawElementsContext.Provider
-              appState={this.state}
+                value={this.scene.getNonDeletedElements()}
-              files={this.files}
+              >
-              setAppState={this.setAppState}
+                <LayerUI
-              actionManager={this.actionManager}
+                  canvas={this.canvas}
-              elements={this.scene.getNonDeletedElements()}
+                  appState={this.state}
-              onCollabButtonClick={onCollabButtonClick}
+                  files={this.files}
-              onLockToggle={this.toggleLock}
+                  setAppState={this.setAppState}
-              onPenModeToggle={this.togglePenMode}
+                  actionManager={this.actionManager}
-              onInsertElements={(elements) =>
+                  elements={this.scene.getNonDeletedElements()}
-                this.addElementsFromPasteOrLibrary({
+                  onCollabButtonClick={onCollabButtonClick}
-                  elements,
+                  onLockToggle={this.toggleLock}
-                  position: "center",
+                  onPenModeToggle={this.togglePenMode}
-                  files: null,
+                  onInsertElements={(elements) =>
-                })
+                    this.addElementsFromPasteOrLibrary({
-              }
+                      elements,
-              langCode={getLanguage().code}
+                      position: "center",
-              isCollaborating={this.props.isCollaborating}
+                      files: null,
-              renderTopRightUI={renderTopRightUI}
+                    })
-              renderCustomFooter={renderFooter}
+                  }
-              renderCustomStats={renderCustomStats}
+                  langCode={getLanguage().code}
-              showExitZenModeBtn={
+                  isCollaborating={this.props.isCollaborating}
-                typeof this.props?.zenModeEnabled === "undefined" &&
+                  renderTopRightUI={renderTopRightUI}
-                this.state.zenModeEnabled
+                  renderCustomFooter={renderFooter}
-              }
+                  renderCustomStats={renderCustomStats}
-              showThemeBtn={
+                  showExitZenModeBtn={
-                typeof this.props?.theme === "undefined" &&
+                    typeof this.props?.zenModeEnabled === "undefined" &&
-                this.props.UIOptions.canvasActions.theme
+                    this.state.zenModeEnabled
-              }
+                  }
-              libraryReturnUrl={this.props.libraryReturnUrl}
+                  showThemeBtn={
-              UIOptions={this.props.UIOptions}
+                    typeof this.props?.theme === "undefined" &&
-              focusContainer={this.focusContainer}
+                    this.props.UIOptions.canvasActions.theme
-              library={this.library}
+                  }
-              id={this.id}
+                  libraryReturnUrl={this.props.libraryReturnUrl}
-              onImageAction={this.onImageAction}
+                  UIOptions={this.props.UIOptions}
-            />
+                  focusContainer={this.focusContainer}
-            <div className="excalidraw-textEditorContainer" />
+                  library={this.library}
-            <div className="excalidraw-contextMenuContainer" />
+                  id={this.id}
-            {selectedElement.length === 1 && this.state.showHyperlinkPopup && (
+                  onImageAction={this.onImageAction}
-              <Hyperlink
+                />
-                key={selectedElement[0].id}
+                <div className="excalidraw-textEditorContainer" />
-                element={selectedElement[0]}
+                <div className="excalidraw-contextMenuContainer" />
-                appState={this.state}
+                {selectedElement.length === 1 &&
-                setAppState={this.setAppState}
+                  this.state.showHyperlinkPopup && (
-                onLinkOpen={this.props.onLinkOpen}
+                    <Hyperlink
-              />
+                      key={selectedElement[0].id}
-            )}
+                      element={selectedElement[0]}
-            {this.state.toast !== null && (
+                      setAppState={this.setAppState}
-              <Toast
+                      onLinkOpen={this.props.onLinkOpen}
-                message={this.state.toast.message}
+                    />
-                onClose={() => this.setToast(null)}
+                  )}
-                duration={this.state.toast.duration}
+                {this.state.toast !== null && (
-                closable={this.state.toast.closable}
+                  <Toast
-              />
+                    message={this.state.toast.message}
-            )}
+                    onClose={() => this.setToast(null)}
-            <main>{this.renderCanvas()}</main>
+                    duration={this.state.toast.duration}
+                    closable={this.state.toast.closable}
+                  />
+                )}
+                <main>{this.renderCanvas()}</main>
+              </ExcalidrawElementsContext.Provider>{" "}
+            </ExcalidrawAppStateContext.Provider>
           </DeviceContext.Provider>
         </ExcalidrawContainerContext.Provider>
       </div>

src/components/LayerUI.tsx

@@ -71,8 +71,8 @@ const LayerUI = ({
   appState,
   files,
   setAppState,
-  canvas,
   elements,
+  canvas,
   onCollabButtonClick,
   onLockToggle,
   onPenModeToggle,
@@ -210,8 +210,8 @@ const LayerUI = ({
             )}
           </Stack.Row>
           <BackgroundPickerAndDarkModeToggle
-            actionManager={actionManager}
             appState={appState}
+            actionManager={actionManager}
             setAppState={setAppState}
             showThemeBtn={showThemeBtn}
           />
@@ -244,7 +244,6 @@ const LayerUI = ({
           appState={appState}
           elements={elements}
           renderAction={actionManager.renderAction}
-          activeTool={appState.activeTool.type}
         />
       </Island>
     </Section>
@@ -279,7 +278,6 @@ const LayerUI = ({
       libraryReturnUrl={libraryReturnUrl}
       focusContainer={focusContainer}
       library={library}
-      theme={appState.theme}
       files={files}
       id={id}
       appState={appState}

src/components/LibraryMenu.tsx

@@ -80,7 +80,6 @@ export const LibraryMenu = ({
   onInsertLibraryItems,
   pendingElements,
   onAddToLibrary,
-  theme,
   setAppState,
   files,
   libraryReturnUrl,
@@ -93,7 +92,6 @@ export const LibraryMenu = ({
   onClose: () => void;
   onInsertLibraryItems: (libraryItems: LibraryItems) => void;
   onAddToLibrary: () => void;
-  theme: AppState["theme"];
   files: BinaryFiles;
   setAppState: React.Component<any, AppState>["setState"];
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -105,7 +103,6 @@ export const LibraryMenu = ({
   const ref = useRef<HTMLDivElement | null>(null);
 
   const device = useDevice();
-
   useOnClickOutside(
     ref,
     useCallback(
@@ -290,7 +287,7 @@ export const LibraryMenu = ({
         appState={appState}
         libraryReturnUrl={libraryReturnUrl}
         library={library}
-        theme={theme}
+        theme={appState.theme}
         files={files}
         id={id}
         selectedItems={selectedItems}

src/components/MobileMenu.tsx

@@ -221,7 +221,6 @@ export const MobileMenu = ({
                 appState={appState}
                 elements={elements}
                 renderAction={actionManager.renderAction}
-                activeTool={appState.activeTool.type}
               />
             </Section>
           ) : null}

src/element/Hyperlink.tsx

@@ -32,6 +32,7 @@ import { getElementAbsoluteCoords } from "./";
 
 import "./Hyperlink.scss";
 import { trackEvent } from "../analytics";
+import { useExcalidrawAppState } from "../components/App";
 
 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -48,15 +49,15 @@ let IS_HYPERLINK_TOOLTIP_VISIBLE = false;
 
 export const Hyperlink = ({
   element,
-  appState,
   setAppState,
   onLinkOpen,
 }: {
   element: NonDeletedExcalidrawElement;
-  appState: AppState;
   setAppState: React.Component<any, AppState>["setState"];
   onLinkOpen: ExcalidrawProps["onLinkOpen"];
 }) => {
+  const appState = useExcalidrawAppState();
+
   const linkVal = element.link || "";
 
   const [inputVal, setInputVal] = useState(linkVal);