rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-07-31 14:26:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: docs

Browse Source
This commit is contained in:
mathuo 2022-05-05 22:11:36 +01:00
parent d94460955d
commit 3241cec703
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
13 changed files with 228 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.github/workflows/deploy-docs.yml vendored
View File

@ -1,8 +1,10 @@
name: Deploy Docs name: Deploy Docs
on: # on:
schedule: # schedule:
- cron: '0 3 * * *' # every day at 3 am UTC # - cron: '0 4 * * *'
on: [push]
jobs: jobs:
deploy-nightly-demo-app: deploy-nightly-demo-app:

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

@ -25,11 +25,18 @@ const withMDX = mdx({
}, },
}); });
console.log(`CI=${process.env.CI}`);
const extraParams = process.env.CI
? {
basePath: '/dockview/docs',
assetPrefix: '/dockview/docs/',
}
: {};
export default withTM( export default withTM(
withMDX({ withMDX({
basePath: '/dockview/docs', ...extraParams,
assetPrefix: '/dockview/docs/',
//
reactStrictMode: true, reactStrictMode: true,
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
experimental: { experimental: {

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

@ -31,16 +31,21 @@ export const Header = (props: {}) => {
return ( return (
<div <div
style={{ style={{
height: '0px', backgroundColor: 'var(--header-color)',
backgroundColor: '#0070f3', padding: '0px 8px',
padding: '5vw', display: 'flex',
alignItems: 'center',
borderBottom: '1px solid var(--border-color)',
}} }}
> >
<DockviewReact <div>
onReady={onReady} <div>
components={components} <span style={{ fontSize: '2em' }}>dockview</span>
className="dockview-theme-dark" <span style={{ fontSize: '1.25em' }}>
/> {' documentation'}
</span>
</div>
</div>
</div> </div>
); );
}; };

19
packages/dockview-docs/src/components/simpleDockview.tsx
View File

@ -12,21 +12,7 @@ const components = {
export const SimpleDockview = () => { export const SimpleDockview = () => {
const onReady = (event: DockviewReadyEvent) => { const onReady = (event: DockviewReadyEvent) => {
event.api.onDidLayoutChange(() => { const panel = event.api.addPanel({
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', id: 'panel_1',
component: 'default', component: 'default',
params: { params: {
@ -34,6 +20,9 @@ export const SimpleDockview = () => {
}, },
}); });
panel.group.locked = true;
panel.group.header.hidden = true;
event.api.addPanel({ event.api.addPanel({
id: 'panel_2', id: 'panel_2',
component: 'default', component: 'default',

13
packages/dockview-docs/src/components/simpleGridview.tsx
View File

@ -62,6 +62,7 @@ export const SimpleGridview = () => {
title: 'Panel 6', title: 'Panel 6',
}, },
position: { referencePanel: 'panel_5', direction: 'below' }, position: { referencePanel: 'panel_5', direction: 'below' },
minimumWidth: 10,
}); });
event.api.addPanel({ event.api.addPanel({
@ -71,6 +72,17 @@ export const SimpleGridview = () => {
title: 'Panel 7', title: 'Panel 7',
}, },
position: { referencePanel: 'panel_6', direction: 'right' }, position: { referencePanel: 'panel_6', direction: 'right' },
minimumWidth: 10,
});
event.api.addPanel({
id: 'panel_8',
component: 'default',
params: {
title: 'Panel 8',
},
position: { referencePanel: 'panel_6', direction: 'right' },
minimumWidth: 10,
}); });
}; };
@ -78,6 +90,7 @@ export const SimpleGridview = () => {
<GridviewReact <GridviewReact
components={components} components={components}
onReady={onReady} onReady={onReady}
proportionalLayout={false}
orientation={Orientation.VERTICAL} orientation={Orientation.VERTICAL}
className="dockview-theme-dark" className="dockview-theme-dark"
/> />

60
packages/dockview-docs/src/components/simpleSplitview2.tsx Normal file
View File

@ -0,0 +1,60 @@
import { SimpleSplitview } from './simpleSplitview';
import * as React from 'react';
export const SimpleSplitview2 = (props: { proportional?: boolean }) => {
const [value, setValue] = React.useState<number>(50);
const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue(Number(event.target.value));
};
return (
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100px',
margin: '10px 0px',
}}
>
<div
style={{
height: '25px',
display: 'flex',
alignItems: 'center',
}}
>
<input
type={'range'}
min={20}
max={100}
defaultValue={50}
value={value}
onChange={onChange}
/>
<span style={{ padding: '0px 8px' }}>
Slide to resize the splitview container
</span>
</div>
<div
style={{
flexGrow: 1,
display: 'grid',
gridTemplateColumns: `${value}fr ${100 - value}fr`,
}}
>
<div
style={{
backgroundColor: 'rgb(30,30,30)',
color: 'white',
flexGrow: 1,
border: '1px solid grey',
}}
>
<SimpleSplitview proportional={props.proportional} />
</div>
<div></div>
</div>
</div>
);
};

60
packages/dockview-docs/src/pages/basics.mdx
View File

@ -1,39 +1,9 @@
import { SimpleSplitview } from '../components/simpleSplitview'; import { SimpleSplitview } from '../components/simpleSplitview';
import { SimpleSplitview2 } from '../components/simpleSplitview2';
## Auto resizing # Basics
`SplitviewReact`, `GridviewReact`, `PaneviewReact` and `DockviewReact` will all automatically resize to fill the size of their parent element. This section will take you through a number of concepts that can be applied to all dockview components.
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`.
You can manually resize a component using the API method `layout(width: number, height: number): void`.
You can force a component to resize without providing any measurements using the API method `resizeToFit(): void`.
This method will evaluate the width and height of the parent `HTMLElement` container and use these values to relayout.
## 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 ## Panels
@ -63,9 +33,12 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
}; };
``` ```
### Accessing the panel API ## 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. There are two types of API you will interact with using `dockview`.
- The `panel API` is accessible via `props.api` in user defined panels and via the `.api` variable found on panel instances. This API contains actions and variable related to the the individual panel.
- The `component API` is accessible via `event.api` in the `onReady` events and `props.containerApi` in user defined panels. This API contains actions and variable related to the component as a whole.
```tsx ```tsx
const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
@ -98,3 +71,20 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
### Serialization ### Serialization
All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`. All components support `toJSON(): T` which returns a Typed object representation of the components state. This same Typed object can be used to deserialize a view using `fromJSON(object: T): void`.
## 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`.
You can manually resize a component using the API method `layout(width: number, height: number): void`.
## Proportional layout
The `proportionalLayout` property indicates the expected behaviour of the component as it's container resizes, should all views resize equally or should just one view expand to fill the new space. `proportionalLayout` can be set as a property on `SplitviewReact` and `GridviewReact` components.
Although not configurable on `DockviewReact` and `PaneviewReact` these both behave as if `proportionalLayout=true` was set for them.
<SimpleSplitview2 proportional={false} />
<SimpleSplitview2 proportional={true} />

121
packages/dockview-docs/src/pages/dockview.mdx
View File

@ -1,3 +1,43 @@
import { SimpleDockview } from '../components/simpleDockview';
Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container.
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<SimpleDockview />
</div>
```tsx
const panel = event.api.addPanel(...);
const anotherPanel = event.api.getPanel('somePanelid');
```
You can access the panels associated group through the `panel.group` variable.
The group will always be defined and will change if a panel is moved into another group.
### Locked group
Locking a group will disable all drop events for this group ensuring a user can not add additional panels to the group.
You can still add groups to a locked panel programatically using the api.
```tsx
panel.group.locked = true;
```
## Group header
You may wish to hide the header section of a group. This can achieved through setting the `hidden` variable on `panel.group.header`.
```tsx
panel.group.header.hidden = true;
```
## Component Props ## Component Props
```tsx ```tsx
@ -33,46 +73,45 @@ const onReady = (event: DockviewReadyEvent) => {
}; };
``` ```
| Property | Type | Description | | Property | Type | Description |
| ---------------------- | ------------------------------------------------- | ------------------------------------------- | | ---------------------- | ---------------------------------------------------- | ------------------------------------------- |
| height | `number` | Component pixel height | | height | `number` | Component pixel height |
| width | `number` | Component pixel width | | width | `number` | Component pixel width |
| minimumHeight | `number` | | | minimumHeight | `number` | |
| maximumHeight | `number` | | | maximumHeight | `number` | |
| maximumWidth | `number` | | | maximumWidth | `number` | |
| maximumWidth | `number` | | | maximumWidth | `number` | |
| length | `number` | Number of panels | | length | `number` | Number of panels |
| size | `number` | Number of Groups | | size | `number` | Number of Groups |
| panels | `IGroupPanel[]` | | | panels | `IDockviewPanel[]` | |
| groups | `IGroupviewPanel[]` | | | groups | `IDockviewPanel[]` | |
| activePanel | `IGroupPanel \| undefined` | | | activePanel | `IDockviewPanel \| undefined` | |
| activeGroup | `IGroupviewPanel \| undefined` | | | activeGroup | `IDockviewPanel \| undefined` | |
| | | | | | | |
| onDidLayoutChange | `Event<void>` | | | onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | | | onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGroupviewPanel>` | | | onDidAddGroup | `Event<IDockviewPanel>` | |
| onDidRemoveGroup | `Event<IGroupviewPanel>` | | | onDidRemoveGroup | `Event<IDockviewPanel>` | |
| onDidActiveGroupChange | `Event<IGroupviewPanel \| undefined>` | | | onDidActiveGroupChange | `Event<IDockviewPanel \| undefined>` | |
| onDidAddPanel | `Event<IGroupPanel>` | | | onDidAddPanel | `Event<IDockviewPanel>` | |
| onDidRemovePanel | `Event<IGroupPanel>` | | | onDidRemovePanel | `Event<IDockviewPanel>` | |
| onDidActivePanelChange | `Event<IGroupPanel \| undefined>` | | | onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
| onDidDrop | `Event<DockviewDropEvent` | | | onDidDrop | `Event<DockviewDropEvent` | |
| | | | | | | |
| addPanel | `addPanel(options: AddPanelOptions): IGroupPanel` | | | addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
| getPanel | `(id: string) \| IGroupPanel \| undefined` | | | getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
| addEmptyGroup | `(options? AddGroupOptions): void` | | | addEmptyGroup | `(options? AddGroupOptions): void` | |
| closeAllGroups | `(): void` | | | closeAllGroups | `(): void` | |
| removeGroup | `(group: IGroupviewPanel): void` | | | removeGroup | `(group: IDockviewPanel): void` | |
| getGroup | `(id: string): IGroupviewPanel \| undefined` | | | getGroup | `(id: string): IDockviewPanel \| undefined` | |
| | | | | | | |
| getTabHeight | `(): number \| undefined` | | | getTabHeight | `(): number \| undefined` | |
| setTabHeight | `(hegiht: number \| undefined): void` | | | setTabHeight | `(hegiht: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | | layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) | | fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) |
| fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) | | toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
## Dockview Panel API ## Dockview Panel API
@ -102,7 +141,7 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | | setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: SizeEvent): void` | | | setSize | `(event: SizeEvent): void` | |
| | | | | | | |
| group | `GroupviewPanel | undefined` | | group | `GroupPanel | undefined` |
| isGroupActive | `boolean` | | | isGroupActive | `boolean` | |
| title | `string` | | | title | `string` | |
| suppressClosable | `boolean` | | | suppressClosable | `boolean` | |

1
packages/dockview-docs/src/pages/gridview.mdx
View File

@ -59,7 +59,6 @@ const onReady = (event: GridviewReadyEvent) => {
| setActive | `(panel: IGridviewPanel): void` | | | setActive | `(panel: IGridviewPanel): void` | |
| toggleVisiblity | `(panel: IGridviewPanel): void` | | | toggleVisiblity | `(panel: IGridviewPanel): void` | |
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | | layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) | | fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) | | toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) |

1
packages/dockview-docs/src/pages/paneview.mdx
View File

@ -52,7 +52,6 @@ const onReady = (event: GridviewReadyEvent) => {
| | | | | | | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | | layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
| fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) | | fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) | | toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |

1
packages/dockview-docs/src/pages/splitview.mdx
View File

@ -123,7 +123,6 @@ const onReady = (event: SplitviewReadyEvent) => {
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | | updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | | | focus | `(): void` | |
| layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) | | layout | `(width: number, height:number): void` | See [Auto resizing](/basics/#auto-resizing) |
| resizeToFit | `(): void` | See [Auto resizing](/basics/#auto-resizing) |
| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) | | fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) | | toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |

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

@ -1,25 +1,31 @@
@import "./navigation.css"; @import "./navigation.css";
@import "~dockview/dist/styles/dockview.css"; @import "~dockview/dist/styles/dockview.css";
:root {
--primary-text-color:rgb(30,30,30);
--header-color:rgb(235, 235, 235);
--navigation-color:rgb(245, 245, 245);
--border-color:rgb(30,30,30)
}
html, html,
body { body {
padding: 0; padding: 0;
margin: 0; margin: 0;
/* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */ font: 100% /1.65 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-family: 'Roboto', sans-serif;
} }
a { .markdown-body a {
text-decoration: none; text-decoration: none;
color:dodgerblue; color:dodgerblue;
} }
a, a:hover, a:visited, a:active { .markdown-body a, .markdown-body a:hover, .markdown-body a:visited, .markdown-body a:active {
color:dodgerblue; color:dodgerblue;
} }
a:hover { .markdown-body a:hover {
text-decoration: underline; text-decoration: underline;
} }

7
packages/dockview-docs/src/styles/navigation.css
View File

@ -1,6 +1,6 @@
.navigation { .navigation {
padding: 30px; padding: 30px;
background-color: lightgray; background-color: var(--navigation-color);
font-size: 16px; font-size: 16px;
width: 200px; width: 200px;
border-radius: 15px; border-radius: 15px;
@ -11,6 +11,11 @@
cursor: pointer; cursor: pointer;
} }
.node a {
text-decoration: none;
color: inherit;
}
.expandable-node::after { .expandable-node::after {
} }