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

chore: docs

Browse Source
This commit is contained in:
mathuo 2022-05-25 22:18:58 +01:00
parent 659a59f16f
commit 014125d823
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
13 changed files with 28790 additions and 5406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/blog/2022-05-22-dockview-1.4.3.mdx Normal file
View File

@ -0,0 +1,16 @@
---
slug: dockview-1.4.3-release
title: Dockview 1.4.3
tags: [release]
---
# Release Notes
## 🚀 Features
- Small adjusted to behaviours of default paneview header componnet [#116](https://github.com/mathuo/dockview/pull/116)
- Improved support for external dnd events in the dockview component. `showDndOverlay` prop on `DockviewReact` exposes more parameters to interact with [#110](https://github.com/mathuo/dockview/pull/110)
## 🔥 Breaking changes
- Fix typo by renaming `onDidLayoutfromJSON` to `onDidLayoutFromJSON` in dockview component api [#112](https://github.com/mathuo/dockview/pull/112/files)

6
docs/docs/api/dockview.mdx
View File

@ -4,6 +4,7 @@ import {
Checkbox, Checkbox,
} from '../../src/components/dockview/rendering'; } from '../../src/components/dockview/rendering';
import { DndDockview } from '../../src/components/dockview/dnd'; import { DndDockview } from '../../src/components/dockview/dnd';
import { EventsDockview } from '../../src/components/dockview/events';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
# Dockview # Dockview
@ -105,6 +106,7 @@ const onReady = (event: DockviewReadyEvent) => {
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedDockview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedDockview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedDockview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedDockview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout |
## Dockview Panel API ## Dockview Panel API
@ -277,3 +279,7 @@ return (
``` ```
<DndDockview /> <DndDockview />
### Events
<EventsDockview />

3
docs/docs/api/gridview.mdx
View File

@ -77,6 +77,7 @@ const onReady = (event: GridviewReadyEvent) => {
| layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedGridview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedGridview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedGridview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedGridview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout |
## Gridview Panel API ## Gridview Panel API
@ -110,4 +111,6 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => {
## Events ## Events
`GridviewReact` exposes a number of events that the developer can listen to and below is a simple example with a log panel showing those events that occur.
<EventsGridview /> <EventsGridview />

1
docs/docs/api/paneview.mdx
View File

@ -72,6 +72,7 @@ const onReady = (event: GridviewReadyEvent) => {
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedPaneview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedPaneview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedPaneview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedPaneview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout |
## Gridview Panel API ## Gridview Panel API

1
docs/docs/api/splitview.mdx
View File

@ -135,6 +135,7 @@ const onReady = (event: SplitviewReadyEvent) => {
| layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> | | layout | `(width: number, height:number): void` | See <Link to="/docs/basics/#auto-resizing">Auto Resizing</Link> |
| fromJSON | `(data: SerializedSplitview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> | | fromJSON | `(data: SerializedSplitview): void` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| toJSON | `(): SerializedSplitview` | <Link to="/docs/basics/#serialization">Serialization</Link> | | toJSON | `(): SerializedSplitview` | <Link to="/docs/basics/#serialization">Serialization</Link> |
| clear | `(): void` | Clears the current layout |
## Splitview Panel API ## Splitview Panel API

73
docs/docusaurus.config.js
View File

@ -31,42 +31,43 @@ const config = {
defaultLocale: 'en', defaultLocale: 'en',
locales: ['en'], locales: ['en'],
}, },
plugins: ['docusaurus-plugin-sass'], plugins: [
// plugins: [ 'docusaurus-plugin-sass',
// (context, options) => { (context, options) => {
// return { return {
// name: 'webpack', name: 'webpack',
// configureWebpack: (config, isServer, utils) => { configureWebpack: (config, isServer, utils) => {
// if (isServer) { if (isServer) {
// return { return {
// externals: [ externals: [
// 'react', 'react',
// 'react-dom', 'react-dom',
// ...(config.externals || []), ...(config.externals || []),
// ], ],
// }; };
// } }
// return { return {
// // externals: ['react', 'react-dom'], // externals: ['react', 'react-dom'],
// resolve: { devtool: 'source-map',
// alias: { resolve: {
// react: path.join( alias: {
// __dirname, react: path.join(
// 'node_modules', __dirname,
// 'react' 'node_modules',
// ), 'react'
// 'react-dom': path.join( ),
// __dirname, 'react-dom': path.join(
// 'node_modules', __dirname,
// 'react-dom' 'node_modules',
// ), 'react-dom'
// }, ),
// }, },
// }; },
// }, };
// }; },
// }, };
// ], },
],
presets: [ presets: [
[ [
'classic', 'classic',

22774
docs/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

4
docs/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "dockview-docs", "name": "dockview-docs",
"version": "1.4.1", "version": "1.4.2",
"private": true, "private": true,
"scripts": { "scripts": {
"docusaurus": "docusaurus", "docusaurus": "docusaurus",
@ -20,7 +20,7 @@
"@docusaurus/preset-classic": "2.0.0-beta.20", "@docusaurus/preset-classic": "2.0.0-beta.20",
"@mdx-js/react": "^1.6.22", "@mdx-js/react": "^1.6.22",
"clsx": "^1.1.1", "clsx": "^1.1.1",
"dockview": "0.0.0-experimental-d306387a-20220521", "dockview": "file:../packages/dockview",
"prism-react-renderer": "^1.3.1", "prism-react-renderer": "^1.3.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",

9
docs/src/components/console/console.scss
View File

@ -1,7 +1,7 @@
.console-container { .console-container {
background-color: black; background-color: black;
color: white; color: white;
padding: 8px 0px; padding-left: 8px;
max-height: 200px; max-height: 200px;
overflow-y: scroll; overflow-y: scroll;
overflow-x: auto; overflow-x: auto;
@ -11,14 +11,17 @@
line-height: 20px; line-height: 20px;
font-size: 13px; font-size: 13px;
border-bottom: 1px solid rgb(30, 30, 30); border-bottom: 1px solid rgb(30, 30, 30);
display: flex;
padding-left: 4px;
.console-line-timestamp { .console-line-timestamp {
padding: 0px 8px;
color: lightgray; color: lightgray;
padding-right: 4px;
} }
.console-line-text { .console-line-text {
padding-right: 8px; padding: 0px 4px;
flex-grow: 1;
} }
} }
} }

5
docs/src/components/console/console.tsx
View File

@ -12,6 +12,7 @@ const formatTime = (now: Date) => {
export interface Line { export interface Line {
timestamp: Date; timestamp: Date;
text: string; text: string;
css?: React.CSSProperties;
} }
export interface IConsoleProps { export interface IConsoleProps {
@ -40,7 +41,9 @@ export const Console = (props: IConsoleProps) => {
<span className="console-line-timestamp"> <span className="console-line-timestamp">
{formatTime(line.timestamp)} {formatTime(line.timestamp)}
</span> </span>
<span className="console-line-text">{line.text}</span> <span className="console-line-text" style={line.css}>
{line.text}
</span>
</div> </div>
); );
})} })}

342
docs/src/components/dockview/events.tsx Normal file
View File

@ -0,0 +1,342 @@
import {
Orientation,
DockviewReact,
DockviewReadyEvent,
DockviewApi,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react';
import { Console, Line } from '../console/console';
const components = {
default: (props: IDockviewPanelProps<{ title: string }>) => {
return <div style={{ padding: '20px' }}>{props.params.title}</div>;
},
};
export const EventsDockview = () => {
const [lines, setLines] = React.useState<Line[]>([]);
const [checked, setChecked] = React.useState<boolean>(false);
const [api, setApi] = React.useState<DockviewApi | undefined>();
React.useEffect(() => {
if (!api) {
return () => {
//noop
};
}
const disposables = [
api.onDidAddPanel((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidAddPanel: ${panel.id}`,
},
]);
}),
api.onDidRemovePanel((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidRemovePanel: ${panel.id}`,
},
]);
}),
api.onDidActivePanelChange((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidActivePanelChange: ${panel?.id}`,
},
]);
}),
api.onDidAddGroup((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidAddGroup: ${panel.id}`,
},
]);
}),
api.onDidRemoveGroup((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidRemoveGroup: ${panel.id}`,
},
]);
}),
api.onDidActiveGroupChange((panel) => {
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `onDidActiveGroupChange: ${panel?.id}`,
},
]);
}),
api.onDidLayoutChange((panel) => {
setLines((lines) => [
...lines,
{ timestamp: new Date(), text: `onDidLayoutChange` },
]);
}),
api.onDidLayoutFromJSON((panel) => {
setLines((lines) => [
...lines,
{ timestamp: new Date(), text: `onDidLayoutFromJSON` },
]);
}),
];
return () => {
disposables.forEach((disposable) => disposable.dispose());
};
}, [api]);
React.useEffect(() => {
if (!api) {
return;
}
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `Rebuilding view fromJSON:${checked}`,
css: { color: 'yellow', backgroundColor: 'grey' },
},
]);
if (checked) {
api.fromJSON({
grid: {
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel_1', 'panel_2', 'panel_3'],
activeView: 'panel_3',
id: '77',
},
size: 262,
},
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
views: ['panel_5'],
activeView: 'panel_5',
id: '79',
},
size: 100,
},
{
type: 'leaf',
data: {
views: ['panel_6', 'panel_8'],
activeView: 'panel_8',
id: '80',
},
size: 100,
},
{
type: 'leaf',
data: {
views: ['panel_7'],
activeView: 'panel_7',
id: '81',
},
size: 100,
},
],
size: 262,
},
{
type: 'leaf',
data: {
views: ['panel_4'],
activeView: 'panel_4',
id: '78',
},
size: 263.75,
},
],
size: 300,
},
width: 787.75,
height: 300,
orientation: Orientation.HORIZONTAL,
},
panels: {
panel_1: {
id: 'panel_1',
view: { content: { id: 'default' } },
params: { title: 'Panel 1' },
title: 'panel_1',
},
panel_2: {
id: 'panel_2',
view: { content: { id: 'default' } },
params: { title: 'Panel 2' },
title: 'panel_2',
},
panel_3: {
id: 'panel_3',
view: { content: { id: 'default' } },
params: { title: 'Panel 3' },
title: 'panel_3',
},
panel_4: {
id: 'panel_4',
view: { content: { id: 'default' } },
params: { title: 'Panel 4' },
title: 'panel_4',
},
panel_5: {
id: 'panel_5',
view: { content: { id: 'default' } },
params: { title: 'Panel 5' },
title: 'panel_5',
},
panel_6: {
id: 'panel_6',
view: { content: { id: 'default' } },
params: { title: 'Panel 6' },
title: 'panel_6',
},
panel_8: {
id: 'panel_8',
view: { content: { id: 'default' } },
params: { title: 'Panel 8' },
title: 'panel_8',
},
panel_7: {
id: 'panel_7',
view: { content: { id: 'default' } },
params: { title: 'Panel 7' },
title: 'panel_7',
},
},
activeGroup: '80',
options: {},
});
return;
}
api.clear();
api.addPanel({
id: 'panel_1',
component: 'default',
params: {
title: 'Panel 1',
},
});
api.addPanel({
id: 'panel_2',
component: 'default',
params: {
title: 'Panel 2',
},
});
api.addPanel({
id: 'panel_3',
component: 'default',
params: {
title: 'Panel 3',
},
});
api.addPanel({
id: 'panel_4',
component: 'default',
params: {
title: 'Panel 4',
},
position: { referencePanel: 'panel_1', direction: 'right' },
});
api.addPanel({
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
position: { referencePanel: 'panel_3', direction: 'right' },
});
api.addPanel({
id: 'panel_6',
component: 'default',
params: {
title: 'Panel 6',
},
position: { referencePanel: 'panel_5', direction: 'below' },
});
api.addPanel({
id: 'panel_7',
component: 'default',
params: {
title: 'Panel 7',
},
position: { referencePanel: 'panel_6', direction: 'below' },
});
api.addPanel({
id: 'panel_8',
component: 'default',
params: {
title: 'Panel 8',
},
position: { referencePanel: 'panel_6', direction: 'within' },
});
}, [api, checked]);
const onReady = (event: DockviewReadyEvent) => {
setApi(event.api);
};
return (
<>
<label>
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
<span>{'fromJSON'}</span>
</label>
<div
style={{
height: '300px',
backgroundColor: 'rgb(30,30,30)',
color: 'white',
margin: '20px 0px',
}}
>
<DockviewReact
components={components}
onReady={onReady}
className="dockview-theme-dark"
/>
</div>
<Console lines={lines} />
</>
);
};

