rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-12 06:28:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #703 from mathuo/702-documentation

Browse Source 
chore: docs
This commit is contained in:
mathuo 2024-09-05 19:33:13 +01:00 committed by GitHub
commit 0c602afab5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 955 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/docs/docs/advanced/events.mdx
View File

@ -1,12 +0,0 @@
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
import EventsDockview from '@site/sandboxes/events-dockview/src/app';
# Events
A simple example showing events fired by `dockviewz that can be interacted with.
<MultiFrameworkContainer
height={600}
sandboxId="events-dockview"
react={EventsDockview}
/>

18
packages/docs/docs/core/dnd/external.mdx
View File

@ -9,25 +9,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
import LiveExample from '@site/src/components/ui/exampleFrame'; import LiveExample from '@site/src/components/ui/exampleFrame';
<DocRef declaration="DockviewApi" <DocRef declaration="DockviewApi"
methods={['onDidDrop']} methods={['onDidDrop', 'onUnhandledDragOverEvent']}
/> />
<FrameworkSpecific framework='React'>
<DocRef declaration="IDockviewReactProps" methods={['showDndOverlay']} />
</FrameworkSpecific>
<FrameworkSpecific framework='Vue'>
<DocRef declaration="IDockviewVueProps" methods={['showDndOverlay']} />
</FrameworkSpecific>
<FrameworkSpecific framework='JavaScript'>
<DocRef declaration="DockviewComponentOptions"
methods={['showDndOverlay']}
/>
</FrameworkSpecific>
## Intercepting Drag Events ## Intercepting Drag Events
You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods. You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.

9
packages/docs/docs/core/overview.mdx
View File

@ -8,6 +8,15 @@ This section provided a core overview.
The component takes a collection of [Options](/docs/api/dockview/options) as inputs and The component takes a collection of [Options](/docs/api/dockview/options) as inputs and
once you have created a dock you can store a reference to the [API](/docs/api/dockview/overview) that is created. once you have created a dock you can store a reference to the [API](/docs/api/dockview/overview) that is created.
<FrameworkSpecific framework='JavaScript'>
```tsx
const element: HTMLElement
const options: DockviewComponentOptions
const api: DockviewApi = createDockview(element, options);
```
</FrameworkSpecific>
<FrameworkSpecific framework='React'> <FrameworkSpecific framework='React'>
```tsx ```tsx
function onReady(event: DockviewReadyEvent) { function onReady(event: DockviewReadyEvent) {

33
packages/docs/docs/core/panels/register.mdx
View File

@ -20,7 +20,7 @@ You can register panels through the dock [option](/docs/api/dockview/options) `
<FrameworkSpecific framework='JavaScript'> <FrameworkSpecific framework='JavaScript'>
<DocRef declaration="DockviewComponentOptions" methods={['components']} /> <DocRef declaration="DockviewComponentOptions" methods={['createComponent']} />
</FrameworkSpecific> </FrameworkSpecific>
@ -44,6 +44,37 @@ return <DockviewReact components={components}/>
</FrameworkSpecific> </FrameworkSpecific>
<FrameworkSpecific framework='JavaScript'>
```tsx
class Panel implements IContentRenderer {
private readonly _element: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
}
init(parameters: GroupPanelPartInitParameters): void {
//
}
}
const api = createDockview(parentElement, {
createComponent: (options) => {
switch (options.name) {
case 'component_1':
return new Panel();
}
},
});
```
</FrameworkSpecific>
<FrameworkSpecific framework='Vue'> <FrameworkSpecific framework='Vue'>
```tsx ```tsx
const App = { const App = {

2
packages/docs/docs/core/watermark.mdx
View File

@ -25,7 +25,7 @@ The following properties can be set to configure the behaviours of floating grou
<FrameworkSpecific framework='JavaScript'> <FrameworkSpecific framework='JavaScript'>
<DocRef declaration="DockviewComponentOptions" <DocRef declaration="DockviewComponentOptions"
methods={['watermarkComponent', 'watermarkFrameworkComponent', 'frameworkComponentFactory']} methods={['createWatermarkComponent']}
/> />
</FrameworkSpecific> </FrameworkSpecific>

2
packages/docs/docs/overview/getStarted/installation.mdx
View File

@ -18,7 +18,7 @@ npm install dockview-core
Firstly, install the `dockview` library: Firstly, install the `dockview` library:
```sh ```sh
npm install dockview npm install dockview-react
``` ```
</FrameworkSpecific> </FrameworkSpecific>

7
packages/docs/docs/overview/getStarted/theme.mdx
View File

@ -19,10 +19,15 @@ Firstly, you should import `dockview.css`:
<FrameworkSpecific framework='React'> <FrameworkSpecific framework='React'>
```css ```css
@import './node_modules/dockview/dist/styles/dockview.css'; @import './node_modules/dockview-react/dist/styles/dockview.css';
``` ```
</FrameworkSpecific> </FrameworkSpecific>
<FrameworkSpecific framework='Vue'>
```css
@import './node_modules/dockview-vue/dist/styles/dockview.css';
```
</FrameworkSpecific>
## Provided themes ## Provided themes

24
packages/docs/sandboxes/iframe-dockview/src/app.tsx
View File

@ -1,13 +1,33 @@
import { DockviewReact, DockviewReadyEvent } from 'dockview'; import {
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
} from 'dockview';
import * as React from 'react'; import * as React from 'react';
const components = { const components = {
iframeComponent: () => { iframeComponent: (props: IDockviewPanelProps) => {
const [enabled, setEnabled] = React.useState<boolean>(
props.api.isActive
);
React.useEffect(() => {
const disposable = props.api.onDidActiveChange((event) => {
setEnabled(event.isActive);
console.log(event);
});
return () => {
disposable.dispose();
};
}, [props.api]);
return ( return (
<iframe <iframe
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
pointerEvents: enabled ? 'inherit' : 'none',
}} }}
src="https://dockview.dev" src="https://dockview.dev"
/> />

60
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.scss
View File

@ -15,8 +15,6 @@
} }
} }
.data-table { .data-table {
table { table {
font-size: 11px; font-size: 11px;
@ -58,35 +56,41 @@
.selected { .selected {
background-color: #4864dc; background-color: #4864dc;
} }
}
.demo-button { .button-group {
min-width: 50px; button {
padding: 0px 2px; margin-right: 0px;
border-radius: 0px; }
display: flex; }
flex-grow: 1;
align-items: center; .demo-button {
outline: 1px solid #4c65d4; min-width: 50px;
padding: 0px 2px;
border-radius: 0px;
display: flex;
flex-grow: 1;
align-items: center;
outline: 1px solid #4c65d4;
}
.demo-icon-button {
outline: 1px solid #4c65d4;
flex-grow: 1;
display: flex;
align-items: center;
border-radius: 0px;
padding: 0px 4px;
border: none;
cursor: pointer;
&:disabled {
color: gray;
cursor: help;
} }
.demo-icon-button { span {
outline: 1px solid #4c65d4; font-size: 16px;
flex-grow: 1;
display: flex;
align-items: center;
border-radius: 0px;
padding: 0px 4px;
border: none;
cursor: pointer;
&:disabled {
color: gray;
cursor: help;
}
span {
font-size: 16px;
}
} }
} }
} }

