Hi,
While applying background colour to text block it is affecting stroke in link template.
Kindly provide me with a solution for this.
I have attached the image for you reference
Could you please be specific in your problem description? I do not see how your “Water Sensor” or “Terrace” TextBlocks are overlapping any links.
If the nodes are in front of the links, then it makes sense that the nodes could obscure the links when they overlap each other.
Why bother setting the background at all?
Why are there such tall white areas in your nodes, even beyond where there seems to be text?
Hi walter,
I tried to implement background colour for text block.
If i removed background colour from the textblock its working fine but in some places text is overlapping with the links. So i tried to implement the background colour for textBlock.
In the previous diagram there is no node between each floor.
For your reference i am attaching screenshot textblock without background colour
I need to get the same result as attached in this reply with background textblock colour.
That last screenshot looks good to me.
So what are those tall white areas above and below the node such as the “17th Floor SFL” node?
You’ll need to make sure the node template doesn’t have stuff in it that you don’t want to display.
There is nothing for white tall area.If i enable background colour property it comes up.
Don’t know where it is come.
I am attaching my nodeTemplate code here FYR
this.myDiagram.nodeTemplate = $(
go.Node,
"Spot",
{ rotatable: true, resizable: true, locationSpot: go.Spot.Center }, // for rotation and icon resize
{
locationObjectName: "PORT",
locationSpot: go.Spot.Top, // location point is the middle top of the PORT
linkConnected: updatePortHeight,
linkDisconnected: updatePortHeight,
toolTip: $(
"ToolTip",
$(
go.TextBlock,
{ margin: 4, width: 140 },
new go.Binding("text", "", function (data) {
console.log(data);
return data.text + ":\n\n" + data.caption;
})
)
),
},
new go.Binding("location", "pos", go.Point.parse).makeTwoWay(
go.Point.stringify
),
// The main element of the Spot panel is a vertical panel housing an optional icon,
// plus a rectangle that acts as the port
$(
go.TextBlock,
{
height: 100,
font: "Bold 14px Lato, sans-serif",
textAlign: "center",
margin: 3,
// background:"white",
maxSize: new go.Size(100, NaN),
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom,
editable: true,
},
new go.Binding("text", "value")
),
$(
go.Panel,
"Vertical",
$(
go.Shape,
{
width: 40,
height: 0,
stroke: null,
strokeWidth: 0,
fill: "gray",
},
new go.Binding("height", "icon", function () {
return 25;
}),
new go.Binding("width", "icon", function () {
return 25;
}),
new go.Binding("fill", "color", colorFunc),
new go.Binding("geometry", "icon", geoFunc)
),
$(
go.Shape,
{
name: "PORT",
width: 40,
height: 24,
margin: new go.Margin(-1, 0, 0, 0),
stroke: null,
strokeWidth: 0,
fill: "gray",
portId: "",
fromLinkable: true,
toLinkable: true,
},
new go.Binding("fill", "color", colorFunc)
),
$(
go.TextBlock,
{
font: "Bold 14px Lato, sans-serif",
textAlign: "center",
// background:"white",
margin: 3,
maxSize: new go.Size(100, NaN),
alignment: go.Spot.Top,
alignmentFocus: go.Spot.Bottom,
editable: true,
},
new go.Binding("text").makeTwoWay()
)
)
);
You seem to have two TextBlocks in your nodes. You have set the height of the top one to be 100. If you don’t really want them to be that tall, don’t set it. That will allow them to be their natural height.
But note that even if it is showing an empty string, the user will still see something. Otherwise they wouldn’t be able to click it to edit it. And if it were not editable, I suppose you could add a Binding that made the TextBlock not visible if the string were an empty string.
Also, make sure your strings don’t have any unnecessary newlines embedded in them.
it is resolved for an icon but for intermediates, it remains the same.
can you give code snippet for intermediate block.
I already answered that – either remove the TextBlock(s) or make them not visible or make their opacity zero.
Thanks…Issue resolved