How do I fix it normally needs to be like this
This problem occurs in the link code link arrow. How do I solve this problem?
All code is below:
<script id="code">
var shapes = {
flowStateMain: "M35,13A12,12,0,0,1,35,37A12,12,0,0,1,35,13Z",
flowStateStaticColor: "M34.809,17.932c2.616,0,5.191,1.206,5.191,4.087c0,2.656-3.045,3.678-3.699,4.639c-0.49,0.715-0.327,1.717-1.676,1.717c-0.879,0-1.308-0.715-1.308-1.369c0-2.432,3.576-2.984,3.576-4.986c0-1.104-0.736-1.758-1.962-1.758c-2.616,0-1.594,2.698-3.576,2.698c-0.715,0-1.328-0.429-1.328-1.247C30.028,19.709,32.316,17.932,34.809,17.932z M34.707,29.702c0.919,0,1.676,0.756,1.676,1.676c0,0.92-0.756,1.676-1.676,1.676c-0.92,0-1.676-0.756-1.676-1.676C33.031,30.458,33.788,29.702,34.707,29.702z",
flowStateBorder1: "M35,41v5c0,1.105-0.895,2-2,2H3c-1.105,0-2-0.895-2-2V3c0-1.105,0.895-2,2-2h30c1.105,0,2,0.895,2,2v6",
flowStateBorder2: "M8,13H23",
flowStateBorder3: "M8,19H19",
flowStateBorder4: "M8,25H18",
flowStateBorder5: "M8,31H19",
flowStateBorder6: "M8,37H23"
};
function bindGeometryString(data){
return go.Geometry.parse(shapes[data.shapeKey]);
}
function linkDrawnEvent(e) {
let link = e.subject;
e.diagram.model.setDataProperty(link.data, "curviness", 80);
e.diagram.updateAllTargetBindings();
}
function bindPanelItemArray(){
return [
{
shapeKey: "flowStateMain",
fill: "fill",
stroke: null,
},
{
shapeKey: "flowStateStaticColor",
fill: "white",
stroke: null,
},
{
shapeKey: "flowStateBorder1",
fill: "transparent",
stroke: "stroke",
},
{
shapeKey: "flowStateBorder2",
fill: "transparent",
stroke: "stroke",
},
{
shapeKey: "flowStateBorder3",
fill: "transparent",
stroke: "stroke",
},
{
shapeKey: "flowStateBorder4",
fill: "transparent",
stroke: "stroke",
},
{
shapeKey: "flowStateBorder5",
fill: "transparent",
stroke: "stroke",
},
{
shapeKey: "flowStateBorder6",
fill: "transparent",
stroke: "stroke",
},
];
}
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
draggingTool: new NonRealtimeDraggingTool(),
initialContentAlignment: go.Spot.Left,
"undoManager.isEnabled": true,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
"LinkDrawn": linkDrawnEvent
}
);
function makePort(name, align, spot, output, input) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
var port = $(go.Shape,
{
cursor: "pointer",
fill: "transparent",
strokeWidth: 0,
width: horizontal ? NaN : 8,
height: !horizontal ? NaN : 8,
alignment: align,
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name,
fromSpot: spot,
fromLinkable: output,
toSpot: spot,
toLinkable: input,
mouseEnter: function(e, port) {
port.fill = "transparent";
},
mouseLeave: function(e, port) {
port.fill = "transparent";
}
});
return port;
}
function makeTemplate(typename) {
var node = $(go.Node, "Spot",
{
selectionAdorned: false
},
$(go.Panel, "Vertical",
$(go.Panel, "Spot",
$(go.Panel, "Viewbox",
{
cursor: "move"
},
$(go.Panel, "Position",
{
itemTemplate:
$(go.Panel,
$(go.Shape, "RoundedRectangle",
{
fill: "transparent",
isGeometryPositioned: true,
shadowVisible: false,
},
new go.Binding("geometry", "", bindGeometryString),
)
)
},
new go.Binding("itemArray", "", bindPanelItemArray)
)
),
makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
makePort("L", go.Spot.Left, go.Spot.LeftSide, true, true),
makePort("R", go.Spot.Right, go.Spot.RightSide, true, true)
),
$(go.TextBlock,
{
editable: true,
stroke: "black",
margin: new go.Margin(2, 0),
font: "bold 9pt sans-serif"
},
new go.Binding("text", "name").makeTwoWay()),
),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide, true, false)
);
myDiagram.nodeTemplateMap.set(typename, node);
}
makeTemplate("Table");
myDiagram.linkTemplate =
$(go.Link, go.Link.Bezier,
{
fromEndSegmentLength: 25, toEndSegmentLength: 25,
adjusting: go.Link.End
},
$(go.Shape,
{ stroke: "gray", strokeWidth: 1 }),
$(go.Shape, // the "to" arrowhead
{ toArrow: "Standard", scale: 1 }),
);
load();
}
function save() {
document.getElementById("mySavedModel").value = myDiagram.model.toJson();
myDiagram.isModified = false;
}
function load() {
myDiagram.model = go.Model.fromJson(document.getElementById("mySavedModel").value);
}
</script>