Hi,
I am getting an error when I try to create an unconnected link
The diagram configuration is
private createDiagram(): go.Diagram {
return $(go.Diagram, 'diagram-div', {
allowDrop: true,
allowLink: true,
initialContentAlignment: go.Spot.Center,
'animationManager.isEnabled': false, // turn off automatic animations
'draggingTool.isGridSnapEnabled': false,
'undoManager.isEnabled': true,
'grid.visible': false,
'grid.gridCellSize': new go.Size(20, 20),
'linkingTool.isUnconnectedLinkValid': true,
'linkingTool.portGravity': 20,
'relinkingTool.isUnconnectedLinkValid': true,
'relinkingTool.portGravity': 20,
'draggingTool.dragsLink': true
});
}
The model configuration is
private configureModel(): void {
this.diagram.model = $(go.GraphLinksModel,
{
linkFromPortIdProperty: 'fromPortName',
linkToPortIdProperty: 'toPortName',
nodeKeyProperty: 'uuid',
linkKeyProperty: 'uuid'
}
);
}
The node template is
templateMap.add('geometryWithLabel',
$(go.Node, this.nodeStyle(),
$(go.Panel, this.panelShapePortStyle(),
$(go.Shape, this.shapeGeometryStyle()),
new go.Binding('itemArray', 'ports'),
{
itemTemplate: $(go.Panel, this.portPanelStyle(),
$(go.Shape, this.portStyle())
)
},
),
$(go.TextBlock, this.textBlockStyle()),
),
);
private nodeStyle() {
return [
{
type: go.Panel.Spot,
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: 'blue',
resizable: true,
resizeObjectName: 'NODESHAPE',
locationObjectName: 'NODESHAPE',
selectionObjectName: 'NODESHAPE',
locationSpot: go.Spot.Center,
cursor: 'move',
},
new go.Binding('location', 'location', go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding('isShadowed', 'isSelected').ofObject()
];
}
private panelShapePortStyle() {
return [
{
type: go.Panel.Spot,
name: 'NODEPANEL'
},
];
}
private shapeGeometryStyle() {
return [
{
name: 'NODESHAPE',
fill: 'white',
stroke: 'black',
strokeWidth: 0.80,
strokeCap: 'round',
strokeJoin: 'round',
strokeDashArray: null,
geometryStretch: go.GraphObject.Uniform
},
new go.Binding('geometryString', 'figure'),
new go.Binding('width', 'width').makeTwoWay(),
new go.Binding('height', 'height').makeTwoWay(),
new go.Binding('stroke', 'lineColor'),
new go.Binding('strokeWidth', 'lineWidth')
];
}
private portPanelStyle() {
return [
{
type: go.Panel.Spot
},
new go.Binding('portId', 'name'),
new go.Binding('fromSpot', 'fromSpot', go.Spot.parse),
new go.Binding('toSpot', 'toSpot', go.Spot.parse),
new go.Binding('alignment', 'alignment', go.Spot.parse),
new go.Binding('fromLinkable', '', ((port: Port) => {
switch (port.type) {
case PortType.Input:
return false;
case PortType.Output:
case PortType.InputOutput:
return true;
}
})),
new go.Binding('fromMaxLinks', '', ((port: Port) => {
switch (port.type) {
case PortType.Input:
return 0;
case PortType.Output:
case PortType.InputOutput:
return 1;
}
})),
new go.Binding('toLinkable', '', ((port: Port) => {
switch (port.type) {
case PortType.Output:
return false;
case PortType.Input:
case PortType.InputOutput:
return true;
}
})),
new go.Binding('toMaxLinks', '', ((port: Port) => {
switch (port.type) {
case PortType.Output:
return 0;
case PortType.Input:
case PortType.InputOutput:
return 1;
}
}))
];
}
private portStyle() {
return [
{
name: 'PORT',
figure: 'XLine',
width: 10,
height: 10,
background: 'transparent',
fill: null,
stroke: null,
angle: 90,
cursor: 'pointer'
}
];
}
The link template is
private createLinkTemplate(): go.Link {
return $(go.Link,
{
routing: go.Link.AvoidsNodes,
curve: go.Link.JumpOver,
corner: 3,
reshapable: true,
resegmentable: true,
relinkableFrom: true,
relinkableTo: true,
selectionAdorned: false,
shadowOffset: new go.Point(0, 0),
shadowBlur: 15,
shadowColor: 'blue',
toShortLength: -5,
fromShortLength: -5,
},
new go.Binding('points').makeTwoWay(),
new go.Binding('isShadowed', 'isSelected').ofObject(),
$(go.Shape,
{
strokeWidth: 1,
stroke: 'black',
strokeDashArray: null,
},
new go.Binding('stroke', 'lineColor'),
new go.Binding('strokeWidth', 'lineWidth') ),
$(go.Shape,
{
toArrow: 'Triangle',
segmentOffset: new go.Point(5, 0),
stroke: 'black',
fill: 'black'
},
new go.Binding('fill', 'lineColor'),
new go.Binding('stroke', 'lineColor')
)
);
}
I am initializing the model with a node.
{
name: "DP",
shapeName: "DP",
location: "-413.788837962963 -80.1428714739526",
height: 57.714255904705304,
width: 56,
labelOffset: "0.5 0.5 0 0",
category: "geometryWithoutLabel",
figure: "F M15.72 587.18 A7.85941 8.1 -180 1 0 0 587.18 A7.85941 8.1 -180 1 0 15.72 587.18 Z M8.02 586.85 L10.67 582.93 L8.66 587.18 L8.02 586.85 ZM8.82 587.98 a0.962376 0.962376 -180 1 0 -1.92475 0 a0.962376 0.962376 -180 1 0 1.92475 0 ZM2.49 590.54 C1.92 589.58 1.52 588.38 1.52 587.18 C1.52 583.57 4.33 580.68 7.86 580.68 C11.31 580.68 14.2 583.57 14.2 587.18 C14.2 588.46 13.87 589.58 13.23 590.54M15.72 587.18 A7.85941 8.1 -180 1 0 0 587.18 A7.85941 8.1 -180 1 0 15.72 587.18M8.02 586.85 L10.67 582.93 L8.66 587.18M8.82 587.98 a0.962376 0.962376 -180 1 0 -1.92475 0 a0.962376 0.962376 -180 1 0 1.92475 0",
lineWidth: 1,
lineColor: "#000000",
fillColor: "#ffffff",
linePattern: 0,
brushType: 0,
gradientColor: "#000000",
ports: [{
name: "port1",
type: 0,
fromSpot: "",
toSpot: "LeftSide",
alignment: "0 0.5 0 0"
}, {name: "port2", type: 1, fromSpot: "RightSide", toSpot: "", alignment: "1 0.5 0 0"}],
uuid: "{7459b734-9dc9-487d-897e-92918b013bc7}",
blockType: 34,
text: "",
fontStyle: 0,
fontWeight: 1,
fontSize: 12,
fontFamily: 'helvetica, sans-serif',
fontUnderline: false,
textColor: '#000000',
textBackgroundColor: null,
textAlign: TextAlign.Center,
textEditable: true,
getPort: VMNode.prototype.getPort
}
When i try to create a disconnected link from the left port of the shape (input port), i am getting the error
But when i create a link from the right port of the shape (output port), no error is reported.
I created an extension of go.Link to report the value of the getLinkPoint parameters. I did the same extension in the example “Draggable Link” to compare and the parameters seem be equivalent.
Thanks,
Dario