From 2381481ec542944a7a4b45f9878bdff4333ff7a2 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 1 May 2022 21:38:12 +0100 Subject: [PATCH] chore: docs --- .../src/components/simpleDockview.tsx | 8 +- .../src/components/simpleGridview.tsx | 8 +- packages/dockview-docs/src/pages/basics.mdx | 9 ++ packages/dockview-docs/src/pages/dockview.mdx | 109 ++++++++++-------- packages/dockview-docs/src/pages/gridview.mdx | 90 ++++++++------- packages/dockview-docs/src/pages/paneview.mdx | 79 +++++++------ .../dockview-docs/src/pages/splitview.mdx | 59 ++++++---- 7 files changed, 202 insertions(+), 160 deletions(-) diff --git a/packages/dockview-docs/src/components/simpleDockview.tsx b/packages/dockview-docs/src/components/simpleDockview.tsx index 49c79fe68..66c80963f 100644 --- a/packages/dockview-docs/src/components/simpleDockview.tsx +++ b/packages/dockview-docs/src/components/simpleDockview.tsx @@ -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' }, }); }; diff --git a/packages/dockview-docs/src/components/simpleGridview.tsx b/packages/dockview-docs/src/components/simpleGridview.tsx index 71c2715c7..985d6ddde 100644 --- a/packages/dockview-docs/src/components/simpleGridview.tsx +++ b/packages/dockview-docs/src/components/simpleGridview.tsx @@ -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' }, }); }; diff --git a/packages/dockview-docs/src/pages/basics.mdx b/packages/dockview-docs/src/pages/basics.mdx index 058f03f7b..09c741c2b 100644 --- a/packages/dockview-docs/src/pages/basics.mdx +++ b/packages/dockview-docs/src/pages/basics.mdx @@ -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
) => { ); }; ``` + +### 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`. diff --git a/packages/dockview-docs/src/pages/dockview.mdx b/packages/dockview-docs/src/pages/dockview.mdx index f0bfee069..0a8ebac56 100644 --- a/packages/dockview-docs/src/pages/dockview.mdx +++ b/packages/dockview-docs/src/pages/dockview.mdx @@ -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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| onDidAddPanel | `Event` | | +| onDidRemovePanel | `Event` | | +| onDidActivePanelChange | `Event` | | +| onDidDrop | `Event 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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| 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` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddGroup | `Event` | | +| onDidRemoveGroup | `Event` | | +| onDidActiveGroupChange | `Event` | | +| | | | +| 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` | | | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | | onFocusEvent | `Event` | | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | | +| | | | | setVisible | `(isVisible: boolean): void` | | | setActive | `(): void` | | -| | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | | setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | | setSize | `(event: SizeEvent): void` | | diff --git a/packages/dockview-docs/src/pages/paneview.mdx b/packages/dockview-docs/src/pages/paneview.mdx index a87f54b21..0653c7995 100644 --- a/packages/dockview-docs/src/pages/paneview.mdx +++ b/packages/dockview-docs/src/pages/paneview.mdx @@ -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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddView | `Event` | | -| onDidRemoveView | `Event` | | -| onDidDrop | `Event` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddView | `Event` | | +| onDidRemoveView | `Event` | | +| onDidDrop | `Event) => { | isVisible | `boolean` | Is panel visible | | width | `number` | Panel width | | height | `number` | Panel height | +| | | | onDidDimensionsChange | `Event` | | | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | | onFocusEvent | `Event` | | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | | +| | | | setVisible | `(isVisible: boolean): void` | | | setActive | `(): void` | | -| | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | | setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | | setSize | `(event: SizeEvent): void` | | diff --git a/packages/dockview-docs/src/pages/splitview.mdx b/packages/dockview-docs/src/pages/splitview.mdx index f82796901..9b78ee5c5 100644 --- a/packages/dockview-docs/src/pages/splitview.mdx +++ b/packages/dockview-docs/src/pages/splitview.mdx @@ -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` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddView | `Event` | | -| onDidRemoveView | `Event` | | -| 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` | | +| onDidLayoutFromJSON | `Event` | | +| onDidAddView | `Event` | | +| onDidRemoveView | `Event` | | +| | | | +| 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` | | | onDidFocusChange | `Event` | | | onDidVisibilityChange | `Event` | | | onDidActiveChange | `Event` | | | onFocusEvent | `Event` | | +| onDidConstraintsChange | `onDidConstraintsChange: Event` | | +| | | | | setVisible | `(isVisible: boolean): void` | | | setActive | `(): void` | | | | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | | setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | | setSize | `(event: PanelSizeEvent): void` | |