Как создать линейное соединение mxGraph

Я пытаюсь создать линейное соединение, щелкнув значок изображения, я пробовал то же самое, используя wires.html. Но это не работает. Я использую реакцию с mxGraph. Как это реализовать. Есть ли способ добиться этого.

mxEvent.addGestureListeners(
    img,
    mxUtils.bind(this, function(evt) {
      mxConnectionHandler.prototype.isStartEvent = function(me) {
        console.log("Here we have to start the line connection");
      };
    })
  );

Я должен запустить подключение к линии внутри события привязки. Есть ли способ исправить это. Я пробовал, но ни один из них не работает.

Мне действительно нужна помощь.

Холст

На изображении Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) работает нормально. Но необходимо реализовать Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).

Пожалуйста, проверьте приведенный ниже URL, например

URL-адрес демонстрации: http://jithinvarghese.com/javascript/examples/contexticons.html

URL исходного кода: https://jsfiddle.net/fs1ox2kt/

В Demo URL при нажатии на ячейку будут отображаться 4 значка (Удалить, Изменить размер, Переместить, Подключить). Я заменил Удалить на Соединение линии и Изменить размер на Соединение со стрелкой. Пожалуйста, посмотрите.


reactjs javascript mxgraph jgraph
person Jithin Varghese    schedule 23.09.2019    source источник
comment
Я не очень четко понял, чего вы хотите добиться? Вы нашли решение? Если нет, не могли бы вы показать пример?   -  person NickAth    schedule 05.10.2019
comment
Может быть, вы могли бы отредактировать точные сообщения об ошибках, пожалуйста?   -  person B--rian    schedule 09.10.2019

Ответы (1)


arrow_upward
1
arrow_downward

Я не уверен, что правильно понял ваш вопрос, поэтому я отвечаю на некоторые возможные:

  1. Я нашел пример hello world очень полезным для понимания того, как писать код который позволяет создавать и изменять узлы и соединения с помощью mxGraph.
  2. Ваши теги предполагают, что вы используете React. Интересно, что вы не упоминаете Redux-Saga как библиотеку. Если вы еще не используете его, вы можете ознакомиться с концепцией редукторов. .
  3. #P2# <блочная цитата> #P3# #P4#

  4. Если ваш вопрос больше касается значков наведения, у вас уже есть другой (без ответа) вопрос по этому поводу: добавление обработчика соединения при нажатии значка наведения не работает mxGraph

РЕДАКТИРОВАТЬ: я наконец понял, что значки на вашем рисунке - это значки при наведении курсора, поэтому есть 5-я интерпретация вашего вопроса:

Описание проблемы: пользователь нажимает на оранжевое поле со значком микрочипа, после чего появляется всплывающее меню (ваши значки при наведении курсора), а затем пользователь должен выбрать тип линии, щелкнув один из предметы. Конечной точкой соответствующей строки по-прежнему должно быть поле задачи, выбранное пользователем изначально.

Набросок решения: уже в начальном onClick-событии вы должны заполнить переменную final_vertex координатами ящика со значком микрочипа, содержащим координаты клика, или соответствующей вершины - вашего ящика . При рисовании выбранного соединения вы должны обязательно выбрать этот final_vertex в качестве конечной точки, а поле со значком лямбда - в качестве начальной вершины. Другими словами, вам нужно как минимум два события — начальное onClick и onHoverItemClick. Я не слишком знаком с mxGraph, но полагаю, что вы не сможете решить проблему с помощью одного обработчика событий.

person B--rian    schedule 09.10.2019
comment
При щелчке по значку ячейки отображаются 3 параметра (соединение со стрелкой, соединение с линией, текст метки). Значок синего фона рядом с одной из ячеек на изображении. При щелчке по второму синему значку соединение линии должно начинаться с выбранной ячейки. Пожалуйста, обратитесь к прикрепленному изображению. - person Jithin Varghese; 09.10.2019