mirror of
https://github.com/mathuo/dockview
synced 2025-05-05 19:18:25 +00:00
Compare commits
No commits in common. "master" and "v1.13.1" have entirely different histories.
@ -1,8 +1,6 @@
|
||||
{
|
||||
"packages": [
|
||||
"packages/dockview-core",
|
||||
"packages/dockview-vue",
|
||||
"packages/dockview-react",
|
||||
"packages/dockview"
|
||||
],
|
||||
"sandboxes": [
|
||||
@ -43,4 +41,4 @@
|
||||
"/packages/docs/sandboxes/javascript/vanilla-dockview"
|
||||
],
|
||||
"node": "18"
|
||||
}
|
||||
}
|
||||
4
.github/workflows/deploy-docs.yml
vendored
4
.github/workflows/deploy-docs.yml
vendored
@ -26,10 +26,6 @@ jobs:
|
||||
working-directory: packages/dockview-core
|
||||
- run: npm run build
|
||||
working-directory: packages/dockview
|
||||
- run: npm run build
|
||||
working-directory: packages/dockview-vue
|
||||
- run: npm run build
|
||||
working-directory: packages/dockview-react
|
||||
- run: npm run build
|
||||
working-directory: packages/docs
|
||||
- run: npm run docs
|
||||
|
||||
2
.github/workflows/main.yml
vendored
2
.github/workflows/main.yml
vendored
@ -27,7 +27,7 @@ jobs:
|
||||
- run: npm run build
|
||||
- run: npm run test:cov
|
||||
- name: SonarCloud Scan
|
||||
uses: sonarsource/sonarqube-scan-action@v5
|
||||
uses: SonarSource/sonarcloud-github-action@master
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # Needed to get PR information, if any
|
||||
SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
|
||||
|
||||
12
.github/workflows/publish.yml
vendored
12
.github/workflows/publish.yml
vendored
@ -35,12 +35,6 @@ jobs:
|
||||
- name: Publish dockview
|
||||
run: npm publish --provenance
|
||||
working-directory: packages/dockview
|
||||
- name: Publish dockview-vue
|
||||
run: npm publish --provenance
|
||||
working-directory: packages/dockview-vue
|
||||
- name: Publish dockview-react
|
||||
run: npm publish --provenance
|
||||
working-directory: packages/dockview-react
|
||||
publish-experimental:
|
||||
if: github.event_name == 'workflow_dispatch'
|
||||
runs-on: ubuntu-latest
|
||||
@ -70,9 +64,3 @@ jobs:
|
||||
- name: Publish dockview
|
||||
run: npm publish --provenance --tag experimental
|
||||
working-directory: packages/dockview
|
||||
- name: Publish dockview-vue
|
||||
run: npm publish --provenance --tag experimental
|
||||
working-directory: packages/dockview-vue
|
||||
- name: Publish dockview-react
|
||||
run: npm publish --provenance --tag experimental
|
||||
working-directory: packages/dockview-react
|
||||
|
||||
30
README.md
30
README.md
@ -1,18 +1,18 @@
|
||||
<div align="center">
|
||||
<h1>dockview</h1>
|
||||
|
||||
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
|
||||
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews with ReactJS support written in TypeScript</p>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/dockview-core)
|
||||
[](https://www.npmjs.com/package/dockview-core)
|
||||
[](https://www.npmjs.com/package/dockview)
|
||||
[](https://www.npmjs.com/package/dockview)
|
||||
[](https://github.com/mathuo/dockview/actions?query=workflow%3ACI)
|
||||
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
|
||||
[](https://sonarcloud.io/summary/overall?id=mathuo_dockview)
|
||||
[](https://bundlephobia.com/result?p=dockview-core)
|
||||
[](https://bundlephobia.com/result?p=dockview)
|
||||
|
||||
##
|
||||
|
||||
@ -35,4 +35,24 @@ Please see the website: https://dockview.dev
|
||||
- Transparent builds and Code Analysis
|
||||
- Security at mind - verifed publishing and builds through GitHub Actions
|
||||
|
||||
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#user-content-provenance).
|
||||
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
|
||||
|
||||
## Quick start
|
||||
|
||||
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview).
|
||||
|
||||
```
|
||||
npm install --save dockview
|
||||
```
|
||||
|
||||
Within your project you must import or reference the stylesheet at `dockview/dist/styles/dockview.css` and attach a theme.
|
||||
|
||||
```css
|
||||
@import '~dockview/dist/styles/dockview.css';
|
||||
```
|
||||
|
||||
You should also attach a dockview theme to an element containing your components. For example:
|
||||
|
||||
```html
|
||||
<body classname="dockview-theme-dark"></body>
|
||||
```
|
||||
|
||||
@ -1,8 +0,0 @@
|
||||
# Reporting a Vulnerability
|
||||
|
||||
- Dockview is an entirely open source project.
|
||||
- All build and publication scripts use public Github Action files found [here](https://github.com/mathuo/dockview/tree/master/.github/workflows).
|
||||
- All npm publications are verified through the use of [provenance statements](https://docs.npmjs.com/generating-provenance-statements/).
|
||||
- All builds are scanned with SonarCube and outputs can be found [here](https://sonarcloud.io/summary/overall?id=mathuo_dockview).
|
||||
|
||||
If you believe you have found a security or vulnerability issue please send a complete example to github.mathuo@gmail.com where it will be investigated.
|
||||
@ -2,11 +2,11 @@
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"version": "4.2.5",
|
||||
"version": "1.13.1",
|
||||
"npmClient": "yarn",
|
||||
"command": {
|
||||
"publish": {
|
||||
"message": "chore(release): publish %s"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"packages/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "lerna run build --scope '{dockview-core,dockview,dockview-vue,dockview-react}'",
|
||||
"build": "lerna run build --scope '{dockview-core,dockview}'",
|
||||
"clean": "lerna run clean",
|
||||
"docs": "typedoc",
|
||||
"generate-docs": "node scripts/docs.mjs",
|
||||
@ -58,7 +58,7 @@
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"jest-sonar-reporter": "^2.0.0",
|
||||
"jsdom": "^23.0.1",
|
||||
"lerna": "^8.2.1",
|
||||
"lerna": "^8.0.1",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"rimraf": "^5.0.5",
|
||||
@ -77,5 +77,8 @@
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ag-grid-vue3": "^31.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview-angular",
|
||||
"version": "4.2.5",
|
||||
"version": "1.13.1",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews",
|
||||
"keywords": [
|
||||
"splitview",
|
||||
@ -54,6 +54,6 @@
|
||||
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --coverage"
|
||||
},
|
||||
"dependencies": {
|
||||
"dockview-core": "^4.2.5"
|
||||
"dockview-core": "^1.13.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<div align="center">
|
||||
<h1>dockview</h1>
|
||||
|
||||
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue and Vanilla TypeScript</p>
|
||||
<p>Zero dependency layout manager supporting tabs, groups, grids and splitviews written in TypeScript</p>
|
||||
|
||||
</div>
|
||||
|
||||
@ -36,3 +36,23 @@ Please see the website: https://dockview.dev
|
||||
- Security at mind - verifed publishing and builds through GitHub Actions
|
||||
|
||||
Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview#Provenance).
|
||||
|
||||
## Quick start
|
||||
|
||||
Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. You can install dockview from [npm](https://www.npmjs.com/package/dockview-core).
|
||||
|
||||
```
|
||||
npm install --save dockview-core
|
||||
```
|
||||
|
||||
Within your project you must import or reference the stylesheet at `dockview-core/dist/styles/dockview.css` and attach a theme.
|
||||
|
||||
```css
|
||||
@import '~dockview-core/dist/styles/dockview.css';
|
||||
```
|
||||
|
||||
You should also attach a dockview theme to an element containing your components. For example:
|
||||
|
||||
```html
|
||||
<body classname="dockview-theme-dark"></body>
|
||||
```
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview-core",
|
||||
"version": "4.2.5",
|
||||
"version": "1.13.1",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews",
|
||||
"keywords": [
|
||||
"splitview",
|
||||
|
||||
@ -1,28 +1,23 @@
|
||||
import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import {
|
||||
TabPartInitParameters,
|
||||
GroupPanelPartInitParameters,
|
||||
IContentRenderer,
|
||||
ITabRenderer,
|
||||
} from '../../dockview/types';
|
||||
import { PanelUpdateEvent } from '../../panel/types';
|
||||
import { TabLocation } from '../../dockview/framework';
|
||||
|
||||
export class DockviewPanelModelMock implements IDockviewPanelModel {
|
||||
constructor(
|
||||
readonly contentComponent: string,
|
||||
readonly content: IContentRenderer,
|
||||
readonly tabComponent: string,
|
||||
readonly tab: ITabRenderer
|
||||
readonly tabComponent?: string,
|
||||
readonly tab?: ITabRenderer
|
||||
) {
|
||||
//
|
||||
}
|
||||
|
||||
createTabRenderer(tabLocation: TabLocation): ITabRenderer {
|
||||
return this.tab;
|
||||
}
|
||||
|
||||
init(params: TabPartInitParameters): void {
|
||||
init(params: GroupPanelPartInitParameters): void {
|
||||
//
|
||||
}
|
||||
|
||||
@ -1,45 +0,0 @@
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
|
||||
export function setupMockWindow() {
|
||||
const listeners: Record<string, (() => void)[]> = {};
|
||||
|
||||
let width = 1000;
|
||||
let height = 2000;
|
||||
|
||||
return fromPartial<Window>({
|
||||
addEventListener: (type: string, listener: () => void) => {
|
||||
if (!listeners[type]) {
|
||||
listeners[type] = [];
|
||||
}
|
||||
listeners[type].push(listener);
|
||||
if (type === 'load') {
|
||||
listener();
|
||||
}
|
||||
},
|
||||
removeEventListener: (type: string, listener: () => void) => {
|
||||
if (listeners[type]) {
|
||||
const index = listeners[type].indexOf(listener);
|
||||
if (index > -1) {
|
||||
listeners[type].splice(index, 1);
|
||||
}
|
||||
}
|
||||
},
|
||||
dispatchEvent: (event: Event) => {
|
||||
const items = listeners[event.type];
|
||||
if (!items) {
|
||||
return;
|
||||
}
|
||||
items.forEach((item) => item());
|
||||
},
|
||||
document: document,
|
||||
close: () => {
|
||||
listeners['beforeunload']?.forEach((f) => f());
|
||||
},
|
||||
get innerWidth() {
|
||||
return width++;
|
||||
},
|
||||
get innerHeight() {
|
||||
return height++;
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -44,30 +44,3 @@ export function createOffsetDragOverEvent(params: {
|
||||
export function exhaustMicrotaskQueue(): Promise<void> {
|
||||
return new Promise<void>((resolve) => resolve());
|
||||
}
|
||||
|
||||
export const mockGetBoundingClientRect = ({
|
||||
left,
|
||||
top,
|
||||
height,
|
||||
width,
|
||||
}: {
|
||||
left: number;
|
||||
top: number;
|
||||
height: number;
|
||||
width: number;
|
||||
}) => {
|
||||
const result = {
|
||||
left,
|
||||
top,
|
||||
height,
|
||||
width,
|
||||
right: left + width,
|
||||
bottom: top + height,
|
||||
x: left,
|
||||
y: top,
|
||||
};
|
||||
return {
|
||||
...result,
|
||||
toJSON: () => result,
|
||||
};
|
||||
};
|
||||
|
||||
@ -9,8 +9,7 @@ describe('groupPanelApi', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const panelMock = jest.fn<DockviewPanel, []>(() => {
|
||||
@ -50,8 +49,7 @@ describe('groupPanelApi', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupViewPanel = new DockviewGroupPanel(
|
||||
@ -83,8 +81,7 @@ describe('groupPanelApi', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupViewPanel = new DockviewGroupPanel(
|
||||
|
||||
@ -70,8 +70,8 @@ describe('abstractDragHandler', () => {
|
||||
expect(span.style.pointerEvents).toBeFalsy();
|
||||
|
||||
fireEvent.dragEnd(element);
|
||||
expect(iframe.style.pointerEvents).toBe('');
|
||||
expect(webview.style.pointerEvents).toBe('');
|
||||
expect(iframe.style.pointerEvents).toBe('auto');
|
||||
expect(webview.style.pointerEvents).toBe('auto');
|
||||
expect(span.style.pointerEvents).toBeFalsy();
|
||||
|
||||
handler.dispose();
|
||||
@ -114,8 +114,8 @@ describe('abstractDragHandler', () => {
|
||||
expect(span.style.pointerEvents).toBeFalsy();
|
||||
|
||||
handler.dispose();
|
||||
expect(iframe.style.pointerEvents).toBe('');
|
||||
expect(webview.style.pointerEvents).toBe('');
|
||||
expect(iframe.style.pointerEvents).toBe('auto');
|
||||
expect(webview.style.pointerEvents).toBe('auto');
|
||||
expect(span.style.pointerEvents).toBeFalsy();
|
||||
});
|
||||
|
||||
@ -172,7 +172,7 @@ describe('abstractDragHandler', () => {
|
||||
const event = new Event('dragstart');
|
||||
const spy = jest.spyOn(event, 'preventDefault');
|
||||
fireEvent(element, event);
|
||||
expect(spy).toHaveBeenCalledTimes(0);
|
||||
expect(spy).toBeCalledTimes(0);
|
||||
|
||||
handler.dispose();
|
||||
});
|
||||
|
||||
@ -16,10 +16,10 @@ describe('droptarget', () => {
|
||||
beforeEach(() => {
|
||||
element = document.createElement('div');
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 200);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 200);
|
||||
});
|
||||
|
||||
test('that dragover events are marked', () => {
|
||||
@ -53,7 +53,7 @@ describe('droptarget', () => {
|
||||
fireEvent.dragOver(element);
|
||||
|
||||
const target = element.querySelector(
|
||||
'.dv-drop-target-dropzone'
|
||||
'.drop-target-dropzone'
|
||||
) as HTMLElement;
|
||||
fireEvent.drop(target);
|
||||
expect(position).toBe('center');
|
||||
@ -61,7 +61,7 @@ describe('droptarget', () => {
|
||||
const event = new Event('dragover');
|
||||
(event as any)['__dockview_droptarget_event_is_used__'] = true;
|
||||
fireEvent(element, event);
|
||||
expect(element.querySelector('.dv-drop-target-dropzone')).toBeNull();
|
||||
expect(element.querySelector('.drop-target-dropzone')).toBeNull();
|
||||
});
|
||||
|
||||
test('directionToPosition', () => {
|
||||
@ -102,7 +102,7 @@ describe('droptarget', () => {
|
||||
fireEvent.dragOver(element);
|
||||
|
||||
const target = element.querySelector(
|
||||
'.dv-drop-target-dropzone'
|
||||
'.drop-target-dropzone'
|
||||
) as HTMLElement;
|
||||
fireEvent.drop(target);
|
||||
expect(position).toBe('center');
|
||||
@ -124,7 +124,7 @@ describe('droptarget', () => {
|
||||
fireEvent.dragOver(element);
|
||||
|
||||
const target = element.querySelector(
|
||||
'.dv-drop-target-dropzone'
|
||||
'.drop-target-dropzone'
|
||||
) as HTMLElement;
|
||||
|
||||
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
|
||||
@ -155,12 +155,12 @@ describe('droptarget', () => {
|
||||
fireEvent.dragOver(element);
|
||||
|
||||
let viewQuery = element.querySelectorAll(
|
||||
'.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
|
||||
'.drop-target > .drop-target-dropzone > .drop-target-selection'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
|
||||
const target = element.querySelector(
|
||||
'.dv-drop-target-dropzone'
|
||||
'.drop-target-dropzone'
|
||||
) as HTMLElement;
|
||||
|
||||
jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100);
|
||||
@ -187,13 +187,13 @@ describe('droptarget', () => {
|
||||
}
|
||||
|
||||
viewQuery = element.querySelectorAll(
|
||||
'.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
|
||||
'.drop-target > .drop-target-dropzone > .drop-target-selection'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
expect(droptarget.state).toBe('left');
|
||||
check(
|
||||
element
|
||||
.getElementsByClassName('dv-drop-target-selection')
|
||||
.getElementsByClassName('drop-target-selection')
|
||||
.item(0) as HTMLDivElement,
|
||||
{
|
||||
top: '0px',
|
||||
@ -209,13 +209,13 @@ describe('droptarget', () => {
|
||||
);
|
||||
|
||||
viewQuery = element.querySelectorAll(
|
||||
'.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
|
||||
'.drop-target > .drop-target-dropzone > .drop-target-selection'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
expect(droptarget.state).toBe('top');
|
||||
check(
|
||||
element
|
||||
.getElementsByClassName('dv-drop-target-selection')
|
||||
.getElementsByClassName('drop-target-selection')
|
||||
.item(0) as HTMLDivElement,
|
||||
{
|
||||
top: '0px',
|
||||
@ -231,13 +231,13 @@ describe('droptarget', () => {
|
||||
);
|
||||
|
||||
viewQuery = element.querySelectorAll(
|
||||
'.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
|
||||
'.drop-target > .drop-target-dropzone > .drop-target-selection'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
expect(droptarget.state).toBe('bottom');
|
||||
check(
|
||||
element
|
||||
.getElementsByClassName('dv-drop-target-selection')
|
||||
.getElementsByClassName('drop-target-selection')
|
||||
.item(0) as HTMLDivElement,
|
||||
{
|
||||
top: '50%',
|
||||
@ -253,13 +253,13 @@ describe('droptarget', () => {
|
||||
);
|
||||
|
||||
viewQuery = element.querySelectorAll(
|
||||
'.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection'
|
||||
'.drop-target > .drop-target-dropzone > .drop-target-selection'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
expect(droptarget.state).toBe('right');
|
||||
check(
|
||||
element
|
||||
.getElementsByClassName('dv-drop-target-selection')
|
||||
.getElementsByClassName('drop-target-selection')
|
||||
.item(0) as HTMLDivElement,
|
||||
{
|
||||
top: '0px',
|
||||
@ -276,14 +276,14 @@ describe('droptarget', () => {
|
||||
expect(
|
||||
(
|
||||
element
|
||||
.getElementsByClassName('dv-drop-target-selection')
|
||||
.getElementsByClassName('drop-target-selection')
|
||||
.item(0) as HTMLDivElement
|
||||
).style.transform
|
||||
).toBe('');
|
||||
|
||||
fireEvent.dragLeave(target);
|
||||
expect(droptarget.state).toBe('center');
|
||||
viewQuery = element.querySelectorAll('.dv-drop-target');
|
||||
viewQuery = element.querySelectorAll('.drop-target');
|
||||
expect(viewQuery.length).toBe(0);
|
||||
});
|
||||
|
||||
|
||||
156
packages/dockview-core/src/__tests__/dnd/overlay.spec.ts
Normal file
156
packages/dockview-core/src/__tests__/dnd/overlay.spec.ts
Normal file
@ -0,0 +1,156 @@
|
||||
import { Overlay } from '../../dnd/overlay';
|
||||
|
||||
describe('overlay', () => {
|
||||
test('toJSON', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
left: 10,
|
||||
top: 20,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return { left: 80, top: 100, width: 40, height: 50 } as any;
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return { left: 20, top: 30, width: 100, height: 100 } as any;
|
||||
}
|
||||
);
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
top: 70,
|
||||
left: 60,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
|
||||
test('that out-of-bounds dimensions are fixed', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
left: -1000,
|
||||
top: -1000,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return { left: 80, top: 100, width: 40, height: 50 } as any;
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return { left: 20, top: 30, width: 100, height: 100 } as any;
|
||||
}
|
||||
);
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
top: 70,
|
||||
left: 60,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
|
||||
test('setBounds', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 1000,
|
||||
width: 1000,
|
||||
left: 0,
|
||||
top: 0,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
const element: HTMLElement = container.querySelector(
|
||||
'.dv-resize-container'
|
||||
)!;
|
||||
expect(element).toBeTruthy();
|
||||
|
||||
jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
|
||||
return { left: 300, top: 400, width: 1000, height: 1000 } as any;
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return { left: 0, top: 0, width: 1000, height: 1000 } as any;
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds({ height: 100, width: 200, left: 300, top: 400 });
|
||||
|
||||
expect(element.style.height).toBe('100px');
|
||||
expect(element.style.width).toBe('200px');
|
||||
expect(element.style.left).toBe('300px');
|
||||
expect(element.style.top).toBe('400px');
|
||||
});
|
||||
|
||||
test('that the resize handles are added', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 500,
|
||||
width: 500,
|
||||
left: 100,
|
||||
top: 200,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
expect(container.querySelector('.dv-resize-handle-top')).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottom')
|
||||
).toBeTruthy();
|
||||
expect(container.querySelector('.dv-resize-handle-left')).toBeTruthy();
|
||||
expect(container.querySelector('.dv-resize-handle-right')).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-topleft')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-topright')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottomleft')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottomright')
|
||||
).toBeTruthy();
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
});
|
||||
@ -1,4 +1,5 @@
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { Emitter, Event } from '../../../../events';
|
||||
import { ContentContainer } from '../../../../dockview/components/panel/content';
|
||||
import {
|
||||
GroupPanelPartInitParameters,
|
||||
@ -9,9 +10,9 @@ import { PanelUpdateEvent } from '../../../../panel/types';
|
||||
import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
|
||||
import { IDockviewPanelModel } from '../../../../dockview/dockviewPanelModel';
|
||||
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
|
||||
import { OverlayRenderContainer } from '../../../../overlayRenderContainer';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { DockviewGroupPanelModel } from '../../../../dockview/dockviewGroupPanelModel';
|
||||
import { OverlayRenderContainer } from '../../../../overlay/overlayRenderContainer';
|
||||
|
||||
class TestContentRenderer
|
||||
extends CompositeDisposable
|
||||
@ -57,8 +58,7 @@ describe('contentContainer', () => {
|
||||
const disposable = new CompositeDisposable();
|
||||
|
||||
const overlayRenderContainer = new OverlayRenderContainer(
|
||||
document.createElement('div'),
|
||||
fromPartial<DockviewComponent>({})
|
||||
document.createElement('div')
|
||||
);
|
||||
|
||||
const cut = new ContentContainer(
|
||||
|
||||
@ -8,7 +8,6 @@ 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', () => {
|
||||
@ -21,7 +20,7 @@ describe('tab', () => {
|
||||
new groupMock()
|
||||
);
|
||||
|
||||
expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
|
||||
expect(cut.element.className).toBe('tab inactive-tab');
|
||||
});
|
||||
|
||||
test('that active tab has active-tab class', () => {
|
||||
@ -35,10 +34,10 @@ describe('tab', () => {
|
||||
);
|
||||
|
||||
cut.setActive(true);
|
||||
expect(cut.element.className).toBe('dv-tab dv-active-tab');
|
||||
expect(cut.element.className).toBe('tab active-tab');
|
||||
|
||||
cut.setActive(false);
|
||||
expect(cut.element.className).toBe('dv-tab dv-inactive-tab');
|
||||
expect(cut.element.className).toBe('tab inactive-tab');
|
||||
});
|
||||
|
||||
test('that an external event does not render a drop target and calls through to the group model', () => {
|
||||
@ -47,10 +46,15 @@ describe('tab', () => {
|
||||
id: 'testcomponentid',
|
||||
};
|
||||
});
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
canDisplayOverlay: jest.fn(),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const groupView = fromPartial<DockviewGroupPanelModel>({
|
||||
canDisplayOverlay: jest.fn(),
|
||||
});
|
||||
const groupView = new groupviewMock() as DockviewGroupPanelModel;
|
||||
|
||||
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
|
||||
return {
|
||||
@ -68,33 +72,38 @@ describe('tab', () => {
|
||||
groupPanel
|
||||
);
|
||||
|
||||
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
fireEvent.dragEnter(cut.element);
|
||||
fireEvent.dragOver(cut.element);
|
||||
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalled();
|
||||
expect(groupView.canDisplayOverlay).toBeCalled();
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test('that if you drag over yourself a drop target is shown', () => {
|
||||
test('that if you drag over yourself no 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 = fromPartial<DockviewGroupPanelModel>({
|
||||
canDisplayOverlay: jest.fn(),
|
||||
});
|
||||
const groupView = new groupviewMock() as DockviewGroupPanelModel;
|
||||
|
||||
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
|
||||
return {
|
||||
@ -112,10 +121,10 @@ describe('tab', () => {
|
||||
groupPanel
|
||||
);
|
||||
|
||||
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -127,11 +136,11 @@ describe('tab', () => {
|
||||
fireEvent.dragEnter(cut.element);
|
||||
fireEvent.dragOver(cut.element);
|
||||
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
|
||||
expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test('that if you drag over another tab a drop target is shown', () => {
|
||||
@ -166,10 +175,10 @@ describe('tab', () => {
|
||||
groupPanel
|
||||
);
|
||||
|
||||
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -184,7 +193,7 @@ describe('tab', () => {
|
||||
expect(groupView.canDisplayOverlay).toBeCalledTimes(0);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
});
|
||||
|
||||
@ -220,10 +229,10 @@ describe('tab', () => {
|
||||
groupPanel
|
||||
);
|
||||
|
||||
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -244,7 +253,7 @@ describe('tab', () => {
|
||||
expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
@ -280,10 +289,10 @@ describe('tab', () => {
|
||||
groupPanel
|
||||
);
|
||||
|
||||
jest.spyOn(cut.element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(cut.element, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(cut.element, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -304,7 +313,7 @@ describe('tab', () => {
|
||||
expect(groupView.canDisplayOverlay).toBeCalledTimes(1);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,63 +0,0 @@
|
||||
import { DockviewApi } from '../../../../api/component.api';
|
||||
import { DockviewPanelApi, TitleEvent } from '../../../../api/dockviewPanelApi';
|
||||
import { DefaultTab } from '../../../../dockview/components/tab/defaultTab';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { Emitter } from '../../../../events';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
|
||||
describe('defaultTab', () => {
|
||||
test('that title updates', () => {
|
||||
const cut = new DefaultTab();
|
||||
|
||||
let el = cut.element.querySelector('.dv-default-tab-content');
|
||||
expect(el).toBeTruthy();
|
||||
expect(el!.textContent).toBe('');
|
||||
|
||||
const onDidTitleChange = new Emitter<TitleEvent>();
|
||||
|
||||
const api = fromPartial<DockviewPanelApi>({
|
||||
onDidTitleChange: onDidTitleChange.event,
|
||||
});
|
||||
const containerApi = fromPartial<DockviewApi>({});
|
||||
|
||||
cut.init({
|
||||
api,
|
||||
containerApi,
|
||||
params: {},
|
||||
title: 'title_abc',
|
||||
});
|
||||
|
||||
el = cut.element.querySelector('.dv-default-tab-content');
|
||||
expect(el).toBeTruthy();
|
||||
expect(el!.textContent).toBe('title_abc');
|
||||
|
||||
onDidTitleChange.fire({ title: 'title_def' });
|
||||
|
||||
expect(el!.textContent).toBe('title_def');
|
||||
});
|
||||
|
||||
test('that click closes tab', () => {
|
||||
const cut = new DefaultTab();
|
||||
|
||||
const api = fromPartial<DockviewPanelApi>({
|
||||
onDidTitleChange: jest.fn(),
|
||||
close: jest.fn(),
|
||||
});
|
||||
const containerApi = fromPartial<DockviewApi>({});
|
||||
|
||||
cut.init({
|
||||
api,
|
||||
containerApi,
|
||||
params: {},
|
||||
title: 'title_abc',
|
||||
});
|
||||
|
||||
let el = cut.element.querySelector('.dv-default-tab-action');
|
||||
|
||||
fireEvent.pointerDown(el!);
|
||||
expect(api.close).toHaveBeenCalledTimes(0);
|
||||
|
||||
fireEvent.click(el!);
|
||||
expect(api.close).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
});
|
||||
@ -1,66 +0,0 @@
|
||||
import { Tabs } from '../../../../dockview/components/titlebar/tabs';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
|
||||
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
|
||||
|
||||
describe('tabs', () => {
|
||||
describe('disableCustomScrollbars', () => {
|
||||
test('enabled by default', () => {
|
||||
const cut = new Tabs(
|
||||
fromPartial<DockviewGroupPanel>({}),
|
||||
fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
}),
|
||||
{
|
||||
showTabsOverflowControl: true,
|
||||
}
|
||||
);
|
||||
|
||||
expect(
|
||||
cut.element.querySelectorAll(
|
||||
'.dv-scrollable > .dv-tabs-container'
|
||||
).length
|
||||
).toBe(1);
|
||||
});
|
||||
|
||||
test('enabled when disabled flag is false', () => {
|
||||
const cut = new Tabs(
|
||||
fromPartial<DockviewGroupPanel>({}),
|
||||
fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
scrollbars: 'custom',
|
||||
},
|
||||
}),
|
||||
{
|
||||
showTabsOverflowControl: true,
|
||||
}
|
||||
);
|
||||
|
||||
expect(
|
||||
cut.element.querySelectorAll(
|
||||
'.dv-scrollable > .dv-tabs-container'
|
||||
).length
|
||||
).toBe(1);
|
||||
});
|
||||
|
||||
test('disabled when disabled flag is true', () => {
|
||||
const cut = new Tabs(
|
||||
fromPartial<DockviewGroupPanel>({}),
|
||||
fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
scrollbars: 'native',
|
||||
},
|
||||
}),
|
||||
{
|
||||
showTabsOverflowControl: true,
|
||||
}
|
||||
);
|
||||
|
||||
expect(
|
||||
cut.element.querySelectorAll(
|
||||
'.dv-scrollable > .dv-tabs-container'
|
||||
).length
|
||||
).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -10,15 +10,13 @@ import { fireEvent } from '@testing-library/dom';
|
||||
import { TestPanel } from '../../dockviewGroupPanelModel.spec';
|
||||
import { IDockviewPanel } from '../../../../dockview/dockviewPanel';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { DockviewPanelApi } from '../../../../api/dockviewPanelApi';
|
||||
|
||||
describe('tabsContainer', () => {
|
||||
test('that an external event does not render a drop target and calls through to the group mode', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -42,17 +40,17 @@ describe('tabsContainer', () => {
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('dv-void-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
}
|
||||
|
||||
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -62,7 +60,7 @@ describe('tabsContainer', () => {
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalled();
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
@ -71,18 +69,18 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const dropTargetContainer = document.createElement('div');
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
canDisplayOverlay: jest.fn(),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const groupView = fromPartial<DockviewGroupPanelModel>({
|
||||
canDisplayOverlay: jest.fn(),
|
||||
// dropTargetContainer: new DropTargetAnchorContainer(
|
||||
// dropTargetContainer
|
||||
// ),
|
||||
});
|
||||
const groupView = new groupviewMock() as DockviewGroupPanelModel;
|
||||
|
||||
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
|
||||
return {
|
||||
@ -97,17 +95,17 @@ describe('tabsContainer', () => {
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('dv-void-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
}
|
||||
|
||||
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -128,12 +126,8 @@ describe('tabsContainer', () => {
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('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', () => {
|
||||
@ -141,8 +135,7 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -171,17 +164,17 @@ describe('tabsContainer', () => {
|
||||
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('dv-void-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
}
|
||||
|
||||
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -196,7 +189,7 @@ describe('tabsContainer', () => {
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
});
|
||||
|
||||
@ -205,8 +198,7 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -235,17 +227,17 @@ describe('tabsContainer', () => {
|
||||
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('dv-void-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
}
|
||||
|
||||
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -260,7 +252,7 @@ describe('tabsContainer', () => {
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
});
|
||||
|
||||
@ -269,8 +261,7 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -298,17 +289,17 @@ describe('tabsContainer', () => {
|
||||
cut.openPanel(new TestPanel('panel2', jest.fn() as any));
|
||||
|
||||
const emptySpace = cut.element
|
||||
.getElementsByClassName('dv-void-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('void-container')
|
||||
.item(0);
|
||||
|
||||
if (!emptySpace!) {
|
||||
fail('element not found');
|
||||
}
|
||||
|
||||
jest.spyOn(emptySpace!, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(emptySpace!, 'offsetWidth', 'get').mockImplementation(
|
||||
jest.spyOn(emptySpace!, 'clientWidth', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
|
||||
@ -329,7 +320,7 @@ describe('tabsContainer', () => {
|
||||
expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1);
|
||||
|
||||
expect(
|
||||
cut.element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
cut.element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
@ -338,8 +329,7 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -351,7 +341,7 @@ describe('tabsContainer', () => {
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
let query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-left-actions-container'
|
||||
'.tabs-and-actions-container > .left-actions-container'
|
||||
);
|
||||
|
||||
expect(query.length).toBe(1);
|
||||
@ -364,7 +354,7 @@ describe('tabsContainer', () => {
|
||||
cut.setLeftActionsElement(left);
|
||||
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-left-actions-container'
|
||||
'.tabs-and-actions-container > .left-actions-container'
|
||||
);
|
||||
expect(query.length).toBe(1);
|
||||
expect(query[0].children.item(0)?.className).toBe(
|
||||
@ -379,7 +369,7 @@ describe('tabsContainer', () => {
|
||||
cut.setLeftActionsElement(left2);
|
||||
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-left-actions-container'
|
||||
'.tabs-and-actions-container > .left-actions-container'
|
||||
);
|
||||
expect(query.length).toBe(1);
|
||||
expect(query[0].children.item(0)?.className).toBe(
|
||||
@ -391,7 +381,7 @@ describe('tabsContainer', () => {
|
||||
|
||||
cut.setLeftActionsElement(undefined);
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-left-actions-container'
|
||||
'.tabs-and-actions-container > .left-actions-container'
|
||||
);
|
||||
|
||||
expect(query.length).toBe(1);
|
||||
@ -403,8 +393,7 @@ describe('tabsContainer', () => {
|
||||
id: 'testcomponentid',
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
options: { parentElement: document.createElement('div') },
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -416,7 +405,7 @@ describe('tabsContainer', () => {
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
let query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-right-actions-container'
|
||||
'.tabs-and-actions-container > .right-actions-container'
|
||||
);
|
||||
|
||||
expect(query.length).toBe(1);
|
||||
@ -429,7 +418,7 @@ describe('tabsContainer', () => {
|
||||
cut.setRightActionsElement(right);
|
||||
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-right-actions-container'
|
||||
'.tabs-and-actions-container > .right-actions-container'
|
||||
);
|
||||
expect(query.length).toBe(1);
|
||||
expect(query[0].children.item(0)?.className).toBe(
|
||||
@ -444,7 +433,7 @@ describe('tabsContainer', () => {
|
||||
cut.setRightActionsElement(right2);
|
||||
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-right-actions-container'
|
||||
'.tabs-and-actions-container > .right-actions-container'
|
||||
);
|
||||
expect(query.length).toBe(1);
|
||||
expect(query[0].children.item(0)?.className).toBe(
|
||||
@ -456,7 +445,7 @@ describe('tabsContainer', () => {
|
||||
|
||||
cut.setRightActionsElement(undefined);
|
||||
query = cut.element.querySelectorAll(
|
||||
'.dv-tabs-and-actions-container > .dv-right-actions-container'
|
||||
'.tabs-and-actions-container > .right-actions-container'
|
||||
);
|
||||
|
||||
expect(query.length).toBe(1);
|
||||
@ -465,13 +454,11 @@ describe('tabsContainer', () => {
|
||||
|
||||
test('that a tab will become floating when clicked if not floating and shift is selected', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -484,7 +471,7 @@ describe('tabsContainer', () => {
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
const container = cut.element.querySelector('.dv-void-container')!;
|
||||
const container = cut.element.querySelector('.void-container')!;
|
||||
expect(container).toBeTruthy();
|
||||
|
||||
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
|
||||
@ -499,20 +486,22 @@ describe('tabsContainer', () => {
|
||||
return { top: 10, left: 20, width: 0, height: 0 } as any;
|
||||
});
|
||||
|
||||
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
|
||||
const event = new KeyboardEvent('mousedown', { shiftKey: true });
|
||||
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
|
||||
fireEvent(container, event);
|
||||
|
||||
expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel);
|
||||
expect(accessor.addFloatingGroup).toHaveBeenCalledWith(groupPanel, {
|
||||
x: 100,
|
||||
y: 60,
|
||||
inDragMode: true,
|
||||
});
|
||||
expect(accessor.addFloatingGroup).toHaveBeenCalledWith(
|
||||
groupPanel,
|
||||
{
|
||||
x: 100,
|
||||
y: 60,
|
||||
},
|
||||
{ inDragMode: true }
|
||||
);
|
||||
expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(1);
|
||||
expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(1);
|
||||
|
||||
const event2 = new KeyboardEvent('pointerdown', { shiftKey: false });
|
||||
const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
|
||||
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
|
||||
fireEvent(container, event2);
|
||||
|
||||
@ -522,13 +511,11 @@ describe('tabsContainer', () => {
|
||||
|
||||
test('that a tab that is already floating cannot be floated again', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -541,7 +528,7 @@ describe('tabsContainer', () => {
|
||||
|
||||
const cut = new TabsContainer(accessor, groupPanel);
|
||||
|
||||
const container = cut.element.querySelector('.dv-void-container')!;
|
||||
const container = cut.element.querySelector('.void-container')!;
|
||||
expect(container).toBeTruthy();
|
||||
|
||||
jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation(
|
||||
@ -556,15 +543,14 @@ describe('tabsContainer', () => {
|
||||
return { top: 10, left: 20, width: 0, height: 0 } as any;
|
||||
});
|
||||
|
||||
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
|
||||
const event = new KeyboardEvent('mousedown', { shiftKey: true });
|
||||
const eventPreventDefaultSpy = jest.spyOn(event, 'preventDefault');
|
||||
fireEvent(container, event);
|
||||
|
||||
expect(accessor.doSetGroupActive).toHaveBeenCalledWith(groupPanel);
|
||||
expect(accessor.addFloatingGroup).toHaveBeenCalledTimes(0);
|
||||
expect(eventPreventDefaultSpy).toHaveBeenCalledTimes(0);
|
||||
|
||||
const event2 = new KeyboardEvent('pointerdown', { shiftKey: false });
|
||||
const event2 = new KeyboardEvent('mousedown', { shiftKey: false });
|
||||
const eventPreventDefaultSpy2 = jest.spyOn(event2, 'preventDefault');
|
||||
fireEvent(container, event2);
|
||||
|
||||
@ -574,13 +560,12 @@ describe('tabsContainer', () => {
|
||||
|
||||
test('that selecting a tab with shift down will move that tab into a new floating group', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -610,10 +595,10 @@ describe('tabsContainer', () => {
|
||||
const panel = createPanel('test_id');
|
||||
cut.openPanel(panel);
|
||||
|
||||
const el = cut.element.querySelector('.dv-tab')!;
|
||||
const el = cut.element.querySelector('.tab')!;
|
||||
expect(el).toBeTruthy();
|
||||
|
||||
const event = new KeyboardEvent('pointerdown', { shiftKey: true });
|
||||
const event = new KeyboardEvent('mousedown', { shiftKey: true });
|
||||
const preventDefaultSpy = jest.spyOn(event, 'preventDefault');
|
||||
fireEvent(el, event);
|
||||
|
||||
@ -631,13 +616,12 @@ describe('tabsContainer', () => {
|
||||
|
||||
test('pre header actions', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -670,14 +654,14 @@ describe('tabsContainer', () => {
|
||||
const panel = new panelMock('test_id');
|
||||
cut.openPanel(panel);
|
||||
|
||||
let result = cut.element.querySelector('.dv-pre-actions-container');
|
||||
let result = cut.element.querySelector('.pre-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
cut.setPrefixActionsElement(actions);
|
||||
|
||||
result = cut.element.querySelector('.dv-pre-actions-container');
|
||||
result = cut.element.querySelector('.pre-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(actions);
|
||||
@ -685,27 +669,26 @@ describe('tabsContainer', () => {
|
||||
const updatedActions = document.createElement('div');
|
||||
cut.setPrefixActionsElement(updatedActions);
|
||||
|
||||
result = cut.element.querySelector('.dv-pre-actions-container');
|
||||
result = cut.element.querySelector('.pre-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(updatedActions);
|
||||
|
||||
cut.setPrefixActionsElement(undefined);
|
||||
|
||||
result = cut.element.querySelector('.dv-pre-actions-container');
|
||||
result = cut.element.querySelector('.pre-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('left header actions', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -738,14 +721,14 @@ describe('tabsContainer', () => {
|
||||
const panel = new panelMock('test_id');
|
||||
cut.openPanel(panel);
|
||||
|
||||
let result = cut.element.querySelector('.dv-left-actions-container');
|
||||
let result = cut.element.querySelector('.left-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
cut.setLeftActionsElement(actions);
|
||||
|
||||
result = cut.element.querySelector('.dv-left-actions-container');
|
||||
result = cut.element.querySelector('.left-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(actions);
|
||||
@ -753,27 +736,26 @@ describe('tabsContainer', () => {
|
||||
const updatedActions = document.createElement('div');
|
||||
cut.setLeftActionsElement(updatedActions);
|
||||
|
||||
result = cut.element.querySelector('.dv-left-actions-container');
|
||||
result = cut.element.querySelector('.left-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(updatedActions);
|
||||
|
||||
cut.setLeftActionsElement(undefined);
|
||||
|
||||
result = cut.element.querySelector('.dv-left-actions-container');
|
||||
result = cut.element.querySelector('.left-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('right header actions', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
element: document.createElement('div'),
|
||||
addFloatingGroup: jest.fn(),
|
||||
getGroupPanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupPanelMock = jest.fn<DockviewGroupPanel, []>(() => {
|
||||
@ -806,14 +788,14 @@ describe('tabsContainer', () => {
|
||||
const panel = new panelMock('test_id');
|
||||
cut.openPanel(panel);
|
||||
|
||||
let result = cut.element.querySelector('.dv-right-actions-container');
|
||||
let result = cut.element.querySelector('.right-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
|
||||
const actions = document.createElement('div');
|
||||
cut.setRightActionsElement(actions);
|
||||
|
||||
result = cut.element.querySelector('.dv-right-actions-container');
|
||||
result = cut.element.querySelector('.right-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(actions);
|
||||
@ -821,47 +803,15 @@ describe('tabsContainer', () => {
|
||||
const updatedActions = document.createElement('div');
|
||||
cut.setRightActionsElement(updatedActions);
|
||||
|
||||
result = cut.element.querySelector('.dv-right-actions-container');
|
||||
result = cut.element.querySelector('.right-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(1);
|
||||
expect(result!.childNodes.item(0)).toBe(updatedActions);
|
||||
|
||||
cut.setRightActionsElement(undefined);
|
||||
|
||||
result = cut.element.querySelector('.dv-right-actions-container');
|
||||
result = cut.element.querySelector('.right-actions-container');
|
||||
expect(result).toBeTruthy();
|
||||
expect(result!.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('class dv-single-tab is present when only one tab exists`', () => {
|
||||
const cut = new TabsContainer(
|
||||
fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
}),
|
||||
fromPartial<DockviewGroupPanel>({})
|
||||
);
|
||||
|
||||
expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
|
||||
|
||||
const panel1 = new TestPanel(
|
||||
'panel_1',
|
||||
fromPartial<DockviewPanelApi>({})
|
||||
);
|
||||
cut.openPanel(panel1);
|
||||
expect(cut.element.classList.contains('dv-single-tab')).toBeTruthy();
|
||||
|
||||
const panel2 = new TestPanel(
|
||||
'panel_2',
|
||||
fromPartial<DockviewPanelApi>({})
|
||||
);
|
||||
cut.openPanel(panel2);
|
||||
expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
|
||||
|
||||
cut.closePanel(panel1);
|
||||
expect(cut.element.classList.contains('dv-single-tab')).toBeTruthy();
|
||||
|
||||
cut.closePanel(panel2);
|
||||
expect(cut.element.classList.contains('dv-single-tab')).toBeFalsy();
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import { VoidContainer } from '../../../../dockview/components/titlebar/voidContainer';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { DockviewComponent } from '../../../../dockview/dockviewComponent';
|
||||
import { DockviewGroupPanel } from '../../../../dockview/dockviewGroupPanel';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
|
||||
describe('voidContainer', () => {
|
||||
test('that `pointerDown` triggers activation', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
doSetGroupActive: jest.fn(),
|
||||
});
|
||||
const group = fromPartial<DockviewGroupPanel>({});
|
||||
const cut = new VoidContainer(accessor, group);
|
||||
|
||||
expect(accessor.doSetGroupActive).not.toHaveBeenCalled();
|
||||
|
||||
fireEvent.pointerDown(cut.element);
|
||||
expect(accessor.doSetGroupActive).toHaveBeenCalledWith(group);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,27 @@
|
||||
import { DockviewApi } from '../../../../api/component.api';
|
||||
import { Watermark } from '../../../../dockview/components/watermark/watermark';
|
||||
|
||||
describe('watermark', () => {
|
||||
test('that the group is closed when the close button is clicked', () => {
|
||||
const cut = new Watermark();
|
||||
|
||||
const mockApi = jest.fn<Partial<DockviewApi>, any[]>(() => {
|
||||
return {
|
||||
removeGroup: jest.fn(),
|
||||
};
|
||||
});
|
||||
const api = <DockviewApi>new mockApi();
|
||||
const group = jest.fn() as any;
|
||||
|
||||
cut.init({ containerApi: api });
|
||||
cut.updateParentGroup(group, true);
|
||||
|
||||
const closeEl = cut.element.querySelector('.close-action')!;
|
||||
|
||||
expect(closeEl).toBeTruthy();
|
||||
|
||||
closeEl.dispatchEvent(new Event('click'));
|
||||
|
||||
expect(api.removeGroup).toHaveBeenCalledWith(group);
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,190 +0,0 @@
|
||||
import { DockviewComponent } from '../../dockview/dockviewComponent';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { GroupOptions } from '../../dockview/dockviewGroupPanelModel';
|
||||
import { DockviewPanel, IDockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { DockviewPanelModelMock } from '../__mocks__/mockDockviewPanelModel';
|
||||
import { IContentRenderer, ITabRenderer } from '../../dockview/types';
|
||||
import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
|
||||
import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
|
||||
import { ContentContainer } from '../../dockview/components/panel/content';
|
||||
|
||||
describe('dockviewGroupPanel', () => {
|
||||
test('default minimum/maximium width/height', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidActivePanelChange: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
const options = fromPartial<GroupOptions>({});
|
||||
const cut = new DockviewGroupPanel(accessor, 'test_id', options);
|
||||
|
||||
expect(cut.minimumWidth).toBe(100);
|
||||
expect(cut.minimumHeight).toBe(100);
|
||||
expect(cut.maximumHeight).toBe(Number.MAX_SAFE_INTEGER);
|
||||
expect(cut.maximumWidth).toBe(Number.MAX_SAFE_INTEGER);
|
||||
});
|
||||
|
||||
test('that onDidActivePanelChange is configured at inline', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidActivePanelChange: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
api: {},
|
||||
renderer: 'always',
|
||||
overlayRenderContainer: {
|
||||
attach: jest.fn(),
|
||||
detatch: jest.fn(),
|
||||
},
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
const options = fromPartial<GroupOptions>({});
|
||||
|
||||
const cut = new DockviewGroupPanel(accessor, 'test_id', options);
|
||||
|
||||
let counter = 0;
|
||||
|
||||
cut.api.onDidActivePanelChange((event) => {
|
||||
counter++;
|
||||
});
|
||||
|
||||
cut.model.openPanel(
|
||||
fromPartial<IDockviewPanel>({
|
||||
updateParentGroup: jest.fn(),
|
||||
view: {
|
||||
tab: { element: document.createElement('div') },
|
||||
content: new ContentContainer(accessor, cut.model),
|
||||
},
|
||||
api: {
|
||||
renderer: 'onlyWhenVisible',
|
||||
onDidTitleChange: jest.fn(),
|
||||
onDidParametersChange: jest.fn(),
|
||||
},
|
||||
layout: jest.fn(),
|
||||
runEvents: jest.fn(),
|
||||
})
|
||||
);
|
||||
|
||||
expect(counter).toBe(1);
|
||||
});
|
||||
|
||||
test('group constraints', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
onDidActivePanelChange: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
overlayRenderContainer: fromPartial<OverlayRenderContainer>({
|
||||
attach: jest.fn(),
|
||||
detatch: jest.fn(),
|
||||
}),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
const options = fromPartial<GroupOptions>({});
|
||||
const cut = new DockviewGroupPanel(accessor, 'test_id', options);
|
||||
|
||||
cut.api.setConstraints({
|
||||
minimumHeight: 10,
|
||||
maximumHeight: 100,
|
||||
minimumWidth: 20,
|
||||
maximumWidth: 200,
|
||||
});
|
||||
|
||||
// initial constraints
|
||||
|
||||
expect(cut.minimumWidth).toBe(20);
|
||||
expect(cut.minimumHeight).toBe(10);
|
||||
expect(cut.maximumHeight).toBe(100);
|
||||
expect(cut.maximumWidth).toBe(200);
|
||||
|
||||
const panelModel = new DockviewPanelModelMock(
|
||||
'content_component',
|
||||
fromPartial<IContentRenderer>({
|
||||
element: document.createElement('div'),
|
||||
}),
|
||||
'tab_component',
|
||||
fromPartial<ITabRenderer>({
|
||||
element: document.createElement('div'),
|
||||
})
|
||||
);
|
||||
|
||||
const panel = new DockviewPanel(
|
||||
'panel_id',
|
||||
'component_id',
|
||||
undefined,
|
||||
accessor,
|
||||
accessor.api,
|
||||
cut,
|
||||
panelModel,
|
||||
{
|
||||
renderer: 'onlyWhenVisible',
|
||||
minimumWidth: 21,
|
||||
minimumHeight: 11,
|
||||
maximumHeight: 101,
|
||||
maximumWidth: 201,
|
||||
}
|
||||
);
|
||||
|
||||
cut.model.openPanel(panel);
|
||||
|
||||
// active panel constraints
|
||||
|
||||
expect(cut.minimumWidth).toBe(21);
|
||||
expect(cut.minimumHeight).toBe(11);
|
||||
expect(cut.maximumHeight).toBe(101);
|
||||
expect(cut.maximumWidth).toBe(201);
|
||||
|
||||
const panel2 = new DockviewPanel(
|
||||
'panel_id',
|
||||
'component_id',
|
||||
undefined,
|
||||
accessor,
|
||||
accessor.api,
|
||||
cut,
|
||||
panelModel,
|
||||
{
|
||||
renderer: 'onlyWhenVisible',
|
||||
minimumWidth: 22,
|
||||
minimumHeight: 12,
|
||||
maximumHeight: 102,
|
||||
maximumWidth: 202,
|
||||
}
|
||||
);
|
||||
|
||||
cut.model.openPanel(panel2);
|
||||
|
||||
// active panel constraints
|
||||
|
||||
expect(cut.minimumWidth).toBe(22);
|
||||
expect(cut.minimumHeight).toBe(12);
|
||||
expect(cut.maximumHeight).toBe(102);
|
||||
expect(cut.maximumWidth).toBe(202);
|
||||
|
||||
const panel3 = new DockviewPanel(
|
||||
'panel_id',
|
||||
'component_id',
|
||||
undefined,
|
||||
accessor,
|
||||
accessor.api,
|
||||
cut,
|
||||
panelModel,
|
||||
{
|
||||
renderer: 'onlyWhenVisible',
|
||||
}
|
||||
);
|
||||
|
||||
cut.model.openPanel(panel3);
|
||||
|
||||
// active panel without specified constraints so falls back to group constraints
|
||||
|
||||
expect(cut.minimumWidth).toBe(20);
|
||||
expect(cut.minimumHeight).toBe(10);
|
||||
expect(cut.maximumHeight).toBe(100);
|
||||
expect(cut.maximumWidth).toBe(200);
|
||||
});
|
||||
});
|
||||
@ -9,22 +9,40 @@ import {
|
||||
} from '../../dockview/types';
|
||||
import { PanelUpdateEvent, Parameters } from '../../panel/types';
|
||||
import {
|
||||
DockviewGroupLocation,
|
||||
DockviewGroupPanelModel,
|
||||
GroupOptions,
|
||||
} from '../../dockview/dockviewGroupPanelModel';
|
||||
import { fireEvent } from '@testing-library/dom';
|
||||
import { LocalSelectionTransfer, PanelTransfer } from '../../dnd/dataTransfer';
|
||||
import { CompositeDisposable } from '../../lifecycle';
|
||||
import { DockviewPanelApi } from '../../api/dockviewPanelApi';
|
||||
import {
|
||||
ActiveGroupEvent,
|
||||
DockviewPanelApi,
|
||||
GroupChangedEvent,
|
||||
RendererChangedEvent,
|
||||
} from '../../api/dockviewPanelApi';
|
||||
import { IDockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { IDockviewPanelModel } from '../../dockview/dockviewPanelModel';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import { WatermarkRendererInitParameters } from '../../dockview/types';
|
||||
import { createOffsetDragOverEvent } from '../__test_utils__/utils';
|
||||
import { OverlayRenderContainer } from '../../overlay/overlayRenderContainer';
|
||||
import { Emitter } from '../../events';
|
||||
import {
|
||||
DockviewPanelRenderer,
|
||||
OverlayRenderContainer,
|
||||
} from '../../overlayRenderContainer';
|
||||
import { DockviewGroupPanelFloatingChangeEvent } from '../../api/dockviewGroupPanelApi';
|
||||
import { SizeEvent } from '../../api/gridviewPanelApi';
|
||||
import {
|
||||
PanelDimensionChangeEvent,
|
||||
FocusEvent,
|
||||
VisibilityEvent,
|
||||
ActiveEvent,
|
||||
WillFocusEvent,
|
||||
} from '../../api/panelApi';
|
||||
import { Position } from '../../dnd/droptarget';
|
||||
import { Emitter, Event } from '../../events';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { TabLocation } from '../../dockview/framework';
|
||||
|
||||
enum GroupChangeKind2 {
|
||||
ADD_PANEL,
|
||||
@ -37,16 +55,12 @@ class TestModel implements IDockviewPanelModel {
|
||||
readonly contentComponent: string;
|
||||
readonly tab: ITabRenderer;
|
||||
|
||||
constructor(readonly id: string) {
|
||||
constructor(id: string) {
|
||||
this.content = new TestHeaderPart(id);
|
||||
this.contentComponent = id;
|
||||
this.tab = new TestContentPart(id);
|
||||
}
|
||||
|
||||
createTabRenderer(tabLocation: TabLocation): ITabRenderer {
|
||||
return new TestHeaderPart(this.id);
|
||||
}
|
||||
|
||||
update(event: PanelUpdateEvent): void {
|
||||
//
|
||||
}
|
||||
@ -102,6 +116,10 @@ class Watermark implements IWatermarkRenderer {
|
||||
return {};
|
||||
}
|
||||
|
||||
updateParentGroup() {
|
||||
//
|
||||
}
|
||||
|
||||
dispose() {
|
||||
//
|
||||
}
|
||||
@ -258,7 +276,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
dockview = fromPartial<DockviewComponent>({
|
||||
options: {},
|
||||
options: { parentElement: document.createElement('div') },
|
||||
createWatermarkComponent: () => new Watermark(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
id: 'dockview-1',
|
||||
@ -267,10 +285,8 @@ describe('dockviewGroupPanelModel', () => {
|
||||
onDidAddPanel: () => ({ dispose: jest.fn() }),
|
||||
onDidRemovePanel: () => ({ dispose: jest.fn() }),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div'),
|
||||
fromPartial<DockviewComponent>({})
|
||||
document.createElement('div')
|
||||
),
|
||||
onDidOptionsChange: () => ({ dispose: jest.fn() }),
|
||||
});
|
||||
|
||||
groupview = new DockviewGroupPanel(dockview, 'groupview-1', options);
|
||||
@ -479,12 +495,12 @@ describe('dockviewGroupPanelModel', () => {
|
||||
|
||||
test('default', () => {
|
||||
let viewQuery = groupview.element.querySelectorAll(
|
||||
'.dv-groupview > .dv-tabs-and-actions-container'
|
||||
'.groupview > .tabs-and-actions-container'
|
||||
);
|
||||
expect(viewQuery).toBeTruthy();
|
||||
|
||||
viewQuery = groupview.element.querySelectorAll(
|
||||
'.dv-groupview > .dv-content-container'
|
||||
'.groupview > .content-container'
|
||||
);
|
||||
expect(viewQuery).toBeTruthy();
|
||||
});
|
||||
@ -500,18 +516,19 @@ describe('dockviewGroupPanelModel', () => {
|
||||
|
||||
groupview.model.closeAllPanels();
|
||||
|
||||
expect(removePanelMock).toHaveBeenCalledWith(panel1, undefined);
|
||||
expect(removePanelMock).toHaveBeenCalledWith(panel2, undefined);
|
||||
expect(removePanelMock).toHaveBeenCalledWith(panel3, undefined);
|
||||
expect(removePanelMock).toBeCalledWith(panel1);
|
||||
expect(removePanelMock).toBeCalledWith(panel2);
|
||||
expect(removePanelMock).toBeCalledWith(panel3);
|
||||
});
|
||||
|
||||
test('closeAllPanels with no panels', () => {
|
||||
groupview.model.closeAllPanels();
|
||||
expect(removeGroupMock).toHaveBeenCalledWith(groupview);
|
||||
expect(removeGroupMock).toBeCalledWith(groupview);
|
||||
});
|
||||
|
||||
test('that group is set on panel during onDidAddPanel event', () => {
|
||||
const cut = new DockviewComponent(document.createElement('div'), {
|
||||
const cut = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
@ -531,19 +548,17 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('toJSON() default', () => {
|
||||
const dockviewComponent = new DockviewComponent(
|
||||
document.createElement('div'),
|
||||
{
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewGroupPanelModel(
|
||||
document.createElement('div'),
|
||||
@ -561,19 +576,17 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test('toJSON() locked and hideHeader', () => {
|
||||
const dockviewComponent = new DockviewComponent(
|
||||
document.createElement('div'),
|
||||
{
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const cut = new DockviewGroupPanelModel(
|
||||
document.createElement('div'),
|
||||
@ -596,19 +609,17 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
test("that openPanel with skipSetActive doesn't set panel to active", () => {
|
||||
const dockviewComponent = new DockviewComponent(
|
||||
document.createElement('div'),
|
||||
{
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
}
|
||||
);
|
||||
const dockviewComponent = new DockviewComponent({
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'component':
|
||||
return new TestContentPart(options.id);
|
||||
default:
|
||||
throw new Error(`unsupported`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const groupviewContainer = document.createElement('div');
|
||||
const cut = new DockviewGroupPanelModel(
|
||||
@ -619,7 +630,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
null as any
|
||||
);
|
||||
const contentContainer = groupviewContainer
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!.childNodes;
|
||||
|
||||
const panel1 = new TestPanel('id_1', panelApi);
|
||||
@ -648,11 +659,12 @@ describe('dockviewGroupPanelModel', () => {
|
||||
test('that should not show drop target is external event', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {},
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -690,13 +702,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
const element = container
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.item(0)! as HTMLElement;
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!;
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
|
||||
|
||||
fireEvent.dragEnter(element);
|
||||
fireEvent.dragOver(element);
|
||||
@ -704,18 +716,19 @@ describe('dockviewGroupPanelModel', () => {
|
||||
expect(counter).toBe(1);
|
||||
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test('that the .locked behaviour is as', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {},
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -751,13 +764,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
});
|
||||
|
||||
const element = container
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.item(0)! as HTMLElement;
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!;
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
|
||||
|
||||
function run(value: number) {
|
||||
fireEvent.dragEnter(element);
|
||||
@ -771,7 +784,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.locked = false;
|
||||
run(10);
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
fireEvent.dragEnd(element);
|
||||
|
||||
@ -779,7 +792,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.locked = 'no-drop-target';
|
||||
run(10);
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
fireEvent.dragEnd(element);
|
||||
|
||||
@ -787,7 +800,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.locked = true;
|
||||
run(10);
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
fireEvent.dragEnd(element);
|
||||
|
||||
@ -795,29 +808,35 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.locked = true;
|
||||
run(25);
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
fireEvent.dragEnd(element);
|
||||
});
|
||||
|
||||
test('that should show drop target if dropping on self', () => {
|
||||
test('that should not show drop target if dropping on self', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {},
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div'),
|
||||
fromPartial<DockviewComponent>({})
|
||||
document.createElement('div')
|
||||
),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupView = fromPartial<DockviewGroupPanelModel>({
|
||||
canDisplayOverlay: jest.fn(),
|
||||
});
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
() => {
|
||||
return {
|
||||
canDisplayOverlay: jest.fn(),
|
||||
};
|
||||
}
|
||||
);
|
||||
|
||||
const groupView = new groupviewMock() as DockviewGroupPanelModel;
|
||||
|
||||
const groupPanelMock = jest.fn<Partial<DockviewGroupPanel>, []>(() => {
|
||||
return {
|
||||
@ -844,13 +863,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.openPanel(new TestPanel('panel1', panelApi));
|
||||
|
||||
const element = container
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.item(0)! as HTMLElement;
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!;
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
|
||||
|
||||
LocalSelectionTransfer.getInstance().setData(
|
||||
[new PanelTransfer('testcomponentid', 'groupviewid', 'panel1')],
|
||||
@ -863,23 +882,23 @@ describe('dockviewGroupPanelModel', () => {
|
||||
expect(counter).toBe(0);
|
||||
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test('that should allow drop when dropping on self for same component id', () => {
|
||||
test('that should not allow drop when dropping on self for same component id', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {},
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div'),
|
||||
fromPartial<DockviewComponent>({})
|
||||
document.createElement('div')
|
||||
),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -918,13 +937,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.openPanel(new TestPanel('panel2', panelApi));
|
||||
|
||||
const element = container
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!;
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
|
||||
|
||||
LocalSelectionTransfer.getInstance().setData(
|
||||
[new PanelTransfer('testcomponentid', 'groupviewid', 'panel1')],
|
||||
@ -937,23 +956,23 @@ describe('dockviewGroupPanelModel', () => {
|
||||
expect(counter).toBe(0);
|
||||
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
).toBe(1);
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
test('that should not allow drop when not dropping for different component id', () => {
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
id: 'testcomponentid',
|
||||
options: {},
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
},
|
||||
getPanel: jest.fn(),
|
||||
doSetGroupActive: jest.fn(),
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
overlayRenderContainer: new OverlayRenderContainer(
|
||||
document.createElement('div'),
|
||||
fromPartial<DockviewComponent>({})
|
||||
document.createElement('div')
|
||||
),
|
||||
onDidOptionsChange: jest.fn(),
|
||||
});
|
||||
|
||||
const groupviewMock = jest.fn<Partial<DockviewGroupPanelModel>, []>(
|
||||
@ -992,13 +1011,13 @@ describe('dockviewGroupPanelModel', () => {
|
||||
cut.openPanel(new TestPanel('panel2', panelApi));
|
||||
|
||||
const element = container
|
||||
.getElementsByClassName('dv-content-container')
|
||||
.item(0) as HTMLElement;
|
||||
.getElementsByClassName('content-container')
|
||||
.item(0)!;
|
||||
|
||||
jest.spyOn(element, 'offsetHeight', 'get').mockImplementation(
|
||||
jest.spyOn(element, 'clientHeight', 'get').mockImplementation(
|
||||
() => 100
|
||||
);
|
||||
jest.spyOn(element, 'offsetWidth', 'get').mockImplementation(() => 100);
|
||||
jest.spyOn(element, 'clientWidth', 'get').mockImplementation(() => 100);
|
||||
|
||||
LocalSelectionTransfer.getInstance().setData(
|
||||
[new PanelTransfer('anothercomponentid', 'groupviewid', 'panel1')],
|
||||
@ -1011,7 +1030,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
expect(counter).toBe(1);
|
||||
|
||||
expect(
|
||||
element.getElementsByClassName('dv-drop-target-dropzone').length
|
||||
element.getElementsByClassName('drop-target-dropzone').length
|
||||
).toBe(0);
|
||||
});
|
||||
|
||||
@ -1096,7 +1115,7 @@ describe('dockviewGroupPanelModel', () => {
|
||||
container.getElementsByClassName('watermark-test-container').length
|
||||
).toBe(0);
|
||||
expect(
|
||||
container.getElementsByClassName('dv-tabs-and-actions-container')
|
||||
container.getElementsByClassName('tabs-and-actions-container')
|
||||
.length
|
||||
).toBe(1);
|
||||
|
||||
|
||||
@ -7,8 +7,24 @@ import { fromPartial } from '@total-typescript/shoehorn';
|
||||
|
||||
describe('dockviewPanel', () => {
|
||||
test('update title', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {
|
||||
onDidActiveChange: jest.fn(),
|
||||
} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest.fn(),
|
||||
@ -16,11 +32,7 @@ describe('dockviewPanel', () => {
|
||||
onDidActiveChange: jest.fn(),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -55,8 +67,23 @@ describe('dockviewPanel', () => {
|
||||
});
|
||||
|
||||
test('that .setTitle updates the title', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {
|
||||
onDidActiveChange: jest.fn(),
|
||||
} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest.fn(),
|
||||
@ -64,10 +91,7 @@ describe('dockviewPanel', () => {
|
||||
onDidActiveChange: jest.fn(),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -93,8 +117,22 @@ describe('dockviewPanel', () => {
|
||||
});
|
||||
|
||||
test('dispose cleanup', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest
|
||||
@ -108,11 +146,7 @@ describe('dockviewPanel', () => {
|
||||
.mockReturnValue({ dispose: jest.fn() }),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -135,8 +169,22 @@ describe('dockviewPanel', () => {
|
||||
});
|
||||
|
||||
test('get params', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest.fn(),
|
||||
@ -144,11 +192,7 @@ describe('dockviewPanel', () => {
|
||||
onDidActiveChange: jest.fn(),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -171,8 +215,22 @@ describe('dockviewPanel', () => {
|
||||
});
|
||||
|
||||
test('setSize propagates to underlying group', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest.fn(),
|
||||
@ -181,11 +239,7 @@ describe('dockviewPanel', () => {
|
||||
setSize: jest.fn(),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -202,16 +256,27 @@ describe('dockviewPanel', () => {
|
||||
|
||||
cut.api.setSize({ height: 123, width: 456 });
|
||||
|
||||
expect(group.api.setSize).toHaveBeenCalledWith({
|
||||
height: 123,
|
||||
width: 456,
|
||||
});
|
||||
expect(group.api.setSize).toHaveBeenCalledTimes(1);
|
||||
expect(group.api.setSize).toBeCalledWith({ height: 123, width: 456 });
|
||||
expect(group.api.setSize).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test('updateParameter', () => {
|
||||
const api = fromPartial<DockviewApi>({});
|
||||
const accessor = fromPartial<DockviewComponent>({});
|
||||
const dockviewApiMock = jest.fn<DockviewApi, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const accessorMock = jest.fn<DockviewComponent, []>(() => {
|
||||
return {} as any;
|
||||
});
|
||||
const panelModelMock = jest.fn<Partial<IDockviewPanelModel>, []>(() => {
|
||||
return {
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
};
|
||||
});
|
||||
|
||||
const api = new dockviewApiMock();
|
||||
const accessor = new accessorMock();
|
||||
const group = fromPartial<DockviewGroupPanel>({
|
||||
api: {
|
||||
onDidVisibilityChange: jest.fn(),
|
||||
@ -219,11 +284,7 @@ describe('dockviewPanel', () => {
|
||||
onDidActiveChange: jest.fn(),
|
||||
},
|
||||
});
|
||||
const model = fromPartial<IDockviewPanelModel>({
|
||||
update: jest.fn(),
|
||||
init: jest.fn(),
|
||||
dispose: jest.fn(),
|
||||
});
|
||||
const model = <IDockviewPanelModel>new panelModelMock();
|
||||
|
||||
const cut = new DockviewPanel(
|
||||
'fake-id',
|
||||
@ -244,9 +305,6 @@ describe('dockviewPanel', () => {
|
||||
// update 'a' and add 'c'
|
||||
cut.update({ params: { a: '-1', c: '3' } });
|
||||
expect(cut.params).toEqual({ a: '-1', b: '2', c: '3' });
|
||||
expect(model.update).toHaveBeenCalledWith({
|
||||
params: { a: '-1', b: '2', c: '3' },
|
||||
});
|
||||
|
||||
cut.update({ params: { d: '4', e: '5', f: '6' } });
|
||||
expect(cut.params).toEqual({
|
||||
@ -257,9 +315,6 @@ describe('dockviewPanel', () => {
|
||||
e: '5',
|
||||
f: '6',
|
||||
});
|
||||
expect(model.update).toHaveBeenCalledWith({
|
||||
params: { a: '-1', b: '2', c: '3', d: '4', e: '5', f: '6' },
|
||||
});
|
||||
|
||||
cut.update({
|
||||
params: {
|
||||
@ -280,8 +335,5 @@ describe('dockviewPanel', () => {
|
||||
g: '',
|
||||
h: null,
|
||||
});
|
||||
expect(model.update).toHaveBeenCalledWith({
|
||||
params: { a: '-1', b: '2', c: '3', d: '', e: null, g: '', h: null },
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@ -30,6 +30,7 @@ describe('dockviewGroupPanel', () => {
|
||||
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
@ -83,6 +84,7 @@ describe('dockviewGroupPanel', () => {
|
||||
test('that the default tab is created', () => {
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
@ -115,6 +117,7 @@ describe('dockviewGroupPanel', () => {
|
||||
test('that the provided default tab is chosen when no implementation is provided', () => {
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
defaultTabComponent: 'tabComponent',
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
@ -147,6 +150,7 @@ describe('dockviewGroupPanel', () => {
|
||||
test('that is library default tab instance is created when no alternative exists', () => {
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
@ -170,6 +174,7 @@ describe('dockviewGroupPanel', () => {
|
||||
test('that the default content is created', () => {
|
||||
accessorMock = fromPartial<DockviewComponent>({
|
||||
options: {
|
||||
parentElement: document.createElement('div'),
|
||||
createComponent(options) {
|
||||
switch (options.name) {
|
||||
case 'contentComponent':
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import {
|
||||
disableIframePointEvents,
|
||||
isInDocument,
|
||||
quasiDefaultPrevented,
|
||||
quasiPreventDefault,
|
||||
@ -46,38 +45,4 @@ describe('dom', () => {
|
||||
|
||||
expect(isInDocument(el2)).toBeTruthy();
|
||||
});
|
||||
|
||||
test('disableIframePointEvents', () => {
|
||||
const el1 = document.createElement('iframe');
|
||||
const el2 = document.createElement('iframe');
|
||||
const el3 = document.createElement('webview');
|
||||
const el4 = document.createElement('webview');
|
||||
|
||||
document.body.appendChild(el1);
|
||||
document.body.appendChild(el2);
|
||||
document.body.appendChild(el3);
|
||||
document.body.appendChild(el4);
|
||||
|
||||
el1.style.pointerEvents = 'inherit';
|
||||
el3.style.pointerEvents = 'inherit';
|
||||
|
||||
expect(el1.style.pointerEvents).toBe('inherit');
|
||||
expect(el2.style.pointerEvents).toBe('');
|
||||
expect(el3.style.pointerEvents).toBe('inherit');
|
||||
expect(el4.style.pointerEvents).toBe('');
|
||||
|
||||
const f = disableIframePointEvents();
|
||||
|
||||
expect(el1.style.pointerEvents).toBe('none');
|
||||
expect(el2.style.pointerEvents).toBe('none');
|
||||
expect(el3.style.pointerEvents).toBe('none');
|
||||
expect(el4.style.pointerEvents).toBe('none');
|
||||
|
||||
f.release();
|
||||
|
||||
expect(el1.style.pointerEvents).toBe('inherit');
|
||||
expect(el2.style.pointerEvents).toBe('');
|
||||
expect(el3.style.pointerEvents).toBe('inherit');
|
||||
expect(el4.style.pointerEvents).toBe('');
|
||||
});
|
||||
});
|
||||
|
||||
@ -3,6 +3,7 @@ import {
|
||||
Emitter,
|
||||
Event,
|
||||
addDisposableListener,
|
||||
addDisposableWindowListener,
|
||||
} from '../events';
|
||||
|
||||
describe('events', () => {
|
||||
@ -142,7 +143,7 @@ describe('events', () => {
|
||||
expect(value).toBe(3);
|
||||
});
|
||||
|
||||
it('addDisposableListener with capture options', () => {
|
||||
it('addDisposableWindowListener with capture options', () => {
|
||||
const element = {
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
@ -150,16 +151,16 @@ describe('events', () => {
|
||||
|
||||
const handler = jest.fn();
|
||||
|
||||
const disposable = addDisposableListener(
|
||||
const disposable = addDisposableWindowListener(
|
||||
element as any,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.addEventListener).toHaveBeenCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
@ -170,13 +171,13 @@ describe('events', () => {
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
});
|
||||
|
||||
it('addDisposableListener without capture options', () => {
|
||||
it('addDisposableWindowListener without capture options', () => {
|
||||
const element = {
|
||||
addEventListener: jest.fn(),
|
||||
removeEventListener: jest.fn(),
|
||||
@ -184,15 +185,15 @@ describe('events', () => {
|
||||
|
||||
const handler = jest.fn();
|
||||
|
||||
const disposable = addDisposableListener(
|
||||
const disposable = addDisposableWindowListener(
|
||||
element as any,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler
|
||||
);
|
||||
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.addEventListener).toHaveBeenCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
undefined
|
||||
);
|
||||
@ -203,7 +204,7 @@ describe('events', () => {
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
undefined
|
||||
);
|
||||
@ -219,14 +220,14 @@ describe('events', () => {
|
||||
|
||||
const disposable = addDisposableListener(
|
||||
element as any,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.addEventListener).toHaveBeenCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
@ -237,7 +238,7 @@ describe('events', () => {
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
true
|
||||
);
|
||||
@ -253,13 +254,13 @@ describe('events', () => {
|
||||
|
||||
const disposable = addDisposableListener(
|
||||
element as any,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler
|
||||
);
|
||||
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.addEventListener).toHaveBeenCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
undefined
|
||||
);
|
||||
@ -270,7 +271,7 @@ describe('events', () => {
|
||||
expect(element.addEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledTimes(1);
|
||||
expect(element.removeEventListener).toBeCalledWith(
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
handler,
|
||||
undefined
|
||||
);
|
||||
|
||||
@ -17,9 +17,13 @@ class TestPanel implements IGridPanelView {
|
||||
_onDidChange = new Emitter<IViewSize | undefined>();
|
||||
readonly onDidChange = this._onDidChange.event;
|
||||
|
||||
isVisible: boolean = true;
|
||||
isActive: boolean = true;
|
||||
params: Parameters = {};
|
||||
get isActive(): boolean {
|
||||
return true;
|
||||
}
|
||||
|
||||
get params(): Parameters {
|
||||
return {};
|
||||
}
|
||||
|
||||
constructor(
|
||||
public readonly id: string,
|
||||
@ -66,10 +70,8 @@ class TestPanel implements IGridPanelView {
|
||||
}
|
||||
|
||||
class ClassUnderTest extends BaseGrid<TestPanel> {
|
||||
readonly gridview = this.gridview;
|
||||
|
||||
constructor(parentElement: HTMLElement, options: BaseGridOptions) {
|
||||
super(parentElement, options);
|
||||
constructor(options: BaseGridOptions) {
|
||||
super(options);
|
||||
}
|
||||
|
||||
doRemoveGroup(
|
||||
@ -105,47 +107,9 @@ class ClassUnderTest extends BaseGrid<TestPanel> {
|
||||
}
|
||||
|
||||
describe('baseComponentGridview', () => {
|
||||
test('that the container is not removed when grid is disposed', () => {
|
||||
const root = document.createElement('div');
|
||||
const container = document.createElement('div');
|
||||
root.appendChild(container);
|
||||
|
||||
const cut = new ClassUnderTest(container, {
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
proportionalLayout: true,
|
||||
});
|
||||
|
||||
cut.dispose();
|
||||
|
||||
expect(container.parentElement).toBe(root);
|
||||
});
|
||||
|
||||
test('that .layout(...) force flag works', () => {
|
||||
const cut = new ClassUnderTest(document.createElement('div'), {
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
proportionalLayout: true,
|
||||
});
|
||||
|
||||
const spy = jest.spyOn(cut.gridview, 'layout');
|
||||
|
||||
cut.layout(100, 100);
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
|
||||
cut.layout(100, 100, false);
|
||||
expect(spy).toHaveBeenCalledTimes(1);
|
||||
|
||||
cut.layout(100, 100, true);
|
||||
expect(spy).toHaveBeenCalledTimes(2);
|
||||
|
||||
cut.layout(150, 150, false);
|
||||
expect(spy).toHaveBeenCalledTimes(3);
|
||||
|
||||
cut.layout(150, 150, true);
|
||||
expect(spy).toHaveBeenCalledTimes(4);
|
||||
});
|
||||
|
||||
test('can add group', () => {
|
||||
const cut = new ClassUnderTest(document.createElement('div'), {
|
||||
const cut = new ClassUnderTest({
|
||||
parentElement: document.createElement('div'),
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
proportionalLayout: true,
|
||||
});
|
||||
|
||||
@ -5,7 +5,6 @@ import {
|
||||
IGridView,
|
||||
IViewSize,
|
||||
SerializedGridview,
|
||||
getGridLocation,
|
||||
orthogonal,
|
||||
} from '../../gridview/gridview';
|
||||
import { Orientation, Sizing } from '../../splitview/splitview';
|
||||
@ -19,7 +18,7 @@ class MockGridview implements IGridView {
|
||||
IViewSize | undefined
|
||||
>().event;
|
||||
element: HTMLElement = document.createElement('div');
|
||||
isVisible: boolean = true;
|
||||
|
||||
width: number = 0;
|
||||
height: number = 0;
|
||||
|
||||
@ -1106,102 +1105,4 @@ describe('gridview', () => {
|
||||
|
||||
expect(gridview.hasMaximizedView()).toBeFalsy();
|
||||
});
|
||||
|
||||
test('visibility check', () => {
|
||||
const gridview = new Gridview(
|
||||
true,
|
||||
{ separatorBorder: '' },
|
||||
Orientation.HORIZONTAL
|
||||
);
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
const view1 = new MockGridview('1');
|
||||
const view2 = new MockGridview('2');
|
||||
const view3 = new MockGridview('3');
|
||||
const view4 = new MockGridview('4');
|
||||
const view5 = new MockGridview('5');
|
||||
const view6 = new MockGridview('6');
|
||||
|
||||
gridview.addView(view1, Sizing.Distribute, [0]);
|
||||
gridview.addView(view2, Sizing.Distribute, [1]);
|
||||
gridview.addView(view3, Sizing.Distribute, [1, 1]);
|
||||
gridview.addView(view4, Sizing.Distribute, [1, 1, 0]);
|
||||
gridview.addView(view5, Sizing.Distribute, [1, 1, 0, 0]);
|
||||
gridview.addView(view6, Sizing.Distribute, [1, 1, 0, 0, 0]);
|
||||
|
||||
/**
|
||||
* _____________________________________________
|
||||
* | | |
|
||||
* | | 2 |
|
||||
* | | |
|
||||
* | 1 |_______________________|
|
||||
* | | | 4 |
|
||||
* | | 3 |_____________|
|
||||
* | | | 5 | 6 |
|
||||
* |_____________________|_________|______|______|
|
||||
*/
|
||||
|
||||
function assertVisibility(visibility: boolean[]) {
|
||||
expect(gridview.isViewVisible(getGridLocation(view1.element))).toBe(
|
||||
visibility[0]
|
||||
);
|
||||
expect(gridview.isViewVisible(getGridLocation(view2.element))).toBe(
|
||||
visibility[1]
|
||||
);
|
||||
expect(gridview.isViewVisible(getGridLocation(view3.element))).toBe(
|
||||
visibility[2]
|
||||
);
|
||||
expect(gridview.isViewVisible(getGridLocation(view4.element))).toBe(
|
||||
visibility[3]
|
||||
);
|
||||
expect(gridview.isViewVisible(getGridLocation(view5.element))).toBe(
|
||||
visibility[4]
|
||||
);
|
||||
expect(gridview.isViewVisible(getGridLocation(view6.element))).toBe(
|
||||
visibility[5]
|
||||
);
|
||||
}
|
||||
|
||||
// hide each view one by one
|
||||
|
||||
assertVisibility([true, true, true, true, true, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view5.element), false);
|
||||
assertVisibility([true, true, true, true, false, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view4.element), false);
|
||||
assertVisibility([true, true, true, false, false, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view1.element), false);
|
||||
assertVisibility([false, true, true, false, false, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view2.element), false);
|
||||
assertVisibility([false, false, true, false, false, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view3.element), false);
|
||||
assertVisibility([false, false, false, false, false, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view6.element), false);
|
||||
assertVisibility([false, false, false, false, false, false]);
|
||||
|
||||
// un-hide each view one by one
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view1.element), true);
|
||||
assertVisibility([true, false, false, false, false, false]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view5.element), true);
|
||||
assertVisibility([true, false, false, false, true, false]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view6.element), true);
|
||||
assertVisibility([true, false, false, false, true, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view2.element), true);
|
||||
assertVisibility([true, true, false, false, true, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view3.element), true);
|
||||
assertVisibility([true, true, true, false, true, true]);
|
||||
|
||||
gridview.setViewVisible(getGridLocation(view4.element), true);
|
||||
assertVisibility([true, true, true, true, true, true]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -32,40 +32,12 @@ describe('gridview', () => {
|
||||
container = document.createElement('div');
|
||||
});
|
||||
|
||||
test('update className', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
className: 'test-a test-b',
|
||||
});
|
||||
|
||||
expect(gridview.element.className).toBe('test-a test-b');
|
||||
|
||||
gridview.updateOptions({ className: 'test-b test-c' });
|
||||
|
||||
expect(gridview.element.className).toBe('test-b test-c');
|
||||
});
|
||||
|
||||
test('added views are visible by default', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -81,17 +53,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('remove panel', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -118,17 +84,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('active panel', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -185,21 +145,13 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('deserialize and serialize a layout', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
expect(container.querySelectorAll('.dv-grid-view').length).toBe(1);
|
||||
|
||||
gridview.layout(800, 400);
|
||||
gridview.fromJSON({
|
||||
grid: {
|
||||
@ -244,9 +196,6 @@ describe('gridview', () => {
|
||||
},
|
||||
activePanel: 'panel_1',
|
||||
});
|
||||
|
||||
expect(container.querySelectorAll('.dv-grid-view').length).toBe(1);
|
||||
|
||||
gridview.layout(800, 400, true);
|
||||
|
||||
const panel1 = gridview.getPanel('panel_1')!;
|
||||
@ -324,17 +273,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('toJSON shouldnt fire any layout events', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(1000, 1000);
|
||||
@ -367,17 +310,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('gridview events', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -497,17 +434,11 @@ describe('gridview', () => {
|
||||
test('dispose of gridviewComponent', () => {
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -529,21 +460,15 @@ describe('gridview', () => {
|
||||
|
||||
gridview.dispose();
|
||||
|
||||
expect(container.children.length).toBe(0);
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('#1/VERTICAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -598,17 +523,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#2/HORIZONTAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -663,17 +582,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#3/HORIZONTAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -746,17 +659,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#4/HORIZONTAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -847,17 +754,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#5/VERTICAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -948,17 +849,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#5/VERTICAL/proportional/false', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1049,17 +944,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#6/VERTICAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1180,17 +1069,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#7/VERTICAL layout first', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1311,17 +1194,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#8/VERTICAL layout after', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1444,17 +1321,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#9/HORIZONTAL', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1575,17 +1446,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#9/HORIZONTAL/proportional/false', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(800, 400);
|
||||
@ -1706,17 +1571,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('#10/HORIZONTAL scale x:1.5 y:2', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.fromJSON({
|
||||
@ -1840,17 +1699,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when component is disposed', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(1000, 1000);
|
||||
@ -1877,17 +1730,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when removed', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
@ -1913,17 +1760,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when fromJSON is called', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: false,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
@ -1958,17 +1799,11 @@ describe('gridview', () => {
|
||||
test('fromJSON events should still fire', () => {
|
||||
jest.useFakeTimers();
|
||||
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
let addGroup: GridviewPanel[] = [];
|
||||
@ -2087,17 +1922,11 @@ describe('gridview', () => {
|
||||
test('that fromJSON layouts are resized to the current dimensions', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(1600, 800);
|
||||
@ -2220,17 +2049,11 @@ describe('gridview', () => {
|
||||
test('that a deep HORIZONTAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(6000, 5000);
|
||||
@ -2502,17 +2325,11 @@ describe('gridview', () => {
|
||||
test('that a deep VERTICAL layout with fromJSON dimensions identical to the current dimensions loads', async () => {
|
||||
const container = document.createElement('div');
|
||||
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
gridview.layout(5000, 6000);
|
||||
@ -2782,20 +2599,14 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('that loading a corrupt layout throws an error and leaves a clean gridview behind', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error(`unsupported panel '${options.name}'`);
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
let el = gridview.element.querySelector('.dv-view-container');
|
||||
let el = gridview.element.querySelector('.view-container');
|
||||
expect(el).toBeTruthy();
|
||||
expect(el!.childNodes.length).toBe(0);
|
||||
|
||||
@ -2856,44 +2667,34 @@ describe('gridview', () => {
|
||||
},
|
||||
activePanel: 'panel_1',
|
||||
});
|
||||
}).toThrow("unsupported panel 'somethingBad'");
|
||||
}).toThrow(
|
||||
"Cannot create 'panel_1', no component 'somethingBad' provided"
|
||||
);
|
||||
|
||||
expect(gridview.groups.length).toBe(0);
|
||||
|
||||
el = gridview.element.querySelector('.dv-view-container');
|
||||
el = gridview.element.querySelector('.view-container');
|
||||
expect(el).toBeTruthy();
|
||||
expect(el!.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('that disableAutoResizing is false by default', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
});
|
||||
|
||||
expect(gridview.disableResizing).toBeFalsy();
|
||||
});
|
||||
|
||||
test('that disableAutoResizing can be enabled', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
disableAutoResizing: true,
|
||||
});
|
||||
|
||||
@ -2901,17 +2702,11 @@ describe('gridview', () => {
|
||||
});
|
||||
|
||||
test('that setVisible toggles visiblity', () => {
|
||||
const gridview = new GridviewComponent(container, {
|
||||
const gridview = new GridviewComponent({
|
||||
parentElement: container,
|
||||
proportionalLayout: true,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestGridview(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
components: { default: TestGridview },
|
||||
disableAutoResizing: true,
|
||||
});
|
||||
gridview.layout(1000, 1000);
|
||||
|
||||
@ -8,7 +8,6 @@ describe('gridviewPanel', () => {
|
||||
onDidAddPanel: jest.fn(),
|
||||
onDidRemovePanel: jest.fn(),
|
||||
options: {},
|
||||
onDidOptionsChange: jest.fn(),
|
||||
} as any;
|
||||
});
|
||||
|
||||
|
||||
@ -8,8 +8,10 @@ describe('math', () => {
|
||||
expect(clamp(55, 40, 50)).toBe(50);
|
||||
});
|
||||
|
||||
it('if min > max return min', () => {
|
||||
expect(clamp(55, 50, 40)).toBe(50);
|
||||
it('should throw an error if min > max', () => {
|
||||
expect(() => clamp(55, 50, 40)).toThrow(
|
||||
'50 > 40 is an invalid condition'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -1,418 +0,0 @@
|
||||
import { Overlay } from '../../overlay/overlay';
|
||||
import { mockGetBoundingClientRect } from '../__test_utils__/utils';
|
||||
|
||||
describe('overlay', () => {
|
||||
test('toJSON, top left', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
left: 10,
|
||||
top: 20,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 80,
|
||||
top: 100,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 20,
|
||||
top: 30,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds();
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
top: 70,
|
||||
left: 60,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('toJSON, bottom right', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
right: 10,
|
||||
bottom: 20,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 80,
|
||||
top: 100,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 20,
|
||||
top: 30,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds();
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
bottom: -20,
|
||||
right: 0,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('that out-of-bounds dimensions are fixed, top left', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
left: -1000,
|
||||
top: -1000,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 80,
|
||||
top: 100,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 20,
|
||||
top: 30,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds();
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
top: 70,
|
||||
left: 60,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('that out-of-bounds dimensions are fixed, bottom right', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 200,
|
||||
width: 100,
|
||||
bottom: -1000,
|
||||
right: -1000,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
jest.spyOn(
|
||||
container.childNodes.item(0) as HTMLElement,
|
||||
'getBoundingClientRect'
|
||||
).mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 80,
|
||||
top: 100,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 20,
|
||||
top: 30,
|
||||
width: 100,
|
||||
height: 100,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds();
|
||||
|
||||
expect(cut.toJSON()).toEqual({
|
||||
bottom: -20,
|
||||
right: 0,
|
||||
width: 40,
|
||||
height: 50,
|
||||
});
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('setBounds, top left', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 1000,
|
||||
width: 1000,
|
||||
left: 0,
|
||||
top: 0,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
const element: HTMLElement = container.querySelector(
|
||||
'.dv-resize-container'
|
||||
)!;
|
||||
expect(element).toBeTruthy();
|
||||
|
||||
jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 300,
|
||||
top: 400,
|
||||
width: 200,
|
||||
height: 100,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds({ height: 100, width: 200, left: 300, top: 400 });
|
||||
|
||||
expect(element.style.height).toBe('100px');
|
||||
expect(element.style.width).toBe('200px');
|
||||
expect(element.style.left).toBe('300px');
|
||||
expect(element.style.top).toBe('400px');
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('setBounds, bottom right', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
document.body.appendChild(container);
|
||||
container.appendChild(content);
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 1000,
|
||||
width: 1000,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
const element: HTMLElement = container.querySelector(
|
||||
'.dv-resize-container'
|
||||
)!;
|
||||
expect(element).toBeTruthy();
|
||||
|
||||
jest.spyOn(element, 'getBoundingClientRect').mockImplementation(() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 500,
|
||||
top: 500,
|
||||
width: 200,
|
||||
height: 100,
|
||||
});
|
||||
});
|
||||
jest.spyOn(container, 'getBoundingClientRect').mockImplementation(
|
||||
() => {
|
||||
return mockGetBoundingClientRect({
|
||||
left: 0,
|
||||
top: 0,
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
cut.setBounds({ height: 100, width: 200, right: 300, bottom: 400 });
|
||||
|
||||
expect(element.style.height).toBe('100px');
|
||||
expect(element.style.width).toBe('200px');
|
||||
expect(element.style.right).toBe('300px');
|
||||
expect(element.style.bottom).toBe('400px');
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('that the resize handles are added', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
const cut = new Overlay({
|
||||
height: 500,
|
||||
width: 500,
|
||||
left: 100,
|
||||
top: 200,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
expect(container.querySelector('.dv-resize-handle-top')).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottom')
|
||||
).toBeTruthy();
|
||||
expect(container.querySelector('.dv-resize-handle-left')).toBeTruthy();
|
||||
expect(container.querySelector('.dv-resize-handle-right')).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-topleft')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-topright')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottomleft')
|
||||
).toBeTruthy();
|
||||
expect(
|
||||
container.querySelector('.dv-resize-handle-bottomright')
|
||||
).toBeTruthy();
|
||||
|
||||
cut.dispose();
|
||||
});
|
||||
|
||||
test('aria-level attributes and corresponding z-index', () => {
|
||||
const container = document.createElement('div');
|
||||
const content = document.createElement('div');
|
||||
|
||||
const createOverlay = () =>
|
||||
new Overlay({
|
||||
height: 500,
|
||||
width: 500,
|
||||
left: 100,
|
||||
top: 200,
|
||||
minimumInViewportWidth: 0,
|
||||
minimumInViewportHeight: 0,
|
||||
container,
|
||||
content,
|
||||
});
|
||||
|
||||
const overlay1 = createOverlay();
|
||||
|
||||
const zIndexValue = (delta: number) =>
|
||||
`calc(var(--dv-overlay-z-index, 999) + ${delta})`;
|
||||
|
||||
expect(overlay1.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
|
||||
|
||||
const overlay2 = createOverlay();
|
||||
const overlay3 = createOverlay();
|
||||
|
||||
expect(overlay1.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay2.element.getAttribute('aria-level')).toBe('1');
|
||||
expect(overlay3.element.getAttribute('aria-level')).toBe('2');
|
||||
expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
|
||||
expect(overlay2.element.style.zIndex).toBe(zIndexValue(2));
|
||||
expect(overlay3.element.style.zIndex).toBe(zIndexValue(4));
|
||||
|
||||
overlay2.bringToFront();
|
||||
|
||||
expect(overlay1.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay2.element.getAttribute('aria-level')).toBe('2');
|
||||
expect(overlay3.element.getAttribute('aria-level')).toBe('1');
|
||||
expect(overlay1.element.style.zIndex).toBe(zIndexValue(0));
|
||||
expect(overlay2.element.style.zIndex).toBe(zIndexValue(4));
|
||||
expect(overlay3.element.style.zIndex).toBe(zIndexValue(2));
|
||||
|
||||
overlay1.bringToFront();
|
||||
|
||||
expect(overlay1.element.getAttribute('aria-level')).toBe('2');
|
||||
expect(overlay2.element.getAttribute('aria-level')).toBe('1');
|
||||
expect(overlay3.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay1.element.style.zIndex).toBe(zIndexValue(4));
|
||||
expect(overlay2.element.style.zIndex).toBe(zIndexValue(2));
|
||||
expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
|
||||
|
||||
overlay2.dispose();
|
||||
|
||||
expect(overlay1.element.getAttribute('aria-level')).toBe('1');
|
||||
expect(overlay3.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay1.element.style.zIndex).toBe(zIndexValue(2));
|
||||
expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
|
||||
|
||||
overlay1.dispose();
|
||||
|
||||
expect(overlay3.element.getAttribute('aria-level')).toBe('0');
|
||||
expect(overlay3.element.style.zIndex).toBe(zIndexValue(0));
|
||||
});
|
||||
});
|
||||
@ -1,18 +1,14 @@
|
||||
import { Droptarget } from '../../dnd/droptarget';
|
||||
import { IDockviewPanel } from '../../dockview/dockviewPanel';
|
||||
import { Emitter } from '../../events';
|
||||
import {
|
||||
IRenderable,
|
||||
OverlayRenderContainer,
|
||||
} from '../../overlay/overlayRenderContainer';
|
||||
import { Droptarget } from '../dnd/droptarget';
|
||||
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { Emitter } from '../events';
|
||||
import { IRenderable, OverlayRenderContainer } from '../overlayRenderContainer';
|
||||
import { fromPartial } from '@total-typescript/shoehorn';
|
||||
import { Writable, exhaustMicrotaskQueue } from '../__test_utils__/utils';
|
||||
import { DockviewComponent } from '../../dockview/dockviewComponent';
|
||||
import { DockviewGroupPanel } from '../../dockview/dockviewGroupPanel';
|
||||
import { Writable, exhaustMicrotaskQueue } from './__test_utils__/utils';
|
||||
|
||||
describe('overlayRenderContainer', () => {
|
||||
let referenceContainer: IRenderable;
|
||||
let parentContainer: HTMLElement;
|
||||
let cut: OverlayRenderContainer;
|
||||
|
||||
beforeEach(() => {
|
||||
parentContainer = document.createElement('div');
|
||||
@ -21,28 +17,22 @@ describe('overlayRenderContainer', () => {
|
||||
element: document.createElement('div'),
|
||||
dropTarget: fromPartial<Droptarget>({}),
|
||||
};
|
||||
|
||||
cut = new OverlayRenderContainer(parentContainer);
|
||||
});
|
||||
|
||||
test('that attach(...) and detach(...) mutate the DOM as expected', () => {
|
||||
const cut = new OverlayRenderContainer(
|
||||
parentContainer,
|
||||
fromPartial<DockviewComponent>({})
|
||||
);
|
||||
|
||||
const panelContentEl = document.createElement('div');
|
||||
|
||||
const onDidVisibilityChange = new Emitter<any>();
|
||||
const onDidDimensionsChange = new Emitter<any>();
|
||||
const onDidLocationChange = new Emitter<any>();
|
||||
|
||||
const panel = fromPartial<IDockviewPanel>({
|
||||
api: {
|
||||
id: 'test_panel_id',
|
||||
onDidVisibilityChange: onDidVisibilityChange.event,
|
||||
onDidDimensionsChange: onDidDimensionsChange.event,
|
||||
onDidLocationChange: onDidLocationChange.event,
|
||||
isVisible: true,
|
||||
location: { type: 'grid' },
|
||||
},
|
||||
view: {
|
||||
content: {
|
||||
@ -68,25 +58,17 @@ describe('overlayRenderContainer', () => {
|
||||
});
|
||||
|
||||
test('add a view that is not currently in the DOM', async () => {
|
||||
const cut = new OverlayRenderContainer(
|
||||
parentContainer,
|
||||
fromPartial<DockviewComponent>({})
|
||||
);
|
||||
|
||||
const panelContentEl = document.createElement('div');
|
||||
|
||||
const onDidVisibilityChange = new Emitter<any>();
|
||||
const onDidDimensionsChange = new Emitter<any>();
|
||||
const onDidLocationChange = new Emitter<any>();
|
||||
|
||||
const panel = fromPartial<IDockviewPanel>({
|
||||
api: {
|
||||
id: 'test_panel_id',
|
||||
onDidVisibilityChange: onDidVisibilityChange.event,
|
||||
onDidDimensionsChange: onDidDimensionsChange.event,
|
||||
onDidLocationChange: onDidLocationChange.event,
|
||||
isVisible: true,
|
||||
location: { type: 'grid' },
|
||||
},
|
||||
view: {
|
||||
content: {
|
||||
@ -204,62 +186,4 @@ describe('overlayRenderContainer', () => {
|
||||
referenceContainer.element.getBoundingClientRect
|
||||
).toHaveBeenCalledTimes(3);
|
||||
});
|
||||
|
||||
test('related z-index from `aria-level` set on floating panels', async () => {
|
||||
const group = fromPartial<DockviewGroupPanel>({});
|
||||
|
||||
const element = document.createElement('div');
|
||||
element.setAttribute('aria-level', '2');
|
||||
const spy = jest.spyOn(element, 'getAttribute');
|
||||
|
||||
const accessor = fromPartial<DockviewComponent>({
|
||||
floatingGroups: [
|
||||
{
|
||||
group,
|
||||
overlay: {
|
||||
element,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const cut = new OverlayRenderContainer(parentContainer, accessor);
|
||||
|
||||
const panelContentEl = document.createElement('div');
|
||||
|
||||
const onDidVisibilityChange = new Emitter<any>();
|
||||
const onDidDimensionsChange = new Emitter<any>();
|
||||
const onDidLocationChange = new Emitter<any>();
|
||||
|
||||
const panel = fromPartial<IDockviewPanel>({
|
||||
api: {
|
||||
id: 'test_panel_id',
|
||||
onDidVisibilityChange: onDidVisibilityChange.event,
|
||||
onDidDimensionsChange: onDidDimensionsChange.event,
|
||||
onDidLocationChange: onDidLocationChange.event,
|
||||
isVisible: true,
|
||||
group,
|
||||
location: { type: 'floating' },
|
||||
},
|
||||
view: {
|
||||
content: {
|
||||
element: panelContentEl,
|
||||
},
|
||||
},
|
||||
group: {
|
||||
api: {
|
||||
location: { type: 'floating' },
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
cut.attach({ panel, referenceContainer });
|
||||
|
||||
await exhaustMicrotaskQueue();
|
||||
|
||||
expect(spy).toHaveBeenCalledWith('aria-level');
|
||||
expect(panelContentEl.parentElement!.style.zIndex).toBe(
|
||||
'calc(var(--dv-overlay-z-index, 999) + 5)'
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,102 @@
|
||||
import { createComponent } from '../../panel/componentFactory';
|
||||
|
||||
describe('componentFactory', () => {
|
||||
describe('createComponent', () => {
|
||||
test('valid component and framework component', () => {
|
||||
const mock = jest.fn();
|
||||
const mock2 = jest.fn();
|
||||
|
||||
expect(() =>
|
||||
createComponent(
|
||||
'id-1',
|
||||
'component-1',
|
||||
{ 'component-1': mock },
|
||||
{ 'component-1': mock2 }
|
||||
)
|
||||
).toThrow(
|
||||
"Cannot create 'id-1'. component 'component-1' registered as both a component and frameworkComponent"
|
||||
);
|
||||
});
|
||||
|
||||
test('valid framework component but no factory', () => {
|
||||
const mock = jest.fn();
|
||||
|
||||
expect(() =>
|
||||
createComponent(
|
||||
'id-1',
|
||||
'component-1',
|
||||
{},
|
||||
{ 'component-1': mock }
|
||||
)
|
||||
).toThrow(
|
||||
"Cannot create 'id-1' for framework component 'component-1'. you must register a frameworkPanelWrapper to use framework components"
|
||||
);
|
||||
});
|
||||
|
||||
test('valid framework component', () => {
|
||||
const component = jest.fn();
|
||||
const createComponentFn = jest
|
||||
.fn()
|
||||
.mockImplementation(() => component);
|
||||
const frameworkComponent = jest.fn();
|
||||
|
||||
expect(
|
||||
createComponent(
|
||||
'id-1',
|
||||
'component-1',
|
||||
{},
|
||||
{ 'component-1': frameworkComponent },
|
||||
{
|
||||
createComponent: createComponentFn,
|
||||
}
|
||||
)
|
||||
).toBe(component);
|
||||
|
||||
expect(createComponentFn).toHaveBeenCalledWith(
|
||||
'id-1',
|
||||
'component-1',
|
||||
frameworkComponent
|
||||
);
|
||||
});
|
||||
|
||||
test('no valid component with fallback', () => {
|
||||
const mock = jest.fn();
|
||||
|
||||
expect(
|
||||
createComponent(
|
||||
'id-1',
|
||||
'component-1',
|
||||
{},
|
||||
{},
|
||||
{
|
||||
createComponent: () => null,
|
||||
},
|
||||
() => mock
|
||||
)
|
||||
).toBe(mock);
|
||||
});
|
||||
|
||||
test('no valid component', () => {
|
||||
expect(() =>
|
||||
createComponent('id-1', 'component-1', {}, {})
|
||||
).toThrow(
|
||||
"Cannot create 'id-1', no component 'component-1' provided"
|
||||
);
|
||||
});
|
||||
|
||||
test('valid component', () => {
|
||||
const component = jest.fn();
|
||||
|
||||
const componentResult = createComponent(
|
||||
'id-1',
|
||||
'component-1',
|
||||
{ 'component-1': component },
|
||||
{}
|
||||
);
|
||||
|
||||
expect(component).toHaveBeenCalled();
|
||||
|
||||
expect(componentResult instanceof component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -1,10 +1,14 @@
|
||||
import { CompositeDisposable } from '../../lifecycle';
|
||||
import { Paneview } from '../../paneview/paneview';
|
||||
import { IPanePart, PaneviewPanel } from '../../paneview/paneviewPanel';
|
||||
import {
|
||||
IPaneBodyPart,
|
||||
IPaneHeaderPart,
|
||||
PaneviewPanel,
|
||||
} from '../../paneview/paneviewPanel';
|
||||
import { Orientation } from '../../splitview/splitview';
|
||||
|
||||
class TestPanel extends PaneviewPanel {
|
||||
protected getBodyComponent(): IPanePart {
|
||||
protected getBodyComponent(): IPaneBodyPart {
|
||||
return {
|
||||
element: document.createElement('div'),
|
||||
update: () => {
|
||||
@ -19,7 +23,7 @@ class TestPanel extends PaneviewPanel {
|
||||
};
|
||||
}
|
||||
|
||||
protected getHeaderComponent(): IPanePart {
|
||||
protected getHeaderComponent(): IPaneHeaderPart {
|
||||
return {
|
||||
element: document.createElement('div'),
|
||||
update: () => {
|
||||
@ -56,28 +60,22 @@ describe('paneview', () => {
|
||||
paneview.onDidRemoveView((view) => removed.push(view))
|
||||
);
|
||||
|
||||
const view1 = new TestPanel({
|
||||
id: 'id',
|
||||
component: 'component',
|
||||
headerComponent: 'headerComponent',
|
||||
orientation: Orientation.VERTICAL,
|
||||
isExpanded: true,
|
||||
isHeaderVisible: true,
|
||||
headerSize: 22,
|
||||
minimumBodySize: 0,
|
||||
maximumBodySize: Number.MAX_SAFE_INTEGER,
|
||||
});
|
||||
const view2 = new TestPanel({
|
||||
id: 'id2',
|
||||
component: 'component',
|
||||
headerComponent: 'headerComponent',
|
||||
orientation: Orientation.VERTICAL,
|
||||
isExpanded: true,
|
||||
isHeaderVisible: true,
|
||||
headerSize: 22,
|
||||
minimumBodySize: 0,
|
||||
maximumBodySize: Number.MAX_SAFE_INTEGER,
|
||||
});
|
||||
const view1 = new TestPanel(
|
||||
'id',
|
||||
'component',
|
||||
'headerComponent',
|
||||
Orientation.VERTICAL,
|
||||
true,
|
||||
true
|
||||
);
|
||||
const view2 = new TestPanel(
|
||||
'id2',
|
||||
'component',
|
||||
'headerComponent',
|
||||
Orientation.VERTICAL,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
expect(added.length).toBe(0);
|
||||
expect(removed.length).toBe(0);
|
||||
@ -112,28 +110,22 @@ describe('paneview', () => {
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
|
||||
const view1 = new TestPanel({
|
||||
id: 'id',
|
||||
component: 'component',
|
||||
headerComponent: 'headerComponent',
|
||||
orientation: Orientation.VERTICAL,
|
||||
isExpanded: true,
|
||||
isHeaderVisible: true,
|
||||
headerSize: 22,
|
||||
minimumBodySize: 0,
|
||||
maximumBodySize: Number.MAX_SAFE_INTEGER,
|
||||
});
|
||||
const view2 = new TestPanel({
|
||||
id: 'id2',
|
||||
component: 'component',
|
||||
headerComponent: 'headerComponent',
|
||||
orientation: Orientation.VERTICAL,
|
||||
isExpanded: true,
|
||||
isHeaderVisible: true,
|
||||
headerSize: 22,
|
||||
minimumBodySize: 0,
|
||||
maximumBodySize: Number.MAX_SAFE_INTEGER,
|
||||
});
|
||||
const view1 = new TestPanel(
|
||||
'id',
|
||||
'component',
|
||||
'headerComponent',
|
||||
Orientation.VERTICAL,
|
||||
true,
|
||||
true
|
||||
);
|
||||
const view2 = new TestPanel(
|
||||
'id2',
|
||||
'component',
|
||||
'headerComponent',
|
||||
Orientation.VERTICAL,
|
||||
true,
|
||||
true
|
||||
);
|
||||
|
||||
paneview.addPane(view1);
|
||||
paneview.addPane(view2);
|
||||
|
||||
@ -4,28 +4,19 @@ import { PanelUpdateEvent } from '../../panel/types';
|
||||
import { PaneviewComponent } from '../../paneview/paneviewComponent';
|
||||
import {
|
||||
PaneviewPanel,
|
||||
IPanePart,
|
||||
IPaneBodyPart,
|
||||
IPaneHeaderPart,
|
||||
PanePanelComponentInitParameter,
|
||||
} from '../../paneview/paneviewPanel';
|
||||
import { Orientation } from '../../splitview/splitview';
|
||||
|
||||
class TestPanel extends PaneviewPanel {
|
||||
constructor(id: string, component: string) {
|
||||
super({
|
||||
id,
|
||||
component,
|
||||
headerComponent: 'header',
|
||||
orientation: Orientation.VERTICAL,
|
||||
isExpanded: false,
|
||||
isHeaderVisible: true,
|
||||
headerSize: 22,
|
||||
minimumBodySize: 0,
|
||||
maximumBodySize: Number.MAX_SAFE_INTEGER,
|
||||
});
|
||||
super(id, component, 'header', Orientation.VERTICAL, false, true);
|
||||
}
|
||||
|
||||
getHeaderComponent() {
|
||||
return new (class Header implements IPanePart {
|
||||
return new (class Header implements IPaneHeaderPart {
|
||||
private _element: HTMLElement = document.createElement('div');
|
||||
|
||||
get element() {
|
||||
@ -47,7 +38,7 @@ class TestPanel extends PaneviewPanel {
|
||||
}
|
||||
|
||||
getBodyComponent() {
|
||||
return new (class Header implements IPanePart {
|
||||
return new (class Header implements IPaneBodyPart {
|
||||
private _element: HTMLElement = document.createElement('div');
|
||||
|
||||
get element() {
|
||||
@ -69,7 +60,7 @@ class TestPanel extends PaneviewPanel {
|
||||
}
|
||||
}
|
||||
|
||||
describe('paneviewComponent', () => {
|
||||
describe('componentPaneview', () => {
|
||||
let container: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
@ -77,39 +68,13 @@ describe('paneviewComponent', () => {
|
||||
container.className = 'container';
|
||||
});
|
||||
|
||||
test('that the container is not removed when grid is disposed', () => {
|
||||
const root = document.createElement('div');
|
||||
const container = document.createElement('div');
|
||||
root.appendChild(container);
|
||||
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
paneview.dispose();
|
||||
|
||||
expect(container.parentElement).toBe(root);
|
||||
expect(container.children.length).toBe(0);
|
||||
});
|
||||
|
||||
test('vertical panels', () => {
|
||||
const disposables = new CompositeDisposable();
|
||||
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -117,12 +82,12 @@ describe('paneviewComponent', () => {
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel2',
|
||||
});
|
||||
|
||||
@ -179,19 +144,13 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('serialization', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
expect(container.querySelectorAll('.dv-pane-container').length).toBe(1);
|
||||
|
||||
paneview.fromJSON({
|
||||
size: 6,
|
||||
views: [
|
||||
@ -199,7 +158,7 @@ describe('paneviewComponent', () => {
|
||||
size: 1,
|
||||
data: {
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
},
|
||||
expanded: true,
|
||||
@ -208,7 +167,7 @@ describe('paneviewComponent', () => {
|
||||
size: 2,
|
||||
data: {
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
},
|
||||
expanded: false,
|
||||
@ -217,15 +176,13 @@ describe('paneviewComponent', () => {
|
||||
size: 3,
|
||||
data: {
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 3',
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
expect(container.querySelectorAll('.dv-pane-container').length).toBe(1);
|
||||
|
||||
paneview.layout(400, 800);
|
||||
|
||||
const panel1 = paneview.getPanel('panel1');
|
||||
@ -265,57 +222,53 @@ describe('paneviewComponent', () => {
|
||||
size: 756,
|
||||
data: {
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
},
|
||||
expanded: true,
|
||||
headerSize: 22,
|
||||
minimumSize: 100,
|
||||
},
|
||||
{
|
||||
size: 22,
|
||||
data: {
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
},
|
||||
expanded: false,
|
||||
headerSize: 22,
|
||||
minimumSize: 100,
|
||||
},
|
||||
{
|
||||
size: 22,
|
||||
data: {
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 3',
|
||||
},
|
||||
expanded: false,
|
||||
headerSize: 22,
|
||||
minimumSize: 100,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test('toJSON shouldnt fire any layout events', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
paneview.layout(1000, 1000);
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
});
|
||||
|
||||
@ -329,15 +282,13 @@ describe('paneviewComponent', () => {
|
||||
disposable.dispose();
|
||||
});
|
||||
|
||||
test('panel is disposed of when component is disposed', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
test('dispose of paneviewComponent', () => {
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -345,12 +296,40 @@ describe('paneviewComponent', () => {
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
});
|
||||
|
||||
expect(container.childNodes.length).toBeGreaterThan(0);
|
||||
|
||||
paneview.dispose();
|
||||
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('panel is disposed of when component is disposed', () => {
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
paneview.layout(1000, 1000);
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
});
|
||||
|
||||
@ -367,14 +346,10 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when removed', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -382,12 +357,12 @@ describe('paneviewComponent', () => {
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
});
|
||||
|
||||
@ -404,14 +379,10 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when fromJSON is called', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -419,12 +390,12 @@ describe('paneviewComponent', () => {
|
||||
|
||||
paneview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
});
|
||||
paneview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
});
|
||||
|
||||
@ -441,14 +412,10 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('that fromJSON layouts are resized to the current dimensions', async () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -461,17 +428,16 @@ describe('paneviewComponent', () => {
|
||||
size: 1,
|
||||
data: {
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
},
|
||||
minimumSize: 100,
|
||||
expanded: true,
|
||||
},
|
||||
{
|
||||
size: 2,
|
||||
data: {
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
},
|
||||
expanded: true,
|
||||
@ -480,7 +446,7 @@ describe('paneviewComponent', () => {
|
||||
size: 3,
|
||||
data: {
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 3',
|
||||
},
|
||||
expanded: true,
|
||||
@ -496,46 +462,41 @@ describe('paneviewComponent', () => {
|
||||
size: 122,
|
||||
data: {
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 1',
|
||||
},
|
||||
expanded: true,
|
||||
minimumSize: 100,
|
||||
headerSize: 22,
|
||||
},
|
||||
{
|
||||
size: 22,
|
||||
size: 122,
|
||||
data: {
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 2',
|
||||
},
|
||||
expanded: true,
|
||||
headerSize: 22,
|
||||
minimumSize: 100,
|
||||
},
|
||||
{
|
||||
size: 456,
|
||||
size: 356,
|
||||
data: {
|
||||
id: 'panel3',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
title: 'Panel 3',
|
||||
},
|
||||
expanded: true,
|
||||
headerSize: 22,
|
||||
minimumSize: 100,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
test('that disableAutoResizing is false by default', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -543,14 +504,10 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('that disableAutoResizing can be enabled', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
disableAutoResizing: true,
|
||||
});
|
||||
@ -559,14 +516,10 @@ describe('paneviewComponent', () => {
|
||||
});
|
||||
|
||||
test('that setVisible toggles visiblity', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
const paneview = new PaneviewComponent({
|
||||
parentElement: container,
|
||||
components: {
|
||||
default: TestPanel,
|
||||
},
|
||||
disableAutoResizing: true,
|
||||
});
|
||||
@ -595,25 +548,4 @@ describe('paneviewComponent', () => {
|
||||
expect(panel1.api.isVisible).toBeTruthy();
|
||||
expect(panel2.api.isVisible).toBeTruthy();
|
||||
});
|
||||
|
||||
test('update className', () => {
|
||||
const paneview = new PaneviewComponent(container, {
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
disableAutoResizing: true,
|
||||
className: 'test-a test-b',
|
||||
});
|
||||
|
||||
expect(paneview.element.className).toBe('test-a test-b');
|
||||
|
||||
paneview.updateOptions({ className: 'test-b test-c' });
|
||||
|
||||
expect(paneview.element.className).toBe('test-b test-c');
|
||||
});
|
||||
});
|
||||
|
||||
@ -96,7 +96,7 @@ describe('splitview', () => {
|
||||
expect(splitview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
const viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container dv-horizontal'
|
||||
'.split-view-container horizontal'
|
||||
);
|
||||
expect(viewQuery).toBeTruthy();
|
||||
|
||||
@ -111,7 +111,7 @@ describe('splitview', () => {
|
||||
expect(splitview.orientation).toBe(Orientation.VERTICAL);
|
||||
|
||||
const viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container dv-vertical'
|
||||
'.split-view-container vertical'
|
||||
);
|
||||
expect(viewQuery).toBeTruthy();
|
||||
|
||||
@ -128,48 +128,48 @@ describe('splitview', () => {
|
||||
splitview.addView(new Testview(50, 50));
|
||||
|
||||
let viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
'.split-view-container > .view-container > .view'
|
||||
);
|
||||
expect(viewQuery.length).toBe(3);
|
||||
|
||||
let sashQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
'.split-view-container > .sash-container > .sash'
|
||||
);
|
||||
expect(sashQuery.length).toBe(2);
|
||||
|
||||
splitview.removeView(2);
|
||||
|
||||
viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
'.split-view-container > .view-container > .view'
|
||||
);
|
||||
expect(viewQuery.length).toBe(2);
|
||||
|
||||
sashQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
'.split-view-container > .sash-container > .sash'
|
||||
);
|
||||
expect(sashQuery.length).toBe(1);
|
||||
|
||||
splitview.removeView(0);
|
||||
|
||||
viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
'.split-view-container > .view-container > .view'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
|
||||
sashQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
'.split-view-container > .sash-container > .sash'
|
||||
);
|
||||
expect(sashQuery.length).toBe(0);
|
||||
|
||||
splitview.removeView(0);
|
||||
|
||||
viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
'.split-view-container > .view-container > .view'
|
||||
);
|
||||
expect(viewQuery.length).toBe(0);
|
||||
|
||||
sashQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
'.split-view-container > .sash-container > .sash'
|
||||
);
|
||||
expect(sashQuery.length).toBe(0);
|
||||
|
||||
@ -188,14 +188,14 @@ describe('splitview', () => {
|
||||
splitview.addView(view2);
|
||||
|
||||
let viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view.visible'
|
||||
'.split-view-container > .view-container > .view.visible'
|
||||
);
|
||||
expect(viewQuery.length).toBe(2);
|
||||
|
||||
splitview.setViewVisible(1, false);
|
||||
|
||||
viewQuery = container.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view.visible'
|
||||
'.split-view-container > .view-container > .view.visible'
|
||||
);
|
||||
expect(viewQuery.length).toBe(1);
|
||||
|
||||
@ -619,7 +619,7 @@ describe('splitview', () => {
|
||||
);
|
||||
|
||||
const sashElement = container
|
||||
.getElementsByClassName('dv-sash')
|
||||
.getElementsByClassName('sash')
|
||||
.item(0) as HTMLElement;
|
||||
|
||||
// validate the expected state before drag
|
||||
@ -772,130 +772,4 @@ describe('splitview', () => {
|
||||
view1.fireChangeEvent({ size: 300 });
|
||||
expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]);
|
||||
});
|
||||
|
||||
test('that margins are applied to view sizing', () => {
|
||||
const splitview = new Splitview(container, {
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
proportionalLayout: false,
|
||||
margin: 24,
|
||||
});
|
||||
splitview.layout(924, 500);
|
||||
|
||||
const view1 = new Testview(0, 1000);
|
||||
const view2 = new Testview(0, 1000);
|
||||
const view3 = new Testview(0, 1000);
|
||||
const view4 = new Testview(0, 1000);
|
||||
|
||||
splitview.addView(view1);
|
||||
expect([view1.size]).toEqual([924]);
|
||||
|
||||
splitview.addView(view2);
|
||||
expect([view1.size, view2.size]).toEqual([450, 450]); // 450 + 24 + 450 = 924
|
||||
|
||||
splitview.addView(view3);
|
||||
expect([view1.size, view2.size, view3.size]).toEqual([292, 292, 292]); // 292 + 24 + 292 + 24 + 292 = 924
|
||||
|
||||
splitview.addView(view4);
|
||||
expect([view1.size, view2.size, view3.size, view4.size]).toEqual([
|
||||
213, 213, 213, 213,
|
||||
]); // 213 + 24 + 213 + 24 + 213 + 24 + 213 = 924
|
||||
|
||||
let viewQuery = Array.from(
|
||||
container
|
||||
.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
)
|
||||
.entries()
|
||||
)
|
||||
.map(([i, e]) => e as HTMLElement)
|
||||
.map((e) => ({
|
||||
left: e.style.left,
|
||||
top: e.style.top,
|
||||
height: e.style.height,
|
||||
width: e.style.width,
|
||||
}));
|
||||
|
||||
let sashQuery = Array.from(
|
||||
container
|
||||
.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
)
|
||||
.entries()
|
||||
)
|
||||
.map(([i, e]) => e as HTMLElement)
|
||||
.map((e) => ({
|
||||
left: e.style.left,
|
||||
top: e.style.top,
|
||||
}));
|
||||
|
||||
// check HTMLElement positions since these are the ones that really matter
|
||||
|
||||
expect(viewQuery).toEqual([
|
||||
{ left: '0px', top: '', width: '213px', height: '' },
|
||||
// 213 + 24 = 237
|
||||
{ left: '237px', top: '', width: '213px', height: '' },
|
||||
// 237 + 213 + 24 = 474
|
||||
{ left: '474px', top: '', width: '213px', height: '' },
|
||||
// 474 + 213 + 24 = 474
|
||||
{ left: '711px', top: '', width: '213px', height: '' },
|
||||
// 711 + 213 = 924
|
||||
]);
|
||||
|
||||
// 924 / 4 = 231 view size
|
||||
// 231 - (24*3/4) = 213 margin adjusted view size
|
||||
// 213 - 4/2 + 24/2 = 223
|
||||
expect(sashQuery).toEqual([
|
||||
// 213 - 4/2 + 24/2 = 223
|
||||
{ left: '223px', top: '0px' },
|
||||
// 213 + 24 + 213 = 450
|
||||
// 450 - 4/2 + 24/2 = 460
|
||||
{ left: '460px', top: '0px' },
|
||||
// 213 + 24 + 213 + 24 + 213 = 687
|
||||
// 687 - 4/2 + 24/2 = 697
|
||||
{ left: '697px', top: '0px' },
|
||||
]);
|
||||
|
||||
splitview.setViewVisible(0, false);
|
||||
|
||||
viewQuery = Array.from(
|
||||
container
|
||||
.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-view-container > .dv-view'
|
||||
)
|
||||
.entries()
|
||||
)
|
||||
.map(([i, e]) => e as HTMLElement)
|
||||
.map((e) => ({
|
||||
left: e.style.left,
|
||||
top: e.style.top,
|
||||
height: e.style.height,
|
||||
width: e.style.width,
|
||||
}));
|
||||
|
||||
sashQuery = Array.from(
|
||||
container
|
||||
.querySelectorAll(
|
||||
'.dv-split-view-container > .dv-sash-container > .dv-sash'
|
||||
)
|
||||
.entries()
|
||||
)
|
||||
.map(([i, e]) => e as HTMLElement)
|
||||
.map((e) => ({
|
||||
left: e.style.left,
|
||||
top: e.style.top,
|
||||
}));
|
||||
|
||||
expect(viewQuery).toEqual([
|
||||
{ left: '0px', top: '', width: '0px', height: '' },
|
||||
{ left: '0px', top: '', width: '215px', height: '' },
|
||||
{ left: '239px', top: '', width: '215px', height: '' },
|
||||
{ left: '478px', top: '', width: '446px', height: '' },
|
||||
]);
|
||||
|
||||
expect(sashQuery).toEqual([
|
||||
{ left: '0px', top: '0px' },
|
||||
{ left: '225px', top: '0px' },
|
||||
{ left: '464px', top: '0px' },
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
@ -26,52 +26,25 @@ describe('componentSplitview', () => {
|
||||
container.className = 'container';
|
||||
});
|
||||
|
||||
test('that the container is not removed when grid is disposed', () => {
|
||||
const root = document.createElement('div');
|
||||
const container = document.createElement('div');
|
||||
root.appendChild(container);
|
||||
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
splitview.dispose();
|
||||
|
||||
expect(container.parentElement).toBe(root);
|
||||
expect(container.children.length).toBe(0);
|
||||
});
|
||||
|
||||
test('event leakage', () => {
|
||||
Emitter.setLeakageMonitorEnabled(true);
|
||||
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(600, 400);
|
||||
|
||||
const panel1 = splitview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
});
|
||||
const panel2 = splitview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
});
|
||||
|
||||
splitview.movePanel(0, 1);
|
||||
@ -93,22 +66,18 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('remove panel', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(600, 400);
|
||||
|
||||
splitview.addPanel({ id: 'panel1', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel3', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel1', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel3', component: 'testPanel' });
|
||||
|
||||
const panel1 = splitview.getPanel('panel1')!;
|
||||
const panel2 = splitview.getPanel('panel2')!;
|
||||
@ -133,15 +102,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('horizontal dimensions', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(600, 400);
|
||||
@ -151,15 +116,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('vertical dimensions', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(600, 400);
|
||||
@ -169,22 +130,18 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('api resize', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
splitview.layout(400, 600);
|
||||
splitview.addPanel({ id: 'panel1', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel3', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel1', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel3', component: 'testPanel' });
|
||||
|
||||
const panel1 = splitview.getPanel('panel1')!;
|
||||
const panel2 = splitview.getPanel('panel2')!;
|
||||
@ -226,20 +183,16 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('api', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
splitview.layout(600, 400);
|
||||
splitview.addPanel({ id: 'panel1', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel1', component: 'testPanel' });
|
||||
|
||||
const panel1 = splitview.getPanel('panel1');
|
||||
|
||||
@ -250,7 +203,7 @@ describe('componentSplitview', () => {
|
||||
// expect(panel1?.api.isFocused).toBeFalsy();
|
||||
expect(panel1!.api.isVisible).toBeTruthy();
|
||||
|
||||
splitview.addPanel({ id: 'panel2', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'testPanel' });
|
||||
|
||||
const panel2 = splitview.getPanel('panel2');
|
||||
|
||||
@ -272,22 +225,18 @@ describe('componentSplitview', () => {
|
||||
test('vertical panels', () => {
|
||||
const disposables = new CompositeDisposable();
|
||||
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
splitview.layout(300, 200);
|
||||
|
||||
splitview.addPanel({ id: 'panel1', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel1', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'testPanel' });
|
||||
|
||||
const panel1 = splitview.getPanel('panel1') as SplitviewPanel;
|
||||
const panel2 = splitview.getPanel('panel2') as SplitviewPanel;
|
||||
@ -328,22 +277,18 @@ describe('componentSplitview', () => {
|
||||
test('horizontal panels', () => {
|
||||
const disposables = new CompositeDisposable();
|
||||
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
splitview.layout(300, 200);
|
||||
|
||||
splitview.addPanel({ id: 'panel1', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'default' });
|
||||
splitview.addPanel({ id: 'panel1', component: 'testPanel' });
|
||||
splitview.addPanel({ id: 'panel2', component: 'testPanel' });
|
||||
|
||||
const panel1 = splitview.getPanel('panel1') as SplitviewPanel;
|
||||
const panel2 = splitview.getPanel('panel2') as SplitviewPanel;
|
||||
@ -382,63 +327,51 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('serialization', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(400, 6);
|
||||
|
||||
expect(
|
||||
container.querySelectorAll('.dv-split-view-container').length
|
||||
).toBe(1);
|
||||
|
||||
splitview.fromJSON({
|
||||
views: [
|
||||
{
|
||||
size: 1,
|
||||
data: { id: 'panel1', component: 'default' },
|
||||
data: { id: 'panel1', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
{
|
||||
size: 2,
|
||||
data: { id: 'panel2', component: 'default' },
|
||||
data: { id: 'panel2', component: 'testPanel' },
|
||||
snap: true,
|
||||
},
|
||||
{ size: 3, data: { id: 'panel3', component: 'default' } },
|
||||
{ size: 3, data: { id: 'panel3', component: 'testPanel' } },
|
||||
],
|
||||
size: 6,
|
||||
orientation: Orientation.VERTICAL,
|
||||
activeView: 'panel1',
|
||||
});
|
||||
|
||||
expect(
|
||||
container.querySelectorAll('.dv-split-view-container').length
|
||||
).toBe(1);
|
||||
|
||||
expect(splitview.length).toBe(3);
|
||||
|
||||
expect(JSON.parse(JSON.stringify(splitview.toJSON()))).toEqual({
|
||||
views: [
|
||||
{
|
||||
size: 1,
|
||||
data: { id: 'panel1', component: 'default' },
|
||||
data: { id: 'panel1', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
{
|
||||
size: 2,
|
||||
data: { id: 'panel2', component: 'default' },
|
||||
data: { id: 'panel2', component: 'testPanel' },
|
||||
snap: true,
|
||||
},
|
||||
{
|
||||
size: 3,
|
||||
data: { id: 'panel3', component: 'default' },
|
||||
data: { id: 'panel3', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
],
|
||||
@ -449,15 +382,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('toJSON shouldnt fire any layout events', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -465,11 +394,11 @@ describe('componentSplitview', () => {
|
||||
|
||||
splitview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
});
|
||||
splitview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'default',
|
||||
component: 'testPanel',
|
||||
});
|
||||
|
||||
const disposable = splitview.onDidLayoutChange(() => {
|
||||
@ -482,16 +411,41 @@ describe('componentSplitview', () => {
|
||||
disposable.dispose();
|
||||
});
|
||||
|
||||
test('panel is disposed of when component is disposed', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
test('dispose of splitviewComponent', () => {
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
splitview.layout(1000, 1000);
|
||||
|
||||
splitview.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'testPanel',
|
||||
});
|
||||
splitview.addPanel({
|
||||
id: 'panel2',
|
||||
component: 'testPanel',
|
||||
});
|
||||
|
||||
expect(container.childNodes.length).toBeGreaterThan(0);
|
||||
|
||||
splitview.dispose();
|
||||
|
||||
expect(container.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test('panel is disposed of when component is disposed', () => {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
components: {
|
||||
default: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -519,15 +473,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when removed', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
default: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -555,15 +505,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('panel is disposed of when fromJSON is called', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
default: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -595,15 +541,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('that fromJSON layouts are resized to the current dimensions', async () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
splitview.layout(400, 600);
|
||||
@ -612,15 +554,15 @@ describe('componentSplitview', () => {
|
||||
views: [
|
||||
{
|
||||
size: 1,
|
||||
data: { id: 'panel1', component: 'default' },
|
||||
data: { id: 'panel1', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
{
|
||||
size: 2,
|
||||
data: { id: 'panel2', component: 'default' },
|
||||
data: { id: 'panel2', component: 'testPanel' },
|
||||
snap: true,
|
||||
},
|
||||
{ size: 3, data: { id: 'panel3', component: 'default' } },
|
||||
{ size: 3, data: { id: 'panel3', component: 'testPanel' } },
|
||||
],
|
||||
size: 6,
|
||||
orientation: Orientation.VERTICAL,
|
||||
@ -631,17 +573,17 @@ describe('componentSplitview', () => {
|
||||
views: [
|
||||
{
|
||||
size: 100,
|
||||
data: { id: 'panel1', component: 'default' },
|
||||
data: { id: 'panel1', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
{
|
||||
size: 200,
|
||||
data: { id: 'panel2', component: 'default' },
|
||||
data: { id: 'panel2', component: 'testPanel' },
|
||||
snap: true,
|
||||
},
|
||||
{
|
||||
size: 300,
|
||||
data: { id: 'panel3', component: 'default' },
|
||||
data: { id: 'panel3', component: 'testPanel' },
|
||||
snap: false,
|
||||
},
|
||||
],
|
||||
@ -652,15 +594,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('that disableAutoResizing is false by default', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -668,15 +606,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('that disableAutoResizing can be enabled', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.VERTICAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
testPanel: TestPanel,
|
||||
},
|
||||
disableAutoResizing: true,
|
||||
});
|
||||
@ -685,15 +619,11 @@ describe('componentSplitview', () => {
|
||||
});
|
||||
|
||||
test('that setVisible toggles visiblity', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
const splitview = new SplitviewComponent({
|
||||
parentElement: container,
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
components: {
|
||||
default: TestPanel,
|
||||
},
|
||||
});
|
||||
|
||||
@ -719,25 +649,4 @@ describe('componentSplitview', () => {
|
||||
expect(panel1.api.isVisible).toBeTruthy();
|
||||
expect(panel2.api.isVisible).toBeTruthy();
|
||||
});
|
||||
|
||||
test('update className', () => {
|
||||
const splitview = new SplitviewComponent(container, {
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
createComponent: (options) => {
|
||||
switch (options.name) {
|
||||
case 'default':
|
||||
return new TestPanel(options.id, options.name);
|
||||
default:
|
||||
throw new Error('unsupported');
|
||||
}
|
||||
},
|
||||
className: 'test-a test-b',
|
||||
});
|
||||
|
||||
expect(splitview.element.className).toBe('test-a test-b');
|
||||
|
||||
splitview.updateOptions({ className: 'test-b test-c' });
|
||||
|
||||
expect(splitview.element.className).toBe('test-b test-c');
|
||||
});
|
||||
});
|
||||
|
||||
@ -1,16 +1,10 @@
|
||||
import {
|
||||
DockviewMaximizedGroupChanged,
|
||||
FloatingGroupOptions,
|
||||
IDockviewComponent,
|
||||
MovePanelEvent,
|
||||
PopoutGroupChangePositionEvent,
|
||||
PopoutGroupChangeSizeEvent,
|
||||
SerializedDockview,
|
||||
} from '../dockview/dockviewComponent';
|
||||
import {
|
||||
AddGroupOptions,
|
||||
AddPanelOptions,
|
||||
DockviewComponentOptions,
|
||||
DockviewDndOverlayEvent,
|
||||
MovementOptions,
|
||||
} from '../dockview/options';
|
||||
@ -33,6 +27,7 @@ import {
|
||||
AddSplitviewComponentOptions,
|
||||
ISplitviewComponent,
|
||||
SerializedSplitview,
|
||||
SplitviewComponentUpdateOptions,
|
||||
} from '../splitview/splitviewComponent';
|
||||
import { IView, Orientation, Sizing } from '../splitview/splitview';
|
||||
import { ISplitviewPanel } from '../splitview/splitviewPanel';
|
||||
@ -40,9 +35,9 @@ import {
|
||||
DockviewGroupPanel,
|
||||
IDockviewGroupPanel,
|
||||
} from '../dockview/dockviewGroupPanel';
|
||||
import { Event } from '../events';
|
||||
import { Emitter, Event } from '../events';
|
||||
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { PaneviewDidDropEvent } from '../paneview/draggablePaneviewPanel';
|
||||
import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
|
||||
import {
|
||||
GroupDragEvent,
|
||||
TabDragEvent,
|
||||
@ -53,12 +48,6 @@ import {
|
||||
DockviewWillDropEvent,
|
||||
WillShowOverlayLocationEvent,
|
||||
} from '../dockview/dockviewGroupPanelModel';
|
||||
import {
|
||||
PaneviewComponentOptions,
|
||||
PaneviewDndOverlayEvent,
|
||||
} from '../paneview/options';
|
||||
import { SplitviewComponentOptions } from '../splitview/options';
|
||||
import { GridviewComponentOptions } from '../gridview/options';
|
||||
|
||||
export interface CommonApi<T = any> {
|
||||
readonly height: number;
|
||||
@ -70,7 +59,6 @@ export interface CommonApi<T = any> {
|
||||
fromJSON(data: T): void;
|
||||
toJSON(): T;
|
||||
clear(): void;
|
||||
dispose(): void;
|
||||
}
|
||||
|
||||
export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
@ -153,6 +141,13 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
|
||||
constructor(private readonly component: ISplitviewComponent) {}
|
||||
|
||||
/**
|
||||
* Update configuratable options.
|
||||
*/
|
||||
updateOptions(options: SplitviewComponentUpdateOptions): void {
|
||||
this.component.updateOptions(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes an existing panel and optionally provide a `Sizing` method
|
||||
* for the subsequent resize.
|
||||
@ -216,20 +211,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
clear(): void {
|
||||
this.component.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update configuratable options.
|
||||
*/
|
||||
updateOptions(options: Partial<SplitviewComponentOptions>): void {
|
||||
this.component.updateOptions(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Release resources and teardown component. Do not call when using framework versions of dockview.
|
||||
*/
|
||||
dispose(): void {
|
||||
this.component.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
@ -299,12 +280,19 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
/**
|
||||
* Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
|
||||
*/
|
||||
get onDidDrop(): Event<PaneviewDidDropEvent> {
|
||||
return this.component.onDidDrop;
|
||||
}
|
||||
get onDidDrop(): Event<PaneviewDropEvent> {
|
||||
const emitter = new Emitter<PaneviewDropEvent>();
|
||||
|
||||
get onUnhandledDragOverEvent(): Event<PaneviewDndOverlayEvent> {
|
||||
return this.component.onUnhandledDragOverEvent;
|
||||
const disposable = this.component.onDidDrop((e) => {
|
||||
emitter.fire({ ...e, api: this });
|
||||
});
|
||||
|
||||
emitter.dispose = () => {
|
||||
disposable.dispose();
|
||||
emitter.dispose();
|
||||
};
|
||||
|
||||
return emitter.event;
|
||||
}
|
||||
|
||||
constructor(private readonly component: IPaneviewComponent) {}
|
||||
@ -373,20 +361,6 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
clear(): void {
|
||||
this.component.clear();
|
||||
}
|
||||
|
||||
/**
|
||||
* Update configuratable options.
|
||||
*/
|
||||
updateOptions(options: Partial<PaneviewComponentOptions>): void {
|
||||
this.component.updateOptions(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Release resources and teardown component. Do not call when using framework versions of dockview.
|
||||
*/
|
||||
dispose(): void {
|
||||
this.component.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
|
||||
@ -554,17 +528,6 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
|
||||
clear(): void {
|
||||
this.component.clear();
|
||||
}
|
||||
|
||||
updateOptions(options: Partial<GridviewComponentOptions>) {
|
||||
this.component.updateOptions(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Release resources and teardown component. Do not call when using framework versions of dockview.
|
||||
*/
|
||||
dispose(): void {
|
||||
this.component.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
@ -673,10 +636,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.onDidRemovePanel;
|
||||
}
|
||||
|
||||
get onDidMovePanel(): Event<MovePanelEvent> {
|
||||
return this.component.onDidMovePanel;
|
||||
}
|
||||
|
||||
/**
|
||||
* Invoked after a layout is deserialzied using the `fromJSON` method.
|
||||
*/
|
||||
@ -741,14 +700,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.onUnhandledDragOverEvent;
|
||||
}
|
||||
|
||||
get onDidPopoutGroupSizeChange(): Event<PopoutGroupChangeSizeEvent> {
|
||||
return this.component.onDidPopoutGroupSizeChange;
|
||||
}
|
||||
|
||||
get onDidPopoutGroupPositionChange(): Event<PopoutGroupChangePositionEvent> {
|
||||
return this.component.onDidPopoutGroupPositionChange;
|
||||
}
|
||||
|
||||
/**
|
||||
* All panel objects.
|
||||
*/
|
||||
@ -849,9 +800,9 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
*/
|
||||
addFloatingGroup(
|
||||
item: IDockviewPanel | DockviewGroupPanel,
|
||||
options?: FloatingGroupOptions
|
||||
coord?: { x: number; y: number }
|
||||
): void {
|
||||
return this.component.addFloatingGroup(item, options);
|
||||
return this.component.addFloatingGroup(item, coord);
|
||||
}
|
||||
|
||||
/**
|
||||
@ -901,7 +852,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
this.component.exitMaximizedGroup();
|
||||
}
|
||||
|
||||
get onDidMaximizedGroupChange(): Event<DockviewMaximizedGroupChanged> {
|
||||
get onDidMaximizedGroupChange(): Event<void> {
|
||||
return this.component.onDidMaximizedGroupChange;
|
||||
}
|
||||
|
||||
@ -916,18 +867,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
onDidOpen?: (event: { id: string; window: Window }) => void;
|
||||
onWillClose?: (event: { id: string; window: Window }) => void;
|
||||
}
|
||||
): Promise<boolean> {
|
||||
): Promise<void> {
|
||||
return this.component.addPopoutGroup(item, options);
|
||||
}
|
||||
|
||||
updateOptions(options: Partial<DockviewComponentOptions>) {
|
||||
this.component.updateOptions(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* Release resources and teardown component. Do not call when using framework versions of dockview.
|
||||
*/
|
||||
dispose(): void {
|
||||
this.component.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,17 +6,9 @@ import {
|
||||
DockviewGroupLocation,
|
||||
} from '../dockview/dockviewGroupPanelModel';
|
||||
import { Emitter, Event } from '../events';
|
||||
import { MutableDisposable } from '../lifecycle';
|
||||
import { GridviewPanelApi, GridviewPanelApiImpl } from './gridviewPanelApi';
|
||||
|
||||
export interface DockviewGroupMoveParams {
|
||||
group?: DockviewGroupPanel;
|
||||
position?: Position;
|
||||
/**
|
||||
* The index to place the panel within a group, only applicable if the placement is within an existing group
|
||||
*/
|
||||
index?: number;
|
||||
}
|
||||
|
||||
export interface DockviewGroupPanelApi extends GridviewPanelApi {
|
||||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent>;
|
||||
readonly onDidActivePanelChange: Event<DockviewGroupChangeEvent>;
|
||||
@ -25,7 +17,7 @@ export interface DockviewGroupPanelApi extends GridviewPanelApi {
|
||||
* If you require the Window object
|
||||
*/
|
||||
getWindow(): Window;
|
||||
moveTo(options: DockviewGroupMoveParams): void;
|
||||
moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void;
|
||||
maximize(): void;
|
||||
isMaximized(): boolean;
|
||||
exitMaximized(): void;
|
||||
@ -36,10 +28,12 @@ export interface DockviewGroupPanelFloatingChangeEvent {
|
||||
readonly location: DockviewGroupLocation;
|
||||
}
|
||||
|
||||
const NOT_INITIALIZED_MESSAGE =
|
||||
'dockview: DockviewGroupPanelApiImpl not initialized';
|
||||
// TODO find a better way to initialize and avoid needing null checks
|
||||
const NOT_INITIALIZED_MESSAGE = 'DockviewGroupPanelApiImpl not initialized';
|
||||
|
||||
export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
private readonly _mutableDisposable = new MutableDisposable();
|
||||
|
||||
private _group: DockviewGroupPanel | undefined;
|
||||
|
||||
readonly _onDidLocationChange =
|
||||
@ -47,7 +41,8 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
readonly onDidLocationChange: Event<DockviewGroupPanelFloatingChangeEvent> =
|
||||
this._onDidLocationChange.event;
|
||||
|
||||
readonly _onDidActivePanelChange = new Emitter<DockviewGroupChangeEvent>();
|
||||
private readonly _onDidActivePanelChange =
|
||||
new Emitter<DockviewGroupChangeEvent>();
|
||||
readonly onDidActivePanelChange = this._onDidActivePanelChange.event;
|
||||
|
||||
get location(): DockviewGroupLocation {
|
||||
@ -62,7 +57,8 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
|
||||
this.addDisposables(
|
||||
this._onDidLocationChange,
|
||||
this._onDidActivePanelChange
|
||||
this._onDidActivePanelChange,
|
||||
this._mutableDisposable
|
||||
);
|
||||
}
|
||||
|
||||
@ -79,7 +75,7 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
: window;
|
||||
}
|
||||
|
||||
moveTo(options: DockviewGroupMoveParams): void {
|
||||
moveTo(options: { group?: DockviewGroupPanel; position?: Position }): void {
|
||||
if (!this._group) {
|
||||
throw new Error(NOT_INITIALIZED_MESSAGE);
|
||||
}
|
||||
@ -98,7 +94,6 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
position: options.group
|
||||
? options.position ?? 'center'
|
||||
: 'center',
|
||||
index: options.index,
|
||||
},
|
||||
});
|
||||
}
|
||||
@ -136,5 +131,19 @@ export class DockviewGroupPanelApiImpl extends GridviewPanelApiImpl {
|
||||
|
||||
initialize(group: DockviewGroupPanel): void {
|
||||
this._group = group;
|
||||
|
||||
/**
|
||||
* TODO: Annoying initialization order caveat
|
||||
*
|
||||
* Due to the order on initialization we know that the model isn't defined until later in the same stack-frame of setup.
|
||||
* By queuing a microtask we can ensure the setup is completed within the same stack-frame, but after everything else has
|
||||
* finished ensuring the `model` is defined.
|
||||
*/
|
||||
queueMicrotask(() => {
|
||||
this._mutableDisposable.value =
|
||||
this._group!.model.onDidActivePanelChange((event) => {
|
||||
this._onDidActivePanelChange.fire(event);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,11 +4,9 @@ import { DockviewGroupPanel } from '../dockview/dockviewGroupPanel';
|
||||
import { CompositeDisposable, MutableDisposable } from '../lifecycle';
|
||||
import { DockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { DockviewComponent } from '../dockview/dockviewComponent';
|
||||
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
|
||||
import {
|
||||
DockviewGroupMoveParams,
|
||||
DockviewGroupPanelFloatingChangeEvent,
|
||||
} from './dockviewGroupPanelApi';
|
||||
import { Position } from '../dnd/droptarget';
|
||||
import { DockviewPanelRenderer } from '../overlayRenderContainer';
|
||||
import { DockviewGroupPanelFloatingChangeEvent } from './dockviewGroupPanelApi';
|
||||
import { DockviewGroupLocation } from '../dockview/dockviewGroupPanelModel';
|
||||
|
||||
export interface TitleEvent {
|
||||
@ -27,8 +25,6 @@ export interface GroupChangedEvent {
|
||||
// empty
|
||||
}
|
||||
|
||||
export type DockviewPanelMoveParams = DockviewGroupMoveParams;
|
||||
|
||||
export interface DockviewPanelApi
|
||||
extends Omit<
|
||||
GridviewPanelApi,
|
||||
@ -54,7 +50,11 @@ export interface DockviewPanelApi
|
||||
close(): void;
|
||||
setTitle(title: string): void;
|
||||
setRenderer(renderer: DockviewPanelRenderer): void;
|
||||
moveTo(options: DockviewPanelMoveParams): void;
|
||||
moveTo(options: {
|
||||
group: DockviewGroupPanel;
|
||||
position?: Position;
|
||||
index?: number;
|
||||
}): void;
|
||||
maximize(): void;
|
||||
isMaximized(): boolean;
|
||||
exitMaximized(): void;
|
||||
@ -69,7 +69,7 @@ export class DockviewPanelApiImpl
|
||||
implements DockviewPanelApi
|
||||
{
|
||||
private _group: DockviewGroupPanel;
|
||||
private readonly _tabComponent: string | undefined;
|
||||
private _tabComponent: string | undefined;
|
||||
|
||||
readonly _onDidTitleChange = new Emitter<TitleEvent>();
|
||||
readonly onDidTitleChange = this._onDidTitleChange.event;
|
||||
@ -131,7 +131,7 @@ export class DockviewPanelApiImpl
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly panel: DockviewPanel,
|
||||
private panel: DockviewPanel,
|
||||
group: DockviewGroupPanel,
|
||||
private readonly accessor: DockviewComponent,
|
||||
component: string,
|
||||
@ -160,14 +160,16 @@ export class DockviewPanelApiImpl
|
||||
return this.group.api.getWindow();
|
||||
}
|
||||
|
||||
moveTo(options: DockviewPanelMoveParams): void {
|
||||
moveTo(options: {
|
||||
group: DockviewGroupPanel;
|
||||
position?: Position;
|
||||
index?: number;
|
||||
}): void {
|
||||
this.accessor.moveGroupOrPanel({
|
||||
from: { groupId: this._group.id, panelId: this.panel.id },
|
||||
to: {
|
||||
group: options.group ?? this._group,
|
||||
position: options.group
|
||||
? options.position ?? 'center'
|
||||
: 'center',
|
||||
group: options.group,
|
||||
position: options.position ?? 'center',
|
||||
index: options.index,
|
||||
},
|
||||
});
|
||||
@ -202,14 +204,13 @@ export class DockviewPanelApiImpl
|
||||
|
||||
this.groupEventsDisposable.value = new CompositeDisposable(
|
||||
this.group.api.onDidVisibilityChange((event) => {
|
||||
const hasBecomeHidden = !event.isVisible && this.isVisible;
|
||||
const hasBecomeVisible = event.isVisible && !this.isVisible;
|
||||
|
||||
const isActivePanel = this.group.model.isPanelActive(
|
||||
this.panel
|
||||
);
|
||||
|
||||
if (hasBecomeHidden || (hasBecomeVisible && isActivePanel)) {
|
||||
if (!event.isVisible && this.isVisible) {
|
||||
this._onDidVisibilityChange.fire(event);
|
||||
} else if (
|
||||
event.isVisible &&
|
||||
!this.isVisible &&
|
||||
this.group.model.isPanelActive(this.panel)
|
||||
) {
|
||||
this._onDidVisibilityChange.fire(event);
|
||||
}
|
||||
}),
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
import {
|
||||
DockviewApi,
|
||||
GridviewApi,
|
||||
PaneviewApi,
|
||||
SplitviewApi,
|
||||
} from '../api/component.api';
|
||||
import { DockviewComponent } from '../dockview/dockviewComponent';
|
||||
import { DockviewComponentOptions } from '../dockview/options';
|
||||
import { GridviewComponent } from '../gridview/gridviewComponent';
|
||||
import { GridviewComponentOptions } from '../gridview/options';
|
||||
import { PaneviewComponentOptions } from '../paneview/options';
|
||||
import { PaneviewComponent } from '../paneview/paneviewComponent';
|
||||
import { SplitviewComponentOptions } from '../splitview/options';
|
||||
import { SplitviewComponent } from '../splitview/splitviewComponent';
|
||||
|
||||
export function createDockview(
|
||||
element: HTMLElement,
|
||||
options: DockviewComponentOptions
|
||||
): DockviewApi {
|
||||
const component = new DockviewComponent(element, options);
|
||||
return component.api;
|
||||
}
|
||||
|
||||
export function createSplitview(
|
||||
element: HTMLElement,
|
||||
options: SplitviewComponentOptions
|
||||
): SplitviewApi {
|
||||
const component = new SplitviewComponent(element, options);
|
||||
return new SplitviewApi(component);
|
||||
}
|
||||
|
||||
export function createGridview(
|
||||
element: HTMLElement,
|
||||
options: GridviewComponentOptions
|
||||
): GridviewApi {
|
||||
const component = new GridviewComponent(element, options);
|
||||
return new GridviewApi(component);
|
||||
}
|
||||
|
||||
export function createPaneview(
|
||||
element: HTMLElement,
|
||||
options: PaneviewComponentOptions
|
||||
): PaneviewApi {
|
||||
const component = new PaneviewComponent(element, options);
|
||||
return new PaneviewApi(component);
|
||||
}
|
||||
@ -1,3 +1,3 @@
|
||||
export const DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE = 100;
|
||||
|
||||
export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100, width: 300, height: 300 };
|
||||
export const DEFAULT_FLOATING_GROUP_POSITION = { left: 100, top: 100 };
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { disableIframePointEvents } from '../dom';
|
||||
import { getElementsByTagName } from '../dom';
|
||||
import { addDisposableListener, Emitter } from '../events';
|
||||
import {
|
||||
CompositeDisposable,
|
||||
@ -40,14 +40,23 @@ export abstract class DragHandler extends CompositeDisposable {
|
||||
return;
|
||||
}
|
||||
|
||||
const iframes = disableIframePointEvents();
|
||||
const iframes = [
|
||||
...getElementsByTagName('iframe'),
|
||||
...getElementsByTagName('webview'),
|
||||
];
|
||||
|
||||
this.pointerEventsDisposable.value = {
|
||||
dispose: () => {
|
||||
iframes.release();
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'auto';
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
this.el.classList.add('dv-dragged');
|
||||
setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
|
||||
|
||||
@ -67,17 +76,18 @@ export abstract class DragHandler extends CompositeDisposable {
|
||||
* For example: in react-dnd if dataTransfer.types is not set then the dragStart event will be cancelled
|
||||
* through .preventDefault(). Since this is applied globally to all drag events this would break dockviews
|
||||
* dnd logic. You can see the code at
|
||||
P * https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
|
||||
* https://github.com/react-dnd/react-dnd/blob/main/packages/backend-html5/src/HTML5BackendImpl.ts#L542
|
||||
*/
|
||||
event.dataTransfer.setData('text/plain', '');
|
||||
event.dataTransfer.setData(
|
||||
'text/plain',
|
||||
'__dockview_internal_drag_event__'
|
||||
);
|
||||
}
|
||||
}
|
||||
}),
|
||||
addDisposableListener(this.el, 'dragend', () => {
|
||||
this.pointerEventsDisposable.dispose();
|
||||
setTimeout(() => {
|
||||
this.dataDisposable.dispose(); // allow the data to be read by other handlers before disposing
|
||||
}, 0);
|
||||
this.dataDisposable.dispose();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,4 @@
|
||||
class TransferObject {
|
||||
// intentionally empty class
|
||||
}
|
||||
class TransferObject {}
|
||||
|
||||
export class PanelTransfer extends TransferObject {
|
||||
constructor(
|
||||
|
||||
@ -13,8 +13,8 @@ export class DragAndDropObserver extends CompositeDisposable {
|
||||
private target: EventTarget | null = null;
|
||||
|
||||
constructor(
|
||||
private readonly element: HTMLElement,
|
||||
private readonly callbacks: IDragAndDropObserverCallbacks
|
||||
private element: HTMLElement,
|
||||
private callbacks: IDragAndDropObserverCallbacks
|
||||
) {
|
||||
super();
|
||||
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
.dv-drop-target-container {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
--dv-transition-duration: 300ms;
|
||||
|
||||
.dv-drop-target-anchor {
|
||||
position: relative;
|
||||
border: var(--dv-drag-over-border);
|
||||
transition: opacity var(--dv-transition-duration) ease-in,
|
||||
top var(--dv-transition-duration) ease-out,
|
||||
left var(--dv-transition-duration) ease-out,
|
||||
width var(--dv-transition-duration) ease-out,
|
||||
height var(--dv-transition-duration) ease-out;
|
||||
background-color: var(--dv-drag-over-background-color);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
import { CompositeDisposable, Disposable } from '../lifecycle';
|
||||
import { DropTargetTargetModel } from './droptarget';
|
||||
|
||||
export class DropTargetAnchorContainer extends CompositeDisposable {
|
||||
private _model:
|
||||
| { root: HTMLElement; overlay: HTMLElement; changed: boolean }
|
||||
| undefined;
|
||||
|
||||
private _outline: HTMLElement | undefined;
|
||||
|
||||
private _disabled = false;
|
||||
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(value: boolean) {
|
||||
if (this.disabled === value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._disabled = value;
|
||||
|
||||
if (value) {
|
||||
this.model?.clear();
|
||||
}
|
||||
}
|
||||
|
||||
get model(): DropTargetTargetModel | undefined {
|
||||
if (this.disabled) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
clear: () => {
|
||||
if (this._model) {
|
||||
this._model.root.parentElement?.removeChild(
|
||||
this._model.root
|
||||
);
|
||||
}
|
||||
this._model = undefined;
|
||||
},
|
||||
exists: () => {
|
||||
return !!this._model;
|
||||
},
|
||||
getElements: (event?: DragEvent, outline?: HTMLElement) => {
|
||||
const changed = this._outline !== outline;
|
||||
this._outline = outline;
|
||||
|
||||
if (this._model) {
|
||||
this._model.changed = changed;
|
||||
return this._model;
|
||||
}
|
||||
|
||||
const container = this.createContainer();
|
||||
const anchor = this.createAnchor();
|
||||
|
||||
this._model = { root: container, overlay: anchor, changed };
|
||||
|
||||
container.appendChild(anchor);
|
||||
this.element.appendChild(container);
|
||||
|
||||
if (event?.target instanceof HTMLElement) {
|
||||
const targetBox = event.target.getBoundingClientRect();
|
||||
const box = this.element.getBoundingClientRect();
|
||||
|
||||
anchor.style.left = `${targetBox.left - box.left}px`;
|
||||
anchor.style.top = `${targetBox.top - box.top}px`;
|
||||
}
|
||||
|
||||
return this._model;
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
constructor(readonly element: HTMLElement, options: { disabled: boolean }) {
|
||||
super();
|
||||
|
||||
this._disabled = options.disabled;
|
||||
|
||||
this.addDisposables(
|
||||
Disposable.from(() => {
|
||||
this.model?.clear();
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private createContainer(): HTMLElement {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'dv-drop-target-container';
|
||||
|
||||
return el;
|
||||
}
|
||||
|
||||
private createAnchor(): HTMLElement {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'dv-drop-target-anchor';
|
||||
el.style.visibility = 'hidden';
|
||||
|
||||
return el;
|
||||
}
|
||||
}
|
||||
@ -1,8 +1,7 @@
|
||||
.dv-drop-target {
|
||||
.drop-target {
|
||||
position: relative;
|
||||
--dv-transition-duration: 70ms;
|
||||
|
||||
> .dv-drop-target-dropzone {
|
||||
> .drop-target-dropzone {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
@ -11,18 +10,15 @@
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
|
||||
> .dv-drop-target-selection {
|
||||
> .drop-target-selection {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: var(--dv-drag-over-border);
|
||||
background-color: var(--dv-drag-over-background-color);
|
||||
transition: top var(--dv-transition-duration) ease-out,
|
||||
left var(--dv-transition-duration) ease-out,
|
||||
width var(--dv-transition-duration) ease-out,
|
||||
height var(--dv-transition-duration) ease-out,
|
||||
opacity var(--dv-transition-duration) ease-out;
|
||||
transition: top 70ms ease-out, left 70ms ease-out,
|
||||
width 70ms ease-out, height 70ms ease-out,
|
||||
opacity 0.15s ease-out;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
@ -93,26 +93,10 @@ const DEFAULT_SIZE: MeasuredValue = {
|
||||
const SMALL_WIDTH_BOUNDARY = 100;
|
||||
const SMALL_HEIGHT_BOUNDARY = 100;
|
||||
|
||||
export interface DropTargetTargetModel {
|
||||
getElements(
|
||||
event?: DragEvent,
|
||||
outline?: HTMLElement
|
||||
): {
|
||||
root: HTMLElement;
|
||||
overlay: HTMLElement;
|
||||
changed: boolean;
|
||||
};
|
||||
exists(): boolean;
|
||||
clear(): void;
|
||||
}
|
||||
|
||||
export interface DroptargetOptions {
|
||||
canDisplayOverlay: CanDisplayOverlay;
|
||||
acceptedTargetZones: Position[];
|
||||
overlayModel?: DroptargetOverlayModel;
|
||||
getOverrideTarget?: () => DropTargetTargetModel | undefined;
|
||||
className?: string;
|
||||
getOverlayOutline?: () => HTMLElement | null;
|
||||
}
|
||||
|
||||
export class Droptarget extends CompositeDisposable {
|
||||
@ -132,18 +116,6 @@ export class Droptarget extends CompositeDisposable {
|
||||
|
||||
private static USED_EVENT_ID = '__dockview_droptarget_event_is_used__';
|
||||
|
||||
private static ACTUAL_TARGET: Droptarget | undefined;
|
||||
|
||||
private _disabled: boolean;
|
||||
|
||||
get disabled(): boolean {
|
||||
return this._disabled;
|
||||
}
|
||||
|
||||
set disabled(value: boolean) {
|
||||
this._disabled = value;
|
||||
}
|
||||
|
||||
get state(): Position | undefined {
|
||||
return this._state;
|
||||
}
|
||||
@ -154,35 +126,21 @@ export class Droptarget extends CompositeDisposable {
|
||||
) {
|
||||
super();
|
||||
|
||||
this._disabled = false;
|
||||
|
||||
// use a set to take advantage of #<set>.has
|
||||
this._acceptedTargetZonesSet = new Set(
|
||||
this.options.acceptedTargetZones
|
||||
);
|
||||
|
||||
this.dnd = new DragAndDropObserver(this.element, {
|
||||
onDragEnter: () => {
|
||||
this.options.getOverrideTarget?.()?.getElements();
|
||||
},
|
||||
onDragEnter: () => undefined,
|
||||
onDragOver: (e) => {
|
||||
Droptarget.ACTUAL_TARGET = this;
|
||||
|
||||
const overrideTraget = this.options.getOverrideTarget?.();
|
||||
|
||||
if (this._acceptedTargetZonesSet.size === 0) {
|
||||
if (overrideTraget) {
|
||||
return;
|
||||
}
|
||||
this.removeDropTarget();
|
||||
return;
|
||||
}
|
||||
|
||||
const target =
|
||||
this.options.getOverlayOutline?.() ?? this.element;
|
||||
|
||||
const width = target.offsetWidth;
|
||||
const height = target.offsetHeight;
|
||||
const width = this.element.clientWidth;
|
||||
const height = this.element.clientHeight;
|
||||
|
||||
if (width === 0 || height === 0) {
|
||||
return; // avoid div!0
|
||||
@ -191,8 +149,8 @@ export class Droptarget extends CompositeDisposable {
|
||||
const rect = (
|
||||
e.currentTarget as HTMLElement
|
||||
).getBoundingClientRect();
|
||||
const x = (e.clientX ?? 0) - rect.left;
|
||||
const y = (e.clientY ?? 0) - rect.top;
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
const quadrant = this.calculateQuadrant(
|
||||
this._acceptedTargetZonesSet,
|
||||
@ -214,9 +172,6 @@ export class Droptarget extends CompositeDisposable {
|
||||
}
|
||||
|
||||
if (!this.options.canDisplayOverlay(e, quadrant)) {
|
||||
if (overrideTraget) {
|
||||
return;
|
||||
}
|
||||
this.removeDropTarget();
|
||||
return;
|
||||
}
|
||||
@ -239,26 +194,16 @@ export class Droptarget extends CompositeDisposable {
|
||||
|
||||
this.markAsUsed(e);
|
||||
|
||||
if (overrideTraget) {
|
||||
//
|
||||
} else if (!this.targetElement) {
|
||||
if (!this.targetElement) {
|
||||
this.targetElement = document.createElement('div');
|
||||
this.targetElement.className = 'dv-drop-target-dropzone';
|
||||
this.targetElement.className = 'drop-target-dropzone';
|
||||
this.overlayElement = document.createElement('div');
|
||||
this.overlayElement.className = 'dv-drop-target-selection';
|
||||
this.overlayElement.className = 'drop-target-selection';
|
||||
this._state = 'center';
|
||||
this.targetElement.appendChild(this.overlayElement);
|
||||
|
||||
target.classList.add('dv-drop-target');
|
||||
target.append(this.targetElement);
|
||||
|
||||
// this.overlayElement.style.opacity = '0';
|
||||
|
||||
// requestAnimationFrame(() => {
|
||||
// if (this.overlayElement) {
|
||||
// this.overlayElement.style.opacity = '';
|
||||
// }
|
||||
// });
|
||||
this.element.classList.add('drop-target');
|
||||
this.element.append(this.targetElement);
|
||||
}
|
||||
|
||||
this.toggleClasses(quadrant, width, height);
|
||||
@ -266,32 +211,10 @@ export class Droptarget extends CompositeDisposable {
|
||||
this._state = quadrant;
|
||||
},
|
||||
onDragLeave: () => {
|
||||
const target = this.options.getOverrideTarget?.();
|
||||
|
||||
if (target) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.removeDropTarget();
|
||||
},
|
||||
onDragEnd: (e) => {
|
||||
const target = this.options.getOverrideTarget?.();
|
||||
|
||||
if (target && Droptarget.ACTUAL_TARGET === this) {
|
||||
if (this._state) {
|
||||
// only stop the propagation of the event if we are dealing with it
|
||||
// which is only when the target has state
|
||||
e.stopPropagation();
|
||||
this._onDrop.fire({
|
||||
position: this._state,
|
||||
nativeEvent: e,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnd: () => {
|
||||
this.removeDropTarget();
|
||||
|
||||
target?.clear();
|
||||
},
|
||||
onDrop: (e) => {
|
||||
e.preventDefault();
|
||||
@ -300,8 +223,6 @@ export class Droptarget extends CompositeDisposable {
|
||||
|
||||
this.removeDropTarget();
|
||||
|
||||
this.options.getOverrideTarget?.()?.clear();
|
||||
|
||||
if (state) {
|
||||
// only stop the propagation of the event if we are dealing with it
|
||||
// which is only when the target has state
|
||||
@ -347,9 +268,7 @@ export class Droptarget extends CompositeDisposable {
|
||||
width: number,
|
||||
height: number
|
||||
): void {
|
||||
const target = this.options.getOverrideTarget?.();
|
||||
|
||||
if (!target && !this.overlayElement) {
|
||||
if (!this.overlayElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
@ -381,103 +300,6 @@ export class Droptarget extends CompositeDisposable {
|
||||
}
|
||||
}
|
||||
|
||||
if (target) {
|
||||
const outlineEl =
|
||||
this.options.getOverlayOutline?.() ?? this.element;
|
||||
const elBox = outlineEl.getBoundingClientRect();
|
||||
|
||||
const ta = target.getElements(undefined, outlineEl);
|
||||
const el = ta.root;
|
||||
const overlay = ta.overlay;
|
||||
|
||||
const bigbox = el.getBoundingClientRect();
|
||||
|
||||
const rootTop = elBox.top - bigbox.top;
|
||||
const rootLeft = elBox.left - bigbox.left;
|
||||
|
||||
const box = {
|
||||
top: rootTop,
|
||||
left: rootLeft,
|
||||
width: width,
|
||||
height: height,
|
||||
};
|
||||
|
||||
if (rightClass) {
|
||||
box.left = rootLeft + width * (1 - size);
|
||||
box.width = width * size;
|
||||
} else if (leftClass) {
|
||||
box.width = width * size;
|
||||
} else if (topClass) {
|
||||
box.height = height * size;
|
||||
} else if (bottomClass) {
|
||||
box.top = rootTop + height * (1 - size);
|
||||
box.height = height * size;
|
||||
}
|
||||
|
||||
if (isSmallX && isLeft) {
|
||||
box.width = 4;
|
||||
}
|
||||
if (isSmallX && isRight) {
|
||||
box.left = rootLeft + width - 4;
|
||||
box.width = 4;
|
||||
}
|
||||
|
||||
const topPx = `${Math.round(box.top)}px`;
|
||||
const leftPx = `${Math.round(box.left)}px`;
|
||||
const widthPx = `${Math.round(box.width)}px`;
|
||||
const heightPx = `${Math.round(box.height)}px`;
|
||||
|
||||
if (
|
||||
overlay.style.top === topPx &&
|
||||
overlay.style.left === leftPx &&
|
||||
overlay.style.width === widthPx &&
|
||||
overlay.style.height === heightPx
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
overlay.style.top = topPx;
|
||||
overlay.style.left = leftPx;
|
||||
overlay.style.width = widthPx;
|
||||
overlay.style.height = heightPx;
|
||||
overlay.style.visibility = 'visible';
|
||||
|
||||
overlay.className = `dv-drop-target-anchor${
|
||||
this.options.className ? ` ${this.options.className}` : ''
|
||||
}`;
|
||||
|
||||
toggleClass(overlay, 'dv-drop-target-left', isLeft);
|
||||
toggleClass(overlay, 'dv-drop-target-right', isRight);
|
||||
toggleClass(overlay, 'dv-drop-target-top', isTop);
|
||||
toggleClass(overlay, 'dv-drop-target-bottom', isBottom);
|
||||
toggleClass(
|
||||
overlay,
|
||||
'dv-drop-target-center',
|
||||
quadrant === 'center'
|
||||
);
|
||||
|
||||
if (ta.changed) {
|
||||
toggleClass(
|
||||
overlay,
|
||||
'dv-drop-target-anchor-container-changed',
|
||||
true
|
||||
);
|
||||
setTimeout(() => {
|
||||
toggleClass(
|
||||
overlay,
|
||||
'dv-drop-target-anchor-container-changed',
|
||||
false
|
||||
);
|
||||
}, 10);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.overlayElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
const box = { top: '0px', left: '0px', width: '100%', height: '100%' };
|
||||
|
||||
/**
|
||||
@ -574,12 +396,10 @@ export class Droptarget extends CompositeDisposable {
|
||||
private removeDropTarget(): void {
|
||||
if (this.targetElement) {
|
||||
this._state = undefined;
|
||||
this.targetElement.parentElement?.classList.remove(
|
||||
'dv-drop-target'
|
||||
);
|
||||
this.targetElement.remove();
|
||||
this.element.removeChild(this.targetElement);
|
||||
this.targetElement = undefined;
|
||||
this.overlayElement = undefined;
|
||||
this.element.classList.remove('drop-target');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,17 +2,13 @@ import { addClasses, removeClasses } from '../dom';
|
||||
|
||||
export function addGhostImage(
|
||||
dataTransfer: DataTransfer,
|
||||
ghostElement: HTMLElement,
|
||||
options?: { x?: number; y?: number }
|
||||
ghostElement: HTMLElement
|
||||
): void {
|
||||
// class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
|
||||
addClasses(ghostElement, 'dv-dragged');
|
||||
|
||||
// move the element off-screen initially otherwise it may in some cases be rendered at (0,0) momentarily
|
||||
ghostElement.style.top = '-9999px';
|
||||
|
||||
document.body.appendChild(ghostElement);
|
||||
dataTransfer.setDragImage(ghostElement, options?.x ?? 0, options?.y ?? 0);
|
||||
dataTransfer.setDragImage(ghostElement, 0, 0);
|
||||
|
||||
setTimeout(() => {
|
||||
removeClasses(ghostElement, 'dv-dragged');
|
||||
|
||||
@ -21,7 +21,7 @@ export class GroupDragHandler extends DragHandler {
|
||||
this.addDisposables(
|
||||
addDisposableListener(
|
||||
element,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
(e) => {
|
||||
if (e.shiftKey) {
|
||||
/**
|
||||
@ -72,11 +72,9 @@ export class GroupDragHandler extends DragHandler {
|
||||
ghostElement.style.lineHeight = '20px';
|
||||
ghostElement.style.borderRadius = '12px';
|
||||
ghostElement.style.position = 'absolute';
|
||||
ghostElement.style.pointerEvents = 'none';
|
||||
ghostElement.style.top = '-9999px';
|
||||
ghostElement.textContent = `Multiple Panels (${this.group.size})`;
|
||||
|
||||
addGhostImage(dataTransfer, ghostElement, { y: -10, x: 30 });
|
||||
addGhostImage(dataTransfer, ghostElement);
|
||||
}
|
||||
|
||||
return {
|
||||
|
||||
@ -26,18 +26,16 @@
|
||||
}
|
||||
|
||||
.dv-resize-container {
|
||||
--dv-overlay-z-index: var(--dv-overlay-z-index, 999);
|
||||
|
||||
position: absolute;
|
||||
z-index: calc(var(--dv-overlay-z-index) - 2);
|
||||
z-index: 997;
|
||||
|
||||
&.dv-bring-to-front {
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
border: 1px solid var(--dv-tab-divider-color);
|
||||
box-shadow: var(--dv-floating-box-shadow);
|
||||
|
||||
&.dv-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.dv-resize-container-dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -47,7 +45,7 @@
|
||||
width: calc(100% - 8px);
|
||||
left: 4px;
|
||||
top: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
@ -57,7 +55,7 @@
|
||||
width: calc(100% - 8px);
|
||||
left: 4px;
|
||||
bottom: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: ns-resize;
|
||||
}
|
||||
@ -67,7 +65,7 @@
|
||||
width: 4px;
|
||||
left: -2px;
|
||||
top: 4px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@ -77,7 +75,7 @@
|
||||
width: 4px;
|
||||
right: -2px;
|
||||
top: 4px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@ -87,7 +85,7 @@
|
||||
width: 4px;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: nw-resize;
|
||||
}
|
||||
@ -97,7 +95,7 @@
|
||||
width: 4px;
|
||||
right: -2px;
|
||||
top: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: ne-resize;
|
||||
}
|
||||
@ -107,7 +105,7 @@
|
||||
width: 4px;
|
||||
left: -2px;
|
||||
bottom: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: sw-resize;
|
||||
}
|
||||
@ -117,7 +115,7 @@
|
||||
width: 4px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
z-index: var(--dv-overlay-z-index);
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
cursor: se-resize;
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import {
|
||||
disableIframePointEvents,
|
||||
getElementsByTagName,
|
||||
quasiDefaultPrevented,
|
||||
toggleClass,
|
||||
} from '../dom';
|
||||
@ -7,44 +7,29 @@ import {
|
||||
Emitter,
|
||||
Event,
|
||||
addDisposableListener,
|
||||
addDisposableWindowListener,
|
||||
} from '../events';
|
||||
import { CompositeDisposable, MutableDisposable } from '../lifecycle';
|
||||
import { clamp } from '../math';
|
||||
import { AnchoredBox } from '../types';
|
||||
import { Box } from '../types';
|
||||
|
||||
class AriaLevelTracker {
|
||||
private _orderedList: HTMLElement[] = [];
|
||||
const bringElementToFront = (() => {
|
||||
let previous: HTMLElement | null = null;
|
||||
|
||||
push(element: HTMLElement): void {
|
||||
this._orderedList = [
|
||||
...this._orderedList.filter((item) => item !== element),
|
||||
element,
|
||||
];
|
||||
|
||||
this.update();
|
||||
}
|
||||
|
||||
destroy(element: HTMLElement): void {
|
||||
this._orderedList = this._orderedList.filter(
|
||||
(item) => item !== element
|
||||
);
|
||||
this.update();
|
||||
}
|
||||
|
||||
private update(): void {
|
||||
for (let i = 0; i < this._orderedList.length; i++) {
|
||||
this._orderedList[i].setAttribute('aria-level', `${i}`);
|
||||
this._orderedList[
|
||||
i
|
||||
].style.zIndex = `calc(var(--dv-overlay-z-index, 999) + ${i * 2})`;
|
||||
function pushToTop(element: HTMLElement) {
|
||||
if (previous !== element && previous !== null) {
|
||||
toggleClass(previous, 'dv-bring-to-front', false);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const arialLevelTracker = new AriaLevelTracker();
|
||||
toggleClass(element, 'dv-bring-to-front', true);
|
||||
previous = element;
|
||||
}
|
||||
|
||||
return pushToTop;
|
||||
})();
|
||||
|
||||
export class Overlay extends CompositeDisposable {
|
||||
private readonly _element: HTMLElement = document.createElement('div');
|
||||
private _element: HTMLElement = document.createElement('div');
|
||||
|
||||
private readonly _onDidChange = new Emitter<void>();
|
||||
readonly onDidChange: Event<void> = this._onDidChange.event;
|
||||
@ -52,13 +37,8 @@ export class Overlay extends CompositeDisposable {
|
||||
private readonly _onDidChangeEnd = new Emitter<void>();
|
||||
readonly onDidChangeEnd: Event<void> = this._onDidChangeEnd.event;
|
||||
|
||||
private static readonly MINIMUM_HEIGHT = 20;
|
||||
private static readonly MINIMUM_WIDTH = 20;
|
||||
|
||||
private verticalAlignment: 'top' | 'bottom' | undefined;
|
||||
private horiziontalAlignment: 'left' | 'right' | undefined;
|
||||
|
||||
private _isVisible: boolean;
|
||||
private static MINIMUM_HEIGHT = 20;
|
||||
private static MINIMUM_WIDTH = 20;
|
||||
|
||||
set minimumInViewportWidth(value: number | undefined) {
|
||||
this.options.minimumInViewportWidth = value;
|
||||
@ -68,16 +48,8 @@ export class Overlay extends CompositeDisposable {
|
||||
this.options.minimumInViewportHeight = value;
|
||||
}
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
get isVisible(): boolean {
|
||||
return this._isVisible;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly options: AnchoredBox & {
|
||||
private readonly options: Box & {
|
||||
container: HTMLElement;
|
||||
content: HTMLElement;
|
||||
minimumInViewportWidth?: number;
|
||||
@ -89,7 +61,6 @@ export class Overlay extends CompositeDisposable {
|
||||
this.addDisposables(this._onDidChange, this._onDidChangeEnd);
|
||||
|
||||
this._element.className = 'dv-resize-container';
|
||||
this._isVisible = true;
|
||||
|
||||
this.setupResize('top');
|
||||
this.setupResize('bottom');
|
||||
@ -107,55 +78,23 @@ export class Overlay extends CompositeDisposable {
|
||||
this.setBounds({
|
||||
height: this.options.height,
|
||||
width: this.options.width,
|
||||
...('top' in this.options && { top: this.options.top }),
|
||||
...('bottom' in this.options && { bottom: this.options.bottom }),
|
||||
...('left' in this.options && { left: this.options.left }),
|
||||
...('right' in this.options && { right: this.options.right }),
|
||||
top: this.options.top,
|
||||
left: this.options.left,
|
||||
});
|
||||
|
||||
arialLevelTracker.push(this._element);
|
||||
}
|
||||
|
||||
setVisible(isVisible: boolean): void {
|
||||
if (isVisible === this.isVisible) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._isVisible = isVisible;
|
||||
|
||||
toggleClass(this.element, 'dv-hidden', !this.isVisible);
|
||||
}
|
||||
|
||||
bringToFront(): void {
|
||||
arialLevelTracker.push(this._element);
|
||||
}
|
||||
|
||||
setBounds(bounds: Partial<AnchoredBox> = {}): void {
|
||||
setBounds(bounds: Partial<Box> = {}): void {
|
||||
if (typeof bounds.height === 'number') {
|
||||
this._element.style.height = `${bounds.height}px`;
|
||||
}
|
||||
if (typeof bounds.width === 'number') {
|
||||
this._element.style.width = `${bounds.width}px`;
|
||||
}
|
||||
if ('top' in bounds && typeof bounds.top === 'number') {
|
||||
if (typeof bounds.top === 'number') {
|
||||
this._element.style.top = `${bounds.top}px`;
|
||||
this._element.style.bottom = 'auto';
|
||||
this.verticalAlignment = 'top';
|
||||
}
|
||||
if ('bottom' in bounds && typeof bounds.bottom === 'number') {
|
||||
this._element.style.bottom = `${bounds.bottom}px`;
|
||||
this._element.style.top = 'auto';
|
||||
this.verticalAlignment = 'bottom';
|
||||
}
|
||||
if ('left' in bounds && typeof bounds.left === 'number') {
|
||||
if (typeof bounds.left === 'number') {
|
||||
this._element.style.left = `${bounds.left}px`;
|
||||
this._element.style.right = 'auto';
|
||||
this.horiziontalAlignment = 'left';
|
||||
}
|
||||
if ('right' in bounds && typeof bounds.right === 'number') {
|
||||
this._element.style.right = `${bounds.right}px`;
|
||||
this._element.style.left = 'auto';
|
||||
this.horiziontalAlignment = 'right';
|
||||
}
|
||||
|
||||
const containerRect = this.options.container.getBoundingClientRect();
|
||||
@ -167,77 +106,39 @@ export class Overlay extends CompositeDisposable {
|
||||
const xOffset = Math.max(0, this.getMinimumWidth(overlayRect.width));
|
||||
|
||||
// a minimum height of minimumViewportHeight must be inside the viewport
|
||||
const yOffset = Math.max(0, this.getMinimumHeight(overlayRect.height));
|
||||
const yOffset =
|
||||
typeof this.options.minimumInViewportHeight === 'number'
|
||||
? Math.max(0, this.getMinimumHeight(overlayRect.height))
|
||||
: 0;
|
||||
|
||||
if (this.verticalAlignment === 'top') {
|
||||
const top = clamp(
|
||||
overlayRect.top - containerRect.top,
|
||||
-yOffset,
|
||||
Math.max(0, containerRect.height - overlayRect.height + yOffset)
|
||||
);
|
||||
this._element.style.top = `${top}px`;
|
||||
this._element.style.bottom = 'auto';
|
||||
}
|
||||
const left = clamp(
|
||||
overlayRect.left - containerRect.left,
|
||||
-xOffset,
|
||||
Math.max(0, containerRect.width - overlayRect.width + xOffset)
|
||||
);
|
||||
|
||||
if (this.verticalAlignment === 'bottom') {
|
||||
const bottom = clamp(
|
||||
containerRect.bottom - overlayRect.bottom,
|
||||
-yOffset,
|
||||
Math.max(0, containerRect.height - overlayRect.height + yOffset)
|
||||
);
|
||||
this._element.style.bottom = `${bottom}px`;
|
||||
this._element.style.top = 'auto';
|
||||
}
|
||||
const top = clamp(
|
||||
overlayRect.top - containerRect.top,
|
||||
-yOffset,
|
||||
Math.max(0, containerRect.height - overlayRect.height + yOffset)
|
||||
);
|
||||
|
||||
if (this.horiziontalAlignment === 'left') {
|
||||
const left = clamp(
|
||||
overlayRect.left - containerRect.left,
|
||||
-xOffset,
|
||||
Math.max(0, containerRect.width - overlayRect.width + xOffset)
|
||||
);
|
||||
this._element.style.left = `${left}px`;
|
||||
this._element.style.right = 'auto';
|
||||
}
|
||||
|
||||
if (this.horiziontalAlignment === 'right') {
|
||||
const right = clamp(
|
||||
containerRect.right - overlayRect.right,
|
||||
-xOffset,
|
||||
Math.max(0, containerRect.width - overlayRect.width + xOffset)
|
||||
);
|
||||
this._element.style.right = `${right}px`;
|
||||
this._element.style.left = 'auto';
|
||||
}
|
||||
this._element.style.left = `${left}px`;
|
||||
this._element.style.top = `${top}px`;
|
||||
|
||||
this._onDidChange.fire();
|
||||
}
|
||||
|
||||
toJSON(): AnchoredBox {
|
||||
toJSON(): Box {
|
||||
const container = this.options.container.getBoundingClientRect();
|
||||
const element = this._element.getBoundingClientRect();
|
||||
|
||||
const result: any = {};
|
||||
|
||||
if (this.verticalAlignment === 'top') {
|
||||
result.top = parseFloat(this._element.style.top);
|
||||
} else if (this.verticalAlignment === 'bottom') {
|
||||
result.bottom = parseFloat(this._element.style.bottom);
|
||||
} else {
|
||||
result.top = element.top - container.top;
|
||||
}
|
||||
|
||||
if (this.horiziontalAlignment === 'left') {
|
||||
result.left = parseFloat(this._element.style.left);
|
||||
} else if (this.horiziontalAlignment === 'right') {
|
||||
result.right = parseFloat(this._element.style.right);
|
||||
} else {
|
||||
result.left = element.left - container.left;
|
||||
}
|
||||
|
||||
result.width = element.width;
|
||||
result.height = element.height;
|
||||
|
||||
return result;
|
||||
return {
|
||||
top: element.top - container.top,
|
||||
left: element.left - container.left,
|
||||
width: element.width,
|
||||
height: element.height,
|
||||
};
|
||||
}
|
||||
|
||||
setupDrag(
|
||||
@ -249,15 +150,24 @@ export class Overlay extends CompositeDisposable {
|
||||
const track = () => {
|
||||
let offset: { x: number; y: number } | null = null;
|
||||
|
||||
const iframes = disableIframePointEvents();
|
||||
const iframes = [
|
||||
...getElementsByTagName('iframe'),
|
||||
...getElementsByTagName('webview'),
|
||||
];
|
||||
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
move.value = new CompositeDisposable(
|
||||
{
|
||||
dispose: () => {
|
||||
iframes.release();
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'auto';
|
||||
}
|
||||
},
|
||||
},
|
||||
addDisposableListener(window, 'pointermove', (e) => {
|
||||
addDisposableWindowListener(window, 'mousemove', (e) => {
|
||||
const containerRect =
|
||||
this.options.container.getBoundingClientRect();
|
||||
const x = e.clientX - containerRect.left;
|
||||
@ -283,28 +193,9 @@ export class Overlay extends CompositeDisposable {
|
||||
);
|
||||
const yOffset = Math.max(
|
||||
0,
|
||||
this.getMinimumHeight(overlayRect.height)
|
||||
);
|
||||
|
||||
const top = clamp(
|
||||
y - offset.y,
|
||||
-yOffset,
|
||||
Math.max(
|
||||
0,
|
||||
containerRect.height - overlayRect.height + yOffset
|
||||
)
|
||||
);
|
||||
|
||||
const bottom = clamp(
|
||||
offset.y -
|
||||
y +
|
||||
containerRect.height -
|
||||
overlayRect.height,
|
||||
-yOffset,
|
||||
Math.max(
|
||||
0,
|
||||
containerRect.height - overlayRect.height + yOffset
|
||||
)
|
||||
this.options.minimumInViewportHeight
|
||||
? this.getMinimumHeight(overlayRect.height)
|
||||
: 0
|
||||
);
|
||||
|
||||
const left = clamp(
|
||||
@ -316,34 +207,18 @@ export class Overlay extends CompositeDisposable {
|
||||
)
|
||||
);
|
||||
|
||||
const right = clamp(
|
||||
offset.x - x + containerRect.width - overlayRect.width,
|
||||
-xOffset,
|
||||
const top = clamp(
|
||||
y - offset.y,
|
||||
-yOffset,
|
||||
Math.max(
|
||||
0,
|
||||
containerRect.width - overlayRect.width + xOffset
|
||||
containerRect.height - overlayRect.height + yOffset
|
||||
)
|
||||
);
|
||||
|
||||
const bounds: any = {};
|
||||
|
||||
// Anchor to top or to bottom depending on which one is closer
|
||||
if (top <= bottom) {
|
||||
bounds.top = top;
|
||||
} else {
|
||||
bounds.bottom = bottom;
|
||||
}
|
||||
|
||||
// Anchor to left or to right depending on which one is closer
|
||||
if (left <= right) {
|
||||
bounds.left = left;
|
||||
} else {
|
||||
bounds.right = right;
|
||||
}
|
||||
|
||||
this.setBounds(bounds);
|
||||
this.setBounds({ top, left });
|
||||
}),
|
||||
addDisposableListener(window, 'pointerup', () => {
|
||||
addDisposableWindowListener(window, 'mouseup', () => {
|
||||
toggleClass(
|
||||
this._element,
|
||||
'dv-resize-container-dragging',
|
||||
@ -358,7 +233,7 @@ export class Overlay extends CompositeDisposable {
|
||||
|
||||
this.addDisposables(
|
||||
move,
|
||||
addDisposableListener(dragTarget, 'pointerdown', (event) => {
|
||||
addDisposableListener(dragTarget, 'mousedown', (event) => {
|
||||
if (event.defaultPrevented) {
|
||||
event.preventDefault();
|
||||
return;
|
||||
@ -374,7 +249,7 @@ export class Overlay extends CompositeDisposable {
|
||||
}),
|
||||
addDisposableListener(
|
||||
this.options.content,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
(event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
@ -393,14 +268,16 @@ export class Overlay extends CompositeDisposable {
|
||||
),
|
||||
addDisposableListener(
|
||||
this.options.content,
|
||||
'pointerdown',
|
||||
'mousedown',
|
||||
() => {
|
||||
arialLevelTracker.push(this._element);
|
||||
bringElementToFront(this._element);
|
||||
},
|
||||
true
|
||||
)
|
||||
);
|
||||
|
||||
bringElementToFront(this._element);
|
||||
|
||||
if (options.inDragMode) {
|
||||
track();
|
||||
}
|
||||
@ -425,7 +302,7 @@ export class Overlay extends CompositeDisposable {
|
||||
|
||||
this.addDisposables(
|
||||
move,
|
||||
addDisposableListener(resizeHandleElement, 'pointerdown', (e) => {
|
||||
addDisposableListener(resizeHandleElement, 'mousedown', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
let startPosition: {
|
||||
@ -435,10 +312,17 @@ export class Overlay extends CompositeDisposable {
|
||||
originalWidth: number;
|
||||
} | null = null;
|
||||
|
||||
const iframes = disableIframePointEvents();
|
||||
const iframes = [
|
||||
...getElementsByTagName('iframe'),
|
||||
...getElementsByTagName('webview'),
|
||||
];
|
||||
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
move.value = new CompositeDisposable(
|
||||
addDisposableListener(window, 'pointermove', (e) => {
|
||||
addDisposableWindowListener(window, 'mousemove', (e) => {
|
||||
const containerRect =
|
||||
this.options.container.getBoundingClientRect();
|
||||
const overlayRect =
|
||||
@ -458,10 +342,8 @@ export class Overlay extends CompositeDisposable {
|
||||
}
|
||||
|
||||
let top: number | undefined = undefined;
|
||||
let bottom: number | undefined = undefined;
|
||||
let height: number | undefined = undefined;
|
||||
let left: number | undefined = undefined;
|
||||
let right: number | undefined = undefined;
|
||||
let width: number | undefined = undefined;
|
||||
|
||||
const moveTop = () => {
|
||||
@ -481,13 +363,10 @@ export class Overlay extends CompositeDisposable {
|
||||
Overlay.MINIMUM_HEIGHT
|
||||
)
|
||||
);
|
||||
|
||||
height =
|
||||
startPosition!.originalY +
|
||||
startPosition!.originalHeight -
|
||||
top;
|
||||
|
||||
bottom = containerRect.height - top - height;
|
||||
};
|
||||
|
||||
const moveBottom = () => {
|
||||
@ -505,8 +384,6 @@ export class Overlay extends CompositeDisposable {
|
||||
: Overlay.MINIMUM_HEIGHT,
|
||||
Number.MAX_VALUE
|
||||
);
|
||||
|
||||
bottom = containerRect.height - top - height;
|
||||
};
|
||||
|
||||
const moveLeft = () => {
|
||||
@ -529,8 +406,6 @@ export class Overlay extends CompositeDisposable {
|
||||
startPosition!.originalX +
|
||||
startPosition!.originalWidth -
|
||||
left;
|
||||
|
||||
right = containerRect.width - left - width;
|
||||
};
|
||||
|
||||
const moveRight = () => {
|
||||
@ -548,8 +423,6 @@ export class Overlay extends CompositeDisposable {
|
||||
: Overlay.MINIMUM_WIDTH,
|
||||
Number.MAX_VALUE
|
||||
);
|
||||
|
||||
right = containerRect.width - left - width;
|
||||
};
|
||||
|
||||
switch (direction) {
|
||||
@ -583,33 +456,16 @@ export class Overlay extends CompositeDisposable {
|
||||
break;
|
||||
}
|
||||
|
||||
const bounds: any = {};
|
||||
|
||||
// Anchor to top or to bottom depending on which one is closer
|
||||
if (top! <= bottom!) {
|
||||
bounds.top = top;
|
||||
} else {
|
||||
bounds.bottom = bottom;
|
||||
}
|
||||
|
||||
// Anchor to left or to right depending on which one is closer
|
||||
if (left! <= right!) {
|
||||
bounds.left = left;
|
||||
} else {
|
||||
bounds.right = right;
|
||||
}
|
||||
|
||||
bounds.height = height;
|
||||
bounds.width = width;
|
||||
|
||||
this.setBounds(bounds);
|
||||
this.setBounds({ height, width, top, left });
|
||||
}),
|
||||
{
|
||||
dispose: () => {
|
||||
iframes.release();
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = 'auto';
|
||||
}
|
||||
},
|
||||
},
|
||||
addDisposableListener(window, 'pointerup', () => {
|
||||
addDisposableWindowListener(window, 'mouseup', () => {
|
||||
move.dispose();
|
||||
this._onDidChangeEnd.fire();
|
||||
})
|
||||
@ -629,11 +485,10 @@ export class Overlay extends CompositeDisposable {
|
||||
if (typeof this.options.minimumInViewportHeight === 'number') {
|
||||
return height - this.options.minimumInViewportHeight;
|
||||
}
|
||||
return 0;
|
||||
return height;
|
||||
}
|
||||
|
||||
override dispose(): void {
|
||||
arialLevelTracker.destroy(this._element);
|
||||
this._element.remove();
|
||||
super.dispose();
|
||||
}
|
||||
@ -28,9 +28,9 @@ export class ContentContainer
|
||||
extends CompositeDisposable
|
||||
implements IContentContainer
|
||||
{
|
||||
private readonly _element: HTMLElement;
|
||||
private _element: HTMLElement;
|
||||
private panel: IDockviewPanel | undefined;
|
||||
private readonly disposable = new MutableDisposable();
|
||||
private disposable = new MutableDisposable();
|
||||
|
||||
private readonly _onDidFocus = new Emitter<void>();
|
||||
readonly onDidFocus: Event<void> = this._onDidFocus.event;
|
||||
@ -50,20 +50,12 @@ export class ContentContainer
|
||||
) {
|
||||
super();
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-content-container';
|
||||
this._element.className = 'content-container';
|
||||
this._element.tabIndex = -1;
|
||||
|
||||
this.addDisposables(this._onDidFocus, this._onDidBlur);
|
||||
|
||||
const target = group.dropTargetContainer;
|
||||
|
||||
this.dropTarget = new Droptarget(this.element, {
|
||||
getOverlayOutline: () => {
|
||||
return accessor.options.theme?.dndPanelOverlay === 'group'
|
||||
? this.element.parentElement
|
||||
: null;
|
||||
},
|
||||
className: 'dv-drop-target-content',
|
||||
acceptedTargetZones: ['top', 'bottom', 'left', 'right', 'center'],
|
||||
canDisplayOverlay: (event, position) => {
|
||||
if (
|
||||
@ -84,12 +76,26 @@ export class ContentContainer
|
||||
}
|
||||
|
||||
if (data && data.viewId === this.accessor.id) {
|
||||
return true;
|
||||
if (data.groupId === this.group.id) {
|
||||
if (position === 'center') {
|
||||
// don't allow to drop on self for center position
|
||||
return false;
|
||||
}
|
||||
if (data.panelId === null) {
|
||||
// don't allow group move to drop anywhere on self
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
const groupHasOnePanelAndIsActiveDragElement =
|
||||
this.group.panels.length === 1 &&
|
||||
data.groupId === this.group.id;
|
||||
|
||||
return !groupHasOnePanelAndIsActiveDragElement;
|
||||
}
|
||||
|
||||
return this.group.canDisplayOverlay(event, position, 'content');
|
||||
},
|
||||
getOverrideTarget: target ? () => target.model : undefined,
|
||||
});
|
||||
|
||||
this.addDisposables(this.dropTarget);
|
||||
@ -148,10 +154,6 @@ export class ContentContainer
|
||||
referenceContainer: this,
|
||||
});
|
||||
break;
|
||||
default:
|
||||
throw new Error(
|
||||
`dockview: invalid renderer type '${panel.api.renderer}'`
|
||||
);
|
||||
}
|
||||
|
||||
if (doRender) {
|
||||
|
||||
@ -1,87 +0,0 @@
|
||||
import { shiftAbsoluteElementIntoView } from '../../dom';
|
||||
import { addDisposableListener } from '../../events';
|
||||
import {
|
||||
CompositeDisposable,
|
||||
Disposable,
|
||||
MutableDisposable,
|
||||
} from '../../lifecycle';
|
||||
|
||||
export class PopupService extends CompositeDisposable {
|
||||
private readonly _element: HTMLElement;
|
||||
private _active: HTMLElement | null = null;
|
||||
private readonly _activeDisposable = new MutableDisposable();
|
||||
|
||||
constructor(private readonly root: HTMLElement) {
|
||||
super();
|
||||
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-popover-anchor';
|
||||
this._element.style.position = 'relative';
|
||||
|
||||
this.root.prepend(this._element);
|
||||
|
||||
this.addDisposables(
|
||||
Disposable.from(() => {
|
||||
this.close();
|
||||
}),
|
||||
this._activeDisposable
|
||||
);
|
||||
}
|
||||
|
||||
openPopover(
|
||||
element: HTMLElement,
|
||||
position: { x: number; y: number; zIndex?: string }
|
||||
): void {
|
||||
this.close();
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.style.position = 'absolute';
|
||||
wrapper.style.zIndex = position.zIndex ?? 'var(--dv-overlay-z-index)';
|
||||
wrapper.appendChild(element);
|
||||
|
||||
const anchorBox = this._element.getBoundingClientRect();
|
||||
const offsetX = anchorBox.left;
|
||||
const offsetY = anchorBox.top;
|
||||
|
||||
wrapper.style.top = `${position.y - offsetY}px`;
|
||||
wrapper.style.left = `${position.x - offsetX}px`;
|
||||
|
||||
this._element.appendChild(wrapper);
|
||||
|
||||
this._active = wrapper;
|
||||
|
||||
this._activeDisposable.value = new CompositeDisposable(
|
||||
addDisposableListener(window, 'pointerdown', (event) => {
|
||||
const target = event.target;
|
||||
|
||||
if (!(target instanceof HTMLElement)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let el: HTMLElement | null = target;
|
||||
|
||||
while (el && el !== wrapper) {
|
||||
el = el?.parentElement ?? null;
|
||||
}
|
||||
|
||||
if (el) {
|
||||
return; // clicked within popover
|
||||
}
|
||||
|
||||
this.close();
|
||||
})
|
||||
);
|
||||
|
||||
requestAnimationFrame(() => {
|
||||
shiftAbsoluteElementIntoView(wrapper, this.root);
|
||||
});
|
||||
}
|
||||
|
||||
close(): void {
|
||||
if (this._active) {
|
||||
this._active.remove();
|
||||
this._activeDisposable.dispose();
|
||||
this._active = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -6,7 +6,7 @@
|
||||
); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */
|
||||
}
|
||||
|
||||
.dv-tab {
|
||||
.tab {
|
||||
flex-shrink: 0;
|
||||
|
||||
&:focus-within,
|
||||
@ -33,7 +33,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.dv-active-tab {
|
||||
&.active-tab {
|
||||
.dv-default-tab {
|
||||
.dv-default-tab-action {
|
||||
visibility: visible;
|
||||
@ -41,7 +41,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.dv-inactive-tab {
|
||||
&.inactive-tab {
|
||||
.dv-default-tab {
|
||||
.dv-default-tab-action {
|
||||
visibility: hidden;
|
||||
@ -58,13 +58,15 @@
|
||||
position: relative;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
min-width: 80px;
|
||||
align-items: center;
|
||||
padding: 0px 8px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
text-overflow: elipsis;
|
||||
|
||||
.dv-default-tab-content {
|
||||
padding: 0px 8px;
|
||||
flex-grow: 1;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.dv-default-tab-action {
|
||||
|
||||
@ -1,13 +1,16 @@
|
||||
import { CompositeDisposable } from '../../../lifecycle';
|
||||
import { ITabRenderer, GroupPanelPartInitParameters } from '../../types';
|
||||
import { addDisposableListener } from '../../../events';
|
||||
import { PanelUpdateEvent } from '../../../panel/types';
|
||||
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import { createCloseButton } from '../../../svg';
|
||||
|
||||
export class DefaultTab extends CompositeDisposable implements ITabRenderer {
|
||||
private readonly _element: HTMLElement;
|
||||
private readonly _content: HTMLElement;
|
||||
private readonly action: HTMLElement;
|
||||
private _title: string | undefined;
|
||||
private _element: HTMLElement;
|
||||
private _content: HTMLElement;
|
||||
private action: HTMLElement;
|
||||
//
|
||||
private params: GroupPanelPartInitParameters = {} as any;
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
@ -18,7 +21,7 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
|
||||
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-default-tab';
|
||||
|
||||
//
|
||||
this._content = document.createElement('div');
|
||||
this._content.className = 'dv-default-tab-content';
|
||||
|
||||
@ -26,39 +29,53 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
|
||||
this.action.className = 'dv-default-tab-action';
|
||||
this.action.appendChild(createCloseButton());
|
||||
|
||||
//
|
||||
this._element.appendChild(this._content);
|
||||
this._element.appendChild(this.action);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
init(params: GroupPanelPartInitParameters): void {
|
||||
this._title = params.title;
|
||||
|
||||
//
|
||||
this.addDisposables(
|
||||
params.api.onDidTitleChange((event) => {
|
||||
this._title = event.title;
|
||||
this.render();
|
||||
}),
|
||||
addDisposableListener(this.action, 'pointerdown', (ev) => {
|
||||
addDisposableListener(this.action, 'mousedown', (ev) => {
|
||||
ev.preventDefault();
|
||||
}),
|
||||
addDisposableListener(this.action, 'click', (ev) => {
|
||||
if (ev.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.preventDefault();
|
||||
params.api.close();
|
||||
})
|
||||
);
|
||||
|
||||
this.render();
|
||||
}
|
||||
|
||||
public update(event: PanelUpdateEvent): void {
|
||||
this.params = { ...this.params, ...event.params };
|
||||
this.render();
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
//noop
|
||||
}
|
||||
|
||||
public init(params: GroupPanelPartInitParameters): void {
|
||||
this.params = params;
|
||||
this._content.textContent = params.title;
|
||||
|
||||
addDisposableListener(this.action, 'click', (ev) => {
|
||||
ev.preventDefault(); //
|
||||
this.params.api.close();
|
||||
});
|
||||
}
|
||||
|
||||
onGroupChange(_group: DockviewGroupPanel): void {
|
||||
this.render();
|
||||
}
|
||||
|
||||
onPanelVisibleChange(_isPanelVisible: boolean): void {
|
||||
this.render();
|
||||
}
|
||||
|
||||
public layout(_width: number, _height: number): void {
|
||||
// noop
|
||||
}
|
||||
|
||||
private render(): void {
|
||||
if (this._content.textContent !== this._title) {
|
||||
this._content.textContent = this._title ?? '';
|
||||
if (this._content.textContent !== this.params.title) {
|
||||
this._content.textContent = this.params.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -12,11 +12,11 @@ import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import {
|
||||
DroptargetEvent,
|
||||
Droptarget,
|
||||
Position,
|
||||
WillShowOverlayEvent,
|
||||
} from '../../../dnd/droptarget';
|
||||
import { DragHandler } from '../../../dnd/abstractDragHandler';
|
||||
import { IDockviewPanel } from '../../dockviewPanel';
|
||||
import { addGhostImage } from '../../../dnd/ghost';
|
||||
|
||||
class TabDragHandler extends DragHandler {
|
||||
private readonly panelTransfer =
|
||||
@ -50,8 +50,8 @@ export class Tab extends CompositeDisposable {
|
||||
private readonly dropTarget: Droptarget;
|
||||
private content: ITabRenderer | undefined = undefined;
|
||||
|
||||
private readonly _onPointDown = new Emitter<MouseEvent>();
|
||||
readonly onPointerDown: Event<MouseEvent> = this._onPointDown.event;
|
||||
private readonly _onChanged = new Emitter<MouseEvent>();
|
||||
readonly onChanged: Event<MouseEvent> = this._onChanged.event;
|
||||
|
||||
private readonly _onDropped = new Emitter<DroptargetEvent>();
|
||||
readonly onDrop: Event<DroptargetEvent> = this._onDropped.event;
|
||||
@ -73,11 +73,11 @@ export class Tab extends CompositeDisposable {
|
||||
super();
|
||||
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-tab';
|
||||
this._element.className = 'tab';
|
||||
this._element.tabIndex = 0;
|
||||
this._element.draggable = true;
|
||||
|
||||
toggleClass(this.element, 'dv-inactive-tab', true);
|
||||
toggleClass(this.element, 'inactive-tab', true);
|
||||
|
||||
const dragHandler = new TabDragHandler(
|
||||
this._element,
|
||||
@ -87,8 +87,7 @@ export class Tab extends CompositeDisposable {
|
||||
);
|
||||
|
||||
this.dropTarget = new Droptarget(this._element, {
|
||||
acceptedTargetZones: ['left', 'right'],
|
||||
overlayModel: { activationSize: { value: 50, type: 'percentage' } },
|
||||
acceptedTargetZones: ['center'],
|
||||
canDisplayOverlay: (event, position) => {
|
||||
if (this.group.locked) {
|
||||
return false;
|
||||
@ -97,7 +96,15 @@ export class Tab extends CompositeDisposable {
|
||||
const data = getPanelData();
|
||||
|
||||
if (data && this.accessor.id === data.viewId) {
|
||||
return true;
|
||||
if (
|
||||
data.panelId === null &&
|
||||
data.groupId === this.group.id
|
||||
) {
|
||||
// don't allow group move to drop on self
|
||||
return false;
|
||||
}
|
||||
|
||||
return this.panel.id !== data.panelId;
|
||||
}
|
||||
|
||||
return this.group.model.canDisplayOverlay(
|
||||
@ -106,38 +113,24 @@ export class Tab extends CompositeDisposable {
|
||||
'tab'
|
||||
);
|
||||
},
|
||||
getOverrideTarget: () => group.model.dropTargetContainer?.model,
|
||||
});
|
||||
|
||||
this.onWillShowOverlay = this.dropTarget.onWillShowOverlay;
|
||||
|
||||
this.addDisposables(
|
||||
this._onPointDown,
|
||||
this._onChanged,
|
||||
this._onDropped,
|
||||
this._onDragStart,
|
||||
dragHandler.onDragStart((event) => {
|
||||
if (event.dataTransfer) {
|
||||
const style = getComputedStyle(this.element);
|
||||
const newNode = this.element.cloneNode(true) as HTMLElement;
|
||||
Array.from(style).forEach((key) =>
|
||||
newNode.style.setProperty(
|
||||
key,
|
||||
style.getPropertyValue(key),
|
||||
style.getPropertyPriority(key)
|
||||
)
|
||||
);
|
||||
newNode.style.position = 'absolute';
|
||||
|
||||
addGhostImage(event.dataTransfer, newNode, {
|
||||
y: -10,
|
||||
x: 30,
|
||||
});
|
||||
}
|
||||
this._onDragStart.fire(event);
|
||||
}),
|
||||
dragHandler,
|
||||
addDisposableListener(this._element, 'pointerdown', (event) => {
|
||||
this._onPointDown.fire(event);
|
||||
addDisposableListener(this._element, 'mousedown', (event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._onChanged.fire(event);
|
||||
}),
|
||||
this.dropTarget.onDrop((event) => {
|
||||
this._onDropped.fire(event);
|
||||
@ -147,8 +140,8 @@ export class Tab extends CompositeDisposable {
|
||||
}
|
||||
|
||||
public setActive(isActive: boolean): void {
|
||||
toggleClass(this.element, 'dv-active-tab', isActive);
|
||||
toggleClass(this.element, 'dv-inactive-tab', !isActive);
|
||||
toggleClass(this.element, 'active-tab', isActive);
|
||||
toggleClass(this.element, 'inactive-tab', !isActive);
|
||||
}
|
||||
|
||||
public setContent(part: ITabRenderer): void {
|
||||
|
||||
@ -1,19 +0,0 @@
|
||||
.dv-tabs-overflow-dropdown-default {
|
||||
height: 100%;
|
||||
color: var(--dv-activegroup-hiddenpanel-tab-color);
|
||||
|
||||
margin: var(--dv-tab-margin);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
padding-left: 0.25rem;
|
||||
}
|
||||
|
||||
> svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { createChevronRightButton } from '../../../svg';
|
||||
|
||||
export type DropdownElement = {
|
||||
element: HTMLElement;
|
||||
update: (params: { tabs: number }) => void;
|
||||
dispose?: () => void;
|
||||
};
|
||||
|
||||
export function createDropdownElementHandle(): DropdownElement {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'dv-tabs-overflow-dropdown-default';
|
||||
|
||||
const text = document.createElement('span');
|
||||
text.textContent = ``;
|
||||
const icon = createChevronRightButton();
|
||||
el.appendChild(icon);
|
||||
el.appendChild(text);
|
||||
|
||||
return {
|
||||
element: el,
|
||||
update: (params: { tabs: number }) => {
|
||||
text.textContent = `${params.tabs}`;
|
||||
},
|
||||
};
|
||||
}
|
||||
@ -1,79 +0,0 @@
|
||||
.dv-tabs-container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
scrollbar-width: thin; // firefox
|
||||
|
||||
&.dv-horizontal {
|
||||
.dv-tab {
|
||||
&:not(:first-child)::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
background-color: var(--dv-tab-divider-color);
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--dv-tabs-container-scrollbar-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dv-scrollable {
|
||||
> .dv-tabs-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-tab {
|
||||
-webkit-user-drag: element;
|
||||
outline: none;
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
font-size: var(--dv-tab-font-size);
|
||||
margin: var(--dv-tab-margin);
|
||||
}
|
||||
|
||||
.dv-tabs-overflow-container {
|
||||
flex-direction: column;
|
||||
height: unset;
|
||||
border: 1px solid var(--dv-tab-divider-color);
|
||||
background-color: var(--dv-group-view-background-color);
|
||||
|
||||
.dv-tab {
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1px solid var(--dv-tab-divider-color);
|
||||
}
|
||||
}
|
||||
|
||||
.dv-active-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-visiblepanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-visiblepanel-tab-color);
|
||||
}
|
||||
.dv-inactive-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-hiddenpanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-hiddenpanel-tab-color);
|
||||
}
|
||||
}
|
||||
@ -1,301 +0,0 @@
|
||||
import { getPanelData } from '../../../dnd/dataTransfer';
|
||||
import {
|
||||
isChildEntirelyVisibleWithinParent,
|
||||
OverflowObserver,
|
||||
} from '../../../dom';
|
||||
import { addDisposableListener, Emitter, Event } from '../../../events';
|
||||
import {
|
||||
CompositeDisposable,
|
||||
Disposable,
|
||||
IValueDisposable,
|
||||
MutableDisposable,
|
||||
} from '../../../lifecycle';
|
||||
import { Scrollbar } from '../../../scrollbar';
|
||||
import { DockviewComponent } from '../../dockviewComponent';
|
||||
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
|
||||
import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
|
||||
import { Tab } from '../tab/tab';
|
||||
import { TabDragEvent, TabDropIndexEvent } from './tabsContainer';
|
||||
|
||||
export class Tabs extends CompositeDisposable {
|
||||
private readonly _element: HTMLElement;
|
||||
private readonly _tabsList: HTMLElement;
|
||||
private readonly _observerDisposable = new MutableDisposable();
|
||||
|
||||
private _tabs: IValueDisposable<Tab>[] = [];
|
||||
private selectedIndex = -1;
|
||||
private _showTabsOverflowControl = false;
|
||||
|
||||
private readonly _onTabDragStart = new Emitter<TabDragEvent>();
|
||||
readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
|
||||
|
||||
private readonly _onDrop = new Emitter<TabDropIndexEvent>();
|
||||
readonly onDrop: Event<TabDropIndexEvent> = this._onDrop.event;
|
||||
|
||||
private readonly _onWillShowOverlay =
|
||||
new Emitter<WillShowOverlayLocationEvent>();
|
||||
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent> =
|
||||
this._onWillShowOverlay.event;
|
||||
|
||||
private readonly _onOverflowTabsChange = new Emitter<{
|
||||
tabs: string[];
|
||||
reset: boolean;
|
||||
}>();
|
||||
readonly onOverflowTabsChange = this._onOverflowTabsChange.event;
|
||||
|
||||
get showTabsOverflowControl(): boolean {
|
||||
return this._showTabsOverflowControl;
|
||||
}
|
||||
|
||||
set showTabsOverflowControl(value: boolean) {
|
||||
if (this._showTabsOverflowControl == value) {
|
||||
return;
|
||||
}
|
||||
|
||||
this._showTabsOverflowControl = value;
|
||||
|
||||
if (value) {
|
||||
const observer = new OverflowObserver(this._tabsList);
|
||||
|
||||
this._observerDisposable.value = new CompositeDisposable(
|
||||
observer,
|
||||
observer.onDidChange((event) => {
|
||||
const hasOverflow = event.hasScrollX || event.hasScrollY;
|
||||
this.toggleDropdown({ reset: !hasOverflow });
|
||||
}),
|
||||
addDisposableListener(this._tabsList, 'scroll', () => {
|
||||
this.toggleDropdown({ reset: false });
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
get panels(): string[] {
|
||||
return this._tabs.map((_) => _.value.panel.id);
|
||||
}
|
||||
|
||||
get size(): number {
|
||||
return this._tabs.length;
|
||||
}
|
||||
|
||||
get tabs(): Tab[] {
|
||||
return this._tabs.map((_) => _.value);
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly group: DockviewGroupPanel,
|
||||
private readonly accessor: DockviewComponent,
|
||||
options: {
|
||||
showTabsOverflowControl: boolean;
|
||||
}
|
||||
) {
|
||||
super();
|
||||
|
||||
this._tabsList = document.createElement('div');
|
||||
this._tabsList.className = 'dv-tabs-container dv-horizontal';
|
||||
|
||||
this.showTabsOverflowControl = options.showTabsOverflowControl;
|
||||
|
||||
if (accessor.options.scrollbars === 'native') {
|
||||
this._element = this._tabsList;
|
||||
} else {
|
||||
const scrollbar = new Scrollbar(this._tabsList);
|
||||
this._element = scrollbar.element;
|
||||
this.addDisposables(scrollbar);
|
||||
}
|
||||
|
||||
this.addDisposables(
|
||||
this._onOverflowTabsChange,
|
||||
this._observerDisposable,
|
||||
this._onWillShowOverlay,
|
||||
this._onDrop,
|
||||
this._onTabDragStart,
|
||||
addDisposableListener(this.element, 'pointerdown', (event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isLeftClick = event.button === 0;
|
||||
|
||||
if (isLeftClick) {
|
||||
this.accessor.doSetGroupActive(this.group);
|
||||
}
|
||||
}),
|
||||
Disposable.from(() => {
|
||||
for (const { value, disposable } of this._tabs) {
|
||||
disposable.dispose();
|
||||
value.dispose();
|
||||
}
|
||||
|
||||
this._tabs = [];
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
indexOf(id: string): number {
|
||||
return this._tabs.findIndex((tab) => tab.value.panel.id === id);
|
||||
}
|
||||
|
||||
isActive(tab: Tab): boolean {
|
||||
return (
|
||||
this.selectedIndex > -1 &&
|
||||
this._tabs[this.selectedIndex].value === tab
|
||||
);
|
||||
}
|
||||
|
||||
setActivePanel(panel: IDockviewPanel): void {
|
||||
let runningWidth = 0;
|
||||
|
||||
for (const tab of this._tabs) {
|
||||
const isActivePanel = panel.id === tab.value.panel.id;
|
||||
tab.value.setActive(isActivePanel);
|
||||
|
||||
if (isActivePanel) {
|
||||
const element = tab.value.element;
|
||||
const parentElement = element.parentElement!;
|
||||
|
||||
if (
|
||||
runningWidth < parentElement.scrollLeft ||
|
||||
runningWidth + element.clientWidth >
|
||||
parentElement.scrollLeft + parentElement.clientWidth
|
||||
) {
|
||||
parentElement.scrollLeft = runningWidth;
|
||||
}
|
||||
}
|
||||
|
||||
runningWidth += tab.value.element.clientWidth;
|
||||
}
|
||||
}
|
||||
|
||||
openPanel(panel: IDockviewPanel, index: number = this._tabs.length): void {
|
||||
if (this._tabs.find((tab) => tab.value.panel.id === panel.id)) {
|
||||
return;
|
||||
}
|
||||
const tab = new Tab(panel, this.accessor, this.group);
|
||||
tab.setContent(panel.view.tab);
|
||||
|
||||
const disposable = new CompositeDisposable(
|
||||
tab.onDragStart((event) => {
|
||||
this._onTabDragStart.fire({ nativeEvent: event, panel });
|
||||
}),
|
||||
tab.onPointerDown((event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isFloatingGroupsEnabled =
|
||||
!this.accessor.options.disableFloatingGroups;
|
||||
|
||||
const isFloatingWithOnePanel =
|
||||
this.group.api.location.type === 'floating' &&
|
||||
this.size === 1;
|
||||
|
||||
if (
|
||||
isFloatingGroupsEnabled &&
|
||||
!isFloatingWithOnePanel &&
|
||||
event.shiftKey
|
||||
) {
|
||||
event.preventDefault();
|
||||
|
||||
const panel = this.accessor.getGroupPanel(tab.panel.id);
|
||||
|
||||
const { top, left } = tab.element.getBoundingClientRect();
|
||||
const { top: rootTop, left: rootLeft } =
|
||||
this.accessor.element.getBoundingClientRect();
|
||||
|
||||
this.accessor.addFloatingGroup(panel as DockviewPanel, {
|
||||
x: left - rootLeft,
|
||||
y: top - rootTop,
|
||||
inDragMode: true,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.button) {
|
||||
case 0: // left click or touch
|
||||
if (this.group.activePanel !== panel) {
|
||||
this.group.model.openPanel(panel);
|
||||
}
|
||||
break;
|
||||
}
|
||||
}),
|
||||
tab.onDrop((event) => {
|
||||
this._onDrop.fire({
|
||||
event: event.nativeEvent,
|
||||
index: this._tabs.findIndex((x) => x.value === tab),
|
||||
});
|
||||
}),
|
||||
tab.onWillShowOverlay((event) => {
|
||||
this._onWillShowOverlay.fire(
|
||||
new WillShowOverlayLocationEvent(event, {
|
||||
kind: 'tab',
|
||||
panel: this.group.activePanel,
|
||||
api: this.accessor.api,
|
||||
group: this.group,
|
||||
getData: getPanelData,
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
const value: IValueDisposable<Tab> = { value: tab, disposable };
|
||||
|
||||
this.addTab(value, index);
|
||||
}
|
||||
|
||||
delete(id: string): void {
|
||||
const index = this.indexOf(id);
|
||||
const tabToRemove = this._tabs.splice(index, 1)[0];
|
||||
|
||||
const { value, disposable } = tabToRemove;
|
||||
|
||||
disposable.dispose();
|
||||
value.dispose();
|
||||
value.element.remove();
|
||||
}
|
||||
|
||||
private addTab(
|
||||
tab: IValueDisposable<Tab>,
|
||||
index: number = this._tabs.length
|
||||
): void {
|
||||
if (index < 0 || index > this._tabs.length) {
|
||||
throw new Error('invalid location');
|
||||
}
|
||||
|
||||
this._tabsList.insertBefore(
|
||||
tab.value.element,
|
||||
this._tabsList.children[index]
|
||||
);
|
||||
|
||||
this._tabs = [
|
||||
...this._tabs.slice(0, index),
|
||||
tab,
|
||||
...this._tabs.slice(index),
|
||||
];
|
||||
|
||||
if (this.selectedIndex < 0) {
|
||||
this.selectedIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
private toggleDropdown(options: { reset: boolean }): void {
|
||||
const tabs = options.reset
|
||||
? []
|
||||
: this._tabs
|
||||
.filter(
|
||||
(tab) =>
|
||||
!isChildEntirelyVisibleWithinParent(
|
||||
tab.value.element,
|
||||
this._tabsList
|
||||
)
|
||||
)
|
||||
.map((x) => x.value.panel.id);
|
||||
|
||||
this._onOverflowTabsChange.fire({ tabs, reset: options.reset });
|
||||
}
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.dv-tabs-and-actions-container {
|
||||
.tabs-and-actions-container {
|
||||
display: flex;
|
||||
background-color: var(--dv-tabs-and-actions-container-background-color);
|
||||
flex-shrink: 0;
|
||||
@ -6,32 +6,70 @@
|
||||
height: var(--dv-tabs-and-actions-container-height);
|
||||
font-size: var(--dv-tabs-and-actions-container-font-size);
|
||||
|
||||
&.dv-single-tab.dv-full-width-single-tab {
|
||||
.dv-scrollable {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.dv-tabs-container {
|
||||
flex-grow: 1;
|
||||
|
||||
.dv-tab {
|
||||
flex-grow: 1;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-void-container {
|
||||
flex-grow: 0;
|
||||
}
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dv-void-container {
|
||||
&.dv-single-tab.dv-full-width-single-tab {
|
||||
.tabs-container {
|
||||
flex-grow: 1;
|
||||
|
||||
.tab {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.void-container {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.void-container {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.dv-right-actions-container {
|
||||
.tabs-container {
|
||||
display: flex;
|
||||
overflow-x: overlay;
|
||||
overflow-y: hidden;
|
||||
|
||||
scrollbar-width: thin; // firefox
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 3px;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--dv-tabs-container-scrollbar-color);
|
||||
}
|
||||
|
||||
.tab {
|
||||
-webkit-user-drag: element;
|
||||
outline: none;
|
||||
min-width: 75px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:not(:first-child)::before {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 5;
|
||||
pointer-events: none;
|
||||
background-color: var(--dv-tab-divider-color);
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,23 +1,21 @@
|
||||
import {
|
||||
IDisposable,
|
||||
CompositeDisposable,
|
||||
Disposable,
|
||||
MutableDisposable,
|
||||
IValueDisposable,
|
||||
} from '../../../lifecycle';
|
||||
import { addDisposableListener, Emitter, Event } from '../../../events';
|
||||
import { Tab } from '../tab/tab';
|
||||
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import { VoidContainer } from './voidContainer';
|
||||
import { findRelativeZIndexParent, toggleClass } from '../../../dom';
|
||||
import { IDockviewPanel } from '../../dockviewPanel';
|
||||
import { toggleClass } from '../../../dom';
|
||||
import { DockviewPanel, IDockviewPanel } from '../../dockviewPanel';
|
||||
import { DockviewComponent } from '../../dockviewComponent';
|
||||
import { WillShowOverlayLocationEvent } from '../../dockviewGroupPanelModel';
|
||||
import { getPanelData } from '../../../dnd/dataTransfer';
|
||||
import { Tabs } from './tabs';
|
||||
import { WillShowOverlayEvent } from '../../../dnd/droptarget';
|
||||
import {
|
||||
createDropdownElementHandle,
|
||||
DropdownElement,
|
||||
} from './tabOverflowControl';
|
||||
DockviewGroupDropLocation,
|
||||
WillShowOverlayLocationEvent,
|
||||
} from '../../dockviewGroupPanelModel';
|
||||
import { getPanelData } from '../../../dnd/dataTransfer';
|
||||
|
||||
export interface TabDropIndexEvent {
|
||||
readonly event: DragEvent;
|
||||
@ -62,28 +60,25 @@ export class TabsContainer
|
||||
implements ITabsContainer
|
||||
{
|
||||
private readonly _element: HTMLElement;
|
||||
private readonly tabs: Tabs;
|
||||
private readonly tabContainer: HTMLElement;
|
||||
private readonly rightActionsContainer: HTMLElement;
|
||||
private readonly leftActionsContainer: HTMLElement;
|
||||
private readonly preActionsContainer: HTMLElement;
|
||||
private readonly voidContainer: VoidContainer;
|
||||
|
||||
private tabs: IValueDisposable<Tab>[] = [];
|
||||
private selectedIndex = -1;
|
||||
private rightActions: HTMLElement | undefined;
|
||||
private leftActions: HTMLElement | undefined;
|
||||
private preActions: HTMLElement | undefined;
|
||||
|
||||
private _hidden = false;
|
||||
|
||||
private dropdownPart: DropdownElement | null = null;
|
||||
private _overflowTabs: string[] = [];
|
||||
private readonly _dropdownDisposable = new MutableDisposable();
|
||||
|
||||
private readonly _onDrop = new Emitter<TabDropIndexEvent>();
|
||||
readonly onDrop: Event<TabDropIndexEvent> = this._onDrop.event;
|
||||
|
||||
get onTabDragStart(): Event<TabDragEvent> {
|
||||
return this.tabs.onTabDragStart;
|
||||
}
|
||||
private readonly _onTabDragStart = new Emitter<TabDragEvent>();
|
||||
readonly onTabDragStart: Event<TabDragEvent> = this._onTabDragStart.event;
|
||||
|
||||
private readonly _onGroupDragStart = new Emitter<GroupDragEvent>();
|
||||
readonly onGroupDragStart: Event<GroupDragEvent> =
|
||||
@ -95,11 +90,11 @@ export class TabsContainer
|
||||
this._onWillShowOverlay.event;
|
||||
|
||||
get panels(): string[] {
|
||||
return this.tabs.panels;
|
||||
return this.tabs.map((_) => _.value.panel.id);
|
||||
}
|
||||
|
||||
get size(): number {
|
||||
return this.tabs.size;
|
||||
return this.tabs.length;
|
||||
}
|
||||
|
||||
get hidden(): boolean {
|
||||
@ -111,118 +106,6 @@ export class TabsContainer
|
||||
this.element.style.display = value ? 'none' : '';
|
||||
}
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly accessor: DockviewComponent,
|
||||
private readonly group: DockviewGroupPanel
|
||||
) {
|
||||
super();
|
||||
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-tabs-and-actions-container';
|
||||
|
||||
toggleClass(
|
||||
this._element,
|
||||
'dv-full-width-single-tab',
|
||||
this.accessor.options.singleTabMode === 'fullwidth'
|
||||
);
|
||||
|
||||
this.rightActionsContainer = document.createElement('div');
|
||||
this.rightActionsContainer.className = 'dv-right-actions-container';
|
||||
|
||||
this.leftActionsContainer = document.createElement('div');
|
||||
this.leftActionsContainer.className = 'dv-left-actions-container';
|
||||
|
||||
this.preActionsContainer = document.createElement('div');
|
||||
this.preActionsContainer.className = 'dv-pre-actions-container';
|
||||
|
||||
this.tabs = new Tabs(group, accessor, {
|
||||
showTabsOverflowControl: !accessor.options.disableTabsOverflowList,
|
||||
});
|
||||
|
||||
this.voidContainer = new VoidContainer(this.accessor, this.group);
|
||||
|
||||
this._element.appendChild(this.preActionsContainer);
|
||||
this._element.appendChild(this.tabs.element);
|
||||
this._element.appendChild(this.leftActionsContainer);
|
||||
this._element.appendChild(this.voidContainer.element);
|
||||
this._element.appendChild(this.rightActionsContainer);
|
||||
|
||||
this.addDisposables(
|
||||
this.tabs.onDrop((e) => this._onDrop.fire(e)),
|
||||
this.tabs.onWillShowOverlay((e) => this._onWillShowOverlay.fire(e)),
|
||||
accessor.onDidOptionsChange(() => {
|
||||
this.tabs.showTabsOverflowControl =
|
||||
!accessor.options.disableTabsOverflowList;
|
||||
}),
|
||||
this.tabs.onOverflowTabsChange((event) => {
|
||||
this.toggleDropdown(event);
|
||||
}),
|
||||
this.tabs,
|
||||
this._onWillShowOverlay,
|
||||
this._onDrop,
|
||||
this._onGroupDragStart,
|
||||
this.voidContainer,
|
||||
this.voidContainer.onDragStart((event) => {
|
||||
this._onGroupDragStart.fire({
|
||||
nativeEvent: event,
|
||||
group: this.group,
|
||||
});
|
||||
}),
|
||||
this.voidContainer.onDrop((event) => {
|
||||
this._onDrop.fire({
|
||||
event: event.nativeEvent,
|
||||
index: this.tabs.size,
|
||||
});
|
||||
}),
|
||||
this.voidContainer.onWillShowOverlay((event) => {
|
||||
this._onWillShowOverlay.fire(
|
||||
new WillShowOverlayLocationEvent(event, {
|
||||
kind: 'header_space',
|
||||
panel: this.group.activePanel,
|
||||
api: this.accessor.api,
|
||||
group: this.group,
|
||||
getData: getPanelData,
|
||||
})
|
||||
);
|
||||
}),
|
||||
addDisposableListener(
|
||||
this.voidContainer.element,
|
||||
'pointerdown',
|
||||
(event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isFloatingGroupsEnabled =
|
||||
!this.accessor.options.disableFloatingGroups;
|
||||
|
||||
if (
|
||||
isFloatingGroupsEnabled &&
|
||||
event.shiftKey &&
|
||||
this.group.api.location.type !== 'floating'
|
||||
) {
|
||||
event.preventDefault();
|
||||
|
||||
const { top, left } =
|
||||
this.element.getBoundingClientRect();
|
||||
const { top: rootTop, left: rootLeft } =
|
||||
this.accessor.element.getBoundingClientRect();
|
||||
|
||||
this.accessor.addFloatingGroup(this.group, {
|
||||
x: left - rootLeft + 20,
|
||||
y: top - rootTop + 20,
|
||||
inDragMode: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
show(): void {
|
||||
if (!this.hidden) {
|
||||
this.element.style.display = '';
|
||||
@ -275,129 +158,289 @@ export class TabsContainer
|
||||
}
|
||||
}
|
||||
|
||||
isActive(tab: Tab): boolean {
|
||||
return this.tabs.isActive(tab);
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
indexOf(id: string): number {
|
||||
return this.tabs.indexOf(id);
|
||||
public isActive(tab: Tab): boolean {
|
||||
return (
|
||||
this.selectedIndex > -1 &&
|
||||
this.tabs[this.selectedIndex].value === tab
|
||||
);
|
||||
}
|
||||
|
||||
setActive(_isGroupActive: boolean) {
|
||||
// noop
|
||||
public indexOf(id: string): number {
|
||||
return this.tabs.findIndex((tab) => tab.value.panel.id === id);
|
||||
}
|
||||
|
||||
delete(id: string): void {
|
||||
this.tabs.delete(id);
|
||||
this.updateClassnames();
|
||||
}
|
||||
constructor(
|
||||
private readonly accessor: DockviewComponent,
|
||||
private readonly group: DockviewGroupPanel
|
||||
) {
|
||||
super();
|
||||
|
||||
setActivePanel(panel: IDockviewPanel): void {
|
||||
this.tabs.setActivePanel(panel);
|
||||
}
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'tabs-and-actions-container';
|
||||
|
||||
openPanel(panel: IDockviewPanel, index: number = this.tabs.size): void {
|
||||
this.tabs.openPanel(panel, index);
|
||||
this.updateClassnames();
|
||||
}
|
||||
toggleClass(
|
||||
this._element,
|
||||
'dv-full-width-single-tab',
|
||||
this.accessor.options.singleTabMode === 'fullwidth'
|
||||
);
|
||||
|
||||
closePanel(panel: IDockviewPanel): void {
|
||||
this.delete(panel.id);
|
||||
}
|
||||
this.rightActionsContainer = document.createElement('div');
|
||||
this.rightActionsContainer.className = 'right-actions-container';
|
||||
|
||||
private updateClassnames(): void {
|
||||
toggleClass(this._element, 'dv-single-tab', this.size === 1);
|
||||
}
|
||||
this.leftActionsContainer = document.createElement('div');
|
||||
this.leftActionsContainer.className = 'left-actions-container';
|
||||
|
||||
private toggleDropdown(options: { tabs: string[]; reset: boolean }): void {
|
||||
const tabs = options.reset ? [] : options.tabs;
|
||||
this._overflowTabs = tabs;
|
||||
this.preActionsContainer = document.createElement('div');
|
||||
this.preActionsContainer.className = 'pre-actions-container';
|
||||
|
||||
if (this._overflowTabs.length > 0 && this.dropdownPart) {
|
||||
this.dropdownPart.update({ tabs: tabs.length });
|
||||
return;
|
||||
}
|
||||
this.tabContainer = document.createElement('div');
|
||||
this.tabContainer.className = 'tabs-container';
|
||||
|
||||
if (this._overflowTabs.length === 0) {
|
||||
this._dropdownDisposable.dispose();
|
||||
return;
|
||||
}
|
||||
this.voidContainer = new VoidContainer(this.accessor, this.group);
|
||||
|
||||
const root = document.createElement('div');
|
||||
root.className = 'dv-tabs-overflow-dropdown-root';
|
||||
this._element.appendChild(this.preActionsContainer);
|
||||
this._element.appendChild(this.tabContainer);
|
||||
this._element.appendChild(this.leftActionsContainer);
|
||||
this._element.appendChild(this.voidContainer.element);
|
||||
this._element.appendChild(this.rightActionsContainer);
|
||||
|
||||
const part = createDropdownElementHandle();
|
||||
part.update({ tabs: tabs.length });
|
||||
|
||||
this.dropdownPart = part;
|
||||
|
||||
root.appendChild(part.element);
|
||||
this.rightActionsContainer.prepend(root);
|
||||
|
||||
this._dropdownDisposable.value = new CompositeDisposable(
|
||||
Disposable.from(() => {
|
||||
root.remove();
|
||||
this.dropdownPart?.dispose?.();
|
||||
this.dropdownPart = null;
|
||||
this.addDisposables(
|
||||
this.accessor.onDidAddPanel((e) => {
|
||||
if (e.api.group === this.group) {
|
||||
toggleClass(
|
||||
this._element,
|
||||
'dv-single-tab',
|
||||
this.size === 1
|
||||
);
|
||||
}
|
||||
}),
|
||||
this.accessor.onDidRemovePanel((e) => {
|
||||
if (e.api.group === this.group) {
|
||||
toggleClass(
|
||||
this._element,
|
||||
'dv-single-tab',
|
||||
this.size === 1
|
||||
);
|
||||
}
|
||||
}),
|
||||
this._onWillShowOverlay,
|
||||
this._onDrop,
|
||||
this._onTabDragStart,
|
||||
this._onGroupDragStart,
|
||||
this.voidContainer,
|
||||
this.voidContainer.onDragStart((event) => {
|
||||
this._onGroupDragStart.fire({
|
||||
nativeEvent: event,
|
||||
group: this.group,
|
||||
});
|
||||
}),
|
||||
this.voidContainer.onDrop((event) => {
|
||||
this._onDrop.fire({
|
||||
event: event.nativeEvent,
|
||||
index: this.tabs.length,
|
||||
});
|
||||
}),
|
||||
this.voidContainer.onWillShowOverlay((event) => {
|
||||
this._onWillShowOverlay.fire(
|
||||
new WillShowOverlayLocationEvent(event, {
|
||||
kind: 'header_space',
|
||||
panel: this.group.activePanel,
|
||||
api: this.accessor.api,
|
||||
group: this.group,
|
||||
getData: getPanelData,
|
||||
})
|
||||
);
|
||||
}),
|
||||
addDisposableListener(
|
||||
root,
|
||||
'pointerdown',
|
||||
this.voidContainer.element,
|
||||
'mousedown',
|
||||
(event) => {
|
||||
event.preventDefault();
|
||||
},
|
||||
{ capture: true }
|
||||
const isFloatingGroupsEnabled =
|
||||
!this.accessor.options.disableFloatingGroups;
|
||||
|
||||
if (
|
||||
isFloatingGroupsEnabled &&
|
||||
event.shiftKey &&
|
||||
this.group.api.location.type !== 'floating'
|
||||
) {
|
||||
event.preventDefault();
|
||||
|
||||
const { top, left } =
|
||||
this.element.getBoundingClientRect();
|
||||
const { top: rootTop, left: rootLeft } =
|
||||
this.accessor.element.getBoundingClientRect();
|
||||
|
||||
this.accessor.addFloatingGroup(
|
||||
this.group,
|
||||
{
|
||||
x: left - rootLeft + 20,
|
||||
y: top - rootTop + 20,
|
||||
},
|
||||
{ inDragMode: true }
|
||||
);
|
||||
}
|
||||
}
|
||||
),
|
||||
addDisposableListener(root, 'click', (event) => {
|
||||
const el = document.createElement('div');
|
||||
el.style.overflow = 'auto';
|
||||
el.className = 'dv-tabs-overflow-container';
|
||||
|
||||
for (const tab of this.tabs.tabs.filter((tab) =>
|
||||
this._overflowTabs.includes(tab.panel.id)
|
||||
)) {
|
||||
const panelObject = this.group.panels.find(
|
||||
(panel) => panel === tab.panel
|
||||
)!;
|
||||
|
||||
const tabComponent =
|
||||
panelObject.view.createTabRenderer('headerOverflow');
|
||||
|
||||
const child = tabComponent.element;
|
||||
|
||||
const wrapper = document.createElement('div');
|
||||
toggleClass(wrapper, 'dv-tab', true);
|
||||
toggleClass(
|
||||
wrapper,
|
||||
'dv-active-tab',
|
||||
panelObject.api.isActive
|
||||
);
|
||||
toggleClass(
|
||||
wrapper,
|
||||
'dv-inactive-tab',
|
||||
!panelObject.api.isActive
|
||||
);
|
||||
|
||||
wrapper.addEventListener('pointerdown', () => {
|
||||
this.accessor.popupService.close();
|
||||
tab.element.scrollIntoView();
|
||||
tab.panel.api.setActive();
|
||||
});
|
||||
wrapper.appendChild(child);
|
||||
|
||||
el.appendChild(wrapper);
|
||||
addDisposableListener(this.tabContainer, 'mousedown', (event) => {
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
const relativeParent = findRelativeZIndexParent(root);
|
||||
const isLeftClick = event.button === 0;
|
||||
|
||||
this.accessor.popupService.openPopover(el, {
|
||||
x: event.clientX,
|
||||
y: event.clientY,
|
||||
zIndex: relativeParent?.style.zIndex
|
||||
? `calc(${relativeParent.style.zIndex} * 2)`
|
||||
: undefined,
|
||||
});
|
||||
if (isLeftClick) {
|
||||
this.accessor.doSetGroupActive(this.group);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
public setActive(_isGroupActive: boolean) {
|
||||
// noop
|
||||
}
|
||||
|
||||
private addTab(
|
||||
tab: IValueDisposable<Tab>,
|
||||
index: number = this.tabs.length
|
||||
): void {
|
||||
if (index < 0 || index > this.tabs.length) {
|
||||
throw new Error('invalid location');
|
||||
}
|
||||
|
||||
this.tabContainer.insertBefore(
|
||||
tab.value.element,
|
||||
this.tabContainer.children[index]
|
||||
);
|
||||
|
||||
this.tabs = [
|
||||
...this.tabs.slice(0, index),
|
||||
tab,
|
||||
...this.tabs.slice(index),
|
||||
];
|
||||
|
||||
if (this.selectedIndex < 0) {
|
||||
this.selectedIndex = index;
|
||||
}
|
||||
}
|
||||
|
||||
public delete(id: string): void {
|
||||
const index = this.tabs.findIndex((tab) => tab.value.panel.id === id);
|
||||
|
||||
const tabToRemove = this.tabs.splice(index, 1)[0];
|
||||
|
||||
const { value, disposable } = tabToRemove;
|
||||
|
||||
disposable.dispose();
|
||||
value.dispose();
|
||||
value.element.remove();
|
||||
}
|
||||
|
||||
public setActivePanel(panel: IDockviewPanel): void {
|
||||
this.tabs.forEach((tab) => {
|
||||
const isActivePanel = panel.id === tab.value.panel.id;
|
||||
tab.value.setActive(isActivePanel);
|
||||
});
|
||||
}
|
||||
|
||||
public openPanel(
|
||||
panel: IDockviewPanel,
|
||||
index: number = this.tabs.length
|
||||
): void {
|
||||
if (this.tabs.find((tab) => tab.value.panel.id === panel.id)) {
|
||||
return;
|
||||
}
|
||||
const tab = new Tab(panel, this.accessor, this.group);
|
||||
if (!panel.view?.tab) {
|
||||
throw new Error('invalid header component');
|
||||
}
|
||||
tab.setContent(panel.view.tab);
|
||||
|
||||
const disposable = new CompositeDisposable(
|
||||
tab.onDragStart((event) => {
|
||||
this._onTabDragStart.fire({ nativeEvent: event, panel });
|
||||
}),
|
||||
tab.onChanged((event) => {
|
||||
const isFloatingGroupsEnabled =
|
||||
!this.accessor.options.disableFloatingGroups;
|
||||
|
||||
const isFloatingWithOnePanel =
|
||||
this.group.api.location.type === 'floating' &&
|
||||
this.size === 1;
|
||||
|
||||
if (
|
||||
isFloatingGroupsEnabled &&
|
||||
!isFloatingWithOnePanel &&
|
||||
event.shiftKey
|
||||
) {
|
||||
event.preventDefault();
|
||||
|
||||
const panel = this.accessor.getGroupPanel(tab.panel.id);
|
||||
|
||||
const { top, left } = tab.element.getBoundingClientRect();
|
||||
const { top: rootTop, left: rootLeft } =
|
||||
this.accessor.element.getBoundingClientRect();
|
||||
|
||||
this.accessor.addFloatingGroup(
|
||||
panel as DockviewPanel,
|
||||
{
|
||||
x: left - rootLeft,
|
||||
y: top - rootTop,
|
||||
},
|
||||
{ inDragMode: true }
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const isLeftClick = event.button === 0;
|
||||
|
||||
if (!isLeftClick || event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.group.activePanel !== panel) {
|
||||
this.group.model.openPanel(panel);
|
||||
}
|
||||
}),
|
||||
tab.onDrop((event) => {
|
||||
this._onDrop.fire({
|
||||
event: event.nativeEvent,
|
||||
index: this.tabs.findIndex((x) => x.value === tab),
|
||||
});
|
||||
}),
|
||||
tab.onWillShowOverlay((event) => {
|
||||
this._onWillShowOverlay.fire(
|
||||
new WillShowOverlayLocationEvent(event, {
|
||||
kind: 'tab',
|
||||
panel: this.group.activePanel,
|
||||
api: this.accessor.api,
|
||||
group: this.group,
|
||||
getData: getPanelData,
|
||||
})
|
||||
);
|
||||
})
|
||||
);
|
||||
|
||||
const value: IValueDisposable<Tab> = { value: tab, disposable };
|
||||
|
||||
this.addTab(value, index);
|
||||
}
|
||||
|
||||
public closePanel(panel: IDockviewPanel): void {
|
||||
this.delete(panel.id);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
super.dispose();
|
||||
|
||||
for (const { value, disposable } of this.tabs) {
|
||||
disposable.dispose();
|
||||
value.dispose();
|
||||
}
|
||||
|
||||
this.tabs = [];
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import { last } from '../../../array';
|
||||
import { getPanelData } from '../../../dnd/dataTransfer';
|
||||
import {
|
||||
Droptarget,
|
||||
@ -9,7 +10,6 @@ import { DockviewComponent } from '../../dockviewComponent';
|
||||
import { addDisposableListener, Emitter, Event } from '../../../events';
|
||||
import { CompositeDisposable } from '../../../lifecycle';
|
||||
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import { DockviewGroupPanelModel } from '../../dockviewGroupPanelModel';
|
||||
|
||||
export class VoidContainer extends CompositeDisposable {
|
||||
private readonly _element: HTMLElement;
|
||||
@ -35,13 +35,14 @@ export class VoidContainer extends CompositeDisposable {
|
||||
|
||||
this._element = document.createElement('div');
|
||||
|
||||
this._element.className = 'dv-void-container';
|
||||
this._element.className = 'void-container';
|
||||
this._element.tabIndex = 0;
|
||||
this._element.draggable = true;
|
||||
|
||||
this.addDisposables(
|
||||
this._onDrop,
|
||||
this._onDragStart,
|
||||
addDisposableListener(this._element, 'pointerdown', () => {
|
||||
addDisposableListener(this._element, 'click', () => {
|
||||
this.accessor.doSetGroupActive(this.group);
|
||||
})
|
||||
);
|
||||
@ -54,7 +55,16 @@ export class VoidContainer extends CompositeDisposable {
|
||||
const data = getPanelData();
|
||||
|
||||
if (data && this.accessor.id === data.viewId) {
|
||||
return true;
|
||||
if (
|
||||
data.panelId === null &&
|
||||
data.groupId === this.group.id
|
||||
) {
|
||||
// don't allow group move to drop on self
|
||||
return false;
|
||||
}
|
||||
|
||||
// don't show the overlay if the tab being dragged is the last panel of this group
|
||||
return last(this.group.panels)?.id !== data.panelId;
|
||||
}
|
||||
|
||||
return group.model.canDisplayOverlay(
|
||||
@ -63,7 +73,6 @@ export class VoidContainer extends CompositeDisposable {
|
||||
'header_space'
|
||||
);
|
||||
},
|
||||
getOverrideTarget: () => group.model.dropTargetContainer?.model,
|
||||
});
|
||||
|
||||
this.onWillShowOverlay = this.dropTraget.onWillShowOverlay;
|
||||
|
||||
@ -1,4 +1,42 @@
|
||||
.dv-watermark {
|
||||
.watermark {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
&.has-actions {
|
||||
.watermark-title {
|
||||
.actions-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.watermark-title {
|
||||
height: 35px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.watermark-content {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.actions-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0px 8px;
|
||||
|
||||
.close-action {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
color: var(--dv-activegroup-hiddenpanel-tab-color);
|
||||
|
||||
&:hover {
|
||||
border-radius: 2px;
|
||||
background-color: var(--dv-icon-hover-background-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,13 +2,21 @@ import {
|
||||
IWatermarkRenderer,
|
||||
WatermarkRendererInitParameters,
|
||||
} from '../../types';
|
||||
import { addDisposableListener } from '../../../events';
|
||||
import { toggleClass } from '../../../dom';
|
||||
import { CompositeDisposable } from '../../../lifecycle';
|
||||
import { DockviewGroupPanel } from '../../dockviewGroupPanel';
|
||||
import { PanelUpdateEvent } from '../../../panel/types';
|
||||
import { createCloseButton } from '../../../svg';
|
||||
import { DockviewApi } from '../../../api/component.api';
|
||||
|
||||
export class Watermark
|
||||
extends CompositeDisposable
|
||||
implements IWatermarkRenderer
|
||||
{
|
||||
private readonly _element: HTMLElement;
|
||||
private _element: HTMLElement;
|
||||
private _group: DockviewGroupPanel | undefined;
|
||||
private _api: DockviewApi | undefined;
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
@ -17,10 +25,70 @@ export class Watermark
|
||||
constructor() {
|
||||
super();
|
||||
this._element = document.createElement('div');
|
||||
this._element.className = 'dv-watermark';
|
||||
this._element.className = 'watermark';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'watermark-title';
|
||||
|
||||
const emptySpace = document.createElement('span');
|
||||
emptySpace.style.flexGrow = '1';
|
||||
|
||||
const content = document.createElement('div');
|
||||
content.className = 'watermark-content';
|
||||
|
||||
this._element.appendChild(title);
|
||||
this._element.appendChild(content);
|
||||
|
||||
const actionsContainer = document.createElement('div');
|
||||
actionsContainer.className = 'actions-container';
|
||||
|
||||
const closeAnchor = document.createElement('div');
|
||||
closeAnchor.className = 'close-action';
|
||||
closeAnchor.appendChild(createCloseButton());
|
||||
|
||||
actionsContainer.appendChild(closeAnchor);
|
||||
|
||||
title.appendChild(emptySpace);
|
||||
title.appendChild(actionsContainer);
|
||||
|
||||
this.addDisposables(
|
||||
addDisposableListener(closeAnchor, 'click', (ev) => {
|
||||
ev.preventDefault();
|
||||
if (this._group) {
|
||||
this._api?.removeGroup(this._group);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
update(_event: PanelUpdateEvent): void {
|
||||
// noop
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
// noop
|
||||
}
|
||||
|
||||
layout(_width: number, _height: number): void {
|
||||
// noop
|
||||
}
|
||||
|
||||
init(_params: WatermarkRendererInitParameters): void {
|
||||
// noop
|
||||
this._api = _params.containerApi;
|
||||
this.render();
|
||||
}
|
||||
|
||||
updateParentGroup(group: DockviewGroupPanel, _visible: boolean): void {
|
||||
this._group = group;
|
||||
this.render();
|
||||
}
|
||||
|
||||
dispose(): void {
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
private render(): void {
|
||||
const isOneGroup = !!(this._api && this._api.size <= 1);
|
||||
toggleClass(this.element, 'has-actions', isOneGroup);
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,10 +57,6 @@ export class DefaultDockviewDeserialzier implements IPanelDeserializer {
|
||||
view,
|
||||
{
|
||||
renderer: panelData.renderer,
|
||||
minimumWidth: panelData.minimumWidth,
|
||||
minimumHeight: panelData.minimumHeight,
|
||||
maximumWidth: panelData.maximumWidth,
|
||||
maximumHeight: panelData.maximumHeight,
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
@ -14,42 +14,64 @@
|
||||
.dv-overlay-render-container {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.dv-groupview {
|
||||
&.dv-active-group {
|
||||
> .dv-tabs-and-actions-container {
|
||||
.dv-tabs-container > .dv-tab {
|
||||
&.dv-active-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-visiblepanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-visiblepanel-tab-color);
|
||||
.split-view-container {
|
||||
&.horizontal {
|
||||
> .view-container > .view {
|
||||
&:not(:last-child) {
|
||||
border-right: var(--dv-group-gap-size) solid transparent;
|
||||
}
|
||||
&.dv-inactive-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-hiddenpanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-hiddenpanel-tab-color);
|
||||
|
||||
&:not(:first-child) {
|
||||
border-left: var(--dv-group-gap-size) solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.vertical {
|
||||
> .view-container > .view {
|
||||
&:not(:last-child) {
|
||||
border-bottom: var(--dv-group-gap-size) solid transparent;
|
||||
}
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: var(--dv-group-gap-size) solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dv-inactive-group {
|
||||
> .dv-tabs-and-actions-container {
|
||||
.dv-tabs-container > .dv-tab {
|
||||
&.dv-active-tab {
|
||||
background-color: var(
|
||||
--dv-inactivegroup-visiblepanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-inactivegroup-visiblepanel-tab-color);
|
||||
}
|
||||
&.dv-inactive-tab {
|
||||
background-color: var(
|
||||
--dv-inactivegroup-hiddenpanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-inactivegroup-hiddenpanel-tab-color);
|
||||
}
|
||||
}
|
||||
|
||||
.groupview {
|
||||
&.active-group {
|
||||
> .tabs-and-actions-container > .tabs-container > .tab {
|
||||
&.active-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-visiblepanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-visiblepanel-tab-color);
|
||||
}
|
||||
&.inactive-tab {
|
||||
background-color: var(
|
||||
--dv-activegroup-hiddenpanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-activegroup-hiddenpanel-tab-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.inactive-group {
|
||||
> .tabs-and-actions-container > .tabs-container > .tab {
|
||||
&.active-tab {
|
||||
background-color: var(
|
||||
--dv-inactivegroup-visiblepanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-inactivegroup-visiblepanel-tab-color);
|
||||
}
|
||||
&.inactive-tab {
|
||||
background-color: var(
|
||||
--dv-inactivegroup-hiddenpanel-tab-background-color
|
||||
);
|
||||
color: var(--dv-inactivegroup-hiddenpanel-tab-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -59,7 +81,7 @@
|
||||
* when a tab is dragged we lose the above stylings because they are conditional on parent elements
|
||||
* therefore we also set some stylings for the dragging event
|
||||
**/
|
||||
.dv-tab {
|
||||
.tab {
|
||||
&.dv-tab-dragging {
|
||||
background-color: var(
|
||||
--dv-activegroup-visiblepanel-tab-background-color
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,17 @@
|
||||
import { Overlay } from '../overlay/overlay';
|
||||
import { Overlay } from '../dnd/overlay';
|
||||
import { CompositeDisposable } from '../lifecycle';
|
||||
import { AnchoredBox } from '../types';
|
||||
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
|
||||
|
||||
export interface IDockviewFloatingGroupPanel {
|
||||
readonly group: IDockviewGroupPanel;
|
||||
position(bounds: Partial<AnchoredBox>): void;
|
||||
position(
|
||||
bounds: Partial<{
|
||||
top: number;
|
||||
left: number;
|
||||
height: number;
|
||||
width: number;
|
||||
}>
|
||||
): void;
|
||||
}
|
||||
|
||||
export class DockviewFloatingGroupPanel
|
||||
@ -14,10 +20,18 @@ export class DockviewFloatingGroupPanel
|
||||
{
|
||||
constructor(readonly group: DockviewGroupPanel, readonly overlay: Overlay) {
|
||||
super();
|
||||
|
||||
this.addDisposables(overlay);
|
||||
}
|
||||
|
||||
position(bounds: Partial<AnchoredBox>): void {
|
||||
position(
|
||||
bounds: Partial<{
|
||||
top: number;
|
||||
left: number;
|
||||
height: number;
|
||||
width: number;
|
||||
}>
|
||||
): void {
|
||||
this.overlay.setBounds(bounds);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.dv-groupview {
|
||||
.groupview {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@ -9,7 +9,13 @@
|
||||
outline: none;
|
||||
}
|
||||
|
||||
> .dv-content-container {
|
||||
&.empty {
|
||||
> .tabs-and-actions-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .content-container {
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
outline: none;
|
||||
|
||||
@ -34,38 +34,6 @@ export class DockviewGroupPanel
|
||||
{
|
||||
private readonly _model: DockviewGroupPanelModel;
|
||||
|
||||
override get minimumWidth(): number {
|
||||
const activePanelMinimumWidth = this.activePanel?.minimumWidth;
|
||||
if (typeof activePanelMinimumWidth === 'number') {
|
||||
return activePanelMinimumWidth;
|
||||
}
|
||||
return super.__minimumWidth();
|
||||
}
|
||||
|
||||
override get minimumHeight(): number {
|
||||
const activePanelMinimumHeight = this.activePanel?.minimumHeight;
|
||||
if (typeof activePanelMinimumHeight === 'number') {
|
||||
return activePanelMinimumHeight;
|
||||
}
|
||||
return super.__minimumHeight();
|
||||
}
|
||||
|
||||
override get maximumWidth(): number {
|
||||
const activePanelMaximumWidth = this.activePanel?.maximumWidth;
|
||||
if (typeof activePanelMaximumWidth === 'number') {
|
||||
return activePanelMaximumWidth;
|
||||
}
|
||||
return super.__maximumWidth();
|
||||
}
|
||||
|
||||
override get maximumHeight(): number {
|
||||
const activePanelMaximumHeight = this.activePanel?.maximumHeight;
|
||||
if (typeof activePanelMaximumHeight === 'number') {
|
||||
return activePanelMaximumHeight;
|
||||
}
|
||||
return super.__maximumHeight();
|
||||
}
|
||||
|
||||
get panels(): IDockviewPanel[] {
|
||||
return this._model.panels;
|
||||
}
|
||||
@ -103,14 +71,8 @@ export class DockviewGroupPanel
|
||||
id,
|
||||
'groupview_default',
|
||||
{
|
||||
minimumHeight:
|
||||
options.constraints?.minimumHeight ??
|
||||
MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
|
||||
minimumWidth:
|
||||
options.constraints?.maximumHeight ??
|
||||
MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
|
||||
maximumHeight: options.constraints?.maximumHeight,
|
||||
maximumWidth: options.constraints?.maximumWidth,
|
||||
minimumHeight: MINIMUM_DOCKVIEW_GROUP_PANEL_HEIGHT,
|
||||
minimumWidth: MINIMUM_DOCKVIEW_GROUP_PANEL_WIDTH,
|
||||
},
|
||||
new DockviewGroupPanelApiImpl(id, accessor)
|
||||
);
|
||||
@ -124,12 +86,6 @@ export class DockviewGroupPanel
|
||||
options,
|
||||
this
|
||||
);
|
||||
|
||||
this.addDisposables(
|
||||
this.model.onDidActivePanelChange((event) => {
|
||||
this.api._onDidActivePanelChange.fire(event);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
override focus(): void {
|
||||
|
||||
@ -36,10 +36,8 @@ import {
|
||||
DockviewUnhandledDragOverEvent,
|
||||
IHeaderActionsRenderer,
|
||||
} from './options';
|
||||
import { OverlayRenderContainer } from '../overlay/overlayRenderContainer';
|
||||
import { OverlayRenderContainer } from '../overlayRenderContainer';
|
||||
import { TitleEvent } from '../api/dockviewPanelApi';
|
||||
import { Contraints } from '../gridview/gridviewPanel';
|
||||
import { DropTargetAnchorContainer } from '../dnd/dropTargetAnchorContainer';
|
||||
|
||||
interface GroupMoveEvent {
|
||||
groupId: string;
|
||||
@ -52,9 +50,6 @@ interface CoreGroupOptions {
|
||||
locked?: DockviewGroupPanelLocked;
|
||||
hideHeader?: boolean;
|
||||
skipSetActive?: boolean;
|
||||
constraints?: Partial<Contraints>;
|
||||
initialWidth?: number;
|
||||
initialHeight?: number;
|
||||
}
|
||||
|
||||
export interface GroupOptions extends CoreGroupOptions {
|
||||
@ -197,7 +192,7 @@ export interface IDockviewGroupPanelModel extends IPanel {
|
||||
export type DockviewGroupLocation =
|
||||
| { type: 'grid' }
|
||||
| { type: 'floating' }
|
||||
| { type: 'popout'; getWindow: () => Window; popoutUrl?: string };
|
||||
| { type: 'popout'; getWindow: () => Window };
|
||||
|
||||
export class WillShowOverlayLocationEvent implements IDockviewEvent {
|
||||
get kind(): DockviewGroupDropLocation {
|
||||
@ -265,9 +260,6 @@ export class DockviewGroupPanelModel
|
||||
private _location: DockviewGroupLocation = { type: 'grid' };
|
||||
|
||||
private mostRecentlyUsed: IDockviewPanel[] = [];
|
||||
private _overwriteRenderContainer: OverlayRenderContainer | null = null;
|
||||
private _overwriteDropTargetContainer: DropTargetAnchorContainer | null =
|
||||
null;
|
||||
|
||||
private readonly _onDidChange = new Emitter<IViewSize | undefined>();
|
||||
readonly onDidChange: Event<IViewSize | undefined> =
|
||||
@ -276,7 +268,7 @@ export class DockviewGroupPanelModel
|
||||
private _width = 0;
|
||||
private _height = 0;
|
||||
|
||||
private readonly _panels: IDockviewPanel[] = [];
|
||||
private _panels: IDockviewPanel[] = [];
|
||||
private readonly _panelDisposables = new Map<string, IDisposable>();
|
||||
|
||||
private readonly _onMove = new Emitter<GroupMoveEvent>();
|
||||
@ -330,7 +322,7 @@ export class DockviewGroupPanelModel
|
||||
private readonly _api: DockviewApi;
|
||||
|
||||
get element(): HTMLElement {
|
||||
throw new Error('dockview: not supported');
|
||||
throw new Error('not supported');
|
||||
}
|
||||
|
||||
get activePanel(): IDockviewPanel | undefined {
|
||||
@ -346,7 +338,7 @@ export class DockviewGroupPanelModel
|
||||
|
||||
toggleClass(
|
||||
this.container,
|
||||
'dv-locked-groupview',
|
||||
'locked-groupview',
|
||||
value === 'no-drop-target' || value
|
||||
);
|
||||
}
|
||||
@ -433,14 +425,14 @@ export class DockviewGroupPanelModel
|
||||
|
||||
constructor(
|
||||
private readonly container: HTMLElement,
|
||||
private readonly accessor: DockviewComponent,
|
||||
private accessor: DockviewComponent,
|
||||
public id: string,
|
||||
private readonly options: GroupOptions,
|
||||
private readonly groupPanel: DockviewGroupPanel
|
||||
) {
|
||||
super();
|
||||
|
||||
toggleClass(this.container, 'dv-groupview', true);
|
||||
toggleClass(this.container, 'groupview', true);
|
||||
|
||||
this._api = new DockviewApi(this.accessor);
|
||||
|
||||
@ -509,9 +501,7 @@ export class DockviewGroupPanelModel
|
||||
this._onDidAddPanel,
|
||||
this._onDidRemovePanel,
|
||||
this._onDidActivePanelChange,
|
||||
this._onUnhandledDragOverEvent,
|
||||
this._onDidPanelTitleChange,
|
||||
this._onDidPanelParametersChange
|
||||
this._onUnhandledDragOverEvent
|
||||
);
|
||||
}
|
||||
|
||||
@ -519,6 +509,8 @@ export class DockviewGroupPanelModel
|
||||
this.contentContainer.element.focus();
|
||||
}
|
||||
|
||||
private _overwriteRenderContainer: OverlayRenderContainer | null = null;
|
||||
|
||||
set renderContainer(value: OverlayRenderContainer | null) {
|
||||
this.panels.forEach((panel) => {
|
||||
this.renderContainer.detatch(panel);
|
||||
@ -538,17 +530,6 @@ export class DockviewGroupPanelModel
|
||||
);
|
||||
}
|
||||
|
||||
set dropTargetContainer(value: DropTargetAnchorContainer | null) {
|
||||
this._overwriteDropTargetContainer = value;
|
||||
}
|
||||
|
||||
get dropTargetContainer(): DropTargetAnchorContainer | null {
|
||||
return (
|
||||
this._overwriteDropTargetContainer ??
|
||||
this.accessor.rootDropTargetContainer
|
||||
);
|
||||
}
|
||||
|
||||
initialize(): void {
|
||||
if (this.options.panels) {
|
||||
this.options.panels.forEach((panel) => {
|
||||
@ -803,15 +784,7 @@ export class DockviewGroupPanelModel
|
||||
}
|
||||
|
||||
private doClose(panel: IDockviewPanel): void {
|
||||
const isLast =
|
||||
this.panels.length === 1 && this.accessor.groups.length === 1;
|
||||
|
||||
this.accessor.removePanel(
|
||||
panel,
|
||||
isLast && this.accessor.options.noPanelsOverlay === 'emptyGroup'
|
||||
? { removeEmptyGroup: false }
|
||||
: undefined
|
||||
);
|
||||
this.accessor.removePanel(panel);
|
||||
}
|
||||
|
||||
public isPanelActive(panel: IDockviewPanel): boolean {
|
||||
@ -829,8 +802,8 @@ export class DockviewGroupPanelModel
|
||||
|
||||
this._isGroupActive = isGroupActive;
|
||||
|
||||
toggleClass(this.container, 'dv-active-group', isGroupActive);
|
||||
toggleClass(this.container, 'dv-inactive-group', !isGroupActive);
|
||||
toggleClass(this.container, 'active-group', isGroupActive);
|
||||
toggleClass(this.container, 'inactive-group', !isGroupActive);
|
||||
|
||||
this.tabsContainer.setActive(this.isActive);
|
||||
|
||||
@ -979,6 +952,8 @@ export class DockviewGroupPanelModel
|
||||
}
|
||||
|
||||
private updateContainer(): void {
|
||||
toggleClass(this.container, 'empty', this.isEmpty);
|
||||
|
||||
this.panels.forEach((panel) => panel.runEvents());
|
||||
|
||||
if (this.isEmpty && !this.watermark) {
|
||||
@ -989,18 +964,22 @@ export class DockviewGroupPanelModel
|
||||
});
|
||||
this.watermark = watermark;
|
||||
|
||||
addDisposableListener(this.watermark.element, 'pointerdown', () => {
|
||||
addDisposableListener(this.watermark.element, 'click', () => {
|
||||
if (!this.isActive) {
|
||||
this.accessor.doSetGroupActive(this.groupPanel);
|
||||
}
|
||||
});
|
||||
|
||||
this.tabsContainer.hide();
|
||||
this.contentContainer.element.appendChild(this.watermark.element);
|
||||
|
||||
this.watermark.updateParentGroup(this.groupPanel, true);
|
||||
}
|
||||
if (!this.isEmpty && this.watermark) {
|
||||
this.watermark.element.remove();
|
||||
this.watermark.dispose?.();
|
||||
this.watermark = undefined;
|
||||
this.tabsContainer.show();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1014,7 +993,7 @@ export class DockviewGroupPanelModel
|
||||
target,
|
||||
position,
|
||||
getPanelData,
|
||||
this.accessor.getPanel(this.id)
|
||||
this.accessor.getPanel(this.id)!
|
||||
);
|
||||
|
||||
this._onUnhandledDragOverEvent.fire(firedEvent);
|
||||
@ -1063,29 +1042,6 @@ export class DockviewGroupPanelModel
|
||||
const data = getPanelData();
|
||||
|
||||
if (data && data.viewId === this.accessor.id) {
|
||||
if (type === 'content') {
|
||||
if (data.groupId === this.id) {
|
||||
// don't allow to drop on self for center position
|
||||
|
||||
if (position === 'center') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (data.panelId === null) {
|
||||
// don't allow group move to drop anywhere on self
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (type === 'header') {
|
||||
if (data.groupId === this.id) {
|
||||
if (data.panelId === null) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (data.panelId === null) {
|
||||
// this is a group move dnd event
|
||||
const { groupId } = data;
|
||||
|
||||
@ -9,9 +9,8 @@ import { CompositeDisposable, IDisposable } from '../lifecycle';
|
||||
import { IPanel, PanelUpdateEvent, Parameters } from '../panel/types';
|
||||
import { IDockviewPanelModel } from './dockviewPanelModel';
|
||||
import { DockviewComponent } from './dockviewComponent';
|
||||
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
|
||||
import { DockviewPanelRenderer } from '../overlayRenderContainer';
|
||||
import { WillFocusEvent } from '../api/panelApi';
|
||||
import { Contraints } from '../gridview/gridviewPanel';
|
||||
|
||||
export interface IDockviewPanel extends IDisposable, IPanel {
|
||||
readonly view: IDockviewPanelModel;
|
||||
@ -19,10 +18,6 @@ export interface IDockviewPanel extends IDisposable, IPanel {
|
||||
readonly api: DockviewPanelApi;
|
||||
readonly title: string | undefined;
|
||||
readonly params: Parameters | undefined;
|
||||
readonly minimumWidth?: number;
|
||||
readonly minimumHeight?: number;
|
||||
readonly maximumWidth?: number;
|
||||
readonly maximumHeight?: number;
|
||||
updateParentGroup(
|
||||
group: DockviewGroupPanel,
|
||||
options?: { skipSetActive?: boolean }
|
||||
@ -45,11 +40,6 @@ export class DockviewPanel
|
||||
private _title: string | undefined;
|
||||
private _renderer: DockviewPanelRenderer | undefined;
|
||||
|
||||
private readonly _minimumWidth: number | undefined;
|
||||
private readonly _minimumHeight: number | undefined;
|
||||
private readonly _maximumWidth: number | undefined;
|
||||
private readonly _maximumHeight: number | undefined;
|
||||
|
||||
get params(): Parameters | undefined {
|
||||
return this._params;
|
||||
}
|
||||
@ -66,22 +56,6 @@ export class DockviewPanel
|
||||
return this._renderer ?? this.accessor.renderer;
|
||||
}
|
||||
|
||||
get minimumWidth(): number | undefined {
|
||||
return this._minimumWidth;
|
||||
}
|
||||
|
||||
get minimumHeight(): number | undefined {
|
||||
return this._minimumHeight;
|
||||
}
|
||||
|
||||
get maximumWidth(): number | undefined {
|
||||
return this._maximumWidth;
|
||||
}
|
||||
|
||||
get maximumHeight(): number | undefined {
|
||||
return this._maximumHeight;
|
||||
}
|
||||
|
||||
constructor(
|
||||
public readonly id: string,
|
||||
component: string,
|
||||
@ -90,15 +64,11 @@ export class DockviewPanel
|
||||
private readonly containerApi: DockviewApi,
|
||||
group: DockviewGroupPanel,
|
||||
readonly view: IDockviewPanelModel,
|
||||
options: { renderer?: DockviewPanelRenderer } & Partial<Contraints>
|
||||
options: { renderer?: DockviewPanelRenderer }
|
||||
) {
|
||||
super();
|
||||
this._renderer = options.renderer;
|
||||
this._group = group;
|
||||
this._minimumWidth = options.minimumWidth;
|
||||
this._minimumHeight = options.minimumHeight;
|
||||
this._maximumWidth = options.maximumWidth;
|
||||
this._maximumHeight = options.maximumHeight;
|
||||
|
||||
this.api = new DockviewPanelApiImpl(
|
||||
this,
|
||||
@ -117,7 +87,7 @@ export class DockviewPanel
|
||||
// you are actually just resizing the panels parent which is the group
|
||||
this.group.api.setSize(event);
|
||||
}),
|
||||
this.api.onDidRendererChange(() => {
|
||||
this.api.onDidRendererChange((event) => {
|
||||
this.group.model.rerender(this);
|
||||
})
|
||||
);
|
||||
@ -159,10 +129,6 @@ export class DockviewPanel
|
||||
: undefined,
|
||||
title: this.title,
|
||||
renderer: this._renderer,
|
||||
minimumHeight: this._minimumHeight,
|
||||
maximumHeight: this._maximumHeight,
|
||||
minimumWidth: this._minimumWidth,
|
||||
maximumWidth: this._maximumWidth,
|
||||
};
|
||||
}
|
||||
|
||||
@ -171,6 +137,13 @@ export class DockviewPanel
|
||||
|
||||
if (didTitleChange) {
|
||||
this._title = title;
|
||||
|
||||
this.view.update({
|
||||
params: {
|
||||
params: this._params,
|
||||
title: this.title,
|
||||
},
|
||||
});
|
||||
this.api._onDidTitleChange.fire({ title });
|
||||
}
|
||||
}
|
||||
@ -205,7 +178,10 @@ export class DockviewPanel
|
||||
|
||||
// update the view with the updated props
|
||||
this.view.update({
|
||||
params: this._params,
|
||||
params: {
|
||||
params: this._params,
|
||||
title: this.title,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -4,29 +4,26 @@ import {
|
||||
IContentRenderer,
|
||||
ITabRenderer,
|
||||
} from './types';
|
||||
import { DockviewGroupPanel } from './dockviewGroupPanel';
|
||||
import { IDisposable } from '../lifecycle';
|
||||
import { IDockviewComponent } from './dockviewComponent';
|
||||
import { PanelUpdateEvent } from '../panel/types';
|
||||
import { TabLocation } from './framework';
|
||||
|
||||
export interface IDockviewPanelModel extends IDisposable {
|
||||
readonly contentComponent: string;
|
||||
readonly tabComponent?: string;
|
||||
readonly content: IContentRenderer;
|
||||
readonly tab: ITabRenderer;
|
||||
readonly tab?: ITabRenderer;
|
||||
update(event: PanelUpdateEvent): void;
|
||||
layout(width: number, height: number): void;
|
||||
init(params: GroupPanelPartInitParameters): void;
|
||||
createTabRenderer(tabLocation: TabLocation): ITabRenderer;
|
||||
updateParentGroup(group: DockviewGroupPanel, isPanelVisible: boolean): void;
|
||||
}
|
||||
|
||||
export class DockviewPanelModel implements IDockviewPanelModel {
|
||||
private readonly _content: IContentRenderer;
|
||||
private readonly _tab: ITabRenderer;
|
||||
|
||||
private _params: GroupPanelPartInitParameters | undefined;
|
||||
private _updateEvent: PanelUpdateEvent | undefined;
|
||||
|
||||
get content(): IContentRenderer {
|
||||
return this._content;
|
||||
}
|
||||
@ -45,23 +42,16 @@ export class DockviewPanelModel implements IDockviewPanelModel {
|
||||
this._tab = this.createTabComponent(this.id, tabComponent);
|
||||
}
|
||||
|
||||
createTabRenderer(tabLocation: TabLocation): ITabRenderer {
|
||||
const cmp = this.createTabComponent(this.id, this.tabComponent);
|
||||
if (this._params) {
|
||||
cmp.init({ ...this._params, tabLocation });
|
||||
}
|
||||
if (this._updateEvent) {
|
||||
cmp.update?.(this._updateEvent);
|
||||
}
|
||||
|
||||
return cmp;
|
||||
init(params: GroupPanelPartInitParameters): void {
|
||||
this.content.init(params);
|
||||
this.tab.init(params);
|
||||
}
|
||||
|
||||
init(params: GroupPanelPartInitParameters): void {
|
||||
this._params = params;
|
||||
|
||||
this.content.init(params);
|
||||
this.tab.init({ ...params, tabLocation: 'header' });
|
||||
updateParentGroup(
|
||||
_group: DockviewGroupPanel,
|
||||
_isPanelVisible: boolean
|
||||
): void {
|
||||
// noop
|
||||
}
|
||||
|
||||
layout(width: number, height: number): void {
|
||||
@ -69,8 +59,6 @@ export class DockviewPanelModel implements IDockviewPanelModel {
|
||||
}
|
||||
|
||||
update(event: PanelUpdateEvent): void {
|
||||
this._updateEvent = event;
|
||||
|
||||
this.content.update?.(event);
|
||||
this.tab.update?.(event);
|
||||
}
|
||||
|
||||
@ -11,11 +11,9 @@ export interface IGroupPanelBaseProps<T extends { [index: string]: any } = any>
|
||||
containerApi: DockviewApi;
|
||||
}
|
||||
|
||||
export type TabLocation = 'header' | 'headerOverflow';
|
||||
|
||||
export type IDockviewPanelHeaderProps<
|
||||
T extends { [index: string]: any } = any
|
||||
> = IGroupPanelBaseProps<T> & { tabLocation: TabLocation };
|
||||
> = IGroupPanelBaseProps<T>;
|
||||
|
||||
export type IDockviewPanelProps<T extends { [index: string]: any } = any> =
|
||||
IGroupPanelBaseProps<T>;
|
||||
|
||||
@ -12,12 +12,8 @@ import {
|
||||
GroupOptions,
|
||||
} from './dockviewGroupPanelModel';
|
||||
import { IDockviewPanel } from './dockviewPanel';
|
||||
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
|
||||
import { DockviewPanelRenderer } from '../overlayRenderContainer';
|
||||
import { IGroupHeaderProps } from './framework';
|
||||
import { FloatingGroupOptions } from './dockviewComponent';
|
||||
import { Contraints } from '../gridview/gridviewPanel';
|
||||
import { AcceptableEvent, IAcceptableEvent } from '../events';
|
||||
import { DockviewTheme } from './theme';
|
||||
|
||||
export interface IHeaderActionsRenderer extends IDisposable {
|
||||
readonly element: HTMLElement;
|
||||
@ -36,10 +32,6 @@ export interface ViewFactoryData {
|
||||
}
|
||||
|
||||
export interface DockviewOptions {
|
||||
/**
|
||||
* Disable the auto-resizing which is controlled through a `ResizeObserver`.
|
||||
* Call `.layout(width, height)` to manually resize the container.
|
||||
*/
|
||||
disableAutoResizing?: boolean;
|
||||
hideBorders?: boolean;
|
||||
singleTabMode?: 'fullwidth' | 'default';
|
||||
@ -53,55 +45,43 @@ export interface DockviewOptions {
|
||||
popoutUrl?: string;
|
||||
defaultRenderer?: DockviewPanelRenderer;
|
||||
debug?: boolean;
|
||||
// #start dnd
|
||||
dndEdges?: false | DroptargetOverlayModel;
|
||||
/**
|
||||
* @deprecated use `dndEdges` instead. To be removed in a future version.
|
||||
* */
|
||||
rootOverlayModel?: DroptargetOverlayModel;
|
||||
disableDnd?: boolean;
|
||||
// #end dnd
|
||||
locked?: boolean;
|
||||
className?: string;
|
||||
/**
|
||||
* Define the behaviour of the dock when there are no panels to display. Defaults to `watermark`.
|
||||
*/
|
||||
noPanelsOverlay?: 'emptyGroup' | 'watermark';
|
||||
theme?: DockviewTheme;
|
||||
disableTabsOverflowList?: boolean;
|
||||
/**
|
||||
* Select `native` to use built-in scrollbar behaviours and `custom` to use an internal implementation
|
||||
* that allows for improved scrollbar overlay UX.
|
||||
*
|
||||
* This is only applied to the tab header section. Defaults to `custom`.
|
||||
*/
|
||||
scrollbars?: 'native' | 'custom';
|
||||
disableDnd?: boolean;
|
||||
}
|
||||
|
||||
export interface DockviewDndOverlayEvent extends IAcceptableEvent {
|
||||
export interface DockviewDndOverlayEvent {
|
||||
nativeEvent: DragEvent;
|
||||
target: DockviewGroupDropLocation;
|
||||
position: Position;
|
||||
group?: DockviewGroupPanel;
|
||||
getData: () => PanelTransfer | undefined;
|
||||
//
|
||||
isAccepted: boolean;
|
||||
accept(): void;
|
||||
}
|
||||
|
||||
export class DockviewUnhandledDragOverEvent
|
||||
extends AcceptableEvent
|
||||
implements DockviewDndOverlayEvent
|
||||
{
|
||||
export class DockviewUnhandledDragOverEvent implements DockviewDndOverlayEvent {
|
||||
private _isAccepted = false;
|
||||
|
||||
get isAccepted(): boolean {
|
||||
return this._isAccepted;
|
||||
}
|
||||
|
||||
constructor(
|
||||
readonly nativeEvent: DragEvent,
|
||||
readonly target: DockviewGroupDropLocation,
|
||||
readonly position: Position,
|
||||
readonly getData: () => PanelTransfer | undefined,
|
||||
readonly group?: DockviewGroupPanel
|
||||
) {
|
||||
super();
|
||||
) {}
|
||||
|
||||
accept(): void {
|
||||
this._isAccepted = true;
|
||||
}
|
||||
}
|
||||
|
||||
export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
|
||||
export const PROPERTY_KEYS: (keyof DockviewOptions)[] = (() => {
|
||||
/**
|
||||
* by readong the keys from an empty value object TypeScript will error
|
||||
* when we add or remove new properties to `DockviewOptions`
|
||||
@ -118,29 +98,13 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
|
||||
rootOverlayModel: undefined,
|
||||
locked: undefined,
|
||||
disableDnd: undefined,
|
||||
className: undefined,
|
||||
noPanelsOverlay: undefined,
|
||||
dndEdges: undefined,
|
||||
theme: undefined,
|
||||
disableTabsOverflowList: undefined,
|
||||
scrollbars: undefined,
|
||||
};
|
||||
|
||||
return Object.keys(properties) as (keyof DockviewOptions)[];
|
||||
})();
|
||||
|
||||
export interface CreateComponentOptions {
|
||||
/**
|
||||
* The unqiue identifer of the component
|
||||
*/
|
||||
id: string;
|
||||
/**
|
||||
* The component name, this should determine what is rendered.
|
||||
*/
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface DockviewFrameworkOptions {
|
||||
parentElement: HTMLElement;
|
||||
defaultTabComponent?: string;
|
||||
createRightHeaderActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
@ -151,10 +115,14 @@ export interface DockviewFrameworkOptions {
|
||||
createPrefixHeaderActionComponent?: (
|
||||
group: DockviewGroupPanel
|
||||
) => IHeaderActionsRenderer;
|
||||
createTabComponent?: (
|
||||
options: CreateComponentOptions
|
||||
) => ITabRenderer | undefined;
|
||||
createComponent: (options: CreateComponentOptions) => IContentRenderer;
|
||||
createTabComponent?: (options: {
|
||||
id: string;
|
||||
name: string;
|
||||
}) => ITabRenderer | undefined;
|
||||
createComponent: (options: {
|
||||
id: string;
|
||||
name: string;
|
||||
}) => IContentRenderer;
|
||||
createWatermarkComponent?: () => IWatermarkRenderer;
|
||||
}
|
||||
|
||||
@ -172,19 +140,11 @@ export interface PanelOptions<P extends object = Parameters> {
|
||||
type RelativePanel = {
|
||||
direction?: Direction;
|
||||
referencePanel: string | IDockviewPanel;
|
||||
/**
|
||||
* The index to place the panel within a group, only applicable if the placement is within an existing group
|
||||
*/
|
||||
index?: number;
|
||||
};
|
||||
|
||||
type RelativeGroup = {
|
||||
direction?: Direction;
|
||||
referenceGroup: string | DockviewGroupPanel;
|
||||
/**
|
||||
* The index to place the panel within a group, only applicable if the placement is within an existing group
|
||||
*/
|
||||
index?: number;
|
||||
};
|
||||
|
||||
type AbsolutePosition = {
|
||||
@ -215,12 +175,19 @@ export function isPanelOptionsWithGroup(
|
||||
}
|
||||
|
||||
type AddPanelFloatingGroupUnion = {
|
||||
floating: Partial<FloatingGroupOptions> | true;
|
||||
floating:
|
||||
| {
|
||||
height?: number;
|
||||
width?: number;
|
||||
x?: number;
|
||||
y?: number;
|
||||
}
|
||||
| true;
|
||||
position: never;
|
||||
};
|
||||
|
||||
type AddPanelPositionUnion = {
|
||||
floating: false;
|
||||
floating: false | never;
|
||||
position: AddPanelPositionOptions;
|
||||
};
|
||||
|
||||
@ -258,10 +225,7 @@ export type AddPanelOptions<P extends object = Parameters> = {
|
||||
* Defaults to `false` which forces newly added panels to become active.
|
||||
*/
|
||||
inactive?: boolean;
|
||||
initialWidth?: number;
|
||||
initialHeight?: number;
|
||||
} & Partial<AddPanelOptionsUnion> &
|
||||
Partial<Contraints>;
|
||||
} & Partial<AddPanelOptionsUnion>;
|
||||
|
||||
type AddGroupOptionsWithPanel = {
|
||||
referencePanel: string | IDockviewPanel;
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
import { CompositeDisposable } from '../lifecycle';
|
||||
import { DockviewComponent } from './dockviewComponent';
|
||||
|
||||
export class StrictEventsSequencing extends CompositeDisposable {
|
||||
constructor(private readonly accessor: DockviewComponent) {
|
||||
super();
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
private init(): void {
|
||||
const panels = new Set<string>();
|
||||
const groups = new Set<string>();
|
||||
|
||||
this.addDisposables(
|
||||
this.accessor.onDidAddPanel((panel) => {
|
||||
if (panels.has(panel.api.id)) {
|
||||
throw new Error(
|
||||
`dockview: Invalid event sequence. [onDidAddPanel] called for panel ${panel.api.id} but panel already exists`
|
||||
);
|
||||
} else {
|
||||
panels.add(panel.api.id);
|
||||
}
|
||||
}),
|
||||
this.accessor.onDidRemovePanel((panel) => {
|
||||
if (!panels.has(panel.api.id)) {
|
||||
throw new Error(
|
||||
`dockview: Invalid event sequence. [onDidRemovePanel] called for panel ${panel.api.id} but panel does not exists`
|
||||
);
|
||||
} else {
|
||||
panels.delete(panel.api.id);
|
||||
}
|
||||
}),
|
||||
this.accessor.onDidAddGroup((group) => {
|
||||
if (groups.has(group.api.id)) {
|
||||
throw new Error(
|
||||
`dockview: Invalid event sequence. [onDidAddGroup] called for group ${group.api.id} but group already exists`
|
||||
);
|
||||
} else {
|
||||
groups.add(group.api.id);
|
||||
}
|
||||
}),
|
||||
this.accessor.onDidRemoveGroup((group) => {
|
||||
if (!groups.has(group.api.id)) {
|
||||
throw new Error(
|
||||
`dockview: Invalid event sequence. [onDidRemoveGroup] called for group ${group.api.id} but group does not exists`
|
||||
);
|
||||
} else {
|
||||
groups.delete(group.api.id);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
export interface DockviewTheme {
|
||||
/**
|
||||
* The name of the theme
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* The class name to apply to the theme containing the CSS variables settings.
|
||||
*/
|
||||
className: string;
|
||||
/**
|
||||
* The gap between the groups
|
||||
*/
|
||||
gap?: number;
|
||||
/**
|
||||
* The mouting position of the overlay shown when dragging a panel. `absolute`
|
||||
* will mount the overlay to root of the dockview component whereas `relative` will mount the overlay to the group container.
|
||||
*/
|
||||
dndOverlayMounting?: 'absolute' | 'relative';
|
||||
/**
|
||||
* When dragging a panel, the overlay can either encompass the panel contents or the entire group including the tab header space.
|
||||
*/
|
||||
dndPanelOverlay?: 'content' | 'group';
|
||||
}
|
||||
|
||||
export const themeDark: DockviewTheme = {
|
||||
name: 'dark',
|
||||
className: 'dockview-theme-dark',
|
||||
};
|
||||
|
||||
export const themeLight: DockviewTheme = {
|
||||
name: 'light',
|
||||
className: 'dockview-theme-light',
|
||||
};
|
||||
|
||||
export const themeVisualStudio: DockviewTheme = {
|
||||
name: 'visualStudio',
|
||||
className: 'dockview-theme-vs',
|
||||
};
|
||||
|
||||
export const themeAbyss: DockviewTheme = {
|
||||
name: 'abyss',
|
||||
className: 'dockview-theme-abyss',
|
||||
};
|
||||
|
||||
export const themeDracula: DockviewTheme = {
|
||||
name: 'dracula',
|
||||
className: 'dockview-theme-dracula',
|
||||
};
|
||||
|
||||
export const themeReplit: DockviewTheme = {
|
||||
name: 'replit',
|
||||
className: 'dockview-theme-replit',
|
||||
gap: 10,
|
||||
};
|
||||
|
||||
export const themeAbyssSpaced: DockviewTheme = {
|
||||
name: 'abyssSpaced',
|
||||
className: 'dockview-theme-abyss-spaced',
|
||||
gap: 10,
|
||||
dndOverlayMounting: 'absolute',
|
||||
dndPanelOverlay: 'group',
|
||||
};
|
||||
|
||||
export const themeLightSpaced: DockviewTheme = {
|
||||
name: 'lightSpaced',
|
||||
className: 'dockview-theme-light-spaced',
|
||||
gap: 10,
|
||||
dndOverlayMounting: 'absolute',
|
||||
dndPanelOverlay: 'group',
|
||||
};
|
||||
@ -1,10 +1,11 @@
|
||||
import { IDockviewComponent } from './dockviewComponent';
|
||||
import { DockviewPanelApi } from '../api/dockviewPanelApi';
|
||||
import { PanelInitParameters, IPanel } from '../panel/types';
|
||||
import { DockviewApi } from '../api/component.api';
|
||||
import { Event } from '../events';
|
||||
import { Optional } from '../types';
|
||||
import { IDockviewGroupPanel } from './dockviewGroupPanel';
|
||||
import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer';
|
||||
import { TabLocation } from './framework';
|
||||
import { DockviewGroupPanel, IDockviewGroupPanel } from './dockviewGroupPanel';
|
||||
import { DockviewPanelRenderer } from '../overlayRenderContainer';
|
||||
|
||||
export interface HeaderPartInitParameters {
|
||||
title: string;
|
||||
@ -22,39 +23,46 @@ export interface WatermarkRendererInitParameters {
|
||||
group?: IDockviewGroupPanel;
|
||||
}
|
||||
|
||||
type RendererMethodOptionalList =
|
||||
| 'dispose'
|
||||
| 'update'
|
||||
| 'layout'
|
||||
| 'toJSON'
|
||||
| 'focus';
|
||||
|
||||
export interface IWatermarkRenderer
|
||||
extends Optional<Omit<IPanel, 'id' | 'init'>, RendererMethodOptionalList> {
|
||||
extends Optional<
|
||||
Omit<IPanel, 'id' | 'init'>,
|
||||
'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'
|
||||
> {
|
||||
readonly element: HTMLElement;
|
||||
init: (params: WatermarkRendererInitParameters) => void;
|
||||
}
|
||||
|
||||
export interface TabPartInitParameters extends GroupPanelPartInitParameters {
|
||||
tabLocation: TabLocation;
|
||||
updateParentGroup(group: DockviewGroupPanel, visible: boolean): void;
|
||||
}
|
||||
|
||||
export interface ITabRenderer
|
||||
extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
|
||||
extends Optional<
|
||||
Omit<IPanel, 'id'>,
|
||||
'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'
|
||||
> {
|
||||
readonly element: HTMLElement;
|
||||
init(parameters: TabPartInitParameters): void;
|
||||
init(parameters: GroupPanelPartInitParameters): void;
|
||||
}
|
||||
|
||||
export interface IContentRenderer
|
||||
extends Optional<Omit<IPanel, 'id'>, RendererMethodOptionalList> {
|
||||
extends Optional<
|
||||
Omit<IPanel, 'id'>,
|
||||
'dispose' | 'update' | 'layout' | 'toJSON' | 'focus'
|
||||
> {
|
||||
readonly element: HTMLElement;
|
||||
init(parameters: GroupPanelPartInitParameters): void;
|
||||
}
|
||||
|
||||
// watermark component
|
||||
|
||||
export interface WatermarkPartInitParameters {
|
||||
accessor: IDockviewComponent;
|
||||
}
|
||||
|
||||
// constructors
|
||||
|
||||
export interface WatermarkConstructor {
|
||||
new (): IWatermarkRenderer;
|
||||
}
|
||||
|
||||
export interface IGroupPanelInitParameters
|
||||
extends PanelInitParameters,
|
||||
HeaderPartInitParameters {
|
||||
@ -68,8 +76,4 @@ export interface GroupviewPanelState {
|
||||
title?: string;
|
||||
renderer?: DockviewPanelRenderer;
|
||||
params?: { [key: string]: any };
|
||||
minimumWidth?: number;
|
||||
minimumHeight?: number;
|
||||
maximumWidth?: number;
|
||||
maximumHeight?: number;
|
||||
}
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
// import { SerializedGridObject } from '../gridview/gridview';
|
||||
// import { Orientation } from '../splitview/splitview';
|
||||
// import { SerializedDockview } from './dockviewComponent';
|
||||
// import { GroupPanelViewState } from './dockviewGroupPanelModel';
|
||||
|
||||
// function typeValidate3(data: GroupPanelViewState, path: string): void {
|
||||
// if (typeof data.id !== 'string') {
|
||||
// throw new Error(`${path}.id must be a string`);
|
||||
// }
|
||||
|
||||
// if (
|
||||
// typeof data.activeView !== 'string' ||
|
||||
// typeof data.activeView !== 'undefined'
|
||||
// ) {
|
||||
// throw new Error(`${path}.activeView must be a string of undefined`);
|
||||
// }
|
||||
// }
|
||||
|
||||
// function typeValidate2(
|
||||
// data: SerializedGridObject<GroupPanelViewState>,
|
||||
// path: string
|
||||
// ): void {
|
||||
// if (typeof data.size !== 'number' && typeof data.size !== 'undefined') {
|
||||
// throw new Error(`${path}.size must be a number or undefined`);
|
||||
// }
|
||||
|
||||
// if (
|
||||
// typeof data.visible !== 'boolean' &&
|
||||
// typeof data.visible !== 'undefined'
|
||||
// ) {
|
||||
// throw new Error(`${path}.visible must be a boolean or undefined`);
|
||||
// }
|
||||
|
||||
// if (data.type === 'leaf') {
|
||||
// if (
|
||||
// typeof data.data !== 'object' ||
|
||||
// data.data === null ||
|
||||
// Array.isArray(data.data)
|
||||
// ) {
|
||||
// throw new Error('object must be a non-null object');
|
||||
// }
|
||||
|
||||
// typeValidate3(data.data, `${path}.data`);
|
||||
// } else if (data.type === 'branch') {
|
||||
// if (!Array.isArray(data.data)) {
|
||||
// throw new Error(`${path}.data must be an array`);
|
||||
// }
|
||||
// } else {
|
||||
// throw new Error(`${path}.type must be onew of {'branch', 'leaf'}`);
|
||||
// }
|
||||
// }
|
||||
|
||||
// function typeValidate(data: SerializedDockview): void {
|
||||
// if (typeof data !== 'object' || data === null) {
|
||||
// throw new Error('object must be a non-null object');
|
||||
// }
|
||||
|
||||
// const { grid, panels, activeGroup, floatingGroups } = data;
|
||||
|
||||
// if (typeof grid !== 'object' || grid === null) {
|
||||
// throw new Error("'.grid' must be a non-null object");
|
||||
// }
|
||||
|
||||
// if (typeof grid.height !== 'number') {
|
||||
// throw new Error("'.grid.height' must be a number");
|
||||
// }
|
||||
|
||||
// if (typeof grid.width !== 'number') {
|
||||
// throw new Error("'.grid.width' must be a number");
|
||||
// }
|
||||
|
||||
// if (typeof grid.root !== 'object' || grid.root === null) {
|
||||
// throw new Error("'.grid.root' must be a non-null object");
|
||||
// }
|
||||
|
||||
// if (grid.root.type !== 'branch') {
|
||||
// throw new Error(".grid.root.type must be of type 'branch'");
|
||||
// }
|
||||
|
||||
// if (
|
||||
// grid.orientation !== Orientation.HORIZONTAL &&
|
||||
// grid.orientation !== Orientation.VERTICAL
|
||||
// ) {
|
||||
// throw new Error(
|
||||
// `'.grid.width' must be one of {${Orientation.HORIZONTAL}, ${Orientation.VERTICAL}}`
|
||||
// );
|
||||
// }
|
||||
|
||||
// typeValidate2(grid.root, '.grid.root');
|
||||
// }
|
||||
@ -2,39 +2,10 @@ import {
|
||||
Event as DockviewEvent,
|
||||
Emitter,
|
||||
addDisposableListener,
|
||||
addDisposableWindowListener,
|
||||
} from './events';
|
||||
import { IDisposable, CompositeDisposable } from './lifecycle';
|
||||
|
||||
export interface OverflowEvent {
|
||||
hasScrollX: boolean;
|
||||
hasScrollY: boolean;
|
||||
}
|
||||
|
||||
export class OverflowObserver extends CompositeDisposable {
|
||||
private readonly _onDidChange = new Emitter<OverflowEvent>();
|
||||
readonly onDidChange = this._onDidChange.event;
|
||||
|
||||
private _value: OverflowEvent | null = null;
|
||||
|
||||
constructor(el: HTMLElement) {
|
||||
super();
|
||||
|
||||
this.addDisposables(
|
||||
this._onDidChange,
|
||||
watchElementResize(el, (entry) => {
|
||||
const hasScrollX =
|
||||
entry.target.scrollWidth > entry.target.clientWidth;
|
||||
|
||||
const hasScrollY =
|
||||
entry.target.scrollHeight > entry.target.clientHeight;
|
||||
|
||||
this._value = { hasScrollX, hasScrollY };
|
||||
this._onDidChange.fire(this._value);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function watchElementResize(
|
||||
element: HTMLElement,
|
||||
cb: (entry: ResizeObserverEntry) => void
|
||||
@ -111,11 +82,8 @@ export function isAncestor(
|
||||
return false;
|
||||
}
|
||||
|
||||
export function getElementsByTagName(
|
||||
tag: string,
|
||||
document: ParentNode
|
||||
): HTMLElement[] {
|
||||
return Array.prototype.slice.call(document.querySelectorAll(tag), 0);
|
||||
export function getElementsByTagName(tag: string): HTMLElement[] {
|
||||
return Array.prototype.slice.call(document.getElementsByTagName(tag), 0);
|
||||
}
|
||||
|
||||
export interface IFocusTracker extends IDisposable {
|
||||
@ -124,7 +92,7 @@ export interface IFocusTracker extends IDisposable {
|
||||
refreshState?(): void;
|
||||
}
|
||||
|
||||
export function trackFocus(element: HTMLElement): IFocusTracker {
|
||||
export function trackFocus(element: HTMLElement | Window): IFocusTracker {
|
||||
return new FocusTracker(element);
|
||||
}
|
||||
|
||||
@ -138,9 +106,9 @@ class FocusTracker extends CompositeDisposable implements IFocusTracker {
|
||||
private readonly _onDidBlur = new Emitter<void>();
|
||||
public readonly onDidBlur: DockviewEvent<void> = this._onDidBlur.event;
|
||||
|
||||
private readonly _refreshStateHandler: () => void;
|
||||
private _refreshStateHandler: () => void;
|
||||
|
||||
constructor(element: HTMLElement) {
|
||||
constructor(element: HTMLElement | Window) {
|
||||
super();
|
||||
|
||||
this.addDisposables(this._onDidFocus, this._onDidBlur);
|
||||
@ -183,12 +151,21 @@ class FocusTracker extends CompositeDisposable implements IFocusTracker {
|
||||
}
|
||||
};
|
||||
|
||||
this.addDisposables(
|
||||
addDisposableListener(element, 'focus', onFocus, true)
|
||||
);
|
||||
this.addDisposables(
|
||||
addDisposableListener(element, 'blur', onBlur, true)
|
||||
);
|
||||
if (element instanceof HTMLElement) {
|
||||
this.addDisposables(
|
||||
addDisposableListener(element, 'focus', onFocus, true)
|
||||
);
|
||||
this.addDisposables(
|
||||
addDisposableListener(element, 'blur', onBlur, true)
|
||||
);
|
||||
} else {
|
||||
this.addDisposables(
|
||||
addDisposableWindowListener(element, 'focus', onFocus, true)
|
||||
);
|
||||
this.addDisposables(
|
||||
addDisposableWindowListener(element, 'blur', onBlur, true)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
refreshState(): void {
|
||||
@ -276,225 +253,3 @@ export function isInDocument(element: Element): boolean {
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
export function addTestId(element: HTMLElement, id: string): void {
|
||||
element.setAttribute('data-testid', id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Should be more efficient than element.querySelectorAll("*") since there
|
||||
* is no need to store every element in-memory using this approach
|
||||
*/
|
||||
function allTagsNamesInclusiveOfShadowDoms(tagNames: string[]) {
|
||||
const iframes: HTMLElement[] = [];
|
||||
|
||||
function findIframesInNode(node: Element) {
|
||||
if (node.nodeType === Node.ELEMENT_NODE) {
|
||||
if (tagNames.includes(node.tagName)) {
|
||||
iframes.push(node as HTMLElement);
|
||||
}
|
||||
|
||||
if (node.shadowRoot) {
|
||||
findIframesInNode(<any>node.shadowRoot);
|
||||
}
|
||||
|
||||
for (const child of node.children) {
|
||||
findIframesInNode(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
findIframesInNode(document.documentElement);
|
||||
|
||||
return iframes;
|
||||
}
|
||||
|
||||
export function disableIframePointEvents(rootNode: ParentNode = document) {
|
||||
const iframes = allTagsNamesInclusiveOfShadowDoms(['IFRAME', 'WEBVIEW']);
|
||||
|
||||
const original = new WeakMap<HTMLElement, string>(); // don't hold onto HTMLElement references longer than required
|
||||
|
||||
for (const iframe of iframes) {
|
||||
original.set(iframe, iframe.style.pointerEvents);
|
||||
iframe.style.pointerEvents = 'none';
|
||||
}
|
||||
|
||||
return {
|
||||
release: () => {
|
||||
for (const iframe of iframes) {
|
||||
iframe.style.pointerEvents = original.get(iframe) ?? 'auto';
|
||||
}
|
||||
iframes.splice(0, iframes.length); // don't hold onto HTMLElement references longer than required
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function getDockviewTheme(element: HTMLElement): string | undefined {
|
||||
function toClassList(element: HTMLElement) {
|
||||
const list: string[] = [];
|
||||
|
||||
for (let i = 0; i < element.classList.length; i++) {
|
||||
list.push(element.classList.item(i)!);
|
||||
}
|
||||
|
||||
return list;
|
||||
}
|
||||
|
||||
let theme: string | undefined = undefined;
|
||||
let parent: HTMLElement | null = element;
|
||||
|
||||
while (parent !== null) {
|
||||
theme = toClassList(parent).find((cls) =>
|
||||
cls.startsWith('dockview-theme-')
|
||||
);
|
||||
if (typeof theme === 'string') {
|
||||
break;
|
||||
}
|
||||
parent = parent.parentElement;
|
||||
}
|
||||
|
||||
return theme;
|
||||
}
|
||||
|
||||
export class Classnames {
|
||||
private _classNames: string[] = [];
|
||||
|
||||
constructor(private readonly element: HTMLElement) {}
|
||||
|
||||
setClassNames(classNames: string) {
|
||||
for (const className of this._classNames) {
|
||||
toggleClass(this.element, className, false);
|
||||
}
|
||||
|
||||
this._classNames = classNames
|
||||
.split(' ')
|
||||
.filter((v) => v.trim().length > 0);
|
||||
|
||||
for (const className of this._classNames) {
|
||||
toggleClass(this.element, className, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const DEBOUCE_DELAY = 100;
|
||||
|
||||
export function isChildEntirelyVisibleWithinParent(
|
||||
child: HTMLElement,
|
||||
parent: HTMLElement
|
||||
): boolean {
|
||||
//
|
||||
const childPosition = getDomNodePagePosition(child);
|
||||
const parentPosition = getDomNodePagePosition(parent);
|
||||
|
||||
if (childPosition.left < parentPosition.left) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
childPosition.left + childPosition.width >
|
||||
parentPosition.left + parentPosition.width
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
export function onDidWindowMoveEnd(window: Window): Emitter<void> {
|
||||
const emitter = new Emitter<void>();
|
||||
|
||||
let previousScreenX = window.screenX;
|
||||
let previousScreenY = window.screenY;
|
||||
|
||||
let timeout: any;
|
||||
|
||||
const checkMovement = () => {
|
||||
if (window.closed) {
|
||||
return;
|
||||
}
|
||||
|
||||
const currentScreenX = window.screenX;
|
||||
const currentScreenY = window.screenY;
|
||||
|
||||
if (
|
||||
currentScreenX !== previousScreenX ||
|
||||
currentScreenY !== previousScreenY
|
||||
) {
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => {
|
||||
emitter.fire();
|
||||
}, DEBOUCE_DELAY);
|
||||
|
||||
previousScreenX = currentScreenX;
|
||||
previousScreenY = currentScreenY;
|
||||
}
|
||||
|
||||
requestAnimationFrame(checkMovement);
|
||||
};
|
||||
|
||||
checkMovement();
|
||||
|
||||
return emitter;
|
||||
}
|
||||
|
||||
export function onDidWindowResizeEnd(element: Window, cb: () => void) {
|
||||
let resizeTimeout: any;
|
||||
|
||||
const disposable = new CompositeDisposable(
|
||||
addDisposableListener(element, 'resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
cb();
|
||||
}, DEBOUCE_DELAY);
|
||||
})
|
||||
);
|
||||
|
||||
return disposable;
|
||||
}
|
||||
|
||||
export function shiftAbsoluteElementIntoView(
|
||||
element: HTMLElement,
|
||||
root: HTMLElement,
|
||||
options: { buffer: number } = { buffer: 10 }
|
||||
) {
|
||||
const buffer = options.buffer;
|
||||
const rect = element.getBoundingClientRect();
|
||||
const rootRect = root.getBoundingClientRect();
|
||||
|
||||
let translateX = 0;
|
||||
let translateY = 0;
|
||||
|
||||
const left = rect.left - rootRect.left;
|
||||
const top = rect.top - rootRect.top;
|
||||
const bottom = rect.bottom - rootRect.bottom;
|
||||
const right = rect.right - rootRect.right;
|
||||
|
||||
// Check horizontal overflow
|
||||
if (left < buffer) {
|
||||
translateX = buffer - left;
|
||||
} else if (right > buffer) {
|
||||
translateX = -buffer - right;
|
||||
}
|
||||
|
||||
// Check vertical overflow
|
||||
if (top < buffer) {
|
||||
translateY = buffer - top;
|
||||
} else if (bottom > buffer) {
|
||||
translateY = -bottom - buffer;
|
||||
}
|
||||
|
||||
// Apply the translation if needed
|
||||
if (translateX !== 0 || translateY !== 0) {
|
||||
element.style.transform = `translate(${translateX}px, ${translateY}px)`;
|
||||
}
|
||||
}
|
||||
|
||||
export function findRelativeZIndexParent(el: HTMLElement): HTMLElement | null {
|
||||
let tmp: HTMLElement | null = el;
|
||||
|
||||
while (tmp && (tmp.style.zIndex === 'auto' || tmp.style.zIndex === '')) {
|
||||
tmp = tmp.parentElement;
|
||||
}
|
||||
|
||||
return tmp;
|
||||
}
|
||||
|
||||
@ -41,23 +41,6 @@ export class DockviewEvent implements IDockviewEvent {
|
||||
}
|
||||
}
|
||||
|
||||
export interface IAcceptableEvent {
|
||||
readonly isAccepted: boolean;
|
||||
accept(): void;
|
||||
}
|
||||
|
||||
export class AcceptableEvent implements IAcceptableEvent {
|
||||
private _isAccepted = false;
|
||||
|
||||
get isAccepted(): boolean {
|
||||
return this._isAccepted;
|
||||
}
|
||||
|
||||
accept(): void {
|
||||
this._isAccepted = true;
|
||||
}
|
||||
}
|
||||
|
||||
class LeakageMonitor {
|
||||
readonly events = new Map<Event<any>, Stacktrace>();
|
||||
|
||||
@ -86,7 +69,7 @@ class Stacktrace {
|
||||
private constructor(readonly value: string) {}
|
||||
|
||||
print(): void {
|
||||
console.warn('dockview: stacktrace', this.value);
|
||||
console.warn(this.value);
|
||||
}
|
||||
}
|
||||
|
||||
@ -141,7 +124,7 @@ export class Emitter<T> implements IDisposable {
|
||||
this._listeners.splice(index, 1);
|
||||
} else if (Emitter.ENABLE_TRACKING) {
|
||||
// console.warn(
|
||||
// `dockview: listener already disposed`,
|
||||
// `Listener already disposed`,
|
||||
// Stacktrace.create().print()
|
||||
// );
|
||||
}
|
||||
@ -175,10 +158,7 @@ export class Emitter<T> implements IDisposable {
|
||||
queueMicrotask(() => {
|
||||
// don't check until stack of execution is completed to allow for out-of-order disposals within the same execution block
|
||||
for (const listener of this._listeners) {
|
||||
console.warn(
|
||||
'dockview: stacktrace',
|
||||
listener.stacktrace?.print()
|
||||
);
|
||||
console.warn(listener.stacktrace?.print());
|
||||
}
|
||||
});
|
||||
}
|
||||
@ -193,38 +173,32 @@ export class Emitter<T> implements IDisposable {
|
||||
}
|
||||
}
|
||||
|
||||
export function addDisposableListener<K extends keyof WindowEventMap>(
|
||||
export function addDisposableWindowListener<K extends keyof WindowEventMap>(
|
||||
element: Window,
|
||||
type: K,
|
||||
listener: (this: Window, ev: WindowEventMap[K]) => any,
|
||||
options?: boolean | AddEventListenerOptions
|
||||
): IDisposable;
|
||||
): IDisposable {
|
||||
element.addEventListener(type, listener, options);
|
||||
|
||||
return {
|
||||
dispose: () => {
|
||||
element.removeEventListener(type, listener, options);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function addDisposableListener<K extends keyof HTMLElementEventMap>(
|
||||
element: HTMLElement,
|
||||
type: K,
|
||||
listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any,
|
||||
options?: boolean | AddEventListenerOptions
|
||||
): IDisposable;
|
||||
export function addDisposableListener<
|
||||
K extends keyof HTMLElementEventMap | keyof WindowEventMap
|
||||
>(
|
||||
element: HTMLElement | Window,
|
||||
type: K,
|
||||
listener: (
|
||||
this: K extends keyof HTMLElementEventMap ? HTMLElement : Window,
|
||||
ev: K extends keyof HTMLElementEventMap
|
||||
? HTMLElementEventMap[K]
|
||||
: K extends keyof WindowEventMap
|
||||
? WindowEventMap[K]
|
||||
: never
|
||||
) => any,
|
||||
options?: boolean | AddEventListenerOptions
|
||||
): IDisposable {
|
||||
element.addEventListener(type, <any>listener, options);
|
||||
element.addEventListener(type, listener, options);
|
||||
|
||||
return {
|
||||
dispose: () => {
|
||||
element.removeEventListener(type, <any>listener, options);
|
||||
element.removeEventListener(type, listener, options);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
import { Emitter, Event, AsapEvent } from '../events';
|
||||
import { getGridLocation, Gridview, IGridView } from './gridview';
|
||||
import { Position } from '../dnd/droptarget';
|
||||
import { Disposable, IDisposable, IValueDisposable } from '../lifecycle';
|
||||
import { Disposable, IValueDisposable } from '../lifecycle';
|
||||
import { sequentialNumberGenerator } from '../math';
|
||||
import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview';
|
||||
import { IPanel } from '../panel/types';
|
||||
import { MovementOptions2 } from '../dockview/options';
|
||||
import { Resizable } from '../resizable';
|
||||
import { Classnames } from '../dom';
|
||||
|
||||
const nextLayoutId = sequentialNumberGenerator();
|
||||
|
||||
/**
|
||||
* A direction in which a panel can be moved or placed relative to another panel.
|
||||
*/
|
||||
export type Direction = 'left' | 'right' | 'above' | 'below' | 'within';
|
||||
|
||||
export function toTarget(direction: Direction): Position {
|
||||
@ -32,19 +28,13 @@ export function toTarget(direction: Direction): Position {
|
||||
}
|
||||
}
|
||||
|
||||
export interface MaximizedChanged<T extends IGridPanelView> {
|
||||
panel: T;
|
||||
isMaximized: boolean;
|
||||
}
|
||||
|
||||
export interface BaseGridOptions {
|
||||
readonly proportionalLayout: boolean;
|
||||
readonly orientation: Orientation;
|
||||
readonly styles?: ISplitviewStyles;
|
||||
readonly parentElement: HTMLElement;
|
||||
readonly disableAutoResizing?: boolean;
|
||||
readonly locked?: boolean;
|
||||
readonly margin?: number;
|
||||
readonly className?: string;
|
||||
}
|
||||
|
||||
export interface IGridPanelView extends IGridView, IPanel {
|
||||
@ -52,7 +42,7 @@ export interface IGridPanelView extends IGridView, IPanel {
|
||||
readonly isActive: boolean;
|
||||
}
|
||||
|
||||
export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
|
||||
export interface IBaseGrid<T extends IGridPanelView> {
|
||||
readonly element: HTMLElement;
|
||||
readonly id: string;
|
||||
readonly width: number;
|
||||
@ -64,8 +54,6 @@ export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
|
||||
readonly activeGroup: T | undefined;
|
||||
readonly size: number;
|
||||
readonly groups: T[];
|
||||
readonly onDidMaximizedChange: Event<MaximizedChanged<T>>;
|
||||
readonly onDidLayoutChange: Event<void>;
|
||||
getPanel(id: string): T | undefined;
|
||||
toJSON(): object;
|
||||
fromJSON(data: any): void;
|
||||
@ -77,6 +65,8 @@ export interface IBaseGrid<T extends IGridPanelView> extends IDisposable {
|
||||
isMaximizedGroup(panel: T): boolean;
|
||||
exitMaximizedGroup(): void;
|
||||
hasMaximizedGroup(): boolean;
|
||||
readonly onDidMaximizedGroupChange: Event<void>;
|
||||
readonly onDidLayoutChange: Event<void>;
|
||||
}
|
||||
|
||||
export abstract class BaseGrid<T extends IGridPanelView>
|
||||
@ -95,10 +85,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
private readonly _onDidAdd = new Emitter<T>();
|
||||
readonly onDidAdd: Event<T> = this._onDidAdd.event;
|
||||
|
||||
private readonly _onDidMaximizedChange = new Emitter<MaximizedChanged<T>>();
|
||||
readonly onDidMaximizedChange: Event<MaximizedChanged<T>> =
|
||||
this._onDidMaximizedChange.event;
|
||||
|
||||
private readonly _onDidActiveChange = new Emitter<T | undefined>();
|
||||
readonly onDidActiveChange: Event<T | undefined> =
|
||||
this._onDidActiveChange.event;
|
||||
@ -107,12 +93,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
readonly onDidLayoutChange: Event<void> =
|
||||
this._bufferOnDidLayoutChange.onEvent;
|
||||
|
||||
private readonly _onDidViewVisibilityChangeMicroTaskQueue = new AsapEvent();
|
||||
readonly onDidViewVisibilityChangeMicroTaskQueue =
|
||||
this._onDidViewVisibilityChangeMicroTaskQueue.onEvent;
|
||||
|
||||
private readonly _classNames: Classnames;
|
||||
|
||||
get id(): string {
|
||||
return this._id;
|
||||
}
|
||||
@ -158,23 +138,17 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
this.gridview.locked = value;
|
||||
}
|
||||
|
||||
constructor(container: HTMLElement, options: BaseGridOptions) {
|
||||
constructor(options: BaseGridOptions) {
|
||||
super(document.createElement('div'), options.disableAutoResizing);
|
||||
this.element.style.height = '100%';
|
||||
this.element.style.width = '100%';
|
||||
|
||||
this._classNames = new Classnames(this.element);
|
||||
this._classNames.setClassNames(options.className ?? '');
|
||||
|
||||
// the container is owned by the third-party, do not modify/delete it
|
||||
container.appendChild(this.element);
|
||||
options.parentElement.appendChild(this.element);
|
||||
|
||||
this.gridview = new Gridview(
|
||||
!!options.proportionalLayout,
|
||||
options.styles,
|
||||
options.orientation,
|
||||
options.locked,
|
||||
options.margin
|
||||
options.orientation
|
||||
);
|
||||
|
||||
this.gridview.locked = !!options.locked;
|
||||
@ -184,18 +158,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
this.layout(0, 0, true); // set some elements height/widths
|
||||
|
||||
this.addDisposables(
|
||||
this.gridview.onDidMaximizedNodeChange((event) => {
|
||||
this._onDidMaximizedChange.fire({
|
||||
panel: event.view as T,
|
||||
isMaximized: event.isMaximized,
|
||||
});
|
||||
}),
|
||||
this.gridview.onDidViewVisibilityChange(() =>
|
||||
this._onDidViewVisibilityChangeMicroTaskQueue.fire()
|
||||
),
|
||||
this.onDidViewVisibilityChangeMicroTaskQueue(() => {
|
||||
this.layout(this.width, this.height, true);
|
||||
}),
|
||||
Disposable.from(() => {
|
||||
this.element.parentElement?.removeChild(this.element);
|
||||
}),
|
||||
@ -209,8 +171,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
)(() => {
|
||||
this._bufferOnDidLayoutChange.fire();
|
||||
}),
|
||||
this._onDidMaximizedChange,
|
||||
this._onDidViewVisibilityChangeMicroTaskQueue,
|
||||
this._bufferOnDidLayoutChange
|
||||
);
|
||||
}
|
||||
@ -230,30 +190,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
return this.gridview.isViewVisible(getGridLocation(panel.element));
|
||||
}
|
||||
|
||||
updateOptions(options: Partial<BaseGridOptions>) {
|
||||
if (typeof options.proportionalLayout === 'boolean') {
|
||||
// this.gridview.proportionalLayout = options.proportionalLayout; // not supported
|
||||
}
|
||||
if (options.orientation) {
|
||||
this.gridview.orientation = options.orientation;
|
||||
}
|
||||
if ('styles' in options) {
|
||||
// this.gridview.styles = options.styles; // not supported
|
||||
}
|
||||
if ('disableResizing' in options) {
|
||||
this.disableResizing = options.disableAutoResizing ?? false;
|
||||
}
|
||||
if ('locked' in options) {
|
||||
this.locked = options.locked ?? false;
|
||||
}
|
||||
if ('margin' in options) {
|
||||
this.gridview.margin = options.margin ?? 0;
|
||||
}
|
||||
if ('className' in options) {
|
||||
this._classNames.setClassNames(options.className ?? '');
|
||||
}
|
||||
}
|
||||
|
||||
maximizeGroup(panel: T): void {
|
||||
this.gridview.maximizeView(panel);
|
||||
this.doSetGroupActive(panel);
|
||||
@ -271,6 +207,10 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
return this.gridview.hasMaximizedView();
|
||||
}
|
||||
|
||||
get onDidMaximizedGroupChange(): Event<void> {
|
||||
return this.gridview.onDidMaximizedNodeChange;
|
||||
}
|
||||
|
||||
protected doAddGroup(
|
||||
group: T,
|
||||
location: number[] = [0],
|
||||
@ -370,7 +310,7 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
|
||||
public layout(width: number, height: number, forceResize?: boolean): void {
|
||||
const different =
|
||||
forceResize || width !== this.width || height !== this.height;
|
||||
forceResize ?? (width !== this.width || height !== this.height);
|
||||
|
||||
if (!different) {
|
||||
return;
|
||||
|
||||
@ -32,7 +32,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
|
||||
{
|
||||
private _height = 0;
|
||||
private _width = 0;
|
||||
private readonly _element: HTMLElement;
|
||||
private _element: HTMLElement;
|
||||
protected part?: IFrameworkPart;
|
||||
protected _params?: PanelInitParameters;
|
||||
|
||||
|
||||
@ -19,7 +19,7 @@ import { CompositeDisposable, IDisposable, Disposable } from '../lifecycle';
|
||||
|
||||
export class BranchNode extends CompositeDisposable implements IView {
|
||||
readonly element: HTMLElement;
|
||||
private readonly splitview: Splitview;
|
||||
private splitview: Splitview;
|
||||
private _orthogonalSize: number;
|
||||
private _size: number;
|
||||
private _childrenDisposable: IDisposable = Disposable.NONE;
|
||||
@ -33,12 +33,9 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
|
||||
this._onDidChange.event;
|
||||
|
||||
private readonly _onDidVisibilityChange = new Emitter<{
|
||||
visible: boolean;
|
||||
}>();
|
||||
readonly onDidVisibilityChange: Event<{
|
||||
visible: boolean;
|
||||
}> = this._onDidVisibilityChange.event;
|
||||
private readonly _onDidVisibilityChange = new Emitter<boolean>();
|
||||
readonly onDidVisibilityChange: Event<boolean> =
|
||||
this._onDidVisibilityChange.event;
|
||||
|
||||
get width(): number {
|
||||
return this.orientation === Orientation.HORIZONTAL
|
||||
@ -142,20 +139,6 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
this.splitview.disabled = value;
|
||||
}
|
||||
|
||||
get margin(): number {
|
||||
return this.splitview.margin;
|
||||
}
|
||||
|
||||
set margin(value: number) {
|
||||
this.splitview.margin = value;
|
||||
|
||||
this.children.forEach((child) => {
|
||||
if (child instanceof BranchNode) {
|
||||
child.margin = value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
constructor(
|
||||
readonly orientation: Orientation,
|
||||
readonly proportionalLayout: boolean,
|
||||
@ -163,7 +146,6 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
size: number,
|
||||
orthogonalSize: number,
|
||||
disabled: boolean,
|
||||
margin: number | undefined,
|
||||
childDescriptors?: INodeDescriptor[]
|
||||
) {
|
||||
super();
|
||||
@ -171,14 +153,13 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
this._size = size;
|
||||
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'dv-branch-node';
|
||||
this.element.className = 'branch-node';
|
||||
|
||||
if (!childDescriptors) {
|
||||
this.splitview = new Splitview(this.element, {
|
||||
orientation: this.orientation,
|
||||
proportionalLayout,
|
||||
styles,
|
||||
margin,
|
||||
});
|
||||
this.splitview.layout(this.size, this.orthogonalSize);
|
||||
} else {
|
||||
@ -203,7 +184,6 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
descriptor,
|
||||
proportionalLayout,
|
||||
styles,
|
||||
margin,
|
||||
});
|
||||
}
|
||||
|
||||
@ -220,8 +200,10 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
this.setupChildrenEvents();
|
||||
}
|
||||
|
||||
setVisible(_visible: boolean): void {
|
||||
// noop
|
||||
setVisible(visible: boolean): void {
|
||||
for (const child of this.children) {
|
||||
child.setVisible(visible);
|
||||
}
|
||||
}
|
||||
|
||||
isChildVisible(index: number): boolean {
|
||||
@ -242,9 +224,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
}
|
||||
|
||||
const wereAllChildrenHidden = this.splitview.contentSize === 0;
|
||||
|
||||
this.splitview.setViewVisible(index, visible);
|
||||
// }
|
||||
const areAllChildrenHidden = this.splitview.contentSize === 0;
|
||||
|
||||
// If all children are hidden then the parent should hide the entire splitview
|
||||
@ -253,7 +233,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
(visible && wereAllChildrenHidden) ||
|
||||
(!visible && areAllChildrenHidden)
|
||||
) {
|
||||
this._onDidVisibilityChange.fire({ visible });
|
||||
this._onDidVisibilityChange.fire(visible);
|
||||
}
|
||||
}
|
||||
|
||||
@ -355,7 +335,7 @@ export class BranchNode extends CompositeDisposable implements IView {
|
||||
}),
|
||||
...this.children.map((c, i) => {
|
||||
if (c instanceof BranchNode) {
|
||||
return c.onDidVisibilityChange(({ visible }) => {
|
||||
return c.onDidVisibilityChange((visible) => {
|
||||
this.setChildVisible(i, visible);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.dv-grid-view,
|
||||
.dv-branch-node {
|
||||
.grid-view,
|
||||
.branch-node {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -42,8 +42,7 @@ function flipNode<T extends Node>(
|
||||
node.styles,
|
||||
size,
|
||||
orthogonalSize,
|
||||
node.disabled,
|
||||
node.margin
|
||||
node.disabled
|
||||
);
|
||||
|
||||
let totalSize = 0;
|
||||
@ -113,7 +112,7 @@ export function getGridLocation(element: HTMLElement): number[] {
|
||||
throw new Error('Invalid grid element');
|
||||
}
|
||||
|
||||
if (/\bdv-grid-view\b/.test(parentElement.className)) {
|
||||
if (/\bgrid-view\b/.test(parentElement.className)) {
|
||||
return [];
|
||||
}
|
||||
|
||||
@ -172,7 +171,6 @@ export interface IGridView {
|
||||
readonly maximumWidth: number;
|
||||
readonly minimumHeight: number;
|
||||
readonly maximumHeight: number;
|
||||
readonly isVisible: boolean;
|
||||
priority?: LayoutPriority;
|
||||
layout(width: number, height: number): void;
|
||||
toJSON(): object;
|
||||
@ -265,21 +263,11 @@ export interface IViewDeserializer {
|
||||
fromJSON: (data: ISerializedLeafNode) => IGridView;
|
||||
}
|
||||
|
||||
export interface SerializedNodeDescriptor {
|
||||
location: number[];
|
||||
}
|
||||
|
||||
export interface SerializedGridview<T> {
|
||||
root: SerializedGridObject<T>;
|
||||
width: number;
|
||||
height: number;
|
||||
orientation: Orientation;
|
||||
maximizedNode?: SerializedNodeDescriptor;
|
||||
}
|
||||
|
||||
export interface MaximizedViewChanged {
|
||||
view: IGridView;
|
||||
isMaximized: boolean;
|
||||
}
|
||||
|
||||
export class Gridview implements IDisposable {
|
||||
@ -287,7 +275,6 @@ export class Gridview implements IDisposable {
|
||||
|
||||
private _root: BranchNode | undefined;
|
||||
private _locked = false;
|
||||
private _margin = 0;
|
||||
private _maximizedNode:
|
||||
| { leaf: LeafNode; hiddenOnMaximize: LeafNode[] }
|
||||
| undefined = undefined;
|
||||
@ -300,11 +287,7 @@ export class Gridview implements IDisposable {
|
||||
readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> =
|
||||
this._onDidChange.event;
|
||||
|
||||
private readonly _onDidViewVisibilityChange = new Emitter<void>();
|
||||
readonly onDidViewVisibilityChange = this._onDidViewVisibilityChange.event;
|
||||
|
||||
private readonly _onDidMaximizedNodeChange =
|
||||
new Emitter<MaximizedViewChanged>();
|
||||
private readonly _onDidMaximizedNodeChange = new Emitter<void>();
|
||||
readonly onDidMaximizedNodeChange = this._onDidMaximizedNodeChange.event;
|
||||
|
||||
public get length(): number {
|
||||
@ -373,15 +356,6 @@ export class Gridview implements IDisposable {
|
||||
}
|
||||
}
|
||||
|
||||
get margin(): number {
|
||||
return this._margin;
|
||||
}
|
||||
|
||||
set margin(value: number) {
|
||||
this._margin = value;
|
||||
this.root.margin = value;
|
||||
}
|
||||
|
||||
maximizedView(): IGridView | undefined {
|
||||
return this._maximizedNode?.leaf.view;
|
||||
}
|
||||
@ -406,8 +380,6 @@ export class Gridview implements IDisposable {
|
||||
this.exitMaximizedView();
|
||||
}
|
||||
|
||||
serializeBranchNode(this.getView(), this.orientation);
|
||||
|
||||
const hiddenOnMaximize: LeafNode[] = [];
|
||||
|
||||
function hideAllViewsBut(parent: BranchNode, exclude: LeafNode): void {
|
||||
@ -429,10 +401,7 @@ export class Gridview implements IDisposable {
|
||||
|
||||
hideAllViewsBut(this.root, node);
|
||||
this._maximizedNode = { leaf: node, hiddenOnMaximize };
|
||||
this._onDidMaximizedNodeChange.fire({
|
||||
view: node.view,
|
||||
isMaximized: true,
|
||||
});
|
||||
this._onDidMaximizedNodeChange.fire();
|
||||
}
|
||||
|
||||
exitMaximizedView(): void {
|
||||
@ -457,68 +426,33 @@ export class Gridview implements IDisposable {
|
||||
|
||||
showViewsInReverseOrder(this.root);
|
||||
|
||||
const tmp = this._maximizedNode.leaf;
|
||||
this._maximizedNode = undefined;
|
||||
this._onDidMaximizedNodeChange.fire({
|
||||
view: tmp.view,
|
||||
isMaximized: false,
|
||||
});
|
||||
this._onDidMaximizedNodeChange.fire();
|
||||
}
|
||||
|
||||
public serialize(): SerializedGridview<any> {
|
||||
const maximizedView = this.maximizedView();
|
||||
|
||||
let maxmizedViewLocation: number[] | undefined;
|
||||
|
||||
if (maximizedView) {
|
||||
/**
|
||||
* The minimum information we can get away with in order to serialize a maxmized view is it's location within the grid
|
||||
* which is represented as a branch of indices
|
||||
*/
|
||||
maxmizedViewLocation = getGridLocation(maximizedView.element);
|
||||
}
|
||||
|
||||
if (this.hasMaximizedView()) {
|
||||
/**
|
||||
* the saved layout cannot be in its maxmized state otherwise all of the underlying
|
||||
* view dimensions will be wrong
|
||||
*
|
||||
* To counteract this we temporaily remove the maximized view to compute the serialized output
|
||||
* of the grid before adding back the maxmized view as to not alter the layout from the users
|
||||
* perspective when `.toJSON()` is called
|
||||
* do not persist maximized view state
|
||||
* firstly exit any maximized views to ensure the correct dimensions are persisted
|
||||
*/
|
||||
this.exitMaximizedView();
|
||||
}
|
||||
|
||||
const root = serializeBranchNode(this.getView(), this.orientation);
|
||||
|
||||
const resullt: SerializedGridview<any> = {
|
||||
return {
|
||||
root,
|
||||
width: this.width,
|
||||
height: this.height,
|
||||
orientation: this.orientation,
|
||||
};
|
||||
|
||||
if (maxmizedViewLocation) {
|
||||
resullt.maximizedNode = {
|
||||
location: maxmizedViewLocation,
|
||||
};
|
||||
}
|
||||
|
||||
if (maximizedView) {
|
||||
// replace any maximzied view that was removed for serialization purposes
|
||||
this.maximizeView(maximizedView);
|
||||
}
|
||||
|
||||
return resullt;
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
this.disposable.dispose();
|
||||
this._onDidChange.dispose();
|
||||
this._onDidMaximizedNodeChange.dispose();
|
||||
this._onDidViewVisibilityChange.dispose();
|
||||
|
||||
this.root.dispose();
|
||||
this._maximizedNode = undefined;
|
||||
this.element.remove();
|
||||
@ -532,8 +466,7 @@ export class Gridview implements IDisposable {
|
||||
this.styles,
|
||||
this.root.size,
|
||||
this.root.orthogonalSize,
|
||||
this.locked,
|
||||
this.margin
|
||||
this._locked
|
||||
);
|
||||
}
|
||||
|
||||
@ -551,24 +484,6 @@ export class Gridview implements IDisposable {
|
||||
deserializer,
|
||||
height
|
||||
);
|
||||
|
||||
/**
|
||||
* The deserialied layout must be positioned through this.layout(...)
|
||||
* before any maximizedNode can be positioned
|
||||
*/
|
||||
this.layout(json.width, json.height);
|
||||
|
||||
if (json.maximizedNode) {
|
||||
const location = json.maximizedNode.location;
|
||||
|
||||
const [_, node] = this.getNode(location);
|
||||
|
||||
if (!(node instanceof LeafNode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.maximizeView(node.view);
|
||||
}
|
||||
}
|
||||
|
||||
private _deserialize(
|
||||
@ -612,17 +527,16 @@ export class Gridview implements IDisposable {
|
||||
this.styles,
|
||||
node.size, // <- orthogonal size - flips at each depth
|
||||
orthogonalSize, // <- size - flips at each depth,
|
||||
this.locked,
|
||||
this.margin,
|
||||
this._locked,
|
||||
children
|
||||
);
|
||||
} else {
|
||||
const view = deserializer.fromJSON(node);
|
||||
if (typeof node.visible === 'boolean') {
|
||||
view.setVisible?.(node.visible);
|
||||
}
|
||||
|
||||
result = new LeafNode(view, orientation, orthogonalSize, node.size);
|
||||
result = new LeafNode(
|
||||
deserializer.fromJSON(node),
|
||||
orientation,
|
||||
orthogonalSize,
|
||||
node.size
|
||||
);
|
||||
}
|
||||
|
||||
return result;
|
||||
@ -666,8 +580,7 @@ export class Gridview implements IDisposable {
|
||||
this.styles,
|
||||
this.root.orthogonalSize,
|
||||
this.root.size,
|
||||
this.locked,
|
||||
this.margin
|
||||
this._locked
|
||||
);
|
||||
|
||||
if (oldRoot.children.length === 0) {
|
||||
@ -773,24 +686,17 @@ export class Gridview implements IDisposable {
|
||||
constructor(
|
||||
readonly proportionalLayout: boolean,
|
||||
readonly styles: ISplitviewStyles | undefined,
|
||||
orientation: Orientation,
|
||||
locked?: boolean,
|
||||
margin?: number
|
||||
orientation: Orientation
|
||||
) {
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'dv-grid-view';
|
||||
|
||||
this._locked = locked ?? false;
|
||||
this._margin = margin ?? 0;
|
||||
|
||||
this.element.className = 'grid-view';
|
||||
this.root = new BranchNode(
|
||||
orientation,
|
||||
proportionalLayout,
|
||||
styles,
|
||||
0,
|
||||
0,
|
||||
this.locked,
|
||||
this.margin
|
||||
this._locked
|
||||
);
|
||||
}
|
||||
|
||||
@ -817,8 +723,6 @@ export class Gridview implements IDisposable {
|
||||
throw new Error('Invalid from location');
|
||||
}
|
||||
|
||||
this._onDidViewVisibilityChange.fire();
|
||||
|
||||
parent.setChildVisible(index, visible);
|
||||
}
|
||||
|
||||
@ -877,8 +781,7 @@ export class Gridview implements IDisposable {
|
||||
this.styles,
|
||||
parent.size,
|
||||
parent.orthogonalSize,
|
||||
this.locked,
|
||||
this.margin
|
||||
this._locked
|
||||
);
|
||||
grandParent.addChild(newParent, parent.size, parentIndex);
|
||||
|
||||
|
||||
@ -23,6 +23,7 @@ import {
|
||||
} from './gridviewPanel';
|
||||
import { BaseComponentOptions, Parameters } from '../panel/types';
|
||||
import { Orientation, Sizing } from '../splitview/splitview';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import { Emitter, Event } from '../events';
|
||||
import { Position } from '../dnd/droptarget';
|
||||
|
||||
@ -48,10 +49,15 @@ export interface IGridPanelComponentView extends IGridPanelView {
|
||||
init: (params: GridviewInitParameters) => void;
|
||||
}
|
||||
|
||||
export type GridviewComponentUpdateOptions = Pick<
|
||||
GridviewComponentOptions,
|
||||
'orientation' | 'components' | 'frameworkComponents'
|
||||
>;
|
||||
|
||||
export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
|
||||
readonly orientation: Orientation;
|
||||
readonly onDidLayoutFromJSON: Event<void>;
|
||||
updateOptions(options: Partial<GridviewComponentOptions>): void;
|
||||
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
|
||||
addPanel<T extends object = Parameters>(
|
||||
options: AddComponentOptions<T>
|
||||
): IGridviewPanel;
|
||||
@ -113,15 +119,13 @@ export class GridviewComponent
|
||||
this._deserializer = value;
|
||||
}
|
||||
|
||||
constructor(container: HTMLElement, options: GridviewComponentOptions) {
|
||||
super(container, {
|
||||
proportionalLayout: options.proportionalLayout ?? true,
|
||||
constructor(options: GridviewComponentOptions) {
|
||||
super({
|
||||
parentElement: options.parentElement,
|
||||
proportionalLayout: options.proportionalLayout,
|
||||
orientation: options.orientation,
|
||||
styles: options.hideBorders
|
||||
? { separatorBorder: 'transparent' }
|
||||
: undefined,
|
||||
styles: options.styles,
|
||||
disableAutoResizing: options.disableAutoResizing,
|
||||
className: options.className,
|
||||
});
|
||||
|
||||
this._options = options;
|
||||
@ -140,11 +144,16 @@ export class GridviewComponent
|
||||
this._onDidActiveGroupChange.fire(event);
|
||||
})
|
||||
);
|
||||
|
||||
if (!this.options.components) {
|
||||
this.options.components = {};
|
||||
}
|
||||
if (!this.options.frameworkComponents) {
|
||||
this.options.frameworkComponents = {};
|
||||
}
|
||||
}
|
||||
|
||||
override updateOptions(options: Partial<GridviewComponentOptions>): void {
|
||||
super.updateOptions(options);
|
||||
|
||||
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void {
|
||||
const hasOrientationChanged =
|
||||
typeof options.orientation === 'string' &&
|
||||
this.gridview.orientation !== options.orientation;
|
||||
@ -210,11 +219,19 @@ export class GridviewComponent
|
||||
this.gridview.deserialize(grid, {
|
||||
fromJSON: (node) => {
|
||||
const { data } = node;
|
||||
|
||||
const view = this.options.createComponent({
|
||||
id: data.id,
|
||||
name: data.component,
|
||||
});
|
||||
const view = createComponent(
|
||||
data.id,
|
||||
data.component,
|
||||
this.options.components ?? {},
|
||||
this.options.frameworkComponents ?? {},
|
||||
this.options.frameworkComponentFactory
|
||||
? {
|
||||
createComponent:
|
||||
this.options.frameworkComponentFactory
|
||||
.createComponent,
|
||||
}
|
||||
: undefined
|
||||
);
|
||||
|
||||
queue.push(() =>
|
||||
view.init({
|
||||
@ -349,10 +366,19 @@ export class GridviewComponent
|
||||
}
|
||||
}
|
||||
|
||||
const view = this.options.createComponent({
|
||||
id: options.id,
|
||||
name: options.component,
|
||||
});
|
||||
const view = createComponent(
|
||||
options.id,
|
||||
options.component,
|
||||
this.options.components ?? {},
|
||||
this.options.frameworkComponents ?? {},
|
||||
this.options.frameworkComponentFactory
|
||||
? {
|
||||
createComponent:
|
||||
this.options.frameworkComponentFactory
|
||||
.createComponent,
|
||||
}
|
||||
: undefined
|
||||
);
|
||||
|
||||
view.init({
|
||||
params: options.params ?? {},
|
||||
|
||||
@ -1,5 +1,8 @@
|
||||
import { PanelInitParameters } from '../panel/types';
|
||||
import { IGridPanelComponentView } from './gridviewComponent';
|
||||
import {
|
||||
GridviewComponent,
|
||||
IGridPanelComponentView,
|
||||
} from './gridviewComponent';
|
||||
import { FunctionOrValue } from '../types';
|
||||
import {
|
||||
BasePanelView,
|
||||
@ -15,13 +18,6 @@ import { Emitter, Event } from '../events';
|
||||
import { IViewSize } from './gridview';
|
||||
import { BaseGrid, IGridPanelView } from './baseComponentGridview';
|
||||
|
||||
export interface Contraints {
|
||||
minimumWidth?: number;
|
||||
maximumWidth?: number;
|
||||
minimumHeight?: number;
|
||||
maximumHeight?: number;
|
||||
}
|
||||
|
||||
export interface GridviewInitParameters extends PanelInitParameters {
|
||||
minimumWidth?: number;
|
||||
maximumWidth?: number;
|
||||
@ -74,38 +70,6 @@ export abstract class GridviewPanel<
|
||||
}
|
||||
|
||||
get minimumWidth(): number {
|
||||
/**
|
||||
* defer to protected function to allow subclasses to override easily.
|
||||
* see https://github.com/microsoft/TypeScript/issues/338
|
||||
*/
|
||||
return this.__minimumWidth();
|
||||
}
|
||||
|
||||
get minimumHeight(): number {
|
||||
/**
|
||||
* defer to protected function to allow subclasses to override easily.
|
||||
* see https://github.com/microsoft/TypeScript/issues/338
|
||||
*/
|
||||
return this.__minimumHeight();
|
||||
}
|
||||
|
||||
get maximumHeight(): number {
|
||||
/**
|
||||
* defer to protected function to allow subclasses to override easily.
|
||||
* see https://github.com/microsoft/TypeScript/issues/338
|
||||
*/
|
||||
return this.__maximumHeight();
|
||||
}
|
||||
|
||||
get maximumWidth(): number {
|
||||
/**
|
||||
* defer to protected function to allow subclasses to override easily.
|
||||
* see https://github.com/microsoft/TypeScript/issues/338
|
||||
*/
|
||||
return this.__maximumWidth();
|
||||
}
|
||||
|
||||
protected __minimumWidth(): number {
|
||||
const width =
|
||||
typeof this._minimumWidth === 'function'
|
||||
? this._minimumWidth()
|
||||
@ -119,21 +83,7 @@ export abstract class GridviewPanel<
|
||||
return width;
|
||||
}
|
||||
|
||||
protected __maximumWidth(): number {
|
||||
const width =
|
||||
typeof this._maximumWidth === 'function'
|
||||
? this._maximumWidth()
|
||||
: this._maximumWidth;
|
||||
|
||||
if (width !== this._evaluatedMaximumWidth) {
|
||||
this._evaluatedMaximumWidth = width;
|
||||
this.updateConstraints();
|
||||
}
|
||||
|
||||
return width;
|
||||
}
|
||||
|
||||
protected __minimumHeight(): number {
|
||||
get minimumHeight(): number {
|
||||
const height =
|
||||
typeof this._minimumHeight === 'function'
|
||||
? this._minimumHeight()
|
||||
@ -147,7 +97,7 @@ export abstract class GridviewPanel<
|
||||
return height;
|
||||
}
|
||||
|
||||
protected __maximumHeight(): number {
|
||||
get maximumHeight(): number {
|
||||
const height =
|
||||
typeof this._maximumHeight === 'function'
|
||||
? this._maximumHeight()
|
||||
@ -161,12 +111,22 @@ export abstract class GridviewPanel<
|
||||
return height;
|
||||
}
|
||||
|
||||
get isActive(): boolean {
|
||||
return this.api.isActive;
|
||||
get maximumWidth(): number {
|
||||
const width =
|
||||
typeof this._maximumWidth === 'function'
|
||||
? this._maximumWidth()
|
||||
: this._maximumWidth;
|
||||
|
||||
if (width !== this._evaluatedMaximumWidth) {
|
||||
this._evaluatedMaximumWidth = width;
|
||||
this.updateConstraints();
|
||||
}
|
||||
|
||||
return width;
|
||||
}
|
||||
|
||||
get isVisible(): boolean {
|
||||
return this.api.isVisible;
|
||||
get isActive(): boolean {
|
||||
return this.api.isActive;
|
||||
}
|
||||
|
||||
constructor(
|
||||
|
||||
@ -17,7 +17,7 @@ export class LeafNode implements IView {
|
||||
this._onDidChange.event;
|
||||
private _size: number;
|
||||
private _orthogonalSize: number;
|
||||
private readonly _disposable: IDisposable;
|
||||
private _disposable: IDisposable;
|
||||
|
||||
private get minimumWidth(): number {
|
||||
return this.view.minimumWidth;
|
||||
|
||||
@ -1,34 +1,21 @@
|
||||
import { GridviewPanel } from './gridviewPanel';
|
||||
import { Orientation } from '../splitview/splitview';
|
||||
import { CreateComponentOptions } from '../dockview/options';
|
||||
import { ISplitviewStyles, Orientation } from '../splitview/splitview';
|
||||
import {
|
||||
ComponentConstructor,
|
||||
FrameworkFactory,
|
||||
} from '../panel/componentFactory';
|
||||
|
||||
export interface GridviewOptions {
|
||||
export interface GridviewComponentOptions {
|
||||
disableAutoResizing?: boolean;
|
||||
proportionalLayout?: boolean;
|
||||
proportionalLayout: boolean;
|
||||
orientation: Orientation;
|
||||
className?: string;
|
||||
hideBorders?: boolean;
|
||||
}
|
||||
|
||||
export interface GridviewFrameworkOptions {
|
||||
createComponent: (options: CreateComponentOptions) => GridviewPanel;
|
||||
}
|
||||
|
||||
export type GridviewComponentOptions = GridviewOptions &
|
||||
GridviewFrameworkOptions;
|
||||
|
||||
export const PROPERTY_KEYS_GRIDVIEW: (keyof GridviewOptions)[] = (() => {
|
||||
/**
|
||||
* by readong the keys from an empty value object TypeScript will error
|
||||
* when we add or remove new properties to `DockviewOptions`
|
||||
*/
|
||||
const properties: Record<keyof GridviewOptions, undefined> = {
|
||||
disableAutoResizing: undefined,
|
||||
proportionalLayout: undefined,
|
||||
orientation: undefined,
|
||||
hideBorders: undefined,
|
||||
className: undefined,
|
||||
components?: {
|
||||
[componentName: string]: ComponentConstructor<GridviewPanel>;
|
||||
};
|
||||
|
||||
return Object.keys(properties) as (keyof GridviewOptions)[];
|
||||
})();
|
||||
frameworkComponents?: {
|
||||
[componentName: string]: any;
|
||||
};
|
||||
frameworkComponentFactory?: FrameworkFactory<GridviewPanel>;
|
||||
styles?: ISplitviewStyles;
|
||||
parentElement: HTMLElement;
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user