Делаю связи между блоками во 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
, то при горизонтальном скроллинге такой проблемы нет, но без указания контейнера связи смещаются и не имеют относительных координат