@opkeydev wrote:
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 }); }; //#endregionand 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) );
Posts: 1
Participants: 1