Додавання до типу з’єднання необов’язкового поля selected дозволить нам вказати програмно додані з’єднання як вибрані
class Connection extends ClassicPreset.Connection<
ClassicPreset.Node,
ClassicPreset.Node
> {
selected?: boolean;
}
type Schemes = GetSchemes<ClassicPreset.Node, Connection>;
Наш перший крок полягає в тому, щоб реалізувати спеціальне з’єднання, яке буде клікабельним та змінювати колір при виборі.
Ми почнемо з компонента Connection.tsx із класичного пресету та покращимо його функціональність шляхом впровадження нових функцій.
Ми можемо зробити з’єднання більш зручним для користувача, визначивши дублюючий прозорий шлях.
import styled from "styled-components";
const HoverPath = styled.path`
fill: none;
stroke-width: 15px;
pointer-events: auto;
stroke: transparent;
`;
Ми покращимо існуючий компонент Path, додавши властивість selected і змінивши колір властивості stroke.
const Path = styled.path<{ selected?: boolean >`
stroke: ${(props) => (props.selected ? "rgb(255, 217, 44)" : "steelblue")};
`;
Компонент має повернути такий шаблон:
<Svg
onPointerDown={(e: PointerEvent) => e.stopPropagation()}
onClick={props.click}
>
<HoverPath d={path} />
<Path selected={props.data.selected} d={path} />
</Svg>
Існуюче підключення можна позначити наступним чином:
connection.selected = true;
area.update("connection", connection.id);
Давайте підготуємо селектор
const selector = AreaExtensions.selector();
const accumulating = AreaExtensions.accumulateOnCtrl();
AreaExtensions.selectableNodes(area, selector, { accumulating });
Додати підключення до селектора можна в такий спосіб (наприклад, натиснувши на підключення):
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);
Тепер ми об’єднаємо все це в один компонент, використовуючи простий підхід, заснований на замиканні (хоча інші методи є кращими у продакшен коді), і передамо його як спеціальний компонент підключення
function SelectableConnectionBind(props: { data: Schemes["Connection"] }) {
return (
<SelectableConnection
{...props}
click={() => {
selector.add({
/// ...
})
// тут слід розмістити код для додавання до селектора, як показано вище
}}
/>
);
}
render.addPreset(Presets.classic.setup({
customize: {
connection() {
return SelectableConnectionBind;
}
}
}));
Перегляньте повний результат на сторінці прикладу Вибір з'єднань.