From 7631e20e5c3008d9c5d85ce9e6de2c834f2f5ccb Mon Sep 17 00:00:00 2001 From: zhaijunlei <276318515@qq.com> Date: Tue, 16 Jul 2024 11:11:38 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=B7=E6=96=B0?= =?UTF-8?q?=E8=AE=B0=E4=B8=8D=E4=BD=8F=E6=BF=80=E6=B4=BB=E7=9A=84panel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wwwroot/js/dockview-extensions.js | 2 +- .../wwwroot/js/dockview-group.js | 2 +- .../wwwroot/js/dockview-panel.js | 5 + .../wwwroot/js/dockview-utils.js | 100 ++++++++++-------- 4 files changed, 62 insertions(+), 47 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js index ac789f50d96..a2f663d08a5 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js @@ -9,7 +9,7 @@ DockviewComponent.prototype.on = function (eventType, callback) { const dispose = DockviewComponent.prototype.dispose; DockviewComponent.prototype.dispose = function () { - this.params.observer.disconnect(); + this.params.observer?.disconnect(); saveConfig(this); dispose.call(this); } 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 2f5e3e8a371..e1a8c7b60d7 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -204,7 +204,7 @@ const getMaximizeState = (group) => { const type = group.model.location.type return type === 'grid' ? group.api.isMaximized() - : (type === 'floating' ? group.activePanel.params.isMaximized : false) + : (type === 'floating' ? group.activePanel?.params.isMaximized : false) } const showFloat = (dockview, group) => { 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 5a9bb1612c5..5a0deb4af5c 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js @@ -4,6 +4,11 @@ import { getIcon } from "./dockview-icon.js" const onAddPanel = panel => { updateCloseButton(panel); updateTitle(panel); + panel.api.onDidActiveChange(({isActive}) => { + if(isActive && panel.group.panels.length > 1) { + saveConfig(panel.accessor) + } + }) } const onRemovePanel = event => { 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 17dd2761db4..fabaec79e93 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -90,8 +90,9 @@ const initDockview = (dockview, options, template) => { dockview._inited = true; dockview._initialized?.fire() dockview.groups.forEach(group => { + // setWidth(group.model.header.element, dockview) if (dockview.params.observer === null) { - dockview.params.observer = new ResizeObserver(observerList => setWidth(observerList, dockview)); + dockview.params.observer = new ResizeObserver(observerList => resizeObserverHandle(observerList, dockview)); } dockview.params.observer.observe(group.header.element) dockview.params.observer.observe(group.header.tabContainer) @@ -113,52 +114,61 @@ const initDockview = (dockview, options, template) => { dockview._rootDropTarget.onDrop(() => { saveConfig(dockview) }) + } -const setWidth = (observerList, dockview) => { - setTimeout(() => { - observerList.forEach(({ target }) => { - let header, tabsContainer - if (target.classList.contains('tabs-container')) { - header = target.parentElement - tabsContainer = target - } - else { - header = target - tabsContainer = header.querySelector('.tabs-container') - } - if(header.offsetWidth == 0) return - let voidWidth = header.querySelector('.void-container').offsetWidth - let dropdown = header.querySelector('.right-actions-container>.dropdown') - if (!dropdown) return - let dropMenu = dropdown.querySelector('.dropdown-menu') - if (voidWidth === 0) { - if (tabsContainer.children.length <= 1) return - const inactiveTabs = header.querySelectorAll('.tabs-container>.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) - liEle.append(aEle) - dropMenu.insertAdjacentElement("afterbegin", liEle) - if(lastTab.classList.contains('active-tab')){ - const group = dockview.groups.find(g => g.element === header.parentElement) - group.panels[0].api.setActive() - } - } - else { - let firstLi = dropMenu.querySelector('li:has(.tab)') || dropMenu.children[0] - if (firstLi) { - let firstTab = firstLi.querySelector('.tab') - if (voidWidth > firstLi.tabWidth || tabsContainer.children.length == 0) { - firstTab && tabsContainer.append(firstTab) - firstLi.remove() - } - } + +const resizeObserverHandle = (observerList, dockview) => { + observerList.forEach(({ target }) => { + setWidth(target, dockview) + }) +} +const setWidth = (target, dockview) => { + let header, tabsContainer + if (target.classList.contains('tabs-container')) { + header = target.parentElement + tabsContainer = target + } + else { + header = target + tabsContainer = header.querySelector('.tabs-container') + } + if(header.offsetWidth == 0) return + let voidWidth = header.querySelector('.void-container').offsetWidth + let dropdown = header.querySelector('.right-actions-container>.dropdown') + if (!dropdown) return + let dropMenu = dropdown.querySelector('.dropdown-menu') + if (voidWidth === 0) { + if (tabsContainer.children.length <= 1) return + const inactiveTabs = header.querySelectorAll('.tabs-container>.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) + liEle.append(aEle) + dropMenu.insertAdjacentElement("afterbegin", liEle) + // if(lastTab.classList.contains('active-tab')){ + // const group = dockview.groups.find(g => g.element === header.parentElement) + // group.panels[0].api.setActive() + // } + } + else { + let firstLi = dropMenu.querySelector('li:has(.tab)') || dropMenu.children[0] + if (firstLi) { + let firstTab = firstLi.querySelector('.tab') + if (voidWidth > firstLi.tabWidth || tabsContainer.children.length == 0) { + firstTab && tabsContainer.append(firstTab) + firstLi.remove() } - }) - }, 0); + } + } + setTimeout(() => { + if([...tabsContainer.children].every(tab => !tab.classList.contains('active-tab'))){ + const group = dockview.groups.find(g => g.element === header.parentElement) + group.panels[0].api.setActive() + } + }, 100); } const toggleComponent = (dockview, options) => { From 92985d04d87b586b3d4c70caaa25b046f0efab55 Mon Sep 17 00:00:00 2001 From: zhaijunlei <276318515@qq.com> Date: Tue, 16 Jul 2024 16:25:24 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=20=E4=BF=AE=E5=A4=8D=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E6=94=B6=E8=B5=B7=E5=88=97=E8=A1=A8=E9=87=8C=E7=9A=84?= =?UTF-8?q?tab=E6=97=B6index=E4=B8=8D=E5=90=8C=E6=AD=A5=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wwwroot/js/dockview-group.js | 21 +++++++++++++------ .../wwwroot/js/dockview-utils.js | 3 ++- 2 files changed, 17 insertions(+), 7 deletions(-) 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 e1a8c7b60d7..5c8277bd9f8 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js @@ -249,12 +249,21 @@ const addActionEvent = group => { close(group, actionContainer, true); } else if (e.target.classList.contains('dv-default-tab-content')) { - const liEle = e.target.closest('li'); - const tabEle = tabsContainer.children[0] - liEle.tabWidth = tabEle.offsetWidth; - - liEle.children[0].appendChild(tabEle); - tabsContainer.append(e.target.closest('.tab')); + // const liEle = e.target.closest('li'); + // const tabEle = tabsContainer.children[0] + // liEle.tabWidth = tabEle.offsetWidth; + + // liEle.children[0].appendChild(tabEle); + const targetTabEle = e.target.closest('.tab') + // tabsContainer.append(targetTabEle); + group.api.accessor.moveGroupOrPanel({ + from: { groupId: group.id, panelId: group.panels.find(p => p.view.tab.element.parentElement == targetTabEle).id }, + to: { + group, + position: 'center', + index: 0, + }, + }); } }); } 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 fabaec79e93..33902937100 100644 --- a/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js +++ b/src/Extensions/Components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js @@ -179,7 +179,8 @@ const toggleComponent = (dockview, options) => { if (pan === void 0) { const panel = findContentFromPanels(dockview.params.panels, p); const groupPanels = panels.filter(p1 => p1.params.parentId == p.params.parentId) - const indexOfOptions = groupPanels.findIndex(p => p.id == panel.id) + let indexOfOptions = groupPanels.findIndex(p => p.params.key == panel.params.key) + indexOfOptions = indexOfOptions == -1 ? 0 : indexOfOptions const index = panel && panel.params.index addGroupWithPanel(dockview, panel || p, panels, index ?? indexOfOptions); } From e060fff6343f8040cc25c38aee335ecb968892ef Mon Sep 17 00:00:00 2001 From: Argo-AscioTech Date: Tue, 16 Jul 2024 19:42:39 +0800 Subject: [PATCH 3/3] chore: bump version 8.0.4 --- .../BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj b/src/Extensions/Components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj index 43571961782..f43e56de693 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.3 + 8.0.4