feat(ui): add view basic changer functionality

src/App.tsx

@@ -121,7 +121,21 @@ function App(): JSX.Element {
 
   const [showInfo, setShowInfo] = useState(false);
 
-  const toggleInfo = () => setShowInfo(!showInfo);
+  const toggleInfo = () => setShowInfo((i) => !i);
+
+  // [showMandelbrot, showJulia]
+  const [[showMandelbrot, showJulia], setViewerState] = useState<[boolean, boolean]>([
+    true,
+    true,
+  ]);
+  // const [showMandelbrot, setShowMandelbrot] = useState(true);
+  // const [showJulia, setShowJulia] = useState(true);
+  // const [showMandelbrot, showJulia] = viewerState;
+
+  // Wrap the Typography component with animated first
+  // const AnimatedTypography = animated(Typography)
+  // <AnimatedTypography></AnimatedTypography>
+  // const AnimatedGrid = animated(Grid);
 
   return (
     <ThemeProvider theme={theme}>
@@ -131,13 +145,14 @@ function App(): JSX.Element {
           <SettingsContext.Consumer>
             {({ settings }) => {
               const currentDPR = settings.useDPR ? DPR : 1;
-              const direction = size.w < size.h ? 'column-reverse' : 'row';
+              const vertical = size.w < size.h;
               return (
                 // JSX expressions must have one parent element
                 <Grid
                   item
                   container
-                  direction={direction}
+                  direction={vertical ? 'column-reverse' : 'row'}
+                  alignItems={vertical ? 'flex-end' : 'flex-start'}
                   justify="center"
                   className="fullSize"
                   style={{
@@ -148,14 +163,35 @@ function App(): JSX.Element {
                     show={settings.showCoordinates}
                     mandelbrot={mandelbrotControls}
                   />
-                  <Grid item xs className="renderer">
+                  <Grid
+                    item
+                    xs
+                    className="renderer"
+                    style={{
+                      // flex-grow takes up more space in a ratio format
+                      flexGrow: showMandelbrot ? 1 : 0, // percentFlex.m.interpolate((x) => x),
+                    }}
+                  >
                     <MandelbrotRenderer
                       controls={mandelbrotControls}
                       DPR={currentDPR}
                       {...settings}
                     />
                   </Grid>
-                  <Grid item xs className="renderer">
+
+                  <Grid item style={{ width: 0, height: 0, zIndex: 1 }}>
+                    <ViewChanger vertical={vertical} changeFunc={setViewerState} />
+                  </Grid>
+
+                  <Grid
+                    item
+                    xs
+                    className="renderer"
+                    style={{
+                      // flex-grow takes up more space in a ratio format
+                      flexGrow: showJulia ? 1 : 0, // percentFlex.j.interpolate((x) => x),
+                    }}
+                  >
                     <JuliaRenderer
                       c={mandelbrotControls.xyCtrl[0].xy}
                       controls={juliaControls}

src/common/render.ts

@@ -58,3 +58,8 @@ export interface MinimapViewerProps extends WebGLCanvasProps {
   //   fragShader: any;
   //   glRef: React.MutableRefObject<HTMLCanvasElement>;
 }
+
+export interface ViewChangerProps {
+  vertical: boolean;
+  changeFunc: React.Dispatch<React.SetStateAction<[boolean, boolean]>>;
+}

src/components/render/ViewChanger.tsx

@@ -0,0 +1,81 @@
+import { Button, ButtonGroup, makeStyles } from '@material-ui/core';
+import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
+import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
+import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';
+import React from 'react';
+import { ViewChangerProps } from '../../common/render';
+
+const useStyles = makeStyles((theme) => ({
+  // root: {
+  //   transform: 'translateX(-50%) translateY(-50%)',
+  // },
+  changeViewButton: {
+    padding: 4,
+  },
+}));
+
+export default function ViewChanger({
+  vertical,
+  changeFunc,
+}: ViewChangerProps): JSX.Element {
+  // const { vertical, changeFunc, debug, percentFlex } = props;
+  const classes = useStyles();
+
+  const mButton = (
+    <Button
+      className={classes.changeViewButton}
+      onClick={() => {
+        // console.log('julia (up / right)');
+        // always show mandelbrot
+        // show julia if (self) hidden, otherwise hide it
+        // [true, true] => [true, false]
+        // [false, true] => [true, true]
+        changeFunc(([m, j]: boolean[]) => [true, !m]);
+      }}
+    >
+      {vertical ? <KeyboardArrowUpIcon /> : <KeyboardArrowRightIcon />}
+    </Button>
+  );
+  const jButton = (
+    <Button
+      className={classes.changeViewButton}
+      onClick={() => {
+        // console.log('mandelbrot (down / left)');
+        // [true, true] => [false, true]
+        // [true, false] => [true, true]
+        changeFunc(([m, j]: boolean[]) => [!j, true]);
+      }}
+    >
+      {vertical ? <KeyboardArrowDownIcon /> : <KeyboardArrowLeftIcon />}
+    </Button>
+  );
+
+  return (
+    <ButtonGroup
+      orientation={vertical ? 'vertical' : 'horizontal'}
+      variant="contained"
+      style={{
+        transform:
+          // `rotate(${props.vertical ? 0 : 90}deg)` +
+          vertical ? `translate(-100%, -50%)` : `translate(-50%, 0%)`, // original
+        // vertical ? `translate(-125%, -50%)` : `translate(-50%, 25%)`,
+        // vertical ? `translate(-150%, -50%)` : `translate(-50%, 50%)`,
+        marginTop: vertical ? 0 : 12,
+        // clear the settings button
+        marginLeft: vertical ? -72 : 0,
+        // zIndex: 1,
+        // margin: vertical ? `auto auto auto -${margin}px` : `${margin}px auto auto auto`,
+        // width: 50,
+        // height: 50,
+      }}
+    >
+      {vertical ? mButton : jButton}
+      {vertical ? jButton : mButton}
+      {/* <Button>
+        <animated.div>{percentFlex.m.interpolate((x: number) => x)}</animated.div>
+        <animated.div>{percentFlex.j.interpolate((x: number) => x)}</animated.div>
+      </Button> */}
+    </ButtonGroup>
+  );
+}