rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-27 12:36:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: docs website

Browse Source
This commit is contained in:
mathuo 2022-04-28 23:23:37 +01:00
parent 9a38f039f4
commit 094d19cb34
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
23 changed files with 86106 additions and 34582 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lerna.json
View File

@ -1,11 +1,13 @@
{
"packages": [
"packages/*"
],
"version": "1.3.0",
"command": {
"publish": {
"message": "chore(release): publish %s"
}
"packages": [
"packages/*"
],
"npmClient": "yarn",
"useWorkspaces": true,
"version": "1.3.0",
"command": {
"publish": {
"message": "chore(release): publish %s"
}
}
}

100325
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -2,6 +2,9 @@
"name": "dockview-monorepo-root",
"private": true,
"description": "Monorepo for https://github.com/mathuo/dockview",
"workspaces": [
"packages/*"
],
"scripts": {
"test": "jest",
"lint": "eslint packages/**/src/** --ext .ts,.tsx,.js,.jsx",

45
packages/dockview-docs/next.config.mjs
View File

@ -1,20 +1,23 @@
// const remarkFrontmatter = import('remark-frontmatter');
// const rehypePrismPlus = import('rehype-prism-plus');
// const remarkPrism = import('remark-prism');
// const transpile = require('next-transpile-modules');
// import mdx from '@next/mdx';
import transpile from 'next-transpile-modules';
import slugs from 'rehype-slug';
import autoLinkHeadings from 'rehype-autolink-headings';
import mdx from '@next/mdx';
import remarkGfm from 'remark-gfm';
const withTM = transpile(['dockview']);
const withTM = transpile(['dockview', 'dockview-demo'], {
resolveSymlinks: true,
});
import path from 'path';
import { URL } from 'url'; // in Browser, the URL in native accessible on window
const __dirname = new URL('.', import.meta.url).pathname;
const withMDX = mdx({
extension: /\.mdx$/,
options: {
remarkPlugins: [],
remarkPlugins: [remarkGfm],
rehypePlugins: [
slugs,
[
@ -30,9 +33,33 @@ const withMDX = mdx({
export default withTM(
withMDX({
pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
reactStrictMode: true,
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
experimental: {
externalDir: true,
},
webpack(config, options) {
if (options.isServer) {
config.externals = ['react', 'react-dom', ...config.externals];
}
config.module.rules.push({
test: /\.tsx?|\.ts?$/,
use: [options.defaultLoaders.babel],
});
// config.resolve.alias['react'] = path.resolve(
// __dirname,
// '.',
// 'node_modules',
// 'react-dom'
// );
// config.resolve.alias['react-dom'] = path.resolve(
// __dirname,
// '.',
// 'node_modules',
// 'react-dom'
// );
return config;
},
})
);

1848
packages/dockview-docs/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
packages/dockview-docs/package.json
View File

@ -18,18 +18,14 @@
"react": "^18.0.0",
"react-dom": "^18.0.0",
"rehype-autolink-headings": "^6.1.1",
"rehype-prism-plus": "^1.3.2",
"rehype-slug": "^5.0.1",
"remark-autolink-headings": "^7.0.1",
"remark-frontmatter": "^4.0.1",
"remark-prism": "^1.3.6",
"remark-slug": "^7.0.1"
"remark-gfm": "^3.0.1"
},
"devDependencies": {
"@types/node": "17.0.25",
"@types/react": "^18.0.6",
"@types/node": "17.0.28",
"@types/react": "^18.0.8",
"@types/react-dom": "^18.0.2",
"eslint": "8.13.0",
"eslint": "8.14.0",
"eslint-config-next": "12.1.5",
"next-transpile-modules": "^9.0.0",
"typescript": "4.6.3"

7
packages/dockview-docs/src/components/container.tsx
View File

@ -13,7 +13,12 @@ export const Container = (props: { children: React.ReactNode }) => {
<div style={{ padding: '20px' }}>
<Navigation pages={PAGES} />
</div>
<div style={{ flexGrow: 1, padding: '20px' }}>{props.children}</div>
<div
style={{ flexGrow: 1, padding: '20px' }}
className="markdown-body"
>
{props.children}
</div>
</main>
);
};

2
packages/dockview-docs/src/components/header.tsx
View File

@ -31,7 +31,7 @@ export const Header = (props: {}) => {
return (
<div
style={{
height: '1000px',
height: '0px',
backgroundColor: '#0070f3',
padding: '5vw',
}}

100
packages/dockview-docs/src/components/simpleDockview.tsx Normal file
View File

@ -0,0 +1,100 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimpleDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.onDidLayoutChange(() => {
localStorage.setItem(
'dockview_test',
JSON.stringify(event.api.toJSON())
);
});
const layout = localStorage.getItem('dockview_test');
if (layout) {
event.api.fromJSON(JSON.parse(layout));
return;
}
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanelId: 'panel_1', direction: 'right' },
});
const panel5 = event.api.addPanel({
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
position: { referencePanelId: 'panel_3', direction: 'right' },
});
// panel5.group!.model.header.hidden = true;
// panel5.group!.model.locked = true;
event.api.addPanel({
id: 'panel_6',
component: 'default',
params: {
title: 'Panel 6',
},
position: { referencePanelId: 'panel_5', direction: 'below' },
});
event.api.addPanel({
id: 'panel_7',
component: 'default',
params: {
title: 'Panel 7',
},
position: { referencePanelId: 'panel_6', direction: 'right' },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-dark"
/>
);
};

85
packages/dockview-docs/src/components/simpleGridview.tsx Normal file
View File

@ -0,0 +1,85 @@
import {
IGridviewPanelProps,
Orientation,
GridviewReact,
GridviewReadyEvent,
} from 'dockview';
const components = {
default: (props: IGridviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimpleGridview = () => {
const onReady = (event: GridviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { reference: 'panel_1', direction: 'right' },
});
event.api.addPanel({
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
position: { reference: 'panel_3', direction: 'right' },
});
event.api.addPanel({
id: 'panel_6',
component: 'default',
params: {
title: 'Panel 6',
},
position: { reference: 'panel_5', direction: 'below' },
});
event.api.addPanel({
id: 'panel_7',
component: 'default',
params: {
title: 'Panel 7',
},
position: { reference: 'panel_6', direction: 'right' },
});
};
return (
<GridviewReact
components={components}
onReady={onReady}
orientation={Orientation.VERTICAL}
className="dockview-theme-dark"
/>
);
};

50
packages/dockview-docs/src/components/simplePaneview.tsx Normal file
View File

@ -0,0 +1,50 @@
import {
IPaneviewPanelProps,
PaneviewReact,
PaneviewReadyEvent,
} from 'dockview';
const components = {
default: (props: IPaneviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimplePaneview = () => {
const onReady = (event: PaneviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
title: 'Panel 1',
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
title: 'Panel 2',
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
title: 'Panel 3',
});
};
return (
<PaneviewReact
components={components}
onReady={onReady}
className="dockview-theme-dark"
/>
);
};

8
packages/dockview-docs/src/components/simpleSplitview.tsx
View File

@ -7,11 +7,11 @@ import {
const components = {
default: (props: ISplitviewPanelProps<{ title: string }>) => {
return <div style={{ margin: '20px' }}>{props.params.title}</div>;
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimpleSplitview = () => {
export const SimpleSplitview = (props: { proportional?: boolean }) => {
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
@ -19,6 +19,7 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 1',
},
minimumSize: 100,
});
event.api.addPanel({
@ -27,6 +28,7 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 2',
},
minimumSize: 100,
});
event.api.addPanel({
@ -35,12 +37,14 @@ export const SimpleSplitview = () => {
params: {
title: 'Panel 3',
},
minimumSize: 100,
});
};
return (
<SplitviewReact
components={components}
proportionalLayout={props.proportional}
onReady={onReady}
orientation={Orientation.HORIZONTAL}
className="dockview-theme-dark"

91
packages/dockview-docs/src/pages/basics.mdx Normal file
View File

@ -0,0 +1,91 @@
import { SimpleSplitview } from '../components/simpleSplitview';
## Auto resizing
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element.
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
You can disable this by settings the `disableAutoResizing` prop to be `true`.
## Proportional layout
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview proportional={false} />
</div>
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview proportional={true} />
</div>
## Panels
The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
### Adding a panel with parameters
You can pass parameters to a panel through the `params` object
```tsx
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'myComponent',
params: {
title: 'My Title',
},
});
};
```
and you can access those properties through the `props.params` object. The TypeScript interface accepts an optional generic type `T` that corresponds to the params objects type.
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
```
### Accessing the panel API
You can access an extensive set of functions in the panel via both the panel `api` and `containerApi`. The `api` is specific to that particular panel and the `containerApi` corresponds to that api which you access during the `onReady` event.
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
React.useEffect(() => {
const disposable = props.api.onDidActiveChange((event) => {
console.log(`is panel active: ${event.isActive}`);
});
return () => {
disposable.dispose(); // remember to dispose of any subscriptions
};
}, [props.api]);
const addAnotherPanel = React.useCallback(() => {
props.containerApi.addPanel({
id: 'another_id',
component: 'anotherComponent',
});
}, [props.containerApi]);
return (
<div>
<span>{`My first panel has the title: ${props.params.title}`}</span>
<button onClick={addAnotherPanel}>Add Panel</button>
</div>
);
};
```

9
packages/dockview-docs/src/pages/basics.tsx
View File

@ -1,9 +0,0 @@
import { NextPage } from 'next';
const Page: NextPage = (props) => {
return (
<div style={{ height: '1000px', backgroundColor: 'red' }}>basics</div>
);
};
export default Page;

12
packages/dockview-docs/src/pages/dockview.mdx Normal file
View File

@ -0,0 +1,12 @@
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| tabComponents | object | Yes | | |
| watermarkComponent | object | Yes | | |
| hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | |
| onTabContextMenu | Event | Yes | false | |
| onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | |

9
packages/dockview-docs/src/pages/gridview.mdx Normal file
View File

@ -0,0 +1,9 @@
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ---------------------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
| proportionalLayout | boolean | Yes | true | |
| hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | |

37
packages/dockview-docs/src/pages/index.mdx
View File

@ -1,4 +1,7 @@
import { SimpleSplitview } from '../components/simpleSplitview';
import { SimpleGridview } from '../components/simpleGridview';
import { SimplePaneview } from '../components/simplePaneview';
import { SimpleDockview } from '../components/simpleDockview';
# Introduction
@ -45,11 +48,45 @@ Splitview
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleGridview />
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimplePaneview />
</div>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleDockview />
</div>
```tsx
import {
DockviewReact,

9
packages/dockview-docs/src/pages/paneview.mdx Normal file
View File

@ -0,0 +1,9 @@
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | ----------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| headerComponents | object | Yes | | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | |
| disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | |

150
packages/dockview-docs/src/pages/splitview.mdx Normal file
View File

@ -0,0 +1,150 @@
import { SimpleSplitview } from '../components/simpleSplitview';
# Splitview
<div
style={{
height: '100px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleSplitview />
</div>
```tsx
import {
ISplitviewPanelProps,
Orientation,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
const components = {
default: (props: ISplitviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimpleSplitview = () => {
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
};
return (
<SplitviewReact
components={components}
onReady={onReady}
orientation={Orientation.HORIZONTAL}
className="dockview-theme-dark"
/>
);
};
```
## Component Props
The `onReady` prop you will you access to the component `api`.
| Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------- |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See [Proportional layout](/basics/#proportional-layout) |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See [Auto resizing](/basics/#auto-resizing) |
## Splitview API
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
// props.containerApi...
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
```
```tsx
const onReady = (event: SplitviewReadyEvent) => {
// event.api...
};
```
| Property | Type | Description |
| ------------------- | ------------------------------------------------------------------ | -------------------- |
| height | `number` | |
| width | `number` | |
| minimumSize | `number` | |
| maximumSize | `number` | |
| length | `number` | Number of panels |
| panels | `ISplitviewPanel[]` | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddView | `Event<IView>` | |
| onDidRemoveView | `Event<IView>` | |
| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | |
| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| movePanel | `(from: number, to: number): void` | |
| setVisible | `(panel: ISplitviewPanel, isVisible: boolean): void` | |
| focus | `(): void` | |
| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
| setActive | `(panel: ISplitviewPanel): void` | |
| layout | `(width: number, height:number): void` | |
| resizeToFit | `(): void` | |
| fromJSON | `(data: SerializedSplitview): void` | Deserialize a layout |
| toJSON | `(): SerializedSplitview` | Serialized a layout |
## Splitview Panel API
```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
// props.api...
return <div>{`My first panel has the title: ${props.params.title}`}</div>;
};
```
| Property | Type | Description |
| ---------------------- | ----------------------------------------------------------- | ---------------- |
| id | `string` | Panel id |
| isFocused | `boolean` | Is panel focsed |
| isActive | `boolean` | Is panel active |
| isVisible | `boolean` | Is panel visible |
| width | `number` | Panel width |
| height | `number` | Panel height |
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | |
| onDidFocusChange | `Event<FocusEvent>` | |
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
| onDidActiveChange | `Event<ActiveEvent>` | |
| onFocusEvent | `Event<void>` | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: PanelSizeEvent): void` | |

44
packages/dockview-docs/src/references/pages.ts
View File

@ -12,37 +12,21 @@ export const PAGES: Page[] = [
url: '#api',
routes: [
{
title: 'Dockview',
url: '#dockview',
routes: [
{ title: 'Item1', url: '/item1' },
{ title: 'Item2', url: '/item2' },
],
title: 'Splitview',
url: '/splitview/#splitview',
},
{
title: 'Gridview',
url: '/gridview/#gridview',
},
{
title: 'Dockview',
url: '/dockview/#dockview',
},
{
title: 'Paneview',
url: '/paneview/#paneview',
},
// {
// title: 'Gridview',
// url: '#gridview',
// routes: [
// { title: 'Item1', url: 'item1' },
// { title: 'Item2', url: 'item2' },
// ],
// },
// {
// title: 'Splitview',
// url: '#splitview',
// routes: [
// { title: 'Item1', url: 'item1' },
// { title: 'Item2', url: 'item2' },
// ],
// },
// {
// title: 'Paneview',
// url: '#paneivew',
// routes: [
// { title: 'Item1', url: 'item1' },
// { title: 'Item2', url: 'item2' },
// ],
// },
],
},
{ title: 'Guides', url: '#guides' },

29
packages/dockview-docs/src/styles/globals.css
View File

@ -41,3 +41,32 @@ a:hover {
background-size: 100%;
background-position: center center;
}
.markdown-body table {
border-collapse: collapse;
border-spacing: 0;
font-size: 12px;
}
.markdown-body td,
.markdown-body th {
padding: 0;
}
.markdown-body table tr {
background-color: rgb(255, 255, 255);
border-top: 1px solid rgb(198, 203, 209);
}
.markdown-body table th {
border:1px solid rgb(223, 226, 229);
padding: 6px 13px;
}
.markdown-body table td {
border:1px solid rgb(223, 226, 229);
padding: 6px 13px;
}
.markdown-body table tr:nth-child(2n) {
background-color: rgb(246, 248, 250);
}

2
packages/dockview-docs/tsconfig.json
View File

@ -15,7 +15,7 @@
"jsx": "preserve",
"incremental": true
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "src/pages/index.msx", "src/pages/basic.stsx"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"],
"paths": {
"react": ["node_modules/react"],

17793
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff