时间戳

首页 > 解决方案 > 单元格如何监听 mxGraph 中的移动或调整大小事件？

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

问题描述

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

我正在使用这段代码，它与LABEL_CHANGEDmxEvent 配合得很好（当单元格值发生任何变化时会触发此事件）。单元格侦听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 ）

标签： javascriptmxgraph

解决方案

我解决了我的问题。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
});

推荐阅读