removed zoom controls from render, added props for new render method

interviewstreet · Jun 1, 2022 · 7fc7cb5 · 7fc7cb5
1 parent 26ca72e
commit 7fc7cb5
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 20 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -364,7 +364,6 @@ class App extends React.Component<AppProps, AppState> {
       height: window.innerHeight,
       showHyperlinkPopup: false,
     };
-
     this.id = nanoid();
 
     if (excalidrawRef) {
@@ -516,8 +515,8 @@ class App extends React.Component<AppProps, AppState> {
       renderTopRightUI,
       renderFooter,
       renderCustomStats,
+      renderCopyDownload,
     } = this.props;
-
     return (
       <div
         className={clsx("excalidraw excalidraw-container", {
@@ -558,6 +557,7 @@ class App extends React.Component<AppProps, AppState> {
               isCollaborating={this.props.isCollaborating}
               renderTopRightUI={renderTopRightUI}
               renderCustomFooter={renderFooter}
+              renderCopyDownload={renderCopyDownload}
               viewModeEnabled={viewModeEnabled}
               showExitZenModeBtn={
                 typeof this.props?.zenModeEnabled === "undefined" &&

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
@@ -10,7 +10,7 @@ import { calculateScrollCenter, getSelectedElements } from "../scene";
 import { ExportType } from "../scene/types";
 import { AppProps, AppState, ExcalidrawProps, BinaryFiles } from "../types";
 import { muteFSAbortError, setCursorForShape } from "../utils";
-import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions";
+import { SelectedShapeActions, ShapesSwitcher } from "./Actions";
 import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle";
 import CollabButton from "./CollabButton";
 import { ErrorDialog } from "./ErrorDialog";
@@ -69,6 +69,7 @@ interface LayerUIProps {
   library: Library;
   id: string;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  renderCopyDownload: () => JSX.Element;
 }
 
 const LayerUI = ({
@@ -96,6 +97,7 @@ const LayerUI = ({
   library,
   id,
   onImageAction,
+  renderCopyDownload,
 }: LayerUIProps) => {
   const deviceType = useDeviceType();
 
@@ -437,24 +439,8 @@ const LayerUI = ({
         >
           <Stack.Col gap={2}>
             <Section heading="canvasActions">
-              <Island padding={1}>
-                <ZoomActions
-                  renderAction={actionManager.renderAction}
-                  zoom={appState.zoom}
-                />
-              </Island>
               {!viewModeEnabled && (
                 <>
-                  <div
-                    className={clsx("undo-redo-buttons zen-mode-transition", {
-                      "layer-ui__wrapper__footer-left--transition-bottom":
-                        zenModeEnabled,
-                    })}
-                  >
-                    {actionManager.renderAction("undo", { size: "small" })}
-                    {actionManager.renderAction("redo", { size: "small" })}
-                  </div>
-
                   <div
                     className={clsx("eraser-buttons zen-mode-transition", {
                       "layer-ui__wrapper__footer-left--transition-left":
@@ -477,6 +463,7 @@ const LayerUI = ({
                     {actionManager.renderAction("finalize", { size: "small" })}
                   </div>
                 )}
+              {renderCopyDownload()}
             </Section>
           </Stack.Col>
         </div>

diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
@@ -643,6 +643,7 @@ const ExcalidrawWrapper = () => {
       })}
     >
       <Excalidraw
+        renderCopyDownload={() => <></>}
         ref={excalidrawRefCallback}
         onChange={onChange}
         initialData={initialStatePromiseRef.current.promise}

diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
@@ -40,6 +40,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     registerComment,
     user,
     deletedCommentID,
+    renderCopyDownload,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -79,6 +80,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     <InitializeApp langCode={langCode}>
       <Provider unstable_createStore={() => jotaiStore} scope={jotaiScope}>
         <App
+          renderCopyDownload={renderCopyDownload}
           onChange={onChange}
           initialData={initialData}
           excalidrawRef={excalidrawRef}

diff --git a/src/packages/excalidraw/package.json b/src/packages/excalidraw/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@excalidraw/excalidraw",
-  "version": "0.12.6",
+  "version": "0.12.7",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

diff --git a/src/types.ts b/src/types.ts
@@ -282,6 +282,7 @@ export interface ExcalidrawProps {
   user?: UserProp;
   registerComment: (canvasX: number, canvasY: number) => Promise<string>;
   deletedCommentID?: Array<string>;
+  renderCopyDownload: () => JSX.Element;
 }
 
 export type UserProp = Readonly<{