@19depeche90

Как сделать, чтобы стрелки от одной таблицы к другой не накладывались друг на друга (react-xarrows)?

В моем проекте пользователь создает диаграммы, в которых таблицы соединены стрелками. Для таблиц я использую компонент 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, например), если они сконцентрированы в одном месте? Не могу понять, как решить эту проблему
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы