DiagramCanvas not re-rendering base on Parameter

[JanOfOlympus]

I have worked on the POC for diagram project here https://github.com/JanOfOlympus/BlazorDiagramPOC/tree/feature/diagram-poc

here I tie the tab with diagram. I have an issue with diagram rendering here

1. Click 'CreateDiagram'
2. Add Node into Tab1
3. Create another tab (named Tab2)
4. The Node from Tab1 is also appear on Tab2

Im not sure why the DiagramCanvas is not render base on the CascadingValue here. Not sure I implement something wrong :(

I have Diagram.razor as parent component and DiagramComponent.razor as child component here

Thank you do much for your reply :)

[flibbertigibbet-uk]

@JanOfOlympus I cannot see BlazorDiagramPOC, is the repository public?

[zHaytam]

Hello,

I can't see the repository either.

I'm guessing that you're using the same Diagram instance on both tabs. You should be creating 1 Diagram object per tab so that they are separate.

[JanOfOlympus]

@flibbertigibbet-uk @zHaytam Ohh I really sorry :( . I already made it public now :)

[JanOfOlympus]

@zHaytam Hmm ok I'm getting the idea, but I pass the Diagram object as param here so I think it should be new instance? Hmm I'm not sure, I'm very new to Blazor :). I'd be very appreciate if you could guide me. Many Thanks! :)

Here the @BlazorDiagram?.Nodes.FirstOrDefault()?.Title is changed per tab.

[zHaytam]

It's okay don't be sorry!

I will test your repository tonight. Can you make sure you push everything to feature/diagram-poc?

[JanOfOlympus]

@zHaytam yep already :)

[zHaytam]

Found the issue/solution:

<DiagramComponent @key="i.TabId" BlazorDiagram=@(AppState.TabIdAndBlazorDiagrams[i.TabId]) />

Notice that in Blazor when you're looping and creating components, you should specify a @key so that it can accurately calculate the difference.

[JanOfOlympus]

@zHaytam Ahh ok thank you so much I didn't know this before. Many thanks for guidance :) You save me from the deadline tomorrow T0T.