From 1ccd75b2b370dee6d0456d7c63731ef49cf7c985 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Thu, 28 Sep 2023 20:52:53 +0100 Subject: [PATCH 1/9] bug: unable to recover from loading a corrupted layout --- .../dockview/dockviewComponent.spec.ts | 77 ++++++++++++++++++ .../src/dockview/dockviewComponent.ts | 80 +++++++++++++------ 2 files changed, 133 insertions(+), 24 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 1c99baabc..1dfac7ed4 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -4063,4 +4063,81 @@ describe('dockviewComponent', () => { expect(tabDragEvents.length).toBe(0); expect(groupDragEvents.length).toBe(1); }); + + test('that loading a corrupt layout throws an error and leaves a clean dockview behind', () => { + const container = document.createElement('div'); + + const dockview = new DockviewComponent({ + parentElement: container, + components: { + default: PanelContentPartTest, + }, + tabComponents: { + test_tab_id: PanelTabPartTest, + }, + orientation: Orientation.HORIZONTAL, + }); + + dockview.layout(1000, 500); + + dockview.addPanel({ + id: 'panel_1', + component: 'default', + }); + + expect(dockview.groups.length).toBe(1); + expect(dockview.panels.length).toBe(1); + + expect(() => { + dockview.fromJSON({ + grid: { + root: { + type: 'branch', + data: [ + { + type: 'leaf', + data: { + views: ['panelA'], + activeView: 'panelA', + id: '1', + }, + size: 841, + }, + { + type: 'leaf', + data: { + views: ['panelB'], + activeView: 'panelB', + id: '2', + }, + size: 842, + }, + ], + size: 530, + }, + width: 1683, + height: 530, + orientation: Orientation.HORIZONTAL, + }, + panels: { + panelA: { + id: 'panelA', + contentComponent: 'somethingBad', + title: 'Panel A', + }, + panelB: { + id: 'panelB', + contentComponent: 'panelB', + title: 'Panel B', + }, + }, + activeGroup: '1', + }); + }).toThrow( + "Cannot create 'panelA', no component 'somethingBad' provided" + ); + + expect(dockview.groups.length).toBe(0); + expect(dockview.panels.length).toBe(0); + }); }); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 04a0eb280..53d96d250 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -649,33 +649,65 @@ export class DockviewComponent const createGroupFromSerializedState = (data: GroupPanelViewState) => { const { id, locked, hideHeader, views, activeView } = data; - const group = this.createGroup({ - id, - locked: !!locked, - hideHeader: !!hideHeader, - }); - - this._onDidAddGroup.fire(group); - - for (const child of views) { - const panel = this._deserializer.fromJSON(panels[child], group); - - const isActive = - typeof activeView === 'string' && activeView === panel.id; - - group.model.openPanel(panel, { - skipSetPanelActive: !isActive, - skipSetGroupActive: true, - }); + if (typeof id !== 'string') { + throw new Error('group id must be of type string'); } - if (!group.activePanel && group.panels.length > 0) { - group.model.openPanel(group.panels[group.panels.length - 1], { - skipSetGroupActive: true, - }); - } + let group: DockviewGroupPanel | undefined; - return group; + try { + group = this.createGroup({ + id, + locked: !!locked, + hideHeader: !!hideHeader, + }); + + this._onDidAddGroup.fire(group); + + for (const child of views) { + const panel = this._deserializer.fromJSON( + panels[child], + group + ); + + const isActive = + typeof activeView === 'string' && + activeView === panel.id; + + group.model.openPanel(panel, { + skipSetPanelActive: !isActive, + skipSetGroupActive: true, + }); + } + + if (!group.activePanel && group.panels.length > 0) { + group.model.openPanel( + group.panels[group.panels.length - 1], + { + skipSetGroupActive: true, + } + ); + } + + return group; + } catch (err) { + /** + * This is an odd case... we have failed to deserialize a view but we have already created a group, + * but we havn't registered that group with the gridview. + * We cannot use the removeGroup method because the group has only been partially added, we must + * manually dipose() of the view and remove it from being stored in the map. + */ + if (group) { + group.dispose(); + this._groups.delete(group.id); + } + + /** + * re-throw the error becasue we don't actually want to catch it, we just + * needed to do some clean-up before continuing. + */ + throw err; + } }; this.gridview.deserialize(grid, { From 19595f3b12b6ded5f22bd6b7f50a92f16349ed77 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Fri, 29 Sep 2023 20:53:58 +0100 Subject: [PATCH 2/9] bug: skip resize for unmounted elements --- packages/dockview-core/src/resizable.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/dockview-core/src/resizable.ts b/packages/dockview-core/src/resizable.ts index 499ce6615..4df6366ec 100644 --- a/packages/dockview-core/src/resizable.ts +++ b/packages/dockview-core/src/resizable.ts @@ -29,6 +29,16 @@ export abstract class Resizable extends CompositeDisposable { */ return; } + + if (!document.body.contains(this._element)) { + /** + * since the event is dispatched through requestAnimationFrame there is a small chance + * the component is no longer attached to the DOM, if that is the case the dimensions + * are mostly likely all zero and meaningless. we should skip this case. + */ + return; + } + const { width, height } = entry.contentRect; this.layout(width, height); }) From a15e895337828f53b3a1269e2d35d8093983fddc Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Fri, 29 Sep 2023 21:31:13 +0100 Subject: [PATCH 3/9] chore: navigation examples --- .codesandbox/ci.json | 3 +- packages/docs/docs/components/dockview.mdx | 11 +- .../sandboxes/keyboard-dockview/package.json | 34 +++++ .../keyboard-dockview/public/index.html | 45 ++++++ .../sandboxes/keyboard-dockview/src/app.scss | 21 +++ .../sandboxes/keyboard-dockview/src/app.tsx | 137 ++++++++++++++++++ .../sandboxes/keyboard-dockview/src/index.tsx | 20 +++ .../keyboard-dockview/src/styles.css | 16 ++ .../sandboxes/keyboard-dockview/tsconfig.json | 18 +++ 9 files changed, 303 insertions(+), 2 deletions(-) create mode 100644 packages/docs/sandboxes/keyboard-dockview/package.json create mode 100644 packages/docs/sandboxes/keyboard-dockview/public/index.html create mode 100644 packages/docs/sandboxes/keyboard-dockview/src/app.scss create mode 100644 packages/docs/sandboxes/keyboard-dockview/src/app.tsx create mode 100644 packages/docs/sandboxes/keyboard-dockview/src/index.tsx create mode 100644 packages/docs/sandboxes/keyboard-dockview/src/styles.css create mode 100644 packages/docs/sandboxes/keyboard-dockview/tsconfig.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 986267fe3..a993dea00 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -15,6 +15,7 @@ "/packages/docs/sandboxes/fullwidthtab-dockview", "/packages/docs/sandboxes/groupcontol-dockview", "/packages/docs/sandboxes/iframe-dockview", + "/packages/docs/sandboxes/keyboard-dockview", "/packages/docs/sandboxes/layout-dockview", "/packages/docs/sandboxes/lockedgroup-dockview", "/packages/docs/sandboxes/nativeapp-dockview", @@ -32,4 +33,4 @@ "/packages/docs/sandboxes/javascript/vanilla-dockview" ], "node": "16" -} +} \ No newline at end of file diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 25f67edc5..f55a5023e 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -27,6 +27,7 @@ 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 DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app'; import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; @@ -899,7 +900,15 @@ A simple example showing events fired by `dockviewz that can be interacted with. react={EventsDockview} /> -## Advanced Examples +## Keyboard Navigation + +Keyboard shortcuts + + ### Nested Dockviews diff --git a/packages/docs/sandboxes/keyboard-dockview/package.json b/packages/docs/sandboxes/keyboard-dockview/package.json new file mode 100644 index 000000000..a5766dcba --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/package.json @@ -0,0 +1,34 @@ +{ + "name": "keyboard-dockview", + "description": "", + "keywords": [ + "dockview" + ], + "version": "1.0.0", + "main": "src/index.tsx", + "dependencies": { + "dockview": "*", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "uuid": "^9.0.0" + }, + "devDependencies": { + "@types/react": "^18.0.28", + "@types/react-dom": "^18.0.11", + "@types/uuid": "^9.0.0", + "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" + ] +} diff --git a/packages/docs/sandboxes/keyboard-dockview/public/index.html b/packages/docs/sandboxes/keyboard-dockview/public/index.html new file mode 100644 index 000000000..5a4850c1d --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/public/index.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/keyboard-dockview/src/app.scss b/packages/docs/sandboxes/keyboard-dockview/src/app.scss new file mode 100644 index 000000000..53fd8f0be --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/src/app.scss @@ -0,0 +1,21 @@ +.keyboard-example-panel { + padding: 20px; + color: white; + font-size: 13px; + + input { + &:focus { + outline: 1px solid dodgerblue; + } + } + + .keyboard-example-description { + padding: 10px 0px; + .keyboard-example-shortcut { + background-color: lightblue; + color: black; + padding: 2px 4px; + border-radius: 4px; + } + } +} diff --git a/packages/docs/sandboxes/keyboard-dockview/src/app.tsx b/packages/docs/sandboxes/keyboard-dockview/src/app.tsx new file mode 100644 index 000000000..021491507 --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/src/app.tsx @@ -0,0 +1,137 @@ +import { + DockviewApi, + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import './app.scss'; +import * as React from 'react'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + const [active, setActive] = React.useState(props.api.isActive); + const ref = React.useRef(null); + + React.useEffect(() => { + const disposable = props.api.onDidActiveChange((event) => { + setActive(props.api.isActive); + }); + + return () => { + disposable.dispose(); + }; + }, [props.api]); + + React.useEffect(() => { + if (!active) { + return; + } + + requestAnimationFrame(() => { + ref.current?.focus(); + }); + }, [active]); + + return ( +
+
+ {props.api.title} +
+
+ {'Use '} + + {'Ctrl+ArrowLeft'} + + {' and '} + + {'Ctrl+ArrowRight'} + + {' to nativgate between tabs.'} +
+ +
+
+ { + 'This input box should take focus when the panel is active to demonsrate managed focus' + } + +
+
+ +
+ {'isPanelActive: '} + {active ? 'true' : 'false'} +
+
+ ); + }, +}; + +const DockviewDemo = (props: { theme?: string }) => { + const [api, setApi] = React.useState(); + + const onReady = (event: DockviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + title: 'Panel 1', + }); + event.api.addPanel({ + id: 'panel_2', + component: 'default', + title: 'Panel 2', + }); + event.api.addPanel({ + id: 'panel_3', + component: 'default', + title: 'Panel 3', + }); + event.api.addPanel({ + id: 'panel_4', + component: 'default', + title: 'Panel 4', + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + event.api.addPanel({ + id: 'panel_5', + component: 'default', + title: 'Panel 5', + position: { referencePanel: 'panel_4', direction: 'within' }, + }); + + event.api.getPanel('panel_1')!.api.setActive(); + + setApi(event.api); + }; + + const onKeyDown = (event: React.KeyboardEvent) => { + if (!api) { + return; + } + + if (event.ctrlKey && event.code === 'ArrowLeft') { + // move backwards + api.moveToPrevious({ includePanel: true }); + } + + if (event.ctrlKey && event.code === 'ArrowRight') { + // move backwards + api.moveToNext({ includePanel: true }); + } + }; + + return ( +
+ +
+ ); +}; + +export default DockviewDemo; diff --git a/packages/docs/sandboxes/keyboard-dockview/src/index.tsx b/packages/docs/sandboxes/keyboard-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/src/index.tsx @@ -0,0 +1,20 @@ +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( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/keyboard-dockview/src/styles.css b/packages/docs/sandboxes/keyboard-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/keyboard-dockview/tsconfig.json b/packages/docs/sandboxes/keyboard-dockview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/keyboard-dockview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +} From 206255b411b22a6ddb3b51a43e31a6b7774a3396 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 30 Sep 2023 10:17:36 +0100 Subject: [PATCH 4/9] chore: provide additional examples --- .codesandbox/ci.json | 2 + packages/docs/docs/components/dockview.mdx | 9 + .../docs/sandboxes/ide-example/package.json | 32 ++++ .../sandboxes/ide-example/public/index.html | 44 +++++ .../docs/sandboxes/ide-example/src/app.tsx | 162 ++++++++++++++++++ .../docs/sandboxes/ide-example/src/index.tsx | 20 +++ .../docs/sandboxes/ide-example/src/styles.css | 15 ++ .../docs/sandboxes/ide-example/tsconfig.json | 18 ++ 8 files changed, 302 insertions(+) create mode 100644 packages/docs/sandboxes/ide-example/package.json create mode 100644 packages/docs/sandboxes/ide-example/public/index.html create mode 100644 packages/docs/sandboxes/ide-example/src/app.tsx create mode 100644 packages/docs/sandboxes/ide-example/src/index.tsx create mode 100644 packages/docs/sandboxes/ide-example/src/styles.css create mode 100644 packages/docs/sandboxes/ide-example/tsconfig.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 986267fe3..83de42b89 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -13,6 +13,8 @@ "/packages/docs/sandboxes/externaldnd-dockview", "/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/layout-dockview", diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 25f67edc5..6de717337 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -27,6 +27,7 @@ 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 { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; @@ -901,6 +902,14 @@ A simple example showing events fired by `dockviewz that can be interacted with. ## Advanced Examples +## Application with sidebars + + + ### Nested Dockviews You can safely create multiple dockview instances within one page and nest dockviews within other dockviews. diff --git a/packages/docs/sandboxes/ide-example/package.json b/packages/docs/sandboxes/ide-example/package.json new file mode 100644 index 000000000..5de7b1222 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/package.json @@ -0,0 +1,32 @@ +{ + "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" + ] +} diff --git a/packages/docs/sandboxes/ide-example/public/index.html b/packages/docs/sandboxes/ide-example/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/ide-example/src/app.tsx b/packages/docs/sandboxes/ide-example/src/app.tsx new file mode 100644 index 000000000..79d5acda6 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/src/app.tsx @@ -0,0 +1,162 @@ +import { + GridviewReact, + GridviewReadyEvent, + IGridviewPanelProps, + GridviewComponent, + Orientation, + GridviewApi, + LayoutPriority, +} from 'dockview'; +import * as React from 'react'; + +const components = { + 'left-sidebar': (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, + 'middle-content': (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, + 'right-sidebar': (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +const App = (props: { theme?: string }) => { + const [api, setApi] = React.useState(); + + 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'); + const rightSidebarPanel = api.getPanel('right-sidebar-id'); + + // const width = rightSidebarPanel?.api.width; + + if (leftSidebarPanel) { + leftSidebarPanel.api.setVisible(false); + + // if (rightSidebarPanel && typeof width === 'number') { + // rightSidebarPanel.api.setSize({ width }); + // } + } + } + } + + if (event.code === 'ArrowRight') { + const leftSidebarPanel = api.getPanel('left-sidebar-id'); + + if (leftSidebarPanel) { + leftSidebarPanel.api.setVisible(true); + // leftSidebarPanel.api.setSize({ width: 200 }); + } + } + }; + + return ( +
+
+ {'Use '} + {'Ctrl+ArrowLeft'} + {' and '} + {'Ctrl+ArrowRight'} + { + ' to show and hide the left sidebar. The right sidebar can be hidden by dragging it to the right.' + } +
+
+ +
+
+ ); +}; + +export default App; diff --git a/packages/docs/sandboxes/ide-example/src/index.tsx b/packages/docs/sandboxes/ide-example/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/src/index.tsx @@ -0,0 +1,20 @@ +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( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/ide-example/src/styles.css b/packages/docs/sandboxes/ide-example/src/styles.css new file mode 100644 index 000000000..2198f8a37 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/src/styles.css @@ -0,0 +1,15 @@ +body { + margin: 0px; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/ide-example/tsconfig.json b/packages/docs/sandboxes/ide-example/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/ide-example/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +} From 08ec3fd3a54af6c58c68e26e353402d8748b2e26 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 30 Sep 2023 11:24:26 +0100 Subject: [PATCH 5/9] feat: ensure view priority used for viewChange events --- .../dockview-core/src/splitview/splitview.ts | 24 +++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index 007a8e60a..0d56cce24 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -37,10 +37,11 @@ export interface SplitViewOptions { readonly proportionalLayout?: boolean; readonly styles?: ISplitviewStyles; } + export enum LayoutPriority { - Low = 'low', - High = 'high', - Normal = 'normal', + Low = 'low', // view is offered space last + High = 'high', // view is offered space first + Normal = 'normal', // view is offered space in view order } export interface IBaseView extends IDisposable { @@ -340,7 +341,22 @@ export class Splitview { item.size = size; - this.relayout([index]); + const indexes = range(this.viewItems.length).filter((i) => i !== index); + const lowPriorityIndexes = [ + ...indexes.filter( + (i) => this.viewItems[i].priority === LayoutPriority.Low + ), + index, + ]; + const highPriorityIndexes = indexes.filter( + (i) => this.viewItems[i].priority === LayoutPriority.High + ); + + /** + * add this view we are changing to the low-index list since we have determined the size + * here and don't want it changed + */ + this.relayout([...lowPriorityIndexes, index], highPriorityIndexes); } public addView( From 4c142b9632008728d9726d116a10de8f9811dcfa Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 30 Sep 2023 11:31:01 +0100 Subject: [PATCH 6/9] chore: update examples --- packages/docs/sandboxes/ide-example/src/app.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/packages/docs/sandboxes/ide-example/src/app.tsx b/packages/docs/sandboxes/ide-example/src/app.tsx index 79d5acda6..d63b035f8 100644 --- a/packages/docs/sandboxes/ide-example/src/app.tsx +++ b/packages/docs/sandboxes/ide-example/src/app.tsx @@ -109,16 +109,9 @@ const App = (props: { theme?: string }) => { if (event.ctrlKey) { if (event.code === 'ArrowLeft') { const leftSidebarPanel = api.getPanel('left-sidebar-id'); - const rightSidebarPanel = api.getPanel('right-sidebar-id'); - - // const width = rightSidebarPanel?.api.width; if (leftSidebarPanel) { leftSidebarPanel.api.setVisible(false); - - // if (rightSidebarPanel && typeof width === 'number') { - // rightSidebarPanel.api.setSize({ width }); - // } } } } @@ -128,7 +121,6 @@ const App = (props: { theme?: string }) => { if (leftSidebarPanel) { leftSidebarPanel.api.setVisible(true); - // leftSidebarPanel.api.setSize({ width: 200 }); } } }; From fc1c747bed61ac4f169ed5c04695b4eb940eab14 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sat, 30 Sep 2023 11:47:36 +0100 Subject: [PATCH 7/9] test: add tests --- .../src/__tests__/splitview/splitview.spec.ts | 96 +++++++++++++++++++ 1 file changed, 96 insertions(+) diff --git a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts index ec7654393..ed02acf4c 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts @@ -676,4 +676,100 @@ describe('splitview', () => { expect(addEventListenerSpy).toBeCalledTimes(3); expect(removeEventListenerSpy).toBeCalledTimes(3); }); + + test('setViewVisible', () => { + const splitview = new Splitview(container, { + orientation: Orientation.HORIZONTAL, + proportionalLayout: false, + }); + splitview.layout(900, 500); + + const view1 = new Testview(0, 1000); + const view2 = new Testview(0, 1000); + const view3 = new Testview(0, 1000); + + splitview.addView(view1); + splitview.addView(view2); + splitview.addView(view3); + + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + + splitview.setViewVisible(0, false); + expect([view1.size, view2.size, view3.size]).toEqual([0, 300, 600]); + + splitview.setViewVisible(0, true); + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + }); + + test('setViewVisible with one view having high layout priority', () => { + const splitview = new Splitview(container, { + orientation: Orientation.HORIZONTAL, + proportionalLayout: false, + }); + splitview.layout(900, 500); + + const view1 = new Testview(0, 1000); + const view2 = new Testview(0, 1000, LayoutPriority.High); + const view3 = new Testview(0, 1000); + + splitview.addView(view1); + splitview.addView(view2); + splitview.addView(view3); + + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + + splitview.setViewVisible(0, false); + expect([view1.size, view2.size, view3.size]).toEqual([0, 600, 300]); + + splitview.setViewVisible(0, true); + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + }); + + test('set view size', () => { + const splitview = new Splitview(container, { + orientation: Orientation.HORIZONTAL, + proportionalLayout: false, + }); + splitview.layout(900, 500); + + const view1 = new Testview(0, 1000); + const view2 = new Testview(0, 1000); + const view3 = new Testview(0, 1000); + + splitview.addView(view1); + splitview.addView(view2); + splitview.addView(view3); + + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + + view1.fireChangeEvent({ size: 0 }); + expect([view1.size, view2.size, view3.size]).toEqual([0, 300, 600]); + + view1.fireChangeEvent({ size: 300 }); + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + }); + + test('set view size with one view having high layout priority', () => { + const splitview = new Splitview(container, { + orientation: Orientation.HORIZONTAL, + proportionalLayout: false, + }); + splitview.layout(900, 500); + + const view1 = new Testview(0, 1000); + const view2 = new Testview(0, 1000, LayoutPriority.High); + const view3 = new Testview(0, 1000); + + splitview.addView(view1); + splitview.addView(view2); + splitview.addView(view3); + + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + + view1.fireChangeEvent({ size: 0 }); + expect([view1.size, view2.size, view3.size]).toEqual([0, 600, 300]); + + view1.fireChangeEvent({ size: 300 }); + expect([view1.size, view2.size, view3.size]).toEqual([300, 300, 300]); + }); }); From bd1a8f1d44cad9d1754f8790aa7067cc6aeeecbf Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Wed, 27 Sep 2023 20:07:12 +0100 Subject: [PATCH 8/9] feat: prefix header actions --- .../components/titlebar/tabsContainer.spec.ts | 210 ++++++++++++++++++ .../components/titlebar/tabsContainer.ts | 21 ++ .../src/dockview/dockviewComponent.ts | 1 + .../src/dockview/dockviewGroupPanelModel.ts | 18 +- .../dockview-core/src/dockview/options.ts | 3 + packages/dockview/src/dockview/dockview.tsx | 17 ++ packages/docs/docs/components/dockview.mdx | 35 +-- .../docs/sandboxes/demo-dockview/src/app.tsx | 18 ++ 8 files changed, 305 insertions(+), 18 deletions(-) diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 664057572..711d2ee0b 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -638,4 +638,214 @@ describe('tabsContainer', () => { expect(preventDefaultSpy).toBeCalledTimes(1); expect(accessor.addFloatingGroup).toBeCalledTimes(1); }); + + test('pre header actions', () => { + const accessorMock = jest.fn(() => { + return (>{ + options: {}, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), + }) as DockviewComponent; + }); + + const groupPanelMock = jest.fn(() => { + return (>{ + api: { isFloating: true } as any, + model: {} as any, + }) as DockviewGroupPanel; + }); + + const accessor = new accessorMock(); + const groupPanel = new groupPanelMock(); + + const cut = new TabsContainer(accessor, groupPanel); + + const panelMock = jest.fn((id: string) => { + const partial: Partial = { + id, + + view: { + tab: { + element: document.createElement('div'), + } as any, + content: { + element: document.createElement('div'), + } as any, + } as any, + }; + return partial as IDockviewPanel; + }); + + const panel = new panelMock('test_id'); + cut.openPanel(panel); + + let result = cut.element.querySelector('.pre-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + + const actions = document.createElement('div'); + cut.setPrefixActionsElement(actions); + + result = cut.element.querySelector('.pre-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(actions); + + const updatedActions = document.createElement('div'); + cut.setPrefixActionsElement(updatedActions); + + result = cut.element.querySelector('.pre-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(updatedActions); + + cut.setPrefixActionsElement(undefined); + + result = cut.element.querySelector('.pre-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + }); + + test('left header actions', () => { + const accessorMock = jest.fn(() => { + return (>{ + options: {}, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), + }) as DockviewComponent; + }); + + const groupPanelMock = jest.fn(() => { + return (>{ + api: { isFloating: true } as any, + model: {} as any, + }) as DockviewGroupPanel; + }); + + const accessor = new accessorMock(); + const groupPanel = new groupPanelMock(); + + const cut = new TabsContainer(accessor, groupPanel); + + const panelMock = jest.fn((id: string) => { + const partial: Partial = { + id, + + view: { + tab: { + element: document.createElement('div'), + } as any, + content: { + element: document.createElement('div'), + } as any, + } as any, + }; + return partial as IDockviewPanel; + }); + + const panel = new panelMock('test_id'); + cut.openPanel(panel); + + let result = cut.element.querySelector('.left-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + + const actions = document.createElement('div'); + cut.setLeftActionsElement(actions); + + result = cut.element.querySelector('.left-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(actions); + + const updatedActions = document.createElement('div'); + cut.setLeftActionsElement(updatedActions); + + result = cut.element.querySelector('.left-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(updatedActions); + + cut.setLeftActionsElement(undefined); + + result = cut.element.querySelector('.left-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + }); + + test('right header actions', () => { + const accessorMock = jest.fn(() => { + return (>{ + options: {}, + onDidAddPanel: jest.fn(), + onDidRemovePanel: jest.fn(), + element: document.createElement('div'), + addFloatingGroup: jest.fn(), + getGroupPanel: jest.fn(), + }) as DockviewComponent; + }); + + const groupPanelMock = jest.fn(() => { + return (>{ + api: { isFloating: true } as any, + model: {} as any, + }) as DockviewGroupPanel; + }); + + const accessor = new accessorMock(); + const groupPanel = new groupPanelMock(); + + const cut = new TabsContainer(accessor, groupPanel); + + const panelMock = jest.fn((id: string) => { + const partial: Partial = { + id, + + view: { + tab: { + element: document.createElement('div'), + } as any, + content: { + element: document.createElement('div'), + } as any, + } as any, + }; + return partial as IDockviewPanel; + }); + + const panel = new panelMock('test_id'); + cut.openPanel(panel); + + let result = cut.element.querySelector('.right-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + + const actions = document.createElement('div'); + cut.setRightActionsElement(actions); + + result = cut.element.querySelector('.right-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(actions); + + const updatedActions = document.createElement('div'); + cut.setRightActionsElement(updatedActions); + + result = cut.element.querySelector('.right-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(1); + expect(result!.childNodes.item(0)).toBe(updatedActions); + + cut.setRightActionsElement(undefined); + + result = cut.element.querySelector('.right-actions-container'); + expect(result).toBeTruthy(); + expect(result!.childNodes.length).toBe(0); + }); }); diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index 4a3931cf2..77a3f7182 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -43,6 +43,7 @@ export interface ITabsContainer extends IDisposable { openPanel: (panel: IDockviewPanel, index?: number) => void; setRightActionsElement(element: HTMLElement | undefined): void; setLeftActionsElement(element: HTMLElement | undefined): void; + setPrefixActionsElement(element: HTMLElement | undefined): void; show(): void; hide(): void; } @@ -55,12 +56,14 @@ export class TabsContainer private readonly tabContainer: HTMLElement; private readonly rightActionsContainer: HTMLElement; private readonly leftActionsContainer: HTMLElement; + private readonly preActionsContainer: HTMLElement; private readonly voidContainer: VoidContainer; private tabs: IValueDisposable[] = []; private selectedIndex = -1; private rightActions: HTMLElement | undefined; private leftActions: HTMLElement | undefined; + private preActions: HTMLElement | undefined; private _hidden = false; @@ -129,6 +132,20 @@ export class TabsContainer } } + setPrefixActionsElement(element: HTMLElement | undefined): void { + if (this.preActions === element) { + return; + } + if (this.preActions) { + this.preActions.remove(); + this.preActions = undefined; + } + if (element) { + this.preActionsContainer.appendChild(element); + this.preActions = element; + } + } + get element(): HTMLElement { return this._element; } @@ -192,11 +209,15 @@ export class TabsContainer this.leftActionsContainer = document.createElement('div'); this.leftActionsContainer.className = 'left-actions-container'; + this.preActionsContainer = document.createElement('div'); + this.preActionsContainer.className = 'pre-actions-container'; + this.tabContainer = document.createElement('div'); this.tabContainer.className = 'tabs-container'; this.voidContainer = new VoidContainer(this.accessor, this.group); + this._element.appendChild(this.preActionsContainer); this._element.appendChild(this.tabContainer); this._element.appendChild(this.leftActionsContainer); this._element.appendChild(this.voidContainer.element); diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 04a0eb280..6e8e4e63d 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -92,6 +92,7 @@ export type DockviewComponentUpdateOptions = Pick< | 'defaultTabComponent' | 'createLeftHeaderActionsElement' | 'createRightHeaderActionsElement' + | 'createPrefixHeaderActionsElement' | 'disableFloatingGroups' | 'floatingGroupBounds' >; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index d05aa7308..0f3ec17ab 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -12,7 +12,7 @@ import { IContentContainer, } from './components/panel/content'; import { - GroupDragEvent, + GroupDragEvent, ITabsContainer, TabDragEvent, TabsContainer, @@ -144,6 +144,7 @@ export class DockviewGroupPanelModel private _isFloating = false; private _rightHeaderActions: IHeaderActionsRenderer | undefined; private _leftHeaderActions: IHeaderActionsRenderer | undefined; + private _prefixHeaderActions: IHeaderActionsRenderer | undefined; private mostRecentlyUsed: IDockviewPanel[] = []; @@ -398,6 +399,21 @@ export class DockviewGroupPanelModel this._leftHeaderActions.element ); } + + if (this.accessor.options.createPrefixHeaderActionsElement) { + this._prefixHeaderActions = + this.accessor.options.createPrefixHeaderActionsElement( + this.groupPanel + ); + this.addDisposables(this._prefixHeaderActions); + this._prefixHeaderActions.init({ + containerApi: new DockviewApi(this.accessor), + api: this.groupPanel.api, + }); + this.tabsContainer.setPrefixActionsElement( + this._prefixHeaderActions.element + ); + } } public indexOf(panel: IDockviewPanel): number { diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 920737a06..f9d2cc1c5 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -84,6 +84,9 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions { createLeftHeaderActionsElement?: ( group: DockviewGroupPanel ) => IHeaderActionsRenderer; + createPrefixHeaderActionsElement?: ( + group: DockviewGroupPanel + ) => IHeaderActionsRenderer; singleTabMode?: 'fullwidth' | 'default'; parentElement?: HTMLElement; disableFloatingGroups?: boolean; diff --git a/packages/dockview/src/dockview/dockview.tsx b/packages/dockview/src/dockview/dockview.tsx index 7c6bcc435..2485e6d81 100644 --- a/packages/dockview/src/dockview/dockview.tsx +++ b/packages/dockview/src/dockview/dockview.tsx @@ -67,6 +67,7 @@ export interface IDockviewReactProps { defaultTabComponent?: React.FunctionComponent; rightHeaderActionsComponent?: React.FunctionComponent; leftHeaderActionsComponent?: React.FunctionComponent; + prefixHeaderActionsComponent?: React.FunctionComponent; singleTabMode?: 'fullwidth' | 'default'; disableFloatingGroups?: boolean; floatingGroupBounds?: @@ -166,6 +167,10 @@ export const DockviewReact = React.forwardRef( props.rightHeaderActionsComponent, { addPortal } ), + createPrefixHeaderActionsElement: createGroupControlElement( + props.prefixHeaderActionsComponent, + { addPortal } + ), singleTabMode: props.singleTabMode, disableFloatingGroups: props.disableFloatingGroups, floatingGroupBounds: props.floatingGroupBounds, @@ -301,6 +306,18 @@ export const DockviewReact = React.forwardRef( }); }, [props.leftHeaderActionsComponent]); + React.useEffect(() => { + if (!dockviewRef.current) { + return; + } + dockviewRef.current.updateOptions({ + createPrefixHeaderActionsElement: createGroupControlElement( + props.prefixHeaderActionsComponent, + { addPortal } + ), + }); + }, [props.prefixHeaderActionsComponent]); + return (
void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | -| defaultTabComponent | object | Yes | | | -| leftHeaderActionsComponent | object | Yes | | | -| rightHeaderActionsComponent | object | Yes | | | -| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | +| Property | Type | Optional | Default | Description | +| ---------------------------- | ------------------------------------ | -------- | --------- | ----------- | +| onReady | (event: SplitviewReadyEvent) => void | No | | | +| components | object | No | | | +| tabComponents | object | Yes | | | +| watermarkComponent | object | Yes | | | +| hideBorders | boolean | Yes | false | | +| className | string | Yes | '' | | +| disableAutoResizing | boolean | Yes | false | | +| onDidDrop | Event | Yes | false | | +| showDndOverlay | Event | Yes | false | | +| defaultTabComponent | object | Yes | | | +| leftHeaderActionsComponent | object | Yes | | | +| rightHeaderActionsComponent | object | Yes | | | +| prefixHeaderActionsComponent | object | Yes | | | +| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | ## Dockview API @@ -804,8 +805,8 @@ better understanding of what this means, try and drag the panels in the example ### Group Controls Panel -`DockviewReact` accepts `leftHeaderActionsComponent` and `rightHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`. -These controls are rendered of the left and right side of the space to the right of the tabs in the header bar. +`DockviewReact` accepts `leftHeaderActionsComponent`, `rightHeaderActionsComponent` and `prefixHeaderActionsComponent` which expect a React component with props `IDockviewHeaderActionsProps`. +These controls are rendered to left and right side of the space to the right of the tabs in the header bar as well as before the first tab in the case of the prefix header prop. ```tsx const Component: React.FunctionComponent = () => { diff --git a/packages/docs/sandboxes/demo-dockview/src/app.tsx b/packages/docs/sandboxes/demo-dockview/src/app.tsx index 7e84a0747..0e5b2ff96 100644 --- a/packages/docs/sandboxes/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/demo-dockview/src/app.tsx @@ -191,6 +191,23 @@ const LeftControls = (props: IDockviewHeaderActionsProps) => { ); }; +const PrefixHeaderControls = (props: IDockviewHeaderActionsProps) => { + return ( +
+ +
+ ); +}; + const DockviewDemo = (props: { theme?: string }) => { const onReady = (event: DockviewReadyEvent) => { event.api.addPanel({ @@ -262,6 +279,7 @@ const DockviewDemo = (props: { theme?: string }) => { defaultTabComponent={headerComponents.default} rightHeaderActionsComponent={RightControls} leftHeaderActionsComponent={LeftControls} + prefixHeaderActionsComponent={PrefixHeaderControls} onReady={onReady} className={props.theme || 'dockview-theme-abyss'} /> From e71fd7b15325fda597327a94f9d8d0777f39bf42 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 1 Oct 2023 20:44:26 +0100 Subject: [PATCH 9/9] chore: auto-gen type docs --- .gitignore | 1 + packages/dockview-core/src/index.ts | 4 + packages/docs/docs/components/dockview.mdx | 109 +- packages/docs/docs/components/gridview.mdx | 103 +- packages/docs/docs/components/paneview.mdx | 57 +- packages/docs/docs/components/splitview.mdx | 58 +- packages/docs/docusaurus.config.js | 7 +- .../sandboxes/simple-gridview/package.json | 32 + .../simple-gridview/public/index.html | 44 + .../sandboxes/simple-gridview/src/app.tsx | 145 ++ .../sandboxes/simple-gridview/src/index.tsx | 20 + .../sandboxes/simple-gridview/src/styles.css | 16 + .../sandboxes/simple-gridview/tsconfig.json | 18 + .../src/components/ui/reference/docRef.scss | 40 + .../src/components/ui/reference/docRef.tsx | 109 ++ .../ui/reference/dockviewApi.reference.tsx | 171 +++ .../reference/dockviewPanelApi.reference.tsx | 103 ++ .../src/components/ui/referenceTable.scss | 64 + .../docs/src/components/ui/referenceTable.tsx | 216 ++- packages/docs/src/generated/api.output.json | 1278 +++++++++++++++++ packages/docs/src/pages/index.tsx | 30 +- packages/docs/tsconfig.json | 11 +- scripts/docs.mjs | 399 +++++ 23 files changed, 2715 insertions(+), 320 deletions(-) create mode 100644 packages/docs/sandboxes/simple-gridview/package.json create mode 100644 packages/docs/sandboxes/simple-gridview/public/index.html create mode 100644 packages/docs/sandboxes/simple-gridview/src/app.tsx create mode 100644 packages/docs/sandboxes/simple-gridview/src/index.tsx create mode 100644 packages/docs/sandboxes/simple-gridview/src/styles.css create mode 100644 packages/docs/sandboxes/simple-gridview/tsconfig.json create mode 100644 packages/docs/src/components/ui/reference/docRef.scss create mode 100644 packages/docs/src/components/ui/reference/docRef.tsx create mode 100644 packages/docs/src/components/ui/reference/dockviewApi.reference.tsx create mode 100644 packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx create mode 100644 packages/docs/src/components/ui/referenceTable.scss create mode 100644 packages/docs/src/generated/api.output.json create mode 100644 scripts/docs.mjs diff --git a/.gitignore b/.gitignore index e3f290550..4e9bd8383 100644 --- a/.gitignore +++ b/.gitignore @@ -14,3 +14,4 @@ test-report.xml yarn-error.log /build /docs/ +/generated/ diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index be2f51877..e85e335c0 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -26,6 +26,10 @@ export * from './paneview/draggablePaneviewPanel'; export * from './dockview/components/panel/content'; export * from './dockview/components/tab/tab'; +export { + TabDragEvent, + GroupDragEvent, +} from './dockview/components/titlebar/tabsContainer'; export * from './dockview/types'; export * from './dockview/dockviewGroupPanel'; diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 25f67edc5..e42870ecb 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -28,6 +28,8 @@ 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 { DocRef, Markdown } from '@site/src/components/ui/reference/docRef'; + import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app'; import { attach as attachSimpleDockview } from '@site/sandboxes/javascript/simple-dockview/src/app'; import { attach as attachTabHeightDockview } from '@site/sandboxes/javascript/tabheight-dockview/src/app'; @@ -54,25 +56,12 @@ Dockview is an abstraction built on top of [Gridviews](./gridview) where each vi You can create a Dockview through the use of the `DockviewReact` component. -```tsx -import { DockviewReact } from 'dockview'; -``` - -| Property | Type | Optional | Default | Description | -| --------------------------- | ------------------------------------ | -------- | --------- | ----------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| tabComponents | object | Yes | | | -| watermarkComponent | object | Yes | | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | | -| onDidDrop | Event | Yes | false | | -| showDndOverlay | Event | Yes | false | | -| defaultTabComponent | object | Yes | | | -| leftHeaderActionsComponent | object | Yes | | | -| rightHeaderActionsComponent | object | Yes | | | -| singleTabMode | 'fullwidth' \| 'default' | Yes | 'default' | | +

+ {'All of these are React props available through the '} + DockviewReact + {' component.'} +

+ ## Dockview API @@ -93,44 +82,19 @@ const onReady = (event: DockviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ---------------------- | ---------------------------------------------------- | ------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| size | `number` | Number of Groups | -| panels | `IDockviewPanel[]` | | -| groups | `GroupPanel[]` | | -| activePanel | `IDockviewPanel \| undefined` | | -| activeGroup | `IDockviewPanel \| undefined` | | -| | | | -| onDidLayoutChange | `Event` | | -| onDidLayoutFromJSON | `Event` | | -| onDidAddGroup | `Event` | | -| onDidRemoveGroup | `Event` | | -| onDidActiveGroupChange | `Event` | | -| onDidAddPanel | `Event` | | -| onDidRemovePanel | `Event` | | -| onDidActivePanelChange | `Event` | | -| onDidDrop | `Event + {'All of these methods are available through the '} + api + {' property of '} + DockviewComponent + {' and the '} + containerApi + {' property of '} + IDockviewPanel + . +

+ + ## Dockview Panel API @@ -142,28 +106,15 @@ const MyComponent = (props: IDockviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focused | -| isActive | `boolean` | Is panel active | -| width | `number` | Panel width | -| height | `number` | Panel height | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| setActive | `(): void` | | -| | | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | -| | | | -| group | `GroupPanel | undefined` | -| isGroupActive | `boolean` | | -| title | `string` | | -| close | `(): void` | | -| setTitle | `(title: string): void` | | +

+ {'All of these are methods are available through the '} + api + {' property of '} + IDockviewPanel + . +

+ + ## Theme diff --git a/packages/docs/docs/components/gridview.mdx b/packages/docs/docs/components/gridview.mdx index 2cc700cd9..218fe1822 100644 --- a/packages/docs/docs/components/gridview.mdx +++ b/packages/docs/docs/components/gridview.mdx @@ -2,24 +2,26 @@ description: Gridview Documentation --- -import { SimpleGridview } from '@site/src/components/simpleGridview'; +import { MultiFrameworkContainer } from '@site/src/components/ui/container'; +import SimpleGridview from '@site/sandboxes/simple-gridview/src/app'; +// import SimpleGridview from '@site/sandboxes/simple-gridview/src/app'; import { EventsGridview } from '@site/src/components/gridview/events'; +// import IDEExample from '@site/sandboxes/ide-example/src/app'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Gridview +Gridview is a collection of nested splitviews and is the foundation for the [Dockview](./dockview) component. +Gridview serves a purpose when you want only the nested splitviews with no tabs and no headers. + ## Introduction -
- -
+ ## GridviewReact Component @@ -27,15 +29,7 @@ import Link from '@docusaurus/Link'; import { ReactGridview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ---------------------- | ----------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| orientation | Orientation | Yes | Orientation.HORIZONTAL | | -| proportionalLayout | boolean | Yes | true | | -| hideBorders | boolean | Yes | false | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | > | + ## Gridview API @@ -53,35 +47,7 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ---------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumHeight | `number` | | -| maximumHeight | `number` | | -| maximumWidth | `number` | | -| maximumWidth | `number` | | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | all panels | -| orientation | `Orientation` | | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddPanel | `Event` | Fires when a view is added | -| onDidRemovePanel | `Event` | Fires when a view is removed | -| onDidActivePanelChange | `Event` | Fires when the active group changes | -| | | | -| addPanel | `addPanel(options: AddComponentOptions): IGridviewPanel` | | -| removePanel | `(panel: IGridviewPanel, sizing?: Sizing): void` | | -| movePanel | `(panel: IGridviewPanel, options: {direction: Direction, refernece:string, size?: number}): void` | | -| getPanel | `(id: string) \| IGridviewPanel \| undefined` | | -| | | | -| updateOptions | `(options:SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | | -| fromJSON | `(data: SerializedGridview): void` | | -| toJSON | `(): SerializedGridview` | | -| clear | `(): void` | Clears the current layout | + ## Gridview Panel API @@ -93,25 +59,26 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | + + +## Theme + +As well as importing the `dockview` stylesheet you must provide a class-based theme somewhere in your application. For example. + +```tsx +// Providing a theme directly through the DockviewReact component props + + +// Providing a theme somewhere in the DOM tree +
+
+ {/**... */} + +
+
+``` + +You can find more details on theming here. ## Events diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index 4b7c9cc8b..95e025478 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -8,6 +8,7 @@ import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Paneview @@ -98,15 +99,7 @@ You can create a Paneview through the use of the `ReactPaneview` component. import { ReactPaneview } from 'dockview'; ``` -| Property | Type | Optional | Default | Description | -| ------------------- | ------------------------------------ | -------- | ------- | ----------- | -| onReady | (event: SplitviewReadyEvent) => void | No | | | -| components | object | No | | | -| headerComponents | object | Yes | | | -| className | string | Yes | '' | | -| disableAutoResizing | boolean | Yes | false | | -| disableDnd | boolean | Yes | false | | -| onDidDrop | Event | Yes | | | + ## Paneview API @@ -127,31 +120,7 @@ const onReady = (event: GridviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ------------------- | ---------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `IPaneviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| onDidDrop | `EventDrag and Drop) | -| | | | -| addPanel | `addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel` | | -| removePanel | `(panel: IPaneviewPanel): void` | | -| movePanel | `(from: number, to: number): void` | | -| getPanel | `(id:string): IPaneviewPanel \| undefined` | | -| | | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | | -| fromJSON | `(data: SerializedPaneview): void` | | -| toJSON | `(): SerializedPaneview` | | -| clear | `(): void` | Clears the current layout | + ## Paneview Panel API @@ -163,25 +132,7 @@ const MyComponent = (props: IGridviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | -| onDidDimensionsChange | `Event` | | -| onDidFocusChange | `Event` | | -| onDidVisibilityChange | `Event` | | -| onDidActiveChange | `Event` | | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | | -| | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: SizeEvent): void` | | + ## Advanced Features diff --git a/packages/docs/docs/components/splitview.mdx b/packages/docs/docs/components/splitview.mdx index 05b7018c0..ede28b404 100644 --- a/packages/docs/docs/components/splitview.mdx +++ b/packages/docs/docs/components/splitview.mdx @@ -5,6 +5,7 @@ description: Splitview Documentation import { SimpleSplitview } from '@site/src/components/simpleSplitview'; import { SplitviewExample1 } from '@site/src/components/splitview/active'; import Link from '@docusaurus/Link'; +import { DocRef } from '@site/src/components/ui/reference/docRef'; # Splitview @@ -85,15 +86,7 @@ import { ReactSplitview } from 'dockview'; Using the `onReady` prop you can access to the component `api` and add panels either through deserialization or the individual addition of panels. -| Property | Type | Optional | Default | Description | -| ------------------- | -------------------------------------- | -------- | ------------------------ | ------------------------------- | -| onReady | `(event: SplitviewReadyEvent) => void` | No | | Function | -| components | `Record` | No | | Panel renderers | -| orientation | `Orientation` | Yes | `Orientation.HORIZONTAL` | Orientation of the Splitview | -| proportionalLayout | `boolean` | Yes | `true` | | -| hideBorders | `boolean` | Yes | `false` | Hide the borders between panels | -| className | `string` | Yes | `''` | Attaches a classname | -| disableAutoResizing | `boolean` | Yes | `false` | | + ## Splitview API @@ -114,31 +107,7 @@ const onReady = (event: SplitviewReadyEvent) => { }; ``` -| Property | Type | Description | -| ------------------- | ------------------------------------------------------------------ | ---------------------------------------------------------------- | -| height | `number` | Component pixel height | -| width | `number` | Component pixel width | -| minimumSize | `number` | The sum of the `minimumSize` property for each panel | -| maximumSize | `number` | The sum of the `maximumSize` property for each panel | -| length | `number` | Number of panels | -| panels | `ISplitviewPanel[]` | All panels | -| | | | -| onDidLayoutChange | `Event` | Fires on layout change | -| onDidLayoutFromJSON | `Event` | Fires of layout change caused by a fromJSON deserialization call | -| onDidAddView | `Event` | Fires when a view is added | -| onDidRemoveView | `Event` | Fires when a view is removed | -| | | | -| addPanel | `addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel` | | -| removePanel | `(panel: ISplitviewPanel, sizing?: Sizing): void` | | -| getPanel | `(id:string): ISplitviewPanel \| undefined` | | -| movePanel | `(from: number, to: number): void` | | -| | | -| updateOptions | `(options: SplitviewComponentUpdateOptions): void` | | -| focus | `(): void` | Focus the active panel, if exists | -| layout | `(width: number, height:number): void` | | -| fromJSON | `(data: SerializedSplitview): void` | | -| toJSON | `(): SerializedSplitview` | | -| clear | `(): void` | Clears the current layout | + ## Splitview Panel API @@ -152,26 +121,7 @@ const MyComponent = (props: ISplitviewPanelProps<{ title: string }>) => { }; ``` -| Property | Type | Description | -| ---------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | -| id | `string` | Panel id | -| isFocused | `boolean` | Is panel focsed | -| isActive | `boolean` | Is panel active | -| isVisible | `boolean` | Is panel visible | -| width | `number` | Panel width | -| height | `number` | Panel height | -| | | | -| onDidDimensionsChange | `Event` | Fires when panel dimensions change | -| onDidFocusChange | `Event` | Fire when panel is focused and blurred | -| onDidVisibilityChange | `Event` | Fires when the panels visiblity property is changed (see Panel Visibility) | -| onDidActiveChange | `Event` | Fires when the panels active property is changed (see Active Panel) | -| onDidConstraintsChange | `onDidConstraintsChange: Event` | Fires when the panels size contrainsts change (see Panel Constraints) | -| | | | -| setVisible | `(isVisible: boolean): void` | | -| setActive | `(): void` | | -| | | | -| setConstraints | `(value: PanelConstraintChangeEvent2): void;` | | -| setSize | `(event: PanelSizeEvent): void` | | + ## Advanced Features diff --git a/packages/docs/docusaurus.config.js b/packages/docs/docusaurus.config.js index ba08fa1f3..e958866b5 100644 --- a/packages/docs/docusaurus.config.js +++ b/packages/docs/docusaurus.config.js @@ -1,8 +1,9 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion -const lightCodeTheme = require('prism-react-renderer/themes/github'); -const darkCodeTheme = require('prism-react-renderer/themes/dracula'); +const lightCodeTheme = require('prism-react-renderer/themes/nightOwlLight'); +// const lightCodeTheme = require('prism-react-renderer/themes/dracula'); +const darkCodeTheme = require('prism-react-renderer/themes/vsDark'); const path = require('path'); @@ -206,7 +207,7 @@ const config = { prism: { theme: lightCodeTheme, darkTheme: darkCodeTheme, - additionalLanguages: ['java', 'markdown', 'latex'], + additionalLanguages: ['markdown', 'latex'], magicComments: [ { className: 'theme-code-block-highlighted-line', diff --git a/packages/docs/sandboxes/simple-gridview/package.json b/packages/docs/sandboxes/simple-gridview/package.json new file mode 100644 index 000000000..bc28bc3a3 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/package.json @@ -0,0 +1,32 @@ +{ + "name": "simple-gridview", + "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" + ] +} diff --git a/packages/docs/sandboxes/simple-gridview/public/index.html b/packages/docs/sandboxes/simple-gridview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/simple-gridview/src/app.tsx b/packages/docs/sandboxes/simple-gridview/src/app.tsx new file mode 100644 index 000000000..5b78eb186 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/src/app.tsx @@ -0,0 +1,145 @@ +import { + GridviewApi, + GridviewReact, + GridviewReadyEvent, + IGridviewPanelProps, + LayoutPriority, + Orientation, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IGridviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +export const App: React.FC = (props: { theme?: string }) => { + const [api, setApi] = React.useState(); + + const onReady = (event: GridviewReadyEvent) => { + const panel1 = event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + priority: LayoutPriority.High, + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + }); + + event.api.addPanel({ + id: 'panel_4', + component: 'default', + params: { + title: 'Panel 4', + }, + + position: { referencePanel: 'panel_2', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + event.api.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'below' }, + minimumWidth: 10, + }); + + event.api.addPanel({ + id: 'panel_7', + component: 'default', + params: { + title: 'Panel 7', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + minimumWidth: 10, + }); + + event.api.addPanel({ + id: 'panel_8', + component: 'default', + params: { + title: 'Panel 8', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + minimumWidth: 10, + }); + + setApi(event.api); + }; + + return ( +
+
+ +
+
+ +
+
+ ); +}; + +export default App; diff --git a/packages/docs/sandboxes/simple-gridview/src/index.tsx b/packages/docs/sandboxes/simple-gridview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/src/index.tsx @@ -0,0 +1,20 @@ +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( + +
+ +
+ + ); +} diff --git a/packages/docs/sandboxes/simple-gridview/src/styles.css b/packages/docs/sandboxes/simple-gridview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/src/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0px; + color: white; + font-family: sans-serif; + text-align: center; +} + +#root { + height: 100vh; + width: 100vw; +} + +.app { + height: 100%; + +} diff --git a/packages/docs/sandboxes/simple-gridview/tsconfig.json b/packages/docs/sandboxes/simple-gridview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/simple-gridview/tsconfig.json @@ -0,0 +1,18 @@ +{ + "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 + } +} diff --git a/packages/docs/src/components/ui/reference/docRef.scss b/packages/docs/src/components/ui/reference/docRef.scss new file mode 100644 index 000000000..1392042b9 --- /dev/null +++ b/packages/docs/src/components/ui/reference/docRef.scss @@ -0,0 +1,40 @@ +.doc-ref-table { + width: 100%; + border-collapse: collapse; + display: table; + table-layout: fixed; + + thead { + text-align: left; + background-color: inherit; + + tr { + border: none; + } + } + + overflow: hidden; + + th, + td { + border: none; + padding: none; + text-align: left; + } + + tr { + background-color: inherit !important; + } + + .theme-code-block { + margin-bottom: unset; + + pre { + box-sizing: border-box; + overflow: auto !important; + code { + padding: 8px; + } + } + } +} diff --git a/packages/docs/src/components/ui/reference/docRef.tsx b/packages/docs/src/components/ui/reference/docRef.tsx new file mode 100644 index 000000000..d7e25b1de --- /dev/null +++ b/packages/docs/src/components/ui/reference/docRef.tsx @@ -0,0 +1,109 @@ +import * as React from 'react'; +import CodeBlock from '@theme/CodeBlock'; +import './docRef.scss'; + +export interface DocRefProps { + declaration: string; +} + +import docsJson from '../../../generated/api.output.json'; + +type DocsContent = { kind: string; text: string; tag?: string }; +type DocsJson = { + [index: string]: Array<{ + name: string; + signature: string; + comment?: { + summary?: DocsContent[]; + blockTags?: Array<{ tag: string; content: DocsContent }>; + }; + type: string; + }>; +}; + +export const Markdown = (props: { children: string }) => { + return {props.children}; +}; + +export const DocRef = (props: DocRefProps) => { + const docs = React.useMemo( + () => (docsJson as DocsJson)[props.declaration], + [props.declaration] + ); + + if (!docs) { + return null; + } + + return ( +
+ + + {docs.map((doc) => { + return ( + + + + + ); + })} + +
+
+
+ {doc.name} +
+
+ {/* + {'Type'} + + + {doc.type} + */} +
+
+ 		+ {/*
{'-'}
*/} +
+ + {doc.signature} + +
+
+
+ ); +}; diff --git a/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx b/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx new file mode 100644 index 000000000..a281053c7 --- /dev/null +++ b/packages/docs/src/components/ui/reference/dockviewApi.reference.tsx @@ -0,0 +1,171 @@ +import { ReactPropDocsTable } from '../referenceTable'; +import * as React from 'react'; + +export default () => ( + ', + }, + { + property: 'onDidAddGroup', + type: 'Event', + }, + { + property: 'onDidRemoveGroup', + type: 'Event', + }, + { + property: 'onDidActivePanelChange', + type: 'Event', + }, + { + property: 'onDidAddPanel', + type: 'Event', + }, + { + property: 'onDidRemovePanel', + type: 'Event', + }, + { + property: 'onDidLayoutFromJSON', + type: 'Event', + }, + { + property: 'onDidLayoutChange', + type: 'Event', + }, + { + property: 'onDidDrop', + type: 'Event', + }, + { + property: 'onWillDragGroup', + type: 'Event', + }, + { + property: 'onWillDragPanel', + type: 'Event', + }, + { + 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', + }, + ]} + /> +); diff --git a/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx b/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx new file mode 100644 index 000000000..786171dcf --- /dev/null +++ b/packages/docs/src/components/ui/reference/dockviewPanelApi.reference.tsx @@ -0,0 +1,103 @@ +import { ReactPropDocsTable } from '../referenceTable'; +import * as React from 'react'; + +export default () => ( + ', + }, + { + property: 'onDidGroupChange', + type: 'Event', + }, + { + 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', + }, + { + property: 'onDidFocusChange', + type: 'Event', + }, + { + property: 'onDidVisibilityChange', + type: 'Event', + }, + { + property: 'onDidActiveChange', + type: 'Event', + }, + { + 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', + }, + ]} + /> +); diff --git a/packages/docs/src/components/ui/referenceTable.scss b/packages/docs/src/components/ui/referenceTable.scss new file mode 100644 index 000000000..dc3af03a7 --- /dev/null +++ b/packages/docs/src/components/ui/referenceTable.scss @@ -0,0 +1,64 @@ +.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); +} diff --git a/packages/docs/src/components/ui/referenceTable.tsx b/packages/docs/src/components/ui/referenceTable.tsx index 1423122cc..8ee4b31b8 100644 --- a/packages/docs/src/components/ui/referenceTable.tsx +++ b/packages/docs/src/components/ui/referenceTable.tsx @@ -1,42 +1,196 @@ import * as React from 'react'; +import './referenceTable.scss'; export interface ReferenceProps { - props: { - prop: string; + title?: string; + url?: string; + data: { + property: string; + propertyDescription?: string; default?: string; type: string; + typeDescription?: string; }[]; } -export const ReferenceTable = (props: ReferenceProps) => { +import * as Popover from '@radix-ui/react-popover'; +import { InfoCircledIcon } from '@radix-ui/react-icons'; + +export const ReactPropDocsTable = (props: ReferenceProps) => { return ( - - - - - - - - - - {props.props.map((property) => { - return ( - - - - - - ); - })} - -
PropertyTypeDefault
- {property.prop} - - {property.type} - - {property.default !== undefined && ( - {property.default} - )} -
+
+
+ {props.title && {props.title}} + {props.url && ( + + )} +
+ + + + + + + + + + {props.data.map((item) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ + {item.property} + {item.propertyDescription && ( + + + + + + +
+ { + item.propertyDescription + } +
+ + + + )} + + 		+ + {item.type} + {item.typeDescription && ( + + + + + + +
+ + { + item.typeDescription + } + +
+ + + + )} + + 		+ {item.default ? ( + {item.default} + ) : ( + {'-'} + )} +
+
+ ); +}; + +export const ClassDocsTable = (props: ReferenceProps) => { + return ( +
+
{props.title && {props.title}}
+ + + + + + + + + + {props.data.map((item) => { + return ( + + + + + + ); + })} + +
PropertyTypeDefault
+ + {item.property} + {item.propertyDescription && ( + + + + + + +
+ { + item.propertyDescription + } +
+ + + + )} + + 		+ + {item.type} + {item.typeDescription && ( + + + + + + +
+ + { + item.typeDescription + } + +
+ + + + )} + + 		+ {item.default ? ( + {item.default} + ) : ( + {'-'} + )} +
+
); }; diff --git a/packages/docs/src/generated/api.output.json b/packages/docs/src/generated/api.output.json new file mode 100644 index 000000000..e922f24ac --- /dev/null +++ b/packages/docs/src/generated/api.output.json @@ -0,0 +1,1278 @@ +{ + "DockviewApi": [ + { + "name": "activeGroup", + "signature": "DockviewGroupPanel | undefined", + "type": "accessor" + }, + { + "name": "activePanel", + "signature": "IDockviewPanel | undefined", + "type": "accessor" + }, + { + "name": "groups", + "signature": "DockviewGroupPanel[]", + "type": "accessor" + }, + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "id", + "signature": "string", + "type": "accessor" + }, + { + "name": "maximumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidActiveGroupChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidActivePanelChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidAddGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidAddPanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidDrop", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemovePanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onWillDragGroup", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onWillDragPanel", + "signature": "Event", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IDockviewPanel[]", + "type": "accessor" + }, + { + "name": "size", + "signature": "number", + "type": "accessor" + }, + { + "name": "totalPanels", + "signature": "number", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addFloatingGroup", + "signature": "(item: IDockviewPanel | DockviewGroupPanel, coord?: { x: number, y: number }): void", + "type": "method" + }, + { + "name": "addGroup", + "signature": "(options?: AddGroupOptions): DockviewGroupPanel", + "type": "method" + }, + { + "name": "addPanel", + "signature": "(options: AddPanelOptions): IDockviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "closeAllGroups", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedDockview): void", + "type": "method" + }, + { + "name": "getGroup", + "signature": "(id: string): DockviewGroupPanel | undefined", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IDockviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number, force: boolean = false): void", + "type": "method" + }, + { + "name": "moveToNext", + "signature": "(options?: MovementOptions): void", + "type": "method" + }, + { + "name": "moveToPrevious", + "signature": "(options?: MovementOptions): void", + "type": "method" + }, + { + "name": "removeGroup", + "signature": "(group: IDockviewGroupPanel): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IDockviewPanel): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedDockview", + "type": "method" + } + ], + "GridviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumHeight", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumWidth", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidActivePanelChange", + "signature": "Event | undefined>", + "type": "accessor" + }, + { + "name": "onDidAddPanel", + "signature": "Event>", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemovePanel", + "signature": "Event>", + "type": "accessor" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IGridviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddComponentOptions): IGridviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedGridviewComponent): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IGridviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number, force: boolean = false): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(panel: IGridviewPanel, options: { direction: Direction, reference: string, size: number }): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IGridviewPanel, sizing?: Sizing): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedGridviewComponent", + "type": "method" + } + ], + "PaneviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidAddView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidDrop", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "panels", + "signature": "IPaneviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddPaneviewComponentOptions): IPaneviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedPaneview): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): IPaneviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(from: number, to: number): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: IPaneviewPanel): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedPaneview", + "type": "method" + } + ], + "SplitviewApi": [ + { + "name": "height", + "signature": "number", + "type": "accessor" + }, + { + "name": "length", + "signature": "number", + "type": "accessor" + }, + { + "name": "maximumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "minimumSize", + "signature": "number", + "type": "accessor" + }, + { + "name": "onDidAddView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutChange", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidLayoutFromJSON", + "signature": "Event", + "type": "accessor" + }, + { + "name": "onDidRemoveView", + "signature": "Event", + "type": "accessor" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "accessor" + }, + { + "name": "panels", + "signature": "ISplitviewPanel[]", + "type": "accessor" + }, + { + "name": "width", + "signature": "number", + "type": "accessor" + }, + { + "name": "addPanel", + "signature": "(options: AddSplitviewComponentOptions): ISplitviewPanel", + "type": "method" + }, + { + "name": "clear", + "signature": "(): void", + "type": "method" + }, + { + "name": "focus", + "signature": "(): void", + "type": "method" + }, + { + "name": "fromJSON", + "signature": "(data: SerializedSplitview): void", + "type": "method" + }, + { + "name": "getPanel", + "signature": "(id: string): ISplitviewPanel | undefined", + "type": "method" + }, + { + "name": "layout", + "signature": "(width: number, height: number): void", + "type": "method" + }, + { + "name": "movePanel", + "signature": "(from: number, to: number): void", + "type": "method" + }, + { + "name": "removePanel", + "signature": "(panel: ISplitviewPanel, sizing?: Sizing): void", + "type": "method" + }, + { + "name": "toJSON", + "signature": "(): SerializedSplitview", + "type": "method" + }, + { + "name": "updateOptions", + "signature": "(options: SplitviewComponentUpdateOptions): void", + "type": "method" + } + ], + "DockviewPanelApi": [ + { + "name": "group", + "signature": "DockviewGroupPanel", + "type": "property" + }, + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isGroupActive", + "signature": "boolean", + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidActiveGroupChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidGroupChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "title", + "signature": "string | undefined", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "close", + "signature": "(): void", + "type": "method" + }, + { + "name": "moveTo", + "signature": "(options: { group: DockviewGroupPanel, index: number, position: Position }): void", + "type": "method" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: SizeEvent): void", + "type": "method" + }, + { + "name": "setTitle", + "signature": "(title: string): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "GridviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: GridConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: SizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "PaneviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isExpanded", + "signature": "boolean", + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidExpansionChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onMouseEnter", + "signature": "Event", + "type": "property" + }, + { + "name": "onMouseLeave", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: PanelConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setExpanded", + "signature": "(isExpanded: boolean): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: PanelSizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "SplitviewPanelApi": [ + { + "name": "height", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel height in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "id", + "signature": "string", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The id of the panel that would have been assigned when the panel was created" + } + ] + }, + "type": "property" + }, + { + "name": "isActive", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is the actively selected panel" + } + ] + }, + "type": "property" + }, + { + "name": "isFocused", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel holds the current focus" + } + ] + }, + "type": "property" + }, + { + "name": "isVisible", + "signature": "boolean", + "comment": { + "summary": [ + { + "kind": "text", + "text": "Whether the panel is visible" + } + ] + }, + "type": "property" + }, + { + "name": "onDidActiveChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidConstraintsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidDimensionsChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidFocusChange", + "signature": "Event", + "type": "property" + }, + { + "name": "onDidVisibilityChange", + "signature": "Event", + "type": "property" + }, + { + "name": "width", + "signature": "number", + "comment": { + "summary": [ + { + "kind": "text", + "text": "The panel width in pixels" + } + ] + }, + "type": "property" + }, + { + "name": "setActive", + "signature": "(): void", + "type": "method" + }, + { + "name": "setConstraints", + "signature": "(value: PanelConstraintChangeEvent2): void", + "type": "method" + }, + { + "name": "setSize", + "signature": "(event: PanelSizeEvent): void", + "type": "method" + }, + { + "name": "setVisible", + "signature": "(isVisible: boolean): void", + "type": "method" + }, + { + "name": "updateParameters", + "signature": "(parameters: Parameters): void", + "type": "method" + } + ], + "IDockviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "defaultTabComponent", + "signature": "FunctionComponent>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "disableFloatingGroups", + "signature": "boolean", + "type": "property" + }, + { + "name": "floatingGroupBounds", + "signature": "{ minimumHeightWithinViewport: number, minimumWidthWithinViewport: number } | 'boundedWithinViewport'", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "leftHeaderActionsComponent", + "signature": "FunctionComponent", + "type": "property" + }, + { + "name": "onDidDrop", + "signature": "(event: DockviewDropEvent): void", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: DockviewReadyEvent): void", + "type": "property" + }, + { + "name": "rightHeaderActionsComponent", + "signature": "FunctionComponent", + "type": "property" + }, + { + "name": "showDndOverlay", + "signature": "(event: DockviewDndOverlayEvent): boolean", + "type": "property" + }, + { + "name": "singleTabMode", + "signature": "'fullwidth' | 'default'", + "type": "property" + }, + { + "name": "tabComponents", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "watermarkComponent", + "signature": "FunctionComponent", + "type": "property" + } + ], + "IGridviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: GridviewReadyEvent): void", + "type": "property" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "property" + }, + { + "name": "proportionalLayout", + "signature": "boolean", + "type": "property" + } + ], + "IPaneviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "disableDnd", + "signature": "boolean", + "type": "property" + }, + { + "name": "headerComponents", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: PaneviewReadyEvent): void", + "type": "property" + }, + { + "name": "showDndOverlay", + "signature": "(event: PaneviewDndOverlayEvent): boolean", + "type": "property" + }, + { + "name": "onDidDrop", + "signature": "(event: PaneviewDropEvent): void", + "type": "method" + } + ], + "ISplitviewReactProps": [ + { + "name": "className", + "signature": "string", + "type": "property" + }, + { + "name": "components", + "signature": "PanelCollection>", + "type": "property" + }, + { + "name": "disableAutoResizing", + "signature": "boolean", + "type": "property" + }, + { + "name": "hideBorders", + "signature": "boolean", + "type": "property" + }, + { + "name": "onReady", + "signature": "(event: SplitviewReadyEvent): void", + "type": "property" + }, + { + "name": "orientation", + "signature": "Orientation", + "type": "property" + }, + { + "name": "proportionalLayout", + "signature": "boolean", + "type": "property" + } + ] +} \ No newline at end of file diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 0053139cf..e56109e0f 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -3,35 +3,10 @@ import clsx from 'clsx'; import Layout from '@theme/Layout'; import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import styles from './index.module.css'; -import HomepageFeatures from '@site/src/components/HomepageFeatures'; import useBaseUrl from '@docusaurus/useBaseUrl'; -import DockviewDemo from '@site/sandboxes/demo-dockview/src/app'; -import DockviewDemo2 from '@site/sandboxes/dockview-app/src/app'; -import { MultiFrameworkContainer } from '../components/ui/container'; -import { BrowserHeader } from '../components/ui/browserHeader'; -import './index.scss'; import { Introduction } from '../components/HomepageFeatures/introduction'; - -function HomepageHeader() { - const { siteConfig } = useDocusaurusContext(); - return ( -
-
-

{siteConfig.title}

-

{siteConfig.tagline}

-
- - Get Started - -
-
-
- ); -} +import styles from './index.module.css'; +import './index.scss'; function HomepageHeader2() { const { siteConfig } = useDocusaurusContext(); @@ -74,6 +49,7 @@ export default function Home(): JSX.Element { description={`${siteConfig.description}`} > +
diff --git a/packages/docs/tsconfig.json b/packages/docs/tsconfig.json index 6f4756980..6c9b457cc 100644 --- a/packages/docs/tsconfig.json +++ b/packages/docs/tsconfig.json @@ -1,7 +1,8 @@ { - // This file is not used in compilation. It is here just for a nice editor experience. - "extends": "@tsconfig/docusaurus/tsconfig.json", - "compilerOptions": { - "baseUrl": "." - } + // This file is not used in compilation. It is here just for a nice editor experience. + "extends": "@tsconfig/docusaurus/tsconfig.json", + "compilerOptions": { + "baseUrl": ".", + "resolveJsonModule": true + } } diff --git a/scripts/docs.mjs b/scripts/docs.mjs new file mode 100644 index 000000000..bf940e8ab --- /dev/null +++ b/scripts/docs.mjs @@ -0,0 +1,399 @@ +import { execSync } from 'child_process'; +import { readFileSync, existsSync, writeFileSync } from 'fs'; +import { ReflectionKind } from 'typedoc'; + +/** + * #region inputs + */ + +// typedoc output +const TYPEDOC_OUTPUT_FILE = './generated/typedoc.output.json'; +// doc output +const API_OUTPUT_FILE = './packages/docs/src/generated/api.output.json'; +// declarations to document (e.g. class names, interface names) +const DOCUMENT_LIST = [ + // dockview + 'DockviewApi', + 'IDockviewReactProps', + 'DockviewPanelApi', + // splitview + 'SplitviewApi', + 'ISplitviewReactProps', + 'SplitviewPanelApi', + // gridview + 'GridviewApi', + 'IGridviewReactProps', + 'GridviewPanelApi', + // paneview + 'PaneviewApi', + 'IPaneviewReactProps', + 'PaneviewPanelApi', +]; + +const EXPORT_REMAPPING = { + Event: 'DockviewEvent', + Emitter: 'DockviewEmitter', + IDisposable: 'IDockviewDisposable', + MutableDisposable: 'DockviewMutableDisposable', + CompositeDisposable: 'DockviewCompositeDisposable', +}; + +const SKIP_DOC = ['Event']; + +/** + * #region generating Typedoc output + */ + +console.log('running docs'); + +if (!existsSync(TYPEDOC_OUTPUT_FILE)) { + execSync( + `typedoc --json ${TYPEDOC_OUTPUT_FILE}`, + (error, stdout, stderr) => { + console.log('stdout: ' + stdout); + console.log('stderr: ' + stderr); + if (error !== null) { + console.log('exec error: ' + error); + } + } + ); +} + +const content = JSON.parse(readFileSync(TYPEDOC_OUTPUT_FILE)); + +const dockviewCore = content.children.find( + (child) => child.name === 'dockview-core' +); +const dockview = content.children.find((child) => child.name === 'dockview'); + +const declarations = [dockviewCore, dockview] + .flatMap((item) => + item.children.filter((child) => DOCUMENT_LIST.includes(child.name)) + ) + .filter(Boolean); +/** + * #region parsing of TypeDoc output + */ + +function findType(type, packageName) { + if (EXPORT_REMAPPING[type]) { + type = EXPORT_REMAPPING[type]; + } + + const packageObject = content.children.find( + (child) => child.name === packageName + ); + + const typeObject = packageObject.children.find( + (child) => child.name === type + ); + + return getFunction(typeObject, [], { includeMetadata: false }); +} + +// minimal parsing logic, add cases as required +function getType(type, metadata, options) { + switch (type.type) { + case 'union': + return { + signature: [...type.types] + .reverse() + .map((t) => getType(t, metadata, options).signature) + .join(' | '), + }; + case 'intrinsic': + return { signature: type.name }; + case 'reference': + if ( + options.includeMetadata && + type.package && + typeof type.target !== 'object' + ) { + metadata.push({ name: type.name, package: type.package }); + } + + if (Array.isArray(type.typeArguments)) { + return { + signature: `${type.name}<${type.typeArguments + .map((typeArgument) => { + return getType(typeArgument, metadata, options) + .signature; + }) + .join(', ')}>`, + }; + } + + return { signature: `${type.name}` }; + case 'array': + return { + signature: `${ + getType(type.elementType, metadata, options).signature + }[]`, + }; + case 'reflection': + if (type.declaration.children) { + return { + signature: `{ ${type.declaration.children + .map( + (child) => + `${child.name}: ${ + getType(child.type, metadata, options) + .signature + }` + ) + .join(', ')} }`, + }; + } + + if (type.declaration.signatures) { + if (type.declaration.signatures.length > 1) { + // code this case if it ever happens + throw new Error(`unhandled signatures.length > 1`); + } + + if (type.declaration.signatures[0].parameters) { + let _parameters = ''; + const { parameters } = type.declaration.signatures[0]; + + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = + parameters[i]; + + const isOptional = flags.isOptional === true; + + const { signature } = getType(type, metadata, options); + + _parameters += `${name}${ + isOptional ? '?' : '' + }: ${signature}${ + defaultValue !== undefined + ? ` = ${defaultValue}` + : '' + }`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + + return { + signature: `(${_parameters}): ${ + getType( + type.declaration.signatures[0].type, + metadata, + options + ).signature + }`, + }; + } + + return { + signature: getType( + type.declaration.signatures[0].type, + metadata, + options + ).signature, + }; + } + + if (type.declaration.indexSignature) { + let _parameters = ''; + const { parameters } = type.declaration.indexSignature; + + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = parameters[i]; + + const isOptional = flags.isOptional === true; + + _parameters += `${name}${isOptional ? '?' : ''}: ${ + getType(type, metadata, options).signature + }${defaultValue !== undefined ? ` = ${defaultValue}` : ''}`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + + return { + signature: `{ [${parameters}]: ${getType( + type.declaration.indexSignature.type, + metadata, + options + )}}`, + }; + } + + throw new Error('unhandled case'); + case 'literal': + return { signature: `'${type.value}'` }; + default: + throw new Error(`unhandled type ${type.type}`); + } +} + +// minimal parsing logic, add cases as required +function getFunction( + method, + metadata = [], + options = { includeMetadata: true } +) { + switch (method.kind) { + case ReflectionKind.Accessor: { + const { getSignature, name } = method; + const { type, comment } = getSignature; + const metadata = []; + const { signature } = getType(type, metadata, options); + return { + name, + signature, + comment, + type: 'accessor', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Property: { + const { type, name, comment } = method; + const metadata = []; + const { signature } = getType(type, metadata, options); + return { + name, + signature, + comment, + type: 'property', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Interface: { + const { type, name, comment, children } = method; + + let signature = `interface ${name} {`; + + if (children) { + for (const child of children) { + signature += `\n\t${ + child.flags.isReadonly ? 'readonly ' : '' + }${child.name}: ${ + getFunction(child, metadata, options).signature + };`; + } + } + signature += `\n}`; + + return { + name, + signature, + comment, + type: 'interface', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + case ReflectionKind.Method: { + const { signatures, comment } = method; + if (signatures.length > 1) { + throw new Error(`signatures.length > 1`); + } + const { name, parameters, type, typeParameter } = signatures[0]; + + let _typeParameter = ''; + + if (Array.isArray(typeParameter)) { + for (let i = 0; i < typeParameter.length; i++) { + const item = typeParameter[i]; + + const { signature } = getType(item.type, metadata, options); + + _typeParameter += `<${item.name}`; + if (item.type) { + _typeParameter += ` extends ${signature}`; + } + if (item.default) { + _typeParameter += ` = ${ + getType(item.default, metadata, options).signature + }`; + } + _typeParameter += `>`; + + if (i !== typeParameter.length - 1) { + _typeParameter += ', '; + } + } + } + + let _parameters = ''; + + if (Array.isArray(parameters)) { + for (let i = 0; i < parameters.length; i++) { + const { type, name, flags, defaultValue } = parameters[i]; + + const isOptional = flags.isOptional === true; + + const { signature } = getType(type, metadata, options); + + _parameters += `${name}${ + isOptional ? '?' : '' + }: ${signature}${ + defaultValue !== undefined ? ` = ${defaultValue}` : '' + }`; + + if (i !== parameters.length - 1) { + _parameters += ', '; + } + } + } + + return { + name, + comment, + signature: `${_typeParameter}(${_parameters}): ${ + getType(type, metadata, options).signature + }`, + type: 'method', + metadata: metadata.length > 0 ? metadata : undefined, + }; + } + } +} + +function createDocument(declarations) { + const documentation = {}; + + for (const declaration of declarations) { + const { children, name } = declaration; + + documentation[name] = []; + + for (const child of children) { + try { + const { flags } = child; + + if (flags.isPrivate) { + continue; + } + + const documentationPart = getFunction(child, [], { + includeMetadata: false, + }); + + if (documentationPart) { + if (documentationPart.metadata) { + documentationPart.metadata = documentationPart.metadata + .filter(({ name }) => !SKIP_DOC.includes(name)) + .map((item) => { + return findType(item.name, item.package); + }); + } + + documentation[name].push(documentationPart); + } + } catch (err) { + console.error('error', err, child); + process.exit(-1); + } + } + } + + return documentation; +} + +const documentation = createDocument(declarations); +writeFileSync(API_OUTPUT_FILE, JSON.stringify(documentation, null, 4));