114 lines
3.6 KiB
TypeScript
114 lines
3.6 KiB
TypeScript
import Divider from '@/components/ui/Divider';
|
||
import LinkTopic from '@/components/ui/LinkTopic';
|
||
import { useConceptOptions } from '@/context/OptionsContext';
|
||
import { HelpTopic } from '@/models/miscellaneous';
|
||
|
||
import {
|
||
IconClustering,
|
||
IconDestroy,
|
||
IconEdit,
|
||
IconFilter,
|
||
IconFitImage,
|
||
IconGraphCollapse,
|
||
IconGraphCore,
|
||
IconGraphExpand,
|
||
IconGraphInputs,
|
||
IconGraphMaximize,
|
||
IconGraphOutputs,
|
||
IconImage,
|
||
IconNewItem,
|
||
IconReset,
|
||
IconRotate3D,
|
||
IconText
|
||
} from '../../../components/Icons';
|
||
|
||
function HelpTermGraph() {
|
||
const { colors } = useConceptOptions();
|
||
return (
|
||
<div className='flex flex-col'>
|
||
<div className='flex'>
|
||
<div className='dense w-[14rem]'>
|
||
<h1>Настройка графа</h1>
|
||
<li>Цвет – покраска узлов</li>
|
||
<li>Граф – расположение</li>
|
||
<li>Размер – размер узлов</li>
|
||
<li>
|
||
<IconText className='inline-icon' /> Отображение текста
|
||
</li>
|
||
<li>
|
||
<IconClustering className='inline-icon' /> Скрыть порожденные
|
||
</li>
|
||
<li>
|
||
<IconRotate3D className='inline-icon' /> Вращение 3D
|
||
</li>
|
||
</div>
|
||
|
||
<Divider vertical margins='mx-3 mt-3' />
|
||
|
||
<div className='dense w-[21rem]'>
|
||
<h1>Изменение узлов</h1>
|
||
<li>Клик на конституенту – выделение</li>
|
||
<li>
|
||
Ctrl + клик – выбор <span style={{ color: colors.fgPurple }}>фокус-конституенты</span>
|
||
</li>
|
||
<li>
|
||
<IconReset className='inline-icon' /> Esc – сбросить выделение
|
||
</li>
|
||
<li>
|
||
<IconEdit className='inline-icon' /> Двойной клик – редактирование
|
||
</li>
|
||
<li>
|
||
<IconDestroy className='inline-icon' /> Delete – удалить выбранные
|
||
</li>
|
||
<li>
|
||
<IconNewItem className='inline-icon' /> Новая со ссылками на выделенные
|
||
</li>
|
||
</div>
|
||
</div>
|
||
|
||
<Divider margins='my-3' />
|
||
|
||
<div className='flex mb-3'>
|
||
<div className='dense w-[14rem]'>
|
||
<h1>Общие</h1>
|
||
<li>
|
||
<IconFilter className='inline-icon' /> Открыть настройки
|
||
</li>
|
||
<li>
|
||
<IconFitImage className='inline-icon' /> Вписать граф в экран
|
||
</li>
|
||
<li>
|
||
<IconImage className='inline-icon' /> Сохранить в формат PNG
|
||
</li>
|
||
</div>
|
||
|
||
<Divider vertical margins='mx-3' />
|
||
|
||
<div className='dense w-[21rem]'>
|
||
<h1>Выделение</h1>
|
||
<li>
|
||
<IconGraphCollapse className='inline-icon' /> все влияющие
|
||
</li>
|
||
<li>
|
||
<IconGraphExpand className='inline-icon' /> все зависимые
|
||
</li>
|
||
<li>
|
||
<IconGraphMaximize className='inline-icon' /> зависимые только от выделенных
|
||
</li>
|
||
<li>
|
||
<IconGraphInputs className='inline-icon' /> входящие напрямую
|
||
</li>
|
||
<li>
|
||
<IconGraphOutputs className='inline-icon' /> исходящие напрямую
|
||
</li>
|
||
<li>
|
||
<IconGraphCore className='inline-icon' /> выделить <LinkTopic text='Ядро' topic={HelpTopic.CC_SYSTEM} />
|
||
</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default HelpTermGraph;
|