I have an issue regarding busbar while connecting a node to busbar it is working correct.
while connecting the element having no issue it’s working fine.
Issue 1: 1. hold the bus bar and move a little the diagram show as follows getting issue with the link
Thank You.
Just a guess:
Is “Q1” a Group? Have you set Link.routing to AvoidsNodes? If so, maybe you need to set Group.avoidable to false.
we have one group inside and we have label and shape and here Q1 is a label.
for the link template I have set
Which template I need to set Group.avoidable false?
I have vertical busbar for that it’s working fine what is missing for horizontal busbar?
let linkProperties = {
routing: Link.AvoidsNodes,
curve: Link.JumpOver,
corner: 3,
relinkableFrom: true, relinkableTo: true,
selectionAdorned: true,
selectable: true,
}
below code for HBusBar
private getHbarNodeTemplate() {
return this._goMake(Node, "Spot",
new Binding("location", "location", Point.parse).makeTwoWay(Point.stringify),
{
locationSpot: Spot.Center, locationObjectName: "SHAPE",
linkValidation: (fromNode, fromPort, toNode, toPort, link) => {
if ((fromNode.category === "HBar" || fromNode.category === "VBar") &&
(toNode.category === "HBar" || toNode.category === "VBar")) return false;
if (fromNode.category === "HBar" && toNode.location.y < fromNode.location.y) return false;
if (toNode.category === "HBar" && fromNode.location.y > fromNode.location.y) return false;
return true;
},
// special resizing: just at the ends
resizable: true, resizeObjectName: "SHAPE",
resizeAdornmentTemplate:
this._goMake(Adornment, "Spot",
this._goMake(Placeholder),
this._goMake(Shape, // left resize handle
{
alignment: Spot.Left, cursor: "col-resize",
desiredSize: new Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}),
this._goMake(Shape, // right resize handle
{
alignment: Spot.Right, cursor: "col-resize",
desiredSize: new Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}))
},
this._goMake(Shape, "Rectangle",
{
name: "SHAPE",
fill: "black", strokeWidth: 2,
width: 100, height: 2,
minSize: new Size(250, 2),
maxSize: new Size(Infinity, 2)
},
new Binding("width").makeTwoWay(),
new Binding("fill"),
{ portId: "", fromLinkable: true, toLinkable: true }),
this._goMake(TextBlock,
{ alignment: Spot.Right, alignmentFocus: Spot.Left, editable: true },
new Binding("text").makeTwoWay())
)
}Try setting Node.avoidable to false on your bar template(s).
You can define a “VBar” node template that is just like your “HBar” node template.
The following templates also include custom link validation predicates that prevent an HBar from being connected with a VBar, and only allow links in a certain direction. You might want to implement different validation criteria.
myDiagram.nodeTemplateMap.add("HBar",
$(go.Node, "Spot",
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
{
avoidable: false,
locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
linkValidation: (fromNode, fromPort, toNode, toPort, link) => {
if ((fromNode.category === "HBar" || fromNode.category === "VBar") &&
(toNode.category === "HBar" || toNode.category === "VBar")) return false;
if (fromNode.category === "HBar" && toNode.location.y < fromNode.location.y) return false;
if (toNode.category === "HBar" && fromNode.location.y > fromNode.location.y) return false;
return true;
},
// special resizing: just at the ends
resizable: true, resizeObjectName: "SHAPE",
resizeAdornmentTemplate:
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape, // left resize handle
{
alignment: go.Spot.Left, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}),
$(go.Shape, // right resize handle
{
alignment: go.Spot.Right, cursor: "col-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}))
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "black", strokeWidth: 0,
width: 100, height: 2,
minSize: new go.Size(50, 2),
maxSize: new go.Size(Infinity, 2)
},
new go.Binding("width").makeTwoWay(),
new go.Binding("fill"),
{ portId: "", fromLinkable: true, toLinkable: true }),
$(go.TextBlock,
{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left, editable: true },
new go.Binding("text").makeTwoWay())
));
myDiagram.nodeTemplateMap.add("VBar",
$(go.Node, "Spot",
new go.Binding("location", "location", go.Point.parse).makeTwoWay(go.Point.stringify),
{
avoidable: false,
locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
linkValidation: (fromNode, fromPort, toNode, toPort, link) => {
if ((fromNode.category === "HBar" || fromNode.category === "VBar") &&
(toNode.category === "HBar" || toNode.category === "VBar")) return false;
if (fromNode.category === "VBar" && toNode.location.x < fromNode.location.x) return false;
if (toNode.category === "VBar" && fromNode.location.x > fromNode.location.x) return false;
return true;
},
// special resizing: just at the ends
resizable: true, resizeObjectName: "SHAPE",
resizeAdornmentTemplate:
$(go.Adornment, "Spot",
$(go.Placeholder),
$(go.Shape, // top resize handle
{
alignment: go.Spot.Top, cursor: "row-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}),
$(go.Shape, // bottom resize handle
{
alignment: go.Spot.Bottom, cursor: "row-resize",
desiredSize: new go.Size(6, 6), fill: "lightblue", stroke: "dodgerblue"
}))
},
$(go.Shape, "Rectangle",
{
name: "SHAPE",
fill: "black", strokeWidth: 0,
width: 2, height: 100,
minSize: new go.Size(2, 50),
maxSize: new go.Size(2, Infinity)
},
new go.Binding("height").makeTwoWay(),
new go.Binding("fill"),
{ portId: "", fromLinkable: true, toLinkable: true }),
$(go.TextBlock,
{ alignment: go.Spot.Bottom, alignmentFocus: go.Spot.Top, editable: true, angle: 270 },
new go.Binding("text").makeTwoWay())
));
Hi Walter,
Thanks for the update.
I have added avoidable:false but still it is not working.
I have implemented HBar and VBar both are working fine but problem with connection and its due to more space I am moving Hbar having issue with the links.
before moving Hbar it’s fine
After Moving HbusBar
Issue - If I have connected more than two element in the busbar and moving the HBar having problem
But I am connecting only one element to Hbusbar Link is working fine.
Note: If I am creating the HBar and VBar element without group it’s working fine.
the below code I have implemented for the direction Please have a look
private getLinkPoint() {
this.busbarLink.prototype.getLinkPoint = function (node, port, spot, from, ortho, othernode, otherport) {
if (node != undefined) {
if (node.category === "HBar") {
var op = Link.prototype.getLinkPoint.call(this, othernode, otherport, this.computeSpot(!from), !from, ortho, node, port);
var r = port.getDocumentBounds();
var y = (op.y > r.centerY) ? r.bottom : r.top;
if (op.x < r.left) return new Point(r.left, y);
if (op.x > r.right) return new Point(r.right, y);
return new Point(op.x, y);
} else if (node.category === "VBar") {
var op = Link.prototype.getLinkPoint.call(this, othernode, otherport, this.computeSpot(!from), !from, ortho, node, port);
var r = port.getDocumentBounds();
var x = (op.x > r.centerX) ? r.right : r.left;
if (op.y < r.top) return new Point(x, r.top);
if (op.y > r.bottom) return new Point(x, r.bottom);
return new Point(x, op.y);
} else {
return Link.prototype.getLinkPoint.call(this, node, port, spot, from, ortho, othernode, otherport);
}
};
}
}
private getLinkPointDirection() {
this.busbarLink.prototype.getLinkDirection = function (node, port, linkpoint, spot, from, ortho, othernode, otherport) {
if (node != undefined) {
if (node.category === "HBar" || othernode.category === "HBar") {
var p = port.getDocumentPoint(Spot.Center);
var op = otherport.getDocumentPoint(Spot.Center);
var below = op.y > p.y;
return below ? 90 : 270;
} else if (node.category === "VBar" || othernode.category === "VBar") {
var p = port.getDocumentPoint(Spot.Center);
var op = otherport.getDocumentPoint(Spot.Center);
var below = op.x > p.x;
return below ? 0 : 180;
} else {
return Link.prototype.getLinkDirection.call(this, node, port, linkpoint, spot, from, ortho, othernode, otherport);
}
};
}
}We’ll look into this. I’m able to reproduce the problem.
I found that setting { avoidable: false } avoids the behavior that you report.
Are you sure that you are still seeing the problem after setting Node.avoidable to false on all of your “bar” node templates?
If you don’t want to set Node.avoidable to false on the bar nodes, because you do want routing to avoid crossing them, then you could define custom Node class(es), like:
class HBarNode extends go.Node {
getAvoidableRect(r) {
super.getAvoidableRect(r);
const shp = this.findObject("SHAPE");
if (shp) {
r.y += shp.actualBounds.y;
r.height = shp.actualBounds.height;
}
return r;
}
}
Then change the corresponding node template:
myDiagram.nodeTemplateMap.add("HBar",
$(HBarNode, "Spot",
. . .
Yes I have set { avoidable: false } but still same issue I am getting and I have added the code you gave me but same issue
Note: But I have observed one thing if you will see vertical bus bar here I have group inside that I have label and busbar and in the left hand side I am having gap between busbar and group so, I am adding only one node in the left hand side and moving the busbar it’s working
Note 1: But If I am adding more than one node in the left hand side getting this issue
Note: but I am adding adding in the right handside of the busbar it is working fine
Final: according to me its due more gap in the left hand side…
Please have a look once
Could you please post the text of your VBar node template?
for VBar node I am not taking any separate text
for every node we have common below label template in the image Q1 I have label template
private getLabelTemplate(): any {
return this._goMake(Node, "Spot", {
movable: false, selectable: false, locationSpot: Spot.Center, margin: new Margin(0, 2, 0, 0)
, toolTip:
this._goMake("ToolTip",
this._goMake(TextBlock, { margin: 4 },
new Binding("text", "type"))
)
},
new Binding("location", "location", Point.parse).makeTwoWay(Point.stringify),
this._goMake(Panel, "Spot",
this._goMake(TextBlock, { editable: true, margin: new Margin(0, 25, 30, 0) },
new Binding("text", "label").makeTwoWay(),
)),
);
}
do we have any properties in gojs so that I can make node draggable
I still don’t see where you set Node.avoidable to false.
I have set it down in the VBar Template but it’s not working I have resize the group width below image you can see now its working fine. but still I do’nt know the exact reason.
Thanks Walter for the help.