ConceptPortal-public/rsconcept/frontend/src/components/select/GraphSelectionToolbar.tsx

80 lines
2.7 KiB
TypeScript
Raw Normal View History

2024-04-04 20:03:41 +03:00
import clsx from 'clsx';
import { Graph } from '@/models/Graph';
import {
IconGraphCollapse,
2024-04-06 23:09:25 +03:00
IconGraphCore,
2024-04-04 20:03:41 +03:00
IconGraphExpand,
IconGraphInputs,
IconGraphMaximize,
IconGraphOutputs,
IconReset
} from '../Icons';
import { CProps } from '../props';
import MiniButton from '../ui/MiniButton';
2024-05-02 17:04:18 +03:00
interface GraphSelectionToolbarProps extends CProps.Styling {
2024-04-04 20:03:41 +03:00
graph: Graph;
2024-04-06 23:09:25 +03:00
core: number[];
2024-04-04 20:03:41 +03:00
setSelected: React.Dispatch<React.SetStateAction<number[]>>;
2024-05-23 13:36:16 +03:00
emptySelection?: boolean;
2024-04-04 20:03:41 +03:00
}
2024-05-23 13:36:16 +03:00
function GraphSelectionToolbar({
className,
graph,
core,
setSelected,
emptySelection,
...restProps
}: GraphSelectionToolbarProps) {
2024-04-04 20:03:41 +03:00
return (
<div className={clsx('cc-icons', className)} {...restProps}>
<MiniButton
titleHtml='Сбросить выделение'
icon={<IconReset size='1.25rem' className='icon-primary' />}
onClick={() => setSelected([])}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
<MiniButton
titleHtml='Выделить все влияющие'
icon={<IconGraphCollapse size='1.25rem' className='icon-primary' />}
onClick={() => setSelected(prev => [...prev, ...graph.expandAllInputs(prev)])}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
<MiniButton
titleHtml='Выделить все зависимые'
icon={<IconGraphExpand size='1.25rem' className='icon-primary' />}
onClick={() => setSelected(prev => [...prev, ...graph.expandAllOutputs(prev)])}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
<MiniButton
titleHtml='<b>Максимизация</b> - дополнение выделения конституентами, зависимыми только от выделенных'
icon={<IconGraphMaximize size='1.25rem' className='icon-primary' />}
onClick={() => setSelected(prev => graph.maximizePart(prev))}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
<MiniButton
titleHtml='Выделить поставщиков'
icon={<IconGraphInputs size='1.25rem' className='icon-primary' />}
onClick={() => setSelected(prev => [...prev, ...graph.expandInputs(prev)])}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
<MiniButton
titleHtml='Выделить потребителей'
icon={<IconGraphOutputs size='1.25rem' className='icon-primary' />}
onClick={() => setSelected(prev => [...prev, ...graph.expandOutputs(prev)])}
2024-05-23 13:36:16 +03:00
disabled={emptySelection}
2024-04-04 20:03:41 +03:00
/>
2024-04-06 23:09:25 +03:00
<MiniButton
titleHtml='Выделить ядро'
icon={<IconGraphCore size='1.25rem' className='icon-primary' />}
onClick={() => setSelected([...core, ...graph.expandInputs(core)])}
/>
2024-04-04 20:03:41 +03:00
</div>
);
}
2024-05-02 17:04:18 +03:00
export default GraphSelectionToolbar;