1

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

2
  • Оберните контейнер со связями в ещё один div и скрольте его
    – Talleyran
    Commented 10 авг. 2021 в 23:05
  • @Talleyran к сожалению проблема осталась
    – xzdwq
    Commented 11 авг. 2021 в 7:52

1 ответ 1

0

Как предложил в комментариях @Talleyran необходимо обернуть контейнер в еще один div-блок и уже на него вешать css overflow-x: scroll, но это может не сработать если не указать так-же css position: relative; как для блока-обертки так и для самого контейнера.
Решение:

<div style="position: relative; overflow-x: scroll;">
  <div style="position: relative;" ref="usergroup_graph">

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.