44
packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
View File

@ -13,7 +13,7 @@ import { GridActions } from './gridActions';
import { PanelActions } from './panelActions'; import { PanelActions } from './panelActions';
import { GroupActions } from './groupActions'; import { GroupActions } from './groupActions';
import { LeftControls, PrefixHeaderControls, RightControls } from './controls'; import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
import { Table, usePanelApiMetadata } from './debugPanel'; import { usePanelApiMetadata } from './debugPanel';
const components = { const components = {
default: (props: IDockviewPanelProps) => { default: (props: IDockviewPanelProps) => {
@ -26,6 +26,7 @@ const components = {
overflow: 'auto', overflow: 'auto',
color: 'white', color: 'white',
position: 'relative', position: 'relative',
padding: 5,
// border: '5px dashed purple', // border: '5px dashed purple',
}} }}
> >
@ -43,12 +44,50 @@ const components = {
> >
{props.api.title} {props.api.title}
</span> </span>
<div>
<span>{'Panel Rendering Mode: '}</span>
<span>{metadata.renderer.value}</span>
<button
onClick={() => {
props.api.setRenderer(
props.api.renderer === 'always'
? 'onlyWhenVisible'
: 'always'
);
}}
>
Toggle
</button>
</div>
</div> </div>
); );
}, },
iframe: () => { nested: (props: IDockviewPanelProps) => {
return (
<DockviewReact
components={components}
onReady={(event: DockviewReadyEvent) => {
event.api.addPanel({ id: 'panel_1', component: 'default' });
event.api.addPanel({ id: 'panel_2', component: 'default' });
event.api.addPanel({
id: 'panel_3',
component: 'default',
floating: true,
});
}}
className={'dockview-theme-abyss'}
/>
);
},
iframe: (props: IDockviewPanelProps) => {
return ( return (
<iframe <iframe
onMouseDown={() => {
if (!props.api.isActive) {
props.api.setActive();
}
}}
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',
@ -210,6 +249,7 @@ const DockviewDemo = (props: { theme?: string }) => {
padding: '8px', padding: '8px',
backgroundColor: 'rgba(0,0,50,0.25)', backgroundColor: 'rgba(0,0,50,0.25)',
borderRadius: '8px', borderRadius: '8px',
position: 'relative',
...css, ...css,
}} }}
> >

130
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -2,8 +2,96 @@ import { DockviewApi } from 'dockview';
import * as React from 'react'; import * as React from 'react';
import { defaultConfig, nextId } from './defaultLayout'; import { defaultConfig, nextId } from './defaultLayout';
import { createRoot, Root } from 'react-dom/client';
import { PanelBuilder } from './panelBuilder';
let mount = document.querySelector('.popover-anchor') as HTMLElement | null;
if (!mount) {
mount = document.createElement('div');
mount.className = 'popover-anchor';
document.body.insertBefore(mount, document.body.firstChild);
}
const PopoverComponent = (props: {
close: () => void;
component: React.FC<{ close: () => void }>;
}) => {
const ref = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const handler = (ev: MouseEvent) => {
let target = ev.target as HTMLElement;
while (target.parentElement) {
if (target === ref.current) {
return;
}
target = target.parentElement;
}
props.close();
};
window.addEventListener('mousedown', handler);
return () => {
window.removeEventListener('mousedown', handler);
};
}, []);
return (
<div
style={{
position: 'absolute',
top: 0,
left: 0,
zIndex: 9999,
height: '100%',
width: '100%',
}}
>
<div
ref={ref}
style={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%,-50%)',
backgroundColor: 'black',
color: 'white',
padding: 10,
}}
>
<props.component close={props.close} />
</div>
</div>
);
};
function usePopover() {
return {
open: (Component: React.FC<{ close: () => void }>) => {
const el = document.createElement('div');
mount!.appendChild(el);
const root = createRoot(el);
root.render(
<PopoverComponent
component={Component}
close={() => {
root.unmount();
el.remove();
}}
/>
);
},
};
}
export const GridActions = (props: { export const GridActions = (props: {
api?: DockviewApi; api?: DockviewApi;
containerRef: HTMLElement;
hasCustomWatermark: boolean; hasCustomWatermark: boolean;
toggleCustomWatermark: () => void; toggleCustomWatermark: () => void;
}) => { }) => {
@ -39,13 +127,21 @@ export const GridActions = (props: {
} }
}; };
const onAddPanel = (options?: { inactive: boolean }) => { const popover = usePopover();
props.api?.addPanel({
id: `id_${Date.now().toString()}`, const onAddPanel = (options?: { advanced: boolean }) => {
component: 'default', if (options?.advanced) {
title: `Tab ${nextId()}`, popover.open(({ close }) => {
inactive: options?.inactive, return <PanelBuilder api={props.api!} done={close} />;
}); });
} else {
props.api?.addPanel({
id: `id_${Date.now().toString()}`,
component: 'default',
title: `Tab ${nextId()}`,
renderer: 'always',
});
}
}; };
const onAddGroup = () => { const onAddGroup = () => {
@ -60,15 +156,17 @@ export const GridActions = (props: {
return ( return (
<div className="action-container"> <div className="action-container">
<button className="text-button" onClick={() => onAddPanel()}> <div className="button-group">
Add Panel <button className="text-button" onClick={() => onAddPanel()}>
</button> Add Panel
<button </button>
className="text-button" <button
onClick={() => onAddPanel({ inactive: true })} className="demo-icon-button"
> onClick={() => onAddPanel({ advanced: true })}
Add Inactive Panel >
</button> <span className="material-symbols-outlined">tune</span>
</button>
</div>
<button className="text-button" onClick={onAddGroup}> <button className="text-button" onClick={onAddGroup}>
Add Group Add Group
</button> </button>

10
packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
View File

@ -88,14 +88,18 @@ const GroupAction = (props: {
} }
onClick={() => { onClick={() => {
if (group) { if (group) {
props.api.addFloatingGroup(group, { props.api.addFloatingGroup(group, {
width: 400,
height: 300,
x: 50,
y: 50,
position: { position: {
width: 400, bottom: 50,
height: 300,
top: 50,
right: 50, right: 50,
}, },
}); });
} }
}} }}
> >

115
packages/docs/sandboxes/react/dockview/demo-dockview/src/panelBuilder.tsx Normal file
View File

@ -0,0 +1,115 @@
import { DockviewApi } from 'dockview';
import * as React from 'react';
import { nextId } from './defaultLayout';
export const PanelBuilder = (props: { api: DockviewApi; done: () => void }) => {
const [parameters, setParameters] = React.useState<{
initialWidth?: number;
initialHeight?: number;
maximumHeight?: number;
maximumWidth?: number;
minimumHeight?: number;
minimumWidth?: number;
}>({});
return (
<div>
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 1fr',
}}
>
<div>{'Initial Width'}</div>
<input
type="number"
value={parameters.initialWidth}
onChange={(event) =>
setParameters((_) => ({
..._,
initialWidth: Number(event.target.value),
}))
}
/>
<div>{'Initial Height'}</div>
<input
type="number"
value={parameters.initialHeight}
onChange={(event) =>
setParameters((_) => ({
..._,
initialHeight: Number(event.target.value),
}))
}
/>
<div>{'Maximum Width'}</div>
<input
type="number"
value={parameters.maximumWidth}
onChange={(event) =>
setParameters((_) => ({
..._,
maximumWidth: Number(event.target.value),
}))
}
/>
<div>{'Maximum Height'}</div>
<input
type="number"
value={parameters.maximumHeight}
onChange={(event) =>
setParameters((_) => ({
..._,
maximumHeight: Number(event.target.value),
}))
}
/>
<div>{'Minimum Width'}</div>
<input
type="number"
value={parameters.minimumWidth}
onChange={(event) =>
setParameters((_) => ({
..._,
minimumWidth: Number(event.target.value),
}))
}
/>
<div>{'Minimum Height'}</div>
<input
type="number"
value={parameters.minimumHeight}
onChange={(event) =>
setParameters((_) => ({
..._,
minimumHeight: Number(event.target.value),
}))
}
/>
</div>
<div>
<button
onClick={() => {
props.done();
}}
>
Cancel
</button>
<button
onClick={() => {
props.api?.addPanel({
id: `id_${Date.now().toString()}`,
component: 'default',
title: `Tab ${nextId()}`,
renderer: 'always',
...parameters,
});
props.done();
}}
>
Go
</button>
</div>
</div>
);
};

2
packages/docs/src/components/frameworkSpecific.tsx
View File

@ -10,7 +10,7 @@ export interface FrameworkDescriptor {
} }
const frameworks: FrameworkDescriptor[] = [ const frameworks: FrameworkDescriptor[] = [
// { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' }, { value: 'JavaScript', label: 'JavaScript', icon: 'img/js-icon.svg' },
{ value: 'React', label: 'React', icon: 'img/react-icon.svg' }, { value: 'React', label: 'React', icon: 'img/react-icon.svg' },
{ value: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' }, { value: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' },
// { value: 'Angular', label: 'Angular' }, // { value: 'Angular', label: 'Angular' },

547
packages/docs/src/generated/api.output.json
View File

@ -9014,6 +9014,98 @@
} }
} }
}, },
{
"name": "maximumHeight",
"code": "number | undefined",
"kind": "accessor",
"value": {
"name": "maximumHeight",
"code": "number | undefined",
"kind": "getSignature",
"returnType": {
"type": "or",
"values": [
{
"type": "intrinsic",
"value": "number"
},
{
"type": "intrinsic",
"value": "undefined"
}
]
}
}
},
{
"name": "maximumWidth",
"code": "number | undefined",
"kind": "accessor",
"value": {
"name": "maximumWidth",
"code": "number | undefined",
"kind": "getSignature",
"returnType": {
"type": "or",
"values": [
{
"type": "intrinsic",
"value": "number"
},
{
"type": "intrinsic",
"value": "undefined"
}
]
}
}
},
{
"name": "minimumHeight",
"code": "number | undefined",
"kind": "accessor",
"value": {
"name": "minimumHeight",
"code": "number | undefined",
"kind": "getSignature",
"returnType": {
"type": "or",
"values": [
{
"type": "intrinsic",
"value": "number"
},
{
"type": "intrinsic",
"value": "undefined"
}
]
}
}
},
{
"name": "minimumWidth",
"code": "number | undefined",
"kind": "accessor",
"value": {
"name": "minimumWidth",
"code": "number | undefined",
"kind": "getSignature",
"returnType": {
"type": "or",
"values": [
{
"type": "intrinsic",
"value": "number"
},
{
"type": "intrinsic",
"value": "undefined"
}
]
}
}
},
{ {
"name": "params", "name": "params",
"code": "Parameters | undefined", "code": "Parameters | undefined",
@ -22780,19 +22872,6 @@
"isReadonly": true "isReadonly": true
} }
}, },
{
"name": "parentElement",
"code": "HTMLElement",
"kind": "property",
"type": {
"type": "reference",
"value": "HTMLElement",
"source": "typescript"
},
"flags": {
"isReadonly": true
}
},
{ {
"name": "proportionalLayout", "name": "proportionalLayout",
"code": "boolean", "code": "boolean",
@ -23032,6 +23111,104 @@
], ],
"extends": [] "extends": []
}, },
"Contraints": {
"kind": "interface",
"name": "Contraints",
"children": [
{
"name": "maximumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "maximumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "minimumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "minimumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
}
],
"extends": []
},
"CreateComponentOptions": {
"kind": "interface",
"name": "CreateComponentOptions",
"children": [
{
"name": "id",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {},
"comment": {
"summary": [
{
"kind": "text",
"text": "The unqiue identifer of the component"
}
]
}
},
{
"name": "name",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {},
"comment": {
"summary": [
{
"kind": "text",
"text": "The component name, this should determine what is rendered."
}
]
}
}
],
"extends": []
},
"DockviewDndOverlayEvent": { "DockviewDndOverlayEvent": {
"kind": "interface", "kind": "interface",
"name": "DockviewDndOverlayEvent", "name": "DockviewDndOverlayEvent",
@ -23156,13 +23333,13 @@
"children": [ "children": [
{ {
"name": "createComponent", "name": "createComponent",
"code": "(options: { id: string, name: string }): IContentRenderer", "code": "(options: CreateComponentOptions): IContentRenderer",
"kind": "property", "kind": "property",
"type": { "type": {
"type": "reflection", "type": "reflection",
"value": { "value": {
"name": "__type", "name": "__type",
"code": "(options: { id: string, name: string }): IContentRenderer", "code": "(options: CreateComponentOptions): IContentRenderer",
"kind": "typeLiteral", "kind": "typeLiteral",
"signatures": [ "signatures": [
{ {
@ -23171,36 +23348,11 @@
"parameters": [ "parameters": [
{ {
"name": "options", "name": "options",
"code": "options: { id: string, name: string }", "code": "options: CreateComponentOptions",
"type": { "type": {
"type": "reflection", "type": "reference",
"value": { "value": "CreateComponentOptions",
"name": "__type", "source": "dockview-core"
"code": "{ id: string, name: string }",
"kind": "typeLiteral",
"properties": [
{
"name": "id",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {}
},
{
"name": "name",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {}
}
]
}
}, },
"kind": "parameter" "kind": "parameter"
} }
@ -23210,7 +23362,7 @@
"value": "IContentRenderer", "value": "IContentRenderer",
"source": "dockview-core" "source": "dockview-core"
}, },
"code": "(options: { id: string, name: string }): IContentRenderer", "code": "(options: CreateComponentOptions): IContentRenderer",
"kind": "callSignature" "kind": "callSignature"
} }
] ]
@ -23343,13 +23495,13 @@
}, },
{ {
"name": "createTabComponent", "name": "createTabComponent",
"code": "(options: { id: string, name: string }): ITabRenderer | undefined", "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
"kind": "property", "kind": "property",
"type": { "type": {
"type": "reflection", "type": "reflection",
"value": { "value": {
"name": "__type", "name": "__type",
"code": "(options: { id: string, name: string }): ITabRenderer | undefined", "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
"kind": "typeLiteral", "kind": "typeLiteral",
"signatures": [ "signatures": [
{ {
@ -23358,36 +23510,11 @@
"parameters": [ "parameters": [
{ {
"name": "options", "name": "options",
"code": "options: { id: string, name: string }", "code": "options: CreateComponentOptions",
"type": { "type": {
"type": "reflection", "type": "reference",
"value": { "value": "CreateComponentOptions",
"name": "__type", "source": "dockview-core"
"code": "{ id: string, name: string }",
"kind": "typeLiteral",
"properties": [
{
"name": "id",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {}
},
{
"name": "name",
"code": "string",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "string"
},
"flags": {}
}
]
}
}, },
"kind": "parameter" "kind": "parameter"
} }
@ -23406,7 +23533,7 @@
} }
] ]
}, },
"code": "(options: { id: string, name: string }): ITabRenderer | undefined", "code": "(options: CreateComponentOptions): ITabRenderer | undefined",
"kind": "callSignature" "kind": "callSignature"
} }
] ]
@ -26716,6 +26843,26 @@
"isReadonly": true "isReadonly": true
} }
}, },
{
"name": "constraints",
"code": "Partial<Contraints>",
"kind": "property",
"type": {
"type": "reference",
"value": "Partial",
"source": "typescript",
"typeArguments": [
{
"type": "reference",
"value": "Contraints",
"source": "dockview-core"
}
]
},
"flags": {
"isOptional": true
}
},
{ {
"name": "hideHeader", "name": "hideHeader",
"code": "boolean", "code": "boolean",
@ -26741,6 +26888,30 @@
"isReadonly": true "isReadonly": true
} }
}, },
{
"name": "initialHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "initialWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{ {
"name": "locked", "name": "locked",
"code": "'no-drop-target' | boolean", "code": "'no-drop-target' | boolean",
@ -26865,6 +27036,26 @@
"isOptional": true "isOptional": true
} }
}, },
{
"name": "constraints",
"code": "Partial<Contraints>",
"kind": "property",
"type": {
"type": "reference",
"value": "Partial",
"source": "typescript",
"typeArguments": [
{
"type": "reference",
"value": "Contraints",
"source": "dockview-core"
}
]
},
"flags": {
"isOptional": true
}
},
{ {
"name": "hideHeader", "name": "hideHeader",
"code": "boolean", "code": "boolean",
@ -26887,6 +27078,30 @@
}, },
"flags": {} "flags": {}
}, },
{
"name": "initialHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "initialWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{ {
"name": "locked", "name": "locked",
"code": "'no-drop-target' | boolean", "code": "'no-drop-target' | boolean",
@ -26964,6 +27179,54 @@
}, },
"flags": {} "flags": {}
}, },
{
"name": "maximumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "maximumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "minimumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "minimumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{ {
"name": "params", "name": "params",
"code": "", "code": "",
@ -31160,6 +31423,58 @@
"isReadonly": true "isReadonly": true
} }
}, },
{
"name": "maximumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true,
"isReadonly": true
}
},
{
"name": "maximumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true,
"isReadonly": true
}
},
{
"name": "minimumHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true,
"isReadonly": true
}
},
{
"name": "minimumWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true,
"isReadonly": true
}
},
{ {
"name": "params", "name": "params",
"code": "Parameters | undefined", "code": "Parameters | undefined",
@ -37257,44 +37572,6 @@
"kind": "callSignature" "kind": "callSignature"
} }
] ]
},
{
"name": "updateParentGroup",
"code": "(group: DockviewGroupPanel, visible: boolean): void",
"kind": "method",
"signature": [
{
"name": "updateParentGroup",
"typeParameters": [],
"parameters": [
{
"name": "group",
"code": "group: DockviewGroupPanel",
"type": {
"type": "reference",
"value": "DockviewGroupPanel",
"source": "dockview-core"
},
"kind": "parameter"
},
{
"name": "visible",
"code": "visible: boolean",
"type": {
"type": "intrinsic",
"value": "boolean"
},
"kind": "parameter"
}
],
"returnType": {
"type": "intrinsic",
"value": "void"
},
"code": "(group: DockviewGroupPanel, visible: boolean): void",
"kind": "callSignature"
}
]
} }
], ],
"extends": [ "extends": [
@ -41037,11 +41314,23 @@
}, },
"AddPanelOptions": { "AddPanelOptions": {
"name": "AddPanelOptions", "name": "AddPanelOptions",
"code": "Partial<AddPanelOptionsUnion> & { component: string, id: string, inactive?: boolean, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }", "code": "Partial<Contraints> & Partial<AddPanelOptionsUnion> & { component: string, id: string, inactive?: boolean, initialHeight?: number, initialWidth?: number, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
"typeParameters": [], "typeParameters": [],
"type": { "type": {
"type": "intersection", "type": "intersection",
"values": [ "values": [
{
"type": "reference",
"value": "Partial",
"source": "typescript",
"typeArguments": [
{
"type": "reference",
"value": "Contraints",
"source": "dockview-core"
}
]
},
{ {
"type": "reference", "type": "reference",
"value": "Partial", "value": "Partial",
@ -41058,7 +41347,7 @@
"type": "reflection", "type": "reflection",
"value": { "value": {
"name": "__type", "name": "__type",
"code": "{ component: string, id: string, inactive?: boolean, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }", "code": "{ component: string, id: string, inactive?: boolean, initialHeight?: number, initialWidth?: number, params?: P, renderer?: DockviewPanelRenderer, tabComponent?: string, title?: string }",
"kind": "typeLiteral", "kind": "typeLiteral",
"properties": [ "properties": [
{ {
@ -41125,6 +41414,30 @@
] ]
} }
}, },
{
"name": "initialHeight",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{
"name": "initialWidth",
"code": "number",
"kind": "property",
"type": {
"type": "intrinsic",
"value": "number"
},
"flags": {
"isOptional": true
}
},
{ {
"name": "params", "name": "params",
"code": "P", "code": "P",

7
packages/docs/templates/dockview/demo-dockview/react/src/app.tsx vendored
View File

@ -50,9 +50,14 @@ const components = {
</div> </div>
); );
}, },
iframe: () => { iframe: (props: IDockviewPanelProps) => {
return ( return (
<iframe <iframe
onMouseDown={() => {
if (!props.api.isActive) {
props.api.setActive();
}
}}
style={{ style={{
width: '100%', width: '100%',
height: '100%', height: '100%',

3
packages/docs/templates/dockview/watermark/react/src/app.tsx vendored
View File

@ -50,8 +50,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
}} }}
> >
<span> <span>
This is a custom watermark. You can put whatever React This is a custom watermark. You can change this content.
component you want here
</span> </span>
<span> <span>
<button onClick={addPanel}>Add New Panel</button> <button onClick={addPanel}>Add New Panel</button>

135
packages/docs/templates/dockview/watermark/typescript/src/index.ts vendored Normal file
View File

@ -0,0 +1,135 @@
import 'dockview-core/dist/styles/dockview.css';
import {
createDockview,
DockviewApi,
GroupPanelPartInitParameters,
IContentRenderer,
IDockviewGroupPanel,
IWatermarkRenderer,
WatermarkRendererInitParameters,
} from 'dockview-core';
class Panel implements IContentRenderer {
private readonly _element: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
this._element = document.createElement('div');
this._element.style.color = 'white';
}
init(parameters: GroupPanelPartInitParameters): void {
this._element.textContent = 'Hello World';
}
}
class Watermark implements IWatermarkRenderer {
private readonly _element: HTMLElement;
get element(): HTMLElement {
return this._element;
}
constructor() {
const element = document.createElement('div');
element.style.height = '100%';
element.style.display = 'flex';
element.style.justifyContent = 'center';
element.style.alignItems = 'center';
element.style.color = 'white';
this._element = element;
}
init(params: WatermarkRendererInitParameters): void {
this.build(params.containerApi, params.group);
}
private build(api: DockviewApi, group?: IDockviewGroupPanel): void {
const container = document.createElement('div');
container.style.display = 'flex';
container.style.flexDirection = 'column';
const text = document.createElement('span');
text.textContent =
'This is a custom watermark. You can change this content.';
const button = document.createElement('button');
button.textContent = 'Add New Panel';
button.addEventListener('click', () => {
api.addPanel({
id: Date.now().toString(),
component: 'default',
});
});
const button2 = document.createElement('button');
button2.textContent = 'Close Group';
button2.addEventListener('click', () => {
api.addPanel({
id: Date.now().toString(),
component: 'default',
});
});
container.append(text, button, button2);
this.element.append(container);
api.onDidLayoutChange(() => {
button2.style.display = api.groups.length > 0 ? '' : 'none';
});
button2.addEventListener('click', () => {
group?.api.close();
});
}
}
const root = document.createElement('div');
root.style.display = 'flex';
root.style.flexDirection = 'column';
root.style.height = '100%';
const button = document.createElement('button');
button.textContent = 'Add Empty Group';
const container = document.createElement('div');
container.style.flexGrow = '1';
root.append(button, container);
const app = document.getElementById('app');
app.append(root);
const api = createDockview(container, {
className: 'dockview-theme-abyss',
createComponent: (options) => {
switch (options.name) {
case 'default':
return new Panel();
}
},
createWatermarkComponent: () => {
return new Watermark();
},
});
api.addPanel({
id: 'panel_1',
component: 'default',
title: 'Panel 1',
});
api.addPanel({
id: 'panel_2',
component: 'default',
position: { referencePanel: 'panel_1', direction: 'right' },
title: 'Panel 2',
});
button.addEventListener('click', () => {
api.addGroup();
});