Create a straight line in mxGraph with touch events

MXGraph is a JavaScript library for creating diagramming applications, and it provides a lot of functionality for creating and manipulating graphical objects, including straight lines. Here is an example of how you can use MXGraph to create a straight line on finger touch as start and release as end:

Setting up a MXGraph container

Create a container element in your HTML code and initializing an instance of the mxGraph class in your JavaScript code.

<div id="graphContainer"></div>
var container = document.getElementById(“graphContainer”); var graph = new mxGraph(container);

Now you can set up an event listener for the touchstart and touchend events on the container.

When a touchstart event is triggered, you can create a new mxCell object to represent the start of the line, and when a touchend event is triggered, you can create a new mxCell object to represent the end of the line and connect it to the start cell

var graph = new mxGraph(container);

graph.setPanning(true);
graph.setTooltips(false);

Implement the mouseup and mousedown event handlers to update the line geometry based on the finger touch and release events.

var edge = null;
var mouseListener =
{
    mouseDown: function(sender, evt)
    {
        // Check if the event is on a cell or not
        var cell = evt.getProperty('cell');
        if (!cell)
        {
            // Create a new edge starting at the mouse's current location
            edge = graph.insertEdge(parent, null, '', evt.getGraphX(), evt.getGraphY(), 0, 0);
        }
    },

    mouseMove: function(sender, evt)
    {
        if (edge != null)
        {
            // Update the end point of the edge as the mouse moves
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), false);
            graph.getModel().endUpdate();
        }
    },

    mouseUp: function(sender, evt)
    {
        if (edge != null)
        {
            // Finalize the edge by setting its end point and removing the mouse listener
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), true);
            edge = null;
            mxEvent.removeMouseListener(mouseListener);
        }
    }
};

mxEvent.addListener(container, 'mousedown', mouseListener.mouseDown);
mxEvent.addListener(container, 'mousemove', mouseListener.mouseMove);
mxEvent.addListener(container, 'mouseup', mouseListener.mouseUp);

Here is the final code

You will have to add the necessary libraries for mxGraph to work , such as the mxGraph JavaScript files and the jQuery library. Also, please replace the ID of the HTML container element in the code above with the actual ID of your container element.

// Initialize mxGraph instance
var container = document.getElementById('graphContainer');
var graph = new mxGraph(container);

graph.setPanning(true);
graph.setTooltips(false);

var model = graph.getModel();
var parent = graph.getDefaultParent();

// Create mouse listener
var edge = null;
var mouseListener =
{
    mouseDown: function(sender, evt)
    {
        // Check if the event is on a cell or not
        var cell = evt.getProperty('cell');
        if (!cell)
        {
            // Create a new edge starting at the mouse's current location
            edge = graph.insertEdge(parent, null, '', evt.getGraphX(), evt.getGraphY(), 0, 0);
        }
    },

    mouseMove: function(sender, evt)
    {
        if (edge != null)
        {
            // Update the end point of the edge as the mouse moves
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), false);
            graph.getModel().endUpdate();
        }
    },

    mouseUp: function(sender, evt)
    {
        if (edge != null)
        {
            // Finalize the edge by setting its end point and removing the mouse listener
            edge.geometry.setTerminalPoint(new mxPoint(evt.getGraphX(), evt.getGraphY()), true);
            edge = null;
            mxEvent.removeMouseListener(mouseListener);
        }
    }
};

// Add mouse listener to container
mxEvent.addListener(container, 'mousedown', mouseListener.mouseDown);
mxEvent.addListener(container, 'mousemove', mouseListener.mouseMove);
mxEvent.addListener(container, 'mouseup', mouseListener.mouseUp);

mxEvent.addGestureListeners(container, function(evt)
{
    // Prevent default gesture behavior (e.g. scrolling)
    evt.preventDefault();
});