mirror of
https://github.com/mathuo/dockview
synced 2025-05-07 12:08:26 +00:00
mathuo
GitHub
commit
0c602afab5
@ -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}
|
||||
/>
|
||||
@ -9,25 +9,9 @@ import { DocRef } from '@site/src/components/ui/reference/docRef';
|
||||
import LiveExample from '@site/src/components/ui/exampleFrame';
|
||||
|
||||
<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
|
||||
|
||||
You can intercept drag events to attach your own metadata using the `onWillDragPanel` and `onWillDragGroup` api methods.
|
||||
|
||||
@ -8,6 +8,15 @@ This section provided a core overview.
|
||||
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.
|
||||
|
||||
|
||||
<FrameworkSpecific framework='JavaScript'>
|
||||
```tsx
|
||||
const element: HTMLElement
|
||||
const options: DockviewComponentOptions
|
||||
const api: DockviewApi = createDockview(element, options);
|
||||
```
|
||||
</FrameworkSpecific>
|
||||
|
||||
<FrameworkSpecific framework='React'>
|
||||
```tsx
|
||||
function onReady(event: DockviewReadyEvent) {
|
||||
|
||||
@ -20,7 +20,7 @@ You can register panels through the dock [option](/docs/api/dockview/options) `
|
||||
|
||||
|
||||
<FrameworkSpecific framework='JavaScript'>
|
||||
<DocRef declaration="DockviewComponentOptions" methods={['components']} />
|
||||
<DocRef declaration="DockviewComponentOptions" methods={['createComponent']} />
|
||||
</FrameworkSpecific>
|
||||
|
||||
|
||||
@ -44,6 +44,37 @@ return <DockviewReact components={components}/>
|
||||
</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'>
|
||||
```tsx
|
||||
const App = {
|
||||
|
||||
@ -25,7 +25,7 @@ The following properties can be set to configure the behaviours of floating grou
|
||||
|
||||
<FrameworkSpecific framework='JavaScript'>
|
||||
<DocRef declaration="DockviewComponentOptions"
|
||||
methods={['watermarkComponent', 'watermarkFrameworkComponent', 'frameworkComponentFactory']}
|
||||
methods={['createWatermarkComponent']}
|
||||
/>
|
||||
</FrameworkSpecific>
|
||||
|
||||
|
||||
@ -18,7 +18,7 @@ npm install dockview-core
|
||||
Firstly, install the `dockview` library:
|
||||
|
||||
```sh
|
||||
npm install dockview
|
||||
npm install dockview-react
|
||||
```
|
||||
</FrameworkSpecific>
|
||||
|
||||
|
||||
@ -19,10 +19,15 @@ Firstly, you should import `dockview.css`:
|
||||
|
||||
<FrameworkSpecific framework='React'>
|
||||
```css
|
||||
@import './node_modules/dockview/dist/styles/dockview.css';
|
||||
@import './node_modules/dockview-react/dist/styles/dockview.css';
|
||||
```
|
||||
</FrameworkSpecific>
|
||||
|
||||
<FrameworkSpecific framework='Vue'>
|
||||
```css
|
||||
@import './node_modules/dockview-vue/dist/styles/dockview.css';
|
||||
```
|
||||
</FrameworkSpecific>
|
||||
|
||||
|
||||
## Provided themes
|
||||
|
||||
@ -1,13 +1,33 @@
|
||||
import { DockviewReact, DockviewReadyEvent } from 'dockview';
|
||||
import {
|
||||
DockviewReact,
|
||||
DockviewReadyEvent,
|
||||
IDockviewPanelProps,
|
||||
} from 'dockview';
|
||||
import * as React from 'react';
|
||||
|
||||
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 (
|
||||
<iframe
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
pointerEvents: enabled ? 'inherit' : 'none',
|
||||
}}
|
||||
src="https://dockview.dev"
|
||||
/>
|
||||
|
||||
@ -15,8 +15,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.data-table {
|
||||
table {
|
||||
font-size: 11px;
|
||||
@ -58,35 +56,41 @@
|
||||
.selected {
|
||||
background-color: #4864dc;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
min-width: 50px;
|
||||
padding: 0px 2px;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
outline: 1px solid #4c65d4;
|
||||
.button-group {
|
||||
button {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.demo-button {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
span {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -13,7 +13,7 @@ import { GridActions } from './gridActions';
|
||||
import { PanelActions } from './panelActions';
|
||||
import { GroupActions } from './groupActions';
|
||||
import { LeftControls, PrefixHeaderControls, RightControls } from './controls';
|
||||
import { Table, usePanelApiMetadata } from './debugPanel';
|
||||
import { usePanelApiMetadata } from './debugPanel';
|
||||
|
||||
const components = {
|
||||
default: (props: IDockviewPanelProps) => {
|
||||
@ -26,6 +26,7 @@ const components = {
|
||||
overflow: 'auto',
|
||||
color: 'white',
|
||||
position: 'relative',
|
||||
padding: 5,
|
||||
// border: '5px dashed purple',
|
||||
}}
|
||||
>
|
||||
@ -43,12 +44,50 @@ const components = {
|
||||
>
|
||||
{props.api.title}
|
||||
</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>
|
||||
);
|
||||
},
|
||||
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 (
|
||||
<iframe
|
||||
onMouseDown={() => {
|
||||
if (!props.api.isActive) {
|
||||
props.api.setActive();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
@ -210,6 +249,7 @@ const DockviewDemo = (props: { theme?: string }) => {
|
||||
padding: '8px',
|
||||
backgroundColor: 'rgba(0,0,50,0.25)',
|
||||
borderRadius: '8px',
|
||||
position: 'relative',
|
||||
...css,
|
||||
}}
|
||||
>
|
||||
|
||||
@ -2,8 +2,96 @@ import { DockviewApi } from 'dockview';
|
||||
import * as React from 'react';
|
||||
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: {
|
||||
api?: DockviewApi;
|
||||
containerRef: HTMLElement;
|
||||
hasCustomWatermark: boolean;
|
||||
toggleCustomWatermark: () => void;
|
||||
}) => {
|
||||
@ -39,13 +127,21 @@ export const GridActions = (props: {
|
||||
}
|
||||
};
|
||||
|
||||
const onAddPanel = (options?: { inactive: boolean }) => {
|
||||
props.api?.addPanel({
|
||||
id: `id_${Date.now().toString()}`,
|
||||
component: 'default',
|
||||
title: `Tab ${nextId()}`,
|
||||
inactive: options?.inactive,
|
||||
});
|
||||
const popover = usePopover();
|
||||
|
||||
const onAddPanel = (options?: { advanced: boolean }) => {
|
||||
if (options?.advanced) {
|
||||
popover.open(({ close }) => {
|
||||
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 = () => {
|
||||
@ -60,15 +156,17 @@ export const GridActions = (props: {
|
||||
|
||||
return (
|
||||
<div className="action-container">
|
||||
<button className="text-button" onClick={() => onAddPanel()}>
|
||||
Add Panel
|
||||
</button>
|
||||
<button
|
||||
className="text-button"
|
||||
onClick={() => onAddPanel({ inactive: true })}
|
||||
>
|
||||
Add Inactive Panel
|
||||
</button>
|
||||
<div className="button-group">
|
||||
<button className="text-button" onClick={() => onAddPanel()}>
|
||||
Add Panel
|
||||
</button>
|
||||
<button
|
||||
className="demo-icon-button"
|
||||
onClick={() => onAddPanel({ advanced: true })}
|
||||
>
|
||||
<span className="material-symbols-outlined">tune</span>
|
||||
</button>
|
||||
</div>
|
||||
<button className="text-button" onClick={onAddGroup}>
|
||||
Add Group
|
||||
</button>
|
||||
|
||||
@ -88,14 +88,18 @@ const GroupAction = (props: {
|
||||
}
|
||||
onClick={() => {
|
||||
if (group) {
|
||||
|
||||
props.api.addFloatingGroup(group, {
|
||||
width: 400,
|
||||
height: 300,
|
||||
x: 50,
|
||||
y: 50,
|
||||
position: {
|
||||
width: 400,
|
||||
height: 300,
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
right: 50,
|
||||
},
|
||||
});
|
||||
|
||||
}
|
||||
}}
|
||||
>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -10,7 +10,7 @@ export interface 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: 'Vue', label: 'Vue', icon: 'img/vue-icon.svg' },
|
||||
// { value: 'Angular', label: 'Angular' },
|
||||
|
||||
@ -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",
|
||||
"code": "Parameters | undefined",
|
||||
@ -22780,19 +22872,6 @@
|
||||
"isReadonly": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "parentElement",
|
||||
"code": "HTMLElement",
|
||||
"kind": "property",
|
||||
"type": {
|
||||
"type": "reference",
|
||||
"value": "HTMLElement",
|
||||
"source": "typescript"
|
||||
},
|
||||
"flags": {
|
||||
"isReadonly": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "proportionalLayout",
|
||||
"code": "boolean",
|
||||
@ -23032,6 +23111,104 @@
|
||||
],
|
||||
"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": {
|
||||
"kind": "interface",
|
||||
"name": "DockviewDndOverlayEvent",
|
||||
@ -23156,13 +23333,13 @@
|
||||
"children": [
|
||||
{
|
||||
"name": "createComponent",
|
||||
"code": "(options: { id: string, name: string }): IContentRenderer",
|
||||
"code": "(options: CreateComponentOptions): IContentRenderer",
|
||||
"kind": "property",
|
||||
"type": {
|
||||
"type": "reflection",
|
||||
"value": {
|
||||
"name": "__type",
|
||||
"code": "(options: { id: string, name: string }): IContentRenderer",
|
||||
"code": "(options: CreateComponentOptions): IContentRenderer",
|
||||
"kind": "typeLiteral",
|
||||
"signatures": [
|
||||
{
|
||||
@ -23171,36 +23348,11 @@
|
||||
"parameters": [
|
||||
{
|
||||
"name": "options",
|
||||
"code": "options: { id: string, name: string }",
|
||||
"code": "options: CreateComponentOptions",
|
||||
"type": {
|
||||
"type": "reflection",
|
||||
"value": {
|
||||
"name": "__type",
|
||||
"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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
"type": "reference",
|
||||
"value": "CreateComponentOptions",
|
||||
"source": "dockview-core"
|
||||
},
|
||||
"kind": "parameter"
|
||||
}
|
||||
@ -23210,7 +23362,7 @@
|
||||
"value": "IContentRenderer",
|
||||
"source": "dockview-core"
|
||||
},
|
||||
"code": "(options: { id: string, name: string }): IContentRenderer",
|
||||
"code": "(options: CreateComponentOptions): IContentRenderer",
|
||||
"kind": "callSignature"
|
||||
}
|
||||
]
|
||||
@ -23343,13 +23495,13 @@
|
||||
},
|
||||
{
|
||||
"name": "createTabComponent",
|
||||
"code": "(options: { id: string, name: string }): ITabRenderer | undefined",
|
||||
"code": "(options: CreateComponentOptions): ITabRenderer | undefined",
|
||||
"kind": "property",
|
||||
"type": {
|
||||
"type": "reflection",
|
||||
"value": {
|
||||
"name": "__type",
|
||||
"code": "(options: { id: string, name: string }): ITabRenderer | undefined",
|
||||
"code": "(options: CreateComponentOptions): ITabRenderer | undefined",
|
||||
"kind": "typeLiteral",
|
||||
"signatures": [
|
||||
{
|
||||
@ -23358,36 +23510,11 @@
|
||||
"parameters": [
|
||||
{
|
||||
"name": "options",
|
||||
"code": "options: { id: string, name: string }",
|
||||
"code": "options: CreateComponentOptions",
|
||||
"type": {
|
||||
"type": "reflection",
|
||||
"value": {
|
||||
"name": "__type",
|
||||
"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": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
"type": "reference",
|
||||
"value": "CreateComponentOptions",
|
||||
"source": "dockview-core"
|
||||
},
|
||||
"kind": "parameter"
|
||||
}
|
||||
@ -23406,7 +23533,7 @@
|
||||
}
|
||||
]
|
||||
},
|
||||
"code": "(options: { id: string, name: string }): ITabRenderer | undefined",
|
||||
"code": "(options: CreateComponentOptions): ITabRenderer | undefined",
|
||||
"kind": "callSignature"
|
||||
}
|
||||
]
|
||||
@ -26716,6 +26843,26 @@
|
||||
"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",
|
||||
"code": "boolean",
|
||||
@ -26741,6 +26888,30 @@
|
||||
"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",
|
||||
"code": "'no-drop-target' | boolean",
|
||||
@ -26865,6 +27036,26 @@
|
||||
"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",
|
||||
"code": "boolean",
|
||||
@ -26887,6 +27078,30 @@
|
||||
},
|
||||
"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",
|
||||
"code": "'no-drop-target' | boolean",
|
||||
@ -26964,6 +27179,54 @@
|
||||
},
|
||||
"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",
|
||||
"code": "",
|
||||
@ -31160,6 +31423,58 @@
|
||||
"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",
|
||||
"code": "Parameters | undefined",
|
||||
@ -37257,44 +37572,6 @@
|
||||
"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": [
|
||||
@ -41037,11 +41314,23 @@
|
||||
},
|
||||
"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": [],
|
||||
"type": {
|
||||
"type": "intersection",
|
||||
"values": [
|
||||
{
|
||||
"type": "reference",
|
||||
"value": "Partial",
|
||||
"source": "typescript",
|
||||
"typeArguments": [
|
||||
{
|
||||
"type": "reference",
|
||||
"value": "Contraints",
|
||||
"source": "dockview-core"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "reference",
|
||||
"value": "Partial",
|
||||
@ -41058,7 +41347,7 @@
|
||||
"type": "reflection",
|
||||
"value": {
|
||||
"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",
|
||||
"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",
|
||||
"code": "P",
|
||||
|
||||
@ -50,9 +50,14 @@ const components = {
|
||||
</div>
|
||||
);
|
||||
},
|
||||
iframe: () => {
|
||||
iframe: (props: IDockviewPanelProps) => {
|
||||
return (
|
||||
<iframe
|
||||
onMouseDown={() => {
|
||||
if (!props.api.isActive) {
|
||||
props.api.setActive();
|
||||
}
|
||||
}}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
|
||||
@ -50,8 +50,7 @@ const Watermark = (props: IWatermarkPanelProps) => {
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
This is a custom watermark. You can put whatever React
|
||||
component you want here
|
||||
This is a custom watermark. You can change this content.
|
||||
</span>
|
||||
<span>
|
||||
<button onClick={addPanel}>Add New Panel</button>
|
||||
|
||||
135
packages/docs/templates/dockview/watermark/typescript/src/index.ts
vendored
Normal file
135
packages/docs/templates/dockview/watermark/typescript/src/index.ts
vendored
Normal 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();
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user