Skip to content

Commit d811ca6

Browse files
mathuomathuo
committed
feat: improved dnd model
1 parent bb93c9e commit d811ca6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1231
-349
lines changed

‎packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ describe('droptarget', () => {
1616
beforeEach(() => {
1717
element = document.createElement('div');
1818

19-
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
19+
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
2020
() => 100
2121
);
22-
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
22+
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 200);
2323
});
2424

2525
test('that dragover events are marked', () => {

‎packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts

+21-30
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
88
import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
99
import { Tab } from '../../../dockview/components/tab/tab';
1010
import { IDockviewPanel } from '../../../dockview/dockviewPanel';
11+
import { fromPartial } from '@total-typescript/shoehorn';
1112

1213
describe('tab', () => {
1314
test('that empty tab has inactive-tab class', () => {
@@ -46,15 +47,10 @@ describe('tab', () => {
4647
id: 'testcomponentid',
4748
};
4849
});
49-
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
50-
() => {
51-
return {
52-
canDisplayOverlay: jest.fn(),
53-
};
54-
}
55-
);
5650

57-
const groupView = new groupviewMock() as DockviewGroupPanelModel;
51+
const groupView = fromPartial<DockviewGroupPanelModel>({
52+
canDisplayOverlay: jest.fn(),
53+
});
5854

5955
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
6056
return {
@@ -72,38 +68,33 @@ describe('tab', () => {
7268
groupPanel
7369
);
7470

75-
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
71+
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
7672
() => 100
7773
);
78-
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
74+
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
7975
() => 100
8076
);
8177

8278
fireEvent.dragEnter(cut.element);
8379
fireEvent.dragOver(cut.element);
8480

85-
expect(groupView.canDisplayOverlay).toBeCalled();
81+
expect(groupView.canDisplayOverlay).toHaveBeenCalled();
8682

8783
expect(
8884
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
8985
).toBe(0);
9086
});
9187

92-
test('that if you drag over yourself no drop target is shown', () => {
88+
test('that if you drag over yourself a drop target is shown', () => {
9389
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
9490
return {
9591
id: 'testcomponentid',
9692
};
9793
});
98-
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
99-
() => {
100-
return {
101-
canDisplayOverlay: jest.fn(),
102-
};
103-
}
104-
);
10594

106-
const groupView = new groupviewMock() as DockviewGroupPanelModel;
95+
const groupView = fromPartial<DockviewGroupPanelModel>({
96+
canDisplayOverlay: jest.fn(),
97+
});
10798

10899
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
109100
return {
@@ -121,10 +112,10 @@ describe('tab', () => {
121112
groupPanel
122113
);
123114

124-
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
115+
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
125116
() => 100
126117
);
127-
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
118+
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
128119
() => 100
129120
);
130121

@@ -136,11 +127,11 @@ describe('tab', () => {
136127
fireEvent.dragEnter(cut.element);
137128
fireEvent.dragOver(cut.element);
138129

139-
expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
130+
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
140131

141132
expect(
142133
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
143-
).toBe(0);
134+
).toBe(1);
144135
});
145136

146137
test('that if you drag over another tab a drop target is shown', () => {
@@ -175,10 +166,10 @@ describe('tab', () => {
175166
groupPanel
176167
);
177168

178-
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
169+
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
179170
() => 100
180171
);
181-
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
172+
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
182173
() => 100
183174
);
184175

@@ -229,10 +220,10 @@ describe('tab', () => {
229220
groupPanel
230221
);
231222

232-
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
223+
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
233224
() => 100
234225
);
235-
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
226+
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
236227
() => 100
237228
);
238229

@@ -289,10 +280,10 @@ describe('tab', () => {
289280
groupPanel
290281
);
291282

292-
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
283+
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
293284
() => 100
294285
);
295-
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
286+
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
296287
() => 100
297288
);
298289

‎packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts

+26-23
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,16 @@ describe('tabsContainer', () => {
4242

4343
const emptySpace = cut.element
4444
.getElementsByClassName('dv-void-container')
45-
.item(0);
45+
.item(0) as HTMLElement;
4646

4747
if (!emptySpace!) {
4848
fail('element not found');
4949
}
5050

51-
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
51+
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
5252
() => 100
5353
);
54-
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
54+
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
5555
() => 100
5656
);
5757

@@ -73,15 +73,14 @@ describe('tabsContainer', () => {
7373
options: {},
7474
});
7575

76-
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
77-
() => {
78-
return {
79-
canDisplayOverlay: jest.fn(),
80-
};
81-
}
82-
);
76+
const dropTargetContainer = document.createElement('div');
8377

84-
const groupView = new groupviewMock() as DockviewGroupPanelModel;
78+
const groupView = fromPartial<DockviewGroupPanelModel>({
79+
canDisplayOverlay: jest.fn(),
80+
// dropTargetContainer: new DropTargetAnchorContainer(
81+
// dropTargetContainer
82+
// ),
83+
});
8584

