HI,
I need help for to make a layout/panel which looks like this.
Based on the some conditions/requirements the red star, right top angle, left bottom angles (icons) are visible.
If all the items are present we can mange the layout using table, but if any one elements is not visible then the layout is breaking.
I tried with using the table layout. Micrsoft, Legal, 01 = TextBlocks blockitems, icons = Picture,items
It’s impossible for us to help unless you post the simplest version of the Node template that breaks for you. Make a copy of what you had when it was working, and then start adding things or deleting things until it breaks in a manner that you cannot explain.
Here is the code that we tried -
$$$(go.TextBlock,
{
row: 0,
column: 0,
width: 150,
maxSize: new go.Size(200, NaN),
margin: new go.Margin(0, 0, 0, 4),
stroke: "#475454",
font: "600 16px 'Open Sans'",
alignment: go.Spot.Left
},
new go.Binding("text", "Name")),
$$$(go.Picture,
{
row: 0,
column: 1,
margin: 6,
width: 10,
height: 10,
maxSize: new go.Size(10, 10),
visible: false,
source: '/images/RedStar.png',
alignment: go.Spot.TopLeft
},
new go.Binding("visible", "IsPrimary", function (isPrimary) {
return isPrimary;
})),
$$$(go.Picture,
{
row: 0,
column: 2,
maxSize: new go.Size(16, 16),
width: 16,
height: 16,
visible: false,
alignment: go.Spot.TopRight,
stretch: go.GraphObject.Horizontal,
source: '/images/AnkleUpside.png'
},
new go.Binding("visible", "HasParents", function (hasParents) {
return hasParents;
})),
$$$(go.TextBlock,
{
row: 1,
column: 0,
maxSize: new go.Size(200, NaN),
margin: new go.Margin(0, 0, 0, 4),
stroke: "#a0a0a0",
font: "normal 16px 'Open Sans'",
alignment: go.Spot.Left
},
new go.Binding("text", "Type")),
$$$(go.Picture,
{
row: 2,
column: 0,
columnSpan: 2,
margin: new go.Margin(20, 0, 0, 0),
maxSize: new go.Size(16, 16),
visible: false,
alignment: go.Spot.BottomLeft,
source: '/images/AnkleDownside.png'
},
new go.Binding("visible", "HasChildrens", function (hasChildrens) {
return hasChildrens;
}),
$$$(go.TextBlock,
{
row: 2,
column: 2,
width: 20,
height: 20,
maxSize: new go.Size(20, 20),
font: "bold 14px 'Open Sans'",
alignment: go.Spot.BottomRight,
textAlign: "center"
},
new go.Binding("background", "Color"))
The node template is set to Auto and Panel is set to Table. Let me know, if you need any more information.
It appears that you’re missing a closing parenthesis to finish the last Picture.
No, it is not actually missing in our real code, I just missed it while copying here.
Then you need to describe better what the problem is and what you want exactly instead.
We need to place all items Microsoft, Legal, Number(01), icons which are star, top right and bottom left in the box(refer 1st screenshot). based on the conditions all the items may or may not be visible in the tile/box at a time.
if all the items are present the we got the expected. But in some conditions we need to hide star icon or other icons then the layout is breaking comparing to other tile which are having all the items. we need solution that any item in tile is removed itshould not be break,
Please let me know if you need anything more.
I don’t have your data, but maybe the problem is that you do not specify the desiredSize of the Pictures:
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "whitesmoke" }),
$(go.Panel, "Table",
$(go.TextBlock,
{
row: 0,
column: 0,
width: 150,
maxSize: new go.Size(200, NaN),
margin: new go.Margin(0, 0, 0, 4),
stroke: "#475454",
font: "600 16px 'Open Sans'",
alignment: go.Spot.Left
},
new go.Binding("text", "Name")),
$(go.Picture,
{
row: 0,
column: 1,
margin: 6,
width: 10,
height: 10,
desiredSize: new go.Size(10, 10),
visible: false,
background: "red",
source: '/images/RedStar.png',
alignment: go.Spot.TopLeft
},
new go.Binding("visible", "IsPrimary", function (isPrimary) {
return isPrimary;
})),
$(go.Picture,
{
row: 0,
column: 2,
desiredSize: new go.Size(16, 16),
width: 16,
height: 16,
visible: false,
alignment: go.Spot.TopRight,
stretch: go.GraphObject.Horizontal,
background: "orange",
source: '/images/AnkleUpside.png'
},
new go.Binding("visible", "HasParents", function (hasParents) {
return hasParents;
})),
$(go.TextBlock,
{
row: 1,
column: 0,
maxSize: new go.Size(200, NaN),
margin: new go.Margin(0, 0, 0, 4),
stroke: "#a0a0a0",
font: "normal 16px 'Open Sans'",
alignment: go.Spot.Left
},
new go.Binding("text", "Type")),
$(go.Picture,
{
row: 2,
column: 0,
columnSpan: 2,
margin: new go.Margin(20, 0, 0, 0),
desiredSize: new go.Size(16, 16),
visible: false,
alignment: go.Spot.BottomLeft,
background: "purple",
source: '/images/AnkleDownside.png'
},
new go.Binding("visible", "HasChildrens")),
$(go.TextBlock,
{
row: 2,
column: 2,
width: 20,
height: 20,
maxSize: new go.Size(20, 20),
font: "bold 14px 'Open Sans'",
alignment: go.Spot.BottomRight,
textAlign: "center"
},
new go.Binding("background", "Color"))
)
);
I tried all eight combinations of visible and not visible, and everything looks good to me.
I compared your code with ours and noticed that we had set a deiredSize and minSize for the node which was caused the misalignment. Once we removed it, the alignments were coming properly. But, we need those properties to have a proper size for the node. However, we resolved the issue by placing an additional TextBlock with same background color as the node, so that user can’t notice it.
Thanks for the help.
You should be setting the desiredSize on Pictures, as recommended in several places, including GoJS Pictures -- Northwoods Software. Doing so means you would not need to set minSize or maxSize, unless the desiredSize might change either by the user or by your code.
Initially, I tried by setting the desiredSize on Pictures but it didn’t solve our problem so in addition to that we have done the changes that I mentioned in my previous reply. Thanks for the link though, will go through it.