javascriptreactjsmxgraphjgraph

How to create a line connection mxGraph

I am trying to create a line connection on click an image icon, I have tried the same using the wires.html example. But it is not working. I am using react with mxGraph. How to implement this. Is there any way to achieve this.

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

I have to start the line connection inside the bind event. Is there anyway to fix this. I have tried but none of them is working.

I really need help.

Canvas

In the image Arrow Connection (Multiple points are not supported. Used for directly connecting source to target) is working properly. But need to implement Line Connection (Multiple points are supported. Starting from source we can click any where to create multiple points till the target connection).

Please check the below URL for example

Demo URL: http://jithin.com/javascript/examples/contexticons.html

Source Code URL: https://jsfiddle.net/fs1ox2kt/

In the Demo URL, when click on a cell 4 icons will be displaying (Delete, Resize, Move, Connect). I have replaced Delete with Line Connection and Resize with Arrow Connection. Please have a look.

Solution

  • I am not sure I understand your question correctly, so I am answering to some possible ones:

    1. I found the hello world example very helpful for understanding how to write code which allows to create and modify nodes and connections using mxGraph.
    2. Your tags suggest that you are using React. Interestingly, you are not mentioning Redux-Saga as library. If you are not using it yet, you might want to have a look at the concept of reducers.

    3. Your question might also be about the specific behavior of a mxGraph line connection:

      when I click on the line connection hover icon it does not start from the cell.

      When looking at the workflow example, I do not see any hover icon when I want to draw a line or connection from a task box to another. I remember vividly that it took me a while to figure out that you have to click on the source box, hold, and drag onto the target box.

    4. If your question is more about hover icons, you have already another (unanswered) question on that: adding connection handler on click hover icon not working mxGraph

    EDIT: I finally understood that the icons in your figure are the hover icons, so there is a 5th interpretation of your question:

    Problem description: The user clicks on the orange box with the microchip-icon then some pop-up menu (your hover-icons) appear, and then the user should choose a line type by clicking on on of the items. The endpoint of the respective line should still be the task box the user selected initially.

    Solution sketch: Already in the initial onClick-event, you should populate a variable final_vertex with the coordinates of the box with the micro-chip icon containing the coordinates of the click, or the respective vertex - your box. When drawing the chosen connection, you have to make sure to choose this final_vertex as end-point, and the box with the lambda-icon as initial vertex. In other words, you need at least two events - the initial onClick and an onHoverItemClick. I am not too familiar with mxGraph, but I assume you cannot solve the issue with a single event-handler.