When I use ContentLoad.Init the same DiagramView object is rendered in every tab. It doesn't crash on resize, but I think that is because the single DiagramVeiw is never disposed.
It actually took a good bit of effort and refactoring to have a unique diagramView object in each tab. I save and load the diagramView data (xml string) in the tab events. This doesn't seem right/good, but it works for the time being.
This is some of my code:
<SfTab ID="Tab" LoadOn="ContentLoad.Init" EnablePersistence="true" ShowCloseButton="true" Height="100%" @ref="TabObj">
@* <SfTab ID="Tab" EnablePersistence="true" ShowCloseButton="true" Height="100%" @ref="TabObj"> *@
<TabEvents Selected="OnTabSelected" Selecting="OnTabSelecting" Removing="OnTabRemoving"></TabEvents>
<TabItems>
@foreach (var tab in DynamicTabs)
{
var currentTab = tab; // Local capture
<TabItem @key="currentTab.Id">
<ChildContent>
<TabHeader Text="@currentTab.Title"></TabHeader>
</ChildContent>
<ContentTemplate>
<div style="height: 100%; width: 100%;">
<DiagramViewComponent @ref="currentTab.DiagramComponentRef" Title="@currentTab.Id" @key="@currentTab.Id" />
</div>
</ContentTemplate>
</TabItem>
}
</TabItems>
</SfTab>
@code {
public class DynamicTabData
{
public string Id { get; set; } = Guid.NewGuid().ToString();
public string Title { get; set; }
public DiagramViewComponent DiagramComponentRef { get; set; }
}
....
private async Task OnTabSelected(SelectEventArgs args)
{
// args.IsInteracted is true ONLY if the user clicked the tab
if (args.IsInteracted)
{
await OutputService.WriteLineAsync($"TabComponent: tab selected {args.SelectedIndex}");
string xml = DiagramStateService.LoadDiagramFromString(args.SelectedIndex);
if(xml != string.Empty)
{
DynamicTabs[args.SelectedIndex].DiagramComponentRef.GetDiagramView().Diagram.LoadFromString(xml, MindFusion.Diagramming.SaveToStringFormat.Xml);
}
}
}
private async Task OnTabSelecting(SelectingEventArgs args)
{
// This fires BEFORE the tab switches
// Save the current tab's state before exiting
var previousIndex = args.PreviousIndex;
if (previousIndex >= 0 && previousIndex < DynamicTabs.Count)
{
var exitingTab = DynamicTabs[previousIndex];
if (exitingTab?.DiagramComponentRef != null)
{
var diagramView = exitingTab.DiagramComponentRef.GetDiagramView();
if (diagramView?.Diagram != null)
{
// Optionally save as string for serialization
var diagramString = diagramView.Diagram.SaveToString(MindFusion.Diagramming.SaveToStringFormat.Xml, true);
DiagramStateService.SaveDiagramToString(previousIndex, diagramString);
await OutputService.WriteLineAsync($"TabComponent: Saved state for tab: {exitingTab.Title}");
}
}
}
}
Thanks, David
Pages: [1] 
Drag and drop from native HTML element to DiagramView (Read 418 times)
