rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-23 01:45:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #454 from mathuo/447-feature-request-adding-a-gap-around-panels

Browse Source 
work-in-progress: group gaps
This commit is contained in:
mathuo 2024-01-29 22:22:28 +00:00 committed by GitHub
commit 47b691b6b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 81 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/dockview-core/src/__tests__/api/dockviewPanelApi.spec.ts
View File

@ -8,7 +8,7 @@ describe('groupPanelApi', () => {
const accessor: Partial<DockviewComponent> = { const accessor: Partial<DockviewComponent> = {
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
const panelMock = jest.fn<DockviewPanel, []>(() => { const panelMock = jest.fn<DockviewPanel, []>(() => {
@ -44,7 +44,7 @@ describe('groupPanelApi', () => {
const accessor: Partial<DockviewComponent> = { const accessor: Partial<DockviewComponent> = {
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
const groupViewPanel = new DockviewGroupPanel( const groupViewPanel = new DockviewGroupPanel(
<DockviewComponent>accessor, <DockviewComponent>accessor,
@ -74,7 +74,7 @@ describe('groupPanelApi', () => {
const accessor: Partial<DockviewComponent> = { const accessor: Partial<DockviewComponent> = {
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
const groupViewPanel = new DockviewGroupPanel( const groupViewPanel = new DockviewGroupPanel(
<DockviewComponent>accessor, <DockviewComponent>accessor,

34
packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View File

@ -16,7 +16,7 @@ describe('tabsContainer', () => {
return { return {
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -71,7 +71,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -139,7 +139,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -204,7 +204,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -269,7 +269,7 @@ describe('tabsContainer', () => {
id: 'testcomponentid', id: 'testcomponentid',
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
options: {}, options: { parentElement: document.createElement('div') },
}; };
}); });
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>( const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
@ -336,7 +336,7 @@ describe('tabsContainer', () => {
test('left actions', () => { test('left actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
}) as DockviewComponent; }) as DockviewComponent;
@ -402,7 +402,7 @@ describe('tabsContainer', () => {
test('right actions', () => { test('right actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
}) as DockviewComponent; }) as DockviewComponent;
@ -468,7 +468,7 @@ describe('tabsContainer', () => {
test('that a tab will become floating when clicked if not floating and shift is selected', () => { test('that a tab will become floating when clicked if not floating and shift is selected', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -514,21 +514,21 @@ describe('tabsContainer', () => {
}, },
{ inDragMode: true } { inDragMode: true }
); );
expect(accessor.addFloatingGroup).toBeCalledTimes(1); expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1);
expect(eventPreventDefaultSpy).toBeCalledTimes(1); expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(1);
const event2 = new KeyboardEvent('mousedown', { shiftKey: false }); const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault'); const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
fireEvent(container, event2); fireEvent(container, event2);
expect(accessor.addFloatingGroup).toBeCalledTimes(1); expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1);
expect(eventPreventDefaultSpy2).toBeCalledTimes(0); expect(eventPreventDefaultSpy2).toHaveBeenCalledTimes(0);
}); });
test('that a tab that is already floating cannot be floated again', () => { test('that a tab that is already floating cannot be floated again', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -580,7 +580,7 @@ describe('tabsContainer', () => {
test('that selecting a tab with shift down will move that tab into a new floating group', () => { test('that selecting a tab with shift down will move that tab into a new floating group', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -642,7 +642,7 @@ describe('tabsContainer', () => {
test('pre header actions', () => { test('pre header actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -712,7 +712,7 @@ describe('tabsContainer', () => {
test('left header actions', () => { test('left header actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),
@ -782,7 +782,7 @@ describe('tabsContainer', () => {
test('right header actions', () => { test('right header actions', () => {
const accessorMock = jest.fn<DockviewComponent, []>(() => { const accessorMock = jest.fn<DockviewComponent, []>(() => {
return (<Partial<DockviewComponent>>{ return (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
onDidRemovePanel: jest.fn(), onDidRemovePanel: jest.fn(),
element: document.createElement('div'), element: document.createElement('div'),

7
packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts
View File

@ -243,7 +243,7 @@ describe('dockviewGroupPanelModel', () => {
options = {}; options = {};
dockview = (<Partial<DockviewComponent>>{ dockview = (<Partial<DockviewComponent>>{
options: {}, options: { parentElement: document.createElement('div') },
createWatermarkComponent: () => new Watermark(), createWatermarkComponent: () => new Watermark(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
id: 'dockview-1', id: 'dockview-1',
@ -639,6 +639,7 @@ describe('dockviewGroupPanelModel', () => {
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {
showDndOverlay: jest.fn(), showDndOverlay: jest.fn(),
parentElement: document.createElement('div'),
}, },
getPanel: jest.fn(), getPanel: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
@ -699,6 +700,7 @@ describe('dockviewGroupPanelModel', () => {
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {
showDndOverlay: () => true, showDndOverlay: () => true,
parentElement: document.createElement('div'),
}, },
getPanel: jest.fn(), getPanel: jest.fn(),
onDidAddPanel: jest.fn(), onDidAddPanel: jest.fn(),
@ -790,6 +792,7 @@ describe('dockviewGroupPanelModel', () => {
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {
showDndOverlay: jest.fn(), showDndOverlay: jest.fn(),
parentElement: document.createElement('div'),
}, },
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
@ -863,6 +866,7 @@ describe('dockviewGroupPanelModel', () => {
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {
showDndOverlay: jest.fn(), showDndOverlay: jest.fn(),
parentElement: document.createElement('div'),
}, },
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),
@ -941,6 +945,7 @@ describe('dockviewGroupPanelModel', () => {
id: 'testcomponentid', id: 'testcomponentid',
options: { options: {
showDndOverlay: jest.fn(), showDndOverlay: jest.fn(),
parentElement: document.createElement('div'),
}, },
getPanel: jest.fn(), getPanel: jest.fn(),
doSetGroupActive: jest.fn(), doSetGroupActive: jest.fn(),

7
packages/dockview-core/src/__tests__/dockview/dockviewPanelModel.spec.ts
View File

@ -38,6 +38,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: contentMock, contentComponent: contentMock,
}, },
@ -131,6 +132,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: contentMock, contentComponent: contentMock,
}, },
@ -159,6 +161,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: contentMock, contentComponent: contentMock,
}, },
@ -190,6 +193,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: contentMock, contentComponent: contentMock,
}, },
@ -222,6 +226,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: contentMock, contentComponent: contentMock,
}, },
@ -244,6 +249,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
components: { components: {
contentComponent: jest.fn().mockImplementation(() => { contentComponent: jest.fn().mockImplementation(() => {
return contentMock; return contentMock;
@ -271,6 +277,7 @@ describe('dockviewGroupPanel', () => {
accessorMock = jest.fn<DockviewComponent, []>(() => { accessorMock = jest.fn<DockviewComponent, []>(() => {
const partial: Partial<DockviewComponent> = { const partial: Partial<DockviewComponent> = {
options: { options: {
parentElement: document.createElement('div'),
frameworkComponents: { frameworkComponents: {
contentComponent: contentMock, contentComponent: contentMock,
}, },

26
packages/dockview-core/src/dockview/dockviewComponent.scss
View File

@ -14,6 +14,32 @@
.dv-overlay-render-container { .dv-overlay-render-container {
position: relative; position: relative;
} }
.split-view-container {
&.horizontal {
> .view-container > .view {
&:not(:last-child) {
border-right: var(--dv-group-gap-size) solid transparent;
}
&:not(:first-child) {
border-left: var(--dv-group-gap-size) solid transparent;
}
}
}
&.vertical {
> .view-container > .view {
&:not(:last-child) {
border-bottom: var(--dv-group-gap-size) solid transparent;
}
&:not(:first-child) {
border-top: var(--dv-group-gap-size) solid transparent;
}
}
}
}
} }
.groupview { .groupview {

2
packages/dockview-core/src/dockview/options.ts
View File

@ -90,7 +90,7 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
group: DockviewGroupPanel group: DockviewGroupPanel
) => IHeaderActionsRenderer; ) => IHeaderActionsRenderer;
singleTabMode?: 'fullwidth' | 'default'; singleTabMode?: 'fullwidth' | 'default';
parentElement?: HTMLElement; parentElement: HTMLElement;
disableFloatingGroups?: boolean; disableFloatingGroups?: boolean;
floatingGroupBounds?: floatingGroupBounds?:
| 'boundedWithinViewport' | 'boundedWithinViewport'

4
packages/dockview-core/src/gridview/baseComponentGridview.scss Normal file
View File

@ -0,0 +1,4 @@
.dv-root-wrapper {
height: 100%;
width: 100%;
}

11
packages/dockview-core/src/gridview/baseComponentGridview.ts
View File

@ -1,7 +1,7 @@
import { Emitter, Event, TickDelayedEvent } from '../events'; import { Emitter, Event, TickDelayedEvent } from '../events';
import { getGridLocation, Gridview, IGridView } from './gridview'; import { getGridLocation, Gridview, IGridView } from './gridview';
import { Position } from '../dnd/droptarget'; import { Position } from '../dnd/droptarget';
import { IValueDisposable } from '../lifecycle'; import { Disposable, IValueDisposable } from '../lifecycle';
import { sequentialNumberGenerator } from '../math'; import { sequentialNumberGenerator } from '../math';
import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview'; import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview';
import { IPanel } from '../panel/types'; import { IPanel } from '../panel/types';
@ -32,7 +32,7 @@ export interface BaseGridOptions {
readonly proportionalLayout: boolean; readonly proportionalLayout: boolean;
readonly orientation: Orientation; readonly orientation: Orientation;
readonly styles?: ISplitviewStyles; readonly styles?: ISplitviewStyles;
readonly parentElement?: HTMLElement; readonly parentElement: HTMLElement;
readonly disableAutoResizing?: boolean; readonly disableAutoResizing?: boolean;
} }
@ -134,7 +134,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
} }
constructor(options: BaseGridOptions) { constructor(options: BaseGridOptions) {
super(options.parentElement, options.disableAutoResizing); super(document.createElement('div'), options.disableAutoResizing);
options.parentElement.appendChild(this.element);
this.gridview = new Gridview( this.gridview = new Gridview(
!!options.proportionalLayout, !!options.proportionalLayout,
@ -147,6 +149,9 @@ export abstract class BaseGrid<T extends IGridPanelView>
this.layout(0, 0, true); // set some elements height/widths this.layout(0, 0, true); // set some elements height/widths
this.addDisposables( this.addDisposables(
Disposable.from(() => {
this.element.parentElement?.removeChild(this.element);
}),
this.gridview.onDidChange(() => { this.gridview.onDidChange(() => {
this._bufferOnDidLayoutChange.fire(); this._bufferOnDidLayoutChange.fire();
}), }),

2
packages/dockview-core/src/gridview/options.ts
View File

@ -17,5 +17,5 @@ export interface GridviewComponentOptions {
}; };
frameworkComponentFactory?: FrameworkFactory<GridviewPanel>; frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
styles?: ISplitviewStyles; styles?: ISplitviewStyles;
parentElement?: HTMLElement; parentElement: HTMLElement;
} }

2
packages/dockview-core/src/paneview/options.ts
View File

@ -25,5 +25,5 @@ export interface PaneviewComponentOptions {
}; };
disableDnd?: boolean; disableDnd?: boolean;
showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean; showDndOverlay?: (event: PaneviewDndOverlayEvent) => boolean;
parentElement?: HTMLElement; parentElement: HTMLElement;
} }

9
packages/dockview-core/src/resizable.ts
View File

@ -17,19 +17,12 @@ export abstract class Resizable extends CompositeDisposable {
this._disableResizing = value; this._disableResizing = value;
} }
constructor(parentElement?: HTMLElement, disableResizing = false) { constructor(parentElement: HTMLElement, disableResizing = false) {
super(); super();
this._disableResizing = disableResizing; this._disableResizing = disableResizing;
if (parentElement) {
this._element = parentElement; this._element = parentElement;
} else {
this._element = document.createElement('div');
this._element.style.height = '100%';
this._element.style.width = '100%';
this._element.className = 'dv-resizable-container';
}
this.addDisposables( this.addDisposables(
watchElementResize(this._element, (entry) => { watchElementResize(this._element, (entry) => {

2
packages/dockview-core/src/splitview/options.ts
View File

@ -28,5 +28,5 @@ export interface SplitviewComponentOptions extends SplitViewOptions {
[componentName: string]: any; [componentName: string]: any;
}; };
frameworkWrapper?: FrameworkFactory<SplitviewPanel>; frameworkWrapper?: FrameworkFactory<SplitviewPanel>;
parentElement?: HTMLElement; parentElement: HTMLElement;
} }

9
packages/dockview-core/src/theme.scss
View File

@ -12,6 +12,7 @@
@mixin dockview-theme-dark-mixin { @mixin dockview-theme-dark-mixin {
@include dockview-theme-core-mixin(); @include dockview-theme-core-mixin();
// //
--dv-group-view-background-color: #1e1e1e; --dv-group-view-background-color: #1e1e1e;
// //
@ -228,13 +229,7 @@
} }
@mixin dockview-design-replit-mixin { @mixin dockview-design-replit-mixin {
&.dv-dockview { --dv-group-gap-size: 3px;
padding: 3px;
}
.view:has(> .groupview) {
padding: 3px;
}
.dv-resize-container:has(> .groupview) { .dv-resize-container:has(> .groupview) {
border-radius: 8px; border-radius: 8px;

4
packages/docs/sandboxes/resizecontainer-dockview/src/app.tsx
View File

@ -93,7 +93,7 @@ export const App: React.FC = (props: { theme?: string }) => {
); );
}; };
const Container = () => { const Container = (props: any) => {
const [value, setValue] = React.useState<string>('50'); const [value, setValue] = React.useState<string>('50');
return ( return (
@ -108,7 +108,7 @@ const Container = () => {
value={value} value={value}
/> />
<div style={{ height: `${value}%`, width: `${value}%` }}> <div style={{ height: `${value}%`, width: `${value}%` }}>
<App /> <App {...props} />
</div> </div>
</div> </div>
); );