约束mxGraph

Question

我正在用mxGraph在网上创建我自己的抽屉。我想让我的ConnectionConstraints在创建单元格后始终在工作表上可见。我试着编辑mxConstraintHandler，但它不起作用。这就是我想要的，即使鼠标离开了形状--> enter image description here。形状上的“x”必须始终保持不变。

Answer 1

相反，您可以尝试使用端口。这就是使用isPort钩子可视化地连接到另一个单元。对于'x‘形状，使用几何的偏移量。

请查看Hello Port示例

// 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).
    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
        {
            // Creates the graph inside the given container
            var graph = new mxGraph(container);
            graph.setConnectable(true);
            graph.setTooltips(true);

            // Sets the default edge style
            var style = graph.getStylesheet().getDefaultEdgeStyle();
            style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

            // Ports are not used as terminals for edges, they are
            // only used to compute the graphical connection point
            graph.isPort = function(cell)
            {
                var geo = this.getCellGeometry(cell);

                return (geo != null) ? geo.relative : false;
            };

            // Implements a tooltip that shows the actual
            // source and target of an edge
            graph.getTooltipForCell = function(cell)
            {
                if (this.model.isEdge(cell))
                {
                    return this.convertValueToString(this.model.getTerminal(cell, true)) + ' => ' +
                        this.convertValueToString(this.model.getTerminal(cell, false))
                }

                return mxGraph.prototype.getTooltipForCell.apply(this, arguments);
            };

            // Removes the folding icon and disables any folding
            graph.isCellFoldable = function(cell)
            {
                return false;
            };

            // 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, 80, 80, 30);
                v1.setConnectable(false);
                var v11 = graph.insertVertex(v1, null, '', 1, 1, 10, 10);
                v11.geometry.offset = new mxPoint(-5, -5);
                v11.geometry.relative = true;
                var v12 = graph.insertVertex(v1, null, '', 1, 0, 10, 10);
                v12.geometry.offset = new mxPoint(-5, -5);
                v12.geometry.relative = true;
                var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
                var v3 = graph.insertVertex(parent, null, 'World2', 200, 20, 80, 30);
                var e1 = graph.insertEdge(parent, null, '', v11, v2);
                var e1 = graph.insertEdge(parent, null, '', v12, v3);
            }
            finally
            {
                // Updates the display
                graph.getModel().endUpdate();
            }

            var button = mxUtils.button('View XML', function()
            {
                var encoder = new mxCodec();
                var node = encoder.encode(graph.getModel());
                mxUtils.popup(mxUtils.getPrettyXml(node), true);
            });

            document.body.insertBefore(button, container.nextSibling);
        }
    };