mirror of
https://github.com/mathuo/dockview
synced 2025-02-14 12:25:45 +00:00
Merge pull request #174 from mathuo/172-zero-dependency-vanilla-js
refactor: expose a vanillajs export
This commit is contained in:
mathuo
GitHub
commit
a43ee59bc2
@ -13,8 +13,8 @@
|
||||
"test": "jest",
|
||||
"lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",
|
||||
"package": "node scripts/package.js",
|
||||
"package-all": "lerna run docs --scope dockview && node scripts/package.js",
|
||||
"build": "lerna run build --scope dockview",
|
||||
"package-all": "lerna run docs --scope '{dockview-core,dockview}' && node scripts/package.js",
|
||||
"build": "lerna run build --scope '{dockview-core,dockview}'",
|
||||
"clean": "lerna run clean",
|
||||
"bootstrap": "lerna bootstrap",
|
||||
"test:cov": "jest --coverage",
|
||||
|
||||
52
packages/dockview-core/README.md
Normal file
52
packages/dockview-core/README.md
Normal file
@ -0,0 +1,52 @@
|
||||
<div align="center">
|
||||
<h1>dockview</h1>
|
||||
|
||||
<p>Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support written in TypeScript</p>
|
||||
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
[](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)
|
||||
|
||||
##
|
||||
|
||||
Please see the website: https://dockview.dev
|
||||
|
||||
Want to inspect the latest deployment? Go to https://unpkg.com/browse/dockview@latest/
|
||||
|
||||
## Features
|
||||
|
||||
- Simple splitviews, nested splitviews (i.e. gridviews) supporting full layout managment with
|
||||
dockable and tabular views
|
||||
- Extensive API support at the component level and view level
|
||||
- Themable and customizable
|
||||
- Serialization / deserialization support
|
||||
- Tabular docking and Drag and Drop support
|
||||
- Documentation and examples
|
||||
|
||||
This project was inspired by many popular IDE editors. Some parts of the core resizable panelling are inspired by code found in the VSCode codebase, [splitview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/splitview) and [gridview](https://github.com/microsoft/vscode/tree/main/src/vs/base/browser/ui/grid).
|
||||
|
||||
## 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). Please see the [Getting Started Guide](https://mathuo.github.io/dockview/docs/).
|
||||
|
||||
```
|
||||
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>
|
||||
```
|
||||
6
packages/dockview-core/gulpfile.js
Normal file
6
packages/dockview-core/gulpfile.js
Normal file
@ -0,0 +1,6 @@
|
||||
const gulp = require('gulp');
|
||||
const buildfile = require('../../scripts/build');
|
||||
|
||||
buildfile.init();
|
||||
|
||||
gulp.task('run', gulp.series(['sass']));
|
||||
27
packages/dockview-core/jest.config.js
Normal file
27
packages/dockview-core/jest.config.js
Normal file
@ -0,0 +1,27 @@
|
||||
const { name } = require('./package');
|
||||
|
||||
const baseConfig = require('../../jest.config.base');
|
||||
|
||||
console.log('loaded');
|
||||
|
||||
module.exports = {
|
||||
...baseConfig,
|
||||
roots: ['<rootDir>/packages/dockview-core'],
|
||||
modulePaths: ['<rootDir>/packages/dockview-core/src'],
|
||||
displayName: { name, color: 'blue' },
|
||||
rootDir: '../../',
|
||||
collectCoverageFrom: [
|
||||
'<rootDir>/packages/dockview-core/src/**/*.{js,jsx,ts,tsx}',
|
||||
],
|
||||
setupFiles: [
|
||||
'<rootDir>/packages/dockview-core/src/__tests__/__mocks__/resizeObserver.js',
|
||||
],
|
||||
coveragePathIgnorePatterns: ['/node_modules/'],
|
||||
modulePathIgnorePatterns: [
|
||||
'<rootDir>/packages/dockview-core/src/__tests__/__mocks__',
|
||||
'<rootDir>/packages/dockview-core/src/__tests__/__test_utils__',
|
||||
],
|
||||
coverageDirectory: '<rootDir>/packages/dockview-core/coverage/',
|
||||
testResultsProcessor: 'jest-sonar-reporter',
|
||||
testEnvironment: 'jsdom',
|
||||
};
|
||||
68
packages/dockview-core/package.json
Normal file
68
packages/dockview-core/package.json
Normal file
@ -0,0 +1,68 @@
|
||||
{
|
||||
"name": "dockview-core",
|
||||
"version": "1.6.0",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
|
||||
"main": "./dist/cjs/index.js",
|
||||
"types": "./dist/cjs/index.d.ts",
|
||||
"module": "./dist/esm/index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/mathuo/dockview.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/mathuo/dockview/issues"
|
||||
},
|
||||
"homepage": "https://github.com/mathuo/dockview",
|
||||
"scripts": {
|
||||
"build:ci": "npm run build:cjs && npm run build:esm && npm run build:css",
|
||||
"build:cjs": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.json --extendedDiagnostics",
|
||||
"build:css": "gulp sass",
|
||||
"build:esm": "cross-env ../../node_modules/.bin/tsc --project ./tsconfig.esm.json --extendedDiagnostics",
|
||||
"build:modulefiles": "rollup -c",
|
||||
"build": "npm run build:ci && npm run build:modulefiles",
|
||||
"clean": "rimraf dist/ .build/",
|
||||
"docs": "typedoc",
|
||||
"prepack": "npm run rebuild && npm run test",
|
||||
"rebuild": "npm run clean && npm run build",
|
||||
"test": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core",
|
||||
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview-core --coverage",
|
||||
"dev-publish": "node ./scripts/publishExperimental.js"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
"README.md"
|
||||
],
|
||||
"keywords": [
|
||||
"splitview",
|
||||
"split-view",
|
||||
"gridview",
|
||||
"grid-view",
|
||||
"dockview",
|
||||
"dock-view",
|
||||
"grid",
|
||||
"tabs",
|
||||
"layout",
|
||||
"layout manager",
|
||||
"dock layout",
|
||||
"dock",
|
||||
"docking",
|
||||
"splitter",
|
||||
"drag-and-drop",
|
||||
"drag",
|
||||
"drop",
|
||||
"react",
|
||||
"react-component"
|
||||
],
|
||||
"author": "https://github.com/mathuo",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-typescript": "^11.0.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"postcss": "^8.4.21",
|
||||
"rimraf": "^4.1.2",
|
||||
"rollup": "^3.15.0",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typedoc": "^0.23.25"
|
||||
}
|
||||
}
|
||||
105
packages/dockview-core/rollup.config.js
Normal file
105
packages/dockview-core/rollup.config.js
Normal file
@ -0,0 +1,105 @@
|
||||
/* eslint-disable */
|
||||
|
||||
const { join } = require('path');
|
||||
const typescript = require('@rollup/plugin-typescript');
|
||||
const { terser } = require('rollup-plugin-terser');
|
||||
const postcss = require('rollup-plugin-postcss');
|
||||
|
||||
const { name, version, homepage, license } = require('./package.json');
|
||||
const main = join(__dirname, './scripts/rollupEntryTarget.ts');
|
||||
const mainNoStyles = join(__dirname, './src/index.ts');
|
||||
const outputDir = join(__dirname, 'dist');
|
||||
|
||||
function outputFile(format, isMinified, withStyles) {
|
||||
let filename = join(outputDir, name);
|
||||
|
||||
if (format !== 'umd') {
|
||||
filename += `.${format}`;
|
||||
}
|
||||
if (isMinified) {
|
||||
filename += '.min';
|
||||
}
|
||||
if (!withStyles) {
|
||||
filename += '.noStyle';
|
||||
}
|
||||
|
||||
return `${filename}.js`;
|
||||
}
|
||||
|
||||
function getInput(options) {
|
||||
const { withStyles } = options;
|
||||
|
||||
if (withStyles) {
|
||||
return main;
|
||||
}
|
||||
|
||||
return mainNoStyles;
|
||||
}
|
||||
|
||||
function createBundle(format, options) {
|
||||
const { withStyles, isMinified, isReact } = options;
|
||||
const input = getInput(options);
|
||||
const file = outputFile(format, isMinified, withStyles, isReact);
|
||||
|
||||
const external = [];
|
||||
|
||||
const output = {
|
||||
file,
|
||||
format,
|
||||
globals: {},
|
||||
banner: [
|
||||
`/**`,
|
||||
` * ${name}`,
|
||||
` * @version ${version}`,
|
||||
` * @link ${homepage}`,
|
||||
` * @license ${license}`,
|
||||
` */`,
|
||||
].join('\n'),
|
||||
};
|
||||
|
||||
const plugins = [
|
||||
typescript({
|
||||
tsconfig: 'tsconfig.esm.json',
|
||||
incremental: false,
|
||||
tsBuildInfoFile: undefined,
|
||||
outDir: undefined,
|
||||
declaration: false,
|
||||
}),
|
||||
];
|
||||
|
||||
if (isMinified) {
|
||||
plugins.push(terser());
|
||||
}
|
||||
if (withStyles) {
|
||||
plugins.push(postcss());
|
||||
}
|
||||
|
||||
if (format === 'umd') {
|
||||
output['name'] = name;
|
||||
}
|
||||
|
||||
return {
|
||||
input,
|
||||
output,
|
||||
plugins,
|
||||
external,
|
||||
};
|
||||
}
|
||||
|
||||
module.exports = [
|
||||
// amd
|
||||
createBundle('amd', { withStyles: false, isMinified: false }),
|
||||
createBundle('amd', { withStyles: true, isMinified: false }),
|
||||
createBundle('amd', { withStyles: false, isMinified: true }),
|
||||
createBundle('amd', { withStyles: true, isMinified: true }),
|
||||
// umd
|
||||
createBundle('umd', { withStyles: false, isMinified: false }),
|
||||
createBundle('umd', { withStyles: true, isMinified: false }),
|
||||
createBundle('umd', { withStyles: false, isMinified: true }),
|
||||
createBundle('umd', { withStyles: true, isMinified: true }),
|
||||
// cjs
|
||||
createBundle('cjs', { withStyles: true, isMinified: false }),
|
||||
// esm
|
||||
createBundle('esm', { withStyles: true, isMinified: false }),
|
||||
createBundle('esm', { withStyles: true, isMinified: true }),
|
||||
];
|
||||
63
packages/dockview-core/scripts/publishExperimental.js
Normal file
63
packages/dockview-core/scripts/publishExperimental.js
Normal file
@ -0,0 +1,63 @@
|
||||
const cp = require('child_process');
|
||||
const fs = require('fs-extra');
|
||||
const path = require('path');
|
||||
|
||||
const rootDir = path.join(__dirname, '..');
|
||||
const publishDir = path.join(rootDir, '__publish__');
|
||||
|
||||
cp.execSync('npm run clean', { cwd: rootDir, stdio: 'inherit' });
|
||||
cp.execSync('npm run test', { cwd: __dirname, stdio: 'inherit' });
|
||||
cp.execSync('npm run build', { cwd: rootDir, stdio: 'inherit' });
|
||||
|
||||
if (fs.existsSync(publishDir)) {
|
||||
fs.removeSync(publishDir);
|
||||
}
|
||||
fs.mkdirSync(publishDir);
|
||||
|
||||
if (!fs.existsSync(path.join(publishDir, 'dist'))) {
|
||||
fs.mkdirSync(path.join(publishDir, 'dist'));
|
||||
}
|
||||
|
||||
const package = JSON.parse(
|
||||
fs.readFileSync(path.join(rootDir, 'package.json')).toString()
|
||||
);
|
||||
|
||||
for (const file of package.files) {
|
||||
fs.copySync(path.join(rootDir, file), path.join(publishDir, file));
|
||||
}
|
||||
|
||||
const result = cp
|
||||
.execSync('git rev-parse --short HEAD', {
|
||||
cwd: rootDir,
|
||||
})
|
||||
.toString()
|
||||
.replace(/\n/g, '');
|
||||
|
||||
function formatDate() {
|
||||
const date = new Date();
|
||||
|
||||
function pad(value) {
|
||||
if (value.toString().length === 1) {
|
||||
return `0${value}`;
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
return `${date.getFullYear()}${pad(date.getMonth() + 1)}${pad(
|
||||
date.getDate()
|
||||
)}`;
|
||||
}
|
||||
|
||||
package.version = `0.0.0-experimental-${result}-${formatDate()}`;
|
||||
package.scripts = {};
|
||||
|
||||
fs.writeFileSync(
|
||||
path.join(publishDir, 'package.json'),
|
||||
JSON.stringify(package, null, 4)
|
||||
);
|
||||
|
||||
const command = 'npm publish --tag experimental';
|
||||
|
||||
cp.execSync(command, { cwd: publishDir, stdio: 'inherit' });
|
||||
|
||||
fs.removeSync(publishDir);
|
||||
2
packages/dockview-core/scripts/rollupEntryTarget.ts
Normal file
2
packages/dockview-core/scripts/rollupEntryTarget.ts
Normal file
@ -0,0 +1,2 @@
|
||||
import '../dist/styles/dockview.css';
|
||||
export * from '../src/index';
|
||||
@ -0,0 +1,13 @@
|
||||
class ResizeObserver {
|
||||
observe() {
|
||||
// do nothing
|
||||
}
|
||||
unobserve() {
|
||||
// do nothing
|
||||
}
|
||||
disconnect() {
|
||||
// do nothing
|
||||
}
|
||||
}
|
||||
|
||||
window.ResizeObserver = ResizeObserver;
|
||||
14
packages/dockview-core/src/__tests__/__test_utils__/utils.ts
Normal file
14
packages/dockview-core/src/__tests__/__test_utils__/utils.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export function setMockRefElement(node: Partial<HTMLElement>): void {
|
||||
const mockRef = {
|
||||
get current() {
|
||||
return node;
|
||||
},
|
||||
set current(_value) {
|
||||
//noop
|
||||
},
|
||||
};
|
||||
|
||||
jest.spyOn(React, 'useRef').mockReturnValueOnce(mockRef);
|
||||
}
|
||||
@ -6,7 +6,6 @@ import {
|
||||
} from '../../groupview/types';
|
||||
import { PanelUpdateEvent } from '../../panel/types';
|
||||
import { Orientation } from '../../splitview/core/splitview';
|
||||
import { ReactPanelDeserialzier } from '../../react/deserializer';
|
||||
import { GroupPanel } from '../../groupview/groupviewPanel';
|
||||
import { CompositeDisposable } from '../../lifecycle';
|
||||
import {
|
||||
@ -22,6 +21,7 @@ import {
|
||||
DockviewPanelApi,
|
||||
DockviewPanelApiImpl,
|
||||
} from '../../api/dockviewPanelApi';
|
||||
import { DefaultDockviewDeserialzier } from '../../dockview/deserializer';
|
||||
|
||||
class PanelContentPartTest implements IContentRenderer {
|
||||
element: HTMLElement = document.createElement('div');
|
||||
@ -512,7 +512,7 @@ describe('dockviewComponent', () => {
|
||||
test('serialization', () => {
|
||||
dockview.layout(1000, 1000);
|
||||
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1038,7 +1038,7 @@ describe('dockviewComponent', () => {
|
||||
fromJSON: (panelData: GroupviewPanelState): IDockviewPanel => {
|
||||
return new TestGroupPanel(
|
||||
panelData.id,
|
||||
panelData.title,
|
||||
panelData.title || '',
|
||||
dockview
|
||||
);
|
||||
},
|
||||
@ -1427,7 +1427,7 @@ describe('dockviewComponent', () => {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
dockview.layout(500, 1000);
|
||||
|
||||
@ -1552,7 +1552,7 @@ describe('dockviewComponent', () => {
|
||||
})
|
||||
);
|
||||
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1686,7 +1686,7 @@ describe('dockviewComponent', () => {
|
||||
default: PanelContentPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1778,7 +1778,7 @@ describe('dockviewComponent', () => {
|
||||
test_tab_id: PanelTabPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1890,7 +1890,7 @@ describe('dockviewComponent', () => {
|
||||
test_tab_id: PanelTabPartTest,
|
||||
},
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
dockview.fromJSON({
|
||||
activeGroup: 'group-1',
|
||||
grid: {
|
||||
@ -1980,7 +1980,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2086,7 +2086,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2227,7 +2227,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
|
||||
|
||||
@ -2355,7 +2355,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.groups.length).toBe(0);
|
||||
});
|
||||
@ -2372,7 +2372,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(dockview.groups.length).toBe(0);
|
||||
|
||||
@ -2412,7 +2412,7 @@ describe('dockviewComponent', () => {
|
||||
},
|
||||
orientation: Orientation.HORIZONTAL,
|
||||
});
|
||||
dockview.deserializer = new ReactPanelDeserialzier(dockview);
|
||||
dockview.deserializer = new DefaultDockviewDeserialzier(dockview);
|
||||
|
||||
expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
|
||||
grid: {
|
||||
@ -1,4 +1,3 @@
|
||||
import { GridviewPanelApiImpl } from '../../api/gridviewPanelApi';
|
||||
import { GridviewComponent } from '../../gridview/gridviewComponent';
|
||||
import { GridviewPanel } from '../../gridview/gridviewPanel';
|
||||
import { CompositeDisposable } from '../../lifecycle';
|
||||
@ -7,7 +6,7 @@ import { Orientation } from '../../splitview/core/splitview';
|
||||
|
||||
class TestGridview extends GridviewPanel {
|
||||
constructor(id: string, componentName: string) {
|
||||
super(id, componentName, new GridviewPanelApiImpl(id));
|
||||
super(id, componentName);
|
||||
|
||||
this.api.initialize(this);
|
||||
|
||||
@ -32,8 +32,8 @@ import { IView, Orientation, Sizing } from '../splitview/core/splitview';
|
||||
import { ISplitviewPanel } from '../splitview/splitviewPanel';
|
||||
import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
|
||||
import { Emitter, Event } from '../events';
|
||||
import { PaneviewDropEvent } from '../react';
|
||||
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
|
||||
|
||||
export interface CommonApi<T = any> {
|
||||
readonly height: number;
|
||||
@ -3,10 +3,10 @@ import {
|
||||
GroupPanelPartInitParameters,
|
||||
IContentRenderer,
|
||||
ITabRenderer,
|
||||
GroupPanelUpdateEvent,
|
||||
} from '../groupview/types';
|
||||
import { GroupPanel } from '../groupview/groupviewPanel';
|
||||
import { IDisposable } from '../lifecycle';
|
||||
import { GroupPanelUpdateEvent } from '../groupview/types';
|
||||
|
||||
export interface IGroupPanelView extends IDisposable {
|
||||
readonly content: IContentRenderer;
|
||||
@ -1,15 +1,17 @@
|
||||
import { DockviewComponent } from '../dockview/dockviewComponent';
|
||||
import { GroupviewPanelState } from '../groupview/types';
|
||||
import { DockviewPanel, IDockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { IPanelDeserializer } from '../dockview/deserializer';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import { DockviewApi } from '../api/component.api';
|
||||
import { DefaultTab } from '../dockview/components/tab/defaultTab';
|
||||
import { DefaultGroupPanelView } from '../dockview/defaultGroupPanelView';
|
||||
import { GroupviewPanelState, ITabRenderer } from '../groupview/types';
|
||||
import { GroupPanel } from '../groupview/groupviewPanel';
|
||||
import { ITabRenderer } from '../groupview/types';
|
||||
import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
|
||||
import { DockviewComponent } from './dockviewComponent';
|
||||
import { createComponent } from '../panel/componentFactory';
|
||||
import { DefaultTab } from './components/tab/defaultTab';
|
||||
import { DefaultGroupPanelView } from './defaultGroupPanelView';
|
||||
import { DockviewApi } from '../api/component.api';
|
||||
|
||||
export class ReactPanelDeserialzier implements IPanelDeserializer {
|
||||
export interface IPanelDeserializer {
|
||||
fromJSON(panelData: GroupviewPanelState, group: GroupPanel): IDockviewPanel;
|
||||
}
|
||||
|
||||
export class DefaultDockviewDeserialzier implements IPanelDeserializer {
|
||||
constructor(private readonly layout: DockviewComponent) {}
|
||||
|
||||
public fromJSON(
|
||||
@ -6,7 +6,6 @@ import {
|
||||
} from '../gridview/gridview';
|
||||
import { directionToPosition, Droptarget, Position } from '../dnd/droptarget';
|
||||
import { tail, sequenceEquals } from '../array';
|
||||
import { GroupviewPanelState } from '../groupview/types';
|
||||
import { DockviewPanel, IDockviewPanel } from './dockviewPanel';
|
||||
import { CompositeDisposable } from '../lifecycle';
|
||||
import { Event, Emitter } from '../events';
|
||||
@ -15,6 +14,7 @@ import {
|
||||
IContentRenderer,
|
||||
ITabRenderer,
|
||||
IWatermarkRenderer,
|
||||
GroupviewPanelState,
|
||||
} from '../groupview/types';
|
||||
import { sequentialNumberGenerator } from '../math';
|
||||
import { IPanelDeserializer } from './deserializer';
|
||||
@ -7,15 +7,20 @@ import {
|
||||
WatermarkConstructor,
|
||||
IWatermarkRenderer,
|
||||
} from '../groupview/types';
|
||||
import { GroupPanel } from '../groupview/groupviewPanel';
|
||||
import { GroupPanel, GroupviewPanelApi } from '../groupview/groupviewPanel';
|
||||
import { ISplitviewStyles, Orientation } from '../splitview/core/splitview';
|
||||
import { FrameworkFactory } from '../types';
|
||||
import { DockviewDropTargets } from '../groupview/dnd';
|
||||
import { PanelTransfer } from '../dnd/dataTransfer';
|
||||
import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
|
||||
import { IDisposable } from '../lifecycle';
|
||||
import { Position } from '../dnd/droptarget';
|
||||
import { IDockviewPanel } from './dockviewPanel';
|
||||
|
||||
export interface IGroupControlRenderer extends IDisposable {
|
||||
readonly element: HTMLElement;
|
||||
init(params: { containerApi: DockviewApi; api: GroupviewPanelApi }): void;
|
||||
}
|
||||
|
||||
export interface GroupPanelFrameworkComponentFactory {
|
||||
content: FrameworkFactory<IContentRenderer>;
|
||||
tab: FrameworkFactory<ITabRenderer>;
|
||||
@ -126,8 +126,8 @@ export abstract class GridviewPanel
|
||||
return this.api.isActive;
|
||||
}
|
||||
|
||||
constructor(id: string, component: string, api: GridviewPanelApiImpl) {
|
||||
super(id, component, api);
|
||||
constructor(id: string, component: string) {
|
||||
super(id, component, new GridviewPanelApiImpl(id));
|
||||
|
||||
this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
|
||||
|
||||
@ -13,8 +13,8 @@ import { ITabsContainer, TabsContainer } from './titlebar/tabsContainer';
|
||||
import { IWatermarkRenderer } from './types';
|
||||
import { GroupPanel } from './groupviewPanel';
|
||||
import { DockviewDropTargets } from './dnd';
|
||||
import { IGroupControlRenderer } from '../react/dockview/groupControlsRenderer';
|
||||
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
||||
import { IGroupControlRenderer } from '../dockview/options';
|
||||
|
||||
export interface DndService {
|
||||
canDisplayOverlay(
|
||||
@ -74,7 +74,7 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel {
|
||||
id: string,
|
||||
options: GroupOptions
|
||||
) {
|
||||
super(id, 'groupview_default', new GroupviewApi(id));
|
||||
super(id, 'groupview_default');
|
||||
|
||||
this._model = new Groupview(this.element, accessor, id, options, this);
|
||||
}
|
||||
@ -53,6 +53,7 @@ export interface IContentRenderer extends IPanel {
|
||||
readonly onDidBlur?: Event<void>;
|
||||
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
|
||||
init(parameters: GroupPanelContentPartInitParameters): void;
|
||||
layout(width: number, height: number): void;
|
||||
}
|
||||
|
||||
// watermark component
|
||||
84
packages/dockview-core/src/index.ts
Normal file
84
packages/dockview-core/src/index.ts
Normal file
@ -0,0 +1,84 @@
|
||||
export * from './hostedContainer';
|
||||
|
||||
export * from './dnd/dataTransfer';
|
||||
|
||||
export { watchElementResize } from './dom';
|
||||
|
||||
/**
|
||||
* Events, Emitters and Disposables are very common concepts that most codebases will contain.
|
||||
* We export them with a 'Dockview' prefix here to prevent accidental use by others.
|
||||
*/
|
||||
export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events';
|
||||
export {
|
||||
IDisposable as IDockviewDisposable,
|
||||
MutableDisposable as DockviewMutableDisposable,
|
||||
CompositeDisposable as DockviewCompositeDisposable,
|
||||
} from './lifecycle';
|
||||
|
||||
export * from './panel/types';
|
||||
export * from './panel/componentFactory';
|
||||
|
||||
export * from './splitview/core/splitview';
|
||||
export * from './splitview/core/options';
|
||||
|
||||
export * from './paneview/paneview';
|
||||
export * from './gridview/gridview';
|
||||
export * from './groupview/groupview';
|
||||
export * from './gridview/baseComponentGridview';
|
||||
|
||||
export * from './paneview/draggablePaneviewPanel';
|
||||
|
||||
export * from './groupview/panel/content';
|
||||
export * from './groupview/tab';
|
||||
export * from './groupview/dnd';
|
||||
export * from './groupview/types';
|
||||
export * from './groupview/groupviewPanel';
|
||||
|
||||
export * from './dockview/options';
|
||||
export * from './dockview/dockviewPanel';
|
||||
export * from './dockview/components/tab/defaultTab';
|
||||
export * from './dockview/deserializer';
|
||||
|
||||
export * from './dockview/dockviewComponent';
|
||||
export * from './gridview/gridviewComponent';
|
||||
export * from './splitview/splitviewComponent';
|
||||
export * from './paneview/paneviewComponent';
|
||||
export { PaneviewComponentOptions } from './paneview/options';
|
||||
|
||||
export * from './gridview/gridviewPanel';
|
||||
export * from './splitview/splitviewPanel';
|
||||
export * from './paneview/paneviewPanel';
|
||||
export * from './groupview/types';
|
||||
|
||||
export { Event } from './events';
|
||||
export {
|
||||
Position,
|
||||
positionToDirection,
|
||||
directionToPosition,
|
||||
} from './dnd/droptarget';
|
||||
export {
|
||||
FocusEvent,
|
||||
PanelDimensionChangeEvent,
|
||||
VisibilityEvent,
|
||||
ActiveEvent,
|
||||
PanelApi,
|
||||
} from './api/panelApi';
|
||||
export {
|
||||
SizeEvent,
|
||||
GridviewPanelApi,
|
||||
GridConstraintChangeEvent,
|
||||
} from './api/gridviewPanelApi';
|
||||
export { TitleEvent, DockviewPanelApi } from './api/dockviewPanelApi';
|
||||
export {
|
||||
PanelSizeEvent,
|
||||
PanelConstraintChangeEvent,
|
||||
SplitviewPanelApi,
|
||||
} from './api/splitviewPanelApi';
|
||||
export { ExpansionEvent, PaneviewPanelApi } from './api/paneviewPanelApi';
|
||||
export {
|
||||
CommonApi,
|
||||
SplitviewApi,
|
||||
PaneviewApi,
|
||||
GridviewApi,
|
||||
DockviewApi,
|
||||
} from './api/component.api';
|
||||
@ -1,3 +1,4 @@
|
||||
import { PaneviewApi } from '../api/component.api';
|
||||
import { DragHandler } from '../dnd/abstractDragHandler';
|
||||
import {
|
||||
getPaneData,
|
||||
@ -15,16 +16,17 @@ import {
|
||||
PaneviewPanel,
|
||||
} from './paneviewPanel';
|
||||
|
||||
export interface PaneviewDropEvent2 extends DroptargetEvent {
|
||||
export interface PaneviewDropEvent extends DroptargetEvent {
|
||||
panel: IPaneviewPanel;
|
||||
getData: () => PaneTransfer | undefined;
|
||||
api: PaneviewApi;
|
||||
}
|
||||
|
||||
export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
private handler: DragHandler | undefined;
|
||||
private target: Droptarget | undefined;
|
||||
|
||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
|
||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
|
||||
readonly onDidDrop = this._onDidDrop.event;
|
||||
|
||||
constructor(
|
||||
@ -117,6 +119,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
this._onDidDrop.fire({
|
||||
...event,
|
||||
panel: this,
|
||||
api: new PaneviewApi(this.accessor),
|
||||
getData: getPaneData,
|
||||
});
|
||||
return;
|
||||
@ -133,6 +136,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
...event,
|
||||
panel: this,
|
||||
getData: getPaneData,
|
||||
api: new PaneviewApi(this.accessor),
|
||||
});
|
||||
return;
|
||||
}
|
||||
@ -21,7 +21,7 @@ import {
|
||||
} from './paneviewPanel';
|
||||
import {
|
||||
DraggablePaneviewPanel,
|
||||
PaneviewDropEvent2,
|
||||
PaneviewDropEvent,
|
||||
} from './draggablePaneviewPanel';
|
||||
import { DefaultHeader } from './defaultPaneviewHeader';
|
||||
import { sequentialNumberGenerator } from '../math';
|
||||
@ -115,7 +115,7 @@ export interface IPaneviewComponent extends IDisposable {
|
||||
readonly options: PaneviewComponentOptions;
|
||||
readonly onDidAddView: Event<PaneviewPanel>;
|
||||
readonly onDidRemoveView: Event<PaneviewPanel>;
|
||||
readonly onDidDrop: Event<PaneviewDropEvent2>;
|
||||
readonly onDidDrop: Event<PaneviewDropEvent>;
|
||||
readonly onDidLayoutChange: Event<void>;
|
||||
readonly onDidLayoutFromJSON: Event<void>;
|
||||
addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
|
||||
@ -146,8 +146,8 @@ export class PaneviewComponent
|
||||
private readonly _onDidLayoutChange = new Emitter<void>();
|
||||
readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
|
||||
|
||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
|
||||
readonly onDidDrop: Event<PaneviewDropEvent2> = this._onDidDrop.event;
|
||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
|
||||
readonly onDidDrop: Event<PaneviewDropEvent> = this._onDidDrop.event;
|
||||
|
||||
private readonly _onDidAddView = new Emitter<PaneviewPanel>();
|
||||
readonly onDidAddView = this._onDidAddView.event;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user