mirror of
https://github.com/mathuo/dockview
synced 2025-05-02 01:28:28 +00:00
Merge pull request #97 from mathuo/79-new-documentation-website
79 new documentation website
This commit is contained in:
mathuo
GitHub
commit
2d3b35c008
8
.github/workflows/deploy-docs.yml
vendored
8
.github/workflows/deploy-docs.yml
vendored
@ -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:
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
A zero dependency layout manager based on the layering of splitview with support for ReactJS components, written in TypeScript.
|
||||
|
||||
- [➡️](https://mathuo.github.io/dockview/docs) Documentation
|
||||
- [➡️](https://mathuo.github.io/dockview/) Live demo
|
||||
- [➡️](https://mathuo.github.io/dockview/output/storybook-static) Storybook demo
|
||||
- [➡️](https://github.com/mathuo/dockview/tree/master/packages/dockview-demo/src/stories) Code examples
|
||||
|
||||
@ -2,8 +2,7 @@
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"npmClient": "yarn",
|
||||
"useWorkspaces": true,
|
||||
"npmClient": "npm",
|
||||
"version": "1.3.1",
|
||||
"command": {
|
||||
"publish": {
|
||||
|
||||
33669
package-lock.json
generated
Normal file
33669
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
27
package.json
@ -2,9 +2,6 @@
|
||||
"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",
|
||||
@ -33,32 +30,32 @@
|
||||
"homepage": "https://github.com/mathuo/dockview#readme",
|
||||
"devDependencies": {
|
||||
"@testing-library/dom": "^8.13.0",
|
||||
"@types/jest": "^27.4.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.19.0",
|
||||
"@typescript-eslint/parser": "^5.19.0",
|
||||
"@types/jest": "^27.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.22.0",
|
||||
"@typescript-eslint/parser": "^5.22.0",
|
||||
"codecov": "^3.8.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.13.0",
|
||||
"fs-extra": "^10.0.1",
|
||||
"eslint": "^8.15.0",
|
||||
"fs-extra": "^10.1.0",
|
||||
"gulp": "^4.0.2",
|
||||
"gulp-concat": "^2.6.1",
|
||||
"gulp-dart-sass": "^1.0.2",
|
||||
"jest": "^27.5.1",
|
||||
"jest": "^28.1.0",
|
||||
"jest-sonar-reporter": "^2.0.0",
|
||||
"jsdom": "^19.0.0",
|
||||
"lerna": "^4.0.0",
|
||||
"merge2": "^1.4.1",
|
||||
"rimraf": "^3.0.2",
|
||||
"sass": "^1.50.0",
|
||||
"sass": "^1.51.0",
|
||||
"sass-loader": "^12.6.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"ts-jest": "^27.1.4",
|
||||
"ts-loader": "^9.2.8",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.6.3",
|
||||
"ts-jest": "^28.0.2",
|
||||
"ts-loader": "^9.3.0",
|
||||
"tslib": "^2.4.0",
|
||||
"typescript": "^4.6.4",
|
||||
"webpack": "^5.72.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.8.1"
|
||||
"webpack-dev-server": "^4.9.0"
|
||||
}
|
||||
}
|
||||
|
||||
39172
packages/dockview-demo/package-lock.json
generated
Normal file
39172
packages/dockview-demo/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -16,12 +16,12 @@
|
||||
"dependencies": {
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"dockview": "^1.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"recoil": "^0.7.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.9",
|
||||
"@babel/core": "^7.17.10",
|
||||
"@storybook/addon-actions": "^6.5.0-beta.0",
|
||||
"@storybook/addon-controls": "^6.5.0-beta.0",
|
||||
"@storybook/addon-docs": "^6.5.0-beta.0",
|
||||
@ -31,9 +31,9 @@
|
||||
"@storybook/builder-webpack5": "^6.5.0-beta.0",
|
||||
"@storybook/manager-webpack5": "^6.5.0-beta.0",
|
||||
"@storybook/react": "^6.5.0-beta.0",
|
||||
"@types/react": "^18.0.5",
|
||||
"@types/react-dom": "^18.0.1",
|
||||
"babel-loader": "^8.2.4",
|
||||
"@types/react": "^18.0.9",
|
||||
"@types/react-dom": "^18.0.3",
|
||||
"babel-loader": "^8.2.5",
|
||||
"cross-env": "^7.0.3",
|
||||
"rimraf": "^3.0.2",
|
||||
"source-map-loader": "^3.0.1"
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
DockviewReact,
|
||||
DockviewApi,
|
||||
IWatermarkPanelProps,
|
||||
IGroupPanel,
|
||||
IDockviewPanel,
|
||||
PanelCollection,
|
||||
DockviewComponents,
|
||||
} from 'dockview';
|
||||
@ -206,7 +206,7 @@ export const TestGrid = (props: IGridviewPanelProps) => {
|
||||
React.useState<{
|
||||
x: number;
|
||||
y: number;
|
||||
panel: IGroupPanel;
|
||||
panel: IDockviewPanel;
|
||||
}>(undefined);
|
||||
|
||||
const onTabContextMenu = React.useMemo(
|
||||
|
||||
@ -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: {
|
||||
|
||||
9367
packages/dockview-docs/package-lock.json
generated
Normal file
9367
packages/dockview-docs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -12,23 +12,23 @@
|
||||
"dependencies": {
|
||||
"@mdx-js/loader": "^2.1.1",
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"@next/mdx": "^12.1.5",
|
||||
"@next/mdx": "^12.1.6",
|
||||
"dockview": "^1.3.1",
|
||||
"next": "12.1.5",
|
||||
"next": "12.1.6",
|
||||
"prism-react-renderer": "^1.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"rehype-autolink-headings": "^6.1.1",
|
||||
"rehype-slug": "^5.0.1",
|
||||
"remark-gfm": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "17.0.28",
|
||||
"@types/react": "^18.0.8",
|
||||
"@types/react-dom": "^18.0.2",
|
||||
"eslint": "8.14.0",
|
||||
"eslint-config-next": "12.1.5",
|
||||
"@types/node": "17.0.31",
|
||||
"@types/react": "^18.0.9",
|
||||
"@types/react-dom": "^18.0.3",
|
||||
"eslint": "8.15.0",
|
||||
"eslint-config-next": "12.1.6",
|
||||
"next-transpile-modules": "^9.0.0",
|
||||
"typescript": "4.6.3"
|
||||
"typescript": "4.6.4"
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,16 +31,21 @@ export const Header = (props: {}) => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
height: '0px',
|
||||
backgroundColor: '#0070f3',
|
||||
padding: '5vw',
|
||||
backgroundColor: 'var(--header-color)',
|
||||
padding: '0px 8px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
borderBottom: '1px solid var(--border-color)',
|
||||
}}
|
||||
>
|
||||
<DockviewReact
|
||||
onReady={onReady}
|
||||
components={components}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
<span style={{ fontSize: '2em' }}>dockview</span>
|
||||
<span style={{ fontSize: '1.25em' }}>
|
||||
{' documentation'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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 = () => {
|
||||
<GridviewReact
|
||||
components={components}
|
||||
onReady={onReady}
|
||||
proportionalLayout={false}
|
||||
orientation={Orientation.VERTICAL}
|
||||
className="dockview-theme-dark"
|
||||
/>
|
||||
|
||||
60
packages/dockview-docs/src/components/simpleSplitview2.tsx
Normal file
60
packages/dockview-docs/src/components/simpleSplitview2.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
@ -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
|
||||
|
||||
<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>
|
||||
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.
|
||||
|
||||
<SimpleSplitview2 proportional={false} />
|
||||
|
||||
<SimpleSplitview2 proportional={true} />
|
||||
|
||||
@ -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
|
||||
|
||||
```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<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) |
|
||||
| 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 | `IDockviewPanel[]` | |
|
||||
| groups | `GroupPanel[]` | |
|
||||
| activePanel | `IDockviewPanel \| undefined` | |
|
||||
| activeGroup | `IDockviewPanel \| undefined` | |
|
||||
| | | |
|
||||
| onDidLayoutChange | `Event<void>` | |
|
||||
| onDidLayoutFromJSON | `Event<void>` | |
|
||||
| onDidAddGroup | `Event<GroupPanel>` | |
|
||||
| onDidRemoveGroup | `Event<GroupPanel>` | |
|
||||
| onDidActiveGroupChange | `Event<GroupPanel \| undefined>` | |
|
||||
| onDidAddPanel | `Event<IDockviewPanel>` | |
|
||||
| onDidRemovePanel | `Event<IDockviewPanel>` | |
|
||||
| onDidActivePanelChange | `Event<IDockviewPanel \| undefined>` | |
|
||||
| onDidDrop | `Event<DockviewDropEvent` | |
|
||||
| | | |
|
||||
| addPanel | `addPanel(options: AddPanelOptions): IDockviewPanel` | |
|
||||
| getPanel | `(id: string) \| IDockviewPanel \| undefined` | |
|
||||
| addEmptyGroup | `(options? AddGroupOptions): void` | |
|
||||
| closeAllGroups | `(): void` | |
|
||||
| removeGroup | `(group: GroupPanel): void` | |
|
||||
| getGroup | `(id: string): GroupPanel \| 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) |
|
||||
| fromJSON | `(data: SerializedDockview): void` | See [Serialization](/basics/#serialization) |
|
||||
| toJSON | `(): SerializedDockview` | See [Serialization](/basics/#serialization) |
|
||||
|
||||
## Dockview Panel API
|
||||
|
||||
@ -102,7 +141,7 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
|
||||
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
|
||||
| setSize | `(event: SizeEvent): void` | |
|
||||
| | | |
|
||||
| group | `GroupviewPanel | undefined` |
|
||||
| group | `GroupPanel | undefined` |
|
||||
| isGroupActive | `boolean` | |
|
||||
| title | `string` | |
|
||||
| suppressClosable | `boolean` | |
|
||||
|
||||
@ -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) |
|
||||
|
||||
|
||||
@ -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) |
|
||||
|
||||
|
||||
@ -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) |
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
}
|
||||
|
||||
@ -99,6 +99,7 @@ const Component = () => {
|
||||
event.api.addPanel({
|
||||
id: 'panel1',
|
||||
component: 'default',
|
||||
tabComponent: 'customTab', // optional custom header
|
||||
params: {
|
||||
someProps: 'Hello',
|
||||
},
|
||||
@ -116,7 +117,7 @@ const Component = () => {
|
||||
return (
|
||||
<DockviewReact
|
||||
components={components}
|
||||
tabComponents={headers}
|
||||
tabComponents={headers} // optional headers renderer
|
||||
onReady={onReady}
|
||||
/>
|
||||
);
|
||||
@ -131,13 +132,12 @@ const components: PanelCollection<IDockviewPanelProps> = {
|
||||
return <div>{props.params.someProps}</div>;
|
||||
},
|
||||
fancy: (props: IDockviewPanelProps) => {
|
||||
const close = () => props.api.close();
|
||||
return (
|
||||
<DockviewComponents.Panel>
|
||||
<DockviewComponents.Tab>
|
||||
<div>
|
||||
<span>{props.api.title}</span>
|
||||
<span onClick={close}>{'Close'}</span>
|
||||
<span onClick={() => props.api.close()}>{'Close'}</span>
|
||||
</div>
|
||||
</DockviewComponents.Tab>
|
||||
<DockviewComponents.Content>
|
||||
|
||||
3939
packages/dockview/package-lock.json
generated
Normal file
3939
packages/dockview/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -57,15 +57,15 @@
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-typescript": "^8.3.2",
|
||||
"@testing-library/react": "^13.1.0",
|
||||
"@types/react": "^18.0.5",
|
||||
"@types/react-dom": "^18.0.1",
|
||||
"@testing-library/react": "^13.2.0",
|
||||
"@types/react": "^18.0.9",
|
||||
"@types/react-dom": "^18.0.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"postcss": "^8.4.12",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"postcss": "^8.4.13",
|
||||
"react": "^18.1.0",
|
||||
"react-dom": "^18.1.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"rollup": "^2.70.2",
|
||||
"rollup": "^2.72.1",
|
||||
"rollup-plugin-postcss": "^4.0.2",
|
||||
"rollup-plugin-terser": "^7.0.2",
|
||||
"typedoc": "^0.22.15"
|
||||
|
||||
@ -364,15 +364,15 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.totalPanels;
|
||||
}
|
||||
|
||||
get onDidActiveGroupChange(): Event<IGroupviewPanel | undefined> {
|
||||
get onDidActiveGroupChange(): Event<GroupPanel | undefined> {
|
||||
return this.component.onDidActiveGroupChange;
|
||||
}
|
||||
|
||||
get onDidAddGroup(): Event<IGroupviewPanel> {
|
||||
get onDidAddGroup(): Event<GroupPanel> {
|
||||
return this.component.onDidAddGroup;
|
||||
}
|
||||
|
||||
get onDidRemoveGroup(): Event<IGroupviewPanel> {
|
||||
get onDidRemoveGroup(): Event<GroupPanel> {
|
||||
return this.component.onDidRemoveGroup;
|
||||
}
|
||||
|
||||
@ -404,7 +404,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.panels;
|
||||
}
|
||||
|
||||
get groups(): IGroupviewPanel[] {
|
||||
get groups(): GroupPanel[] {
|
||||
return this.component.groups;
|
||||
}
|
||||
|
||||
@ -412,7 +412,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.activePanel;
|
||||
}
|
||||
|
||||
get activeGroup(): IGroupviewPanel | undefined {
|
||||
get activeGroup(): GroupPanel | undefined {
|
||||
return this.component.activeGroup;
|
||||
}
|
||||
|
||||
@ -462,7 +462,7 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
this.component.removeGroup(<GroupPanel>group);
|
||||
}
|
||||
|
||||
getGroup(id: string): IGroupviewPanel | undefined {
|
||||
getGroup(id: string): GroupPanel | undefined {
|
||||
return this.component.getPanel(id);
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user