refactor(DockView): add closePanel rewrite function

Author: ArgoZhang

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

@@ -1,14 +1,14 @@
-import { DockviewComponent, DockviewGroupPanel, getGridLocation, getRelativeLocation, DockviewEmitter } from "./dockview-core.esm.js"
+import { DockviewComponent, DockviewGroupPanel, DockviewGroupPanelModel, getGridLocation, getRelativeLocation, DockviewEmitter } from "./dockview-core.esm.js"
 import { getConfigFromStorage, saveConfig } from "./dockview-config.js"
 import { disposeGroup, removeDrawerBtn } from "./dockview-group.js"
 
-DockviewComponent.prototype.on = function (eventType, callback) {
+DockviewComponent.prototype.on = function(eventType, callback) {
     this['_' + eventType] = new DockviewEmitter();
     this['_' + eventType].event(callback)
 }
 
 const dispose = DockviewComponent.prototype.dispose;
-DockviewComponent.prototype.dispose = function () {
+DockviewComponent.prototype.dispose = function() {
     this.params.observer?.disconnect();
     this.groups.forEach(group => {
         if (group.mutationObserver) {
@@ -20,28 +20,29 @@ DockviewComponent.prototype.dispose = function () {
 }
 
 const groupDispose = DockviewGroupPanel.prototype.dispose
-DockviewGroupPanel.prototype.dispose = function () {
+DockviewGroupPanel.prototype.dispose = function() {
     disposeGroup(this)
     groupDispose.call(this)
 }
-DockviewGroupPanel.prototype.getParams = function () {
+DockviewGroupPanel.prototype.getParams = function() {
     return this.activePanel?.params || {}
 }
 
-DockviewGroupPanel.prototype.setParams = function (data) {
+DockviewGroupPanel.prototype.setParams = function(data) {
+    console.log('setParameter', data);
     Object.keys(data).forEach(key => {
         this.panels.forEach(panel => panel.params[key] = data[key])
     })
 }
 
-DockviewGroupPanel.prototype.removePropsOfParams = function (keys) {
+DockviewGroupPanel.prototype.removePropsOfParams = function(keys) {
     return (keys instanceof Array)
         ? keys.map(key => this.panels.forEach(panel => delete panel.params[key]))
         : typeof keys == 'string' ? this.panels.forEach(panel => delete panel.params[keys]) : false
 }
 
 const removeGroup = DockviewComponent.prototype.removeGroup
-DockviewComponent.prototype.removeGroup = function (...args) {
+DockviewComponent.prototype.removeGroup = function(...args) {
     if (this.isClearing) {
         return removeGroup.apply(this, args)
     }
@@ -70,29 +71,31 @@ DockviewComponent.prototype.removeGroup = function (...args) {
     }
 }
 
-const removePanel = DockviewComponent.prototype.removePanel
-DockviewComponent.prototype.removePanel = function (...args) {
-    const panel = args[0], moveToTemplate = args[1]
+const closePanel = DockviewGroupPanelModel.prototype.closePanel;
+DockviewGroupPanelModel.prototype.closePanel = function(panel) {
+    console.log(panel);
     if (!panel.group.locked) {
-        removePanel.apply(this, args)
-        if (!this.isClearing) {
-            this._panelVisibleChanged?.fire({ key: panel.params.key, status: false });
+        closePanel.call(this, panel);
+        if (!this.accessor.isClearing) {
+            this.accessor._panelVisibleChanged?.fire({ key: panel.params.key, status: false });
         }
     }
+
+    const moveToTemplate = !this.accessor.firstLoad;
     if (moveToTemplate) {
         if (panel.view.content.element) {
             if (panel.titleMenuEle) {
                 panel.view.content.element.append(panel.titleMenuEle)
             }
-            if (this.params.template) {
-                this.params.template.append(panel.view.content.element)
+            if (this.accessor.params.template) {
+                this.accessor.params.template.append(panel.view.content.element)
             }
         }
     }
 }
 
 const setVisible = DockviewComponent.prototype.setVisible
-DockviewComponent.prototype.setVisible = function (...args) {
+DockviewComponent.prototype.setVisible = function(...args) {
     setVisible.apply(this, args)
     const branch = getBranchByGroup(args[0])
     const { orientation, splitview: { sashes } } = branch

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

@@ -97,7 +97,7 @@ const initDockview = (dockview, options, template) => {
                 panels.forEach(panel => {
                     const visible = panel.params.visible
                     if (!visible) {
-                        dockview.removePanel(panel)
+                        panel.group.model.closePanel(panel)
                     }
                     dockview._panelVisibleChanged?.fire({ key: panel.params.key, status: visible });
                 })
@@ -261,8 +261,7 @@ const toggleComponent = (dockview, options) => {
         if (pan === void 0) {
             item.group.delPanelIndex = item.group.panels.findIndex(p => p.params.key == item.params.key);
             const group = item.group;
-            const moveToTemplate = !dockview.firstLoad;
-            dockview.removePanel(item, moveToTemplate)
+            group.model.closePanel(item)
             if (group.panels.length === 0) {
                 dockview.setVisible(group, false)
             }