Spaces:
Running
Running
File size: 3,172 Bytes
ebbd1a5 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import React, { useState, useEffect, useRef } from 'react';
import { Settings } from 'lucide-react';
import { LAYOUT_MODES, PANEL_KEYS, PANEL_LABELS } from '../utils/settings';
const LAYOUT_OPTIONS = [
{ id: LAYOUT_MODES.RANDOM, label: 'Random seed (default)', hint: 'Layout may shift on each run' },
{ id: LAYOUT_MODES.FIXED_SEED, label: 'Fixed seed', hint: 'Same layout every run unless topology changes' },
{ id: LAYOUT_MODES.EXPLICIT, label: 'Explicit coordinates', hint: 'Fixed positions; physics off' },
];
export default function SettingsMenu({ settings, onChange }) {
const [open, setOpen] = useState(false);
const wrapRef = useRef(null);
useEffect(() => {
if (!open) return undefined;
const onDocClick = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) {
setOpen(false);
}
};
document.addEventListener('mousedown', onDocClick);
return () => document.removeEventListener('mousedown', onDocClick);
}, [open]);
const setLayoutMode = (layoutMode) => {
onChange({ ...settings, layoutMode });
};
const togglePanel = (key) => {
onChange({
...settings,
panels: { ...settings.panels, [key]: !settings.panels[key] },
});
};
return (
<div className="ccai-dropdown-wrap decidron-settings-wrap" ref={wrapRef}>
<button
type="button"
className="btn-sm btn-outline icon-btn decidron-settings-trigger"
onClick={() => setOpen((v) => !v)}
title="Settings"
aria-expanded={open}
aria-haspopup="true"
>
<Settings size={16} />
</button>
{open && (
<div className="ccai-dropdown-panel decidron-settings-panel" role="menu">
<div className="ccai-dropdown-section">
<div className="ccai-dropdown-section-title">Diagram node placement</div>
{LAYOUT_OPTIONS.map((opt) => (
<label key={opt.id} className="decidron-settings-radio">
<input
type="radio"
name="layoutMode"
checked={settings.layoutMode === opt.id}
onChange={() => setLayoutMode(opt.id)}
/>
<span>
<strong>{opt.label}</strong>
<span className="decidron-settings-hint">{opt.hint}</span>
</span>
</label>
))}
</div>
<div className="ccai-dropdown-divider" />
<div className="ccai-dropdown-section">
<div className="ccai-dropdown-section-title">Right-side panels</div>
{PANEL_KEYS.map((key) => (
<label key={key} className="ccai-dropdown-item decidron-settings-check">
<input
type="checkbox"
checked={!!settings.panels[key]}
onChange={() => togglePanel(key)}
/>
<span className="ccai-dropdown-item-text">
<span className="ccai-dropdown-item-name">{PANEL_LABELS[key]}</span>
</span>
</label>
))}
</div>
</div>
)}
</div>
);
}
|