Hi
I have flow panel with 3 items on board, with 2 different elem category.
Same flow panel and templates of items is used in palette and in diagram.
Somehow in diagram it moves second element to the next row, dont know whats wrong with it.
(palette from left side until scrollbar)
I’m using panel flow from this answer
The nodes do look different – there are additional objects in the nodes in the diagram. Maybe that would explain it.
You say you are using the same templates, but the data must be different. Try with the same data to make sure.
Yes, nodes looks different, but data is the same.
Different template using same Panel, I only adjust fontSize + panel size.
Well, if the font causes the TextBlocks to be wider, and yet the node widths are limited, that might account for it.
I’m taking into account fontSize when I break text into 2 lines.
Never the less problem exists in wider node, I would agree with your assumption if it would be the opposite case.
Well, if you can provide a complete minimal reproducible case, I’ll look at it.
Its pretty big, I hope its not a problem…
I dragged the 1009 node from the palette and dropped it into the main diagram.
The two nodes are clearly different widths: in the palette it’s actualBounds.width is 185, in the main diagram it’s 234. So of course the “Flow” Panel, which stretches horizontally, will be of different widths, causing the panel layout to produce different results with the same data.
Parent panel of flow panel has different maxSize, why in smaller width it looks better?
Am I missing the point behind something? How come is that for smaller width it looks ok, but when node is bigger its doesn’t? I can’t accept your explanation, doesn’t make any sense to me…
Anyway can you suggest something to make it work?
Why not use the same template for both diagrams? That would save you some work initially and will reduce maintenance costs.
because I have a different design for palette and for main diagram.
Anyway even if I would take a single template and set all bunch of conditions to handle both designs - I will still end up with 2 different node width which is according to your explanation will break the flow panel.
Can you please explain exactly how come Flow Panel breaks when it has bigger room for its content.
The TextBlock.font is smaller in the Palette than in the Diagram. That will make the text narrower in the Palette.
Are the itemArrays the same in both diagrams for the same data?
I agree on the point about fontSize, but as you might noticed if you checked out the code in codepen, its being taken into account when splitting text into lines.
Anyway - bigger font - wider node, should not cause any troubles.
ItemsArray are the same - using same templates - with difference of fontSize
I did see that code, but I did not take the time to debug it. Doing a lot of calculations based on text measurements is inherently platform dependent, so that’s another potential cause of variation in the results that people see.
If there is a bug in “Flow” PanelLayout, I would appreciate it if you could create a minimal sample reproducing the problem.
You have it in codepen… Do you want me to reduce the size of the code there?
Regarding text measurements - you are right, and I’m accepting this risk, I dont have another way to split the text into 2 lines based on the parent panel width…
I’ve reduced the size of code in codepen in half
Now first half of the code is PanelFlowLayout code.
My code starts from line 335
That is your choice. If you believe that there is a bug in PanelLayoutFlow, it would be helpful to demonstrate that there really is a bug there. It’s hard to do that when there is so much text measurement going on, which is going to be different on different platforms.
Here is a complete sample that I believe most people would believe is close to a minimal sample. It’s just missing the data needed to show a bug at a particular width or in some other circumstances.
<!DOCTYPE html>
<html>
<head>
<title>Minimal GoJS Sample</title>
<!-- Copyright 1998-2022 by Northwoods Software Corporation. -->
</head>
<body>
<div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
<script src="https://unpkg.com/gojs"></script>
<script src="https://unpkg.com/gojs/extensions/PanelLayoutFlow.js"></script>
<script id="code">
const $ = go.GraphObject.make;
const myDiagram =
$(go.Diagram, "myDiagramDiv");
myDiagram.nodeTemplate =
$(go.Node, "Flow",
new go.Binding("itemArray"),
{
itemTemplate:
$(go.Panel,
new go.Binding("width", ""),
{ height: 20, background: "gray", margin: 1 }),
width: 100, resizable: true
}
);
myDiagram.model = new go.GraphLinksModel(
[
{ itemArray: [23, 45, 19, 17, 28] },
]);
</script>
</body>
</html>
Ah, I see you have just posted about simplifying the CodePen. Thanks.
If you want I can get rid of palette as well, add some nodes to diagram.model on init, and it will be even less code. Tell me if it still too much
I’ve added palette with its own template to demonstrate weird behavior of Flow panel, since itemArrayand itemsTemplateMap of Flow panel are shared between palette and diagram.
If I change the code in CodePen not to use a different font size in the palette than in the diagram:
const buildItemArray = (node: go.Node, isPalette?: boolean) => {
const fontSize = 14; // isPalette ? 12 : 14;
Then the results seem quite reasonable:
If you just want nodes to look smaller in the palette, just set its Diagram.initialScale to 0.8 or whatever.
I’ve tried to figure out whats wrong - but there is no answer its just magic.
If I use buildItemArray without fontSize condition - everything looks ok.
Doesnt make any sense - and I’m giving up on trying to make any sense out of it.
I will do change it in project - if it will work I will leave it with a comment “do not touch, no one knows how it works”
UPD. it actually works.
I understand that this is an issue which comes form my execution context, not Flow panel. It still doesnt make much sense to me, but If I use copy of buildItemArray without conditions in both places (not same func called from different places - an actual copy of a func, with difference in removing conditions and supplying different fontSize values for different templates) everything works ok.
As always thanks @walter for making this path with me.
