feature toggles

diff --git a/resources/js/components/zootr/MixedPoolsTracker.js b/resources/js/components/zootr/MixedPoolsTracker.js
index 0c1e82fb841d12d95d203f742534c185cc77b696..fd4432b52a170c6254c2e6fc0075f169ecfb562c 100644 (file)
--- a/resources/js/components/zootr/MixedPoolsTracker.js
+++ b/resources/js/components/zootr/MixedPoolsTracker.js
@@ -2834,6 +2834,12 @@ const MixedPoolsTracker = () => {
        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 setConnection = React.useCallback((src, dst) => {
                setConnections((c) => {
                        const newConn = { ...c };
@@ -3125,8 +3131,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 }}
                                                        />
-                                                       {map.labelPos ?
+                                                       {map.labelPos && showLabels ?
                                                                <text
                                                                        className="area-label"
                                                                        x={map.labelPos.x}
@@ -3136,31 +3143,72 @@ const MixedPoolsTracker = () => {
                                                                        {map.short}
                                                                </text>
                                                        : null}
-                                                       {map.entrances.map((entrance) =>
+                                                       {showEntrances ? map.entrances.map((entrance) =>
                                                                <MapEntrance key={entrance.id} entrance={entrance} />
-                                                       )}
+                                                       ) : null}
                                                </g>
                                        )}
-                                       <g title="connectors">
-                                               {connectors.map((c) =>
-                                                       <MapConnector
-                                                               key={`${c.from.id}-${c.to.id}`}
-                                                               from={c.from}
-                                                               to={c.to}
-                                                               via={c.via}
-                                                       />
-                                               )}
-                                       </g>
-                                       <g title="anotations">
-                                               {annotations.map((a) =>
-                                                       <MapAnnotation
-                                                               key={`${a.id}`}
-                                                               annotation={a}
-                                                       />
-                                               )}
-                                       </g>
+                                       {showConnectors ?
+                                               <g title="connectors">
+                                                       {connectors.map((c) =>
+                                                               <MapConnector
+                                                                       key={`${c.from.id}-${c.to.id}`}
+                                                                       from={c.from}
+                                                                       to={c.to}
+                                                                       via={c.via}
+                                                               />
+                                                       )}
+                                               </g>
+                                       : null}
+                                       {showWarps ?
+                                               <g title="anotations">
+                                                       {annotations.map((a) =>
+                                                               <MapAnnotation
+                                                                       key={`${a.id}`}
+                                                                       annotation={a}
+                                                               />
+                                                       )}
+                                               </g>
+                                       : 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>
+                               <Button
+                                       onClick={() => setShowLabels(s => !s)}
+                                       size="sm"
+                                       variant={showLabels ? 'secondary' : 'outline-secondary'}
+                               >
+                                       Labels
+                               </Button>
+                               <Button
+                                       onClick={() => setShowMaps(s => !s)}
+                                       size="sm"
+                                       variant={showMaps ? 'secondary' : 'outline-secondary'}
+                               >
+                                       Maps
+                               </Button>
+                               <Button
+                                       onClick={() => setShowWarps(s => !s)}
+                                       size="sm"
+                                       variant={showWarps ? 'secondary' : 'outline-secondary'}
+                               >
+                                       Warps
+                               </Button>
+                       </div>
                </div>
        </CONTEXT.Provider>;
 };