mirror of
https://github.com/mathuo/dockview
synced 2025-03-12 08:52:05 +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 { 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;
|
||||
@ -1,16 +1,36 @@
|
||||
export * from './hostedContainer';
|
||||
|
||||
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/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/defaultGroupPanelView';
|
||||
|
||||
export * from './dockview/dockviewComponent';
|
||||
export * from './gridview/gridviewComponent';
|
||||
@ -23,8 +43,6 @@ export * from './splitview/splitviewPanel';
|
||||
export * from './paneview/paneviewPanel';
|
||||
export * from './groupview/types';
|
||||
|
||||
export * from './react'; // TODO: should be conditional on whether user wants the React wrappers
|
||||
|
||||
export { Event } from './events';
|
||||
export { IDisposable } from './lifecycle';
|
||||
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;
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
@ -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);
|
||||
}
|
||||
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 {
|
||||
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