javascriptmxgraph

How can the cell listen to the moving or resizing event in mxGraph?

I'm working on moving/resizing cell in mxGraph. I guess I should use some mxEvent such as MOVE_CELLS, CELLS_MOVED, RESIZE_CELLS, CELLS_RESIZED, CHANGE, RESIZE,... But it doesn't work with my code. The cell doesn't listen to those events.

I'm using this code and it works well with LABEL_CHANGED mxEvent (this event triggers when there's any change of cell value). The cell listens to the LABEL_CHANGED event, and its value will be shown to the console.

graph.addListener(mxEvent.LABEL_CHANGED, function (sender, evt) {
    var cell = evt.getProperty("cell");
    console.log(cell.value);
});

enter image description here This is helloworld.html code

<html>
<head>
    <title>Hello, World! example for mxGraph</title>

    <!-- Sets the basepath for the library if not in same directory -->
    <script type="text/javascript">
        mxBasePath = '../src';
    </script>

    <!-- Loads and initializes the library -->
    <script type="text/javascript" src="../src/js/mxClient.js"></script>

    <!-- Example code -->
    <script type="text/javascript">
        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);

                var parent = graph.getDefaultParent();

                //My codes go here
                graph.addListener(mxEvent.LABEL_CHANGED, function (sender, evt) {
                    var cell = evt.getProperty("cell");
                    console.log(cell.value);
                });

                graph.getModel().beginUpdate();
                try
                {
                    var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
                    var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                    var e1 = graph.insertEdge(parent, null, '', v1, v2);
                }
                finally
                {
                    graph.getModel().endUpdate();
                }
            }
        };
    </script>
</head>
<body onload="main(document.getElementById('graphContainer'))">
    <div id="graphContainer"
        style="position:relative;overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif');cursor:default;">
    </div>
</body>
</html>

My question is How can I show the cell value to the console when I move or resize the cell? (Mind checking the mxEvent API here: https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent)

Solution

  • I solved my problem. CELLS_MOVED, CELLS RESIZED work with getProperties function, not getProperty one.

    graph.addListener(mxEvent.CELLS_MOVED, function (sender, evt) {
      var cell = evt.getProperties("cell");
      console.log(cell.cells[0].geometry.x);//Show the new x_geometry
});