From ea58612b8a9f4b68909c296c183ded67cceb31f1 Mon Sep 17 00:00:00 2001
From: xzdry <ruoyu.dong@smartx.com>
Date: Fri, 23 Dec 2022 15:33:45 +0800
Subject: [PATCH] feat: add the ability to hide the sidebar & remove zoom
 function

---
 .gitignore                                    |   3 +
 packages/editor/src/components/Editor.tsx     | 163 ++++++++++--------
 .../components/EditorHeader/EditorHeader.tsx  |  51 ++++--
 3 files changed, 128 insertions(+), 89 deletions(-)

diff --git a/.gitignore b/.gitignore
index d600a5e1..36fd843b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,6 @@ typings
 coverage
 
 stats.html
+
+# vscode extensions
+.history
\ No newline at end of file
diff --git a/packages/editor/src/components/Editor.tsx b/packages/editor/src/components/Editor.tsx
index 817abc69..cd537471 100644
--- a/packages/editor/src/components/Editor.tsx
+++ b/packages/editor/src/components/Editor.tsx
@@ -60,7 +60,8 @@ export const Editor: React.FC<Props> = observer(
       setExplorerMenuTab,
     } = editorStore;
 
-    const [scale, setScale] = useState(100);
+    const [isDisplayLeftMenu, setIsDisplayLeftMenu] = useState(true);
+    const [isDisplayRightMenu, setIsDisplayRightMenu] = useState(true);
     const [preview, setPreview] = useState(false);
     const [codeMode, setCodeMode] = useState(false);
     const [isDisplayApp, setIsDisplayApp] = useState(true);
