mirror of
https://github.com/mathuo/dockview
synced 2025-03-10 16:02:04 +00:00
chore: docs
This commit is contained in:
mathuo
parent
a74daf410e
commit
ad05a3cc25
@ -9,41 +9,16 @@ import {
|
||||
import * as React from 'react';
|
||||
|
||||
const components = {
|
||||
default: (props: IDockviewPanelProps<{ title: string }>) => {
|
||||
default: (props: IDockviewPanelProps) => {
|
||||
const [contraints, setContraints] =
|
||||
React.useState<GridConstraintChangeEvent | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
props.api.group.api.setConstraints({
|
||||
maximumHeight: 200,
|
||||
maximumWidth: 200,
|
||||
props.api.group.api.onDidConstraintsChange((event) => {
|
||||
setContraints(event);
|
||||
});
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
const disposable1 = new DockviewMutableDisposable();
|
||||
|
||||
const disposable = props.api.onDidGroupChange(() => {
|
||||
disposable1.value = props.api.group.api.onDidConstraintsChange(
|
||||
(event) => {
|
||||
setContraints(event);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
setContraints({
|
||||
maximumHeight: props.api.group.maximumHeight,
|
||||
minimumHeight: props.api.group.minimumHeight,
|
||||
maximumWidth: props.api.group.maximumWidth,
|
||||
minimumWidth: props.api.group.minimumWidth,
|
||||
});
|
||||
|
||||
return () => {
|
||||
disposable1.dispose();
|
||||
disposable.dispose();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
@ -53,13 +28,64 @@ const components = {
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
<span> {props.params.title}</span>
|
||||
{contraints && (
|
||||
<div>
|
||||
<div>{`minHeight=${contraints.minimumHeight}`}</div>
|
||||
<div>{`maxHeight=${contraints.maximumHeight}`}</div>
|
||||
<div>{`minWidth=${contraints.minimumWidth}`}</div>
|
||||
<div>{`maxWidth=${contraints.maximumWidth}`}</div>
|
||||
<div style={{ fontSize: '13px' }}>
|
||||
{typeof contraints.maximumHeight === 'number' && (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid grey',
|
||||
margin: '2px',
|
||||
padding: '1px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{ color: 'grey' }}
|
||||
>{`Maximum Height: `}</span>
|
||||
<span>{`${contraints.maximumHeight}px`}</span>
|
||||
</div>
|
||||
)}
|
||||
{typeof contraints.minimumHeight === 'number' && (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid grey',
|
||||
margin: '2px',
|
||||
padding: '1px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{ color: 'grey' }}
|
||||
>{`Minimum Height: `}</span>
|
||||
<span>{`${contraints.minimumHeight}px`}</span>
|
||||
</div>
|
||||
)}
|
||||
{typeof contraints.maximumWidth === 'number' && (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid grey',
|
||||
margin: '2px',
|
||||
padding: '1px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{ color: 'grey' }}
|
||||
>{`Maximum Width: `}</span>
|
||||
<span>{`${contraints.maximumWidth}px`}</span>
|
||||
</div>
|
||||
)}
|
||||
{typeof contraints.minimumWidth === 'number' && (
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid grey',
|
||||
margin: '2px',
|
||||
padding: '1px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{ color: 'grey' }}
|
||||
>{`Minimum Width: `}</span>
|
||||
<span>{`${contraints.minimumWidth}px`}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -71,19 +97,40 @@ const App = () => {
|
||||
const [api, setApi] = React.useState<DockviewApi>();
|
||||
|
||||
const onReady = (event: DockviewReadyEvent) => {
|
||||
const panel = event.api.addPanel({
|
||||
const panel1 = event.api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
const panel2 = event.api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: panel1,
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
event.api.addPanel({
|
||||
const panel3 = event.api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: panel2,
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
const panel4 = event.api.addPanel({
|
||||
id: 'panel_4',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'below',
|
||||
},
|
||||
});
|
||||
|
||||
panel2.api.group.api.setConstraints({
|
||||
maximumWidth: 300,
|
||||
maximumHeight: 300,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
22
packages/docs/sandboxes/vanilla-dockview/package.json
Normal file
22
packages/docs/sandboxes/vanilla-dockview/package.json
Normal file
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "vanilla-dockview",
|
||||
"description": "",
|
||||
"keywords": [
|
||||
"dockview"
|
||||
],
|
||||
"version": "1.0.0",
|
||||
"main": "src/index.ts",
|
||||
"dependencies": {
|
||||
"dockview-core": "*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^4.9.5"
|
||||
},
|
||||
"scripts": {},
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not ie <= 11",
|
||||
"not op_mini all"
|
||||
]
|
||||
}
|
||||
43
packages/docs/sandboxes/vanilla-dockview/public/index.html
Normal file
43
packages/docs/sandboxes/vanilla-dockview/public/index.html
Normal file
@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="theme-color" content="#000000">
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is added to the
|
||||
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>React App</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
You need to enable JavaScript to run this app.
|
||||
</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
88
packages/docs/sandboxes/vanilla-dockview/src/app.ts
Normal file
88
packages/docs/sandboxes/vanilla-dockview/src/app.ts
Normal file
@ -0,0 +1,88 @@
|
||||
import {
|
||||
DockviewComponent,
|
||||
IContentRenderer,
|
||||
IGroupPanelInitParameters,
|
||||
} from 'dockview';
|
||||
|
||||
class DefaultPanel implements IContentRenderer {
|
||||
private _element: HTMLElement;
|
||||
|
||||
get element(): HTMLElement {
|
||||
return this._element;
|
||||
}
|
||||
|
||||
constructor() {
|
||||
this._element = document.createElement('div');
|
||||
}
|
||||
|
||||
init(params: IGroupPanelInitParameters): void {
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
export function attach(parent: HTMLElement): {
|
||||
dispose: () => void;
|
||||
} {
|
||||
const element = document.createElement('div');
|
||||
element.className = 'dockview-theme-abyss';
|
||||
parent.appendChild(element);
|
||||
|
||||
const dockview = new DockviewComponent(element, {
|
||||
components: {
|
||||
default: DefaultPanel,
|
||||
},
|
||||
});
|
||||
|
||||
const observer = new ResizeObserver((entires) => {
|
||||
const firstEntry = entires[0];
|
||||
|
||||
const { width, height } = firstEntry.contentRect;
|
||||
dockview.layout(width, height);
|
||||
});
|
||||
|
||||
observer.observe(parent);
|
||||
|
||||
const panel1 = dockview.addPanel({
|
||||
id: 'panel_1',
|
||||
title: 'Panel 1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
const panel2 = dockview.addPanel({
|
||||
id: 'panel_2',
|
||||
title: 'Panel 2',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: panel1,
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
const panel3 = dockview.addPanel({
|
||||
id: 'panel_3',
|
||||
title: 'Panel 3',
|
||||
component: 'default',
|
||||
position: {
|
||||
referenceGroup: panel2.group,
|
||||
},
|
||||
});
|
||||
|
||||
const pane4 = dockview.addPanel({
|
||||
id: 'panel_4',
|
||||
title: 'Panel 4',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'below',
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
dispose: () => {
|
||||
observer.unobserve(element);
|
||||
observer.disconnect();
|
||||
|
||||
dockview.dispose();
|
||||
element.remove();
|
||||
},
|
||||
};
|
||||
}
|
||||
10
packages/docs/sandboxes/vanilla-dockview/src/index.ts
Normal file
10
packages/docs/sandboxes/vanilla-dockview/src/index.ts
Normal file
@ -0,0 +1,10 @@
|
||||
import './styles.css';
|
||||
import 'dockview/dist/styles/dockview.css';
|
||||
|
||||
import { attach } from './app';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
|
||||
if (rootElement) {
|
||||
attach(rootElement);
|
||||
}
|
||||
16
packages/docs/sandboxes/vanilla-dockview/src/styles.css
Normal file
16
packages/docs/sandboxes/vanilla-dockview/src/styles.css
Normal file
@ -0,0 +1,16 @@
|
||||
body {
|
||||
margin: 0px;
|
||||
color: white;
|
||||
font-family: sans-serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#root {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.app {
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
20
packages/docs/sandboxes/vanilla-dockview/tsconfig.json
Normal file
20
packages/docs/sandboxes/vanilla-dockview/tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "build/dist",
|
||||
"module": "esnext",
|
||||
"target": "es5",
|
||||
"lib": ["es6", "dom"],
|
||||
"sourceMap": true,
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"moduleResolution": "node",
|
||||
"rootDir": "src",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noImplicitReturns": true,
|
||||
"noImplicitThis": true,
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"suppressImplicitAnyIndexErrors": true,
|
||||
"noUnusedLocals": true
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user