如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?相关的知识,希望对你有一定的参考价值。
我需要允许用户重新排列图形,并且在移动顶点时需要重新调整边缘。现在我还不能很好地做到这一点。
到目前为止,我所拥有的是:
具有奇怪调整边缘的图形:
“>
但是我希望他们像这样:
图形的边缘调整良好:
第二张图的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;'
);
结果:尽管它不适用于我的代码,但在此CodePen上却有效:https://codepen.io/palerique/pen/povEEVY编辑2:
所以现在我认为我正在调用的布局类可能会更改样式并导致这种不良行为。
是否存在不更改边线样式的布局类?
我需要允许用户重新排列图形,并且在移动顶点时需要重新调整边缘。现在,我还不能很好地做到这一点。到目前为止,我所拥有的是:奇怪地带有边的图...
为了解决长路径,我建议创建一个函数来计算点与绘图之间的最近路径。
以上是关于如何在移动顶点时看起来不奇怪的同时重新调整mxgraph的边缘?的主要内容,如果未能解决你的问题,请参考以下文章