rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-01 23:16:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: docs

Browse Source
This commit is contained in:
mathuo 2022-05-01 21:38:12 +01:00
parent ee3a1b4d4e
commit 2381481ec5
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
7 changed files with 202 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,7 +56,7 @@ export const SimpleDockview = () => {
params: {
title: 'Panel 4',
},
position: { referencePanelId: 'panel_1', direction: 'right' },
position: { referencePanel: 'panel_1', direction: 'right' },
});
const panel5 = event.api.addPanel({
@ -65,7 +65,7 @@ export const SimpleDockview = () => {
params: {
title: 'Panel 5',
},
position: { referencePanelId: 'panel_3', direction: 'right' },
position: { referencePanel: 'panel_3', direction: 'right' },
});
// panel5.group!.model.header.hidden = true;
@ -77,7 +77,7 @@ export const SimpleDockview = () => {
params: {
title: 'Panel 6',
},
position: { referencePanelId: 'panel_5', direction: 'below' },
position: { referencePanel: 'panel_5', direction: 'below' },
});
event.api.addPanel({
@ -86,7 +86,7 @@ export const SimpleDockview = () => {
params: {
title: 'Panel 7',
},
position: { referencePanelId: 'panel_6', direction: 'right' },
position: { referencePanel: 'panel_6', direction: 'right' },
});
};

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

@ -43,7 +43,7 @@ export const SimpleGridview = () => {
params: {
title: 'Panel 4',
},
position: { reference: 'panel_1', direction: 'right' },
position: { referencePanel: 'panel_1', direction: 'right' },
});
event.api.addPanel({
@ -52,7 +52,7 @@ export const SimpleGridview = () => {
params: {
title: 'Panel 5',
},
position: { reference: 'panel_3', direction: 'right' },
position: { referencePanel: 'panel_3', direction: 'right' },
});
event.api.addPanel({
@ -61,7 +61,7 @@ export const SimpleGridview = () => {
params: {
title: 'Panel 6',
},
position: { reference: 'panel_5', direction: 'below' },
position: { referencePanel: 'panel_5', direction: 'below' },
});
event.api.addPanel({
@ -70,7 +70,7 @@ export const SimpleGridview = () => {
params: {
title: 'Panel 7',
},
position: { reference: 'panel_6', direction: 'right' },
position: { referencePanel: 'panel_6', direction: 'right' },
});
};

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

@ -6,6 +6,11 @@ import { SimpleSplitview } from '../components/simpleSplitview';
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
@ -89,3 +94,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
);
};
```
### 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`.

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

