chore: docs

packages/docs/sandboxes/constraints-dockview/src/app.tsx

@@ -9,41 +9,16 @@ import {
 import * as React from 'react';
 
 const components = {
-    default: (props: IDockviewPanelProps<{ title: string }>) => {
+    default: (props: IDockviewPanelProps) => {
         const [contraints, setContraints] =
             React.useState<GridConstraintChangeEvent | null>(null);
 
         React.useEffect(() => {
-            props.api.group.api.setConstraints({
+            props.api.group.api.onDidConstraintsChange((event) => {
-                maximumHeight: 200,
+                setContraints(event);
-                maximumWidth: 200,
             });
         }, []);
 
-        React.useEffect(() => {
-            const disposable1 = new DockviewMutableDisposable();
-
-            const disposable = props.api.onDidGroupChange(() => {
-                disposable1.value = props.api.group.api.onDidConstraintsChange(
-                    (event) => {
-                        setContraints(event);
-                    }
-                );
-            });
-
-            setContraints({
-                maximumHeight: props.api.group.maximumHeight,
-                minimumHeight: props.api.group.minimumHeight,
-                maximumWidth: props.api.group.maximumWidth,
-                minimumWidth: props.api.group.minimumWidth,
-            });
-
-            return () => {
-                disposable1.dispose();
-                disposable.dispose();
-            };
-        }, []);
-
         return (
             <div
                 style={{
@@ -53,13 +28,64 @@ const components = {
                     color: 'white',
                 }}
             >
-                <span> {props.params.title}</span>
                 {contraints && (
-                    <div>
+                    <div style={{ fontSize: '13px' }}>
-                        <div>{`minHeight=${contraints.minimumHeight}`}</div>
+                        {typeof contraints.maximumHeight === 'number' && (
-                        <div>{`maxHeight=${contraints.maximumHeight}`}</div>
+                            <div
-                        <div>{`minWidth=${contraints.minimumWidth}`}</div>
+                                style={{
-                        <div>{`maxWidth=${contraints.maximumWidth}`}</div>
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Maximum Height: `}</span>
+                                <span>{`${contraints.maximumHeight}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.minimumHeight === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Minimum Height: `}</span>
+                                <span>{`${contraints.minimumHeight}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.maximumWidth === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Maximum Width: `}</span>
+                                <span>{`${contraints.maximumWidth}px`}</span>
+                            </div>
+                        )}
+                        {typeof contraints.minimumWidth === 'number' && (
+                            <div
+                                style={{
+                                    border: '1px solid grey',
+                                    margin: '2px',
+                                    padding: '1px',
+                                }}
+                            >
+                                <span
+                                    style={{ color: 'grey' }}
+                                >{`Minimum Width: `}</span>
+                                <span>{`${contraints.minimumWidth}px`}</span>
+                            </div>
+                        )}
                     </div>
                 )}
             </div>
@@ -71,19 +97,40 @@ const App = () => {
     const [api, setApi] = React.useState<DockviewApi>();
 
     const onReady = (event: DockviewReadyEvent) => {
-        const panel = event.api.addPanel({
+        const panel1 = event.api.addPanel({
             id: 'panel_1',
             component: 'default',
         });
 
-        event.api.addPanel({
+        const panel2 = event.api.addPanel({
             id: 'panel_2',
             component: 'default',
+            position: {
+                referencePanel: panel1,
+                direction: 'right',
+            },
         });
 
-        event.api.addPanel({
+        const panel3 = event.api.addPanel({
             id: 'panel_3',
             component: 'default',
+            position: {
+                referencePanel: panel2,
+                direction: 'right',
+            },
+        });
+
+        const panel4 = event.api.addPanel({
+            id: 'panel_4',
+            component: 'default',
+            position: {
+                direction: 'below',
+            },
+        });
+
+        panel2.api.group.api.setConstraints({
+            maximumWidth: 300,
+            maximumHeight: 300,
         });
     };
 

packages/docs/sandboxes/vanilla-dockview/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "vanilla-dockview",
+  "description": "",
+  "keywords": [
+    "dockview"
+  ],
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "dependencies": {
+    "dockview-core": "*"
+  },
+  "devDependencies": {
+    "typescript": "^4.9.5"
+  },
+  "scripts": {},
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}

packages/docs/sandboxes/vanilla-dockview/public/index.html

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

packages/docs/sandboxes/vanilla-dockview/src/app.ts

@@ -0,0 +1,88 @@
+import {
+    DockviewComponent,
+    IContentRenderer,
+    IGroupPanelInitParameters,
+} from 'dockview';
+
+class DefaultPanel implements IContentRenderer {
+    private _element: HTMLElement;
+
+    get element(): HTMLElement {
+        return this._element;
+    }
+
+    constructor() {
+        this._element = document.createElement('div');
+    }
+
+    init(params: IGroupPanelInitParameters): void {
+        //
+    }
+}
+
+export function attach(parent: HTMLElement): {
+    dispose: () => void;
+} {
+    const element = document.createElement('div');
+    element.className = 'dockview-theme-abyss';
+    parent.appendChild(element);
+
+    const dockview = new DockviewComponent(element, {
+        components: {
+            default: DefaultPanel,
+        },
+    });
+
+    const observer = new ResizeObserver((entires) => {
+        const firstEntry = entires[0];
+
+        const { width, height } = firstEntry.contentRect;
+        dockview.layout(width, height);
+    });
+
+    observer.observe(parent);
+
+    const panel1 = dockview.addPanel({
+        id: 'panel_1',
+        title: 'Panel 1',
+        component: 'default',
+    });
+
+    const panel2 = dockview.addPanel({
+        id: 'panel_2',
+        title: 'Panel 2',
+        component: 'default',
+        position: {
+            referencePanel: panel1,
+            direction: 'right',
+        },
+    });
+
+    const panel3 = dockview.addPanel({
+        id: 'panel_3',
+        title: 'Panel 3',
+        component: 'default',
+        position: {
+            referenceGroup: panel2.group,
+        },
+    });
+
+    const pane4 = dockview.addPanel({
+        id: 'panel_4',
+        title: 'Panel 4',
+        component: 'default',
+        position: {
+            direction: 'below',
+        },
+    });
+
+    return {
+        dispose: () => {
+            observer.unobserve(element);
+            observer.disconnect();
+
+            dockview.dispose();
+            element.remove();
+        },
+    };
+}

packages/docs/sandboxes/vanilla-dockview/src/index.ts

@@ -0,0 +1,10 @@
+import './styles.css';
+import 'dockview/dist/styles/dockview.css';
+
+import { attach } from './app';
+
+const rootElement = document.getElementById('root');
+
+if (rootElement) {
+    attach(rootElement);
+}

packages/docs/sandboxes/vanilla-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%;
+
+}

packages/docs/sandboxes/vanilla-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
+  }
+}