I’m using a Bezier connection type, so can I preview it as it was drawn?
Preview Link:
Drawed Link:
My Link Template
this.diagram.linkTemplate =
goMake(go.Link, go.Link.Bezier,
{
fromEndSegmentLength: 50,
toEndSegmentLength: 125,
toShortLength: 0.5,
//relinkableFrom: false,//this.findConfigDiagram("linkConfig", "relinkableFrom"),
//relinkableTo: false,// this.findConfigDiagram("linkConfig", "relinkableTo"),
//reshapable: this.findConfigDiagram("linkConfig", "reshapable"),
//resegmentable: this.findConfigDiagram("linkConfig", "resegmentable"),
//routing: this.getGoEnumValue(this.findConfigDiagram("linkConfig", "routing")),
adjusting: go.Link.End, //this.getGoEnumValue(this.findConfigDiagram("linkConfig", "adjusting")),
//curve: this.getGoEnumValue(this.findConfigDiagram("linkConfig", "curve")),
//corner: this.findConfigDiagram("linkConfig", "corner"),
zOrder: -1,
//mouse-overs subtly highlight links:
mouseEnter: (e: any, link: go.Link) => {
(link.findObject("HIGHLIGHT") as any).stroke = "rgba(30,144,255,0.2)";
let setVisible = this.findConfigDiagram("linkConfig", "isShowMouseOver");
if (setVisible) {
//if (link.data && link.data.linkConfig) {
// setVisible = link.data.linkConfig.id == 0 ? false : setVisible;
//}
link.findObject("linkTextBlockBackground").visible = setVisible;
link.findObject("linkTextBlock").visible = setVisible;
}
},
mouseLeave: (e: any, link: any) => {
link.findObject("HIGHLIGHT").stroke = "transparent";
let setVisible = !this.findConfigDiagram("linkConfig", "isShowMouseOver");
if (!setVisible) {
link.findObject("linkTextBlockBackground").visible = setVisible;
link.findObject("linkTextBlock").visible = setVisible;
}
},
},
{
selectionAdornmentTemplate:
goMake(go.Adornment,
goMake(go.Shape,
{ isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }),
goMake(go.Shape,
{ toArrow: "SamiAltuncu", fill: "dodgerblue", stroke: null })
)
},
new go.Binding("points").makeTwoWay(),
goMake(go.Shape, // the highlight shape, normally transparent
{
isPanelMain: true,
strokeWidth: 2,
stroke: "transparent",
name: "HIGHLIGHT",
}),
goMake(go.Shape, "RoundedRectangle", // the link path shape
{
isPanelMain: true,
strokeWidth: 1
},
new go.Binding("stroke", "", this.bindLinkBorderColor)
),
goMake(go.Shape, // the arrowhead
{
toArrow: "SamiAltuncu",
strokeWidth: 0
},
new go.Binding("fill", "", this.bindLinkBorderColor),
new go.Binding("stroke", "", this.bindLinkBorderColor)
),
goMake(go.Panel, "Auto",
{
_isLinkLabel: this.findConfigDiagram("linkConfig", "isDraggableLinkLabel"), visible: false
},
goMake(go.Shape, "RoundedRectangle", // the label background, which becomes transparent around the edges
{
name: "linkTextBlockBackground"
},
new go.Binding("fill", "", this.bindLinkTextBackgroundColor).makeTwoWay(),
new go.Binding("stroke", "", this.bindLinkTextBackgroundColor).makeTwoWay(),
new go.Binding("visible", "", this.bindLinkTextShow).makeTwoWay(),
),
goMake(go.TextBlock, "transition", // the label text
{
name: "linkTextBlock",
textAlign: "center",
isMultiline: false,
font: "6pt sans-serif",
margin: new go.Margin(2, 2, 1.41, 2),
editable: true, // enable in-place editing
},
// editing the text automatically updates the model data
new go.Binding("text", "", this.bindLinkText).makeTwoWay(this.converterLinkText),
//new go.Binding("font", "", this.bindLinkTextFont).makeTwoWay(),
new go.Binding("isUnderline", "", this.bindLinkTextUnderline).makeTwoWay(),
new go.Binding("stroke", "", this.bindLinkTextColor).makeTwoWay(),
new go.Binding("textAlign", "", this.bindLinkTextAlignment).makeTwoWay()
new go.Binding("visible", "", this.bindLinkTextShow).makeTwoWay(),
//new go.Binding("font", "", this.bindShapeTextFont)
)
)
);