refactor: удаление легенды
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@ -5,7 +5,6 @@ import { Toolbar } from './components/Toolbar/Toolbar.tsx';
|
||||
import { LeftPanel } from './components/SidePanel/LeftPanel.tsx';
|
||||
import { RightPanel } from './components/SidePanel/RightPanel.tsx';
|
||||
import { ConnectionsPanel } from './components/ConnectionsPanel/ConnectionsPanel.tsx';
|
||||
import { LegendModal } from './components/Legend/LegendModal.tsx';
|
||||
import { SchemaCanvas } from './features/schema/SchemaCanvas.tsx';
|
||||
import { ContextMenu } from './features/schema/context-menu/ContextMenu.tsx';
|
||||
|
||||
@ -20,7 +19,6 @@ export default function App() {
|
||||
bottomPanel={<ConnectionsPanel />}
|
||||
/>
|
||||
<ContextMenu />
|
||||
<LegendModal />
|
||||
</ConfigProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,86 +0,0 @@
|
||||
import { Modal, Space, Tag } from 'antd';
|
||||
import { useSchemaStore } from '../../store/schemaStore.ts';
|
||||
import { STATUS_COLORS, STATUS_LABELS } from '../../constants/statusColors.ts';
|
||||
import { EntityStatus, LineStyle, Medium } from '../../types/index.ts';
|
||||
|
||||
export function LegendModal() {
|
||||
const visible = useSchemaStore((s) => s.legendVisible);
|
||||
const setVisible = useSchemaStore((s) => s.setLegendVisible);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="Легенда"
|
||||
open={visible}
|
||||
onCancel={() => setVisible(false)}
|
||||
footer={null}
|
||||
width={480}
|
||||
>
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h4 style={{ marginBottom: 8 }}>Цвета статусов</h4>
|
||||
<Space wrap>
|
||||
{Object.values(EntityStatus).map((status) => {
|
||||
const colors = STATUS_COLORS[status];
|
||||
const label = STATUS_LABELS[status];
|
||||
return (
|
||||
<Tag
|
||||
key={status}
|
||||
style={{
|
||||
borderColor: colors.border,
|
||||
backgroundColor: colors.fill,
|
||||
color: colors.text,
|
||||
}}
|
||||
>
|
||||
{label}
|
||||
</Tag>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: 20 }}>
|
||||
<h4 style={{ marginBottom: 8 }}>Типы линий</h4>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{Object.values(LineStyle).map((style) => {
|
||||
const dasharray =
|
||||
style === LineStyle.Solid
|
||||
? ''
|
||||
: style === LineStyle.Dashed
|
||||
? '8 4'
|
||||
: '2 4';
|
||||
return (
|
||||
<div key={style} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<svg width={60} height={20}>
|
||||
<line
|
||||
x1={0}
|
||||
y1={10}
|
||||
x2={60}
|
||||
y2={10}
|
||||
stroke="#333"
|
||||
strokeWidth={2}
|
||||
strokeDasharray={dasharray}
|
||||
/>
|
||||
</svg>
|
||||
<span style={{ fontSize: 12 }}>{style}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 style={{ marginBottom: 8 }}>Среда передачи</h4>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
|
||||
{Object.values(Medium).map((medium) => (
|
||||
<div key={medium} style={{ fontSize: 12 }}>
|
||||
<strong>{medium}</strong>
|
||||
{medium === Medium.Optical && ' — оптическое волокно'}
|
||||
{medium === Medium.Copper && ' — медный кабель'}
|
||||
{medium === Medium.Wireless && ' — беспроводная связь'}
|
||||
{medium === Medium.Unknown && ' — неизвестная среда'}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -11,7 +11,6 @@ import {
|
||||
NodeIndexOutlined,
|
||||
EyeOutlined,
|
||||
EditOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useSchemaStore } from '../../store/schemaStore.ts';
|
||||
|
||||
@ -24,7 +23,6 @@ export function Toolbar() {
|
||||
const toggleMinimap = useSchemaStore((s) => s.toggleMinimap);
|
||||
const switchLineType = useSchemaStore((s) => s.switchLineType);
|
||||
const toggleLabels = useSchemaStore((s) => s.toggleLabels);
|
||||
const setLegendVisible = useSchemaStore((s) => s.setLegendVisible);
|
||||
|
||||
const zoom = graph ? Math.round(graph.zoom() * 100) : 100;
|
||||
|
||||
@ -93,13 +91,6 @@ export function Toolbar() {
|
||||
onChange={toggleLabels}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="Легенда">
|
||||
<Button
|
||||
size="small"
|
||||
icon={<InfoCircleOutlined />}
|
||||
onClick={() => setLegendVisible(true)}
|
||||
/>
|
||||
</Tooltip>
|
||||
</Space>
|
||||
|
||||
{/* Center: actions */}
|
||||
|
||||
@ -26,7 +26,6 @@ interface SchemaStore {
|
||||
rightPanelData: Record<string, unknown> | null;
|
||||
connectionsPanelData: Record<string, unknown> | null;
|
||||
connectionsPanelVisible: boolean;
|
||||
legendVisible: boolean;
|
||||
|
||||
setGraph: (graph: Graph) => void;
|
||||
setMode: (mode: 'view' | 'edit') => void;
|
||||
@ -40,7 +39,6 @@ interface SchemaStore {
|
||||
setRightPanelData: (data: Record<string, unknown> | null) => void;
|
||||
setConnectionsPanelData: (data: Record<string, unknown> | null) => void;
|
||||
setConnectionsPanelVisible: (visible: boolean) => void;
|
||||
setLegendVisible: (visible: boolean) => void;
|
||||
}
|
||||
|
||||
export const useSchemaStore = create<SchemaStore>((set) => ({
|
||||
@ -58,7 +56,6 @@ export const useSchemaStore = create<SchemaStore>((set) => ({
|
||||
rightPanelData: null,
|
||||
connectionsPanelData: null,
|
||||
connectionsPanelVisible: false,
|
||||
legendVisible: false,
|
||||
|
||||
setGraph: (graph) => set({ graph }),
|
||||
setMode: (mode) => set({ mode }),
|
||||
@ -104,5 +101,4 @@ export const useSchemaStore = create<SchemaStore>((set) => ({
|
||||
setConnectionsPanelData: (data) => set({ connectionsPanelData: data }),
|
||||
setConnectionsPanelVisible: (visible) =>
|
||||
set({ connectionsPanelVisible: visible }),
|
||||
setLegendVisible: (visible) => set({ legendVisible: visible }),
|
||||
}));
|
||||
|
||||
Reference in New Issue
Block a user