refactor(DockView): update reset width logic (#3832)

* refactor: 删除moveGroupOrPanel的重写 * refactor: doAddGroup添加targetIndex参数 * refactor: 修改拖拽group(有多个Panel)时addView的size参数 * refactor：完善显示隐藏时保存本地 * refactor: 代码格式化 * refactor: 增加资源销毁逻辑 * refactor: 增加 _inited 变量 * refactor: 重构代码逻辑 * fix：修正floatingGroup的初始化位置，修复切换节点显示异常 * chore: bump version 8.0.1-beta09 * refactor: 代码格式化 * refactor: 重构代码 * refactor: 代码格式化 * refactor: 重构代码 * refactor: 重构代码 --------- Co-authored-by: zhaijunlei <276318515@qq.com>
dotnetcore · Jul 11, 2024 · 1c265e2 · 1c265e2
1 parent ebdb125
commit 1c265e2
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 153 deletions.
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>8.0.1-beta07</Version>
+    <Version>8.0.1-beta09</Version>
   </PropertyGroup>
 
   <PropertyGroup>

diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-config.js
@@ -26,7 +26,7 @@ const getConfig = options => {
 
 const getConfigFromStorage = options => {
     const jsonString = localStorage.getItem(options.localStorageKey);
-    return jsonString ? fixObject(JSON.parse(jsonString)) : null;
+    return jsonString ? fixObject(renewConfigFromOptions(JSON.parse(jsonString), options)) : null;
 }
 
 const getConfigFromOptions = options => options.layoutConfig ? getConfigFromLayoutString(options) : getConfigFromContent(options);
@@ -46,6 +46,97 @@ const getConfigFromLayoutString = options => {
     return fixObject(config);
 }
 
+const renewConfigFromOptions = (config, options) => {
+    const optionPanels = getPanelsFromOptions(options)
+    const localPanels = Object.values(config.panels)
+    optionPanels.forEach(optionPanel => {// 在结构中添加
+        const panel = localPanels.find(localPanel => localPanel.params.key == optionPanel.params.key)
+        if(panel){//找到了就替换数据
+            optionPanel.params = {
+                ...panel.params,
+                ...optionPanel.params
+            }
+            config.panels[panel.id] = optionPanel
+        }
+        else {// 本地没有Panel就需要添加
+            const delPanels = JSON.parse(localStorage.getItem(options.localStorageKey + '-panels'))
+            if(delPanels?.find(delPanel => delPanel.params.key == optionPanel.params.key)) return
+            let index = optionPanels.findIndex(item => item.id == optionPanel.id)
+            let brotherPanel, brotherType
+            if(index == 0){
+                brotherPanel = optionPanels[1]
+                brotherType = 'after'
+            }
+            else {
+                brotherPanel = optionPanels[index - 1]
+                brotherType = 'front'
+            }
+            config.panels[optionPanel.id] = optionPanel
+            const brotherId = Object.keys(config.panels).find(key => config.panels[key].params.key == brotherPanel.params.key)
+            addPanel(config.grid.root, optionPanel, brotherPanel, brotherId, brotherType)
+
+        }
+    })
+    localPanels.forEach(localPanel => {
+        const panel = optionPanels.find(optionPanel => optionPanel.params.key == localPanel.params.key)
+        if(panel){
+
+        }
+        else {// 在options里没有, 就需要在localPanels删除
+            delete  config.panels[localPanel.id] && config.panels[localPanel.id]
+            removePanel(config.grid.root, localPanel)
+        }
+    })
+    return config
+}
+
+const addPanel = (branch, panel, brotherPanel, brotherId, brotherType) => {
+    if(brotherPanel.params.parentType == 'group'){
+        if(branch.type == 'leaf'){
+            if(branch.data.views.includes(brotherId)){
+                branch.data.views.push(panel.id)
+            }
+        }
+        else if(branch.type == 'branch') {
+            branch.data.forEach(item => {
+                addPanel(item, panel, brotherPanel)
+            })
+        }
+    }
+    else {
+        if(branch.type == 'branch' && branch.data[0].type == 'leaf'){
+            if(branch.data.find(leaf => leaf.data.views.includes(brotherId))){
+                branch.data.push({
+                    data: {
+                        activeView: panel.id,
+                        id: Date.now() + '',
+                        views: [panel.id]
+                    },
+                    size: branch.data.reduce((pre, cur) => pre + cur.size, 0)/branch.data.length,
+                    type: 'leaf'
+                })
+            }
+        }
+        else {
+            branch.data.forEach(item => {
+                addPanel(item, panel, brotherPanel)
+            })
+        }
+    }
+}
+
+const removePanel = (branch, panel, parent) => {
+    if(branch.type == 'leaf'){
+        branch.data.views = branch.data.views.filter(id => id != panel.id)
+        parent && (parent.data = parent.data.filter(child => child.data.views.length > 0))
+    }
+    else if(branch.type == 'branch') {
+        branch.data.forEach(item => {
+            removePanel(item, panel, branch)
+        })
+    }
+}
+
 const getConfigFromContent = options => {
     const { width, height } = { width: 800, height: 600 };
     const getGroupId = getGroupIdFunc()
@@ -152,7 +243,7 @@ const getLeafNode = (contentItem, size, boxSize, parent, panels, getGroupId) =>
 }
 
 const saveConfig = dockview => {
-    if (dockview.params.options.enableLocalStorage) {
+    if (dockview.params.options.enableLocalStorage && dockview._inited === true) {
         const json = dockview.toJSON()
         localStorage.setItem(dockview.params.options.localStorageKey, JSON.stringify(json));
     }

diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-content.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-content.js
@@ -10,8 +10,8 @@
 
         if (template) {
             this._element = key
-                ? template.querySelector(`[data-bb-key=${key}]`)
-                : (template.querySelector(`#${this.option.id}`) ?? template.querySelector(`[data-bb-title=${title}]`))
+                ? template.querySelector(`[data-bb-key="${key}"]`)
+                : (template.querySelector(`#${this.option.id}`) ?? template.querySelector(`[data-bb-title="${title}]"`))
         }
 
         if (titleClass) {

diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js
@@ -8102,7 +8102,7 @@ class DockviewComponent extends BaseGrid {
             if (!removedPanel) {
                 throw new Error(`No panel with id ${sourceItemId}`);
             }
-            if (sourceGroup.model.size === 0) {
+            if (sourceGroup.model.size === 0  && !options.skipRemoveGroup) {
                 // remove the group and do not set a new group as active
                 this.doRemoveGroup(sourceGroup, { skipActive: true });
             }
@@ -8152,7 +8152,7 @@ class DockviewComponent extends BaseGrid {
                 const destinationGroupSize = this.getGroupShape(destinationGroup, destinationTarget)
                 // const size = (sourceGroupSize < destinationGroupSize / 2) ? sourceGroupSize : (destinationGroupSize / 2)
                 const size = destinationGroupSize / 2
-                this.movingLock(() => this.doAddGroup(targetGroup, location, size));
+                this.movingLock(() => this.doAddGroup(targetGroup, location, size, referenceLocation.slice(-1)[0]));
                 this.doSetGroupAndPanelActive(targetGroup);
             }
             else {
@@ -8251,7 +8251,9 @@ class DockviewComponent extends BaseGrid {
             }
             const referenceLocation = getGridLocation(to.element);
             const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, target);
-            this.gridview.addView(from, Sizing.Distribute, dropLocation);
+            let size = this.getGroupShape(to, target)
+            size = size ? size / 2 : size
+            this.gridview.addView(from, size || Sizing.Distribute, dropLocation);
             from.panels.forEach((panel) => {
                 this._onDidMovePanel.fire({ panel });
             });

diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js
@@ -73,129 +73,3 @@ DockviewComponent.prototype.removePanel = function (...args) {
         }
     }
 }
-
-DockviewComponent.prototype.moveGroupOrPanel = function moveGroupOrPanel(options) {
-    var _a;
-    const destinationGroup = options.to.group;
-    const sourceGroupId = options.from.groupId;
-    const sourceItemId = options.from.panelId;
-    const destinationTarget = options.to.position;
-    const destinationIndex = options.to.index;
-    const sourceGroup = sourceGroupId
-        ? (_a = this._groups.get(sourceGroupId)) === null || _a === void 0 ? void 0 : _a.value
-        : undefined;
-    if (!sourceGroup) {
-        throw new Error(`Failed to find group id ${sourceGroupId}`);
-    }
-    if (sourceItemId === undefined) {
-        /**
-         * Moving an entire group into another group
-         */
-        this.moveGroup({
-            from: { group: sourceGroup },
-            to: {
-                group: destinationGroup,
-                position: destinationTarget,
-            },
-        });
-        return;
-    }
-    if (!destinationTarget || destinationTarget === 'center') {
-        /**
-         * Dropping a panel within another group
-         */
-        const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
-            skipSetActive: false,
-            skipSetActiveGroup: true,
-        }));
-        if (!removedPanel) {
-            throw new Error(`No panel with id ${sourceItemId}`);
-        }
-        if (sourceGroup.model.size === 0 && !options.skipRemoveGroup) {
-            // remove the group and do not set a new group as active
-            this.doRemoveGroup(sourceGroup, { skipActive: true });
-        }
-        this.movingLock(() => destinationGroup.model.openPanel(removedPanel, {
-            index: destinationIndex,
-            skipSetGroupActive: true,
-        }));
-        this.doSetGroupAndPanelActive(destinationGroup);
-        this._onDidMovePanel.fire({
-            panel: removedPanel,
-        });
-    }
-    else {
-        /**
-         * Dropping a panel to the extremities of a group which will place that panel
-         * into an adjacent group
-         */
-        const referenceLocation = getGridLocation(destinationGroup.element);
-        const targetLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-        if (sourceGroup.size < 2) {
-            /**
-             * If we are moving from a group which only has one panel left we will consider
-             * moving the group itself rather than moving the panel into a newly created group
-             */
-            const [targetParentLocation, to] = tail(targetLocation);
-            if (sourceGroup.api.location.type === 'grid') {
-                const sourceLocation = getGridLocation(sourceGroup.element);
-                const [sourceParentLocation, from] = tail(sourceLocation);
-                if (sequenceEquals(sourceParentLocation, targetParentLocation)) {
-                    // special case when 'swapping' two views within same grid location
-                    // if a group has one tab - we are essentially moving the 'group'
-                    // which is equivalent to swapping two views in this case
-                    this.gridview.moveView(sourceParentLocation, from, to);
-                    return;
-                }
-            }
-            // source group will become empty so delete the group
-            const targetGroup = this.movingLock(() => this.doRemoveGroup(sourceGroup, {
-                skipActive: true,
-                skipDispose: true,
-            }));
-            // after deleting the group we need to re-evaulate the ref location
-            const updatedReferenceLocation = getGridLocation(destinationGroup.element);
-            const location = getRelativeLocation(this.gridview.orientation, updatedReferenceLocation, destinationTarget);
-            this.movingLock(() => this.doAddGroup(targetGroup, location));
-            this.doSetGroupAndPanelActive(targetGroup);
-        }
-        else {
-            /**
-             * The group we are removing from has many panels, we need to remove the panels we are moving,
-             * create a new group, add the panels to that new group and add the new group in an appropiate position
-             */
-            const removedPanel = this.movingLock(() => sourceGroup.model.removePanel(sourceItemId, {
-                skipSetActive: false,
-                skipSetActiveGroup: true,
-            }));
-            if (!removedPanel) {
-                throw new Error(`No panel with id ${sourceItemId}`);
-            }
-            const dropLocation = getRelativeLocation(this.gridview.orientation, referenceLocation, destinationTarget);
-            const group = this.createGroupAtLocation(dropLocation);
-            this.movingLock(() => group.model.openPanel(removedPanel, {
-                skipSetGroupActive: true,
-            }));
-            this.doSetGroupAndPanelActive(group);
-        }
-    }
-}
-
-const tail = arr => {
-    if (arr.length === 0) {
-        throw new Error('Invalid tail call');
-    }
-    return [arr.slice(0, arr.length - 1), arr[arr.length - 1]];
-}
-
-const sequenceEquals = (arr1, arr2) => {
-    if (arr1.length !== arr2.length) {
-        return false;
-    }
-    for (let i = 0; i < arr1.length; i++) {
-        if (arr1[i] !== arr2[i]) {
-            return false;
-        }
-    }
-    return true;
-}
diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
@@ -14,18 +14,7 @@ const onAddGroup = group => {
     })
 
     const dockview = group.api.accessor;
-    const { floatingGroups = [] } = dockview;
-    let floatingGroup = floatingGroups.find(item => item.data.id === group.id)
-    if (floatingGroup) {
-        let { width, height, top, left } = floatingGroup.position
-        setTimeout(() => {
-            let style = group.element.parentElement.style
-            style.width = width + 'px'
-            style.height = height + 'px'
-            style.top = top + 'px'
-            style.left = left + 'px'
-        }, 0)
-    }
+
     group.header.onDrop(() => {
         saveConfig(dockview)
     })
@@ -92,14 +81,14 @@ const addPanelWidthCreatGroup = (dockview, panel, panels) => {
     else {
         let targetPanel
         for (let i = 0, len = panels.length; i < len; i++) {
-            if(panels[i]?.id == panel.id){
-                if(i == len - 1){
+            if (panels[i]?.id === panel.id) {
+                if (i == len - 1) {
                     targetPanel = panels[i - 1]
                     group = dockview.groups.find(g => findContentFromPanels(g.panels, targetPanel))
                     direction = getOrientation(dockview.gridview.root, group) === 'VERTICAL' ? 'below' : 'right'
                     break
                 }
-                else{
+                else {
                     targetPanel = panels[i + 1]
                     group = dockview.groups.find(g => findContentFromPanels(g.panels, targetPanel))
                     direction = getOrientation(dockview.gridview.root, group) === 'VERTICAL' ? 'above' : 'left'
@@ -115,7 +104,7 @@ const addPanelWidthCreatGroup = (dockview, panel, panels) => {
         position: { referenceGroup: group },
         params: { ...panel.params, isPackup, height, isMaximized, position }
     }
-    if(direction) option.position.direction = direction
+    if (direction) option.position.direction = direction
     dockview.addPanel(option);
     dockview._panelVisibleChanged?.fire({ title: panel.title, status: true });
 }

diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
@@ -1,4 +1,5 @@
-import { getIcon } from "./dockview-icon.js"
+import { saveConfig } from "./dockview-config.js";
+import { getIcon } from "./dockview-icon.js"
 
 const onAddPanel = panel => {
     updateCloseButton(panel);
@@ -109,6 +110,10 @@ const savePanel = (dockview, panel) => {
     panels.push(panel)
     if (options.enableLocalStorage) {
         localStorage.setItem(`${options.localStorageKey}-panels`, JSON.stringify(panels))
+        const timer = setTimeout(() => {
+            clearTimeout(timer)
+            saveConfig(dockview)
+        }, 0)
     }
 }
 
@@ -120,6 +125,7 @@ const deletePanel = (dockview, panel) => {
     }
     if (options.enableLocalStorage) {
         localStorage.setItem(`${options.localStorageKey}-panels`, JSON.stringify(panels))
+        saveConfig(dockview)
     }
 }