anti/DECNET
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web/mazenet): toggleable palette (deployer) panel

Browse Source
This commit is contained in:
anti
2026-04-22 18:10:18 -04:00
parent 8985c28fab
commit 31d02a9726
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
decnet_web/src/components/MazeNET/MazeNET.tsx
View File

@@ -1,7 +1,8 @@
import React, { useCallback, useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom'; import { useSearchParams, useNavigate } from 'react-router-dom';
import { import {
PanelRightOpen, PanelRightClose, RotateCcw, UploadCloud, ArrowLeft, PanelRightOpen, PanelRightClose, PanelLeftOpen, PanelLeftClose,
RotateCcw, UploadCloud, ArrowLeft,
Plus, Trash2, Zap, Copy, Eye, ShieldAlert, GitMerge, Server, Plus, Trash2, Zap, Copy, Eye, ShieldAlert, GitMerge, Server,
} from 'lucide-react'; } from 'lucide-react';
import './MazeNET.css'; import './MazeNET.css';
@@ -46,6 +47,7 @@ const MazeNET: React.FC = () => {
const [topoVersion, setTopoVersion] = useState<number>(0); const [topoVersion, setTopoVersion] = useState<number>(0);
const [selection, setSelection] = useState<Selection>(null); const [selection, setSelection] = useState<Selection>(null);
const [inspectorOpen, setInspectorOpen] = useState(true); const [inspectorOpen, setInspectorOpen] = useState(true);
const [paletteOpen, setPaletteOpen] = useState(true);
const [services, setServices] = useState<ServiceDef[]>(DEFAULT_SERVICES); const [services, setServices] = useState<ServiceDef[]>(DEFAULT_SERVICES);
const [archetypes, setArchetypes] = useState<Archetype[]>(DEFAULT_ARCHETYPES); const [archetypes, setArchetypes] = useState<Archetype[]>(DEFAULT_ARCHETYPES);
@@ -554,6 +556,9 @@ const MazeNET: React.FC = () => {
<button type="button" className="maze-btn ghost" onClick={() => navigate('/mazenet')}> <button type="button" className="maze-btn ghost" onClick={() => navigate('/mazenet')}>
<ArrowLeft size={12} /> TOPOLOGIES <ArrowLeft size={12} /> TOPOLOGIES
</button> </button>
<button type="button" className="maze-btn ghost" onClick={() => setPaletteOpen((o) => !o)}>
{paletteOpen ? <PanelLeftClose size={12} /> : <PanelLeftOpen size={12} />} PALETTE
</button>
<button type="button" className="maze-btn ghost" onClick={() => setInspectorOpen((o) => !o)}> <button type="button" className="maze-btn ghost" onClick={() => setInspectorOpen((o) => !o)}>
{inspectorOpen ? <PanelRightClose size={12} /> : <PanelRightOpen size={12} />} INSPECTOR {inspectorOpen ? <PanelRightClose size={12} /> : <PanelRightOpen size={12} />} INSPECTOR
</button> </button>
@@ -574,9 +579,13 @@ const MazeNET: React.FC = () => {
<div <div
className="maze-shell" className="maze-shell"
style={{ gridTemplateColumns: inspectorOpen ? '240px 1fr 320px' : '240px 1fr' }} style={{
gridTemplateColumns: `${paletteOpen ? '240px ' : ''}1fr${inspectorOpen ? ' 320px' : ''}`,
}}
> >
<Palette services={services} archetypes={archetypes} startPaletteDrag={interaction.startPaletteDrag} /> {paletteOpen && (
<Palette services={services} archetypes={archetypes} startPaletteDrag={interaction.startPaletteDrag} />
)}
<Canvas <Canvas
ref={canvasRef} ref={canvasRef}
nets={nets} nets={nets}