Merge pull request #351 from mathuo/350-provide-examples-of-complex-scenarios

chore: provide additional examples

.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/keyboard-dockview",

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]);
+    });
 });

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',
+    Low = 'low', // view is offered space last
-    High = 'high',
+    High = 'high', // view is offered space first
-    Normal = 'normal',
+    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(

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 DockviewKeyboard from '@site/sandboxes/keyboard-dockview/src/app';
 
 import { attach as attachDockviewVanilla } from '@site/sandboxes/javascript/vanilla-dockview/src/app';
@@ -911,6 +912,14 @@ Keyboard shortcuts
     react={DockviewKeyboard}
 />
 
+## Application with sidebars
+
+<MultiFrameworkContainer
+    height={600}
+    sandboxId="ide-example"
+    react={IDEExample}
+/>
+
 ### Nested Dockviews
 
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.

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"
+  ]
+}

packages/docs/sandboxes/ide-example/public/index.html

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

packages/docs/sandboxes/ide-example/src/app.tsx

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

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(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}

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%;
+
+}

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
+    }
+}