如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘？

Question

我需要允许用户重新排列图形，并且在移动顶点时需要重新调整边缘。现在我还不能很好地做到这一点。

到目前为止，我所拥有的是：

具有奇怪调整边缘的图形：

“>

但是我希望他们像这样：

图形的边缘调整良好：

第二张图的XML代码是：

    <mxGraphModel dx="774" dy="824" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="2" target="3">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="2" value="Product" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="80" y="33" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="6" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="5">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="10" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="9">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="3" value="Order_line" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="280" y="216" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="12" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="9" target="11">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="9" value="New_1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="460" y="190" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="14" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="11" target="13">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="11" value="New_2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="530" y="20" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="13" value="New_3" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="680" y="126" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="8" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="5" target="7">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="5" value="Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="80" y="100" width="116" height="26" as="geometry"/>
        </mxCell>
        <mxCell id="7" value="Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1">
          <mxGeometry x="10" y="260" width="116" height="26" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>

但是我无法将其翻译成TS代码：-（
由于我在Angular和TS中使用了它，因此在Plunker中创建一些帮助的技巧有些棘手，但是我拥有的是一个像这样初始化图形的组件：

    declare var require: any;

    const mx = require('mxgraph')({
      mxImageBasePath: 'assets/mxgraph/images',
      mxBasePath: 'assets/mxgraph',
    });


    const container = document.getElementById('graphContainer');
    this.graph = new mx.mxGraph(container);

So I start editing it, as you can see here:

    try {
      const parent = this.graph.getDefaultParent();
      this.graph.getModel().beginUpdate();

      const defaultVertexStyle = this.graph.stylesheet.getDefaultVertexStyle();
      defaultVertexStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_LABEL;
      defaultVertexStyle[mx.mxConstants.STYLE_PERIMETER] = mx.mxConstants.PERIMETER_RECTANGLE;
      defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 12;
      defaultVertexStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica';
      defaultVertexStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER;
      defaultVertexStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE;
      defaultVertexStyle[mx.mxConstants.STYLE_FILLCOLOR] = '#f8b241';
      defaultVertexStyle[mx.mxConstants.STYLE_GRADIENTCOLOR] = '#e97704';
      defaultVertexStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#ea7703';
      defaultVertexStyle[mx.mxConstants.STYLE_FONTCOLOR] = '#ffffff';
      defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 14;
      defaultVertexStyle[mx.mxConstants.STYLE_ROUNDED] = true;

      const defaultEdgeStyle = this.graph.stylesheet.getDefaultEdgeStyle();
      defaultEdgeStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_CONNECTOR;
      defaultEdgeStyle[mx.mxConstants.STYLE_FONTSIZE] = 12;
      defaultEdgeStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica';
      defaultEdgeStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER;
      defaultEdgeStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE;
      defaultEdgeStyle[mx.mxConstants.STYLE_ROUNDED] = 1;
      defaultEdgeStyle[mx.mxConstants.STYLE_STARTARROW] = mx.mxConstants.ARROW_CLASSIC;
      defaultEdgeStyle[mx.mxConstants.STYLE_STARTSIZE] = 8;
      defaultEdgeStyle[mx.mxConstants.STYLE_ENDARROW] = mx.mxConstants.ARROW_CLASSIC;
      defaultEdgeStyle[mx.mxConstants.STYLE_ENDSIZE] = 8;
      defaultEdgeStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#aaaaaa';

      let product = graph.insertVertex(parent,'Product','Product',0,0,120,20);
      let orderLine = graph.insertVertex(parent,'Order_Line','Order_Line',0,0,120,20);
      let order = graph.insertVertex(parent,'Order','Order',0,0,120,20);
      let customer = graph.insertVertex(parent,'Customer','Customer',0,0,120,20);
      let new1 = graph.insertVertex(parent,'new1','new1',0,0,120,20);

      graph.insertEdge(parent, '1', '', product, orderLine);
      graph.insertEdge(parent, '2', '', orderLine, order);
      graph.insertEdge(parent, '3', '', order, customer);
      graph.insertEdge(parent, '4', '', orderLine, new1);

      const layout = new mx.mxHierarchicalLayout(this.graph, mx.mxConstants.DIRECTION_NORTH);
      layout.execute(graph.getDefaultParent());
    } finally {
      this.graph.getModel().endUpdate();
    }

结果就是您在上面第一张图片中看到的。 （Graph with edges weirdly adjusted）
请您帮我实现第二张图片（Graph with edges nicely adjusted）中可以看到的内容吗？

编辑1：

不幸的是，即使我使用与XML文件相同的样式，也没有像演示/展示中那样重新排列边缘，但我已经尝试过了：

graph.insertEdge(
                parent,
                `${getId()}`,
                '',
                source,
                target, 
 'edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;'
              );

结果：
编辑2：

尽管它不适用于我的代码，但在此CodePen上却有效：https://codepen.io/palerique/pen/povEEVY

所以现在我认为我正在调用的布局类可能会更改样式并导致这种不良行为。

是否存在不更改边线样式的布局类？

我需要允许用户重新排列图形，并且在移动顶点时需要重新调整边缘。现在，我还不能很好地做到这一点。到目前为止，我所拥有的是：奇怪地带有边的图...

Answer 1

您应该实现自定义边缘，paintEdgeShape定义了边缘的渲染，您可以使用canvas API来定义该图形。看example。

为了解决长路径，我建议创建一个函数来计算点与绘图之间的最近路径。

Answer 2

@ PauloRodrigues好笑，但您的决定已经成问题了！