如何在 mxgraph 中验证从目标到源的传入边

Question

您好，我遇到了边缘验证方面的问题

注意：任何方法都是最受欢迎的，但应该能解决问题

以下是我的要求

source 可以像这样有任何以下 Action_*

Source -> Action_1 -> Action_2

我想避免出现任何 Action_* against/towards 来源

Source -> Action_1 <- Action_2

下图是我的要求

在上面的 gif 中出现的文字是 我想避免的这个

这是我试过的方法

graph.multiplicities.push(new mxMultiplicity(
   true, 'Source', null, null, 1, 1, ['Action_1','Action_2'],
   'Source can have 1 Action and from there it can be multiple',
   null));

graph.multiplicities.push(new mxMultiplicity(
    false, 'Source', null, null, 0, 0, null,
   'Source Must Have No Incoming Edge',
   null)); // Type does not matter

这是我提到的演示 https://jgraph.github.io/mxgraph/javascript/examples/validation.html and here is its code https://github.com/jgraph/mxgraph/blob/master/javascript/examples/validation.html

这是 Multiplicity 参数

mxMultiplicity(source,type,attr,value,min,max,validNeighbors,countError,typeError,validNeighborsAllowed)

这是它的文档：https://jgraph.github.io/mxgraph/docs/js-api/files/view/mxMultiplicity-js.html

这是我试过的方法

<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
  Validation example for mxGraph. This example demonstrates using
  multiplicities for automatically validating a graph.
-->
<html>
<head>
    <title>Validation example for mxGraph</title>

    <!-- Sets the basepath for the library if not in same directory -->
   <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>

    <!-- Example code -->
    <script type="text/javascript">
        // Program starts here. Creates a sample graph in the
        // DOM node with the specified ID. This function is invoked
        // from the onLoad event handler of the document (see below).
         graph = {};
        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
            {
                var xmlDocument = mxUtils.createXmlDocument();
                var sourceNode = xmlDocument.createElement('Source');
                var action_1 = xmlDocument.createElement('Action_1');
                var action_2 = xmlDocument.createElement('Action_2');
                
                // Creates the graph inside the given container
                graph = new mxGraph(container);
                graph.setConnectable(true);
                graph.setTooltips(true);
                graph.setAllowDanglingEdges(false);
                graph.setMultigraph(false);


  /** mxMultiplicity accepts the following below params (source,type,attr,value,min,max,validNeighbors,countError,typeError,validNeighborsAllowed)
                
  */

    
                graph.multiplicities.push(new mxMultiplicity(
                   true, 'Source', null, null, 1, 1, ['Action_1','Action_2'],
                   'Source can have 1 Action and from there it can be multiple',
                   null));

                graph.multiplicities.push(new mxMultiplicity(
                   false, 'Source', null, null, 0, 0, null,
                   'Source Must Have No Incoming Edge',
                   null)); // Type does not matter

                
                // Enables rubberband selection
                new mxRubberband(graph);


                // Removes cells when [DELETE] is pressed
                var keyHandler = new mxKeyHandler(graph);
                keyHandler.bindKey(46, function(evt)
                {
                    if (graph.isEnabled())
                    {
                        graph.removeCells();
                    }
                });

                // Installs automatic validation (use editor.validation = true
                // if you are using an mxEditor instance)
                var listener = function(sender, evt)
                {
                    graph.validateGraph();
                };
                
                graph.getModel().addListener(mxEvent.CHANGE,listener);
                
                // 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, sourceNode, 20, 20, 80, 30);
                    var v2 = graph.insertVertex(parent, null, action_1, 200, 20, 80, 30);
                    var v5 = graph.insertVertex(parent, null, action_2, 200, 120, 80, 30);
    
                }
                finally
                {
                    // Updates the display
                    graph.getModel().endUpdate();
                }
            }
        };
    </script>
</head>

<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">

    <!-- Creates a container for the graph with a grid wallpaper -->
    <div id="graphContainer"
        style="position:relative;overflow:hidden;width:321px;height:281px;background:url('editors/images/grid.gif');cursor:default;">
    </div>
</body>
</html>

Answer 1

我了解到您遇到的问题是您想要验证图表：

