AutoLayout

[Clive321A]

Hi, On occasion the AutoLayout overlaps, I was trying to have a look through the AutoLayout code, and as I expected, pretty complicated.

Would you know what might cause something like this to happen? The Orange Node overlaps using Algorithm.TreeHorizontalTopDown

Mostly, the auto layout works really well, I was wondering if there was a Max height or something in the code? Have tried (unsuccessfully) playing with HintHeight & HintWidth,

 <Diagram id="familyDiagram" SelectionChanged="SelectionChanged" ShowGridLines=false @ref="masterDiagram">        
        <Nodes>

            @foreach (var node in FamilyDiagramNode.RectangleNodes)
            {

                <RectangleNodeNoLinks @key="@node.NodeId" Id="@node.NodeId">

                    <div class="diagram" style="max-width:@Width;min-width:@Width;font-size: 8pt; background-color: @node.Colour; color: @node.FontColour">
                        @if (!string.IsNullOrEmpty(node.Icon))
                        {
                            <span style="font-size:23px; width:100%; align-content:center; text-align:center" class="@node.Icon"></span>
                        }
                        @foreach (var q in node.Data)
                        {
                            <div>@((MarkupString)q)</div>
                        }
                    </div>
                </RectangleNodeNoLinks>
            }

        </Nodes>

        <Links AllowFreeFloatingLinks="false">
            @foreach (var lnk in FamilyDiagramNode.DiagramLinks)
            {
                <Link @key="@((lnk.Source,lnk.Target))" Source="lnk.Source" Target="lnk.Target" Arrow="Arrow.Target" Type="link_type" />

            }
        </Links>

        <NavigationSettings DisableZooming="false" @ref="navigationSettings" MinZoom="@MinZoom" MaxZoom="@MaxZoon" Origin="@Origin" />
        <AutoLayoutSettings Algorithm=CurrentAlgorithm @ref="autoLayout" />

        @if (!isMobile)
        {
            <OverviewSettings ViewableAreaBorderWidth="2"  BackgroundColor="#DDDDDD" Position="Excubo.Blazor.Diagrams.Position.BottomRight" ViewableAreaBorderColor="green" ViewableAreaFillColor="white" FullBorder="true"  />
        }

    </Diagram>

[stefanloerwald]

Hi @CliveBennett,

Unfortunately the autolayout code is very complex, and certainly not without faults. I've attempted better versions here many times, without huge success. Nevertheless, it should still not lead to overlaps.

Short of actually finding the bug, you might be able to work around your issue by adding a few invisible links between nodes. This can help the algorithm put things in the right place.

Hope that helps, Stefan

[Clive321A]

Thanks Stefan, I cant see how to make a Link invisible? best I could come up with was style="display:none" on the Link

Its not a huge problem, I think its my setting of max-width which is causing it, as I was trying to get the stages to align for easier reading

I have a process which auto generates a PDF, where its a minor problem, for on screen they can just move the node manually.

[stefanloerwald]

Yes, making a link invisible works by adding this style.

Part of the code to make nodes work correctly involves measuring the size, which can fail for timing reasons. I suspect that might mess things up here. Not sure though...

[Clive321A]

Is there anyway for me to slow down the rendering if there are some timing issues? I played around with adding extra hidden links, having them different ways etc, duplicating them.

For your comment here "Part of the code to make nodes work correctly involves measuring the size, which can fail for timing reasons"

Im wondering if I can slow something down, sounds like measurements are potentially running before the browser has rendered fully?. I tried putting some Task.Wait between updating the diagram and calling AutoLayout, but doesn't make much difference.

[stefanloerwald]

Is there anyway for me to slow down the rendering if there are some timing issues? I played around with adding extra hidden links, having them different ways etc, duplicating them.

For your comment here "Part of the code to make nodes work correctly involves measuring the size, which can fail for timing reasons"

Slowing down things won't help, because it's not about the speed of things but rather a race condition kind of thing. If the auto layout code is triggered before nodes were able to render once and have their size measured, then things can go wrong. When the layout code runs after the first render of all nodes, it will most likely get the correct sizes. So if executing the layout call later doesn't resolve the issue, it's very likely a bug in the layout code.

[Clive321A]

Thanks Stefan, Ill come up with a reproducible demo sometime, and see if I can figure out the specific measuring in the auto layout code..