@ -1,15 +1,21 @@
| 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 | |
## Component Props
```tsx
import { ReactDockview } from 'dockview';
```
| 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 | See [Auto resizing](/basics/#auto-resizing) |
| onTabContextMenu | Event | Yes | false | |
| onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | |
## Dockview API
@ -27,45 +33,46 @@ const onReady = (event: DockviewReadyEvent) => {
};
```
| Property | Type | Description |
| ---------------------- | ------------------------------------------------- | -------------------- |
| height | `number` | |
| width | `number` | |
| minimumHeight | `number` | |
| maximumHeight | `number` | |
| maximumWidth | `number` | |
| maximumWidth | `number` | |
| length | `number` | Number of panels |
| panels | `IGroupPanel[]` | |
| groups | `IGroupviewPanel[]` | |
| activePanel | `IGroupPanel \| undefined` | |
| activeGroup | `IGroupviewPanel \| undefined` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGroupviewPanel>` | |
| onDidRemoveGroup | `Event<IGroupviewPanel>` | |
| onDidActiveGroupChange | `Event<IGroupviewPanel \| undefined>` | |
| onDidAddPanel | `Event<IGroupPanel>` | |
| onDidRemovePanel | `Event<IGroupPanel>` | |
| onDidActivePanelChange | `Event<IGroupPanel \| undefined>` | |
| onDidDrop | `Event<DockviewDropEvent` | |
| | | |
| addPanel | `addPanel(options: AddPanelOptions): IGroupPanel` | |
| getPanel | `(id: string) \| IGroupPanel \| undefined` | |
| addEmptyGroup | `(options? AddGroupOptions): void` | |
| closeAllGroups | `(): void` | |
| removeGroup | `(group: IGroupviewPanel): void` | |
| getGroup | `(id: string): IGroupviewPanel \| undefined` | |
| | | |
| getTabHeight | `(): number \| undefined` | |
| setTabHeight | `(hegiht: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | |
| layout | `(width: number, height:number): void` | |
| resizeToFit | `(): void` | |
| fromJSON | `(data: SerializedDockview): void` | Deserialize a layout |
| toJSON | `(): SerializedDockview` | Serialized a layout |
| Property | Type | Description |
| ---------------------- | ------------------------------------------------- | ------------------------------------------- |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumHeight | `number` | |
| maximumHeight | `number` | |
| maximumWidth | `number` | |
| maximumWidth | `number` | |
| length | `number` | Number of panels |
| size | `number` | Number of Groups |
| panels | `IGroupPanel[]` | |
| groups | `IGroupviewPanel[]` | |
| activePanel | `IGroupPanel \| undefined` | |
| activeGroup | `IGroupviewPanel \| undefined` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGroupviewPanel>` | |
| onDidRemoveGroup | `Event<IGroupviewPanel>` | |
| onDidActiveGroupChange | `Event<IGroupviewPanel \| undefined>` | |
| onDidAddPanel | `Event<IGroupPanel>` | |
| onDidRemovePanel | `Event<IGroupPanel>` | |
| onDidActivePanelChange | `Event<IGroupPanel \| undefined>` | |
| onDidDrop | `Event<DockviewDropEvent` | |
| | | |
| addPanel | `addPanel(options: AddPanelOptions): IGroupPanel` | |
| getPanel | `(id: string) \| IGroupPanel \| undefined` | |
| addEmptyGroup | `(options? AddGroupOptions): void` | |
| closeAllGroups | `(): void` | |
| removeGroup | `(group: IGroupviewPanel): void` | |
| getGroup | `(id: string): IGroupviewPanel \| undefined` | |
| | | |
| getTabHeight | `(): number \| undefined` | |
| setTabHeight | `(hegiht: number \| undefined): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | |
| 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) |
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
## Dockview Panel API

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

@ -1,12 +1,18 @@
| 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 | |
## Component Props
```tsx
import { ReactGridview } from 'dockview';
```
| 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 | See [Auto resizing](/basics/#auto-resizing) |
## Gridview API
@ -24,35 +30,38 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| Property | Type | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | -------------------- |
| height | `number` | |
| width | `number` | |
| minimumHeight | `number` | |
| maximumHeight | `number` | |
| maximumWidth | `number` | |
| maximumWidth | `number` | |
| length | `number` | Number of panels |
| panels | `ISplitviewPanel[]` | |
| orientation | `Orientation` | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGridviewPanel>` | |
| onDidRemoveGroup | `Event<IGridviewPanel>` | |
| onDidActiveGroupChange | `Event<IGridviewPanel \| undefined>` | |
| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| setVisible | `(panel: IGridviewPanel, isVisible: boolean): void` | |
| focus | `(): void` | |
| setActive | `(panel: IGridviewPanel): void` | |
| toggleVisiblity | `(panel: IGridviewPanel): void` | |
| layout | `(width: number, height:number): void` | |
| resizeToFit | `(): void` | |
| fromJSON | `(data: SerializedGridview): void` | Deserialize a layout |
| toJSON | `(): SerializedGridview` | Serialized a layout |
| Property | Type | Description |
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumHeight | `number` | |
| maximumHeight | `number` | |
| maximumWidth | `number` | |
| maximumWidth | `number` | |
| length | `number` | Number of panels |
| panels | `ISplitviewPanel[]` | |
| orientation | `Orientation` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddGroup | `Event<IGridviewPanel>` | |
| onDidRemoveGroup | `Event<IGridviewPanel>` | |
| onDidActiveGroupChange | `Event<IGridviewPanel \| undefined>` | |
| | | |
| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | |
| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | |
| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | |
| getPanel | `(id: string) \| IGridviewPanel \| undefined` | |
| | | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| setVisible | `(panel: IGridviewPanel, isVisible: boolean): void` | |
| focus | `(): void` | |
| setActive | `(panel: IGridviewPanel): void` | |
| toggleVisiblity | `(panel: IGridviewPanel): void` | |
| 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) |
| toJSON | `(): SerializedGridview` | See [Serialization](/basics/#serialization) |
## Gridview Panel API
@ -72,14 +81,15 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
| 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>` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| | | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| | | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: SizeEvent): void` | |

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

@ -1,12 +1,18 @@
| 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 | | |
## Component Props
```tsx
import { ReactPaneview } from 'dockview';
```
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | ------------------------------------------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| headerComponents | object | Yes | | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See [Auto resizing](/basics/#auto-resizing) |
| disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | |
## Gridview API
@ -24,31 +30,31 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | -------------------- |
| height | `number` | |
| width | `number` | |
| minimumSize | `number` | |
| maximumSize | `number` | |
| length | `number` | Number of panels |
| panels | `IPaneviewPanel[]` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddView | `Event<IPaneviewPanel>` | |
| onDidRemoveView | `Event<IPaneviewPanel>` | |
| onDidDrop | `Event<PaneviewDropEvent` | |
| | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | |
| movePanel | `(from: number, to: number): void` | |
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | |
| focus | `(): void` | |
| layout | `(width: number, height:number): void` | |
| resizeToFit | `(): void` | |
| fromJSON | `(data: SerializedPaneview): void` | Deserialize a layout |
| toJSON | `(): SerializedPaneview` | Serialized a layout |
| Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------- |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumSize | `number` | |
| maximumSize | `number` | |
| length | `number` | Number of panels |
| panels | `IPaneviewPanel[]` | |
| | | |
| onDidLayoutChange | `Event<void>` | |
| onDidLayoutFromJSON | `Event<void>` | |
| onDidAddView | `Event<IPaneviewPanel>` | |
| onDidRemoveView | `Event<IPaneviewPanel>` | |
| onDidDrop | `Event<PaneviewDropEvent` | |
| | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | |
| movePanel | `(from: number, to: number): void` | |
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | |
| focus | `(): void` | |
| 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) |
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |
## Gridview Panel API
@ -68,14 +74,15 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
| 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>` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| | | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: SizeEvent): void` | |

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

@ -67,6 +67,10 @@ export const SimpleSplitview = () => {
## Component Props
```tsx
import { ReactSplitview } from 'dockview';
```
The `onReady` prop you will you access to the component `api`.
| Property | Type | Optional | Default | Description |
@ -95,30 +99,33 @@ const onReady = (event: SplitviewReadyEvent) => {
};
```
| 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 |
| Property | Type | Description |
| ------------------- | ------------------------------------------------------------------ | ------------------------------------------- |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| 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` | |
| getPanel | `(id:string): ISplitviewPanel \| undefined` | |
| movePanel | `(from: number, to: number): void` | |
| | |
| setVisible | `(panel: ISplitviewPanel, isVisible: boolean): void` | |
| setActive | `(panel: ISplitviewPanel): void` | |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | |
| 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) |
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |
## Splitview Panel API
@ -138,14 +145,16 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
| 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>` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| | | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| | | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: PanelSizeEvent): void` | |