Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: improved dnd model #850

Merged
merged 2 commits into from
Feb 23, 2025
+1,231 −349
Merged

feat: improved dnd model #850

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d811ca6
feat: improved dnd model
mathuo Jan 30, 2025
3530c98
Merge branch 'master' of https://github.com/mathuo/dockview into 849-…
mathuo Feb 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,10 @@ describe('droptarget', () => {
beforeEach(() => {
element = document.createElement('div');

jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 200);
});

test('that dragover events are marked', () => {
Expand Down
51 changes: 21 additions & 30 deletions packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { DockviewGroupPanel } from '../../../dockview/dockviewGroupPanel';
import { DockviewGroupPanelModel } from '../../../dockview/dockviewGroupPanelModel';
import { Tab } from '../../../dockview/components/tab/tab';
import { IDockviewPanel } from '../../../dockview/dockviewPanel';
import { fromPartial } from '@total-typescript/shoehorn';

describe('tab', () => {
test('that empty tab has inactive-tab class', () => {
Expand Down Expand Up @@ -46,15 +47,10 @@ describe('tab', () => {
id: 'testcomponentid',
};
});
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
() => {
return {
canDisplayOverlay: jest.fn(),
};
}
);

const groupView = new groupviewMock() as DockviewGroupPanelModel;
const groupView = fromPartial<DockviewGroupPanelModel>({
canDisplayOverlay: jest.fn(),
});

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

jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
() => 100
);

fireEvent.dragEnter(cut.element);
fireEvent.dragOver(cut.element);

expect(groupView.canDisplayOverlay).toBeCalled();
expect(groupView.canDisplayOverlay).toHaveBeenCalled();

expect(
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
});

test('that if you drag over yourself no drop target is shown', () => {
test('that if you drag over yourself a drop target is shown', () => {
const accessorMock = jest.fn<Partial<DockviewComponent>, []>(() => {
return {
id: 'testcomponentid',
};
});
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
() => {
return {
canDisplayOverlay: jest.fn(),
};
}
);

const groupView = new groupviewMock() as DockviewGroupPanelModel;
const groupView = fromPartial<DockviewGroupPanelModel>({
canDisplayOverlay: jest.fn(),
});

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

jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
() => 100
);

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

expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);

expect(
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(0);
).toBe(1);
});

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

jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down Expand Up @@ -229,10 +220,10 @@ describe('tab', () => {
groupPanel
);

jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down Expand Up @@ -289,10 +280,10 @@ describe('tab', () => {
groupPanel
);

jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down
49 changes: 26 additions & 23 deletions packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,16 @@ describe('tabsContainer', () => {

const emptySpace = cut.element
.getElementsByClassName('dv-void-container')
.item(0);
.item(0) as HTMLElement;

if (!emptySpace!) {
fail('element not found');
}

jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand All @@ -73,15 +73,14 @@ describe('tabsContainer', () => {
options: {},
});

const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
() => {
return {
canDisplayOverlay: jest.fn(),
};
}
);
const dropTargetContainer = document.createElement('div');

const groupView = new groupviewMock() as DockviewGroupPanelModel;
const groupView = fromPartial<DockviewGroupPanelModel>({
canDisplayOverlay: jest.fn(),
// dropTargetContainer: new DropTargetAnchorContainer(
// dropTargetContainer
// ),
});

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

const emptySpace = cut.element
.getElementsByClassName('dv-void-container')
.item(0);
.item(0) as HTMLElement;

if (!emptySpace!) {
fail('element not found');
}

jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand All @@ -129,6 +128,10 @@ describe('tabsContainer', () => {
expect(
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
).toBe(1);
// expect(
// dropTargetContainer.getElementsByClassName('dv-drop-target-anchor')
// .length
// ).toBe(1);
});

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

const emptySpace = cut.element
.getElementsByClassName('dv-void-container')
.item(0);
.item(0) as HTMLElement;

if (!emptySpace!) {
fail('element not found');
}

jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down Expand Up @@ -229,16 +232,16 @@ describe('tabsContainer', () => {

const emptySpace = cut.element
.getElementsByClassName('dv-void-container')
.item(0);
.item(0) as HTMLElement;

if (!emptySpace!) {
fail('element not found');
}

jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down Expand Up @@ -291,16 +294,16 @@ describe('tabsContainer', () => {

const emptySpace = cut.element
.getElementsByClassName('dv-void-container')
.item(0);
.item(0) as HTMLElement;

if (!emptySpace!) {
fail('element not found');
}

jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
() => 100
);
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
() => 100
);

Expand Down
40 changes: 4 additions & 36 deletions packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,11 @@ describe('dockviewComponent', () => {
},
className: 'test-a test-b',
});
expect(dockview.element.className).toBe('test-a test-b');
expect(dockview.element.className).toBe('test-a test-b dockview-theme-abyss');

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

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

describe('memory leakage', () => {
Expand Down Expand Up @@ -3376,10 +3376,10 @@ describe('dockviewComponent', () => {
position: { direction: 'right' },
});

Object.defineProperty(dockview.element, 'clientWidth', {
Object.defineProperty(dockview.element, 'offsetWidth', {
get: () => 100,
});
Object.defineProperty(dockview.element, 'clientHeight', {
Object.defineProperty(dockview.element, 'offsetHeight', {
get: () => 100,
});

Expand Down Expand Up @@ -6725,36 +6725,4 @@ describe('dockviewComponent', () => {
expect(api.panels.length).toBe(3);
expect(api.groups.length).toBe(3);
});

describe('updateOptions', () => {
test('gap', () => {
const container = document.createElement('div');

const dockview = new DockviewComponent(container, {
createComponent(options) {
switch (options.name) {
case 'default':
return new PanelContentPartTest(
options.id,
options.name
);
default:
throw new Error(`unsupported`);
}
},
gap: 6,
});

expect(dockview.gap).toBe(6);

dockview.updateOptions({ gap: 10 });
expect(dockview.gap).toBe(10);

dockview.updateOptions({});
expect(dockview.gap).toBe(10);

dockview.updateOptions({ gap: 15 });
expect(dockview.gap).toBe(15);
});
});
});
Loading
Loading