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

Merge pull request #57 from mathuo/56-fix-layout-issues

Browse Source 
feat: fixes to layout w/tests
This commit is contained in:
mathuo 2022-04-21 21:20:54 +01:00 committed by GitHub
commit 5b11d316d0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 392 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts Normal file
View File

@ -0,0 +1,166 @@
import { Emitter } from '../../events';
import {
BaseGrid,
IGridPanelView,
BaseGridOptions,
} from '../../gridview/baseComponentGridview';
import { IViewSize } from '../../gridview/gridview';
import { CompositeDisposable } from '../../lifecycle';
import {
PanelInitParameters,
PanelUpdateEvent,
Parameters,
} from '../../panel/types';
import { LayoutPriority, Orientation } from '../../splitview/core/splitview';
class TestPanel implements IGridPanelView {
_onDidChange = new Emitter<IViewSize | undefined>();
readonly onDidChange = this._onDidChange.event;
get isActive(): boolean {
return true;
}
get params(): Record<string, any> {
return {};
}
constructor(
public readonly id: string,
public readonly element: HTMLElement,
public readonly minimumWidth: number,
public readonly maximumWidth: number,
public readonly minimumHeight: number,
public readonly maximumHeight: number,
public priority: LayoutPriority,
public snap: boolean
) {}
init(params: PanelInitParameters): void {
//
}
setActive(isActive: boolean): void {
//
}
toJSON(): object {
return {};
}
layout(width: number, height: number): void {
//
}
update(event: PanelUpdateEvent<Parameters>): void {
//
}
focus(): void {
//
}
fromJSON(json: object): void {
//
}
dispose(): void {
//
}
}
class ClassUnderTest extends BaseGrid<TestPanel> {
constructor(element: HTMLElement, options: BaseGridOptions) {
super(element, options);
}
doRemoveGroup(
group: TestPanel,
options?: { skipActive?: boolean; skipDispose?: boolean }
): TestPanel {
return super.doRemoveGroup(group, options);
}
doAddGroup(group: TestPanel, location?: number[], size?: number): void {
this._groups.set(group.id, {
value: group,
disposable: {
dispose: () => {
//
},
},
});
super.doAddGroup(group, location, size);
}
public fromJSON(data: any): void {
//
}
public toJSON(): object {
return {};
}
}
describe('baseComponentGridview', () => {
test('can add group', () => {
const cut = new ClassUnderTest(document.createElement('div'), {
orientation: Orientation.HORIZONTAL,
proportionalLayout: true,
});
const events: TestPanel[] = [];
const disposable = new CompositeDisposable(
cut.onDidAddGroup((event) => {
events.push(event);
}),
cut.onDidRemoveGroup((event) => {
events.push(event);
}),
cut.onDidActiveGroupChange((event) => {
events.push(event);
})
);
const panel1 = new TestPanel(
'id',
document.createElement('div'),
0,
100,
0,
100,
LayoutPriority.Normal,
false
);
cut.doAddGroup(panel1);
expect(events.length).toBe(2);
expect(events[0]).toBe(panel1);
expect(events[1]).toBe(panel1);
const panel2 = new TestPanel(
'id',
document.createElement('div'),
0,
100,
0,
100,
LayoutPriority.Normal,
false
);
cut.doAddGroup(panel2);
expect(events.length).toBe(4);
expect(events[2]).toBe(panel2);
cut.doRemoveGroup(panel1);
expect(events.length).toBe(5);
expect(events[4]).toBe(panel1);
disposable.dispose();
cut.dispose();
});
});

215
packages/dockview/src/__tests__/gridview/gridview.spec.ts
View File

@ -779,6 +779,99 @@ describe('gridview', () => {
});
});
test('#5/VERTICAL/proportional/false', () => {
const gridview = new GridviewComponent(container, {
proportionalLayout: false,
orientation: Orientation.VERTICAL,
components: { default: TestGridview },
});
gridview.fromJSON({
grid: {
height: 400,
width: 800,
orientation: Orientation.VERTICAL,
root: {
type: 'branch',
size: 800,
data: [
{
type: 'leaf',
size: 100,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 100,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
},
activePanel: 'panel_1',
});
gridview.layout(800, 400, true);
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
grid: {
height: 400,
width: 800,
orientation: Orientation.VERTICAL,
root: {
type: 'branch',
size: 800,
data: [
{
type: 'leaf',
size: 100,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 100,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
},
activePanel: 'panel_1',
});
});
test('#6/VERTICAL', () => {
const gridview = new GridviewComponent(container, {
proportionalLayout: true,
@ -1272,6 +1365,128 @@ describe('gridview', () => {
});
});
test('#9/HORIZONTAL/proportional/false', () => {
const gridview = new GridviewComponent(container, {
proportionalLayout: false,
orientation: Orientation.HORIZONTAL,
components: { default: TestGridview },
});
gridview.fromJSON({
grid: {
height: 400,
width: 800,
orientation: Orientation.HORIZONTAL,
root: {
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 250,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 150,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
},
activePanel: 'panel_1',
});
expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
grid: {
height: 400,
width: 800,
orientation: Orientation.HORIZONTAL,
root: {
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'branch',
size: 400,
data: [
{
type: 'leaf',
size: 250,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
{
type: 'leaf',
size: 150,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
{
type: 'leaf',
size: 200,
data: {
id: 'panel_1',
component: 'default',
snap: false,
},
},
],
},
},
activePanel: 'panel_1',
});
});
test('#10/HORIZONTAL scale x:1.5 y:2', () => {
const gridview = new GridviewComponent(container, {
proportionalLayout: true,

3
packages/dockview/src/__tests__/splitview/core/splitview.spec.ts
View File

@ -1,4 +1,3 @@
import { last } from '../../../array';
import { Emitter } from '../../../events';
import { CompositeDisposable } from '../../../lifecycle';
import {
@ -388,7 +387,7 @@ describe('splitview', () => {
splitview.dispose();
});
test('disable proportional layout', () => {
test('proportional layout', () => {
const splitview = new Splitview(container, {
orientation: Orientation.HORIZONTAL,
});

2
packages/dockview/src/gridview/baseComponentGridview.ts
View File

@ -50,7 +50,7 @@ export function toTarget(direction: Direction) {
}
export interface BaseGridOptions {
readonly proportionalLayout?: boolean;
readonly proportionalLayout: boolean;
readonly orientation: Orientation;
readonly styles?: ISplitviewStyles;
}

2
packages/dockview/src/gridview/branchNode.ts
View File

@ -143,7 +143,7 @@ export class BranchNode extends CompositeDisposable implements IView {
: true,
};
}),
size: this.orthogonalSize,
size: this.size,
};
this.children = childDescriptors.map((c) => c.node);

5
packages/dockview/src/react/gridview/gridview.tsx
View File

@ -60,7 +60,10 @@ export const GridviewReact = React.forwardRef(
const element = document.createElement('div');
const gridview = new GridviewComponent(element, {
proportionalLayout: !!props.proportionalLayout,
proportionalLayout:
typeof props.proportionalLayout === 'boolean'
? props.proportionalLayout
: true,
orientation: props.orientation,
frameworkComponents: props.components,
frameworkComponentFactory: {

5
packages/dockview/src/react/splitview/splitview.tsx
View File

@ -71,7 +71,10 @@ export const SplitviewReact = React.forwardRef(
});
},
},
proportionalLayout: props.proportionalLayout,
proportionalLayout:
typeof props.proportionalLayout === 'boolean'
? props.proportionalLayout
: true,
styles: props.hideBorders
? { separatorBorder: 'transparent' }
: undefined,