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

import clsx from 'clsx';
import { useCallback } from 'react';

import {
  IconGraphCollapse,
  IconGraphCore,
  IconGraphExpand,
  IconGraphInputs,
  IconGraphInverse,
  IconGraphMaximize,
  IconGraphOutputs,
  IconPredecessor,
  IconReset
} from '@/components/Icons';
import { CProps } from '@/components/props';
import MiniButton from '@/components/ui/MiniButton';
import { Graph } from '@/models/Graph';

interface ToolbarGraphSelectionProps extends CProps.Styling {
  value: number[];
  onChange: (newSelection: number[]) => void;
  graph: Graph;
  isCore: (item: number) => boolean;
  isOwned?: (item: number) => boolean;
  emptySelection?: boolean;
}

function ToolbarGraphSelection({
  className,
  graph,
  value: selected,
  isCore,
  isOwned,
  onChange,
  emptySelection,
  ...restProps
}: ToolbarGraphSelectionProps) {
  const handleSelectCore = useCallback(() => {
    const core = [...graph.nodes.keys()].filter(isCore);
    onChange([...core, ...graph.expandInputs(core)]);
  }, [onChange, graph, isCore]);

  const handleSelectOwned = useCallback(
    () => (isOwned ? onChange([...graph.nodes.keys()].filter(isOwned)) : undefined),
    [onChange, graph, isOwned]
  );

  const handleInvertSelection = useCallback(
    () => onChange([...graph.nodes.keys()].filter(item => !selected.includes(item))),
    [onChange, selected, graph]
  );

  return (
    <div className={clsx('cc-icons', className)} {...restProps}>
      <MiniButton
        titleHtml='Сбросить выделение'
        icon={<IconReset size='1.25rem' className='icon-primary' />}
        onClick={() => onChange([])}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='Выделить все влияющие'
        icon={<IconGraphCollapse size='1.25rem' className='icon-primary' />}
        onClick={() => onChange([...selected, ...graph.expandAllInputs(selected)])}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='Выделить все зависимые'
        icon={<IconGraphExpand size='1.25rem' className='icon-primary' />}
        onClick={() => onChange([...selected, ...graph.expandAllOutputs(selected)])}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='<b>Максимизация</b> <br/>дополнение выделения конституентами, <br/>зависимыми только от выделенных'
        icon={<IconGraphMaximize size='1.25rem' className='icon-primary' />}
        onClick={() => onChange(graph.maximizePart(selected))}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='Выделить поставщиков'
        icon={<IconGraphInputs size='1.25rem' className='icon-primary' />}
        onClick={() => onChange([...selected, ...graph.expandInputs(selected)])}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='Выделить потребителей'
        icon={<IconGraphOutputs size='1.25rem' className='icon-primary' />}
        onClick={() => onChange([...selected, ...graph.expandOutputs(selected)])}
        disabled={emptySelection}
      />
      <MiniButton
        titleHtml='Инвертировать'
        icon={<IconGraphInverse size='1.25rem' className='icon-primary' />}
        onClick={handleInvertSelection}
      />
      <MiniButton
        titleHtml='Выделить ядро'
        icon={<IconGraphCore size='1.25rem' className='icon-primary' />}
        onClick={handleSelectCore}
      />
      {isOwned ? (
        <MiniButton
          titleHtml='Выделить собственные'
          icon={<IconPredecessor size='1.25rem' className='icon-primary' />}
          onClick={handleSelectOwned}
        />
      ) : null}
    </div>
  );
}

export default ToolbarGraphSelection;