rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-08-15 21:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '100-docs' of https://github.com/mathuo/dockview into 100-docs

Browse Source
This commit is contained in:
mathuo 2022-05-13 20:35:52 +01:00
commit 7d69014561
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
43 changed files with 642 additions and 637 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,10 +1,10 @@
name: Deploy Docs
on:
schedule:
- cron: '0 3 * * *' # every day at 3 am UTC
# on:
# schedule:
# - cron: '0 3 * * *' # every day at 3 am UTC
# on: [push]
on: [push]
jobs:
deploy-nightly-demo-app:

25
README.md
View File

@ -124,31 +124,6 @@ const Component = () => {
};
```
Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
```tsx
const components: PanelCollection<IDockviewPanelProps> = {
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
return <div>{props.params.someProps}</div>;
},
fancy: (props: IDockviewPanelProps) => {
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div>
<span>{props.api.title}</span>
<span onClick={() => props.api.close()}>{'Close'}</span>
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div>{'Hello world'}</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
);
},
};
```
## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)

4
packages/dockview-demo/src/layout-grid/activitybar.tsx
View File

@ -23,10 +23,10 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (sidebarPanel.api.isVisible) {
api.setVisible(sidebarPanel, false);
sidebarPanel.api.setVisible(false);
} else {
event.preventDefault(); // prevent focus
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}
};

21
packages/dockview-demo/src/layout-grid/layoutGrid.tsx
View File

@ -10,7 +10,6 @@ import {
IWatermarkPanelProps,
IDockviewPanel,
PanelCollection,
DockviewComponents,
} from 'dockview';
import { CustomTab } from './customTab';
import { Settings } from './settingsPanel';
@ -47,22 +46,10 @@ const Test = (props: IDockviewPanelProps) => {
}, []);
return (
<DockviewComponents.Panel>
{counter % 4 === 0 && (
<DockviewComponents.Tab>
<div>{`custom tab ${counter}`}</div>
</DockviewComponents.Tab>
)}
<DockviewComponents.Content>
<div>
<div>{`custom body ${counter}`}</div>
<button>Toggle</button>
</div>
</DockviewComponents.Content>
<DockviewComponents.Actions>
<div>{`custom action ${counter}`}</div>
</DockviewComponents.Actions>
</DockviewComponents.Panel>
<div>
<div>{`custom body ${counter}`}</div>
<button>Toggle</button>
</div>
);
};

118
packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
View File

@ -1,4 +1,4 @@
import { DockviewComponents, IDockviewPanelProps } from 'dockview';
import { IDockviewPanelProps } from 'dockview';
import * as React from 'react';
import { CompositeDisposable } from '../../lifecycle';
import './exampleFunctions.scss';
@ -30,8 +30,10 @@ export const ExampleFunctions = (
isPanelVisible: x.isVisible,
}));
}),
props.api.onFocusEvent(() => {
input.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
input.current.focus();
}
})
);
@ -49,80 +51,52 @@ export const ExampleFunctions = (
};
return (
<DockviewComponents.Panel>
<DockviewComponents.Actions>
<div
style={{
height: '100%',
display: 'flex',
backgroundColor: 'rgba(255,255,255,0.1)',
padding: '0px 4px',
}}
>
<div className="example-functions-panel">
<div className="example-functions-panel-header-bar">
<span style={{ padding: '0px 8px' }}>
<span>{'isGroupActive: '}</span>
<span
onClick={onClose}
style={{
height: '100%',
width: '25px',
display: 'flex',
alignItems: 'center',
color: panelState.isGroupActive
? '#23d16f'
: '#cd312b',
}}
>
<a className="material-icons">menu</a>
{`${panelState.isGroupActive}`}
</span>
</div>
</DockviewComponents.Actions>
<DockviewComponents.Content>
<div className="example-functions-panel">
<div className="example-functions-panel-header-bar">
<span style={{ padding: '0px 8px' }}>
<span>{'isGroupActive: '}</span>
<span
style={{
color: panelState.isGroupActive
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isGroupActive}`}
</span>
</span>
<span style={{ padding: '0px 8px' }}>
<span>{'isPanelVisible: '}</span>
<span
style={{
color: panelState.isPanelVisible
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isPanelVisible}`}
</span>
</span>
</div>
<div className="example-functions-panel-section">
<input
value={panelName}
placeholder="New Panel Name"
type="text"
onChange={(event) =>
setPanelName(event.target.value)
}
/>
<button onClick={onRename}>Rename</button>
</div>
</span>
<span style={{ padding: '0px 8px' }}>
<span>{'isPanelVisible: '}</span>
<span
style={{
color: panelState.isPanelVisible
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isPanelVisible}`}
</span>
</span>
</div>
<div className="example-functions-panel-section">
<input
value={panelName}
placeholder="New Panel Name"
type="text"
onChange={(event) => setPanelName(event.target.value)}
/>
<button onClick={onRename}>Rename</button>
</div>
<input
style={{ width: '175px' }}
ref={input}
placeholder="This is focused by the panel"
/>
<input
style={{ width: '175px' }}
placeholder="This is also focusable"
/>
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<input
style={{ width: '175px' }}
ref={input}
placeholder="This is focused by the panel"
/>
<input
style={{ width: '175px' }}
placeholder="This is also focusable"
/>
</div>
);
};

6
packages/dockview-demo/src/layout-grid/sidebar.tsx
View File