@@ -124,7 +125,6 @@ export const Editor: React.FC<Props> = observer(
             flexDirection="column"
             width="full"
             height="full"
-            transform={`scale(${scale / 100})`}
             position="relative"
             overflow="hidden"
           >
@@ -141,100 +141,111 @@ export const Editor: React.FC<Props> = observer(
 
       return (
         <>
-          <Resizable
-            defaultSize={{
-              width: 300,
-              height: '100%',
-            }}
-            enable={{ right: true }}
-            style={{ zIndex: 2 }}
-            maxWidth={480}
-            minWidth={300}
-          >
-            <Box
-              borderRightWidth="1px"
-              borderColor="gray.200"
-              position="relative"
-              zIndex="2"
-              height="full"
-            >
-              <Tabs
-                height="100%"
-                display="flex"
-                flexDirection="column"
-                textAlign="left"
-                lazyBehavior="keepMounted"
-                isLazy
-                index={explorerMenuTab}
-                onChange={activatedTab => {
-                  setExplorerMenuTab(activatedTab);
-                }}
-              >
-                <TabList background="gray.50" whiteSpace="nowrap" justifyContent="center">
-                  <Tab>Explorer</Tab>
-                  <Tab>UI</Tab>
-                  <Tab>Data</Tab>
-                  <Tab>State</Tab>
-                </TabList>
-                <TabPanels overflow="hidden" height="full" flex="1">
-                  <TabPanel height="full" overflow="auto" p={0}>
-                    <Explorer services={services} />
-                  </TabPanel>
-                  <TabPanel height="full" overflow="auto" p={0}>
-                    <StructureTree services={services} />
-                  </TabPanel>
-                  <TabPanel height="full" overflow="auto" p={0}>
-                    <DataSource active={activeDataSource?.id ?? ''} services={services} />
-                  </TabPanel>
-                  <TabPanel overflow="auto" p={0} height="100%">
-                    <StateViewer store={stateStore} />
-                  </TabPanel>
-                </TabPanels>
-              </Tabs>
-            </Box>
-          </Resizable>
-          <Flex flex={1} position="relative" overflow="hidden">
-            {appBox}
+          {isDisplayLeftMenu ? (
             <Resizable
               defaultSize={{
-                width: 360,
+                width: 300,
                 height: '100%',
               }}
-              enable={{ left: true }}
+              enable={{ right: true }}
+              style={{ zIndex: 2 }}
               maxWidth={480}
               minWidth={300}
             >
               <Box
-                height="full"
-                borderLeftWidth="1px"
-                borderColor="gray.400"
+                borderRightWidth="1px"
+                borderColor="gray.200"
                 position="relative"
-                zIndex="0"
+                zIndex="2"
+                height="full"
               >
                 <Tabs
-                  align="center"
-                  textAlign="left"
                   height="100%"
                   display="flex"
                   flexDirection="column"
+                  textAlign="left"
                   lazyBehavior="keepMounted"
                   isLazy
-                  index={toolMenuTab}
-                  onChange={onRightTabChange}
+                  index={explorerMenuTab}
+                  onChange={activatedTab => {
+                    setExplorerMenuTab(activatedTab);
+                  }}
                 >
-                  <TabList background="gray.50">
-                    <Tab>Inspect</Tab>
-                    <Tab>Insert</Tab>
+                  <TabList
+                    background="gray.50"
+                    whiteSpace="nowrap"
+                    justifyContent="center"
+                  >
+                    <Tab>Explorer</Tab>
+                    <Tab>UI</Tab>
+                    <Tab>Data</Tab>
+                    <Tab>State</Tab>
                   </TabList>
-                  <TabPanels flex="1" overflow="auto" background="gray.50">
-                    <TabPanel p={0}>{inspectForm}</TabPanel>
-                    <TabPanel p={0}>
-                      <ComponentList services={services} />
+                  <TabPanels overflow="hidden" height="full" flex="1">
+                    <TabPanel height="full" overflow="auto" p={0}>
+                      <Explorer services={services} />
+                    </TabPanel>
+                    <TabPanel height="full" overflow="auto" p={0}>
+                      <StructureTree services={services} />
+                    </TabPanel>
+                    <TabPanel height="full" overflow="auto" p={0}>
+                      <DataSource
+                        active={activeDataSource?.id ?? ''}
+                        services={services}
+                      />
+                    </TabPanel>
+                    <TabPanel overflow="auto" p={0} height="100%">
+                      <StateViewer store={stateStore} />
                     </TabPanel>
                   </TabPanels>
                 </Tabs>
               </Box>
             </Resizable>
+          ) : null}
+          <Flex flex={1} position="relative" overflow="hidden">
+            {appBox}
+            {isDisplayRightMenu ? (
+              <Resizable
+                defaultSize={{
+                  width: 360,
+                  height: '100%',
+                }}
+                enable={{ left: true }}
+                maxWidth={480}
+                minWidth={300}
+              >
+                <Box
+                  height="full"
+                  borderLeftWidth="1px"
+                  borderColor="gray.400"
+                  position="relative"
+                  zIndex="0"
+                >
+                  <Tabs
+                    align="center"
+                    textAlign="left"
+                    height="100%"
+                    display="flex"
+                    flexDirection="column"
+                    lazyBehavior="keepMounted"
+                    isLazy
+                    index={toolMenuTab}
+                    onChange={onRightTabChange}
+                  >
+                    <TabList background="gray.50">
+                      <Tab>Inspect</Tab>
+                      <Tab>Insert</Tab>
+                    </TabList>
+                    <TabPanels flex="1" overflow="auto" background="gray.50">
+                      <TabPanel p={0}>{inspectForm}</TabPanel>
+                      <TabPanel p={0}>
+                        <ComponentList services={services} />
+                      </TabPanel>
+                    </TabPanels>
+                  </Tabs>
+                </Box>
+              </Resizable>
+            ) : null}
             {activeDataSource && activeDataSourceType === DataSourceType.API ? (
               <ApiForm
                 key={activeDataSource.id}
@@ -257,10 +268,12 @@ export const Editor: React.FC<Props> = observer(
       >
         <Box display="flex" height="100%" width="100%" flexDirection="column">
           <EditorHeader
-            scale={scale}
-            setScale={setScale}
             onPreview={onPreview}
             onRefresh={onRefresh}
+            isDisplayLeftMenu={isDisplayLeftMenu}
+            isDisplayRightMenu={isDisplayRightMenu}
+            setIsDisplayLeftMenu={setIsDisplayLeftMenu}
+            setIsDisplayRightMenu={setIsDisplayRightMenu}
             onCodeMode={() => setCodeMode(true)}
           />
           <Box display="flex" flex="1" overflow="auto">
diff --git a/packages/editor/src/components/EditorHeader/EditorHeader.tsx b/packages/editor/src/components/EditorHeader/EditorHeader.tsx
index a7d22bba..c325f3cc 100644
--- a/packages/editor/src/components/EditorHeader/EditorHeader.tsx
+++ b/packages/editor/src/components/EditorHeader/EditorHeader.tsx
@@ -1,27 +1,50 @@
 import React from 'react';
-import { Flex, Button, Box } from '@chakra-ui/react';
-import { AddIcon, MinusIcon } from '@chakra-ui/icons';
+import { Flex, Button, Icon } from '@chakra-ui/react';
+const SideBarIcon: React.FC<{
+  transform?: string;
+  color?: string;
+  onClick?: () => void;
+}> = props => (
+  <Icon cursor="pointer" {...props} viewBox="-5 -5 24 24" width="24px" height="24px">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M13 2.5H8v11h5a.5.5 0 0 0 .5-.5V3a.5.5 0 0 0-.5-.5Zm-10 0h3.5v11H3a.5.5 0 0 1-.5-.5V3a.5.5 0 0 1 .5-.5ZM3 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2H3Zm1.5 11.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1-4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1-2.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+      fill="currentColor"
+    />
+  </Icon>
+);
 
 export const EditorHeader: React.FC<{
-  scale: number;
-  setScale: (v: number) => void;
+  isDisplayLeftMenu: boolean;
+  isDisplayRightMenu: boolean;
+  setIsDisplayLeftMenu: (show: boolean) => void;
+  setIsDisplayRightMenu: (show: boolean) => void;
   onPreview: () => void;
   onCodeMode: () => void;
   onRefresh: () => void;
-}> = ({ scale, setScale, onPreview, onCodeMode, onRefresh }) => {
+}> = ({
+  onPreview,
+  onCodeMode,
+  onRefresh,
+  setIsDisplayLeftMenu,
+  setIsDisplayRightMenu,
+  isDisplayLeftMenu,
+  isDisplayRightMenu,
+}) => {
   return (
     <Flex p={2} borderBottomWidth="2px" borderColor="gray.200" align="center">
       <Flex flex="1" />
       <Flex flex="1" align="center" justify="center">
-        <Button size="sm" disabled={scale <= 50} onClick={() => setScale(scale - 10)}>
-          <MinusIcon />
-        </Button>
-        <Box fontSize="sm" mx="2" width={10} textAlign="center">
-          {scale}%
-        </Box>
-        <Button size="sm" disabled={scale >= 100} onClick={() => setScale(scale + 10)}>
-          <AddIcon />
-        </Button>
+        <SideBarIcon
+          color={isDisplayLeftMenu ? '#000' : '#eee'}
+          onClick={() => setIsDisplayLeftMenu(!isDisplayLeftMenu)}
+        />
+        <SideBarIcon
+          transform="rotateY(180deg)"
+          color={isDisplayRightMenu ? '#000' : '#eee'}
+          onClick={() => setIsDisplayRightMenu(!isDisplayRightMenu)}
+        />
       </Flex>
       <Flex flex="1" justify="end">
         <Button colorScheme="blue" mr={3} onClick={onCodeMode}>