Как увеличить диаграмму jsPlumb

Я пытаюсь сделать доступным масштабирование при прокрутке. У меня есть одна таблица #mainDiv с несколькими таблицами .foo внутри с конечными точками jsPlumb. Когда пользователь прокручивает, #mainDiv должен оставаться того же размера, а размеры таблиц должны изменяться, что и происходит на самом деле, но конечные точки таблицы не меняют свой размер и положение. взгляните на этот jsFiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

Fiddle довольно большой, но нам нужна только первая функция javascript. Перетащите несколько элементов вправо, добавьте новую ссылку и прокрутите. таблицы изменят размер, но конечные точки останутся прежними. Как я могу решить эту проблему с конечными точками?

Конечные точки не являются частью этих таблиц, но они являются частью библиотеки jsPlumb, которая имеет функцию setZoom() для своих объектов. Эта функция не работает, и я хотел бы знать, почему. Соединители также должны поменять свое место.

Кроме того, приложение должно работать и на сенсорных устройствах. Работает ли setZoom с масштабированием для сенсорных устройств и как это реализовать?


javascript html jquery css jsplumb
person Vaxo Basilidze    schedule 29.11.2017    source источник
comment
Если вы посмотрите на визуализированный HTML, масштабирование применяется к таблице содержимого, а конечными точками являются элементы IMG за пределами этой таблицы.   -  person Seano666    schedule 29.11.2017
comment
@ Seano666 Действительно. Конечные точки не являются частью этих таблиц, но они являются частью библиотеки jsPlumb, которая имеет функцию setZoom() для своих объектов. Эта функция не работает, и я хотел бы знать, почему. это мой вопрос   -  person Vaxo Basilidze    schedule 30.11.2017

Ответы (1)


arrow_upward
3
arrow_downward

Обновление:

Итак, исходя из вопроса, мы можем просто использовать приведенный ниже CSS, чтобы начать масштабирование слева или справа в зависимости от положения элементов в родительском контейнере.

Необходимо изменение CSS в родительском контейнере, как показано ниже.

#mainDiv {
  display: inline-block;
  width: 82%;
  min-height: 100%;
  box-sizing: border-box;
  float: left;
  position:relative;
  margin: 0;
  padding: 3px;
}

Пожалуйста, проверьте JSFiddle для решения!

JSFiddle Demo

Старый ответ:

Я предполагаю, что масштабирование, происходящее в центре, является проблемой, поскольку мы масштабируем от середины, таблица всегда превышает границу контейнера. Я бы предложил добавить приведенный ниже класс CSS, чтобы сохранить конечные точки.

.elementTable{
  transform-origin: 0% 0%;
}

Пожалуйста, найдите ниже рабочий JSFiddle с реализацией.

JSFiddle Demo

Мое предположение может быть неверным, пожалуйста, объясните, чего не хватает, и я постараюсь это решить!

person Naren Murali    schedule 02.12.2017
comment
Благодарю за ваш ответ. Я хочу, чтобы конечные точки автоматически масштабировались при изменении масштаба таблицы (я могу реализовать это вручную), но конечные точки должны менять свое местоположение, они всегда должны оставаться на границах таблицы. - person Vaxo Basilidze; 02.12.2017
comment
@VaxoBasilidze Внес изменение, пожалуйста, проверьте его сейчас! - person Naren Murali; 02.12.2017