mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 17:02:04 +00:00
chore: split packages
This commit is contained in:
mathuo
parent
d09b2e8ff4
commit
5f72f5a36d
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'],
|
||||||
|
modulePaths: ['<rootDir>/packages/dockview/src'],
|
||||||
|
displayName: { name, color: 'blue' },
|
||||||
|
rootDir: '../../',
|
||||||
|
collectCoverageFrom: [
|
||||||
|
'<rootDir>/packages/dockview/src/**/*.{js,jsx,ts,tsx}',
|
||||||
|
],
|
||||||
|
setupFiles: [
|
||||||
|
'<rootDir>/packages/dockview/src/__tests__/__mocks__/resizeObserver.js',
|
||||||
|
],
|
||||||
|
coveragePathIgnorePatterns: ['/node_modules/'],
|
||||||
|
modulePathIgnorePatterns: [
|
||||||
|
'<rootDir>/packages/dockview/src/__tests__/__mocks__',
|
||||||
|
'<rootDir>/packages/dockview/src/__tests__/__test_utils__',
|
||||||
|
],
|
||||||
|
coverageDirectory: '<rootDir>/packages/dockview/coverage/',
|
||||||
|
testResultsProcessor: 'jest-sonar-reporter',
|
||||||
|
testEnvironment: 'jsdom',
|
||||||
|
};
|
||||||
73
packages/dockview-core/package.json
Normal file
73
packages/dockview-core/package.json
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
{
|
||||||
|
"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",
|
||||||
|
"test:cov": "cross-env ../../node_modules/.bin/jest --selectProjects dockview --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",
|
||||||
|
"@testing-library/react": "^13.4.0",
|
||||||
|
"@types/react": "^18.0.28",
|
||||||
|
"@types/react-dom": "^18.0.11",
|
||||||
|
"cross-env": "^7.0.3",
|
||||||
|
"postcss": "^8.4.21",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"rimraf": "^4.1.2",
|
||||||
|
"rollup": "^3.15.0",
|
||||||
|
"rollup-plugin-postcss": "^4.0.2",
|
||||||
|
"rollup-plugin-terser": "^7.0.2",
|
||||||
|
"typedoc": "^0.23.25"
|
||||||
|
}
|
||||||
|
}
|
||||||
141
packages/dockview-core/rollup.config.js
Normal file
141
packages/dockview-core/rollup.config.js
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
/* 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 reactMain = join(__dirname, './scripts/rollupEntryTarget-react.ts');
|
||||||
|
const reactMainNoStyles = join(__dirname, './src/index.ts');
|
||||||
|
const main = join(__dirname, './scripts/rollupEntryTarget-core.ts');
|
||||||
|
const mainNoStyles = join(__dirname, './src/core.ts');
|
||||||
|
const outputDir = join(__dirname, 'dist');
|
||||||
|
|
||||||
|
function outputFile(format, isMinified, withStyles, isReact) {
|
||||||
|
let filename = join(outputDir, name);
|
||||||
|
|
||||||
|
if (isReact) {
|
||||||
|
filename += '.react';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (format !== 'umd') {
|
||||||
|
filename += `.${format}`;
|
||||||
|
}
|
||||||
|
if (isMinified) {
|
||||||
|
filename += '.min';
|
||||||
|
}
|
||||||
|
if (!withStyles) {
|
||||||
|
filename += '.noStyle';
|
||||||
|
}
|
||||||
|
|
||||||
|
return `${filename}.js`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function getInput(options) {
|
||||||
|
const { withStyles, isReact } = options;
|
||||||
|
|
||||||
|
if (withStyles) {
|
||||||
|
return isReact ? reactMain : main;
|
||||||
|
}
|
||||||
|
|
||||||
|
return isReact ? reactMainNoStyles : 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isReact) {
|
||||||
|
// TODO: should be conditional on whether user wants the React wrappers
|
||||||
|
external.push('react', 'react-dom');
|
||||||
|
|
||||||
|
if (format === 'umd') {
|
||||||
|
// TODO: should be conditional on whether user wants the React wrappers
|
||||||
|
output.globals['react'] = 'React';
|
||||||
|
output.globals['react-dom'] = 'ReactDOM';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
input,
|
||||||
|
output,
|
||||||
|
plugins,
|
||||||
|
external,
|
||||||
|
// manualChunks(id) {
|
||||||
|
// if (id.includes('src/react/')) {
|
||||||
|
// return 'react';
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
// amd
|
||||||
|
createBundle('amd', {
|
||||||
|
withStyles: false,
|
||||||
|
isMinified: false,
|
||||||
|
isReact: true,
|
||||||
|
}),
|
||||||
|
createBundle('amd', { withStyles: true, isMinified: false, isReact: true }),
|
||||||
|
createBundle('amd', { withStyles: false, isMinified: true, isReact: true }),
|
||||||
|
createBundle('amd', { withStyles: true, isMinified: true, isReact: true }),
|
||||||
|
// umd
|
||||||
|
createBundle('umd', {
|
||||||
|
withStyles: false,
|
||||||
|
isMinified: false,
|
||||||
|
isReact: true,
|
||||||
|
}),
|
||||||
|
createBundle('umd', { withStyles: true, isMinified: false, isReact: true }),
|
||||||
|
createBundle('umd', { withStyles: false, isMinified: true, isReact: true }),
|
||||||
|
createBundle('umd', { withStyles: true, isMinified: true, isReact: true }),
|
||||||
|
// cjs
|
||||||
|
createBundle('cjs', { withStyles: true, isMinified: false, isReact: true }),
|
||||||
|
// esm
|
||||||
|
createBundle('esm', { withStyles: true, isMinified: false, isReact: true }),
|
||||||
|
createBundle('esm', { withStyles: true, isMinified: true, isReact: true }),
|
||||||
|
// core bundles (no-react)
|
||||||
|
createBundle('umd', {
|
||||||
|
withStyles: true,
|
||||||
|
isMinified: false,
|
||||||
|
isReact: false,
|
||||||
|
}),
|
||||||
|
];
|
||||||
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-core.ts
Normal file
2
packages/dockview-core/scripts/rollupEntryTarget-core.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
import '../dist/styles/dockview.css';
|
||||||
|
export * from '../src/core';
|
||||||
@ -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);
|
||||||
|
}
|
||||||
@ -32,8 +32,8 @@ import { IView, Orientation, Sizing } from '../splitview/core/splitview';
|
|||||||
import { ISplitviewPanel } from '../splitview/splitviewPanel';
|
import { ISplitviewPanel } from '../splitview/splitviewPanel';
|
||||||
import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
|
import { GroupPanel, IGroupviewPanel } from '../groupview/groupviewPanel';
|
||||||
import { Emitter, Event } from '../events';
|
import { Emitter, Event } from '../events';
|
||||||
import { PaneviewDropEvent } from '../react';
|
|
||||||
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
import { IDockviewPanel } from '../dockview/dockviewPanel';
|
||||||
|
import { PaneviewDropEvent } from '../paneview/draggablePaneviewPanel';
|
||||||
|
|
||||||
export interface CommonApi<T = any> {
|
export interface CommonApi<T = any> {
|
||||||
readonly height: number;
|
readonly height: number;
|
||||||
@ -1,16 +1,36 @@
|
|||||||
|
export * from './hostedContainer';
|
||||||
|
|
||||||
export * from './dnd/dataTransfer';
|
export * from './dnd/dataTransfer';
|
||||||
|
|
||||||
|
export * from './math';
|
||||||
|
export * from './dom';
|
||||||
|
export * from './events';
|
||||||
|
export * from './lifecycle';
|
||||||
|
|
||||||
|
export * from './panel/types';
|
||||||
|
export * from './panel/componentFactory';
|
||||||
|
|
||||||
export * from './splitview/core/splitview';
|
export * from './splitview/core/splitview';
|
||||||
|
export * from './splitview/core/options';
|
||||||
|
|
||||||
export * from './paneview/paneview';
|
export * from './paneview/paneview';
|
||||||
export * from './gridview/gridview';
|
export * from './gridview/gridview';
|
||||||
export * from './groupview/groupview';
|
export * from './groupview/groupview';
|
||||||
export * from './gridview/baseComponentGridview';
|
export * from './gridview/baseComponentGridview';
|
||||||
|
|
||||||
|
export * from './paneview/draggablePaneviewPanel';
|
||||||
|
|
||||||
export * from './groupview/panel/content';
|
export * from './groupview/panel/content';
|
||||||
export * from './groupview/tab';
|
export * from './groupview/tab';
|
||||||
export * from './groupview/dnd';
|
export * from './groupview/dnd';
|
||||||
export * from './groupview/types';
|
export * from './groupview/types';
|
||||||
|
export * from './groupview/groupviewPanel';
|
||||||
|
|
||||||
export * from './dockview/options';
|
export * from './dockview/options';
|
||||||
|
export * from './dockview/dockviewPanel';
|
||||||
|
export * from './dockview/components/tab/defaultTab';
|
||||||
|
export * from './dockview/deserializer';
|
||||||
|
export * from './dockview/defaultGroupPanelView';
|
||||||
|
|
||||||
export * from './dockview/dockviewComponent';
|
export * from './dockview/dockviewComponent';
|
||||||
export * from './gridview/gridviewComponent';
|
export * from './gridview/gridviewComponent';
|
||||||
@ -23,8 +43,6 @@ export * from './splitview/splitviewPanel';
|
|||||||
export * from './paneview/paneviewPanel';
|
export * from './paneview/paneviewPanel';
|
||||||
export * from './groupview/types';
|
export * from './groupview/types';
|
||||||
|
|
||||||
export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
|
|
||||||
|
|
||||||
export { Event } from './events';
|
export { Event } from './events';
|
||||||
export { IDisposable } from './lifecycle';
|
export { IDisposable } from './lifecycle';
|
||||||
export {
|
export {
|
||||||
117
packages/dockview-core/src/dockview/validation.ts
Normal file
117
packages/dockview-core/src/dockview/validation.ts
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
import { SerializedGridObject } from '../gridview/gridview';
|
||||||
|
import { GroupPanelViewState } from '../groupview/groupview';
|
||||||
|
import { GroupviewPanelState } from '../groupview/types';
|
||||||
|
import { Orientation } from '../splitview/core/splitview';
|
||||||
|
import { SerializedDockview } from './dockviewComponent';
|
||||||
|
|
||||||
|
function validateGroupViewPanelState(value: GroupviewPanelState): void {
|
||||||
|
if (typeof value.id !== 'string') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof value.title !== 'string') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value.params !== undefined && typeof value.params !== 'object') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateGroupPanelViewState(value: GroupPanelViewState): void {
|
||||||
|
if (typeof value.id !== 'string') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
if (value.locked !== undefined && typeof value.locked !== 'boolean') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
if (value.hideHeader !== undefined && typeof value.locked !== 'boolean') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
value.activeView !== undefined &&
|
||||||
|
typeof value.activeView !== 'string'
|
||||||
|
) {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(value.views)) {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const child of value.views) {
|
||||||
|
if (typeof child !== 'string') {
|
||||||
|
if (!Array.isArray(value.views)) {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function validateSerializedGridObject(
|
||||||
|
value: SerializedGridObject<GroupPanelViewState>
|
||||||
|
): void {
|
||||||
|
if (value.size !== undefined && typeof value.size !== 'number') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value.visible !== undefined && typeof value.size !== 'boolean') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (value.type !== 'branch' && value.type !== 'leaf') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(value.data)) {
|
||||||
|
for (const child of value.data) {
|
||||||
|
validateSerializedGridObject(child);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
validateGroupPanelViewState(value.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function validateSerializedDockview(data: SerializedDockview): void {
|
||||||
|
if (typeof data !== 'object') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
const { grid, panels, options, activeGroup } = data;
|
||||||
|
|
||||||
|
if (typeof grid !== 'object') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof grid.height !== 'number') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof grid.width !== 'number') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
grid.orientation !== Orientation.HORIZONTAL &&
|
||||||
|
grid.orientation !== Orientation.VERTICAL
|
||||||
|
) {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
validateSerializedGridObject(grid.root);
|
||||||
|
|
||||||
|
if (
|
||||||
|
data.activeGroup !== undefined &&
|
||||||
|
typeof data.activeGroup !== 'string'
|
||||||
|
) {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof data.panels !== 'object') {
|
||||||
|
throw new Error('invalid layout');
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const value of Object.values(data.panels)) {
|
||||||
|
validateGroupViewPanelState(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -126,8 +126,8 @@ export abstract class GridviewPanel
|
|||||||
return this.api.isActive;
|
return this.api.isActive;
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor(id: string, component: string, api: GridviewPanelApiImpl) {
|
constructor(id: string, component: string) {
|
||||||
super(id, component, api);
|
super(id, component, new GridviewPanelApiImpl(id));
|
||||||
|
|
||||||
this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
|
this.api.initialize(this); // TODO: required to by-pass 'super before this' requirement
|
||||||
|
|
||||||
@ -74,7 +74,7 @@ export class GroupPanel extends GridviewPanel implements IGroupviewPanel {
|
|||||||
id: string,
|
id: string,
|
||||||
options: GroupOptions
|
options: GroupOptions
|
||||||
) {
|
) {
|
||||||
super(id, 'groupview_default', new GroupviewApi(id));
|
super(id, 'groupview_default');
|
||||||
|
|
||||||
this._model = new Groupview(this.element, accessor, id, options, this);
|
this._model = new Groupview(this.element, accessor, id, options, this);
|
||||||
}
|
}
|
||||||
2
packages/dockview-core/src/index.ts
Normal file
2
packages/dockview-core/src/index.ts
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
export * from './core';
|
||||||
|
// export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { Paneview, PaneviewApi } from '../core';
|
||||||
import { DragHandler } from '../dnd/abstractDragHandler';
|
import { DragHandler } from '../dnd/abstractDragHandler';
|
||||||
import {
|
import {
|
||||||
getPaneData,
|
getPaneData,
|
||||||
@ -15,16 +16,17 @@ import {
|
|||||||
PaneviewPanel,
|
PaneviewPanel,
|
||||||
} from './paneviewPanel';
|
} from './paneviewPanel';
|
||||||
|
|
||||||
export interface PaneviewDropEvent2 extends DroptargetEvent {
|
export interface PaneviewDropEvent extends DroptargetEvent {
|
||||||
panel: IPaneviewPanel;
|
panel: IPaneviewPanel;
|
||||||
getData: () => PaneTransfer | undefined;
|
getData: () => PaneTransfer | undefined;
|
||||||
|
api: PaneviewApi;
|
||||||
}
|
}
|
||||||
|
|
||||||
export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||||
private handler: DragHandler | undefined;
|
private handler: DragHandler | undefined;
|
||||||
private target: Droptarget | undefined;
|
private target: Droptarget | undefined;
|
||||||
|
|
||||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
|
private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
|
||||||
readonly onDidDrop = this._onDidDrop.event;
|
readonly onDidDrop = this._onDidDrop.event;
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
@ -117,6 +119,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
|||||||
this._onDidDrop.fire({
|
this._onDidDrop.fire({
|
||||||
...event,
|
...event,
|
||||||
panel: this,
|
panel: this,
|
||||||
|
api: new PaneviewApi(this.accessor),
|
||||||
getData: getPaneData,
|
getData: getPaneData,
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
@ -133,6 +136,7 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
|||||||
...event,
|
...event,
|
||||||
panel: this,
|
panel: this,
|
||||||
getData: getPaneData,
|
getData: getPaneData,
|
||||||
|
api: new PaneviewApi(this.accessor),
|
||||||
});
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -21,7 +21,7 @@ import {
|
|||||||
} from './paneviewPanel';
|
} from './paneviewPanel';
|
||||||
import {
|
import {
|
||||||
DraggablePaneviewPanel,
|
DraggablePaneviewPanel,
|
||||||
PaneviewDropEvent2,
|
PaneviewDropEvent,
|
||||||
} from './draggablePaneviewPanel';
|
} from './draggablePaneviewPanel';
|
||||||
import { DefaultHeader } from './defaultPaneviewHeader';
|
import { DefaultHeader } from './defaultPaneviewHeader';
|
||||||
import { sequentialNumberGenerator } from '../math';
|
import { sequentialNumberGenerator } from '../math';
|
||||||
@ -115,7 +115,7 @@ export interface IPaneviewComponent extends IDisposable {
|
|||||||
readonly options: PaneviewComponentOptions;
|
readonly options: PaneviewComponentOptions;
|
||||||
readonly onDidAddView: Event<PaneviewPanel>;
|
readonly onDidAddView: Event<PaneviewPanel>;
|
||||||
readonly onDidRemoveView: Event<PaneviewPanel>;
|
readonly onDidRemoveView: Event<PaneviewPanel>;
|
||||||
readonly onDidDrop: Event<PaneviewDropEvent2>;
|
readonly onDidDrop: Event<PaneviewDropEvent>;
|
||||||
readonly onDidLayoutChange: Event<void>;
|
readonly onDidLayoutChange: Event<void>;
|
||||||
readonly onDidLayoutFromJSON: Event<void>;
|
readonly onDidLayoutFromJSON: Event<void>;
|
||||||
addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
|
addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel;
|
||||||
@ -146,8 +146,8 @@ export class PaneviewComponent
|
|||||||
private readonly _onDidLayoutChange = new Emitter<void>();
|
private readonly _onDidLayoutChange = new Emitter<void>();
|
||||||
readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
|
readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
|
||||||
|
|
||||||
private readonly _onDidDrop = new Emitter<PaneviewDropEvent2>();
|
private readonly _onDidDrop = new Emitter<PaneviewDropEvent>();
|
||||||
readonly onDidDrop: Event<PaneviewDropEvent2> = this._onDidDrop.event;
|
readonly onDidDrop: Event<PaneviewDropEvent> = this._onDidDrop.event;
|
||||||
|
|
||||||
private readonly _onDidAddView = new Emitter<PaneviewPanel>();
|
private readonly _onDidAddView = new Emitter<PaneviewPanel>();
|
||||||
readonly onDidAddView = this._onDidAddView.event;
|
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