rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-01-22 17:35:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: improve docs

Browse Source
This commit is contained in:
mathuo 2023-10-09 20:29:57 +01:00
parent 47f78ad649
commit 58e9f9b355
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
22 changed files with 1359 additions and 886 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.codesandbox/ci.json
View File

@ -15,7 +15,6 @@
"/packages/docs/sandboxes/floatinggroup-dockview",
"/packages/docs/sandboxes/fullwidthtab-dockview",
"/packages/docs/sandboxes/headeractions-dockview",
"/packages/docs/sandboxes/ide-example",
"/packages/docs/sandboxes/groupcontol-dockview",
"/packages/docs/sandboxes/iframe-dockview",
"/packages/docs/sandboxes/keyboard-dockview",

366
packages/dockview-core/src/api/component.api.ts
View File

@ -56,132 +56,224 @@ export interface CommonApi<T = any> {
}
export class SplitviewApi implements CommonApi<SerializedSplitview> {
/**
* The minimum size the component can reach where size is measured in the direction of orientation provided.
*/
get minimumSize(): number {
return this.component.minimumSize;
}
/**
* The maximum size the component can reach where size is measured in the direction of orientation provided.
*/
get maximumSize(): number {
return this.component.maximumSize;
}
get height(): number {
return this.component.height;
}
/**
* Width of the component.
*/
get width(): number {
return this.component.width;
}
/**
* Height of the component.
*/
get height(): number {
return this.component.height;
}
/**
* The current number of panels.
*/
get length(): number {
return this.component.length;
}
/**
* The current orientation of the component.
*/
get orientation(): Orientation {
return this.component.orientation;
}
/**
* The list of current panels.
*/
get panels(): ISplitviewPanel[] {
return this.component.panels;
}
/**
* Invoked after a layout is loaded through the `fromJSON` method.
*/
get onDidLayoutFromJSON(): Event<void> {
return this.component.onDidLayoutFromJSON;
}
/**
* Invoked whenever any aspect of the layout changes.
* If listening to this event it may be worth debouncing ouputs.
*/
get onDidLayoutChange(): Event<void> {
return this.component.onDidLayoutChange;
}
/**
* Invoked when a view is added.
*/
get onDidAddView(): Event<IView> {
return this.component.onDidAddView;
}
/**
* Invoked when a view is removed.
*/
get onDidRemoveView(): Event<IView> {
return this.component.onDidRemoveView;
}
constructor(private readonly component: ISplitviewComponent) {}
/**
* Update configuratable options.
*/
updateOptions(options: SplitviewComponentUpdateOptions): void {
this.component.updateOptions(options);
}
/**
* Removes an existing panel and optionally provide a `Sizing` method
* for the subsequent resize.
*/
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void {
this.component.removePanel(panel, sizing);
}
/**
* Focus the component.
*/
focus(): void {
this.component.focus();
}
/**
* Get the reference to a panel given it's `string` id.
*/
getPanel(id: string): ISplitviewPanel | undefined {
return this.component.getPanel(id);
}
/**
* Layout the panel with a width and height.
*/
layout(width: number, height: number): void {
return this.component.layout(width, height);
}
/**
* Add a new panel and return the created instance.
*/
addPanel<T extends object = Parameters>(
options: AddSplitviewComponentOptions<T>
): ISplitviewPanel {
return this.component.addPanel(options);
}
/**
* Move a panel given it's current and desired index.
*/
movePanel(from: number, to: number): void {
this.component.movePanel(from, to);
}
/**
* Deserialize a layout to built a splitivew.
*/
fromJSON(data: SerializedSplitview): void {
this.component.fromJSON(data);
}
/** Serialize a layout */
toJSON(): SerializedSplitview {
return this.component.toJSON();
}
/**
* Remove all panels and clear the component.
*/
clear(): void {
this.component.clear();
}
}
export class PaneviewApi implements CommonApi<SerializedPaneview> {
/**
* The minimum size the component can reach where size is measured in the direction of orientation provided.
*/
get minimumSize(): number {
return this.component.minimumSize;
}
/**
* The maximum size the component can reach where size is measured in the direction of orientation provided.
*/
get maximumSize(): number {
return this.component.maximumSize;
}
get height(): number {
return this.component.height;
}
/**
* Width of the component.
*/
get width(): number {
return this.component.width;
}
/**
* Height of the component.
*/
get height(): number {
return this.component.height;
}
/**
* All panel objects.
*/
get panels(): IPaneviewPanel[] {
return this.component.panels;
}
/**
* Invoked when any layout change occures, an aggregation of many events.
*/
get onDidLayoutChange(): Event<void> {
return this.component.onDidLayoutChange;
}
/**
* Invoked after a layout is deserialzied using the `fromJSON` method.
*/
get onDidLayoutFromJSON(): Event<void> {
return this.component.onDidLayoutFromJSON;
}
/**
* Invoked when a panel is added. May be called multiple times when moving panels.
*/
get onDidAddView(): Event<IPaneviewPanel> {
return this.component.onDidAddView;
}
/**
* Invoked when a panel is removed. May be called multiple times when moving panels.
*/
get onDidRemoveView(): Event<IPaneviewPanel> {
return this.component.onDidRemoveView;
}
/**
* Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
*/
get onDidDrop(): Event<PaneviewDropEvent> {
const emitter = new Emitter<PaneviewDropEvent>();
@ -199,94 +291,160 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
constructor(private readonly component: IPaneviewComponent) {}
/**
* Remove a panel given the panel object.
*/
removePanel(panel: IPaneviewPanel): void {
this.component.removePanel(panel);
}
/**
* Get a panel object given a `string` id. May return `undefined`.
*/
getPanel(id: string): IPaneviewPanel | undefined {
return this.component.getPanel(id);
}
/**
* Move a panel given it's current and desired index.
*/
movePanel(from: number, to: number): void {
this.component.movePanel(from, to);
}
/**
* Focus the component. Will try to focus an active panel if one exists.
*/
focus(): void {
this.component.focus();
}
/**
* Force resize the component to an exact width and height. Read about auto-resizing before using.
*/
layout(width: number, height: number): void {
this.component.layout(width, height);
}
/**
* Add a panel and return the created object.
*/
addPanel<T extends object = Parameters>(
options: AddPaneviewComponentOptions<T>
): IPaneviewPanel {
return this.component.addPanel(options);
}
/**
* Create a component from a serialized object.
*/
fromJSON(data: SerializedPaneview): void {
this.component.fromJSON(data);
}
/**
* Create a serialized object of the current component.
*/
toJSON(): SerializedPaneview {
return this.component.toJSON();
}
/**
* Reset the component back to an empty and default state.
*/
clear(): void {
this.component.clear();
}
}
export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
get minimumHeight(): number {
return this.component.minimumHeight;
}
get maximumHeight(): number {
return this.component.maximumHeight;
}
get minimumWidth(): number {
return this.component.minimumWidth;
}
get maximumWidth(): number {
return this.component.maximumWidth;
}
/**
* Width of the component.
*/
get width(): number {
return this.component.width;
}
/**
* Height of the component.
*/
get height(): number {
return this.component.height;
}
/**
* Minimum height of the component.
*/
get minimumHeight(): number {
return this.component.minimumHeight;
}
/**
* Maximum height of the component.
*/
get maximumHeight(): number {
return this.component.maximumHeight;
}
/**
* Minimum width of the component.
*/
get minimumWidth(): number {
return this.component.minimumWidth;
}
/**
* Maximum width of the component.
*/
get maximumWidth(): number {
return this.component.maximumWidth;
}
/**
* Invoked when any layout change occures, an aggregation of many events.
*/
get onDidLayoutChange(): Event<void> {
return this.component.onDidLayoutChange;
}
/**
* Invoked when a panel is added. May be called multiple times when moving panels.
*/
get onDidAddPanel(): Event<IGridviewPanel> {
return this.component.onDidAddGroup;
}
/**
* Invoked when a panel is removed. May be called multiple times when moving panels.
*/
get onDidRemovePanel(): Event<IGridviewPanel> {
return this.component.onDidRemoveGroup;
}
/**
* Invoked when the active panel changes. May be undefined if no panel is active.
*/
get onDidActivePanelChange(): Event<IGridviewPanel | undefined> {
return this.component.onDidActiveGroupChange;
}
/**
* Invoked after a layout is deserialzied using the `fromJSON` method.
*/
get onDidLayoutFromJSON(): Event<void> {
return this.component.onDidLayoutFromJSON;
}
/**
* All panel objects.
*/
get panels(): IGridviewPanel[] {
return this.component.groups;
}
/**
* Current orientation. Can be changed after initialization.
*/
get orientation(): Orientation {
return this.component.orientation;
}
@ -297,24 +455,39 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
constructor(private readonly component: IGridviewComponent) {}
/**
* Focus the component. Will try to focus an active panel if one exists.
*/
focus(): void {
this.component.focus();
}
/**
* Force resize the component to an exact width and height. Read about auto-resizing before using.
*/
layout(width: number, height: number, force = false): void {
this.component.layout(width, height, force);
}
/**
* Add a panel and return the created object.
*/
addPanel<T extends object = Parameters>(
options: AddComponentOptions<T>
): IGridviewPanel {
return this.component.addPanel(options);
}
/**
* Remove a panel given the panel object.
*/
removePanel(panel: IGridviewPanel, sizing?: Sizing): void {
this.component.removePanel(panel, sizing);
}
/**
* Move a panel in a particular direction relative to another panel.
*/
movePanel(
panel: IGridviewPanel,
options: { direction: Direction; reference: string; size?: number }
@ -322,168 +495,274 @@ export class GridviewApi implements CommonApi<SerializedGridviewComponent> {
this.component.movePanel(panel, options);
}
/**
* Get a panel object given a `string` id. May return `undefined`.
*/
getPanel(id: string): IGridviewPanel | undefined {
return this.component.getPanel(id);
}
/**
* Create a component from a serialized object.
*/
fromJSON(data: SerializedGridviewComponent): void {
return this.component.fromJSON(data);
}
/**
* Create a serialized object of the current component.
*/
toJSON(): SerializedGridviewComponent {
return this.component.toJSON();
}
/**
* Reset the component back to an empty and default state.
*/
clear(): void {
this.component.clear();
}
}
export class DockviewApi implements CommonApi<SerializedDockview> {
/**
* The unique identifier for this instance. Used to manage scope of Drag'n'Drop events.
*/
get id(): string {
return this.component.id;
}
/**
* Width of the component.
*/
get width(): number {
return this.component.width;
}
/**
* Height of the component.
*/
get height(): number {
return this.component.height;
}
/**
* Minimum height of the component.
*/
get minimumHeight(): number {
return this.component.minimumHeight;
}
/**
* Maximum height of the component.
*/
get maximumHeight(): number {
return this.component.maximumHeight;
}
/**
* Minimum width of the component.
*/
get minimumWidth(): number {
return this.component.minimumWidth;
}
/**
* Maximum width of the component.
*/
get maximumWidth(): number {
return this.component.maximumWidth;
}
/**
* Total number of groups.
*/
get size(): number {
return this.component.size;
}
/**
* Total number of panels.
*/
get totalPanels(): number {
return this.component.totalPanels;
}
/**
* Invoked when the active group changes. May be undefined if no group is active.
*/
get onDidActiveGroupChange(): Event<DockviewGroupPanel | undefined> {
return this.component.onDidActiveGroupChange;
}
/**
* Invoked when a group is added. May be called multiple times when moving groups.
*/
get onDidAddGroup(): Event<DockviewGroupPanel> {
return this.component.onDidAddGroup;
}
/**
* Invoked when a group is removed. May be called multiple times when moving groups.
*/
get onDidRemoveGroup(): Event<DockviewGroupPanel> {
return this.component.onDidRemoveGroup;
}
/**
* Invoked when the active panel changes. May be undefined if no panel is active.
*/
get onDidActivePanelChange(): Event<IDockviewPanel | undefined> {
return this.component.onDidActivePanelChange;
}
/**
* Invoked when a panel is added. May be called multiple times when moving panels.
*/
get onDidAddPanel(): Event<IDockviewPanel> {
return this.component.onDidAddPanel;
}
/**
* Invoked when a panel is removed. May be called multiple times when moving panels.
*/
get onDidRemovePanel(): Event<IDockviewPanel> {
return this.component.onDidRemovePanel;
}
/**
* Invoked after a layout is deserialzied using the `fromJSON` method.
*/
get onDidLayoutFromJSON(): Event<void> {
return this.component.onDidLayoutFromJSON;
}
/**
* Invoked when any layout change occures, an aggregation of many events.
*/
get onDidLayoutChange(): Event<void> {
return this.component.onDidLayoutChange;
}
/**
* Invoked when a Drag'n'Drop event occurs that the component was unable to handle. Exposed for custom Drag'n'Drop functionality.
*/
get onDidDrop(): Event<DockviewDropEvent> {
return this.component.onDidDrop;
}
/**
* Invoked before a group is dragged. Exposed for custom Drag'n'Drop functionality.
*/
get onWillDragGroup(): Event<GroupDragEvent> {
return this.component.onWillDragGroup;
}
/**
* Invoked before a panel is dragged. Exposed for custom Drag'n'Drop functionality.
*/
get onWillDragPanel(): Event<TabDragEvent> {
return this.component.onWillDragPanel;
}
/**
* All panel objects.
*/
get panels(): IDockviewPanel[] {
return this.component.panels;
}
/**
* All group objects.
*/
get groups(): DockviewGroupPanel[] {
return this.component.groups;
}
/**
* Active panel object.
*/
get activePanel(): IDockviewPanel | undefined {
return this.component.activePanel;
}
/**
* Active group object.
*/
get activeGroup(): DockviewGroupPanel | undefined {
return this.component.activeGroup;
}
constructor(private readonly component: IDockviewComponent) {}
/**
* Focus the component. Will try to focus an active panel if one exists.
*/
focus(): void {
this.component.focus();
}
/**
* Get a panel object given a `string` id. May return `undefined`.
*/
getPanel(id: string): IDockviewPanel | undefined {
return this.component.getGroupPanel(id);
}
/**
* Force resize the component to an exact width and height. Read about auto-resizing before using.
*/
layout(width: number, height: number, force = false): void {
this.component.layout(width, height, force);
}
/**
* Add a panel and return the created object.
*/
addPanel<T extends object = Parameters>(
options: AddPanelOptions<T>
): IDockviewPanel {
return this.component.addPanel(options);
}
/**
* Remove a panel given the panel object.
*/
removePanel(panel: IDockviewPanel): void {
this.component.removePanel(panel);
}
/**
* Add a group and return the created object.
*/
addGroup(options?: AddGroupOptions): DockviewGroupPanel {
return this.component.addGroup(options);
}
moveToNext(options?: MovementOptions): void {
this.component.moveToNext(options);
}
moveToPrevious(options?: MovementOptions): void {
this.component.moveToPrevious(options);
}
/**
* Close all groups and panels.
*/
closeAllGroups(): void {
return this.component.closeAllGroups();
}
/**
* Remove a group and any panels within the group.
*/
removeGroup(group: IDockviewGroupPanel): void {
this.component.removeGroup(<DockviewGroupPanel>group);
}
/**
* Get a group object given a `string` id. May return undefined.
*/
getGroup(id: string): DockviewGroupPanel | undefined {
return this.component.getPanel(id);
}
/**
* Add a floating group
*/
addFloatingGroup(
item: IDockviewPanel | DockviewGroupPanel,
coord?: { x: number; y: number }
@ -491,15 +770,38 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.addFloatingGroup(item, coord);
}
/**
* Create a component from a serialized object.
*/
fromJSON(data: SerializedDockview): void {
this.component.fromJSON(data);
}
/**
* Create a serialized object of the current component.
*/
toJSON(): SerializedDockview {
return this.component.toJSON();
}
/**
* Reset the component back to an empty and default state.
*/
clear(): void {
this.component.clear();
}
/**
* Move the focus progmatically to the next panel or group.
*/
moveToNext(options?: MovementOptions): void {
this.component.moveToNext(options);
}
/**
* Move the focus progmatically to the previous panel or group.
*/
moveToPrevious(options?: MovementOptions): void {
this.component.moveToPrevious(options);
}
}

22
packages/dockview-core/src/dnd/abstractDragHandler.ts
View File

@ -6,6 +6,8 @@ import {
MutableDisposable,
} from '../lifecycle';
const CLONE_ELEMENT = true;
export abstract class DragHandler extends CompositeDisposable {
private readonly dataDisposable = new MutableDisposable();
private readonly pointerEventsDisposable = new MutableDisposable();
@ -57,8 +59,24 @@ export abstract class DragHandler extends CompositeDisposable {
iframe.style.pointerEvents = 'none';
}
this.el.classList.add('dv-dragged');
setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
if (CLONE_ELEMENT && event.dataTransfer) {
const clone = this.el.cloneNode(true) as HTMLElement;
const styles = window.getComputedStyle(this.el);
clone.style.cssText = Object.values(styles)
.map((key) => `${key}:${styles.getPropertyValue(key)}`)
.join(';');
clone.classList.add('dv-dragged');
document.body.append(clone);
setTimeout(() => {
// clone.parentElement?.removeChild(clone);
}, 0);
event.dataTransfer.setDragImage(clone, 0, 0);
} else {
this.el.classList.add('dv-dragged');
setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
}
this.dataDisposable.value = this.getData(event);
this._onDragStart.fire(event);

7
packages/dockview-core/src/dockview/components/tab/tab.ts
View File

@ -24,6 +24,13 @@ class TabDragHandler extends DragHandler {
private readonly panel: IDockviewPanel
) {
super(element);
this.onDragStart((e) => {
this.accessor.removePanel(this.panel, {
skipDispose: true,
removeEmptyGroup: true,
});
});
}
getData(event: DragEvent): IDisposable {

9
packages/docs/docs/components/dockview.mdx
View File

@ -27,7 +27,6 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
import IDEExample from '@site/sandboxes/ide-example/src/app';
import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
import { DocRef, Markdown } from '@site/src/components/ui/reference/docRef';
@ -862,14 +861,6 @@ Keyboard shortcuts
react={DockviewKeyboard}
/>
## Application with sidebars
<MultiFrameworkContainer
height={600}
sandboxId="ide-example"
react={IDEExample}
/>
### Nested Dockviews
You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.

21
packages/docs/sandboxes/events-dockview/src/app.tsx
View File

@ -318,14 +318,17 @@ const EventsDockview = (props: { theme?: string }) => {
height: '100%',
}}
>
<label>
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
<span>{'fromJSON'}</span>
</label>
<div>
<label>
<input
type="checkbox"
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>
<span>{'fromJSON'}</span>
</label>
<button onClick={() => setLines([])}>Clear logs</button>
</div>
<div style={{ flexGrow: 1 }}>
<DockviewReact
components={components}
@ -333,7 +336,7 @@ const EventsDockview = (props: { theme?: string }) => {
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
<div style={{ flexGrow: 1, paddingTop: '5px' }}>
<div style={{ height: '200px', paddingTop: '5px' }}>
<Console lines={lines} />
</div>
</div>

2
packages/docs/sandboxes/events-dockview/src/console.tsx
View File

@ -20,7 +20,7 @@ export interface IConsoleProps {
}
export const Console = (props: IConsoleProps) => {
const ref = React.useRef<HTMLDivElement>();
const ref = React.useRef<HTMLDivElement>(null);
React.useLayoutEffect(() => {
if (!ref.current) {

32
packages/docs/sandboxes/ide-example/package.json
View File

@ -1,32 +0,0 @@
{
"name": "ide-example",
"description": "",
"keywords": [
"dockview"
],
"version": "1.0.0",
"main": "src/index.tsx",
"dependencies": {
"dockview": "*",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"typescript": "^4.9.5",
"react-scripts": "*"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

44
packages/docs/sandboxes/ide-example/public/index.html
View File

@ -1,44 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

154
packages/docs/sandboxes/ide-example/src/app.tsx
View File

@ -1,154 +0,0 @@
import {
GridviewReact,
GridviewReadyEvent,
IGridviewPanelProps,
GridviewComponent,
Orientation,
GridviewApi,
LayoutPriority,
} from 'dockview';
import * as React from 'react';
const components = {
'left-sidebar': (props: IGridviewPanelProps<{ title: string }>) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
'middle-content': (props: IGridviewPanelProps<{ title: string }>) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
'right-sidebar': (props: IGridviewPanelProps<{ title: string }>) => {
return (
<div
style={{
height: '100%',
padding: '20px',
background: 'var(--dv-group-view-background-color)',
}}
>
{props.params.title}
</div>
);
},
};
const App = (props: { theme?: string }) => {
const [api, setApi] = React.useState<GridviewApi>();
const onReady = (event: GridviewReadyEvent) => {
event.api.fromJSON({
grid: {
height: 1000,
width: 1000,
orientation: Orientation.HORIZONTAL,
root: {
type: 'branch',
data: [
{
type: 'leaf',
data: {
id: 'left-sidebar-id',
component: 'left-sidebar',
snap: true,
minimumWidth: 100,
},
size: 200,
},
{
type: 'leaf',
data: {
id: 'middle-content-id',
component: 'middle-content',
priority: LayoutPriority.High,
minimumWidth: 100,
},
size: 600,
},
{
type: 'leaf',
data: {
id: 'right-sidebar-id',
component: 'right-sidebar',
snap: true,
minimumWidth: 100,
},
size: 200,
},
],
},
},
});
setApi(event.api);
};
const onKeyPress = (event: React.KeyboardEvent) => {
if (!api) {
return;
}
if (event.ctrlKey) {
if (event.code === 'ArrowLeft') {
const leftSidebarPanel = api.getPanel('left-sidebar-id');
if (leftSidebarPanel) {
leftSidebarPanel.api.setVisible(false);
}
}
}
if (event.code === 'ArrowRight') {
const leftSidebarPanel = api.getPanel('left-sidebar-id');
if (leftSidebarPanel) {
leftSidebarPanel.api.setVisible(true);
}
}
};
return (
<div
tabIndex={-1}
style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
onKeyDown={onKeyPress}
>
<div>
{'Use '}
<span>{'Ctrl+ArrowLeft'}</span>
{' and '}
<span>{'Ctrl+ArrowRight'}</span>
{
' to show and hide the left sidebar. The right sidebar can be hidden by dragging it to the right.'
}
</div>
<div style={{ flexGrow: 1 }}>
<GridviewReact
onReady={onReady}
components={components}
className={`${props.theme || 'dockview-theme-abyss'}`}
/>
</div>
</div>
);
};
export default App;

20
packages/docs/sandboxes/ide-example/src/index.tsx
View File

@ -1,20 +0,0 @@
import { StrictMode } from 'react';
import * as ReactDOMClient from 'react-dom/client';
import './styles.css';
import 'dockview/dist/styles/dockview.css';
import App from './app';
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOMClient.createRoot(rootElement);
root.render(
<StrictMode>
<div className="app">
<App />
</div>
</StrictMode>
);
}

15
packages/docs/sandboxes/ide-example/src/styles.css
View File

@ -1,15 +0,0 @@
body {
margin: 0px;
font-family: sans-serif;
text-align: center;
}
#root {
height: 100vh;
width: 100vw;
}
.app {
height: 100%;
}

18
packages/docs/sandboxes/ide-example/tsconfig.json
View File

@ -1,18 +0,0 @@
{
"compilerOptions": {
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react-jsx",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true
}
}

6
packages/docs/src/components/ui/reference/docRef.scss
View File

@ -37,4 +37,10 @@
}
}
}
.doc-text {
font-size: 1em;
font-weight: 400;
margin-bottom: 8px;
}
}

63
packages/docs/src/components/ui/reference/docRef.tsx
View File

@ -9,18 +9,66 @@ export interface DocRefProps {
import docsJson from '../../../generated/api.output.json';
type DocsContent = { kind: string; text: string; tag?: string };
type DocsTag = { tag: string; content: DocsContent[] };
type DocsComment = {
summary?: DocsContent[];
blockTags?: DocsTag[];
};
type DocsJson = {
[index: string]: Array<{
name: string;
signature: string;
comment?: {
summary?: DocsContent[];
blockTags?: Array<{ tag: string; content: DocsContent }>;
};
comment?: DocsComment;
type: string;
}>;
};
export const Text = (props: { content: DocsContent[] }) => {
return (
<div className="doc-text">
{props.content.map((piece, i) => {
switch (piece.kind) {
case 'text': {
return <span key={i}>{piece.text}</span>;
}
case 'code':
return (
<code key={i}>
{piece.text.substring(1, piece.text.length - 1)}
</code>
);
default:
throw new Error(`unhandled piece ${piece.kind}`);
}
})}
</div>
);
};
export const Tags = (props: { tags: DocsTag[] }) => {
return (
<div>
{props.tags.map((tag, i) => {
return (
<div key={i}>
<div>{tag.tag}</div>
<Text content={tag.content} />
</div>
);
})}
</div>
);
};
export const Summary = (props: { summary: DocsComment }) => {
return (
<div>
<Text content={props.summary.summary ?? []} />
{/* <Tags tags={props.summary.blockTags ?? []} /> */}
</div>
);
};
export const Markdown = (props: { children: string }) => {
return <span>{props.children}</span>;
};
@ -94,6 +142,13 @@ export const DocRef = (props: DocRefProps) => {
>
{/* <div>{'-'}</div> */}
<div>
<div>
{doc.comment && (
<Summary
summary={doc.comment}
/>
)}
</div>
<CodeBlock language="tsx">
{doc.signature}
</CodeBlock>

171
packages/docs/src/components/ui/reference/dockviewApi.reference.tsx
View File

@ -1,171 +0,0 @@
import { ReactPropDocsTable } from '../referenceTable';
import * as React from 'react';
export default () => (
<ReactPropDocsTable
title="Dockview API"
url="https://dockview.dev/typedocs/classes/dockview_core.DockviewApi.html"
data={[
{
property: 'id',
propertyDescription:
'The unique id associated with the dock instance',
type: 'string',
},
{
property: 'width',
type: 'number',
},
{
property: 'height',
type: 'number',
},
{
property: 'minimumHeight',
type: 'number',
},
{
property: 'maximumHeight',
type: 'number',
},
{
property: 'minimumWidth',
type: 'number',
},
{
property: 'maximumWidth',
type: 'number',
},
{
property: 'size',
propertyDescription: 'Total number of groups',
type: 'number',
},
{
property: 'totalPanels',
propertyDescription: 'Total number of panels',
type: 'number',
},
{
property: 'onDidActiveGroupChange',
type: 'Event<DockviewGroupPanel | undefined>',
},
{
property: 'onDidAddGroup',
type: 'Event<DockviewGroupPanel>',
},
{
property: 'onDidRemoveGroup',
type: 'Event<DockviewGroupPanel>',
},
{
property: 'onDidActivePanelChange',
type: 'Event<IDockviewPanel | undefined>',
},
{
property: 'onDidAddPanel',
type: 'Event<IDockviewPanel>',
},
{
property: 'onDidRemovePanel',
type: 'Event<IDockviewPanel>',
},
{
property: 'onDidLayoutFromJSON',
type: 'Event<void>',
},
{
property: 'onDidLayoutChange',
type: 'Event<void>',
},
{
property: 'onDidDrop',
type: 'Event<DockviewDropEvent>',
},
{
property: 'onWillDragGroup',
type: 'Event<GroupDragEvent>',
},
{
property: 'onWillDragPanel',
type: 'Event<TabDragEvent>',
},
{
property: 'panels',
type: 'IDockviewPanel[]',
},
{
property: 'groups',
type: 'DockviewGroupPanel[]',
},
{
property: 'activePanel',
type: 'IDockviewPanel | undefined',
},
{
property: 'activeGroup',
type: 'DockviewGroupPanel | undefined',
},
{
property: 'focus',
type: '(): void',
},
{
property: 'getPanel',
type: '(id: string): IDockviewPanel | undefined',
},
{
property: 'layout',
type: '(width: number, height: number): void',
},
{
property: 'addPanel',
type: 'addPanel(options: AddPanelOptions): void',
},
{
property: 'removePanel',
type: '(panel: IDockviewPanel): void',
},
{
property: 'addGroup',
type: '(options?: AddGroupOptions): DockviewGroupPanel',
},
{
property: 'moveToNext',
type: '(options?: MovementOptions): void',
},
{
property: 'moveToPrevious',
type: '(options?: MovementOptions): void',
},
{
property: 'closeAllGroups',
type: '(): void',
},
{
property: 'removeGroup',
type: '(group: IDockviewGroupPanel): void ',
},
{
property: 'getGroup',
type: '(id: string): DockviewGroupPanel | undefined',
},
{
property: 'addFloatingGroup',
type: '(item: IDockviewPanel | DockviewGroupPanel, coord?: { x: number, y: number }): void',
},
{
property: 'fromJSON',
type: '(data: SerializedDockview): void',
},
{
property: 'toJSON',
type: '(): SerializedDockview ',
},
{
property: 'clear',
type: '(): void',
},
]}
/>
);

103
packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx
View File

@ -1,103 +0,0 @@
import { ReactPropDocsTable } from '../referenceTable';
import * as React from 'react';
export default () => (
<ReactPropDocsTable
title="Dockview Panel API"
url="https://dockview.dev/typedocs/interfaces/dockview_core.DockviewPanelApi.html"
data={[
{
property: 'group',
type: 'DockviewGroupPanel',
},
{
property: 'isGroupActive',
type: 'boolean',
},
{
property: 'title',
type: 'string | undefined',
},
{
property: 'group',
type: 'DockviewGroupPanel',
},
{
property: 'onDidActiveGroupChange',
type: 'Event<void>',
},
{
property: 'onDidGroupChange',
type: 'Event<void>',
},
{
property: 'close',
type: '(): void',
},
{
property: 'setTitle',
type: '(title: string): void',
},
{
property: 'moveTo',
type: '(options: { group: DockviewGroupPanel, position?: Position, index?: number }): void',
},
{
property: 'setSize',
type: '(event: SizeEvent): void',
},
{
property: 'onDidDimensionsChange',
type: 'Event<PanelDimensionChangeEvent>',
},
{
property: 'onDidFocusChange',
type: 'Event<FocusEvent>',
},
{
property: 'onDidVisibilityChange',
type: 'Event<VisibilityEvent>',
},
{
property: 'onDidActiveChange',
type: 'Event<ActiveEvent>',
},
{
property: 'setVisible',
type: '(isVisible: boolean): void',
},
{
property: 'setActive',
type: '(): void',
},
{
property: 'updateParameters',
type: '(parameters: Parameters): void',
},
{
property: 'id',
type: 'string',
},
{
property: 'isFocused',
type: 'boolean',
},
{
property: 'isActive',
type: 'boolean',
},
{
property: 'isVisible',
type: 'boolean',
},
{
property: 'width',
type: 'number',
},
{
property: 'height',
type: 'number',
},
]}
/>
);

64
packages/docs/src/components/ui/referenceTable.scss
View File

@ -1,64 +0,0 @@
.ref-table {
font-size: 12px;
width: 100%;
border-collapse: collapse;
line-height: 20px;
button {
all: unset;
}
code {
padding: 0px 4px;
margin: 0px 4px;
}
.ref-table-icon {
cursor: pointer;
}
.ref-table-property {
width: 30%;
}
.ref-table-type {
width: 50%;
}
.ref-table-default {
width: 20%;
}
thead {
text-align: left;
background-color: inherit;
tr {
border: none;
}
}
th,
td {
border: none;
padding: none;
}
tr {
background-color: inherit !important;
}
}
.ref-table-popover {
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
animation-duration: 400ms;
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
will-change: transform, opacity;
background-color: var(--ifm-background-surface-color);
color: var(--ifm-font-color-base);
}

196
packages/docs/src/components/ui/referenceTable.tsx
View File

@ -1,196 +0,0 @@
import * as React from 'react';
import './referenceTable.scss';
export interface ReferenceProps {
title?: string;
url?: string;
data: {
property: string;
propertyDescription?: string;
default?: string;
type: string;
typeDescription?: string;
}[];
}
import * as Popover from '@radix-ui/react-popover';
import { InfoCircledIcon } from '@radix-ui/react-icons';
export const ReactPropDocsTable = (props: ReferenceProps) => {
return (
<div>
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
{props.title && <span>{props.title}</span>}
{props.url && (
<button>
<a href={props.url}>{'See API documentation'}</a>
</button>
)}
</div>
<table className="ref-table">
<thead>
<tr>
<th className="ref-table-property">Property</th>
<th className="ref-table-type">Type</th>
<th className="ref-table-default">Default</th>
</tr>
</thead>
<tbody>
{props.data.map((item) => {
return (
<tr key={item.property}>
<td className="ref-table-property">
<span
style={{
display: 'flex',
alignItems: 'center',
}}
>
<code>{item.property}</code>
{item.propertyDescription && (
<Popover.Root>
<Popover.Trigger>
<InfoCircledIcon className="ref-table-icon" />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="ref-table-popover">
<div>
{
item.propertyDescription
}
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
)}
</span>
</td>
<td className="ref-table-type">
<span
style={{
display: 'flex',
alignItems: 'center',
}}
>
<code>{item.type}</code>
{item.typeDescription && (
<Popover.Root>
<Popover.Trigger>
<InfoCircledIcon className="ref-table-icon" />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="ref-table-popover">
<div>
<code>
{
item.typeDescription
}
</code>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
)}
</span>
</td>
<td className="ref-table-default">
{item.default ? (
<code>{item.default}</code>
) : (
<span>{'-'}</span>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};
export const ClassDocsTable = (props: ReferenceProps) => {
return (
<div>
<div>{props.title && <span>{props.title}</span>}</div>
<table className="ref-table">
<thead>
<tr>
<th className="ref-table-property">Property</th>
<th className="ref-table-type">Type</th>
<th className="ref-table-default">Default</th>
</tr>
</thead>
<tbody>
{props.data.map((item) => {
return (
<tr key={item.property}>
<td className="ref-table-property">
<span
style={{
display: 'flex',
alignItems: 'center',
}}
>
<code>{item.property}</code>
{item.propertyDescription && (
<Popover.Root>
<Popover.Trigger>
<InfoCircledIcon className="ref-table-icon" />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="ref-table-popover">
<div>
{
item.propertyDescription
}
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
)}
</span>
</td>
<td className="ref-table-type">
<span
style={{
display: 'flex',
alignItems: 'center',
}}
>
<code>{item.type}</code>
{item.typeDescription && (
<Popover.Root>
<Popover.Trigger>
<InfoCircledIcon className="ref-table-icon" />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="ref-table-popover">
<div>
<code>
{
item.typeDescription
}
</code>
</div>
</Popover.Content>
</Popover.Portal>
</Popover.Root>
)}
</span>
</td>
<td className="ref-table-default">
{item.default ? (
<code>{item.default}</code>
) : (
<span>{'-'}</span>
)}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
);
};

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

File diff suppressed because it is too large Load Diff

9
packages/docs/versioned_docs/version-1.8.4/components/dockview.mdx vendored
View File

@ -27,7 +27,6 @@ import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
import DockviewWithIFrames from '@site/sandboxes/iframe-dockview/src/app';
import DockviewFloating from '@site/sandboxes/floatinggroup-dockview/src/app';
import DockviewLockedGroup from '@site/sandboxes/lockedgroup-dockview/src/app';
import IDEExample from '@site/sandboxes/ide-example/src/app';
import DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
import { DocRef, Markdown } from '@site/src/components/ui/reference/docRef';
@ -862,14 +861,6 @@ Keyboard shortcuts
react={DockviewKeyboard}
/>
## Application with sidebars
<MultiFrameworkContainer
height={600}
sandboxId="ide-example"
react={IDEExample}
/>
### Nested Dockviews
You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.

5
scripts/docs.mjs
View File

@ -288,11 +288,12 @@ function getFunction(
};
}
case ReflectionKind.Method: {
const { signatures, comment } = method;
const { signatures } = method;
if (signatures.length > 1) {
throw new Error(`signatures.length > 1`);
}
const { name, parameters, type, typeParameter } = signatures[0];
const { name, parameters, type, typeParameter, comment } =
signatures[0];
let _typeParameter = '';