store tracker prefs

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index fd4432b52a170c6254c2e6fc0075f169ecfb562c..808ccdfbf831481be38df5cccebba55845cb471f 100644 (file)
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2828,17 +2828,26 @@ MapAnnotation.propTypes = {
        }),
 };
 
+const initPrefs = () => {
+       const dump = localStorage.getItem('zootr.mixed-pools-tracker-prefs');
+       if (dump) {
+               return JSON.parse(dump);
+       }
+       return {
+               showConnectors: true,
+               showEntrances: true,
+               showLabels: true,
+               showMaps: false,
+               showWarps: true,
+       };
+};
+
 const MixedPoolsTracker = () => {
        const { t } = useTranslation();
 
        const [connections, setConnections] = React.useState({});
        const [dragging, setDragging] = React.useState(null);
-
-       const [showConnectors, setShowConnectors] = React.useState(true);
-       const [showEntrances, setShowEntrances] = React.useState(true);
-       const [showLabels, setShowLabels] = React.useState(true);
-       const [showMaps, setShowMaps] = React.useState(true);
-       const [showWarps, setShowWarps] = React.useState(true);
+       const [prefs, setPrefs] = React.useState(initPrefs());
 
        const setConnection = React.useCallback((src, dst) => {
                setConnections((c) => {
@@ -3034,34 +3043,19 @@ const MixedPoolsTracker = () => {
                }
        }, [setConnections, t]);
 
+       const togglePref = React.useCallback((which) => {
+               setPrefs((oldPrefs) => {
+                       const newPrefs = {
+                               ...oldPrefs,
+                               [which]: !oldPrefs[which],
+                       };
+                       localStorage.setItem('zootr.mixed-pools-tracker-prefs', JSON.stringify(newPrefs));
+                       return newPrefs;
+               });
+       }, []);
+
        return <CONTEXT.Provider value={context}>
                <div className="mixed-pools-tracker">
-                       <div className="menu-bar button-bar">
-                               <Button
-                                       onClick={save}
-                                       size="sm"
-                                       title={t('button.save')}
-                                       variant="outline-secondary"
-                               >
-                                       <Icon.SAVE title="" />
-                               </Button>
-                               <Button
-                                       onClick={load}
-                                       size="sm"
-                                       title={t('button.load')}
-                                       variant="outline-secondary"
-                               >
-                                       <Icon.LOAD title="" />
-                               </Button>
-                               <Button
-                                       onClick={reset}
-                                       size="sm"
-                                       title={t('button.reset')}
-                                       variant="outline-secondary"
-                               >
-                                       <Icon.RESET title="" />
-                               </Button>
-                       </div>
                        <div className="columns">
                                {superGroups.map((sg) =>
                                        <div className="column" key={sg.key}>
@@ -3131,9 +3125,9 @@ const MixedPoolsTracker = () => {
                                                                pointerEvents="none"
                                                                x={map.bg.pos.x} y={map.bg.pos.y}
                                                                width={map.bg.size.x}
-                                                               style={{ opacity: showMaps ? 1 : 0.25 }}
+                                                               style={{ opacity: prefs.showMaps ? 1 : 0.25 }}
                                                        />
-                                                       {map.labelPos && showLabels ?
+                                                       {map.labelPos && prefs.showLabels ?
                                                                <text
                                                                        className="area-label"
                                                                        x={map.labelPos.x}
@@ -3143,12 +3137,12 @@ const MixedPoolsTracker = () => {
                                                                        {map.short}
                                                                </text>
                                                        : null}
-                                                       {showEntrances ? map.entrances.map((entrance) =>
+                                                       {prefs.showEntrances ? map.entrances.map((entrance) =>
                                                                <MapEntrance key={entrance.id} entrance={entrance} />
                                                        ) : null}
                                                </g>
                                        )}
-                                       {showConnectors ?
+                                       {prefs.showConnectors ?
                                                <g title="connectors">
                                                        {connectors.map((c) =>
                                                                <MapConnector
@@ -3160,7 +3154,7 @@ const MixedPoolsTracker = () => {
                                                        )}
                                                </g>
                                        : null}
-                                       {showWarps ?
+                                       {prefs.showWarps ?
                                                <g title="anotations">
                                                        {annotations.map((a) =>
                                                                <MapAnnotation
@@ -3172,43 +3166,71 @@ const MixedPoolsTracker = () => {
                                        : null}
                                </svg>
                        </div>
-                       <div className="menu-bar button-bar">
-                               <Button
-                                       onClick={() => setShowConnectors(s => !s)}
-                                       size="sm"
-                                       variant={showConnectors ? 'secondary' : 'outline-secondary'}
-                               >
-                                       Connectors
-                               </Button>
-                               <Button
-                                       onClick={() => setShowEntrances(s => !s)}
-                                       size="sm"
-                                       variant={showEntrances ? 'secondary' : 'outline-secondary'}
-                               >
-                                       Entrances
-                               </Button>
+                       <div className="menu-bar">
+                               <div className="button-bar">
+                                       <Button
+                                               onClick={() => togglePref('showConnectors')}
+                                               size="sm"
+                                               variant={prefs.showConnectors ? 'secondary' : 'outline-secondary'}
+                                       >
+                                               Connectors
+                                       </Button>
+                                       <Button
+                                               onClick={() => togglePref('showEntrances')}
+                                               size="sm"
+                                               variant={prefs.showEntrances ? 'secondary' : 'outline-secondary'}
+                                       >
+                                               Entrances
+                                       </Button>
+                                       <Button
+                                               onClick={() => togglePref('showLabels')}
+                                               size="sm"
+                                               variant={prefs.showLabels ? 'secondary' : 'outline-secondary'}
+                                       >
+                                               Labels
+                                       </Button>
+                                       <Button
+                                               onClick={() => togglePref('showMaps')}
+                                               size="sm"
+                                               variant={prefs.showMaps ? 'secondary' : 'outline-secondary'}
+                                       >
+                                               Maps
+                                       </Button>
+                                       <Button
+                                               onClick={() => togglePref('showWarps')}
+                                               size="sm"
+                                               variant={prefs.showWarps ? 'secondary' : 'outline-secondary'}
+                                       >
+                                               Warps
+                                       </Button>
+                               </div>
+                       <div className="button-bar">
                                <Button
-                                       onClick={() => setShowLabels(s => !s)}
+                                       onClick={save}
                                        size="sm"
-                                       variant={showLabels ? 'secondary' : 'outline-secondary'}
+                                       title={t('button.save')}
+                                       variant="outline-secondary"
                                >
-                                       Labels
+                                       <Icon.SAVE title="" />
                                </Button>
                                <Button
-                                       onClick={() => setShowMaps(s => !s)}
+                                       onClick={load}
                                        size="sm"
-                                       variant={showMaps ? 'secondary' : 'outline-secondary'}
+                                       title={t('button.load')}
+                                       variant="outline-secondary"
                                >
-                                       Maps
+                                       <Icon.LOAD title="" />
                                </Button>
                                <Button
-                                       onClick={() => setShowWarps(s => !s)}
+                                       onClick={reset}
                                        size="sm"
-                                       variant={showWarps ? 'secondary' : 'outline-secondary'}
+                                       title={t('button.reset')}
+                                       variant="outline-secondary"
                                >
-                                       Warps
+                                       <Icon.RESET title="" />
                                </Button>
                        </div>
+                       </div>
                </div>
        </CONTEXT.Provider>;
 };

diff --git a/resources/sass/zootr.scss b/resources/sass/zootr.scss
index 3d0261e7c3ccb47ea9c41b378168d061284a292f..1af50bf237419324d5983d5f675475ebe8de9659 100644 (file)
--- a/resources/sass/zootr.scss
+++ b/resources/sass/zootr.scss
@@ -137,4 +137,9 @@
                        }
                }
        }
+       .menu-bar {
+               max-width: 104em;
+               display: flex;
+               justify-content: space-between;
+       }
 }