Problem moving link

GoJS
1

Hi,
I have a problem when I link two elements.
I get a diffent behavior from your BPMN example: when I move an object around the arrow disappear and/or change the original direction.

Examples:

This is code

var sequenceLinkTemplate =
GoLib(go.Link,
{ routing: go.Link.AvoidsNodes, curve: go.Link.JumpGap, corner: 10,
reshapable: true, relinkableFrom: true, relinkableTo: true, toEndSegmentLength: 20,
/contextClick: function (e, obj) { setLabelEditorOn(obj); return false; },/
selectionChanged: function (part) { alert(1); setLabelEditorBg(part); return false; }
},
new go.Binding(“points”).makeTwoWay(),
GoLib(go.Shape, { isPanelMain: true, stroke: “black”, strokeWidth: 1 }),
GoLib(go.Shape, { toArrow: “Triangle”, scale: 1.2, fill: “black”, stroke: null }),
GoLib(go.Shape, { fromArrow: “”, scale: 1.5, stroke: “black”, fill: “white” },
new go.Binding(“fromArrow”, “isDefault”, function (s) {
if (s === null) return “”;
return s ? “BackSlash” : “StretchedDiamond”;
}),
new go.Binding(“segmentOffset”, “isDefault”, function (s) {
return s ? new go.Point(5, 0) : new go.Point(0, 0);
})),
GoLib(go.TextBlock, { // this is a Link label
name: “Label”, editable: true, text: “”, /segmentOffset: new go.Point(-10, -10),/
visible: true, segmentIndex: 0, segmentOffset: new go.Point(NaN, NaN)
},
new go.Binding(“text”, “text”).makeTwoWay(),
new go.Binding(“visible”, “visible”).makeTwoWay())
);

2

You probably want to set GraphObject.fromSpot and GraphObject.toSpot on each of the node’s port elements (i.e. those GraphObjects that have GraphObject.portId set to a string).

If you look at most of the samples that have multiple ports on a node, that do not also have a Diagram.layout that automatically sets the fromSpot and toSpot, they specify those spot properties explicitly.

3

I have set GraphObject.fromSpot , GraphObject.toSpot and GraphObject.portId with string.

I don’t understand why the arrow disappear and/or changes the original direction.

This is code of my nodes:

var activityNodeTemplate =
GoLib(go.Node, “Spot”,
{ locationObjectName: “SHAPE”, locationSpot: go.Spot.Center,
resizable: false, resizeObjectName: “PANEL”,
toolTip: tooltiptemplate,
selectionAdorned: true, // use a Binding on the Shape.stroke to show selection
itemTemplate: boundaryEventItemTemplate,
contextClick: function (e, node) { var idProcesso = node.data.idProcesso; if (idProcesso != undefined && idProcesso > 0) ShowDettagliNodo(idProcesso); return false; }
},
new go.Binding(“itemArray”, “boundaryEventArray”),
new go.Binding(“location”, “loc”, go.Point.parse).makeTwoWay(go.Point.stringify),
// move a selected part into the Foreground layer, so it isn"t obscured by any non-selected parts
new go.Binding(“layerName”, “isSelected”, function (s) { return s ? “Foreground” : “”; }).ofObject(),
GoLib(go.Panel, “Auto”,
{ name: “PANEL”,
minSize: new go.Size(activityNodeWidth, activityNodeHeight),
desiredSize: new go.Size(activityNodeWidth, activityNodeHeight)
},
new go.Binding(“desiredSize”, “size”, go.Size.parse).makeTwoWay(go.Size.stringify),
GoLib(go.Panel, “Spot”,
GoLib(go.Shape, “RoundedRectangle”, // the outside rounded rectangle
{name: “SHAPE”,
fill: activityNodeFill,
stroke: activityNodeStroke,
fromLinkable: true,
toLinkable: true,
cursor: “pointer”
},
new go.Binding(“fill”, “color”),
new go.Binding(“strokeWidth”, “isCall”, function (s) { return s ? activityNodeStrokeWidthIsCall : activityNodeStrokeWidth; })
),
makePortGeneric(“T”, go.Spot.Top, true, true),
makePortGeneric(“L”, go.Spot.Left, true, true),
makePortGeneric(“R”, go.Spot.Right, true, true),
makePortGeneric(“B”, go.Spot.Bottom, true, true),
GoLib(go.Shape, “RoundedRectangle”, // the inner “Transaction” rounded rectangle
{margin: 3,
stretch: go.GraphObject.Fill,
stroke: activityNodeStroke,
parameter1: 8, fill: null, visible: false
},
new go.Binding(“visible”, “isTransaction”)),
// task icon
GoLib(go.Shape, “BpmnTaskScript”, // will be None, Script, Manual, Service, etc via converter
{alignment: new go.Spot(0, 0, 5, 5), alignmentFocus: go.Spot.TopLeft, width: 22, height: 22 },
new go.Binding(“fill”, “taskType”, nodeActivityTaskTypeColorConverter),
new go.Binding(“figure”, “taskType”, nodeActivityTaskTypeConverter)
), // end Task Icon
makeMarkerPanel(false, 1) // sub-process, loop, parallel, sequential, ad doc and compensation markers
), // end main body rectangles spot panel
GoLib(go.TextBlock, // the center text
{alignment: go.Spot.Center, textAlign: “center”, margin: 12, editable: true },
new go.Binding(“text”).makeTwoWay())
),
{ // handle mouse enter/leave events to show/hide the ports
mouseEnter: function (e, node) { showSmallPorts(node, true); },
mouseLeave: function (e, node) { showSmallPorts(node, false); }
}
); // end go.Node

function makePortGeneric(name, spot, output, input) {
// the port is basically just a small transparent square
return GoLib(go.Shape, “Rectangle”,
{
fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below
stroke: null,
desiredSize: new go.Size(7, 7),
alignment: spot, // align the port on the main Shape
alignmentFocus: spot, // just inside the Shape
portId: name, // declare this object to be a “port”
fromSpot: spot, toSpot: go.Spot.AllSides, /spot,/ // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: “pointer”, // show a different cursor to indicate potential link point
fromMaxLinks: 1,
toMaxLinks: 1
});
}

function showSmallPorts(node, show) {
node.ports.each(function (port) {
if (port.portId !== “”) { // don’t change the default port, which is the big shape
port.fill = show ? “rgba(150, 150, 150, 1)” : null;
}
});
}

4

If you specify the toSpot of a small port element to be Spot.AllSides, it means that the end of a link connecting with that port may connect at any side of that port. If the z-order of the link places it behind the node, the end of the link may be hidden by the node. So if the closest side of the port is on the “inside” of the node, the end of the link will not be seen.

5

I solved problem with setting toSpot with spot variable.

Thanks for your help.

This is code:

function makePortEventNode(name, spot, output, input) {
// the port is basically just a small transparent square
return GoLib(go.Shape, “Circle”,
{
fill: null, // not seen, by default; set to a translucent gray by showSmallPorts, defined below
stroke: null,
desiredSize: new go.Size(7, 7),
alignment: spot, // align the port on the main Shape
alignmentFocus: spot, // just inside the Shape
portId: name, // declare this object to be a “port”
fromSpot: spot, toSpot: spot, // declare where links may connect at this port
fromLinkable: output, toLinkable: input, // declare whether the user may draw links to/from here
cursor: “pointer”, // show a different cursor to indicate potential link point
fromMaxLinks: 1,
toMaxLinks: 1
});
}