0

I'm currently working on a Flowchart builder that uses the MXGraph library. It would be nice to have the abilitie to draw a line when hovering over the edge of a vertex. Just like Lucidchart has: https://www.lucidchart.com but I have no clue in how to build this.

I've fiddled with the mxConnectionHandler but this will draw the line when hovering the center of the vertex. This is not really what I want. Here is the code for my MXGraph setup:

function main(graphContainer, toolbarContainer, formatbarContainer) {
    if (!mxClient.isBrowserSupported()) {
        mxUtils.error('Browser is not supported!', 200, false);
    }
    else {
        mxEvent.disableContextMenu(graphContainer);

        let doc = mxUtils.createXmlDocument();

        let editor = new mxEditor();
        let model = new mxGraphModel();
        let graph = new mxGraph(graphContainer, model);
        let keyHandler = new mxKeyHandler(graph);
        editor.graph = graph;

        graph.setCellsEditable(false);
        graph.setCellsDisconnectable(false);
        graph.setHtmlLabels(true);
        graph.setConnectable(true);
        graph.edgeLabelsMovable = false;

        mxConstants.WORD_WRAP = 'break-word';

        graphFunctions.addCustomShapes(graph);
        createToolbar(toolbarContainer, editor, model, keyHandler);
        createFormatbar(formatbarContainer, editor, model);

        createRubberband(graph);
    }
};

It would be nice if someone can help me on the way in order to achieve this.

spoilerd do
  • 377
  • 6
  • 20
  • 1
    Look at the examples, https://jgraph.github.io/mxgraph/javascript/index.html, particularly https://jgraph.github.io/mxgraph/javascript/examples/fixedpoints.html – Frodo Baggins Mar 11 '19 at 14:36
  • Thanks for your help. I got it working but for some weird reason I cant seem to get the hover effect whenever you hover over a cell. Do i need to import something? – spoilerd do Mar 11 '19 at 17:19
  • I think that my MxPoint isn't showing the cross that you want to see whenever you hover over a vertex. – spoilerd do Mar 11 '19 at 17:47
  • Found it, you need to add a pointer.gif image into a images folder in order to get the wanted result. – spoilerd do Mar 12 '19 at 08:56

0 Answers0