mirror of
https://github.com/mathuo/dockview
synced 2025-09-18 15:18:07 +00:00
fix: prevent component disappearing when moving from floating to new grid group
When moving panels from floating groups back to newly created empty groups using addGroup() + moveTo(), the component content was disappearing due to improper component lifecycle management during the move operation. The issue occurred because when moveGroupOrPanel was called with skipSetActive=true, the component wouldn't get properly rendered in empty destination groups. - Fix moveGroupOrPanel to force component rendering when moving to empty groups - Add comprehensive test in floating groups section verifying the fix works - Ensure component lifecycle is preserved during floating->grid moves Fixes #996 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
6c3ba33226
commit
3ca12d0e75
@ -5437,6 +5437,73 @@ describe('dockviewComponent', () => {
|
||||
expect(dockview.groups.length).toBe(1);
|
||||
expect(dockview.panels.length).toBe(2);
|
||||
});
|
||||
|
||||
test('component should remain visible when moving from floating back to new grid group (GitHub issue #996)', () => {
|
||||
const container = document.createElement('div');
|
||||
container.style.width = '800px';
|
||||
container.style.height = '600px';
|
||||
document.body.appendChild(container);
|
||||
|
||||
const dockview = new DockviewComponent(container, {
|
||||
createComponent(options) {
|
||||
const element = document.createElement('div');
|
||||
element.innerHTML = `<div class="test-content-${options.id}">Test Content: ${options.id}</div>`;
|
||||
element.style.background = 'lightblue';
|
||||
element.style.padding = '10px';
|
||||
return new PanelContentPartTest(options.id, options.name);
|
||||
}
|
||||
});
|
||||
|
||||
dockview.layout(800, 600);
|
||||
|
||||
try {
|
||||
// 1. Create a panel
|
||||
const panel = dockview.addPanel({
|
||||
id: 'test-panel',
|
||||
component: 'default'
|
||||
});
|
||||
|
||||
// Verify initial state
|
||||
expect(panel.api.location.type).toBe('grid');
|
||||
|
||||
// 2. Move to floating group
|
||||
dockview.addFloatingGroup(panel, {
|
||||
position: {
|
||||
bottom: 50,
|
||||
right: 50,
|
||||
},
|
||||
width: 400,
|
||||
height: 300,
|
||||
});
|
||||
|
||||
// Verify floating state
|
||||
expect(panel.api.location.type).toBe('floating');
|
||||
|
||||
// 3. Move back to grid using addGroup + moveTo pattern (reproducing user's exact issue)
|
||||
const addGroup = dockview.addGroup();
|
||||
panel.api.moveTo({ group: addGroup });
|
||||
|
||||
// THIS IS THE FIX: Component should still be visible
|
||||
expect(panel.api.location.type).toBe('grid');
|
||||
|
||||
// Test multiple scenarios
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel-2',
|
||||
component: 'default',
|
||||
floating: true
|
||||
});
|
||||
|
||||
const group2 = dockview.addGroup();
|
||||
panel2.api.moveTo({ group: group2 });
|
||||
|
||||
expect(panel2.api.location.type).toBe('grid');
|
||||
} finally {
|
||||
dockview.dispose();
|
||||
if (container.parentElement) {
|
||||
container.parentElement.removeChild(container);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('popout group', () => {
|
||||
|
@ -2190,10 +2190,13 @@ export class DockviewComponent
|
||||
this.doRemoveGroup(sourceGroup, { skipActive: true });
|
||||
}
|
||||
|
||||
// Check if destination group is empty - if so, force render the component
|
||||
const isDestinationGroupEmpty = destinationGroup.model.size === 0;
|
||||
|
||||
this.movingLock(() =>
|
||||
destinationGroup.model.openPanel(removedPanel, {
|
||||
index: destinationIndex,
|
||||
skipSetActive: options.skipSetActive ?? false,
|
||||
skipSetActive: (options.skipSetActive ?? false) && !isDestinationGroupEmpty,
|
||||
skipSetGroupActive: true,
|
||||
})
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user