mirror of
https://github.com/mathuo/dockview
synced 2025-05-05 02:58:25 +00:00
feat: vue3 work
This commit is contained in:
mathuo
parent
dbe97b086c
commit
7eff1da988
@ -1,16 +1,16 @@
|
||||
import { DockviewPanelApiImpl } from '../../api/dockviewPanelApi';
|
||||
import { DockviewComponent } from '../../dockview/dockviewComponent';
|
||||
import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { DockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
|
||||
describe('groupPanelApi', () => {
|
||||
test('title', () => {
|
||||
const accessor: Partial<DockviewComponent> = {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
});
|
||||
|
||||
const panelMock = jest.fn<DockviewPanel, []>(() => {
|
||||
return {
|
||||
@ -46,11 +46,12 @@ describe('groupPanelApi', () => {
|
||||
update: jest.fn(),
|
||||
};
|
||||
|
||||
const accessor: Partial<DockviewComponent> = {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
});
|
||||
|
||||
const groupViewPanel = new DockviewGroupPanel(
|
||||
<DockviewComponent>accessor,
|
||||
'',
|
||||
@ -77,11 +78,12 @@ describe('groupPanelApi', () => {
|
||||
id: 'test_id',
|
||||
};
|
||||
|
||||
const accessor: Partial<DockviewComponent> = {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
});
|
||||
|
||||
const groupViewPanel = new DockviewGroupPanel(
|
||||
<DockviewComponent>accessor,
|
||||
'',
|
||||
|
||||
@ -13,13 +13,12 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
||||
|
||||
describe('tabsContainer', () => {
|
||||
test('that an external event does not render a drop target and calls through to the group mode', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -36,14 +35,13 @@ describe('tabsContainer', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0)
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
@ -67,14 +65,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that a drag over event from another tab should render a drop target', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -93,7 +90,6 @@ describe('tabsContainer', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -135,14 +131,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that dropping over the empty space should render a drop target', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -161,7 +156,6 @@ describe('tabsContainer', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -200,14 +194,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that dropping the first tab should render a drop target', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -226,7 +219,6 @@ describe('tabsContainer', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -265,14 +257,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that dropping a tab from another component should not render a drop target', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -290,7 +281,6 @@ describe('tabsContainer', () => {
|
||||
};
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupPanel = new groupPanelMock() as DockviewGroupPanel;
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -335,19 +325,17 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('left actions', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -401,19 +389,17 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('right actions', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
return (<Partial<DockviewGroupPanel>>{}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -467,14 +453,12 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that a tab will become floating when clicked if not floating and shift is selected', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -483,7 +467,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -527,14 +510,12 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that a tab that is already floating cannot be floated again', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -543,7 +524,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -579,15 +559,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('that selecting a tab with shift down will move that tab into a new floating group', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -597,7 +575,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -638,15 +615,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('pre header actions', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -656,7 +631,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -708,15 +682,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('left header actions', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -726,7 +698,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
@ -778,15 +749,13 @@ describe('tabsContainer', () => {
|
||||
});
|
||||
|
||||
test('right header actions', () => {
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return (<Partial<DockviewComponent>>{
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
}) as DockviewComponent;
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -796,7 +765,6 @@ describe('tabsContainer', () => {
|
||||
}) as DockviewGroupPanel;
|
||||
});
|
||||
|
||||
const accessor = new accessorMock();
|
||||
const groupPanel = new groupPanelMock();
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -275,7 +275,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
onDidParametersChange: new Emitter().event,
|
||||
});
|
||||
|
||||
dockview = (<Partial<DockviewComponent>>{
|
||||
dockview = fromPartial<DockviewComponent>({
|
||||
options: { parentElement: document.createElement('div') },
|
||||
createWatermarkComponent: () => new Watermark(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
@ -287,7 +287,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
}) as DockviewComponent;
|
||||
});
|
||||
|
||||
groupview = new DockviewGroupPanel(dockview, 'groupview-1', options);
|
||||
groupview.initialize();
|
||||
@ -529,8 +529,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
test('that group is set on panel during onDidAddPanel event', () => {
|
||||
const cut = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
component: TestContentPart,
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -545,8 +550,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
test('toJSON() default', () => {
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
component: TestContentPart,
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -568,8 +578,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
test('toJSON() locked and hideHeader', () => {
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
component: TestContentPart,
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -596,8 +611,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
test("that openPanel with skipSetActive doesn't set panel to active", () => {
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
component: TestContentPart,
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
@ -637,19 +657,16 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('that should not show drop target is external event', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
});
|
||||
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -704,18 +721,16 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('that the .locked behaviour is as', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
});
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -799,22 +814,20 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('that should not show drop target if dropping on self', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
});
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -874,22 +887,20 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('that should not allow drop when dropping on self for same component id', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
});
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
@ -950,22 +961,20 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('that should not allow drop when not dropping for different component id', () => {
|
||||
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
|
||||
return {
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
};
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div')
|
||||
),
|
||||
});
|
||||
const accessor = new accessorMock() as DockviewComponent;
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
import {
|
||||
DockviewComponent,
|
||||
IDockviewComponent,
|
||||
} from '../../dockview/dockviewComponent';
|
||||
import { DockviewComponent } from '../../dockview/dockviewComponent';
|
||||
import { DockviewPanelModel } from '../../dockview/dockviewPanelModel';
|
||||
import { IContentRenderer, ITabRenderer } from '../../dockview/types';
|
||||
import { GroupPanelFrameworkComponentFactory } from '../../dockview/options';
|
||||
import { DefaultTab } from '../../dockview/components/tab/defaultTab';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
|
||||
describe('dockviewGroupPanel', () => {
|
||||
let contentMock: jest.Mock<IContentRenderer>;
|
||||
let tabMock: jest.Mock<ITabRenderer>;
|
||||
let accessorMock: jest.Mock<IDockviewComponent>;
|
||||
let accessorMock: DockviewComponent;
|
||||
|
||||
beforeEach(() => {
|
||||
contentMock = jest.fn<IContentRenderer, []>(() => {
|
||||
@ -18,8 +15,6 @@ describe('dockviewGroupPanel', () => {
|
||||
element: document.createElement('div'),
|
||||
dispose: jest.fn(),
|
||||
update: jest.fn(),
|
||||
// onGroupChange: jest.fn(),
|
||||
// onPanelVisibleChange: jest.fn(),
|
||||
};
|
||||
return partial as IContentRenderer;
|
||||
});
|
||||
@ -29,32 +24,36 @@ describe('dockviewGroupPanel', () => {
|
||||
element: document.createElement('div'),
|
||||
dispose: jest.fn(),
|
||||
update: jest.fn(),
|
||||
// onGroupChange: jest.fn(),
|
||||
// onPanelVisibleChange: jest.fn(),
|
||||
};
|
||||
return partial as IContentRenderer;
|
||||
});
|
||||
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
tabComponents: {
|
||||
tabComponent: tabMock,
|
||||
},
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
return new contentMock(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
createTabComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'tabComponent':
|
||||
return new tabMock(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
test('that dispose is called on content and tab renderers when present', () => {
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent',
|
||||
'tabComponent'
|
||||
@ -68,7 +67,7 @@ describe('dockviewGroupPanel', () => {
|
||||
|
||||
test('that update is called on content and tab renderers when present', () => {
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent',
|
||||
'tabComponent'
|
||||
@ -82,73 +81,31 @@ describe('dockviewGroupPanel', () => {
|
||||
expect(cut.tab.update).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
// test('that events are fired', () => {
|
||||
// const cut = new DockviewPanelModel(
|
||||
// <IDockviewComponent>new accessorMock(),
|
||||
// 'id',
|
||||
// 'contentComponent',
|
||||
// 'tabComponent'
|
||||
// );
|
||||
|
||||
// const group1 = jest.fn() as any;
|
||||
// const group2 = jest.fn() as any;
|
||||
// cut.updateParentGroup(group1, false);
|
||||
|
||||
// expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(1, group1);
|
||||
// expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(1, group1);
|
||||
// expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
|
||||
// 1,
|
||||
// false
|
||||
// );
|
||||
// expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(1, false);
|
||||
// expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
|
||||
// expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
|
||||
// expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(1);
|
||||
// expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(1);
|
||||
|
||||
// cut.updateParentGroup(group1, true);
|
||||
|
||||
// expect(cut.content.onPanelVisibleChange).toHaveBeenNthCalledWith(
|
||||
// 2,
|
||||
// true
|
||||
// );
|
||||
// expect(cut.tab.onPanelVisibleChange).toHaveBeenNthCalledWith(2, true);
|
||||
// expect(cut.content.onGroupChange).toHaveBeenCalledTimes(1);
|
||||
// expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(1);
|
||||
// expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
|
||||
// expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
|
||||
|
||||
// cut.updateParentGroup(group2, true);
|
||||
|
||||
// expect(cut.content.onGroupChange).toHaveBeenNthCalledWith(2, group2);
|
||||
// expect(cut.tab.onGroupChange).toHaveBeenNthCalledWith(2, group2);
|
||||
// expect(cut.content.onGroupChange).toHaveBeenCalledTimes(2);
|
||||
// expect(cut.tab.onGroupChange).toHaveBeenCalledTimes(2);
|
||||
// expect(cut.content.onPanelVisibleChange).toHaveBeenCalledTimes(2);
|
||||
// expect(cut.tab.onPanelVisibleChange).toHaveBeenCalledTimes(2);
|
||||
// });
|
||||
|
||||
test('that the default tab is created', () => {
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
tabComponents: {
|
||||
tabComponent: jest
|
||||
.fn()
|
||||
.mockImplementation(() => tabMock),
|
||||
},
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
return new contentMock(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
createTabComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'tabComponent':
|
||||
return tabMock;
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent',
|
||||
'tabComponent'
|
||||
@ -158,27 +115,31 @@ describe('dockviewGroupPanel', () => {
|
||||
});
|
||||
|
||||
test('that the provided default tab is chosen when no implementation is provided', () => {
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
tabComponents: {
|
||||
tabComponent: jest
|
||||
.fn()
|
||||
.mockImplementation(() => tabMock),
|
||||
},
|
||||
defaultTabComponent: 'tabComponent',
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
defaultTabComponent: 'tabComponent',
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
return new contentMock(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
createTabComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'tabComponent':
|
||||
return tabMock;
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent'
|
||||
);
|
||||
@ -186,58 +147,23 @@ describe('dockviewGroupPanel', () => {
|
||||
expect(cut.tab).toEqual(tabMock);
|
||||
});
|
||||
|
||||
test('that the framework tab is created when provided tab is a framework tab', () => {
|
||||
const tab = jest.fn();
|
||||
const tabFactory = jest.fn().mockImplementation(() => tab);
|
||||
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
frameworkTabComponents: {
|
||||
tabComponent: tabMock,
|
||||
},
|
||||
frameworkComponentFactory: (<
|
||||
Partial<GroupPanelFrameworkComponentFactory>
|
||||
>{
|
||||
tab: { createComponent: tabFactory },
|
||||
}) as GroupPanelFrameworkComponentFactory,
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
'id',
|
||||
'contentComponent',
|
||||
'tabComponent'
|
||||
);
|
||||
|
||||
expect(tabFactory).toHaveBeenCalledWith('id', 'tabComponent', tabMock);
|
||||
expect(cut.tab).toEqual(tab);
|
||||
});
|
||||
|
||||
test('that is library default tab instance is created when no alternative exists', () => {
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
return new contentMock(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent'
|
||||
);
|
||||
@ -246,63 +172,34 @@ describe('dockviewGroupPanel', () => {
|
||||
});
|
||||
|
||||
test('that the default content is created', () => {
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
components: {
|
||||
contentComponent: jest.fn().mockImplementation(() => {
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
return contentMock;
|
||||
}),
|
||||
},
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
createTabComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'tabComponent':
|
||||
return tabMock;
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
accessorMock,
|
||||
'id',
|
||||
'contentComponent'
|
||||
);
|
||||
|
||||
expect(cut.content).toEqual(contentMock);
|
||||
});
|
||||
|
||||
test('that the framework content is created', () => {
|
||||
const content = jest.fn();
|
||||
const contentFactory = jest.fn().mockImplementation(() => content);
|
||||
|
||||
accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
const partial: Partial<DockviewComponent> = {
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
frameworkComponents: {
|
||||
contentComponent: contentMock,
|
||||
},
|
||||
frameworkComponentFactory: (<
|
||||
Partial<GroupPanelFrameworkComponentFactory>
|
||||
>{
|
||||
content: { createComponent: contentFactory },
|
||||
}) as GroupPanelFrameworkComponentFactory,
|
||||
},
|
||||
};
|
||||
|
||||
return partial as DockviewComponent;
|
||||
});
|
||||
|
||||
const cut = new DockviewPanelModel(
|
||||
<IDockviewComponent>new accessorMock(),
|
||||
'id',
|
||||
'contentComponent'
|
||||
);
|
||||
|
||||
expect(contentFactory).toHaveBeenCalledWith(
|
||||
'id',
|
||||
'contentComponent',
|
||||
contentMock
|
||||
);
|
||||
expect(cut.content).toEqual(content);
|
||||
});
|
||||
});
|
||||
|
||||
@ -18,7 +18,6 @@ import { Watermark } from './components/watermark/watermark';
|
||||
import { IWatermarkRenderer, GroupviewPanelState } from './types';
|
||||
import { sequentialNumberGenerator } from '../math';
|
||||
import { DefaultDockviewDeserialzier } from './deserializer';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import {
|
||||
AddGroupOptions,
|
||||
AddPanelOptions,
|
||||
@ -68,7 +67,6 @@ import {
|
||||
OverlayRenderContainer,
|
||||
} from '../overlayRenderContainer';
|
||||
import { PopoutWindow } from '../popoutWindow';
|
||||
import { TitleEvent } from '../api/dockviewPanelApi';
|
||||
|
||||
const DEFAULT_ROOT_OVERLAY_MODEL: DroptargetOverlayModel = {
|
||||
activationSize: { type: 'pixels', value: 10 },
|
||||
@ -503,25 +501,6 @@ export class DockviewComponent
|
||||
|
||||
this._options = options;
|
||||
|
||||
if (!this.options.components) {
|
||||
this.options.components = {};
|
||||
}
|
||||
if (!this.options.frameworkComponents) {
|
||||
this.options.frameworkComponents = {};
|
||||
}
|
||||
if (!this.options.frameworkTabComponents) {
|
||||
this.options.frameworkTabComponents = {};
|
||||
}
|
||||
if (!this.options.tabComponents) {
|
||||
this.options.tabComponents = {};
|
||||
}
|
||||
if (
|
||||
!this.options.watermarkComponent &&
|
||||
!this.options.watermarkFrameworkComponent
|
||||
) {
|
||||
this.options.watermarkComponent = Watermark;
|
||||
}
|
||||
|
||||
this._rootDropTarget = new Droptarget(this.element, {
|
||||
canDisplayOverlay: (event, position) => {
|
||||
const data = getPanelData();
|
||||
@ -1575,17 +1554,10 @@ export class DockviewComponent
|
||||
}
|
||||
|
||||
createWatermarkComponent(): IWatermarkRenderer {
|
||||
return createComponent(
|
||||
'watermark-id',
|
||||
'watermark-name',
|
||||
this.options.watermarkComponent
|
||||
? { 'watermark-name': this.options.watermarkComponent }
|
||||
: {},
|
||||
this.options.watermarkFrameworkComponent
|
||||
? { 'watermark-name': this.options.watermarkFrameworkComponent }
|
||||
: {},
|
||||
this.options.frameworkComponentFactory?.watermark
|
||||
);
|
||||
if (this.options.createWatermarkComponent) {
|
||||
return this.options.createWatermarkComponent();
|
||||
}
|
||||
return new Watermark();
|
||||
}
|
||||
|
||||
private updateWatermark(): void {
|
||||
|
||||
@ -546,9 +546,9 @@ export class DockviewGroupPanelModel
|
||||
this.setActive(this.isActive, true);
|
||||
this.updateContainer();
|
||||
|
||||
if (this.accessor.options.headerRightActionComponent) {
|
||||
if (this.accessor.options.createRightHeaderActionComponent) {
|
||||
this._rightHeaderActions =
|
||||
this.accessor.options.headerRightActionComponent(
|
||||
this.accessor.options.createRightHeaderActionComponent(
|
||||
this.groupPanel
|
||||
);
|
||||
this.addDisposables(this._rightHeaderActions);
|
||||
@ -562,9 +562,9 @@ export class DockviewGroupPanelModel
|
||||
);
|
||||
}
|
||||
|
||||
if (this.accessor.options.headerLeftActionComponent) {
|
||||
if (this.accessor.options.createLeftHeaderActionComponent) {
|
||||
this._leftHeaderActions =
|
||||
this.accessor.options.headerLeftActionComponent(
|
||||
this.accessor.options.createLeftHeaderActionComponent(
|
||||
this.groupPanel
|
||||
);
|
||||
this.addDisposables(this._leftHeaderActions);
|
||||
@ -578,9 +578,9 @@ export class DockviewGroupPanelModel
|
||||
);
|
||||
}
|
||||
|
||||
if (this.accessor.options.headerPrefixActionComponent) {
|
||||
if (this.accessor.options.createPrefixHeaderActionComponent) {
|
||||
this._prefixHeaderActions =
|
||||
this.accessor.options.headerPrefixActionComponent(
|
||||
this.accessor.options.createPrefixHeaderActionComponent(
|
||||
this.groupPanel
|
||||
);
|
||||
this.addDisposables(this._prefixHeaderActions);
|
||||
|
||||
@ -6,7 +6,6 @@ import {
|
||||
} from './types';
|
||||
import { DockviewGroupPanel } from './dockviewGroupPanel';
|
||||
import { IDisposable } from '../lifecycle';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import { IDockviewComponent } from './dockviewComponent';
|
||||
import { PanelUpdateEvent } from '../panel/types';
|
||||
|
||||
@ -73,39 +72,37 @@ export class DockviewPanelModel implements IDockviewPanelModel {
|
||||
id: string,
|
||||
componentName: string
|
||||
): IContentRenderer {
|
||||
return createComponent(
|
||||
return this.accessor.options.createComponent({
|
||||
id,
|
||||
componentName,
|
||||
this.accessor.options.components ?? {},
|
||||
this.accessor.options.frameworkComponents,
|
||||
this.accessor.options.frameworkComponentFactory?.content
|
||||
);
|
||||
name: componentName,
|
||||
});
|
||||
}
|
||||
|
||||
private createTabComponent(
|
||||
id: string,
|
||||
componentName?: string
|
||||
): ITabRenderer {
|
||||
if (componentName) {
|
||||
return createComponent(
|
||||
id,
|
||||
componentName,
|
||||
this.accessor.options.tabComponents,
|
||||
this.accessor.options.frameworkTabComponents,
|
||||
this.accessor.options.frameworkComponentFactory?.tab,
|
||||
() => new DefaultTab()
|
||||
const name = componentName ?? this.accessor.options.defaultTabComponent;
|
||||
|
||||
if (name) {
|
||||
if (this.accessor.options.createTabComponent) {
|
||||
const component = this.accessor.options.createTabComponent({
|
||||
id,
|
||||
name,
|
||||
});
|
||||
|
||||
if (component) {
|
||||
return component;
|
||||
} else {
|
||||
return new DefaultTab();
|
||||
}
|
||||
}
|
||||
|
||||
console.warn(
|
||||
`dockview: tabComponent '${componentName}' was not found. falling back to the default tab.`
|
||||
);
|
||||
} else if (this.accessor.options.defaultTabComponent) {
|
||||
return createComponent(
|
||||
id,
|
||||
this.accessor.options.defaultTabComponent,
|
||||
this.accessor.options.tabComponents,
|
||||
this.accessor.options.frameworkTabComponents,
|
||||
this.accessor.options.frameworkComponentFactory?.tab,
|
||||
() => new DefaultTab()
|
||||
);
|
||||
} else {
|
||||
return new DefaultTab();
|
||||
}
|
||||
|
||||
return new DefaultTab();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,7 @@
|
||||
import { DockviewApi } from '../api/component.api';
|
||||
import { Direction } from '../gridview/baseComponentGridview';
|
||||
import { IGridView } from '../gridview/gridview';
|
||||
import {
|
||||
IContentRenderer,
|
||||
ITabRenderer,
|
||||
WatermarkConstructor,
|
||||
IWatermarkRenderer,
|
||||
} from './types';
|
||||
import { IContentRenderer, ITabRenderer, IWatermarkRenderer } from './types';
|
||||
import { Parameters } from '../panel/types';
|
||||
import { DockviewGroupPanel } from './dockviewGroupPanel';
|
||||
import { PanelTransfer } from '../dnd/dataTransfer';
|
||||
@ -17,10 +12,6 @@ import {
|
||||
GroupOptions,
|
||||
} from './dockviewGroupPanelModel';
|
||||
import { IDockviewPanel } from './dockviewPanel';
|
||||
import {
|
||||
ComponentConstructor,
|
||||
FrameworkFactory,
|
||||
} from '../panel/componentFactory';
|
||||
import { DockviewPanelRenderer } from '../overlayRenderContainer';
|
||||
import { IGroupHeaderProps } from './framework';
|
||||
|
||||
@ -29,12 +20,6 @@ export interface IHeaderActionsRenderer extends IDisposable {
|
||||
init(params: IGroupHeaderProps): void;
|
||||
}
|
||||
|
||||
export interface GroupPanelFrameworkComponentFactory {
|
||||
content: FrameworkFactory<IContentRenderer>;
|
||||
tab: FrameworkFactory<ITabRenderer>;
|
||||
watermark: FrameworkFactory<IWatermarkRenderer>;
|
||||
}
|
||||
|
||||
export interface TabContextMenuEvent {
|
||||
event: MouseEvent;
|
||||
api: DockviewApi;
|
||||
@ -119,32 +104,26 @@ export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
|
||||
})();
|
||||
|
||||
export interface DockviewFrameworkOptions {
|
||||
headerRightActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
headerLeftActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
headerPrefixActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
tabComponents?: {
|
||||
[componentName: string]: ComponentConstructor<ITabRenderer>;
|
||||
};
|
||||
components?: {
|
||||
[componentName: string]: ComponentConstructor<IContentRenderer>;
|
||||
};
|
||||
frameworkTabComponents?: {
|
||||
[componentName: string]: any;
|
||||
};
|
||||
frameworkComponents?: {
|
||||
[componentName: string]: any;
|
||||
};
|
||||
parentElement: HTMLElement;
|
||||
defaultTabComponent?: string;
|
||||
watermarkComponent?: WatermarkConstructor;
|
||||
watermarkFrameworkComponent?: any;
|
||||
frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
|
||||
createRightHeaderActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
createLeftHeaderActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
createPrefixHeaderActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
createTabComponent?: (options: {
|
||||
id: string;
|
||||
name: string;
|
||||
}) => ITabRenderer | undefined;
|
||||
createComponent: (options: {
|
||||
id: string;
|
||||
name: string;
|
||||
}) => IContentRenderer;
|
||||
createWatermarkComponent?: () => IWatermarkRenderer;
|
||||
}
|
||||
|
||||
export type DockviewComponentOptions = DockviewOptions &
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
],
|
||||
"scripts": {
|
||||
"build-only": "vite build",
|
||||
"build": "npm run build:package && npm run build:bundles",
|
||||
"build": "npm run build:package",
|
||||
"build:bundles": "rollup -c",
|
||||
"build:cjs": "cross-env ../../node_modules/.bin/vue-tsc --build ./tsconfig.json --verbose --extendedDiagnostics",
|
||||
"build:css": "gulp sass",
|
||||
@ -58,4 +58,4 @@
|
||||
"dependencies": {
|
||||
"dockview-core": "^1.10.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -30,23 +30,19 @@ import {
|
||||
VueHeaderActionsRenderer,
|
||||
VueTabRenderer,
|
||||
VueWatermarkRenderer,
|
||||
type VueComponent,
|
||||
findComponent,
|
||||
} from '../utils';
|
||||
|
||||
interface VueProps {
|
||||
components: Record<string, VueComponent<IDockviewPanelProps>>;
|
||||
tabComponents?: Record<string, VueComponent<IDockviewPanelHeaderProps>>;
|
||||
watermarkComponent?: VueComponent<IWatermarkPanelProps>;
|
||||
defaultTabComponent?: VueComponent<IDockviewPanelHeaderProps>;
|
||||
rightHeaderActionsComponent?: VueComponent<IGroupPanelBaseProps>;
|
||||
leftHeaderActionsComponent?: VueComponent<IGroupPanelBaseProps>;
|
||||
prefixHeaderActionsComponent?: VueComponent<IGroupPanelBaseProps>;
|
||||
watermarkComponent?: string;
|
||||
defaultTabComponent?: string;
|
||||
rightHeaderActionsComponent?: string;
|
||||
leftHeaderActionsComponent?: string;
|
||||
prefixHeaderActionsComponent?: string;
|
||||
}
|
||||
|
||||
const VUE_PROPERTIES = (() => {
|
||||
const _value: Record<keyof VueProps, undefined> = {
|
||||
components: undefined,
|
||||
tabComponents: undefined,
|
||||
watermarkComponent: undefined,
|
||||
defaultTabComponent: undefined,
|
||||
rightHeaderActionsComponent: undefined,
|
||||
@ -61,8 +57,6 @@ type VueEvents = {
|
||||
ready: [event: DockviewReadyEvent];
|
||||
};
|
||||
|
||||
const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
|
||||
|
||||
export type IDockviewVueProps = DockviewOptions & VueProps;
|
||||
|
||||
function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
|
||||
@ -79,7 +73,6 @@ function extractCoreOptions(props: IDockviewVueProps): DockviewOptions {
|
||||
|
||||
const emit = defineEmits<VueEvents>();
|
||||
|
||||
|
||||
/**
|
||||
* Anything here that is a Vue.js component should not be reactive
|
||||
* i.e. markRaw(toRaw(...))
|
||||
@ -89,7 +82,6 @@ const props = defineProps<IDockviewVueProps>();
|
||||
const el = ref<HTMLElement | null>(null);
|
||||
const instance = ref<DockviewComponent | null>(null);
|
||||
|
||||
|
||||
PROPERTY_KEYS.forEach((coreOptionKey) => {
|
||||
watch(
|
||||
() => props[coreOptionKey],
|
||||
@ -101,180 +93,87 @@ PROPERTY_KEYS.forEach((coreOptionKey) => {
|
||||
);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.components,
|
||||
(newValue, oldValue) => {
|
||||
if (instance.value) {
|
||||
instance.value.updateOptions({ frameworkComponents: newValue });
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => [props.tabComponents, props.defaultTabComponent],
|
||||
([newTabComponents, newDefaultTabComponent], oldValue) => {
|
||||
if (instance.value) {
|
||||
const frameworkTabComponents = newTabComponents ?? {};
|
||||
|
||||
if (newDefaultTabComponent) {
|
||||
frameworkTabComponents[DEFAULT_REACT_TAB] =
|
||||
newDefaultTabComponent;
|
||||
}
|
||||
|
||||
instance.value.updateOptions({
|
||||
defaultTabComponent: newDefaultTabComponent
|
||||
? DEFAULT_REACT_TAB
|
||||
: undefined,
|
||||
frameworkTabComponents,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.watermarkComponent,
|
||||
(newValue, oldValue) => {
|
||||
if (instance.value) {
|
||||
instance.value.updateOptions({
|
||||
watermarkFrameworkComponent: newValue,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.leftHeaderActionsComponent,
|
||||
(newValue, oldValue) => {
|
||||
if (instance.value) {
|
||||
instance.value.updateOptions({
|
||||
headerLeftActionComponent: newValue
|
||||
? (group) => {
|
||||
return new VueHeaderActionsRenderer(
|
||||
newValue as VueComponent,
|
||||
getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.rightHeaderActionsComponent,
|
||||
(newValue, oldValue) => {
|
||||
if (instance.value) {
|
||||
instance.value.updateOptions({
|
||||
headerRightActionComponent: newValue
|
||||
? (group) => {
|
||||
return new VueHeaderActionsRenderer(
|
||||
newValue as VueComponent,
|
||||
getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.prefixHeaderActionsComponent,
|
||||
(newValue, oldValue) => {
|
||||
if (instance.value) {
|
||||
instance.value.updateOptions({
|
||||
headerPrefixActionComponent: newValue
|
||||
? (group) => {
|
||||
return new VueHeaderActionsRenderer(
|
||||
newValue as VueComponent,getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
if (!el.value) {
|
||||
throw new Error('element is not mounted');
|
||||
}
|
||||
|
||||
const frameworkTabComponents = props.tabComponents ?? {};
|
||||
|
||||
if (props.defaultTabComponent) {
|
||||
frameworkTabComponents[DEFAULT_REACT_TAB] = props.defaultTabComponent;
|
||||
}
|
||||
|
||||
const frameworkOptions: DockviewFrameworkOptions = {
|
||||
parentElement: el.value,
|
||||
frameworkComponentFactory: {
|
||||
content: {
|
||||
createComponent: (
|
||||
id: string,
|
||||
componentId: string,
|
||||
component: any
|
||||
): IContentRenderer => {
|
||||
return new VueContentRenderer(component,getCurrentInstance()!);
|
||||
},
|
||||
},
|
||||
tab: {
|
||||
createComponent: (
|
||||
id: string,
|
||||
componentId: string,
|
||||
component: any
|
||||
): ITabRenderer => {
|
||||
return new VueTabRenderer(component,getCurrentInstance()!);
|
||||
},
|
||||
},
|
||||
watermark: {
|
||||
createComponent: (
|
||||
id: string,
|
||||
componentId: string,
|
||||
component: any
|
||||
): IWatermarkRenderer => {
|
||||
return new VueWatermarkRenderer(component,getCurrentInstance()!);
|
||||
},
|
||||
},
|
||||
// action: {
|
||||
// createComponent: (id: string, componentId: string, component: any): IWatermarkRenderer => {
|
||||
// return new VueHeaderActionRenderer(component)
|
||||
// }
|
||||
// }
|
||||
createComponent(options) {
|
||||
const component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
options.name
|
||||
);
|
||||
return new VueContentRenderer(component!, getCurrentInstance()!);
|
||||
},
|
||||
frameworkComponents: props.components,
|
||||
frameworkTabComponents,
|
||||
headerLeftActionComponent: props.leftHeaderActionsComponent
|
||||
createTabComponent(options) {
|
||||
let component = findComponent(getCurrentInstance()!, options.name);
|
||||
|
||||
if (!component && props.defaultTabComponent) {
|
||||
component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
props.defaultTabComponent
|
||||
);
|
||||
}
|
||||
|
||||
if (component) {
|
||||
return new VueTabRenderer(component, getCurrentInstance()!);
|
||||
}
|
||||
return undefined;
|
||||
},
|
||||
createWatermarkComponent: props.watermarkComponent
|
||||
? () => {
|
||||
const component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
props.watermarkComponent!
|
||||
);
|
||||
|
||||
return new VueWatermarkRenderer(
|
||||
component!,
|
||||
getCurrentInstance()!
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
createLeftHeaderActionComponent: props.leftHeaderActionsComponent
|
||||
? (group) => {
|
||||
const component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
props.leftHeaderActionsComponent!
|
||||
);
|
||||
return new VueHeaderActionsRenderer(
|
||||
props.leftHeaderActionsComponent as VueComponent,getCurrentInstance()!,
|
||||
component!,
|
||||
getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
headerPrefixActionComponent: props.prefixHeaderActionsComponent
|
||||
createPrefixHeaderActionComponent: props.prefixHeaderActionsComponent
|
||||
? (group) => {
|
||||
const component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
props.prefixHeaderActionsComponent!
|
||||
);
|
||||
return new VueHeaderActionsRenderer(
|
||||
props.prefixHeaderActionsComponent as VueComponent,getCurrentInstance()!,
|
||||
component!,
|
||||
getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
headerRightActionComponent: props.rightHeaderActionsComponent
|
||||
createRightHeaderActionComponent: props.rightHeaderActionsComponent
|
||||
? (group) => {
|
||||
const component = findComponent(
|
||||
getCurrentInstance()!,
|
||||
props.rightHeaderActionsComponent!
|
||||
);
|
||||
return new VueHeaderActionsRenderer(
|
||||
props.rightHeaderActionsComponent as VueComponent,getCurrentInstance()!,
|
||||
component!,
|
||||
getCurrentInstance()!,
|
||||
group
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
defaultTabComponent: props.defaultTabComponent
|
||||
? DEFAULT_REACT_TAB
|
||||
: undefined,
|
||||
watermarkFrameworkComponent:props.watermarkComponent
|
||||
};
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -300,8 +199,7 @@ onMounted(() => {
|
||||
*/
|
||||
instance.value = markRaw(dockview);
|
||||
|
||||
console.log(getCurrentInstance())
|
||||
|
||||
console.log(getCurrentInstance());
|
||||
|
||||
emit('ready', { api: new DockviewApi(dockview) });
|
||||
});
|
||||
|
||||
@ -35,11 +35,14 @@ export type ComponentInterface = ComponentOptionsBase<
|
||||
|
||||
export type VueComponent<T = any> = DefineComponent<T>;
|
||||
|
||||
export function findComponent(parent: ComponentInternalInstance, name: string) {
|
||||
export function findComponent(
|
||||
parent: ComponentInternalInstance,
|
||||
name: string
|
||||
): VueComponent | null {
|
||||
let instance = parent as any;
|
||||
let component = null;
|
||||
|
||||
while (!component && instance.parent) {
|
||||
while (!component && instance) {
|
||||
component = instance.components?.[name];
|
||||
instance = instance.parent;
|
||||
}
|
||||
@ -49,7 +52,7 @@ export function findComponent(parent: ComponentInternalInstance, name: string) {
|
||||
}
|
||||
|
||||
if (!component) {
|
||||
throw new Error(`Failed to find Vue Component ${name}`);
|
||||
throw new Error(`Failed to find Vue Component '${name}'`);
|
||||
}
|
||||
|
||||
return component;
|
||||
|
||||
@ -6,6 +6,7 @@ import vue from '@vitejs/plugin-vue';
|
||||
export default defineConfig({
|
||||
plugins: [vue()],
|
||||
build: {
|
||||
minify: false,
|
||||
lib: {
|
||||
// src/indext.ts is where we have exported the component(s)
|
||||
entry: resolve(__dirname, 'src/index.ts'),
|
||||
|
||||
@ -168,26 +168,51 @@ export const DockviewReact = React.forwardRef(
|
||||
}
|
||||
|
||||
const frameworkOptions: DockviewFrameworkOptions = {
|
||||
headerLeftActionComponent: createGroupControlElement(
|
||||
createLeftHeaderActionComponent: createGroupControlElement(
|
||||
props.leftHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
headerRightActionComponent: createGroupControlElement(
|
||||
createRightHeaderActionComponent: createGroupControlElement(
|
||||
props.rightHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
headerPrefixActionComponent: createGroupControlElement(
|
||||
createPrefixHeaderActionComponent: createGroupControlElement(
|
||||
props.prefixHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
frameworkTabComponents,
|
||||
frameworkComponents: props.components,
|
||||
frameworkComponentFactory: createFrameworkFactory(addPortal),
|
||||
createComponent: (options) => {
|
||||
return new ReactPanelContentPart(
|
||||
options.id,
|
||||
props.components[options.name],
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
},
|
||||
createTabComponent(options) {
|
||||
return new ReactPanelHeaderPart(
|
||||
options.id,
|
||||
frameworkTabComponents[options.name],
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
},
|
||||
createWatermarkComponent: props.watermarkComponent
|
||||
? () => {
|
||||
return new ReactWatermarkPart(
|
||||
'watermark',
|
||||
props.watermarkComponent!,
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
parentElement: domRef.current,
|
||||
defaultTabComponent: props.defaultTabComponent
|
||||
? DEFAULT_REACT_TAB
|
||||
: undefined,
|
||||
watermarkFrameworkComponent: props.watermarkComponent,
|
||||
};
|
||||
|
||||
const dockview = new DockviewComponent({
|
||||
@ -269,20 +294,20 @@ export const DockviewReact = React.forwardRef(
|
||||
if (!dockviewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
dockviewRef.current.updateOptions({
|
||||
frameworkComponents: props.components,
|
||||
createComponent: (options) => {
|
||||
return new ReactPanelContentPart(
|
||||
options.id,
|
||||
props.components[options.name],
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}, [props.components]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!dockviewRef.current) {
|
||||
return;
|
||||
}
|
||||
dockviewRef.current.updateOptions({
|
||||
watermarkFrameworkComponent: props.watermarkComponent,
|
||||
});
|
||||
}, [props.watermarkComponent]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!dockviewRef.current) {
|
||||
return;
|
||||
@ -299,7 +324,15 @@ export const DockviewReact = React.forwardRef(
|
||||
defaultTabComponent: props.defaultTabComponent
|
||||
? DEFAULT_REACT_TAB
|
||||
: undefined,
|
||||
frameworkTabComponents,
|
||||
createTabComponent(options) {
|
||||
return new ReactPanelHeaderPart(
|
||||
options.id,
|
||||
frameworkTabComponents[options.name],
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
},
|
||||
});
|
||||
}, [props.tabComponents, props.defaultTabComponent]);
|
||||
|
||||
@ -307,8 +340,28 @@ export const DockviewReact = React.forwardRef(
|
||||
if (!dockviewRef.current) {
|
||||
return;
|
||||
}
|
||||
|
||||
dockviewRef.current.updateOptions({
|
||||
headerRightActionComponent: createGroupControlElement(
|
||||
createWatermarkComponent: props.watermarkComponent
|
||||
? () => {
|
||||
return new ReactWatermarkPart(
|
||||
'watermark',
|
||||
props.watermarkComponent!,
|
||||
{
|
||||
addPortal,
|
||||
}
|
||||
);
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}, [props.watermarkComponent]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!dockviewRef.current) {
|
||||
return;
|
||||
}
|
||||
dockviewRef.current.updateOptions({
|
||||
createRightHeaderActionComponent: createGroupControlElement(
|
||||
props.rightHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
@ -320,7 +373,7 @@ export const DockviewReact = React.forwardRef(
|
||||
return;
|
||||
}
|
||||
dockviewRef.current.updateOptions({
|
||||
headerLeftActionComponent: createGroupControlElement(
|
||||
createLeftHeaderActionComponent: createGroupControlElement(
|
||||
props.leftHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
@ -332,7 +385,7 @@ export const DockviewReact = React.forwardRef(
|
||||
return;
|
||||
}
|
||||
dockviewRef.current.updateOptions({
|
||||
headerRightActionComponent: createGroupControlElement(
|
||||
createPrefixHeaderActionComponent: createGroupControlElement(
|
||||
props.prefixHeaderActionsComponent,
|
||||
{ addPortal }
|
||||
),
|
||||
|
||||
@ -12,6 +12,8 @@ Please reference docs @ [dockview.dev](https://dockview.dev).
|
||||
|
||||
- Add `onDidActivePanelChange` event to group api [#541](https://github.com/mathuo/dockview/pull/541)
|
||||
|
||||
- Add `inactive` property to `addPanel` method to add panels without making them active [#572](https://github.com/mathuo/dockview/issues/572)
|
||||
|
||||
## 🛠 Miscs
|
||||
|
||||
- Bug: width and height set incorrectly on floating groups when resized [#580](https://github.com/mathuo/dockview/issues/580)
|
||||
@ -38,6 +40,9 @@ Please reference docs @ [dockview.dev](https://dockview.dev).
|
||||
## 🔥 Breaking changes
|
||||
|
||||
- [dockview-core] Replace DockviewComponent `canDisplayOverlay` option with `onUnhandledDragOverEvent` event [#541](https://github.com/mathuo/dockview/pull/541)
|
||||
- [dockview-core] Rename `createRightHeaderActionsElement` to `headerRightActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
|
||||
- [dockview-core] Rename `createLeftHeaderActionsElement` to `headerLeftActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
|
||||
- [dockview-core] Rename `createPrefixHeaderActionsElement` to `headerPrefixActionComponent` [#541](https://github.com/mathuo/dockview/pull/541)
|
||||
- [dockview-core] Rename `createRightHeaderActionsElement` to `createRightHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
- [dockview-core] Rename `createLeftHeaderActionsElement` to `createLeftHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
- [dockview-core] Rename `createPrefixHeaderActionsElement` to `createPrefixHeaderActionElement` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
- [dockview-core] Remove `frameworkTabComponents` and `tabComponents`, replaced by `createTabComponent` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
- [dockview-core] Remove `frameworkComponents` and `components`, replaced by `createComponent` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
- [dockview-core] Remove `watermarkFrameworkComponent` and `watermarkComponent`, replaced by `createWatermarkComponent` [#576](https://github.com/mathuo/dockview/pull/576)
|
||||
@ -10,8 +10,8 @@
|
||||
"swizzle": "docusaurus swizzle @docusaurus/theme-classic",
|
||||
"docs:version": "docusaurus docs:version",
|
||||
"typecheck": "tsc",
|
||||
"create-templates": "node scripts/buildTemplates.mjs",
|
||||
"create-templates:local": "node scripts/buildTemplates.mjs --local"
|
||||
"build-templates": "node scripts/buildTemplates.mjs",
|
||||
"build-templates:local": "node scripts/buildTemplates.mjs --local"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
@ -50,4 +50,4 @@
|
||||
"@types/uuid": "^9.0.7",
|
||||
"docusaurus-plugin-sass": "^0.2.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -26,14 +26,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
panel: Panel,
|
||||
},
|
||||
};
|
||||
panel: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -49,7 +42,6 @@ const App = defineComponent({
|
||||
style="width:100%; height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
>
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
@ -117,25 +117,15 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
Tab,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
tabComponents: {
|
||||
default: Tab,
|
||||
},
|
||||
};
|
||||
defaultPanel: Panel,
|
||||
defaultTab: Tab,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
event.api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
tabComponent: 'default',
|
||||
component: 'defaultPanel',
|
||||
tabComponent: 'defaultTab',
|
||||
params: {
|
||||
myValue: Date.now(),
|
||||
},
|
||||
@ -143,8 +133,8 @@ const App = defineComponent({
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
tabComponent: 'default',
|
||||
component: 'defaultPanel',
|
||||
tabComponent: 'defaultTab',
|
||||
params: {
|
||||
myValue: Date.now(),
|
||||
},
|
||||
@ -156,8 +146,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:tabComponents="tabComponents"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -148,17 +148,12 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
LeftAction,
|
||||
RightAction,
|
||||
default: Panel,
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
api: null as DockviewApi | null,
|
||||
bounds: undefined,
|
||||
disableFloatingGroups: false,
|
||||
@ -220,11 +215,9 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:floatingGroupBounds="bounds"
|
||||
:leftHeaderActionsComponent="leftAction"
|
||||
:rightHeaderActionsComponent="rightAction"
|
||||
:prefixHeaderActionsComponent="prefixAction"
|
||||
leftHeaderActionsComponent="leftAction"
|
||||
rightHeaderActionsComponent="rightAction"
|
||||
:disableFloatingGroups="disableFloatingGroups"
|
||||
</dockview-vue>
|
||||
</div>
|
||||
|
||||
@ -120,20 +120,10 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
LeftAction,
|
||||
RightAction,
|
||||
PrefixAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
prefixAction: PrefixAction,
|
||||
};
|
||||
default: Panel,
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
prefixAction: PrefixAction,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -167,10 +157,9 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:leftHeaderActionsComponent="leftAction"
|
||||
:rightHeaderActionsComponent="rightAction"
|
||||
:prefixHeaderActionsComponent="prefixAction"
|
||||
leftHeaderActionsComponent="leftAction"
|
||||
rightHeaderActionsComponent="rightAction"
|
||||
prefixHeaderActionsComponent="prefixAction"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -121,15 +121,11 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
LeftAction,
|
||||
default: Panel,
|
||||
leftAction: LeftAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
leftAction: LeftAction,
|
||||
api: null as DockviewApi | null,
|
||||
};
|
||||
},
|
||||
@ -201,11 +197,8 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:floatingGroupBounds="bounds"
|
||||
:leftHeaderActionsComponent="leftAction"
|
||||
:rightHeaderActionsComponent="rightAction"
|
||||
:prefixHeaderActionsComponent="prefixAction"
|
||||
leftHeaderActionsComponent="leftAction"
|
||||
:disableFloatingGroups="disableFloatingGroups"
|
||||
</dockview-vue>
|
||||
</div>
|
||||
|
||||
@ -38,13 +38,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -83,7 +77,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:locked=true
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
@ -150,18 +150,9 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
LeftAction,
|
||||
RightAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
};
|
||||
default: Panel,
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -208,9 +199,8 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:leftHeaderActionsComponent="leftAction"
|
||||
:rightHeaderActionsComponent="rightAction"
|
||||
leftHeaderActionsComponent="leftAction"
|
||||
rightHeaderActionsComponent="rightAction"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -36,15 +36,7 @@ const InnerDockview = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
innerDockview: InnerDockview,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -68,7 +60,6 @@ const InnerDockview = defineComponent({
|
||||
<dockview-vue
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
:components="components"
|
||||
@ready="onReady"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
@ -77,16 +68,8 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
InnerDockview,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
innerDockview: InnerDockview,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
innerDockview: InnerDockview,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -111,7 +94,6 @@ const App = defineComponent({
|
||||
<dockview-vue
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
:components="components"
|
||||
@ready="onReady"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
@ -150,17 +150,12 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
LeftAction,
|
||||
RightAction,
|
||||
default: Panel,
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
leftAction: LeftAction,
|
||||
rightAction: RightAction,
|
||||
api: null as DockviewApi | null,
|
||||
bounds: undefined,
|
||||
disableFloatingGroups: false,
|
||||
@ -222,11 +217,10 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:floatingGroupBounds="bounds"
|
||||
:leftHeaderActionsComponent="leftAction"
|
||||
:rightHeaderActionsComponent="rightAction"
|
||||
:prefixHeaderActionsComponent="prefixAction"
|
||||
leftHeaderActionsComponent="leftAction"
|
||||
rightHeaderActionsComponent="rightAction"
|
||||
prefixHeaderActionsComponent="prefixAction"
|
||||
:disableFloatingGroups="disableFloatingGroups"
|
||||
</dockview-vue>
|
||||
</div>
|
||||
|
||||
@ -53,14 +53,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -96,7 +89,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -36,13 +36,10 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
default: Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
value: 50,
|
||||
};
|
||||
},
|
||||
@ -128,7 +125,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:disableFloatingGroups=true
|
||||
</dockview-vue>
|
||||
</div>
|
||||
|
||||
@ -65,14 +65,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -119,7 +112,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -51,15 +51,9 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
fixedHeightContainer: FixedHeightContainer,
|
||||
overflowContainer: OverflowContainer,
|
||||
userDefinedOverflowContainer: UserDefinedOverflowContainer,
|
||||
},
|
||||
};
|
||||
fixedHeightContainer: FixedHeightContainer,
|
||||
overflowContainer: OverflowContainer,
|
||||
userDefinedOverflowContainer: UserDefinedOverflowContainer,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -89,7 +83,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:disableFloatingGroups=true
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
@ -40,14 +40,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
setup() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
data() {
|
||||
return { api: null as DockviewApi | null };
|
||||
@ -99,7 +92,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:disableFloatingGroups=true
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
@ -103,23 +103,15 @@ const App = defineComponent({
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
tabComponents: {
|
||||
default: Tab,
|
||||
},
|
||||
};
|
||||
defaultPanel: Panel,
|
||||
defaultTab: Tab,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
event.api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
tabComponent: 'default',
|
||||
component: 'defaultPanel',
|
||||
tabComponent: 'defaultTab',
|
||||
params: {
|
||||
myValue: Date.now(),
|
||||
},
|
||||
@ -127,8 +119,8 @@ const App = defineComponent({
|
||||
|
||||
event.api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
tabComponent: 'default',
|
||||
component: 'defaultPanel',
|
||||
tabComponent: 'defaultTab',
|
||||
params: {
|
||||
myValue: Date.now(),
|
||||
},
|
||||
@ -140,8 +132,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:tabComponents="tabComponents"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -51,14 +51,7 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
};
|
||||
default: Panel,
|
||||
},
|
||||
methods: {
|
||||
onReady(event: DockviewReadyEvent) {
|
||||
@ -96,7 +89,6 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
</dockview-vue>`,
|
||||
});
|
||||
|
||||
|
||||
@ -68,14 +68,11 @@ const App = defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
'dockview-vue': DockviewVue,
|
||||
Panel,
|
||||
default: Panel,
|
||||
watermarkComponent: WatermarkPanel,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
components: {
|
||||
default: Panel,
|
||||
},
|
||||
watermarkComponent: WatermarkPanel,
|
||||
api: null as DockviewApi | null,
|
||||
};
|
||||
},
|
||||
@ -109,8 +106,7 @@ const App = defineComponent({
|
||||
style="width:100%;height:100%"
|
||||
class="dockview-theme-abyss"
|
||||
@ready="onReady"
|
||||
:components="components"
|
||||
:watermarkComponent="watermarkComponent"
|
||||
watermarkComponent="watermarkComponent"
|
||||
>
|
||||
</dockview-vue>
|
||||
</div>`,
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
{
|
||||
"extends": "./tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx"
|
||||
"jsx": "react-jsx",
|
||||
"noImplicitAny": false
|
||||
},
|
||||
"include": ["**/*.spec.ts", "./jest-setup.ts"]
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user