fix(tans-theorem): update markers on domain switch

JMaio · Sep 6, 2021 · ff83ac5 · ff83ac5
1 parent 1612234
commit ff83ac5
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 33 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -55,7 +55,6 @@ import {
 } from './components/tans_theorem/tansTheoremUtils';
 import MapMarkerManager from './components/tans_theorem/MapMarkerManager';
 import NearestMisiurewiczCard from './components/tans_theorem/NearestMisiurewiczCard';
-import SelfSimilaritySlider from './components/tans_theorem/SelfSimilaritySlider';
 import IntroDialog from './components/tans_theorem/IntroDialog';
 import TansTheoremProgressCard from './components/tans_theorem/TansTheoremProgressCard';
 import { misiurewiczPairs } from './components/tans_theorem/MPoints';
@@ -268,7 +267,7 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
 
   const [animationState, setAnimationState] = React.useState(AnimationStatus.INTRO);
   const [magnification, setMagnification] = React.useState<number>(1);
-  const [mandelbrotPoints] = useState(
+  const [mandelbrotPoints, setMandelbrotPoints] = useState(
     MISIUREWICZ_POINTS.sort((a, b) => a.factorMagnitude - b.factorMagnitude),
   );
   const [juliaPoints, setJuliaPoints] = useState(
@@ -343,7 +342,19 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
     if (showTan && rendererRef.current)
       setAspectRatio(rendererRef.current.offsetHeight / rendererRef.current.offsetWidth);
   };
+
+  const updateMandelbrotPoints = () => {
+    if (showTan && settings.shadeMisiurewiczDomains)
+      setMandelbrotPoints([focusedPointMandelbrot]);
+    else
+      setMandelbrotPoints(
+        MISIUREWICZ_POINTS.sort((a, b) => a.factorMagnitude - b.factorMagnitude),
+      );
+  };
+
   useInterval(updateAspectRatio, 1000);
+  // we can't update the list when the setting is toggled, so manually check
+  useInterval(updateMandelbrotPoints, 1000);
 
   const handleNearest = (xy: XYType) => {
     const mPoint = findNearestMisiurewiczPoint(xy, 10000);
@@ -405,11 +416,7 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                   setAnimationState={setAnimationState}
                   focusedPointMandelbrot={focusedPointMandelbrot}
                   focusedPointJulia={focusedPointJulia}
-                  pointsMandelbrot={
-                    settings.shadeMisiurewiczDomains
-                      ? [focusedPointMandelbrot]
-                      : mandelbrotPoints
-                  }
+                  pointsMandelbrot={mandelbrotPoints}
                   pointsJulia={juliaPoints}
                   handlePointSelectionMandelbrot={(c) => {
                     handleMisiurewiczPointSelection(c);
@@ -423,6 +430,9 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                 />
               ) : null}
               <AnimationFinalCard
+                focusedPointMandelbrot={focusedPointMandelbrot}
+                magnification={magnification}
+                rotateWhileZooming={settings.rotateWhileZooming}
                 show={animationState === AnimationStatus.PLAY}
                 handleQuit={handleReset}
                 handleGo={() => {
@@ -437,12 +447,6 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
                   }
                 />
               ) : null}
-              {settings.rotateWhileZooming && animationState === AnimationStatus.PLAY ? (
-                <SelfSimilaritySlider
-                  focusedPointMandelbrot={focusedPointMandelbrot}
-                  magnification={magnification}
-                />
-              ) : null}
             </div>
           ) : null}
           <Grid
@@ -462,11 +466,7 @@ function App({ settings }: { settings: settingsDefinitionsType }): JSX.Element {
               focusedPoint={focusedPointMandelbrot}
               setter={handleMisiurewiczPointSelection}
               aspectRatio={aspectRatio}
-              points={
-                settings.shadeMisiurewiczDomains
-                  ? [focusedPointMandelbrot]
-                  : mandelbrotPoints
-              }
+              points={mandelbrotPoints}
             />
             {settings.deepZoom ? (
               <MandelbrotRendererDeep

diff --git a/src/common/tans.ts b/src/common/tans.ts
@@ -36,6 +36,11 @@ export interface PointsListProps {
   handleSelection: (point: PreperiodicPoint) => void;
 }
 
+export interface AnimationFinalCardProps extends SelectMenuProps {
+  focusedPointMandelbrot: PreperiodicPoint;
+  magnification: number;
+  rotateWhileZooming: boolean;
+}
 export interface SelfSimilaritySliderProps {
   focusedPointMandelbrot: PreperiodicPoint;
   magnification: number;

diff --git a/src/components/tans_theorem/AnimationFinalCard.tsx b/src/components/tans_theorem/AnimationFinalCard.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { SelectMenuProps } from '../../common/tans';
+import { AnimationFinalCardProps } from '../../common/tans';
 import { Card, Button, Typography, Box } from '@material-ui/core';
 import { KeyboardArrowLeft } from '@material-ui/icons';
+import SelfSimilaritySlider from './SelfSimilaritySlider';
 
 export enum AnimationStatus {
   INTRO = -1,
@@ -14,31 +15,47 @@ export enum AnimationStatus {
   PLAY = 6,
 }
 
-const AnimationFinalCard = (props: SelectMenuProps): JSX.Element => {
+const AnimationFinalCard = (props: AnimationFinalCardProps): JSX.Element => {
   return (
     <>
       {props.show ? (
         <Card
           style={{
             zIndex: 100,
             display: 'flex',
-            flexDirection: 'row',
+            flexDirection: 'column',
             flexShrink: 1,
             fontSize: '0.8rem',
           }}
         >
-          <Button onClick={props.handleQuit}>
-            <KeyboardArrowLeft />
-            Back
-          </Button>
-          <div style={{ padding: 8, marginLeft: 12 }}>
-            <Typography gutterBottom>You are now free to continue magnifying.</Typography>
-            <Typography gutterBottom>
-              <Box fontWeight="fontWeightBold" m={0} textAlign="left">
-                higher magnification &#8594; stronger similarity
-              </Box>
-            </Typography>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'row',
+              flexShrink: 1,
+            }}
+          >
+            <Button onClick={props.handleQuit}>
+              <KeyboardArrowLeft />
+              Back
+            </Button>
+            <div style={{ padding: 8, marginLeft: 12 }}>
+              <Typography gutterBottom>
+                You are now free to continue magnifying.
+              </Typography>
+              <Typography gutterBottom>
+                <Box fontWeight="fontWeightBold" m={0} textAlign="left">
+                  higher magnification &#8594; stronger similarity
+                </Box>
+              </Typography>
+            </div>
           </div>
+          {props.rotateWhileZooming ? (
+            <SelfSimilaritySlider
+              focusedPointMandelbrot={props.focusedPointMandelbrot}
+              magnification={props.magnification}
+            />
+          ) : null}
         </Card>
       ) : null}
     </>

diff --git a/src/components/tans_theorem/MapMarkerManager.tsx b/src/components/tans_theorem/MapMarkerManager.tsx
@@ -102,7 +102,7 @@ const MapMarkerManager = (props: MarkerManagerProps): JSX.Element => {
     return () => clearInterval(interval);
     // explicitly not adding viewerControls to the deps list
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.aspectRatio, props.focusedPoint, props.setter, props.show]);
+  }, [props.aspectRatio, props.focusedPoint, props.setter, props.show, props.points]);
 
   return <>{props.show ? markers : null}</>;
 };