211
docs/src/components/gridview/events.tsx
View File

@ -3,6 +3,7 @@ import {
Orientation, Orientation,
GridviewReact, GridviewReact,
GridviewReadyEvent, GridviewReadyEvent,
GridviewApi,
} from 'dockview'; } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { Console, Line } from '../console/console'; import { Console, Line } from '../console/console';
@ -15,10 +16,19 @@ const components = {
export const EventsGridview = () => { export const EventsGridview = () => {
const [lines, setLines] = React.useState<Line[]>([]); const [lines, setLines] = React.useState<Line[]>([]);
const [checked, setChecked] = React.useState<boolean>(false);
const [api, setApi] = React.useState<GridviewApi | undefined>();
React.useEffect(() => {
if (!api) {
return () => {
//noop
};
}
const onReady = (event: GridviewReadyEvent) => {
const disposables = [ const disposables = [
event.api.onDidAddPanel((panel) => { api.onDidAddPanel((panel) => {
setLines((lines) => [ setLines((lines) => [
...lines, ...lines,
{ {
@ -27,7 +37,7 @@ export const EventsGridview = () => {
}, },
]); ]);
}), }),
event.api.onDidRemovePanel((panel) => { api.onDidRemovePanel((panel) => {
setLines((lines) => [ setLines((lines) => [
...lines, ...lines,
{ {
@ -36,7 +46,7 @@ export const EventsGridview = () => {
}, },
]); ]);
}), }),
event.api.onDidActivePanelChange((panel) => { api.onDidActivePanelChange((panel) => {
setLines((lines) => [ setLines((lines) => [
...lines, ...lines,
{ {
@ -45,13 +55,13 @@ export const EventsGridview = () => {
}, },
]); ]);
}), }),
event.api.onDidLayoutChange((panel) => { api.onDidLayoutChange((panel) => {
setLines((lines) => [ setLines((lines) => [
...lines, ...lines,
{ timestamp: new Date(), text: `onDidLayoutChange` }, { timestamp: new Date(), text: `onDidLayoutChange` },
]); ]);
}), }),
event.api.onDidLayoutFromJSON((panel) => { api.onDidLayoutFromJSON((panel) => {
setLines((lines) => [ setLines((lines) => [
...lines, ...lines,
{ timestamp: new Date(), text: `onDidLayoutFromJSON` }, { timestamp: new Date(), text: `onDidLayoutFromJSON` },
@ -59,7 +69,165 @@ export const EventsGridview = () => {
}), }),
]; ];
event.api.addPanel({ return () => {
disposables.forEach((disposable) => disposable.dispose());
};
}, [api]);
React.useEffect(() => {
if (!api) {
return;
}
setLines((lines) => [
...lines,
{
timestamp: new Date(),
text: `Rebuilding view fromJSON:${checked}`,
css: { color: 'yellow', backgroundColor: 'grey' },
},
]);
if (checked) {
api.fromJSON({
grid: {
root: {
type: 'branch',
data: [
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
id: 'panel_3',
component: 'default',
params: { title: 'Panel 3' },
snap: false,
},
size: 394,
},
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
id: 'panel_5',
component: 'default',
params: {
title: 'Panel 5',
},
snap: false,
},
size: 50,
},
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
id: 'panel_6',
component:
'default',
params: {
title: 'Panel 6',
},
minimumWidth: 10,
snap: false,
},
size: 131,
},
{
type: 'leaf',
data: {
id: 'panel_8',
component:
'default',
params: {
title: 'Panel 8',
},
minimumWidth: 10,
snap: false,
},
size: 131,
},
{
type: 'leaf',
data: {
id: 'panel_7',
component:
'default',
params: {
title: 'Panel 7',
},
minimumWidth: 10,
snap: false,
},
size: 132,
},
],
size: 50,
},
],
size: 394,
},
],
size: 100,
},
{
type: 'leaf',
data: {
id: 'panel_2',
component: 'default',
params: { title: 'Panel 2' },
snap: false,
},
size: 100,
},
{
type: 'branch',
data: [
{
type: 'leaf',
data: {
id: 'panel_1',
component: 'default',
params: { title: 'Panel 1' },
snap: false,
},
size: 394,
},
{
type: 'leaf',
data: {
id: 'panel_4',
component: 'default',
params: { title: 'Panel 4' },
snap: false,
},
size: 394,
},
],
size: 100,
},
],
size: 788,
},
width: 788,
height: 300,
orientation: Orientation.VERTICAL,
},
activePanel: 'panel_8',
});
return;
}
api.clear();
api.orientation = Orientation.VERTICAL;
api.addPanel({
id: 'panel_1', id: 'panel_1',
component: 'default', component: 'default',
params: { params: {
@ -67,7 +235,7 @@ export const EventsGridview = () => {
}, },
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_2', id: 'panel_2',
component: 'default', component: 'default',
params: { params: {
@ -75,7 +243,7 @@ export const EventsGridview = () => {
}, },
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_3', id: 'panel_3',
component: 'default', component: 'default',
params: { params: {
@ -83,7 +251,9 @@ export const EventsGridview = () => {
}, },
}); });
event.api.addPanel({ console.log('sdf');
api.addPanel({
id: 'panel_4', id: 'panel_4',
component: 'default', component: 'default',
params: { params: {
@ -92,7 +262,7 @@ export const EventsGridview = () => {
position: { referencePanel: 'panel_1', direction: 'right' }, position: { referencePanel: 'panel_1', direction: 'right' },
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_5', id: 'panel_5',
component: 'default', component: 'default',
params: { params: {
@ -101,7 +271,7 @@ export const EventsGridview = () => {
position: { referencePanel: 'panel_3', direction: 'right' }, position: { referencePanel: 'panel_3', direction: 'right' },
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_6', id: 'panel_6',
component: 'default', component: 'default',
params: { params: {
@ -111,7 +281,7 @@ export const EventsGridview = () => {
minimumWidth: 10, minimumWidth: 10,
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_7', id: 'panel_7',
component: 'default', component: 'default',
params: { params: {
@ -121,7 +291,7 @@ export const EventsGridview = () => {
minimumWidth: 10, minimumWidth: 10,
}); });
event.api.addPanel({ api.addPanel({
id: 'panel_8', id: 'panel_8',
component: 'default', component: 'default',
params: { params: {
@ -130,10 +300,22 @@ export const EventsGridview = () => {
position: { referencePanel: 'panel_6', direction: 'right' }, position: { referencePanel: 'panel_6', direction: 'right' },
minimumWidth: 10, minimumWidth: 10,
}); });
}, [api, checked]);
const onReady = (event: GridviewReadyEvent) => {
setApi(event.api);
}; };
return ( return (
<> <>
<label>
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
<span>{'fromJSON'}</span>
</label>
<div <div
style={{ style={{
height: '300px', height: '300px',
@ -150,6 +332,7 @@ export const EventsGridview = () => {
className="dockview-theme-dark" className="dockview-theme-dark"
/> />
</div> </div>
<Console lines={lines} /> <Console lines={lines} />
</> </>
); );

10751
docs/yarn.lock
View File

File diff suppressed because it is too large Load Diff