diff --git a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj index 64ec313b..a1d49187 100644 --- a/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj +++ b/src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj @@ -1,7 +1,7 @@  - 10.0.8-beta06 + 10.0.8 diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js index 411141b0..6364fc7a 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js @@ -30,7 +30,6 @@ DockviewGroupPanel.prototype.getParams = function() { } DockviewGroupPanel.prototype.setParams = function(data) { - console.log('setParameter', data); Object.keys(data).forEach(key => { this.panels.forEach(panel => panel.params[key] = data[key]) }) @@ -71,14 +70,12 @@ DockviewGroupPanelModel.prototype.closePanel = function(panel, triggerVisibleCha } } - if (moveToTemplate) { - if (panel.view.content.element) { - if (panel.titleMenuEle) { - panel.view.content.element.append(panel.titleMenuEle) - } - if (this.accessor.params.template) { - this.accessor.params.template.append(panel.view.content.element) - } + if (panel.view.content.element && moveToTemplate) { + if (panel.titleMenuEle) { + panel.view.content.element.append(panel.titleMenuEle) + } + if (this.accessor.params.template) { + this.accessor.params.template.append(panel.view.content.element) } } } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js index 2f9340e4..06538248 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -76,6 +76,7 @@ const addPanelWidthGroupId = (dockview, panel, index) => { dockview.addPanel({ id: panel.id, title: panel.title, + inactive: true, renderer: panel.renderer, component: panel.component, position: { referenceGroup: group, index: index || 0 }, @@ -112,6 +113,7 @@ const addPanelWidthCreatGroup = (dockview, panel, panels) => { let option = { id: panel.id, title: panel.title, + inactive: true, renderer: panel.renderer, component: panel.component, position: { referenceGroup: group }, diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js index 59602cb3..26929bf3 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js @@ -8,31 +8,30 @@ const onAddPanel = panel => { observePanelActiveChange(panel) } const observePanelActiveChange = panel => { - panel.api.onDidActiveChange(({ isActive }) => { - if (isActive && !panel.group.api.isMaximized()) { - saveConfig(panel.accessor) - if (panel.group.panels.length >= 2){ - panel.group.panels.filter(p => p != panel.group.activePanel && p.renderer == 'onlyWhenVisible').forEach(p => { - appendTemplatePanelEle(p) - }) + panel.api.onDidVisibilityChange(({ isVisible }) => { + const dockview = panel.accessor; + if (dockview._isDisposed) return; + const renderer = dockview.params.options.renderer; + if (renderer === 'onlyWhenVisible' && dockview._inited) { + if (isVisible) { + saveConfig(panel.accessor) + const visiblePanels = dockview.groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible)) + dockview._loadTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key)); + } + else { + appendTemplatePanelEle(panel) } } - if (isActive && panel.group.getParams().floatType == 'drawer') { + + if (isVisible && panel.group.getParams().floatType == 'drawer') { setDrawerTitle(panel.group) } - setTimeout(function () { + const handler = setTimeout(function () { + clearTimeout(handler) + if (dockview._isDisposed) return; moveAlwaysRenderPanel(panel) }, 0) }) - panel.api.onDidVisibilityChange(({ isVisible }) => { - const dockview = panel.accessor; - if (dockview.params.options.renderer === 'onlyWhenVisible' && dockview._inited && isVisible) { - setTimeout(function() { - const visiblePanels = dockview.groups.map(g => g.panels.find(p => p.params.isActive) || g.panels.find(p => p.api.isVisible)) - dockview._loadTabs?.fire(visiblePanels.filter(p => Boolean(p)).map(p => p.params.key)); - }, 0) - } - }) } const moveAlwaysRenderPanel = panel => { @@ -176,7 +175,7 @@ const savePanel = (dockview, panel) => { const deletePanel = (dockview, panel) => { const { panels, options } = dockview.params; - let index = panels.indexOf(panel); + let index = panels.findIndex(p => p.params.key === panel.params.key); if (index > -1) { panels.splice(index, 1); } diff --git a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js index e3fa4216..b4e640d5 100644 --- a/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -88,6 +88,10 @@ const initDockview = (dockview, options, template) => { }) const handler = setTimeout(() => { clearTimeout(handler); + if (dockview._isDisposed) { + dockview = null; + return; + } const panels = dockview.panels; const groups = dockview.groups; const delPanelsStr = localStorage.getItem(dockview.params.options.localStorageKey + '-panels'); @@ -133,17 +137,17 @@ const initDockview = (dockview, options, template) => { dockview.groups.forEach(group => { observeGroup(group) }) - dockview.element.querySelector('&>.dv-dockview>.dv-branch-node').addEventListener('click', function(e) { - this.parentElement.querySelectorAll('&>.dv-resize-container-drawer, &>.dv-render-overlay-float-drawer').forEach(item => { + dockview.element.querySelector('&>.dv-dockview>.dv-branch-node')?.addEventListener('click', function(e) { + this.parentElement.querySelectorAll('&>.dv-resize-container-drawer, &>.dv-render-overlay-float-drawer')?.forEach(item => { item.classList.remove('active') }) - this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button').forEach(item => { + this.closest('.bb-dockview').querySelectorAll('&>.bb-dockview-aside>.bb-dockview-aside-button')?.forEach(item => { item.classList.remove('active') }) }) dockview._inited = true; dockview._initialized?.fire(); - }, 100); + }, 0); }) dockview.gridview.onDidChange(event => { @@ -223,7 +227,9 @@ const setWidth = (target, dockview) => { group.panels[0] && group.panels[0].api.setActive() } } - +const cleanUndefined = (obj) => Object.fromEntries( + Object.entries(obj).filter(([, v]) => v != null) +); const toggleComponent = (dockview, options) => { const optionsPanels = getPanelsFromOptions(options); const panels = optionsPanels.filter(p => p.params.visible); @@ -231,8 +237,13 @@ const toggleComponent = (dockview, options) => { panels.forEach(p => { const pan = findContentFromPanels(localPanels, p); if (pan === void 0) { - const panel = findContentFromPanels(dockview.params.panels, p) || p; - panel.params = { ...panel.params, ...p.params }; + const existingPanel = findContentFromPanels(dockview.params.panels, p); + const panel = existingPanel ? + { + ...existingPanel, + ...cleanUndefined(p), + params: { ...existingPanel.params, ...cleanUndefined(p.params) } + } : p; const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId); let indexOfOptions = groupPanels.findIndex(p => p.params.key == panel?.params.key); indexOfOptions = indexOfOptions == -1 ? 0 : indexOfOptions;