fix(DockView): wrong position when switch visible

src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.1.14</Version>
+    <Version>9.1.15</Version>
   </PropertyGroup>
 
   <PropertyGroup>

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js

@@ -55,7 +55,8 @@ const renewConfigFromOptions = (config, options) => {
         if (panel) {
             optionPanel.params = {
                 ...panel.params,
-                ...optionPanel.params
+                ...optionPanel.params,
+                visible: panel.params.visible
             }
             config.panels[panel.id] = optionPanel
         }
@@ -197,6 +198,7 @@ const removePanel = (branch, panel, parent) => {
 const getConfigFromContent = options => {
     const { width, height } = { width: 800, height: 600 };
     const getGroupId = getGroupIdFunc()
+    options = filterEmptyContent(options)
     const panels = {}, rootType = options.content[0].type
     const orientation = rootType === 'column' ? 'VERTICAL' : 'HORIZONTAL';
     const root = getTree(options.content[0], { width, height, orientation }, options, panels, getGroupId, options)
@@ -211,7 +213,17 @@ const getGroupIdFunc = () => {
     let currentId = 0;
     return () => `${currentId++}`;
 }
-
+const filterEmptyContent = function(data) {
+    if (!data || typeof data !== 'object') return data;
+
+    if (Array.isArray(data.content)) {
+        data.content = data.content
+            .map(item => filterEmptyContent(item))
+            .filter(item => !(Array.isArray(item.content) && item.content.length === 0));
+    }
+
+    return data;
+}
 const getTree = (contentItem, { width, height, orientation }, parent, panels, getGroupId, options) => {
     const length = parent.content.length;
     const boxSize = orientation === 'HORIZONTAL' ? width : height;
@@ -279,24 +291,22 @@ const getLeafNode = (contentItem, size, boxSize, parent, panels, getGroupId, opt
     const visible = contentItem.visible !== false;
     const data = {
         type: 'leaf',
-        visible,
+        visible: true,
         size: getSize(boxSize, contentItem.width || contentItem.height) || size,
         data: {
             id: getGroupId(),
             activeView: contentItem.id,
             hideHeader: contentItem.showHeader === false,
-            views: visible ? [contentItem.id] : []
+            views: [contentItem.id]
         }
     };
-    if (visible) {
-        panels[contentItem.id] = {
-            id: contentItem.id,
-            title: contentItem.title,
-            renderer: contentItem.renderer || options.renderer,
-            tabComponent: contentItem.componentName,
-            contentComponent: contentItem.componentName,
-            params: { ...contentItem, parentId: parent.id }
-        }
+    panels[contentItem.id] = {
+        id: contentItem.id,
+        title: contentItem.title,
+        renderer: contentItem.renderer || options.renderer,
+        tabComponent: contentItem.componentName,
+        contentComponent: contentItem.componentName,
+        params: { ...contentItem, parentId: parent.id }
     }
     return data;
 }

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js

@@ -97,7 +97,7 @@ const addPanelWidthGroupId = (dockview, panel, index) => {
         renderer: panel.renderer,
         component: panel.component,
         position: { referenceGroup: group, index: index || 0 },
-        params: { ...panel.params, rect, packup }
+        params: { ...panel.params, rect, packup, visible: true }
     })
     dockview._panelVisibleChanged?.fire({ title: panel.title, status: true });
 }

src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js

@@ -91,7 +91,11 @@ const initDockview = (dockview, options, template) => {
             const delPanelsStr = localStorage.getItem(dockview.params.options.localStorageKey + '-panels')
             const delPanels = delPanelsStr && JSON.parse(delPanelsStr) || []
             panels.forEach(panel => {
-                dockview._panelVisibleChanged?.fire({ title: panel.title, status: true });
+                const visible = panel.params.visible
+                if (!visible) {
+                    dockview.removePanel(panel)
+                }
+                dockview._panelVisibleChanged?.fire({ title: panel.title, status: visible });
             })
             delPanels.forEach(panel => {
                 dockview._panelVisibleChanged?.fire({ title: panel.title, status: false });