从源顶点（源节点），你可以制作任何边到任何另一个顶点（节点）
如果任何目标顶点（Action 1）已经连接到源顶点，如果任何其他目标顶点（Action 2 3 4 5）想要连接到源顶点，它必须连接到那些已经连接到源顶点的顶点.
任何连接到源的顶点都不能成为目标

很遗憾，您目前使用 mxMultiplicity 的方法无法解决问题，原因如下：

它只支持 1 级深度邻居（这意味着你可以为它的邻居指定规则，而不是邻居的邻居
只支持内置验证，不支持自定义验证

所以解决方案是：

尝试在更改侦听器中使用图形模型而不是使用 mxMultiplicity 自己验证图形模型，并在每次创建边时更新 mxMultiplicity 的数组
使用另一个库进行图形可视化
不满足任何条件不创建边（我的方式）（实际上，它不会弹出警告消息）

这是我为您准备的模板。您可以在此处查看有关它的文档 (connection handler)

mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source, target, style) {
var check
//    check if you are allow to insert edge

if (check) {
    return mxConnectionHandlerInsertEdge.apply(this, arguments);
}
return null

};

<html>

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

<!-- Sets the basepath for the library if not in same directory -->
<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>

<!-- Example code -->
<script type="text/javascript">
    // Program starts here. Creates a sample graph in the
    // DOM node with the specified ID. This function is invoked
    // from the onLoad event handler of the document (see below).
    graph = {};
    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 {
            var xmlDocument = mxUtils.createXmlDocument();
            var sourceNode = xmlDocument.createElement('Source');
            var action_1 = xmlDocument.createElement('Action_1');
            var action_2 = xmlDocument.createElement('Action_2');
            var action_3 = xmlDocument.createElement('Action_3');
            var action_4 = xmlDocument.createElement('Action_4');

            // Creates the graph inside the given container
            graph = new mxGraph(container);
            graph.setConnectable(true);
            graph.setTooltips(true);
            graph.setAllowDanglingEdges(false);
            graph.setMultigraph(false);


            /** mxMultiplicity accepts the following below params (source,type,attr,value,min,max,validNeighbors,countError,typeError,validNeighborsAllowed)
                          
            */


            graph.multiplicities.push(new mxMultiplicity(
                true, 'Source', null, null, 1, 1, ['Action_1', 'Action_2'],
                'Source can have 1 Action and from there it can be multiple',
                null));

            graph.multiplicities.push(new mxMultiplicity(
                false, 'Source', null, null, 0, 0, null,
                'Source Must Have No Incoming Edge',
                null)); // Type does not matter


            // Enables rubberband selection
            new mxRubberband(graph);


            // Removes cells when [DELETE] is pressed
            var keyHandler = new mxKeyHandler(graph);
            keyHandler.bindKey(46, function (evt) {
                if (graph.isEnabled()) {
                    graph.removeCells();
                }
            });

            // Installs automatic validation (use editor.validation = true
            // if you are using an mxEditor instance)
            var listener = function (sender, evt) {
                graph.validateGraph();
                // sender is the graph model

            };
            // complete the validation function here
            mxConnectionHandlerInsertEdge = mxConnectionHandler.prototype.insertEdge;
            mxConnectionHandler.prototype.insertEdge = function (parent, id, value, source, target, style) {
                var check
                //    check if you are allow to insert edge

                if (check) {
                    return mxConnectionHandlerInsertEdge.apply(this, arguments);
                }
                return null

            };


            graph.getModel().addListener(mxEvent.CHANGE, listener);

            // 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, sourceNode, 20, 20, 80, 30);
                var v2 = graph.insertVertex(parent, null, action_1, 200, 20, 80, 30);
                var v5 = graph.insertVertex(parent, null, action_2, 200, 120, 80, 30);
                var v6 = graph.insertVertex(parent, null, action_3, 400, 120, 80, 30);
                var v7 = graph.insertVertex(parent, null, action_4, 600, 120, 80, 30);
            }
            finally {
                // Updates the display
                graph.getModel().endUpdate();
            }
        }
    };
</script>
</head>

<!-- Page passes the container for the graph to the program -->

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

<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
    style="position:relative;overflow:hidden;width:1000px;height:1000px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>

</html>

如何在 mxgraph 中验证从目标到源的传入边

how to validate incoming edge towards source from target in mxgraph

javascript

mxgraph

jgraph