Connecting port for Pictures

GoJS
1

I want to connect two nodes having pictures as there icons(like from the picture itself) not from the node panel. right now i am getting as shown in snapshot

port.PNG898×363 13.7 KB

Below is the node defination
myDiagram.nodeTemplateMap.add("Step", $(go.Node, "Vertical", { selectionAdornmentTemplate: UndesiredEventAdornment },{resizable: true,isShadowed:false}, nodeStyle(),new go.Binding("text", "key"), new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify,{routing:go.Link.AvoidsNodes}), $(go.Panel, go.Panel.Auto, $(go.Picture, { desiredSize: new go.Size(60, 60) }, new go.Binding("source", "source")), makePort("T", go.Spot.Top , true, true), makePort("L", go.Spot.Left, true, true), makePort("R", go.Spot.Right, true, true), makePort("B", go.Spot.Bottom, true, true)), $(go.TextBlock, // the text label { font: "10pt Helvetica, Arial, sans-serif", stroke: "black", textAlign: "center", margin: 5, maxSize: new go.Size(100, NaN), wrap: go.TextBlock.WrapFit, editable: false }, new go.Binding("text", "comments").makeTwoWay()) ));function makePort(name, spot, output, input) {
return $(go.Shape,
{
figure: “Circle”,
fill: “transparent”,
stroke: null,
desiredSize: new go.Size(6, 6),
alignment: spot, alignmentFocus: spot,
portId: name,
fromSpot: spot, toSpot: spot,
fromLinkable: output, toLinkable: input,
cursor: “pointer”
});
}``

2

In your screenshot, the links seem to be connecting directly with the Picture. What’s the problem? Can you show what you want instead?

Why is your node template using four separate ports? It seems to me that using separate port elements will make it less likely that links connect to pictures. It is also inefficient unless you need the functionality that ports offer. Why wouldn’t having only a single port being the Picture, by setting its portId: "", be sufficient for your needs? GoJS Link Connection Points on Nodes -- Northwoods Software