Hi, I’ve problem with this piece of code (started from the example htmlinteraction):
myDiagram.nodeTemplateMap.add("", // default category
GO(go.Node, "Table", nodeStyle(), {
locationSpot: go.Spot.Center,
},
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
GO(go.Panel, "Auto",
GO(go.Shape, "Ellipse", {
strokeWidth: 2,
fill: fill1,
name: "SHAPE"
},
new go.Binding("figure", "figure"),
new go.Binding("fill", "fill"),
new go.Binding("stroke", "stroke")
),
GO(go.TextBlock, {
margin: 5,
maxSize: new go.Size(200, NaN),
wrap: go.TextBlock.WrapFit,
textAlign: "center",
editable: true,
font: "bold 9pt Helvetica, Arial, sans-serif",
name: "TEXT"
},
new go.Binding("text", "text").makeTwoWay())),
self.makePort("T", go.Spot.Top, go.Spot.Top, "toLinkableTop", "fromLinkableTop"),
self.makePort("L", go.Spot.Left, go.Spot.Left, "toLinkableLeft", "fromLinkableLeft"),
self.makePort("R", go.Spot.Right, go.Spot.Right, "toLinkableRight", "fromLinkableRight"),
self.makePort("B", go.Spot.Bottom, go.Spot.Bottom, "toLinkableBottom", "fromLinkableBottom")
));
The problem is in the function makeport:
makePort: function (name, align, spot, output, input) {
var self = this;
var horizontal = align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom);
name = name + count.toString();
return GO(go.Shape, {
fill: "transparent", // changed to a color in the mouseEnter event handler
strokeWidth: 0, // no stroke
alignmentFocus: spot,
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: true, // declare whether the user may draw links from here
toSpot: spot, // declare where links may connect at this port
// toLinkable: true, // declare whether the user may draw links to here
cursor: "pointer", // show a different cursor to indicate potential link point
mouseEnter: function (e, port) { // the PORT argument will be this Shape
if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
},
mouseLeave: function (e, port) {
port.fill = "transparent";
}
}, new go.Binding("toLinkable", input),
new go.Binding("fromLinkable", output)
);
},
I called the ports T,L,R,B, but this node that create 4 figures by a model template gives to each figure a different id(-1,-2,-3,-4),
but to the port the same id (more precisely gojs assign null value to the ports id in this case)
This is a problem because it causes a bug in the properties:
toSpot
fromSpot
that need the id of the port to work correctly(without the id the link dragged to a port to another is assigned to a casual port).
I tried to bind the portId value like the toLinkable and fromLinkable properties without success.
Can you help me? There’s a solution?
In others framework I see that the id of internal object as the (main object ID)/(internal object ID decided by the developer).
Like :
-1/T
-1/L
to make sure they are unique.
this is the json model that I’ve used:
[{
text: "Lake",
fill: fill1,
stroke: brush1,
figure: "Diamond",
toLinkableTop: false,
fromLinkableTop: true,
toLinkableLeft: true,
fromLinkableLeft: false,
toLinkableRight: true,
fromLinkableRight: false,
toLinkableBottom: false,
fromLinkableBottom: false
}, {
text: "Ocean",
fill: fill2,
stroke: brush2,
figure: "Rectangle",
toLinkableTop: true,
fromLinkableTop: true,
toLinkableLeft: true,
fromLinkableLeft: true,
toLinkableRight: true,
fromLinkableRight: true,
toLinkableBottom: true,
fromLinkableBottom: true
}, {
text: "Sand",
fill: fill3,
stroke: brush3,
figure: "Diamond",
toLinkableTop: false,
fromLinkableTop: true,
toLinkableLeft: true,
fromLinkableLeft: false,
toLinkableRight: true,
fromLinkableRight: false,
toLinkableBottom: false,
fromLinkableBottom: false
}, {
text: "Goldfish",
fill: fill4,
stroke: brush4,
figure: "Rectangle",
toLinkableTop: true,
fromLinkableTop: true,
toLinkableLeft: true,
fromLinkableLeft: true,
toLinkableRight: true,
fromLinkableRight: false,
toLinkableBottom: true,
fromLinkableBottom: true
}]
Can you help me please?