Hi,
I want to link my node from link to its closest port while auto arranging the layout right now i am using this layout
//#region LayeredDigraphLayout
function ArrangingLDLayout() {
go.LayeredDigraphLayout.call(this);
this._singletons = null;
}
go.Diagram.inherit(ArrangingLDLayout, go.LayeredDigraphLayout);
ArrangingLDLayout.prototype.makeNetwork = function (coll) {
var net = go.LayeredDigraphLayout.prototype.makeNetwork.call(this, coll);
// delete all vertexes that have no edges
var singletons = new go.Set();
net.vertexes.each(function (v) {
if (v.edgesCount === 0 && v.node !== null) singletons.add(v.node);
});
singletons.each(function (n) {
net.deleteNode(n);
});
this._singletons = singletons; // remember for commitLayout
return net;
};
ArrangingLDLayout.prototype.commitLayout = function () {
go.LayeredDigraphLayout.prototype.commitLayout.call(this);
var p = this.arrangementOrigin.copy();
p.x += this.columnSpacing / 2; // horizontal indent
this.network.vertexes.each(function (v) {
var n = v.node;
if (n === null) return;
p.y = Math.max(p.y, n.actualBounds.bottom);
});
p.y += 50; // vertical spacing
var hspace = this.columnSpacing;
this._singletons.each(function (n) {
n.move(p);
p.x += n.actualBounds.width + 50; // horizontal spacing
});
};
//#endregion
and i want to link my nodes to its closest port when i apply this layout to my model
the link coming from ( A -> D ) is not linking for top its get link to right side i want to link to the closest port so that my link layout will get improved please let me know how would it is possible for node creation i am using this code
to create Port
function makePort(id, align, spot) {
var port = (go.Shape,
{
fill: "transparent",
stroke: null,
portId: id,
alignment: align,
cursor: "pointer",
fromSpot: spot,
fromLinkable: true,
fromLinkableDuplicates: true,
fromLinkableSelfNode: true,
toSpot: spot,
toLinkable: true,
toLinkableSelfNode: true,
toLinkableDuplicates: true,
mouseEnter: portMouseEnter,
mouseLeave: portMouseLeave,
toolTip: // define a tooltip for each node that displays the color as text
(go.Adornment, “Auto”,
(go.Shape, { fill: "#FFFFCC" }),
(go.TextBlock, { margin: 4 },
new go.Binding(“text”, “”, diagramInfo))
) // end of Adornment
});
if (align.equals(go.Spot.Top) || align.equals(go.Spot.Bottom)) {
port.height = 3;
port.stretch = go.GraphObject.Horizontal;
} else {
port.width = 3;
port.stretch = go.GraphObject.Vertical;
}
return port;
}
and for node
var nodeResizeAdornmentTemplate =
(go.Adornment, "Spot",
{ locationSpot: go.Spot.Right },
(go.Placeholder),
(go.Shape, { alignment: go.Spot.TopLeft, cursor: "nw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) }),
(go.Shape, { alignment: go.Spot.Top, cursor: “n-resize”, desiredSize: new go.Size(6, 6), fill: “lightblue”, stroke: “deepskyblue”, maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.TopRight, cursor: “ne-resize”, desiredSize: new go.Size(6, 6), fill: “lightblue”, stroke: “deepskyblue”, maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.Left, cursor: "w-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.Right, cursor: "e-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.BottomLeft, cursor: "se-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.Bottom, cursor: "s-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) }),
$(go.Shape, { alignment: go.Spot.BottomRight, cursor: "sw-resize", desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "deepskyblue", maxSize: new go.Size(250, 150) })
);
var nodeShape = "RoundedRectangle";
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ layoutConditions: go.Part.LayoutAdded | go.Part.LayoutRemoved, isLayoutPositioned: true, zOrder: 2 },
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
{ resizable: false, resizeObjectName: "PANEL", resizeAdornmentTemplate: nodeResizeAdornmentTemplate, desiredSize: new go.Size(108, 67), minSize: new go.Size(108, 67), maxSize: new go.Size(220, 120) },
new go.Binding("angle").makeTwoWay(),
new go.Binding("position", "position", go.Point.parse).makeTwoWay(go.Point.stringify),
new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify),
$(go.Shape, nodeShape,
{
portId: "",
parameter1: 2,
fill: nodebackground, stroke: nodeStroke, strokeWidth: 2,
spot1: new go.Spot(0, 0, 1, 1),
spot2: new go.Spot(1, 1, -1, 0),
minSize: new go.Size(95, 59),
maxSize: new go.Size(220, 120),
},
new go.Binding("strokeWidth", "isHighlighted", function (s, obj) {
}).ofObject(),
new go.Binding("stroke", "isHighlighted", function (s, obj) {
if (s && $scope.pathHighlight) { return "#bf31d8"; } else { if (obj.part.data.hasOwnProperty('AssociatedID')) { return "gray"; } else { return nodeStroke; } }
}).ofObject(),
new go.Binding("figure", "figure").makeTwoWay(),
new go.Binding("fill", "fill").makeTwoWay(),
new go.Binding("stroke", "stroke").makeTwoWay()
),
$(go.Panel, "Vertical",
{
alignment: go.Spot.Top,
stretch: go.GraphObject.Horizontal,
minSize: new go.Size(108, 67)
},
$(go.Panel, "Table",
{
background: "lightblue",
stretch: go.GraphObject.Horizontal,
width: 15.5, height: 13,
margin: new go.Margin(2, 3, 0, 3)
},
$(go.Shape, "StopSign", {
alignment: go.Spot.TopLeft, margin: 2,
fill: "red", width: 8, height: 8, stroke: null,
visible: visible
}, new go.Binding("visible", "visible").makeTwoWay()),
$("Button", {
alignment: go.Spot.Right,
width: 16,
height: 15,
margin: new go.Margin(0, 0, 0, 90),
click: add_IP_OP,
visible: false,
cursor: "pointer"
}, new go.Binding("visible", "stroke", function (color) {
if (color != "#00b9ff") {
if (color == "gray" && MbtDiagramInstance.getModelTitleName != "Published Model")
return true;
else
return false;
}
}),
$(go.TextBlock, {
text: '',
textAlign: "center",
font: '10px FontAwesome'
}),
)),
$(go.TextBlock,
{
font: "12px Arial, sans-serif", //stroke: lightText,
margin: new go.Margin(4, 6, 4, 6),
stretch: go.GraphObject.Horizontal, textAlign: "center",
height: 38,
maxLines: 3,
verticalAlignment: go.Spot.Center,
editable: true, isMultiline: true, //textValidation: validateText,
textEdited: function (textBlock, previousText, currentText) {
},
},
new go.Binding("text", "text").makeTwoWay())),
{ contextMenu: $(go.Adornment) },
makePort("T", go.Spot.Top, go.Spot.TopSide),
makePort("L", go.Spot.Left, go.Spot.LeftSide),
makePort("R", go.Spot.Right, go.Spot.RightSide),
makePort("B", go.Spot.Bottom, go.Spot.BottomSide)
);
