В моем проекте пользователь создает диаграммы, в которых таблицы соединены стрелками. Для таблиц я использую компонент Draggable (react-draggable), а стрелки тяну из библиотеки react-xarrows. Чтобы стрелка тянулась от таблицы к таблице, у ее компонента в json есть параметры sourceTableName и targetTableName. Между одними и теми же таблицами связей может быть несколько, в таком случае targetTableName и sourceTableName повторяются, а имя компонента-стрелки меняется: к нему добавляются порядковые 2, 3, 4 и т.д.
Так выглядит метод, который я вызываю для отрисовки стрелок между таблицами:
const getArrows = () => {
let arrows = [];
diagram.areas?.map((area) => {
area.foreignKeys?.map((link, key) => {
arrows.push(
<div id="arrowContainer">
<Xarrow
start={link.sourceTableName}
end={link.targetTableName}
path={"straight"} //
headShape={"arrow1"}
headSize={12}
startAnchor={"auto"}
endAnchor={"auto"}
zIndex={arrowIsShawn}
color={area.color}
strokeWidth={arrowWidth}
key={link.name}
passProps={{
onClick: (event) => onDeleteArrowHandler(link.name)
}}
/>
</div>
);
});
});
return arrows;
};
В таком случае каждая стрелка "лежит" поверх предыдущей, и пользователь не видит, что связей несколько. Как можно сдвинуть стрелку с другой край таблицы (добавить другой endAnchor, например), если они сконцентрированы в одном месте? Не могу понять, как решить эту проблему