diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx index 79f0e7e2f..149d9df5c 100644 --- a/packages/docs/docs/components/dockview.mdx +++ b/packages/docs/docs/components/dockview.mdx @@ -23,6 +23,7 @@ import DockviewSetTitle from '@site/sandboxes/updatetitle-dockview/src/app'; import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app'; import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app'; // import { attach as attachDockviewVanilla } from '@site/sandboxes/vanilla-dockview/src/app'; +import DockviewResizeContainer from '@site/sandboxes/resizeContainer-dockview/src/app'; # Dockview @@ -213,6 +214,8 @@ If you refresh the page you should notice your layout is loaded as you left it. ## Resizing +### Panel Resizing + Each Dockview contains of a number of groups and each group has a number of panels. Logically a user may want to resize a panel, but this translates to resizing the group which contains that panel. @@ -240,6 +243,14 @@ You can see an example invoking both approaches below. +### Container Resizing + +The component will automatically resize to it's container. + + + + + ## Watermark When the dockview is empty you may want to display some fallback content, this is refered to as the `watermark`. diff --git a/packages/docs/sandboxes/constraints-dockview/public/index.html b/packages/docs/sandboxes/constraints-dockview/public/index.html index 67c682336..1f8a52426 100644 --- a/packages/docs/sandboxes/constraints-dockview/public/index.html +++ b/packages/docs/sandboxes/constraints-dockview/public/index.html @@ -11,6 +11,7 @@ --> + + + + + + + + + + + + + + + + + + + React App + + + + +
+ + + + diff --git a/packages/docs/sandboxes/resizecontainer-dockview/src/app.tsx b/packages/docs/sandboxes/resizecontainer-dockview/src/app.tsx new file mode 100644 index 000000000..e81639077 --- /dev/null +++ b/packages/docs/sandboxes/resizecontainer-dockview/src/app.tsx @@ -0,0 +1,119 @@ +import { + DockviewReact, + DockviewReadyEvent, + IDockviewPanelProps, +} from 'dockview'; +import * as React from 'react'; + +const components = { + default: (props: IDockviewPanelProps<{ title: string }>) => { + return ( +
+ {props.params.title} +
+ ); + }, +}; + +export const App: React.FC = () => { + const onReady = (event: DockviewReadyEvent) => { + const panel = event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { + title: 'Panel 1', + }, + }); + + panel.group.locked = true; + panel.group.header.hidden = true; + + event.api.addPanel({ + id: 'panel_2', + component: 'default', + params: { + title: 'Panel 2', + }, + }); + + 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_1', direction: 'right' }, + }); + + const panel5 = event.api.addPanel({ + id: 'panel_5', + component: 'default', + params: { + title: 'Panel 5', + }, + position: { referencePanel: 'panel_3', direction: 'right' }, + }); + + // panel5.group!.model.header.hidden = true; + // panel5.group!.model.locked = true; + + event.api.addPanel({ + id: 'panel_6', + component: 'default', + params: { + title: 'Panel 6', + }, + position: { referencePanel: 'panel_5', direction: 'below' }, + }); + + event.api.addPanel({ + id: 'panel_7', + component: 'default', + params: { + title: 'Panel 7', + }, + position: { referencePanel: 'panel_6', direction: 'right' }, + }); + }; + + return ( + + ); +}; + +const Container = () => { + const [value, setValue] = React.useState('50'); + + return ( +
+ setValue(event.target.value)} + type="range" + min="1" + max="100" + value={value} + /> +
+ +
+
+ ); + + return ; +}; + +export default Container; diff --git a/packages/docs/sandboxes/resizecontainer-dockview/src/index.tsx b/packages/docs/sandboxes/resizecontainer-dockview/src/index.tsx new file mode 100644 index 000000000..2fe1be232 --- /dev/null +++ b/packages/docs/sandboxes/resizecontainer-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/resizecontainer-dockview/src/styles.css b/packages/docs/sandboxes/resizecontainer-dockview/src/styles.css new file mode 100644 index 000000000..92b6a1b36 --- /dev/null +++ b/packages/docs/sandboxes/resizecontainer-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/resizecontainer-dockview/tsconfig.json b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json new file mode 100644 index 000000000..6e13e47b5 --- /dev/null +++ b/packages/docs/sandboxes/resizecontainer-dockview/tsconfig.json @@ -0,0 +1,20 @@ +{ + "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, + "suppressImplicitAnyIndexErrors": true, + "noUnusedLocals": true + } +} diff --git a/packages/docs/sandboxes/simple-dockview/public/index.html b/packages/docs/sandboxes/simple-dockview/public/index.html index 67c682336..1f8a52426 100644 --- a/packages/docs/sandboxes/simple-dockview/public/index.html +++ b/packages/docs/sandboxes/simple-dockview/public/index.html @@ -11,6 +11,7 @@ --> + + + +