CODEWITHSUNDEEP
javascriptjquerymxgraph
Learner
Learner

Reputation: 81

How change color of dotted line in mxgraph

I want to change the color of dotted line from black to red when we drag a vertex

Question: I want to change dotted line color to red from black while drag

Here is how it appears on drag

enter image description here

I tried to find the dashed color on drag in mxConstants but i did not find it

function main(container)
        {
            // Checks if the browser is supported
            if (!mxClient.isBrowserSupported())
            {
                // Displays an error message if the browser is not supported.
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // Disables the built-in context menu
                mxEvent.disableContextMenu(container);
                
                // Creates the graph inside the given container
                var graph = new mxGraph(container);

                // Enables rubberband selection
                new mxRubberband(graph);
                
                // Gets the default parent for inserting new cells. This
                // is normally the first child of the root (ie. layer 0).
                var parent = graph.getDefaultParent();
                                
                // Adds cells to the model in a single step
                graph.getModel().beginUpdate();
                try
                {
                    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);

                }
                finally
                {
                    // Updates the display
                    graph.getModel().endUpdate();
                }
            }
        };
<html>

<head>
    <title>Toolbar example for mxGraph</title>

    <script type="text/javascript">
        mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    </script>
    <script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
    <script src="./app.js"></script>
</head>

<body onload="main(document.getElementById('graphContainer'))">


    <div id="graphContainer">

    </div>
</body>

</html>

Please help me thanks in advance!!!

Upvotes: 1

Views: 478

Answers (1)

Alireza Ahmadi
Alireza Ahmadi

Reputation: 9903

Based on this you can do that by below code:

mxGraphHandler.prototype.previewColor = 'red';

Working snippet:

function main(container)
        {
      mxGraphHandler.prototype.previewColor = 'red';
    
            // Checks if the browser is supported
            if (!mxClient.isBrowserSupported())
            {
                // Displays an error message if the browser is not supported.
                mxUtils.error('Browser is not supported!', 200, false);
            }
            else
            {
                // Disables the built-in context menu
                mxEvent.disableContextMenu(container);
                
                // Creates the graph inside the given container
                var graph = new mxGraph(container);

                // Enables rubberband selection
                new mxRubberband(graph);
                
                // Gets the default parent for inserting new cells. This
                // is normally the first child of the root (ie. layer 0).
                var parent = graph.getDefaultParent();
                                
                // Adds cells to the model in a single step
                graph.getModel().beginUpdate();
                try
                {
                    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);

                }
                finally
                {
                    // Updates the display
                    graph.getModel().endUpdate();
                }
            }
        };
<html>

<head>
    <title>Toolbar example for mxGraph</title>

    <script type="text/javascript">
        mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
    </script>
    <script src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>
    <script src="./app.js"></script>
</head>

<body onload="main(document.getElementById('graphContainer'))">


    <div id="graphContainer">

    </div>
</body>

</html>

Upvotes: 2

Related Questions