From 4d1952387c3845a6e214983190f2798673416b7a Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 19 Sep 2023 20:59:23 +0100 Subject: [PATCH 1/5] chore: sandbox paneview examples --- .codesandbox/ci.json | 1 + packages/docs/docs/components/paneview.mdx | 14 +-- .../sandboxes/simple-paneview/package.json | 32 ++++++ .../simple-paneview/public/index.html | 44 ++++++++ .../sandboxes/simple-paneview/src/app.tsx | 104 ++++++++++++++++++ .../sandboxes/simple-paneview/src/index.tsx | 20 ++++ .../sandboxes/simple-paneview/src/styles.css | 16 +++ .../sandboxes/simple-paneview/tsconfig.json | 18 +++ 8 files changed, 238 insertions(+), 11 deletions(-) create mode 100644 packages/docs/sandboxes/simple-paneview/package.json create mode 100644 packages/docs/sandboxes/simple-paneview/public/index.html create mode 100644 packages/docs/sandboxes/simple-paneview/src/app.tsx create mode 100644 packages/docs/sandboxes/simple-paneview/src/index.tsx create mode 100644 packages/docs/sandboxes/simple-paneview/src/styles.css create mode 100644 packages/docs/sandboxes/simple-paneview/tsconfig.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 986267fe3..10a0ad555 100644 --- a/.codesandbox/ci.json +++ b/.codesandbox/ci.json @@ -23,6 +23,7 @@ "/packages/docs/sandboxes/resize-dockview", "/packages/docs/sandboxes/resizecontainer-dockview", "/packages/docs/sandboxes/simple-dockview", + "/packages/docs/sandboxes/simple-paneview", "/packages/docs/sandboxes/tabheight-dockview", "/packages/docs/sandboxes/updatetitle-dockview", "/packages/docs/sandboxes/watermark-dockview", diff --git a/packages/docs/docs/components/paneview.mdx b/packages/docs/docs/components/paneview.mdx index c33fe43aa..4b7c9cc8b 100644 --- a/packages/docs/docs/components/paneview.mdx +++ b/packages/docs/docs/components/paneview.mdx @@ -2,7 +2,8 @@ description: Paneview Documentation --- -import { SimplePaneview } from '@site/src/components/simplePaneview'; +import { MultiFrameworkContainer } from '@site/src/components/ui/container'; +import SimplePaneview from '@site/sandboxes/simple-paneview/src/app'; import { CustomHeaderPaneview } from '@site/src/components/paneview/customHeader'; import { DragAndDropPaneview } from '@site/src/components/paneview/dragAndDrop'; import { SideBySidePaneview } from '@site/src/components/paneview/sideBySide'; @@ -23,16 +24,7 @@ Paneview panels can be re-ordered by dragging and dropping the panel headers. # Introduction -
- -
+ ```tsx title="Simple Paneview example" import { diff --git a/packages/docs/sandboxes/simple-paneview/package.json b/packages/docs/sandboxes/simple-paneview/package.json new file mode 100644 index 000000000..a6d697518 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/package.json @@ -0,0 +1,32 @@ +{ + "name": "simple-paneview", + "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-paneview/public/index.html b/packages/docs/sandboxes/simple-paneview/public/index.html new file mode 100644 index 000000000..1f8a52426 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/public/index.html @@ -0,0 +1,44 @@ + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/simple-paneview/src/app.tsx b/packages/docs/sandboxes/simple-paneview/src/app.tsx new file mode 100644 index 000000000..5f982595e --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/src/app.tsx @@ -0,0 +1,104 @@ +import { + PaneviewReact, + PaneviewReadyEvent, + IPaneviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IPaneviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +const MyHeaderComponent = (props: IPaneviewPanelProps<{ title: string }>) => { + const [expanded, setExpanded] = React.useState( + props.api.isExpanded + ); + + React.useEffect(() => { + const disposable = props.api.onDidExpansionChange((event) => { + setExpanded(event.isExpanded); + }); + + return () => { + disposable.dispose(); + }; + }, []); + + const onClick = () => { + props.api.setExpanded(!expanded); + }; + + return ( +
+ + {props.params.title} +
+ ); +}; + +const headerComponents = { + myHeaderComponent: MyHeaderComponent, +}; + +export const App: React.FC = (props: { theme?: string }) => { + const onReady = (event: PaneviewReadyEvent) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + title: 'Panel 1', + }); + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + title: 'Panel 2', + }); + + event.api.addPanel({ + id: 'panel_3', + component: 'default', + params: { + title: 'Panel 3', + }, + title: 'Panel 3', + }); + }; + + return ( + + ); +}; + +export default App; diff --git a/packages/docs/sandboxes/simple-paneview/src/index.tsx b/packages/docs/sandboxes/simple-paneview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/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-paneview/src/styles.css b/packages/docs/sandboxes/simple-paneview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/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-paneview/tsconfig.json b/packages/docs/sandboxes/simple-paneview/tsconfig.json new file mode 100644 index 000000000..cdc4fb5f5 --- /dev/null +++ b/packages/docs/sandboxes/simple-paneview/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 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 2/5] 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 3/5] 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 4/5] 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 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 5/5] 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'} />