8685
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
8786
return {
@@ -97,16 +96,16 @@ describe('tabsContainer', () => {
9796

9897
const emptySpace = cut.element
9998
.getElementsByClassName('dv-void-container')
100-
.item(0);
99+
.item(0) as HTMLElement;
101100

102101
if (!emptySpace!) {
103102
fail('element not found');
104103
}
105104

106-
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
105+
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
107106
() => 100
108107
);
109-
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
108+
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
110109
() => 100
111110
);
112111

@@ -129,6 +128,10 @@ describe('tabsContainer', () => {
129128
expect(
130129
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
131130
).toBe(1);
131+
// expect(
132+
// dropTargetContainer.getElementsByClassName('dv-drop-target-anchor')
133+
// .length
134+
// ).toBe(1);
132135
});
133136

134137
test('that dropping over the empty space should render a drop target', () => {
@@ -166,16 +169,16 @@ describe('tabsContainer', () => {
166169

167170
const emptySpace = cut.element
168171
.getElementsByClassName('dv-void-container')
169-
.item(0);
172+
.item(0) as HTMLElement;
170173

171174
if (!emptySpace!) {
172175
fail('element not found');
173176
}
174177

175-
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
178+
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
176179
() => 100
177180
);
178-
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
181+
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
179182
() => 100
180183
);
181184

@@ -229,16 +232,16 @@ describe('tabsContainer', () => {
229232

230233
const emptySpace = cut.element
231234
.getElementsByClassName('dv-void-container')
232-
.item(0);
235+
.item(0) as HTMLElement;
233236

234237
if (!emptySpace!) {
235238
fail('element not found');
236239
}
237240

238-
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
241+
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
239242
() => 100
240243
);
241-
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
244+
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
242245
() => 100
243246
);
244247

@@ -291,16 +294,16 @@ describe('tabsContainer', () => {
291294

292295
const emptySpace = cut.element
293296
.getElementsByClassName('dv-void-container')
294-
.item(0);
297+
.item(0) as HTMLElement;
295298

296299
if (!emptySpace!) {
297300
fail('element not found');
298301
}
299302

300-
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
303+
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
301304
() => 100
302305
);
303-
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
306+
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
304307
() => 100
305308
);
306309

‎packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts

+4-36
Original file line numberDiff line numberDiff line change
@@ -133,11 +133,11 @@ describe('dockviewComponent', () => {
133133
},
134134
className: 'test-a test-b',
135135
});
136-
expect(dockview.element.className).toBe('test-a test-b');
136+
expect(dockview.element.className).toBe('test-a test-b dockview-theme-abyss');
137137

138138
dockview.updateOptions({ className: 'test-b test-c' });
139139

140-
expect(dockview.element.className).toBe('test-b test-c');
140+
expect(dockview.element.className).toBe('dockview-theme-abyss test-b test-c');
141141
});
142142

143143
describe('memory leakage', () => {
@@ -3339,10 +3339,10 @@ describe('dockviewComponent', () => {
33393339
position: { direction: 'right' },
33403340
});
33413341

3342-
Object.defineProperty(dockview.element, 'clientWidth', {
3342+
Object.defineProperty(dockview.element, 'offsetWidth', {
33433343
get: () => 100,
33443344
});
3345-
Object.defineProperty(dockview.element, 'clientHeight', {
3345+
Object.defineProperty(dockview.element, 'offsetHeight', {
33463346
get: () => 100,
33473347
});
33483348

@@ -6652,36 +6652,4 @@ describe('dockviewComponent', () => {
66526652
expect(api.panels.length).toBe(3);
66536653
expect(api.groups.length).toBe(3);
66546654
});
6655-
6656-
describe('updateOptions', () => {
6657-
test('gap', () => {
6658-
const container = document.createElement('div');
6659-
6660-
const dockview = new DockviewComponent(container, {
6661-
createComponent(options) {
6662-
switch (options.name) {
6663-
case 'default':
6664-
return new PanelContentPartTest(
6665-
options.id,
6666-
options.name
6667-
);
6668-
default:
6669-
throw new Error(`unsupported`);
6670-
}
6671-
},
6672-
gap: 6,
6673-
});
6674-
6675-
expect(dockview.gap).toBe(6);
6676-
6677-
dockview.updateOptions({ gap: 10 });
6678-
expect(dockview.gap).toBe(10);
6679-
6680-
dockview.updateOptions({});
6681-
expect(dockview.gap).toBe(10);
6682-
6683-
dockview.updateOptions({ gap: 15 });
6684-
expect(dockview.gap).toBe(15);
6685-
});
6686-
});
66876655
});

0 commit comments

Comments
 (0)