From 3241cec703c73e95aaa7a27644366b7c6681fe09 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Thu, 5 May 2022 22:11:36 +0100 Subject: [PATCH] feat: docs --- .github/workflows/deploy-docs.yml | 8 +- packages/dockview-docs/next.config.mjs | 13 +- .../dockview-docs/src/components/header.tsx | 21 +-- .../src/components/simpleDockview.tsx | 19 +-- .../src/components/simpleGridview.tsx | 13 ++ .../src/components/simpleSplitview2.tsx | 60 +++++++++ packages/dockview-docs/src/pages/basics.mdx | 60 ++++----- packages/dockview-docs/src/pages/dockview.mdx | 121 ++++++++++++------ packages/dockview-docs/src/pages/gridview.mdx | 1 - packages/dockview-docs/src/pages/paneview.mdx | 1 - .../dockview-docs/src/pages/splitview.mdx | 1 - packages/dockview-docs/src/styles/globals.css | 18 ++- .../dockview-docs/src/styles/navigation.css | 7 +- 13 files changed, 228 insertions(+), 115 deletions(-) create mode 100644 packages/dockview-docs/src/components/simpleSplitview2.tsx diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml index f008723b4..5d14f6c56 100644 --- a/.github/workflows/deploy-docs.yml +++ b/.github/workflows/deploy-docs.yml @@ -1,8 +1,10 @@ name: Deploy Docs -on: - schedule: - - cron: '0 3 * * *' # every day at 3 am UTC +# on: +# schedule: +# - cron: '0 4 * * *' + +on: [push] jobs: deploy-nightly-demo-app: diff --git a/packages/dockview-docs/next.config.mjs b/packages/dockview-docs/next.config.mjs index 3695dd169..5268f0363 100644 --- a/packages/dockview-docs/next.config.mjs +++ b/packages/dockview-docs/next.config.mjs @@ -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( withMDX({ - basePath: '/dockview/docs', - assetPrefix: '/dockview/docs/', - // + ...extraParams, reactStrictMode: true, pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'], experimental: { diff --git a/packages/dockview-docs/src/components/header.tsx b/packages/dockview-docs/src/components/header.tsx index 6adc18406..f8392ae8a 100644 --- a/packages/dockview-docs/src/components/header.tsx +++ b/packages/dockview-docs/src/components/header.tsx @@ -31,16 +31,21 @@ export const Header = (props: {}) => { return (
- +
+
+ dockview + + {' documentation'} + +
+
); }; diff --git a/packages/dockview-docs/src/components/simpleDockview.tsx b/packages/dockview-docs/src/components/simpleDockview.tsx index 66c80963f..e80427693 100644 --- a/packages/dockview-docs/src/components/simpleDockview.tsx +++ b/packages/dockview-docs/src/components/simpleDockview.tsx @@ -12,21 +12,7 @@ const components = { 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({ + const panel = event.api.addPanel({ id: 'panel_1', component: 'default', params: { @@ -34,6 +20,9 @@ export const SimpleDockview = () => { }, }); + panel.group.locked = true; + panel.group.header.hidden = true; + event.api.addPanel({ id: 'panel_2', component: 'default', diff --git a/packages/dockview-docs/src/components/simpleGridview.tsx b/packages/dockview-docs/src/components/simpleGridview.tsx index 985d6ddde..aa1148359 100644 --- a/packages/dockview-docs/src/components/simpleGridview.tsx +++ b/packages/dockview-docs/src/components/simpleGridview.tsx @@ -62,6 +62,7 @@ export const SimpleGridview = () => { title: 'Panel 6', }, position: { referencePanel: 'panel_5', direction: 'below' }, + minimumWidth: 10, }); event.api.addPanel({ @@ -71,6 +72,17 @@ export const SimpleGridview = () => { title: 'Panel 7', }, 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 = () => { diff --git a/packages/dockview-docs/src/components/simpleSplitview2.tsx b/packages/dockview-docs/src/components/simpleSplitview2.tsx new file mode 100644 index 000000000..1ffd12356 --- /dev/null +++ b/packages/dockview-docs/src/components/simpleSplitview2.tsx @@ -0,0 +1,60 @@ +import { SimpleSplitview } from './simpleSplitview'; +import * as React from 'react'; + +export const SimpleSplitview2 = (props: { proportional?: boolean }) => { + const [value, setValue] = React.useState(50); + + const onChange = (event: React.ChangeEvent) => { + setValue(Number(event.target.value)); + }; + + return ( +
+
+ + + Slide to resize the splitview container + +
+
+
+ +
+
+
+
+ ); +}; diff --git a/packages/dockview-docs/src/pages/basics.mdx b/packages/dockview-docs/src/pages/basics.mdx index 09c741c2b..59872d4ac 100644 --- a/packages/dockview-docs/src/pages/basics.mdx +++ b/packages/dockview-docs/src/pages/basics.mdx @@ -1,39 +1,9 @@ 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. -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 - -
- -
- -
- -
+This section will take you through a number of concepts that can be applied to all dockview components. ## 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 const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { @@ -98,3 +71,20 @@ 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`. + +## 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. + + + + diff --git a/packages/dockview-docs/src/pages/dockview.mdx b/packages/dockview-docs/src/pages/dockview.mdx index 0a8ebac56..1349314e7 100644 --- a/packages/dockview-docs/src/pages/dockview.mdx +++ b/packages/dockview-docs/src/pages/dockview.mdx @@ -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. + +
+ +
+ +```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 ```tsx @@ -33,46 +73,45 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| 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` | | -| 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) => { | setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | | setSize | `(event: SizeEvent): void` | | | | | | -| group | `GroupviewPanel | undefined` | +| group | `GroupPanel | undefined` | | isGroupActive | `boolean` | | | title | `string` | | | suppressClosable | `boolean` | | diff --git a/packages/dockview-docs/src/pages/gridview.mdx b/packages/dockview-docs/src/pages/gridview.mdx index 665bafea6..16a32137c 100644 --- a/packages/dockview-docs/src/pages/gridview.mdx +++ b/packages/dockview-docs/src/pages/gridview.mdx @@ -59,7 +59,6 @@ const onReady = (event: GridviewReadyEvent) => { | 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) | diff --git a/packages/dockview-docs/src/pages/paneview.mdx b/packages/dockview-docs/src/pages/paneview.mdx index 0653c7995..458968149 100644 --- a/packages/dockview-docs/src/pages/paneview.mdx +++ b/packages/dockview-docs/src/pages/paneview.mdx @@ -52,7 +52,6 @@ const onReady = (event: GridviewReadyEvent) => { | | | | | 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) | diff --git a/packages/dockview-docs/src/pages/splitview.mdx b/packages/dockview-docs/src/pages/splitview.mdx index 9b78ee5c5..96bd5dfeb 100644 --- a/packages/dockview-docs/src/pages/splitview.mdx +++ b/packages/dockview-docs/src/pages/splitview.mdx @@ -123,7 +123,6 @@ const onReady = (event: SplitviewReadyEvent) => { | 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) | diff --git a/packages/dockview-docs/src/styles/globals.css b/packages/dockview-docs/src/styles/globals.css index 7a5784a2b..4e291d096 100644 --- a/packages/dockview-docs/src/styles/globals.css +++ b/packages/dockview-docs/src/styles/globals.css @@ -1,25 +1,31 @@ @import "./navigation.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, body { padding: 0; margin: 0; - /* font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */ - font-family: 'Roboto', sans-serif; + 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"; + 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"; } -a { +.markdown-body a { text-decoration: none; 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; } -a:hover { +.markdown-body a:hover { text-decoration: underline; } diff --git a/packages/dockview-docs/src/styles/navigation.css b/packages/dockview-docs/src/styles/navigation.css index b45580967..b8cc176ee 100644 --- a/packages/dockview-docs/src/styles/navigation.css +++ b/packages/dockview-docs/src/styles/navigation.css @@ -1,6 +1,6 @@ .navigation { padding: 30px; - background-color: lightgray; + background-color: var(--navigation-color); font-size: 16px; width: 200px; border-radius: 15px; @@ -11,6 +11,11 @@ cursor: pointer; } +.node a { + text-decoration: none; + color: inherit; +} + .expandable-node::after { }