From a8611fee146ca93e1c05f3bf42d6394f89ebc9a7 Mon Sep 17 00:00:00 2001 From: Argo Zhang Date: Fri, 12 Jul 2024 10:38:30 +0800 Subject: [PATCH] feat(DockView): add keep position function (#3840) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix：修改添加panel的添加顺序 * fix：修改添加panel的添加顺序 * chore: bump version 8.0.1 --------- Co-authored-by: zhaijunlei <276318515@qq.com> --- .../BootstrapBlazor.DockView.csproj | 2 +- .../wwwroot/js/dockview-core.esm.js | 1 + .../wwwroot/js/dockview-group.js | 15 ++++++++------- .../wwwroot/js/dockview-panel.js | 3 ++- .../wwwroot/js/dockview-utils.js | 7 ++++++- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj index a692e7a00..4f7a0260e 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj +++ b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj @@ -1,7 +1,7 @@ - 8.0.1-beta09 + 8.0.1 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 index bcb24a579..5cacf0cef 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-core.esm.js @@ -7840,6 +7840,7 @@ class DockviewComponent extends BaseGrid { referenceGroup.model.openPanel(panel, { skipSetActive: options.inactive, skipSetGroupActive: options.inactive, + index: options.position.index }); if (!options.inactive) { this.doSetGroupAndPanelActive(referenceGroup); diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js index 8d90b1f3a..ee7ab4b02 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -24,9 +24,9 @@ const onAddGroup = group => { createGroupActions(group); } -const addGroupWithPanel = (dockview, panel, panels) => { +const addGroupWithPanel = (dockview, panel, panels, index) => { if (panel.groupId) { - addPanelWidthGroupId(dockview, panel) + addPanelWidthGroupId(dockview, panel, index) } else { addPanelWidthCreatGroup(dockview, panel, panels) @@ -34,7 +34,7 @@ const addGroupWithPanel = (dockview, panel, panels) => { deletePanel(dockview, panel) } -const addPanelWidthGroupId = (dockview, panel) => { +const addPanelWidthGroupId = (dockview, panel, index) => { let group = dockview.api.getGroup(panel.groupId) let { position = {}, currentPosition, height, isPackup, isMaximized } = panel.params || {} if (!group) { @@ -65,7 +65,7 @@ const addPanelWidthGroupId = (dockview, panel) => { id: panel.id, title: panel.title, component: panel.component, - position: { referenceGroup: group }, + position: { referenceGroup: group, index: index || 0 }, params: { ...panel.params, isPackup, height, isMaximized, position } }) dockview._panelVisibleChanged?.fire({ title: panel.title, status: true }); @@ -411,9 +411,10 @@ const setWidth = (observerList) => { let dropMenu = dropdown.querySelector('.dropdown-menu') if (voidWidth === 0) { if (tabsContainer.children.length <= 1) return - let lastTab = header.querySelector('.tabs-container>.inactive-tab:not(:has(+ .inactive-tab))') - let aEle = document.createElement('a') - let liEle = document.createElement('li') + const inactiveTabs = header.querySelectorAll('.tabs-container>.inactive-tab') + const lastTab = inactiveTabs[inactiveTabs.length - 1] + const aEle = document.createElement('a') + const liEle = document.createElement('li') aEle.className = 'dropdown-item' liEle.tabWidth = lastTab.offsetWidth; aEle.append(lastTab) diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js index 1570ca277..37d8f1a12 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js @@ -20,7 +20,8 @@ const onRemovePanel = event => { height: event.group.element.parentElement.offsetHeight, top: parseFloat(event.group.element.parentElement.style.top || 0), left: parseFloat(event.group.element.parentElement.style.left || 0) - } + }, + index: event.group.delPanelIndex } } if (event.params.groupInvisible) { diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js index 4dd05e38b..19b39c85c 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -109,13 +109,18 @@ const toggleComponent = (dockview, options) => { const pan = findContentFromPanels(localPanels, p); if (pan === void 0) { const panel = findContentFromPanels(dockview.params.panels, p); - addGroupWithPanel(dockview, panel || p, panels); + const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId) + const indexOfOptions = groupPanels.findIndex(p => p.id == panel.id) + const index = panel && panel.params.index + console.log(index, 'index'); + addGroupWithPanel(dockview, panel || p, panels, index ?? indexOfOptions); } }) localPanels.forEach(item => { let pan = findContentFromPanels(panels, item); if (pan === void 0) { + item.group.delPanelIndex = item.group.panels.findIndex(p => p.id == item.id) dockview.removePanel(item) } })