@ -64,8 +64,10 @@ export const Sidebar = (props: IGridviewPanelProps) => {
props.api.onDidVisibilityChange((event) => {
console.log(event);
}),
props.api.onFocusEvent(() => {
api.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
api.current.focus();
}
})
);

12
packages/dockview-demo/src/layout-grid/splitPanel.tsx
View File

@ -29,8 +29,10 @@ const components = {
props.api.onDidActiveChange((event) => {
setActive(event.isActive);
}),
props.api.onFocusEvent(() => {
ref.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
ref.current.focus();
}
})
);
@ -65,8 +67,10 @@ export const SplitPanel = (props: IDockviewPanelProps) => {
props.api.onDidDimensionsChange((event) => {
api.current?.layout(event.width, event.height - 25);
}),
props.api.onFocusEvent(() => {
api.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
api.current.focus();
}
})
);

2
packages/dockview-demo/src/panels/splitview/splitview.tsx
View File

@ -227,7 +227,7 @@ export const Common = (
const toggleVisibility = (i: number) => () => {
const panel = api.current.panels[i];
api.current.setVisible(panel, !panel.api.isVisible);
panel.api.setVisible(panel.api.isVisible);
setDimensions((dimensions) => ({
...dimensions,
visibility: api.current.panels.map((_) => _.api.isVisible),

6
packages/dockview-demo/src/services/widgets.tsx
View File

@ -161,11 +161,11 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (sidebarPanel.api.isVisible) {
if (!alwaysOpen && selectedActive) {
api.setVisible(sidebarPanel, false);
sidebarPanel.api.setVisible(false);
}
} else {
event.preventDefault(); // prevent focus
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}
@ -234,7 +234,7 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (!sidebarPanel.api.isVisible) {
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}

33
packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx
View File

@ -1,6 +1,5 @@
import {
DockviewApi,
DockviewComponents,
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
@ -18,35 +17,9 @@ const components: PanelCollection<IDockviewPanelProps<any>> = {
ticker: (props: IDockviewPanelProps<{ ticker: number }>) => {
const close = () => props.api.close();
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span
style={{ fontSize: '9px' }}
>{`(${props.params.ticker})`}</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
{`The current ticker value is ${props.params.ticker}`}
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<div style={{ padding: '10px', height: '100%' }}>
{`The current ticker value is ${props.params.ticker}`}
</div>
);
},
iframe: (props) => {

31
packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx
View File

@ -1,6 +1,5 @@
import {
DockviewApi,
DockviewComponents,
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
@ -13,35 +12,7 @@ const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => {
const close = () => props.api.close();
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span style={{ fontSize: '9px' }}>
{'(Custom tab component)'}
</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
hello world
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<div style={{ padding: '10px', height: '100%' }}>hello world</div>
);
},
};

2
packages/dockview-docs/src/components/container.tsx
View File

@ -14,7 +14,7 @@ export const Container = (props: { children: React.ReactNode }) => {
<Navigation pages={PAGES} />
</div>
<div
style={{ flexGrow: 1, padding: '20px' }}
style={{ flexGrow: 1, padding: '20px', maxWidth: '1440px' }}
className="markdown-body"
>
{props.children}

57
packages/dockview-docs/src/components/dockview/customCss.tsx Normal file
View File

@ -0,0 +1,57 @@
import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
//
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const CustomCSSDockview = () => {
const onReady = (event: DockviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
event.api.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
};
return (
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-vs"
/>
);
};

43
packages/dockview-docs/src/components/simplePaneview.tsx
View File

@ -18,6 +18,7 @@ const components = {
{props.params.title}
</div>
);
<<<<<<< HEAD
},
};
@ -56,9 +57,51 @@ const headerComponents = {
<span>{props.params.title}</span>
</div>
);
=======
>>>>>>> 10317206e04a4f043398ef500e0212b34620d804
},
};
const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => {
const [expanded, setExpanded] = React.useState<boolean>(
props.api.isExpanded
);
React.useEffect(() => {
const disposable = props.api.onDidExpansionChange((event) => {
setExpanded(event.isExpanded);
});
return () => {
disposable.dispose();
};
}, []);
const onClick = () => {
props.api.setExpanded(!expanded);
};
return (
<div
style={{
padding: '10px',
height: '100%',
backgroundColor: 'rgb(60,60,60)',
}}
>
<a
onClick={onClick}
className={expanded ? 'expanded' : 'collapsed'}
/>
<span>{props.params.title}</span>
</div>
);
};
const headerComponents = {
myHeaderComponent: MyHeaderComponent,
};
export const SimplePaneview = () => {
const onReady = (event: PaneviewReadyEvent) => {
event.api.addPanel({

53
packages/dockview-docs/src/components/splitview/active.tsx Normal file
View File

@ -0,0 +1,53 @@
import {
ISplitviewPanelProps,
Orientation,
SplitviewReact,
SplitviewReadyEvent,
} from 'dockview';
const components = {
default: (props: ISplitviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const SimpleSplitview = (props: { proportional?: boolean }) => {
const onReady = (event: SplitviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
minimumSize: 100,
});
event.api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
minimumSize: 100,
});
event.api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
minimumSize: 100,
});
};
return (
<SplitviewReact
components={components}
proportionalLayout={props.proportional}
onReady={onReady}
orientation={Orientation.HORIZONTAL}
className="dockview-theme-dark"
/>
);
};

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

@ -8,6 +8,7 @@ This section will take you through a number of concepts that can be applied to a
## Panels
The below examples use `ReactSplitview` but the logic holds for `ReactPaneview`, `ReactGridview` and `ReactDockview` using their respective implementations and interfaces.
sAll components require you to provide an `onReady` prop which you can use to build and control your component.
### Adding a panel with parameters
@ -38,7 +39,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
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.
- The `container 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 }>) => {
@ -75,10 +76,28 @@ All components support `toJSON(): T` which returns a Typed object representation
## 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).
Internally this is achieved using a [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) which some users may need to polyfill.
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`.
An advanced case may use this in conjunction with `disableAutoResizing=true` to allow a parent component to have ultimate control over the dimensions of the component.
## Events
Many API properties can be listened on using the `Event` pattern. For example `api.onDidFocusChange(() => {...})`.
You should dispose of any event listeners you create cleaning up any listeners you would have created.
```tsx
React.useEffect(() => {
const disposable = api.onDidFocusChange(() => {
// write some code
});
return () => {
disposable.dispose();
};
}, []);
```
## Proportional layout
@ -88,3 +107,7 @@ Although not configurable on `DockviewReact` and `PaneviewReact` these both beha
<SimpleSplitview2 proportional={false} />
<SimpleSplitview2 proportional={true} />
## Browser support
dockview is intended to support all major browsers. Some users may require a polyfill for [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).

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

@ -1,4 +1,7 @@
import { SimpleDockview } from '../components/simpleDockview';
import Link from 'next/link';
# Dockview
Dockview is an abstraction built on top of [Gridviews](/gridview) where each view is a tabbed container.
@ -44,18 +47,18 @@ panel.group.header.hidden = true;
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 | |
| 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 <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| onTabContextMenu | Event | Yes | false | |
| onDidDrop | Event | Yes | false | |
| showDndOverlay | Event | Yes | false | |
## Dockview API
@ -73,45 +76,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 | `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) |
| 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` | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedDockview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedDockview` | <Link href="/basics/#serialization">Serialization</Link> |
## Dockview Panel API
@ -134,7 +137,6 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => {
| onDidFocusChange | `Event<FocusEvent>` | |
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
| onDidActiveChange | `Event<ActiveEvent>` | |
| onFocusEvent | `Event<void>` | |
| setActive | `(): void` | |
| | | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |

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

@ -1,4 +1,7 @@
import { SimpleGridview } from '../components/simpleGridview';
import Link from 'next/link';
# Gridview
<div
style={{
@ -17,15 +20,15 @@ import { SimpleGridview } from '../components/simpleGridview';
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) |
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ---------------------- | ------------------------------------------------------------------------ |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| orientation | Orientation | Yes | Orientation.HORIZONTAL | |
| proportionalLayout | boolean | Yes | true | See <Link href="/basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | boolean | Yes | false | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
## Gridview API
@ -43,37 +46,34 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| 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) |
| fromJSON | `(data: SerializedGridview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedGridview` | 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 |
| panels | `ISplitviewPanel[]` | all panels |
| orientation | `Orientation` | |
| | | |
| onDidLayoutChange | `Event<void>` | Fires on layout change |
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
| onDidAddPanel | `Event<IGridviewPanel>` | Fires when a view is added |
| onDidRemovePanel | `Event<IGridviewPanel>` | Fires when a view is removed |
| onDidActivePanelChange | `Event<IGridviewPanel \| undefined>` | Fires when the active group changes |
| | | |
| 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` | |
| focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link href="/basics/#serialization">Serialization</Link> |
## Gridview Panel API
@ -98,7 +98,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
| onDidFocusChange | `Event<FocusEvent>` | |
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
| onDidActiveChange | `Event<ActiveEvent>` | |
| onFocusEvent | `Event<void>` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| | | |
| setVisible | `(isVisible: boolean): void` | |

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

@ -1,4 +1,7 @@
import { SimplePaneview } from '../components/simplePaneview';
import Link from 'next/link';
# Paneview
<div
style={{
@ -17,15 +20,34 @@ import { SimplePaneview } from '../components/simplePaneview';
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 | | |
| Property | Type | Optional | Default | Description |
| ------------------- | ------------------------------------ | -------- | ------- | -------------------------------------------------------- |
| onReady | (event: SplitviewReadyEvent) => void | No | | |
| components | object | No | | |
| headerComponents | object | Yes | | |
| className | string | Yes | '' | |
| disableAutoResizing | boolean | Yes | false | <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| disableDnd | boolean | Yes | false | |
| onDidDrop | Event | Yes | | |
## Custom Header
The above example shows the default header and will render the `title` along with a small icon to indicate a collapsed or expanded state.
You can provide a custom header:
```tsx
const onReady = (event: PaneviewReadyEvent) => {
event.api.addPanel({
id: 'panel_1',
component: 'default',
headerComponent: 'myHeaderComponent',
params: {
valueA: 'A',
},
title: 'Panel 1',
});
};
```
## Custom Header
@ -102,30 +124,30 @@ const onReady = (event: GridviewReadyEvent) => {
};
```
| 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) |
| fromJSON | `(data: SerializedPaneview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedPaneview` | See [Serialization](/basics/#serialization) |
| Property | Type | Description |
| ------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
| length | `number` | Number of panels |
| panels | `IPaneviewPanel[]` | All panels |
| | | |
| onDidLayoutChange | `Event<void>` | Fires on layout change |
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
| onDidAddView | `Event<IPaneviewPanel>` | Fires when a view is added |
| onDidRemoveView | `Event<IPaneviewPanel>` | Fires when a view is removed |
| onDidDrop | `Event<PaneviewDropEvent` | Fires on an external drop event (See <Link href="/paneview/#drag-and-drop">Drag and Drop</Link>) |
| | | |
| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | |
| removePanel | `(panel: IPaneviewPanel): void` | |
| movePanel | `(from: number, to: number): void` | |
| getPanel | `(id:string): IPaneviewPanel \| undefined` | |
| | | |
| focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link href="/basics/#serialization">Serialization</Link> |
## Gridview Panel API
@ -150,10 +172,11 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
| onDidFocusChange | `Event<FocusEvent>` | |
| onDidVisibilityChange | `Event<VisibilityEvent>` | |
| onDidActiveChange | `Event<ActiveEvent>` | |
| onFocusEvent | `Event<void>` | |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | |
| | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: SizeEvent): void` | |
# Drag And Drop

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

@ -1,4 +1,5 @@
import { SimpleSplitview } from '../components/simpleSplitview';
import Link from 'next/link';
# Splitview
@ -73,15 +74,15 @@ import { ReactSplitview } from 'dockview';
The `onReady` prop you will you access to the component `api`.
| Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------- |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See [Proportional layout](/basics/#proportional-layout) |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See [Auto resizing](/basics/#auto-resizing) |
| Property | Type | Optional | Default | Description |
| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------------------------------------------------ |
| onReady | `(event: SplitviewReadyEvent) => void` | No | | |
| components | `Record<string, ISplitviewPanelProps>` | No | | Panel renderers |
| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview |
| proportionalLayout | `boolean` | Yes | `true` | See <Link href="/basics/#proportional-layout">Proportional layout</Link> |
| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels |
| className | `string` | Yes | `''` | Attaches a classname |
| disableAutoResizing | `boolean` | Yes | `false` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
## Splitview API
@ -99,32 +100,30 @@ const onReady = (event: SplitviewReadyEvent) => {
};
```
| 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` | |
| Property | Type | Description |
| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- |
| height | `number` | Component pixel height |
| width | `number` | Component pixel width |
| minimumSize | `number` | The sum of the `minimumSize` property for each panel |
| maximumSize | `number` | The sum of the `maximumSize` property for each panel |
| length | `number` | Number of panels |
| panels | `ISplitviewPanel[]` | All panels |
| | | |
| onDidLayoutChange | `Event<void>` | Fires on layout change |
| onDidLayoutFromJSON | `Event<void>` | Fires of layout change caused by a fromJSON deserialization call |
| onDidAddView | `Event<IView>` | Fires when a view is added |
| onDidRemoveView | `Event<IView>` | Fires when a view is removed |
| | | |
| 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) |
| fromJSON | `(data: SerializedSplitview): void` | See [Serialization](/basics/#serialization) |
| toJSON | `(): SerializedSplitview` | See [Serialization](/basics/#serialization) |
| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | |
| focus | `(): void` | Focus the active panel, if exists |
| layout | `(width: number, height:number): void` | See <Link href="/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedSplitview): void` | <Link href="/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedSplitview` | <Link href="/basics/#serialization">Serialization</Link> |
## Splitview Panel API
@ -136,24 +135,79 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => {
};
```
| Property | Type | Description |
| ---------------------- | ----------------------------------------------------------- | ---------------- |
| id | `string` | Panel id |
| isFocused | `boolean` | Is panel focsed |
| isActive | `boolean` | Is panel active |
| 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` | |
| | | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: PanelSizeEvent): void` | |
| Property | Type | Description |
| ---------------------- | ----------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| id | `string` | Panel id |
| isFocused | `boolean` | Is panel focsed |
| isActive | `boolean` | Is panel active |
| isVisible | `boolean` | Is panel visible |
| width | `number` | Panel width |
| height | `number` | Panel height |
| | | |
| onDidDimensionsChange | `Event<PanelDimensionChangeEvent>` | Fires when panel dimensions change |
| onDidFocusChange | `Event<FocusEvent>` | Fire when panel is focused and blurred |
| onDidVisibilityChange | `Event<VisibilityEvent>` | Fires when the panels visiblity property is changed (see <Link href="/splitview/#visibility">Panel Visibility</Link>) |
| onDidActiveChange | `Event<ActiveEvent>` | Fires when the panels active property is changed (see <Link href="/splitview/#active">Active Panel</Link>) |
| onDidConstraintsChange | `onDidConstraintsChange: Event<PanelConstraintChangeEvent>` | Fires when the panels size contrainsts change (see <Link href="/splitview/#contraints">Panel Constraints</Link>) |
| | | |
| setVisible | `(isVisible: boolean): void` | |
| setActive | `(): void` | |
| | | |
| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | |
| setSize | `(event: PanelSizeEvent): void` | |
# Visibility
```tsx
const disposable = props.api.onDidVisibilityChange(({ isVisible }) => {
//
});
```
```tsx
api.setVisible(true);
```
# Active
Only one panel in the `splitview` can be the active panel at any one time.
Setting a panel as active will set all the others as inactive.
A focused panel is always the active panel but an active panel is not always focused.
```tsx
const disposable = props.api.onDidActiveChange(({ isActive }) => {
//
});
```
```tsx
api.setActive();
```
# Contraints
When adding a panel you can specify pixel size contraints
```tsx
event.api.addPanel({
id: 'panel_3',
component: 'default',
minimumSize: 100,
maximumSize: 1000,
});
```
These contraints can be updated throughout the lifecycle of the `splitview` using the panel API
```tsx
props.api.onDidConstraintsChange(({ maximumSize, minimumSize }) => {
//
});
```
```tsx
api.setConstraints({
maximumSize: 200,
minimumSize: 400,
});
```

72
packages/dockview-docs/src/pages/theme.mdx Normal file
View File

@ -0,0 +1,72 @@
import { CustomCSSDockview } from '../components/dockview/customCss';
# Theme
`dockview` requires some css to work correctly.
The css is exported as one file under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css)
and depending can be imported
```css
@import './node_modules/dockview/dist/styles/dockview.css';
```
`dockview` supports theming through the use of css properties.
You can view the built-in themes at [`dockview/src/theme.scss`](https://github.com/mathuo/dockview/blob/master/packages/dockview/src/theme.scss)
and are free to build your own themes based on these css properties.
| CSS Property | Description |
| ---------------------------------------------------- | ----------- |
| --dv-paneview-active-outline-color | |
| --dv-tabs-and-actions-container-font-size | |
| --dv-tabs-and-actions-container-height | |
| --dv-tab-close-icon | |
| --dv-drag-over-background-color | |
| --dv-drag-over-border-color | |
| --dv-tabs-container-scrollbar-color | |
| | |
| --dv-group-view-background-color | |
| | |
| --dv-tabs-and-actions-container-background-color | |
| | |
| --dv-activegroup-visiblepanel-tab-background-color | |
| --dv-activegroup-hiddenpanel-tab-background-color | |
| --dv-inactivegroup-visiblepanel-tab-background-color | |
| --dv-inactivegroup-hiddenpanel-tab-background-color | |
| --dv-tab-divider-color | |
| | |
| --dv-activegroup-visiblepanel-tab-color | |
| --dv-activegroup-hiddenpanel-tab-color | |
| --dv-inactivegroup-visiblepanel-tab-color | |
| --dv-inactivegroup-hiddenpanel-tab-color | |
| | |
| --dv-separator-border | |
| --dv-paneview-header-border-color | |
You can further customise the theme through adjusting class properties but this is up you.
As an example if you wanted to add a bottom border to the tab container for an active group in the `DockviewReact` component you could write:
```css
.groupview {
&.active-group {
> .tabs-and-actions-container {
border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color);
}
}
&.inactive-group {
> .tabs-and-actions-container {
border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color);
}
}
}
```
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<CustomCSSDockview />
</div>

1
packages/dockview-docs/src/references/pages.ts
View File

@ -7,6 +7,7 @@ export interface Page {
export const PAGES: Page[] = [
{ title: 'Introduction', url: '/#introduction' },
{ title: 'Basics', url: '/basics/#basics' },
{ title: 'Theme', url: '/theme/#theme' },
{
title: 'API',
url: '#api',

25
packages/dockview/README.md
View File

@ -124,31 +124,6 @@ const Component = () => {
};
```
Specifically for `DockviewReact` there exists higher-order components to encapsulate both the tab and contents into one logical component for the user making state sharing between the two simple, which is an optional feature.
```tsx
const components: PanelCollection<IDockviewPanelProps> = {
default: (props: IDockviewPanelProps<{ someProps: string }>) => {
return <div>{props.params.someProps}</div>;
},
fancy: (props: IDockviewPanelProps) => {
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div>
<span>{props.api.title}</span>
<span onClick={() => props.api.close()}>{'Close'}</span>
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div>{'Hello world'}</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
);
},
};
```
## Sandbox examples
- [Dockview](https://codesandbox.io/s/simple-dockview-t6491)

4
packages/dockview/src/__tests__/api/api.spec.ts
View File

@ -41,11 +41,11 @@ describe('api', () => {
expect(api.height).toBe(0);
expect(api.width).toBe(0);
api._onDidPanelDimensionChange.fire({ height: 10, width: 20 });
api._onDidDimensionChange.fire({ height: 10, width: 20 });
expect(api.height).toBe(10);
expect(api.width).toBe(20);
api._onDidPanelDimensionChange.fire({ height: 20, width: 10 });
api._onDidDimensionChange.fire({ height: 20, width: 10 });
expect(api.height).toBe(20);
expect(api.width).toBe(10);
});

20
packages/dockview/src/api/component.api.ts
View File

@ -100,10 +100,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
this.component.removePanel(panel, sizing);
}
setVisible(panel: ISplitviewPanel, isVisible: boolean): void {
this.component.setVisible(panel, isVisible);
}
focus(): void {
this.component.focus();
}
@ -112,10 +108,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
return this.component.getPanel(id);
}
setActive(panel: ISplitviewPanel): void {
this.component.setActive(panel);
}
layout(width: number, height: number): void {
return this.component.layout(width, height);
}
@ -310,18 +302,6 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
return this.component.getPanel(id);
}
toggleVisibility(panel: IGridviewPanel): void {
this.component.toggleVisibility(panel);
}
setVisible(panel: IGridviewPanel, visible: boolean): void {
this.component.setVisible(panel, visible);
}
setActive(panel: IGridviewPanel): void {
this.component.setActive(panel);
}
fromJSON(data: SerializedGridview): void {
return this.component.fromJSON(data);
}

13
packages/dockview/src/api/panelApi.ts
View File

@ -23,8 +23,6 @@ export interface PanelApi {
readonly onDidFocusChange: Event<FocusEvent>;
readonly onDidVisibilityChange: Event<VisibilityEvent>;
readonly onDidActiveChange: Event<ActiveEvent>;
readonly onFocusEvent: Event<void>;
//
setVisible(isVisible: boolean): void;
setActive(): void;
/**
@ -63,11 +61,10 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
private _width = 0;
private _height = 0;
readonly _onDidPanelDimensionChange =
new Emitter<PanelDimensionChangeEvent>({
replay: true,
});
readonly onDidDimensionsChange = this._onDidPanelDimensionChange.event;
readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>({
replay: true,
});
readonly onDidDimensionsChange = this._onDidDimensionChange.event;
//
readonly _onDidChangeFocus = new Emitter<FocusEvent>({
replay: true,
@ -121,7 +118,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
super();
this.addDisposables(
this._onDidPanelDimensionChange,
this._onDidDimensionChange,
this._onDidChangeFocus,
this._onDidVisibilityChange,
this._onDidActiveChange,

73
packages/dockview/src/dockview/components/tab/defaultTab.ts
View File

@ -7,67 +7,6 @@ import { addDisposableListener } from '../../../events';
import { PanelUpdateEvent } from '../../../panel/types';
import { GroupPanel } from '../../../groupview/groupviewPanel';
export class WrappedTab implements ITabRenderer {
private readonly _element: HTMLElement;
constructor(private readonly renderer: ITabRenderer) {
this._element = document.createElement('element');
this.show();
}
get innerRenderer() {
return this.renderer;
}
get element() {
return this._element;
}
get id() {
return this.renderer.id;
}
show() {
if (!this.renderer.element.parentElement) {
this._element.appendChild(this.renderer.element);
}
}
hide() {
if (this.renderer.element.parentElement) {
this.renderer.element.remove();
}
}
layout(width: number, height: number): void {
this.renderer.layout(width, height);
}
update(event: PanelUpdateEvent): void {
this.renderer.update(event);
}
toJSON(): object {
return this.renderer.toJSON();
}
focus(): void {
this.renderer.focus();
}
init(parameters: GroupPanelPartInitParameters): void {
this.renderer.init(parameters);
}
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
this.renderer.updateParentGroup(group, isPanelVisible);
}
dispose() {
this.renderer.dispose();
}
}
export class DefaultTab extends CompositeDisposable implements ITabRenderer {
private _element: HTMLElement;
@ -148,10 +87,16 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
}
public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
const changed =
this._isPanelVisible !== isPanelVisible ||
this._isGroupActive !== group.isActive;
this._isPanelVisible = isPanelVisible;
this._isGroupActive = group.isActive;
this.render();
if (changed) {
this.render();
}
}
public layout(_width: number, _height: number) {
@ -159,6 +104,8 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
}
private render() {
this._content.textContent = this.params.title;
if (this._content.textContent !== this.params.title) {
this._content.textContent = this.params.title;
}
}
}

11
packages/dockview/src/dockview/defaultGroupPanelView.ts
View File

@ -1,4 +1,4 @@
import { DefaultTab, WrappedTab } from './components/tab/defaultTab';
import { DefaultTab } from './components/tab/defaultTab';
import {
GroupPanelPartInitParameters,
IActionsRenderer,
@ -22,7 +22,7 @@ export interface IGroupPanelView extends IDisposable {
export class DefaultGroupPanelView implements IGroupPanelView {
private readonly _content: IContentRenderer;
private readonly _tab: WrappedTab;
private readonly _tab: ITabRenderer;
private readonly _actions: IActionsRenderer | undefined;
get content() {
@ -43,7 +43,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
actions?: IActionsRenderer;
}) {
this._content = renderers.content;
this._tab = new WrappedTab(renderers.tab ?? new DefaultTab());
this._tab = renderers.tab ?? new DefaultTab();
this._actions =
renderers.actions ||
(this.content.actions
@ -78,10 +78,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
toJSON(): {} {
return {
content: this.content.toJSON(),
tab:
this.tab.innerRenderer instanceof DefaultTab
? undefined
: this.tab.toJSON(),
tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
};
}

2
packages/dockview/src/dockview/dockviewComponent.ts
View File

@ -669,7 +669,7 @@ export class DockviewComponent
}
const view = new GroupPanel(this, id, options);
view.init({ params: {}, containerApi: <any>null }); // required to initialized .part and allow for correct disposal of group
view.init({ params: {}, accessor: <any>null }); // required to initialized .part and allow for correct disposal of group
if (!this._groups.has(view.id)) {
const disposable = new CompositeDisposable(

2
packages/dockview/src/dockview/dockviewGroupPanel.ts
View File

@ -169,7 +169,7 @@ export class DockviewGroupPanel
public layout(width: number, height: number) {
// the obtain the correct dimensions of the content panel we must deduct the tab height
this.api._onDidPanelDimensionChange.fire({
this.api._onDidDimensionChange.fire({
width,
height: height - (this.group.model.header.height || 0),
});

2
packages/dockview/src/gridview/basePanelView.ts
View File

@ -90,7 +90,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
layout(width: number, height: number) {
this._width = width;
this._height = height;
this.api._onDidPanelDimensionChange.fire({ width, height });
this.api._onDidDimensionChange.fire({ width, height });
if (this.part) {
if (this._params) {

10
packages/dockview/src/gridview/gridviewComponent.ts
View File

@ -22,7 +22,6 @@ import {
IGridviewPanel,
} from './gridviewPanel';
import { BaseComponentOptions } from '../panel/types';
import { GridviewApi } from '../api/component.api';
import { Orientation, Sizing } from '../splitview/core/splitview';
import { createComponent } from '../panel/componentFactory';
import { Emitter, Event } from '../events';
@ -64,7 +63,6 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
addPanel(options: AddComponentOptions): IGridviewPanel;
removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
toggleVisibility(panel: IGridviewPanel): void;
focus(): void;
fromJSON(serializedGridview: SerializedGridview): void;
toJSON(): SerializedGridview;
@ -170,10 +168,6 @@ export class GridviewComponent
});
}
toggleVisibility(panel: GridviewPanel) {
this.setVisible(panel, !this.isVisible(panel));
}
focus() {
this.activeGroup?.focus();
}
@ -217,7 +211,7 @@ export class GridviewComponent
maximumHeight: data.maximumHeight,
priority: data.priority,
snap: !!data.snap,
containerApi: new GridviewApi(this),
accessor: this,
isVisible: node.visible,
})
);
@ -322,7 +316,7 @@ export class GridviewComponent
maximumHeight: options.maximumHeight,
priority: options.priority,
snap: !!options.snap,
containerApi: new GridviewApi(this),
accessor: this,
isVisible: true,
});

16
packages/dockview/src/gridview/gridviewPanel.ts
View File

@ -1,5 +1,8 @@
import { PanelInitParameters } from '../panel/types';
import { IGridPanelComponentView } from './gridviewComponent';
import {
GridviewComponent,
IGridPanelComponentView,
} from './gridviewComponent';
import { FunctionOrValue } from '../types';
import {
BasePanelView,
@ -10,7 +13,6 @@ import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
import { LayoutPriority } from '../splitview/core/splitview';
import { Emitter, Event } from '../events';
import { IViewSize } from './gridview';
import { GridviewApi } from '../api/component.api';
export interface GridviewInitParameters extends PanelInitParameters {
minimumWidth?: number;
@ -19,7 +21,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
maximumHeight?: number;
priority?: LayoutPriority;
snap?: boolean;
containerApi: GridviewApi;
accessor: GridviewComponent;
isVisible?: boolean;
}
@ -132,12 +134,12 @@ export abstract class GridviewPanel
this._onDidChange,
this.api.onVisibilityChange((event) => {
const { isVisible } = event;
const { containerApi } = this._params as GridviewInitParameters;
containerApi.setVisible(this, isVisible);
const { accessor } = this._params as GridviewInitParameters;
accessor.setVisible(this, isVisible);
}),
this.api.onActiveChange(() => {
const { containerApi } = this._params as GridviewInitParameters;
containerApi.setActive(this);
const { accessor } = this._params as GridviewInitParameters;
accessor.setActive(this);
}),
this.api.onDidConstraintsChangeInternal((event) => {
if (

4
packages/dockview/src/groupview/types.ts
View File

@ -5,7 +5,6 @@ import { PanelInitParameters, IPanel } from '../panel/types';
import { DockviewApi } from '../api/component.api';
import { GroupPanel } from './groupviewPanel';
import { Event } from '../events';
import { WrappedTab } from '../dockview/components/tab/defaultTab';
export interface IRenderable {
id: string;
@ -28,7 +27,7 @@ export interface GroupPanelPartInitParameters
export interface GroupPanelContentPartInitParameters
extends GroupPanelPartInitParameters {
tab: WrappedTab;
tab: ITabRenderer;
}
export interface IWatermarkRenderer extends IPanel {
@ -54,7 +53,6 @@ export interface IContentRenderer extends IPanel {
readonly onDidBlur?: Event<void>;
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
init(parameters: GroupPanelContentPartInitParameters): void;
close?(): Promise<boolean>;
}
// watermark component

89
packages/dockview/src/react/dockview/components.tsx
View File

@ -1,89 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isReactElement, ReactPartContext } from '../react';
import { ReactContentPartContext } from './reactContentPart';
interface WithChildren {
children: React.ReactNode;
}
const Tab: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
return <>{props.children}</>;
};
const Content: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
const Actions: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
function isValidComponent(element: React.ReactElement) {
return [Content, Actions, Tab].find((comp) => element.type === comp);
}
const Panel: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
const context = React.useContext(
ReactPartContext
) as ReactContentPartContext;
const sections = React.useMemo(() => {
const childs =
React.Children.map(props.children, (_) => _)?.filter(
isReactElement
) || [];
const isInvalid = !!childs.find((_) => !isValidComponent(_));
if (isInvalid) {
throw new Error(
'Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab'
);
}
const body = childs.find((_) => _.type === Content);
const actions = childs.find((_) => _.type === Actions);
const tab = childs.find((_) => _.type === Tab);
return { body, actions, tab };
}, [props.children]);
React.useEffect(() => {
/**
* hide or show the default tab behavior based on whether we want to override
* with our own React tab.
*/
if (sections.tab) {
context.tabPortalElement.hide();
} else {
context.tabPortalElement.show();
}
}, [sections.tab]);
return (
<>
{sections.actions &&
ReactDOM.createPortal(
sections.actions,
context.actionsPortalElement
)}
{sections.tab &&
ReactDOM.createPortal(
sections.tab,
context.tabPortalElement.element
)}
{sections.body || props.children}
</>
);
};
export const DockviewComponents = {
Tab,
Content,
Actions,
Panel,
};

8
packages/dockview/src/react/dockview/reactContentPart.ts
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import {
IContentRenderer,
GroupPanelContentPartInitParameters,
ITabRenderer,
} from '../../groupview/types';
import { ReactPart, ReactPortalStore } from '../react';
import { IDockviewPanelProps } from '../dockview/dockview';
@ -10,7 +11,6 @@ import { DockviewPanelApi } from '../../api/groupPanelApi';
import { DockviewApi } from '../../api/component.api';
import { GroupPanel } from '../../groupview/groupviewPanel';
import { Emitter, Event } from '../../events';
import { WrappedTab } from '../../dockview/components/tab/defaultTab';
export interface IGroupPanelActionbarProps {
api: DockviewPanelApi;
@ -21,7 +21,7 @@ export interface ReactContentPartContext {
api: DockviewPanelApi;
containerApi: DockviewApi;
actionsPortalElement: HTMLElement;
tabPortalElement: WrappedTab;
tabPortalElement: ITabRenderer;
}
export class ReactPanelContentPart implements IContentRenderer {
@ -104,10 +104,6 @@ export class ReactPanelContentPart implements IContentRenderer {
// noop
}
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() {
this._onDidFocus.dispose();
this._onDidBlur.dispose();

4
packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
View File

@ -99,10 +99,6 @@ export class ReactContentRenderer implements IContentRenderer {
this._hostedContainer.layout(this.element);
}
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() {
this.part?.dispose();
}

6
packages/dockview/src/react/gridview/view.ts
View File

@ -1,3 +1,4 @@
import { GridviewApi } from '../../api/component.api';
import {
GridviewPanel,
GridviewInitParameters,
@ -24,8 +25,9 @@ export class ReactGridPanelView extends GridviewPanel {
{
params: this._params?.params || {},
api: this.api,
containerApi: (this._params as GridviewInitParameters)
.containerApi,
containerApi: new GridviewApi(
(this._params as GridviewInitParameters).accessor
),
}
);
}

1
packages/dockview/src/react/index.ts
View File

@ -1,5 +1,4 @@
export * from './dockview/dockview';
export * from './dockview/components';
export * from './splitview/splitview';
export * from './gridview/gridview';
export * from './dockview/reactContentPart';

6
packages/dockview/src/react/splitview/view.ts
View File

@ -1,3 +1,4 @@
import { SplitviewApi } from '../../api/component.api';
import { PanelViewInitParameters } from '../../splitview/core/options';
import { SplitviewPanel } from '../../splitview/splitviewPanel';
import { ReactPart, ReactPortalStore } from '../react';
@ -21,8 +22,9 @@ export class ReactPanelView extends SplitviewPanel {
{
params: this._params?.params || {},
api: this.api,
containerApi: (this._params as PanelViewInitParameters)
.containerApi,
containerApi: new SplitviewApi(
(this._params as PanelViewInitParameters).accessor
),
}
);
}

4
packages/dockview/src/splitview/core/options.ts
View File

@ -2,14 +2,14 @@ import { IPanel, PanelInitParameters } from '../../panel/types';
import { IView, SplitViewOptions, LayoutPriority } from './splitview';
import { FrameworkFactory } from '../../types';
import { SplitviewPanel } from '../splitviewPanel';
import { SplitviewApi } from '../../api/component.api';
import { SplitviewComponent } from '../splitviewComponent';
export interface PanelViewInitParameters extends PanelInitParameters {
minimumSize?: number;
maximumSize?: number;
snap?: boolean;
priority?: LayoutPriority;
containerApi: SplitviewApi;
accessor: SplitviewComponent;
}
export interface ISerializableView extends IView, IPanel {

6
packages/dockview/src/splitview/splitviewComponent.ts
View File

@ -14,7 +14,6 @@ import {
import { SplitviewComponentOptions } from './core/options';
import { BaseComponentOptions } from '../panel/types';
import { Emitter, Event } from '../events';
import { SplitviewApi } from '../api/component.api';
import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
import { createComponent } from '../panel/componentFactory';
@ -70,7 +69,6 @@ export interface ISplitviewComponent extends IDisposable {
fromJSON(serializedSplitview: SerializedSplitview): void;
focus(): void;
getPanel(id: string): ISplitviewPanel | undefined;
setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
setVisible(panel: ISplitviewPanel, visible: boolean): void;
movePanel(from: number, to: number): void;
@ -279,7 +277,7 @@ export class SplitviewComponent
maximumSize: options.maximumSize,
snap: options.snap,
priority: options.priority,
containerApi: new SplitviewApi(this),
accessor: this,
});
const size: Sizing | number =
@ -380,7 +378,7 @@ export class SplitviewComponent
maximumSize: data.maximumSize,
snap: view.snap,
priority: view.priority,
containerApi: new SplitviewApi(this),
accessor: this,
});
});

10
packages/dockview/src/splitview/splitviewPanel.ts
View File

@ -85,14 +85,12 @@ export abstract class SplitviewPanel
this._onDidChange,
this.api.onVisibilityChange((event) => {
const { isVisible } = event;
const { containerApi } = this
._params as PanelViewInitParameters;
containerApi.setVisible(this, isVisible);
const { accessor } = this._params as PanelViewInitParameters;
accessor.setVisible(this, isVisible);
}),
this.api.onActiveChange(() => {
const { containerApi } = this
._params as PanelViewInitParameters;
containerApi.setActive(this);
const { accessor } = this._params as PanelViewInitParameters;
accessor.setActive(this);
}),
this.api.onDidConstraintsChangeInternal((event) => {
if (