单元格如何监听 mxGraph 中的移动或调整大小事件？

Question

我正在研究 mxGraph 中的 moving/resizing 单元格。我想我应该使用一些 mxEvent，例如 MOVE_CELLS, CELLS_MOVED, RESIZE_CELLS, CELLS_RESIZED, CHANGE, RESIZE,... 但它不适用于我的代码。细胞不听那些事件。

我正在使用此代码，它与 LABEL_CHANGED mxEvent 配合使用效果很好（此事件在单元格值发生任何变化时触发）。该单元格监听 LABEL_CHANGED 事件，其值将显示到控制台。

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

这是helloworld.html代码

<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>

我的问题是，当我移动单元格或调整单元格大小时如何将单元格值显示到控制台？（注意检查 mxEvent API 此处：https://jgraph.github.io/mxgraph/docs/js-api/files/util/mxEvent-js.html#mxEvent)

Answer 1

我解决了我的问题。 CELLS_MOVED, CELLS RESIZED 使用 getProperties 函数，而不是 getProperty 函数。

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
});

单元格如何监听 mxGraph 中的移动或调整大小事件？

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

javascript

mxgraph