link breaks in the doNoLink event.
temporaryLink and linkTemplate edited by my previous topic
doNoLink Event:
doNoLink(fromnode?: go.Node, fromport?: go.GraphObject, tonode?: go.Node, toport?: go.GraphObject) {
setTimeout(() => {
this.tempLink = {
from: fromnode.key,
fromPort: fromport.name.replace("_H", ""),
linkConfig: {
color: "#2b5887",
text: "Send"
} as ILinkConfig
};
this.diagram.startTransaction("Add Node Temp");
this.documentPoint = { x: this.diagram.lastInput.documentPoint.x, y: this.diagram.lastInput.documentPoint.y };
// Add Node Temp
let tempData: IFlowItemBase = {
name: "Product"
}
this.setConfigurationDroppedData(tempData);
tempData.key = LinkDrawnHelperNodeKey;
tempData.category = "TemporaryNode";
tempData.nodeConfig.location = {
x: this.documentPoint.x,
y: this.documentPoint.y
}
this.diagram.model.addNodeData(tempData);
// Add Node Temp
// Add Node Link
let fromPortName = fromport.name.replace("_H", "");
let toLinkName: string;
if (fromPortName == 'R') {
toLinkName = 'L';
} else if (fromPortName == 'T') {
toLinkName = 'B';
} else if (fromPortName == 'L') {
toLinkName = 'R';
} else if (fromPortName == 'B') {
toLinkName = 'T';
}
let tempTemporaryLink: any = {
from: fromnode.key,
to: LinkDrawnHelperNodeKey,
fromPort: fromPortName,
toPort: toLinkName,
linkConfig: {
id: 0,
color: "#777"
} as ILinkConfig
};
(this.diagram.model as any).addLinkData(tempTemporaryLink);
// Add Node Link
this.setState({ lastLinkFromTypeName: fromnode.data.typeName })
this.openUnKnownNodeSelector(this.diagram.lastInput.viewPoint.x, this.diagram.lastInput.viewPoint.y);
}, 100);
}
TemporaryNode:
makePort(name: string, align: any, spot: any, output: any, input: any) {
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
return goMake(go.Shape,
{
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
width: horizontal ? NaN : 8, // if not stretching horizontally, just 8 wide
height: !horizontal ? NaN : 8, // if not stretching vertically, just 8 tall
alignment: align, // align the port on the main Shape
stretch: (horizontal ? go.GraphObject.Horizontal : go.GraphObject.Vertical),
portId: name, // declare this object to be a "port"
fromSpot: spot, // declare where links may connect at this port
fromLinkable: false, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
fromLinkableSelfNode: false,
fromLinkableDuplicates: true,
toLinkableSelfNode: false,
toLinkableDuplicates: true
},
new go.Binding("toLinkable", "", this.bindNodeToLinkable.bind(this))
);
}
this.diagram.nodeTemplateMap.add("TemporaryNode", goMake(go.Node, "Spot", {
selectionAdorned: false,
movable: false,
locationObjectName: "Shape",
locationSpot: go.Spot.Center
},
new go.Binding("location", "", this.bindShapeLocation),
goMake(go.Panel, "Spot",
goMake(go.Panel, "Spot", {
name: "Shape"
},
goMake(go.Picture, {
source: unknownSelectorImage
}),
new go.Binding("desiredSize", "", this.bindShapeSize).makeTwoWay(this.converterShapeSize),
),
this.makePort("T", go.Spot.Top, go.Spot.TopSide, false, true),
this.makePort("L", go.Spot.Left, go.Spot.LeftSide, false, true),
this.makePort("R", go.Spot.Right, go.Spot.RightSide, false, true),
this.makePort("B", go.Spot.Bottom, go.Spot.BottomSide, false, true)
)
));
Link Template:
createLinkTemplate() {
this.diagram.linkTemplate =
goMake(go.Link,
{
curve: go.Link.Bezier,
fromEndSegmentLength: 20, toEndSegmentLength: 50
},
{
selectionAdornmentTemplate:
goMake(go.Adornment,
goMake(go.Shape,
{ isPanelMain: true, stroke: "dodgerblue", strokeWidth: 1 }),
goMake(go.Shape,
{ toArrow: "CustomArrowHead", 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
},
this.makeSubLinkBinding("stroke", "color")
),
goMake(go.Shape, // the arrowhead
{
toArrow: "CustomArrowHead",
strokeWidth: 0
},
this.makeSubLinkBinding("fill", "color"),
this.makeSubLinkBinding("stroke", "color")
),
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"
},
this.makeSubLinkBinding("fill", "textBackgroundColor"),
this.makeSubLinkBinding("stroke", "textBackgroundColor"),
this.makeSubLinkBinding("visible", "isShowMouseOver")
),
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
this.makeSubLinkBinding("isUnderline", "textIsUnderline"),
this.makeSubLinkBinding("stroke", "textColor"),
this.makeSubLinkBinding("textAlign", "textAlignment")
)
)
);
this.diagram.toolManager.linkingTool.temporaryLink =
goMake(go.Link,
{
curve: go.Link.Bezier,
fromSpot: go.Spot.Right, toSpot: go.Spot.None,
fromEndSegmentLength: 20, toEndSegmentLength: 50
},
goMake(go.Shape, "RoundedRectangle",
{
isPanelMain: true,
strokeWidth: 1,
stroke: "#777"
}
),
goMake(go.Shape, {
toArrow: "CustomArrowHead",
strokeWidth: 0,
fill: "#777"
})
)
}