Skip to content

feat(DockView): add onPanelVisibleChanged event #981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 8 commits into from
Apr 23, 2026
Merged

feat(DockView): add onPanelVisibleChanged event #981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
426edeb
revert: 撤销 IAsyncDisposable 接口实现
ArgoZhang Apr 20, 2026
060ffbb
fix: 修复切换数据添加的panel的标题不对
zhaijunlei955 Apr 20, 2026
4f6cf76
refactor：优化onDidVisibilityChange回调
zhaijunlei955 Apr 20, 2026
0815046
fix: 修复切换数据节点Template有多余的DOM
zhaijunlei955 Apr 20, 2026
5c58226
fix: 修复切换数据时activePanel不对
zhaijunlei955 Apr 20, 2026
e16923c
fix: 修复切换数据节点Template有多余的DOM
zhaijunlei955 Apr 20, 2026
082d3a1
Merge branch 'master' into dev-only-visible
ArgoZhang Apr 20, 2026
c9ba424
chore: bump version 10.0.8
ArgoZhang Apr 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/BootstrapBlazor.DockView/BootstrapBlazor.DockView.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">

<PropertyGroup>
<Version>10.0.8-beta06</Version>
<Version>10.0.8</Version>
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PR metadata is inconsistent (description says fixes #980, while the referenced PR text says fixes #979), and this diff also changes the package version from 10.0.8-beta06 to 10.0.8. If a stable release is intended, please align the issue reference(s) and call out the version bump explicitly; otherwise consider keeping the pre-release suffix for a feature PR.

Copilot uses AI. Check for mistakes.
</PropertyGroup>

<PropertyGroup>
Expand Down
15 changes: 6 additions & 9 deletions src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-extensions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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])
})
Expand Down Expand Up @@ -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)
}
}
}
Expand Down
2 changes: 2 additions & 0 deletions src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-group.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -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 },
Expand Down
37 changes: 18 additions & 19 deletions src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-panel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,30 @@ const onAddPanel = panel => {
observePanelActiveChange(panel)
}
const observePanelActiveChange = panel => {
Comment on lines 8 to 10
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

observePanelActiveChange no longer observes “active” changes (it now subscribes to onDidVisibilityChange). Renaming this helper (and its call site) to reflect visibility semantics would make the code easier to follow and reduce confusion for future maintenance.

Suggested change
observePanelActiveChange(panel)
}
const observePanelActiveChange = panel => {
observePanelVisibilityChange(panel)
}
const observePanelVisibilityChange = panel => {

Copilot uses AI. Check for mistakes.
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 {
Comment on lines +15 to +21
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

saveConfig is now only triggered on visibility changes when renderer === 'onlyWhenVisible'. For renderer === 'partial' or 'always', switching tabs will still change which panel is active/visible, but config won’t be persisted to localStorage anymore (active panel can be lost on reload). Consider saving config on the relevant active/visibility transition regardless of renderer (keeping any maximized/initialization guards as needed).

Suggested change
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 {
if (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 if (renderer === 'onlyWhenVisible') {

Copilot uses AI. Check for mistakes.
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 => {
Expand Down Expand Up @@ -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);
}
Expand Down
25 changes: 18 additions & 7 deletions src/components/BootstrapBlazor.DockView/wwwroot/js/dockview-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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')
Comment on lines +140 to 145
Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The optional chaining here is applied to the result of querySelectorAll, but querySelectorAll always returns a (non-null) NodeList; the real null/undefined risks are this.parentElement and this.closest('.bb-dockview'). As written, this can still throw if parentElement or closest(...) is null. Consider optional-chaining those objects instead (and drop the redundant ?. on querySelectorAll).

Copilot uses AI. Check for mistakes.
})
})
dockview._inited = true;
dockview._initialized?.fire();
}, 100);
}, 0);
})

dockview.gridview.onDidChange(event => {
Expand Down Expand Up @@ -223,16 +227,23 @@ const setWidth = (target, dockview) => {
group.panels[0] && group.panels[0].api.setActive()
}
}

const cleanUndefined = (obj) => Object.fromEntries(
Object.entries(obj).filter(([, v]) => v != null)
Comment on lines +230 to +231
Copy link
Copy Markdown

@sourcery-ai sourcery-ai Bot Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue (bug_risk): Filtering with v != null drops both undefined and null, which changes semantics when null is intentional.

Using v != null here also strips intentional null values, so callers can’t explicitly reset a property to null. If null is meaningful and only undefined should be removed, use v !== undefined instead, or make this behavior explicit in the function’s name/contract.

Copy link

Copilot AI Apr 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cleanUndefined currently filters out both undefined and null values (v != null). If callers use null intentionally (e.g., to reset a param to its default), this merge will silently ignore that update and keep the previous value. If the intent is only to avoid overwriting with undefined, filter with v !== undefined (or rename the helper to reflect “nullish” behavior).

Suggested change
Object.entries(obj).filter(([, v]) => v != null)
Object.entries(obj).filter(([, v]) => v !== undefined)

Copilot uses AI. Check for mistakes.
);
const toggleComponent = (dockview, options) => {
const optionsPanels = getPanelsFromOptions(options);
const panels = optionsPanels.filter(p => p.params.visible);
const localPanels = dockview.panels;
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;
Expand Down
Loading