JsPlumb при горизонтальном скролле не перерисовывает связи
Делаю связи между блоками во Vue с помощью JsPlumb (2.15.6).
Появилась проблема с горизонтальным скроллингом и перерисовкой связей (см.гифку)

Особенность заключается в том, что горизонтальный скроллинг не всей страницы, а внутреннего div-элемента (с помощью css overflow-x: scroll)
Код инициализации:
// свойства
defaultJsPlumbSettings: {
Connector: ['Flowchart', {
alwaysRespectStubs: true,
midpoint: 0.2,
stub: [10, 15],
cornerRadius: 20
} ],
PaintStyle: {
stroke: 'gray',
strokeWidth: 2
},
EndpointStyles: [{ fill: 'gray' }, { fill: 'gray' }],
HoverPaintStyle: { stroke: 'red' },
EndpointHoverStyle: { fill: 'red' }
}
// инициализация
jsPlumb.ready(() => {
const usergroup_graph = this.$refs.usergroup_graph;
const jsPlumbInstance = jsPlumb.getInstance({
...this.defaultJsPlumbSettings
});
jsPlumbInstance.setContainer(usergroup_graph);
jsPlumbInstance.connect({
source: el_1,
target: el_2,
...
});
})
Эту проблему решат данный функционал:
usergroup_graph.onscroll = () => { jsPlumbInstance.repaintEverything() };
но при таком подходе перерисовка происходит с некоторой задержкой и явно не считается грамотным решением.
К примеру, если вовсе не указывать jsPlumbInstance.setContainer, то при горизонтальном скроллинге такой проблемы нет, но без указания контейнера связи смещаются и не имеют относительных координат
Ответы (1 шт):
Как предложил в комментариях @Talleyran необходимо обернуть контейнер в еще один div-блок и уже на него вешать css overflow-x: scroll, но это может не сработать если не указать так-же css position: relative; как для блока-обертки так и для самого контейнера.
Решение:
<div style="position: relative; overflow-x: scroll;">
<div style="position: relative;" ref="usergroup_graph">