ruch
Version:
Revolutionary React TypeScript CLI with hexagonal architecture & AI-powered development assistance. Create maintainable, scalable applications with domain-driven design and integrated AI tooling.
62 lines • 6.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ControlPanel = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const ControlPanel = ({ settings, onSettingsChange, graphData, }) => {
const handleSettingChange = (key, value) => {
onSettingsChange({
...settings,
[key]: value,
});
};
return ((0, jsx_runtime_1.jsxs)("div", { style: {
width: '300px',
height: '100%',
backgroundColor: '#ffffff',
borderRight: '1px solid #e5e7eb',
padding: '20px',
overflowY: 'auto',
}, children: [(0, jsx_runtime_1.jsx)("h2", { style: { margin: '0 0 20px 0', color: '#1f2937' }, children: "Domain Visualizer" }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '20px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 10px 0', color: '#374151', fontSize: '14px' }, children: "Project Info" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px', color: '#6b7280' }, children: [(0, jsx_runtime_1.jsxs)("p", { children: ["Domains: ", graphData.metadata.totalDomains] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Dependencies: ", graphData.metadata.totalDependencies] }), (0, jsx_runtime_1.jsxs)("p", { children: ["Generated:", ' ', new Date(graphData.metadata.generatedAt).toLocaleString()] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '20px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 10px 0', color: '#374151', fontSize: '14px' }, children: "Display Settings" }), (0, jsx_runtime_1.jsxs)("label", { style: { display: 'block', marginBottom: '10px', fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: settings.showLabels, onChange: (e) => handleSettingChange('showLabels', e.target.checked), style: { marginRight: '8px' } }), "Show Labels"] }), (0, jsx_runtime_1.jsxs)("label", { style: { display: 'block', marginBottom: '10px', fontSize: '12px' }, children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", checked: settings.highlightCycles, onChange: (e) => handleSettingChange('highlightCycles', e.target.checked), style: { marginRight: '8px' } }), "Highlight Circular Dependencies"] }), (0, jsx_runtime_1.jsxs)("label", { style: { display: 'block', marginBottom: '10px', fontSize: '12px' }, children: ["Node Size: ", settings.nodeSize, "px", (0, jsx_runtime_1.jsx)("input", { type: "range", min: "40", max: "120", value: settings.nodeSize, onChange: (e) => handleSettingChange('nodeSize', parseInt(e.target.value)), style: { width: '100%', marginTop: '4px' } })] }), (0, jsx_runtime_1.jsxs)("label", { style: { display: 'block', marginBottom: '10px', fontSize: '12px' }, children: ["Edge Thickness: ", settings.edgeThickness, "px", (0, jsx_runtime_1.jsx)("input", { type: "range", min: "1", max: "5", value: settings.edgeThickness, onChange: (e) => handleSettingChange('edgeThickness', parseInt(e.target.value)), style: { width: '100%', marginTop: '4px' } })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { marginBottom: '20px' }, children: [(0, jsx_runtime_1.jsx)("h3", { style: { margin: '0 0 10px 0', color: '#374151', fontSize: '14px' }, children: "Legend" }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '12px' }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: '16px',
height: '16px',
borderRadius: '50%',
backgroundColor: '#10b981',
marginRight: '8px',
} }), "Feature Domain"] }), (0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: '16px',
height: '16px',
borderRadius: '50%',
backgroundColor: '#f59e0b',
marginRight: '8px',
} }), "Core Domain"] }), (0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: '16px',
height: '16px',
borderRadius: '50%',
backgroundColor: '#3b82f6',
marginRight: '8px',
} }), "Shared Domain"] }), (0, jsx_runtime_1.jsxs)("div", { style: {
display: 'flex',
alignItems: 'center',
marginBottom: '8px',
}, children: [(0, jsx_runtime_1.jsx)("div", { style: {
width: '16px',
height: '16px',
borderRadius: '50%',
backgroundColor: '#ef4444',
marginRight: '8px',
} }), "Circular Dependency"] })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: { fontSize: '11px', color: '#9ca3af', marginTop: 'auto' }, children: [(0, jsx_runtime_1.jsx)("p", { children: "Click and drag to pan" }), (0, jsx_runtime_1.jsx)("p", { children: "Scroll to zoom" }), (0, jsx_runtime_1.jsx)("p", { children: "Click nodes/edges for details" })] })] }));
};
exports.ControlPanel = ControlPanel;
//# sourceMappingURL=ControlPanel.js.map