Вибір з'єднань

Вибір з'єднаньВибір вузлів

Підготовка типів

Додавання до типу з’єднання необов’язкового поля selected дозволить нам вказати програмно додані з’єднання як вибрані

ts
class Connection extends ClassicPreset.Connection<
  ClassicPreset.Node,
  ClassicPreset.Node
> {
  selected?: boolean;
}

type Schemes = GetSchemes<ClassicPreset.Node, Connection>;

Кастомне з'єднання

Наш перший крок полягає в тому, щоб реалізувати спеціальне з’єднання, яке буде клікабельним та змінювати колір при виборі.

Ми почнемо з компонента Connection.tsx із класичного пресету та покращимо його функціональність шляхом впровадження нових функцій.

Ми можемо зробити з’єднання більш зручним для користувача, визначивши дублюючий прозорий шлях.

ts
import styled from "styled-components";

const HoverPath = styled.path`
  fill: none;
  stroke-width: 15px;
  pointer-events: auto;
  stroke: transparent;
`;

Ми покращимо існуючий компонент Path, додавши властивість selected і змінивши колір властивості stroke.

ts
const Path = styled.path<{ selected?: boolean >`
  stroke: ${(props) => (props.selected ? "rgb(255, 217, 44)" : "steelblue")};
`;

Компонент має повернути такий шаблон:

tsx
<Svg
  onPointerDown={(e: PointerEvent) => e.stopPropagation()}
  onClick={props.click}
>
  <HoverPath d={path} />
  <Path selected={props.data.selected} d={path} />
</Svg>

Існуюче підключення можна позначити наступним чином:

ts
connection.selected = true;
area.update("connection", connection.id);

Синхронізація вибраних з'єднань

Давайте підготуємо селектор

ts
const selector = AreaExtensions.selector();
const accumulating = AreaExtensions.accumulateOnCtrl();

AreaExtensions.selectableNodes(area, selector, { accumulating });

Додати підключення до селектора можна в такий спосіб (наприклад, натиснувши на підключення):

ts
selector.add({
  id: connection.id,
  label: 'connection',
  translate() {},
  unselect() {
    connection.selected = false;
    area.update("connection", connection.id);
  }
}, accumulating.active())

connection.selected = true;
area.update("connection", connection.id);

Тепер ми об’єднаємо все це в один компонент, використовуючи простий підхід, заснований на замиканні (хоча інші методи є кращими у продакшен коді), і передамо його як спеціальний компонент підключення

tsx
function SelectableConnectionBind(props: { data: Schemes["Connection"] }) {
  return (
    <SelectableConnection
      {...props}
      click={() => {
        selector.add({
          /// ...
        })
        // тут слід розмістити код для додавання до селектора, як показано вище
      }}
    />
  );
}

render.addPreset(Presets.classic.setup({
  customize: {
    connection() {
      return SelectableConnectionBind;
    }
  }
}));

Перегляньте повний результат на сторінці прикладу Вибір з'єднань.