From 15393213200e9eb4b15d041803073bd0313a4bf5 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 13:21:32 +0100
Subject: [PATCH 01/19] test: add tests to existing mouse dnd functionality

---
 .../src/__tests__/splitview/splitview.spec.ts | 52 ++++++++++++++++++-
 .../dockview-core/src/splitview/splitview.ts  |  2 -
 2 files changed, 51 insertions(+), 3 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
index 23c9b1df8..7d14653d2 100644
--- a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
+++ b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
@@ -7,7 +7,7 @@ import {
     Sizing,
     Splitview,
 } from '../../splitview/splitview';
-
+import { fireEvent } from '@testing-library/dom';
 class Testview implements IView {
     private _element: HTMLElement = document.createElement('div');
     private _size = 0;
@@ -596,4 +596,54 @@ describe('splitview', () => {
         expect(anyEvents).toBeFalsy();
         expect(container.childNodes.length).toBe(0);
     });
+
+    test('dnd: mouse events to move sash', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(400, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+
+        const sashElement = container
+            .getElementsByClassName('sash')
+            .item(0) as HTMLElement;
+
+        // validate the expected state before drag
+        expect([view1.size, view2.size]).toEqual([200, 200]);
+        expect(sashElement).toBeTruthy();
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        // start the drag event
+        fireEvent.mouseDown(sashElement, { clientX: 50, clientY: 100 });
+
+        // during a sash drag the views should have pointer-events disabled
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
+
+        // expect a delta move of 70 - 50 = 20
+        fireEvent.mouseMove(document, { clientX: 70, clientY: 110 });
+        expect([view1.size, view2.size]).toEqual([220, 180]);
+
+        // expect a delta move of 75 - 70 = 5
+        fireEvent.mouseMove(document, { clientX: 75, clientY: 110 });
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+
+        // end the drag event
+        fireEvent.mouseUp(document);
+
+        // expect pointer-eventes on views to be restored
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        fireEvent.mouseMove(document, { clientX: 100, clientY: 100 });
+        // expect no additional resizes
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+    });
 });
diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts
index 48295a8c7..fd68a4a29 100644
--- a/packages/dockview-core/src/splitview/splitview.ts
+++ b/packages/dockview-core/src/splitview/splitview.ts
@@ -523,14 +523,12 @@ export class Splitview {
 
                     document.removeEventListener('mousemove', mousemove);
                     document.removeEventListener('mouseup', end);
-                    document.removeEventListener('mouseend', end);
 
                     this._onDidSashEnd.fire(undefined);
                 };
 
                 document.addEventListener('mousemove', mousemove);
                 document.addEventListener('mouseup', end);
-                document.addEventListener('mouseend', end);
             };
 
             sash.addEventListener('mousedown', onStart);

From a39c2938f02ef54e6a55d893874104930c3f1d81 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 14:31:28 +0100
Subject: [PATCH 02/19] test: listener utilities

---
 .../src/__tests__/events.spec.ts              | 141 +++++++++++++++++-
 packages/dockview-core/src/events.ts          |   4 +-
 2 files changed, 142 insertions(+), 3 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/events.spec.ts b/packages/dockview-core/src/__tests__/events.spec.ts
index 6ac17cc5c..532390a07 100644
--- a/packages/dockview-core/src/__tests__/events.spec.ts
+++ b/packages/dockview-core/src/__tests__/events.spec.ts
@@ -1,4 +1,9 @@
-import { Emitter, Event } from '../events';
+import {
+    Emitter,
+    Event,
+    addDisposableListener,
+    addDisposableWindowListener,
+} from '../events';
 
 describe('events', () => {
     describe('emitter', () => {
@@ -101,4 +106,138 @@ describe('events', () => {
         emitter3.fire(3);
         expect(value).toBe(3);
     });
+
+    it('addDisposableWindowListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableWindowListener(
+            element as any,
+            'mousedown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableWindowListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableWindowListener(
+            element as any,
+            'mousedown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+    });
+
+    it('addDisposableListener with capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'mousedown',
+            handler,
+            true
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            true
+        );
+    });
+
+    it('addDisposableListener without capture options', () => {
+        const element = {
+            addEventListener: jest.fn(),
+            removeEventListener: jest.fn(),
+        };
+
+        const handler = jest.fn();
+
+        const disposable = addDisposableListener(
+            element as any,
+            'mousedown',
+            handler
+        );
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.addEventListener).toHaveBeenCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+        expect(element.removeEventListener).toBeCalledTimes(0);
+
+        disposable.dispose();
+
+        expect(element.addEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledTimes(1);
+        expect(element.removeEventListener).toBeCalledWith(
+            'mousedown',
+            handler,
+            undefined
+        );
+    });
 });
diff --git a/packages/dockview-core/src/events.ts b/packages/dockview-core/src/events.ts
index 91f27a1b1..cb8d95930 100644
--- a/packages/dockview-core/src/events.ts
+++ b/packages/dockview-core/src/events.ts
@@ -162,7 +162,7 @@ export function addDisposableWindowListener<K extends keyof WindowEventMap>(
 
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }
@@ -177,7 +177,7 @@ export function addDisposableListener<K extends keyof HTMLElementEventMap>(
 
     return {
         dispose: () => {
-            element.removeEventListener(type, listener);
+            element.removeEventListener(type, listener, options);
         },
     };
 }

From ba3fe82c02f066415f786da50c26292b8b954bf4 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 15:48:37 +0100
Subject: [PATCH 03/19] chore: iFrame example

---
 .codesandbox/ci.json                          |   3 +-
 .../__tests__/dnd/abstractDragHandler.spec.ts |  50 +++++--
 .../src/dnd/abstractDragHandler.ts            |  33 +++--
 packages/docs/docs/components/dockview.mdx    |  24 ++++
 .../sandboxes/iframe-dockview/package.json    |  32 +++++
 .../iframe-dockview/public/index.html         |  44 ++++++
 .../sandboxes/iframe-dockview/src/app.tsx     |  61 +++++++++
 .../src/hoistedDockviewPanel.tsx              | 128 ++++++++++++++++++
 .../sandboxes/iframe-dockview/src/index.tsx   |  20 +++
 .../sandboxes/iframe-dockview/src/styles.css  |  15 ++
 .../sandboxes/iframe-dockview/tsconfig.json   |  18 +++
 .../version-1.7.4/components/dockview.mdx     |  24 ++++
 12 files changed, 430 insertions(+), 22 deletions(-)
 create mode 100644 packages/docs/sandboxes/iframe-dockview/package.json
 create mode 100644 packages/docs/sandboxes/iframe-dockview/public/index.html
 create mode 100644 packages/docs/sandboxes/iframe-dockview/src/app.tsx
 create mode 100644 packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
 create mode 100644 packages/docs/sandboxes/iframe-dockview/src/index.tsx
 create mode 100644 packages/docs/sandboxes/iframe-dockview/src/styles.css
 create mode 100644 packages/docs/sandboxes/iframe-dockview/tsconfig.json

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index 856df6dc8..f04bc5e88 100644
--- a/.codesandbox/ci.json
+++ b/.codesandbox/ci.json
@@ -13,6 +13,7 @@
     "/packages/docs/sandboxes/externaldnd-dockview",
     "/packages/docs/sandboxes/fullwidthtab-dockview",
     "/packages/docs/sandboxes/groupcontol-dockview",
+    "/packages/docs/sandboxes/iframe-dockview",
     "/packages/docs/sandboxes/layout-dockview",
     "/packages/docs/sandboxes/nativeapp-dockview",
     "/packages/docs/sandboxes/nested-dockview",
@@ -29,4 +30,4 @@
     "/packages/docs/sandboxes/javascript/vanilla-dockview"
   ],
   "node": "16"
-}
+}
\ No newline at end of file
diff --git a/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts b/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
index ebb55aae7..312916ae5 100644
--- a/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
+++ b/packages/dockview-core/src/__tests__/dnd/abstractDragHandler.spec.ts
@@ -20,10 +20,6 @@ describe('abstractDragHandler', () => {
                     },
                 };
             }
-
-            dispose(): void {
-                super.dispose();
-            }
         })(element);
 
         expect(element.classList.contains('dv-dragged')).toBeFalsy();
@@ -62,10 +58,6 @@ describe('abstractDragHandler', () => {
                     },
                 };
             }
-
-            dispose(): void {
-                //
-            }
         })(element);
 
         expect(iframe.style.pointerEvents).toBeFalsy();
@@ -84,4 +76,46 @@ describe('abstractDragHandler', () => {
 
         handler.dispose();
     });
+
+    test('that the disabling of pointerEvents is restored on a premature disposal of the handler', () => {
+        jest.useFakeTimers();
+
+        const element = document.createElement('div');
+        const iframe = document.createElement('iframe');
+        const webview = document.createElement('webview');
+        const span = document.createElement('span');
+
+        document.body.appendChild(element);
+        document.body.appendChild(iframe);
+        document.body.appendChild(webview);
+        document.body.appendChild(span);
+
+        const handler = new (class TestClass extends DragHandler {
+            constructor(el: HTMLElement) {
+                super(el);
+            }
+
+            getData(): IDisposable {
+                return {
+                    dispose: () => {
+                        // /
+                    },
+                };
+            }
+        })(element);
+
+        expect(iframe.style.pointerEvents).toBeFalsy();
+        expect(webview.style.pointerEvents).toBeFalsy();
+        expect(span.style.pointerEvents).toBeFalsy();
+
+        fireEvent.dragStart(element);
+        expect(iframe.style.pointerEvents).toBe('none');
+        expect(webview.style.pointerEvents).toBe('none');
+        expect(span.style.pointerEvents).toBeFalsy();
+
+        handler.dispose();
+        expect(iframe.style.pointerEvents).toBe('auto');
+        expect(webview.style.pointerEvents).toBe('auto');
+        expect(span.style.pointerEvents).toBeFalsy();
+    });
 });
diff --git a/packages/dockview-core/src/dnd/abstractDragHandler.ts b/packages/dockview-core/src/dnd/abstractDragHandler.ts
index df3f49177..55e03fa42 100644
--- a/packages/dockview-core/src/dnd/abstractDragHandler.ts
+++ b/packages/dockview-core/src/dnd/abstractDragHandler.ts
@@ -7,17 +7,20 @@ import {
 } from '../lifecycle';
 
 export abstract class DragHandler extends CompositeDisposable {
-    private readonly disposable = new MutableDisposable();
+    private readonly dataDisposable = new MutableDisposable();
+    private readonly pointerEventsDisposable = new MutableDisposable();
 
     private readonly _onDragStart = new Emitter<void>();
     readonly onDragStart = this._onDragStart.event;
 
-    private iframes: HTMLElement[] = [];
-
     constructor(protected readonly el: HTMLElement) {
         super();
 
-        this.addDisposables(this._onDragStart);
+        this.addDisposables(
+            this._onDragStart,
+            this.dataDisposable,
+            this.pointerEventsDisposable
+        );
 
         this.configure();
     }
@@ -28,19 +31,27 @@ export abstract class DragHandler extends CompositeDisposable {
         this.addDisposables(
             this._onDragStart,
             addDisposableListener(this.el, 'dragstart', (event) => {
-                this.iframes = [
+                const iframes = [
                     ...getElementsByTagName('iframe'),
                     ...getElementsByTagName('webview'),
                 ];
 
-                for (const iframe of this.iframes) {
+                this.pointerEventsDisposable.value = {
+                    dispose: () => {
+                        for (const iframe of iframes) {
+                            iframe.style.pointerEvents = 'auto';
+                        }
+                    },
+                };
+
+                for (const iframe of iframes) {
                     iframe.style.pointerEvents = 'none';
                 }
 
                 this.el.classList.add('dv-dragged');
                 setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
 
-                this.disposable.value = this.getData(event.dataTransfer);
+                this.dataDisposable.value = this.getData(event.dataTransfer);
 
                 if (event.dataTransfer) {
                     event.dataTransfer.effectAllowed = 'move';
@@ -61,12 +72,8 @@ export abstract class DragHandler extends CompositeDisposable {
                 }
             }),
             addDisposableListener(this.el, 'dragend', () => {
-                for (const iframe of this.iframes) {
-                    iframe.style.pointerEvents = 'auto';
-                }
-                this.iframes = [];
-
-                this.disposable.dispose();
+                this.pointerEventsDisposable.dispose();
+                this.dataDisposable.dispose();
             })
         );
     }
diff --git a/packages/docs/docs/components/dockview.mdx b/packages/docs/docs/components/dockview.mdx
index 176f309db..576c574a3 100644
--- a/packages/docs/docs/components/dockview.mdx
+++ b/packages/docs/docs/components/dockview.mdx
@@ -27,6 +27,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
+import DockviewWithIFrames from '@site/sandboxes/iframe-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';
@@ -739,6 +740,29 @@ api.group.api.setConstraints(...)
     <DockviewConstraints />
 </Container>
 
+## iFrames
+
+iFrames required special attention because of a particular behaviour in how iFrames render:
+
+> Re-parenting an iFrame will reload the contents of the iFrame or the rephrase this, moving an iFrame within the DOM will cause a reload of its contents.
+
+You can find many examples of discussions on this. Two reputable forums for example are linked [here](https://bugzilla.mozilla.org/show_bug.cgi?id=254144) and [here](https://github.com/whatwg/html/issues/5484).
+
+The problem with iFrames and `dockview` is that when you hide or move a panel that panels DOM element may be moved within the DOM or removed from the DOM completely.
+If your panel contains an iFrame then that iFrame will reload after being re-positioned within the DOM tree and all state in that iFrame will most likely be lost.
+
+`dockview` does not provide a built-in solution to this because it's too specific of a problem to include in the library.
+However the below example does show an implementation of a higher-order component `HoistedDockviewPanel`that you could use to work around this problems and make iFrames behave in `dockview`.
+
+What the higher-order component is doing is to hoist the panels contents into a DOM element that is always present and then `position: absolute` that element to match the dimensions of it's linked panel.
+The visibility of these hoisted elements is then controlled through some exposed api methods to hide elements that shouldn't be currently shown.
+
+You should open this example in CodeSandbox using the provided link to understand the code and make use of this implemention if required.
+
+<Container sandboxId="iframe-dockview" height={600}>
+    <DockviewWithIFrames />
+</Container>
+
 ## Events
 
 A simple example showing events fired by `dockviewz that can be interacted with.
diff --git a/packages/docs/sandboxes/iframe-dockview/package.json b/packages/docs/sandboxes/iframe-dockview/package.json
new file mode 100644
index 000000000..0a750cb5e
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "iframe-dockview",
+  "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"
+  ]
+}
\ No newline at end of file
diff --git a/packages/docs/sandboxes/iframe-dockview/public/index.html b/packages/docs/sandboxes/iframe-dockview/public/index.html
new file mode 100644
index 000000000..1f8a52426
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/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>
diff --git a/packages/docs/sandboxes/iframe-dockview/src/app.tsx b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
new file mode 100644
index 000000000..f52656551
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
@@ -0,0 +1,61 @@
+import {
+    DockviewReact,
+    DockviewReadyEvent,
+    IDockviewPanelProps,
+} from 'dockview';
+import * as React from 'react';
+import { HoistedDockviewPanel } from './hoistedDockviewPanel';
+
+const components = {
+    iframeComponent: HoistedDockviewPanel(
+        (props: IDockviewPanelProps<{ color: string }>) => {
+            return (
+                <iframe
+                    style={{
+                        border: 'none',
+                        width: '100%',
+                        height: '100%',
+                        pointerEvents: 'auto',
+                    }}
+                    src="https://dockview.dev"
+                />
+            );
+        }
+    ),
+    basicComponent: () => {
+        return (
+            <div style={{ padding: '20px', color: 'white' }}>
+                {'This panel is just a usual component '}
+            </div>
+        );
+    },
+};
+
+export const App: React.FC = () => {
+    const onReady = (event: DockviewReadyEvent) => {
+        event.api.addPanel({
+            id: 'panel_1',
+            component: 'iframeComponent',
+        });
+
+        event.api.addPanel({
+            id: 'panel_2',
+            component: 'iframeComponent',
+        });
+
+        event.api.addPanel({
+            id: 'panel_3',
+            component: 'basicComponent',
+        });
+    };
+
+    return (
+        <DockviewReact
+            components={components}
+            onReady={onReady}
+            className="dockview-theme-abyss"
+        />
+    );
+};
+
+export default App;
diff --git a/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx b/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
new file mode 100644
index 000000000..038cddd89
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
@@ -0,0 +1,128 @@
+import { IDockviewPanelProps } from 'dockview';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+// watch an element for resize
+function watchElementResize(
+    element: HTMLElement,
+    cb: (entry: ResizeObserverEntry) => void
+): { dispose: () => void } {
+    const observer = new ResizeObserver((entires) => {
+        requestAnimationFrame(() => {
+            const firstEntry = entires[0];
+            cb(firstEntry);
+        });
+    });
+
+    observer.observe(element);
+
+    return {
+        dispose: () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        },
+    };
+}
+
+// get absolute position of element allowing for scroll position
+function getDomNodePagePosition(domNode: HTMLElement): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+} {
+    const { left, top, width, height } = domNode.getBoundingClientRect();
+    return {
+        left: left + window.scrollX,
+        top: top + window.scrollY,
+        width: width,
+        height: height,
+    };
+}
+
+function toggleVisibility(element: HTMLElement, isVisible: boolean) {
+    element.style.visibility = isVisible ? 'visible' : 'hidden';
+}
+
+export const HoistedDockviewPanel = <T extends object>(
+    DockviewPanelComponent: React.FC<IDockviewPanelProps<T>>
+) => {
+    return (props: IDockviewPanelProps<T>) => {
+        const ref = React.useRef<HTMLDivElement>(null);
+        const innerRef = React.useRef<HTMLDivElement>(null);
+
+        React.useEffect(() => {
+            if (!ref.current || !innerRef.current) {
+                return;
+            }
+
+            const positionHoistedPanel = () => {
+                if (!ref.current || !innerRef.current) {
+                    return;
+                }
+
+                const { left, top, height, width } = getDomNodePagePosition(
+                    ref.current.parentElement! // use the parent element to determine our size
+                );
+
+                innerRef.current.style.left = `${left}px`;
+                innerRef.current.style.top = `${top}px`;
+                innerRef.current.style.height = `${height}px`;
+                innerRef.current.style.width = `${width}px`;
+            };
+
+            const observer = watchElementResize(ref.current, (callback) => {
+                if (!ref.current || !innerRef.current) {
+                    return;
+                }
+
+                positionHoistedPanel(); // since the dockview-panel has changed we must re-position the hoisted element
+            });
+
+            positionHoistedPanel(); // initial-paint because a resize may not yet have occured
+
+            return () => {
+                observer.dispose(); // cleanup
+            };
+        }, []);
+
+        React.useEffect(() => {
+            if (!innerRef.current) {
+                return;
+            }
+
+            const disposable = props.api.onDidVisibilityChange((event) => {
+                if (!innerRef.current) {
+                    return;
+                }
+
+                toggleVisibility(innerRef.current, event.isVisible); // subsequent checks of visibility
+            });
+
+            toggleVisibility(innerRef.current, props.api.isVisible); // initial check of visibility
+
+            return () => {
+                disposable.dispose(); // cleanup
+            };
+        }, [props.api]);
+
+        return (
+            <div ref={ref}>
+                {ReactDOM.createPortal(
+                    <div
+                        /** you may want to mark these elements with some kind of attribute id */
+                        ref={innerRef}
+                        style={{
+                            position: 'absolute',
+                            overflow: 'hidden',
+                            pointerEvents: 'none', // prevent this wrapper contain stealing events
+                        }}
+                    >
+                        <DockviewPanelComponent {...props} />
+                    </div>,
+                    document.body // <-- you may choose to mount these 'global' elements to anywhere you see suitable
+                )}
+            </div>
+        );
+    };
+};
diff --git a/packages/docs/sandboxes/iframe-dockview/src/index.tsx b/packages/docs/sandboxes/iframe-dockview/src/index.tsx
new file mode 100644
index 000000000..2fe1be232
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-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(
+        <StrictMode>
+            <div className="app">
+                <App />
+            </div>
+        </StrictMode>
+    );
+}
diff --git a/packages/docs/sandboxes/iframe-dockview/src/styles.css b/packages/docs/sandboxes/iframe-dockview/src/styles.css
new file mode 100644
index 000000000..b80f6dd76
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-dockview/src/styles.css
@@ -0,0 +1,15 @@
+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/iframe-dockview/tsconfig.json b/packages/docs/sandboxes/iframe-dockview/tsconfig.json
new file mode 100644
index 000000000..cdc4fb5f5
--- /dev/null
+++ b/packages/docs/sandboxes/iframe-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
+    }
+}
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx
index 176f309db..576c574a3 100644
--- a/packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx
+++ b/packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx
@@ -27,6 +27,7 @@ import RenderingDockview from '@site/sandboxes/rendering-dockview/src/app';
 import DockviewExternalDnd from '@site/sandboxes/externaldnd-dockview/src/app';
 import DockviewResizeContainer from '@site/sandboxes/resizecontainer-dockview/src/app';
 import DockviewTabheight from '@site/sandboxes/tabheight-dockview/src/app';
+import DockviewWithIFrames from '@site/sandboxes/iframe-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';
@@ -739,6 +740,29 @@ api.group.api.setConstraints(...)
     <DockviewConstraints />
 </Container>
 
+## iFrames
+
+iFrames required special attention because of a particular behaviour in how iFrames render:
+
+> Re-parenting an iFrame will reload the contents of the iFrame or the rephrase this, moving an iFrame within the DOM will cause a reload of its contents.
+
+You can find many examples of discussions on this. Two reputable forums for example are linked [here](https://bugzilla.mozilla.org/show_bug.cgi?id=254144) and [here](https://github.com/whatwg/html/issues/5484).
+
+The problem with iFrames and `dockview` is that when you hide or move a panel that panels DOM element may be moved within the DOM or removed from the DOM completely.
+If your panel contains an iFrame then that iFrame will reload after being re-positioned within the DOM tree and all state in that iFrame will most likely be lost.
+
+`dockview` does not provide a built-in solution to this because it's too specific of a problem to include in the library.
+However the below example does show an implementation of a higher-order component `HoistedDockviewPanel`that you could use to work around this problems and make iFrames behave in `dockview`.
+
+What the higher-order component is doing is to hoist the panels contents into a DOM element that is always present and then `position: absolute` that element to match the dimensions of it's linked panel.
+The visibility of these hoisted elements is then controlled through some exposed api methods to hide elements that shouldn't be currently shown.
+
+You should open this example in CodeSandbox using the provided link to understand the code and make use of this implemention if required.
+
+<Container sandboxId="iframe-dockview" height={600}>
+    <DockviewWithIFrames />
+</Container>
+
 ## Events
 
 A simple example showing events fired by `dockviewz that can be interacted with.

From 4f5b6adb5fc7972a0e0e56da3dff6062b229a22c Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 20:00:05 +0100
Subject: [PATCH 04/19] fix: revert gridview disposal changes

---
 .../dockview/dockviewComponent.spec.ts        | 162 ++++++++++++------
 .../dockview-core/src/gridview/gridview.ts    |  25 +--
 2 files changed, 121 insertions(+), 66 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index 2142045d5..67f317886 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -100,67 +100,67 @@ describe('dockviewComponent', () => {
         });
     });
 
-    test('event leakage', () => {
-        Emitter.setLeakageMonitorEnabled(true);
+    // test('event leakage', () => {
+    //     Emitter.setLeakageMonitorEnabled(true);
 
-        dockview = new DockviewComponent({
-            parentElement: container,
-            components: {
-                default: PanelContentPartTest,
-            },
-        });
+    //     dockview = new DockviewComponent({
+    //         parentElement: container,
+    //         components: {
+    //             default: PanelContentPartTest,
+    //         },
+    //     });
 
-        dockview.layout(500, 1000);
+    //     dockview.layout(500, 1000);
 
-        dockview.addPanel({
-            id: 'panel1',
-            component: 'default',
-        });
+    //     dockview.addPanel({
+    //         id: 'panel1',
+    //         component: 'default',
+    //     });
 
-        const panel2 = dockview.addPanel({
-            id: 'panel2',
-            component: 'default',
-        });
+    //     const panel2 = dockview.addPanel({
+    //         id: 'panel2',
+    //         component: 'default',
+    //     });
 
-        dockview.removePanel(panel2);
+    //     dockview.removePanel(panel2);
 
-        const panel3 = dockview.addPanel({
-            id: 'panel3',
-            component: 'default',
-            position: {
-                direction: 'right',
-                referencePanel: 'panel1',
-            },
-        });
+    //     const panel3 = dockview.addPanel({
+    //         id: 'panel3',
+    //         component: 'default',
+    //         position: {
+    //             direction: 'right',
+    //             referencePanel: 'panel1',
+    //         },
+    //     });
 
-        const panel4 = dockview.addPanel({
-            id: 'panel4',
-            component: 'default',
-            position: {
-                direction: 'above',
-            },
-        });
+    //     const panel4 = dockview.addPanel({
+    //         id: 'panel4',
+    //         component: 'default',
+    //         position: {
+    //             direction: 'above',
+    //         },
+    //     });
 
-        dockview.moveGroupOrPanel(
-            panel4.group,
-            panel3.group.id,
-            panel3.id,
-            'center'
-        );
+    //     dockview.moveGroupOrPanel(
+    //         panel4.group,
+    //         panel3.group.id,
+    //         panel3.id,
+    //         'center'
+    //     );
 
-        dockview.dispose();
+    //     dockview.dispose();
 
-        if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
-            for (const entry of Array.from(
-                Emitter.MEMORY_LEAK_WATCHER.events
-            )) {
-                console.log('disposal', entry[1]);
-            }
-            throw new Error('not all listeners disposed');
-        }
+    //     if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
+    //         for (const entry of Array.from(
+    //             Emitter.MEMORY_LEAK_WATCHER.events
+    //         )) {
+    //             console.log('disposal', entry[1]);
+    //         }
+    //         throw new Error('not all listeners disposed');
+    //     }
 
-        Emitter.setLeakageMonitorEnabled(false);
-    });
+    //     Emitter.setLeakageMonitorEnabled(false);
+    // });
 
     test('duplicate panel', () => {
         dockview.layout(500, 1000);
@@ -2448,4 +2448,66 @@ describe('dockviewComponent', () => {
             activeGroup: '1',
         });
     });
+
+    test('check', () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        dockview.layout(100, 100);
+
+        const panel1 = dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
+
+        const panel2 = dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
+
+        const panel3 = dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+        });
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel3.group.id,
+            panel3.id,
+            'right'
+        );
+
+        expect(dockview.groups.length).toBe(2);
+
+        dockview.moveGroupOrPanel(
+            panel3.group,
+            panel2.group.id,
+            panel2.id,
+            'bottom'
+        );
+
+        expect(dockview.groups.length).toBe(3);
+
+        dockview.moveGroupOrPanel(
+            panel2.group,
+            panel1.group.id,
+            panel1.id,
+            'center'
+        );
+
+        expect(dockview.groups.length).toBe(2);
+
+        const viewQuery = container.querySelectorAll('.split-view-container');
+        expect(viewQuery).toBeTruthy();
+    });
 });
diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
index 583b63c6f..ee9d8f923 100644
--- a/packages/dockview-core/src/gridview/gridview.ts
+++ b/packages/dockview-core/src/gridview/gridview.ts
@@ -684,18 +684,14 @@ export class Gridview implements IDisposable {
             throw new Error('Invalid location');
         }
 
-        const view = node.view;
-        node.dispose(); // dispose of node
-
-        const child = parent.removeChild(index, sizing);
-        child.dispose();
+        parent.removeChild(index, sizing);
 
         if (parent.children.length === 0) {
-            return view;
+            return node.view;
         }
 
         if (parent.children.length > 1) {
-            return view;
+            return node.view;
         }
 
         const sibling = parent.children[0];
@@ -704,28 +700,25 @@ export class Gridview implements IDisposable {
             // parent is root
 
             if (sibling instanceof LeafNode) {
-                return view;
+                return node.view;
             }
 
             // we must promote sibling to be the new root
-            const child = parent.removeChild(0, sizing);
-            child.dispose();
+            parent.removeChild(0, sizing);
             this.root = sibling;
-            return view;
+            return node.view;
         }
 
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
 
         const isSiblingVisible = parent.isChildVisible(0);
-        const childNode = parent.removeChild(0, sizing);
-        childNode.dispose();
+        parent.removeChild(0, sizing);
 
         const sizes = grandParent.children.map((_size, i) =>
             grandParent.getChildSize(i)
         );
-        const parentNode = grandParent.removeChild(parentIndex, sizing);
-        parentNode.dispose();
+        grandParent.removeChild(parentIndex, sizing);
 
         if (sibling instanceof BranchNode) {
             sizes.splice(
@@ -754,7 +747,7 @@ export class Gridview implements IDisposable {
             grandParent.resizeChild(i, sizes[i]);
         }
 
-        return view;
+        return node.view;
     }
 
     public layout(width: number, height: number): void {

From d8e8103f8069b23360011ce10f3b3336578412b7 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 20:21:11 +0100
Subject: [PATCH 05/19] chore: prepare v1.7.5

---
 .../{version-1.7.4 => version-1.7.5}/basics.mdx               | 0
 .../components/_category_.json                                | 0
 .../{version-1.7.4 => version-1.7.5}/components/dockview.mdx  | 0
 .../{version-1.7.4 => version-1.7.5}/components/gridview.mdx  | 0
 .../{version-1.7.4 => version-1.7.5}/components/paneview.mdx  | 0
 .../{version-1.7.4 => version-1.7.5}/components/splitview.mdx | 0
 .../versioned_docs/{version-1.7.4 => version-1.7.5}/index.mdx | 0
 .../versioned_docs/{version-1.7.4 => version-1.7.5}/theme.mdx | 0
 ...ersion-1.7.4-sidebars.json => version-1.7.5-sidebars.json} | 0
 packages/docs/versions.json                                   | 4 ++--
 10 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/basics.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/components/_category_.json (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/components/dockview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/components/gridview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/components/paneview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/components/splitview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/index.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.4 => version-1.7.5}/theme.mdx (100%)
 rename packages/docs/versioned_sidebars/{version-1.7.4-sidebars.json => version-1.7.5-sidebars.json} (100%)

diff --git a/packages/docs/versioned_docs/version-1.7.4/basics.mdx b/packages/docs/versioned_docs/version-1.7.5/basics.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/basics.mdx
rename to packages/docs/versioned_docs/version-1.7.5/basics.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/_category_.json b/packages/docs/versioned_docs/version-1.7.5/components/_category_.json
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/components/_category_.json
rename to packages/docs/versioned_docs/version-1.7.5/components/_category_.json
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.5/components/dockview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/components/dockview.mdx
rename to packages/docs/versioned_docs/version-1.7.5/components/dockview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.5/components/gridview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/components/gridview.mdx
rename to packages/docs/versioned_docs/version-1.7.5/components/gridview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/paneview.mdx b/packages/docs/versioned_docs/version-1.7.5/components/paneview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/components/paneview.mdx
rename to packages/docs/versioned_docs/version-1.7.5/components/paneview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.5/components/splitview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/components/splitview.mdx
rename to packages/docs/versioned_docs/version-1.7.5/components/splitview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/index.mdx b/packages/docs/versioned_docs/version-1.7.5/index.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/index.mdx
rename to packages/docs/versioned_docs/version-1.7.5/index.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.4/theme.mdx b/packages/docs/versioned_docs/version-1.7.5/theme.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.4/theme.mdx
rename to packages/docs/versioned_docs/version-1.7.5/theme.mdx
diff --git a/packages/docs/versioned_sidebars/version-1.7.4-sidebars.json b/packages/docs/versioned_sidebars/version-1.7.5-sidebars.json
similarity index 100%
rename from packages/docs/versioned_sidebars/version-1.7.4-sidebars.json
rename to packages/docs/versioned_sidebars/version-1.7.5-sidebars.json
diff --git a/packages/docs/versions.json b/packages/docs/versions.json
index a53923196..e6f7e7291 100644
--- a/packages/docs/versions.json
+++ b/packages/docs/versions.json
@@ -1,3 +1,3 @@
 [
-  "1.7.4"
-]
+  "1.7.5"
+]
\ No newline at end of file

From c42d8648ea904c4096af1dbbe0b1cc37ab460dad Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 20:25:23 +0100
Subject: [PATCH 06/19] chore: prepare v1.7.5

---
 ...ew-1.7.4.md => 2023-06-10-dockview-1.7.4.md} |  0
 packages/docs/blog/2023-06-11-dockview-1.7.5.md | 17 +++++++++++++++++
 2 files changed, 17 insertions(+)
 rename packages/docs/blog/{2023-06-14-dockview-1.7.4.md => 2023-06-10-dockview-1.7.4.md} (100%)
 create mode 100644 packages/docs/blog/2023-06-11-dockview-1.7.5.md

diff --git a/packages/docs/blog/2023-06-14-dockview-1.7.4.md b/packages/docs/blog/2023-06-10-dockview-1.7.4.md
similarity index 100%
rename from packages/docs/blog/2023-06-14-dockview-1.7.4.md
rename to packages/docs/blog/2023-06-10-dockview-1.7.4.md
diff --git a/packages/docs/blog/2023-06-11-dockview-1.7.5.md b/packages/docs/blog/2023-06-11-dockview-1.7.5.md
new file mode 100644
index 000000000..69e4b008f
--- /dev/null
+++ b/packages/docs/blog/2023-06-11-dockview-1.7.5.md
@@ -0,0 +1,17 @@
+---
+slug: dockview-1.7.5-release
+title: Dockview 1.7.5
+tags: [release]
+---
+
+# Release Notes
+
+Please reference to docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+
+## 🛠 Miscs
+
+-   Fix [#255](https://github.com/mathuo/dockview/issues/255)
+
+## 🔥 Breaking changes

From 54bc30c1aa7bd523a5fea025cf438ef221cc3a9b Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 20:25:44 +0100
Subject: [PATCH 07/19] chore(release): publish v1.7.5

---
 lerna.json                          | 2 +-
 packages/dockview-core/package.json | 2 +-
 packages/dockview/package.json      | 4 ++--
 packages/docs/package.json          | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lerna.json b/lerna.json
index bf55e0899..77cdbbf1c 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
     "packages/*"
   ],
   "useWorkspaces": true,
-  "version": "1.7.4",
+  "version": "1.7.5",
   "npmClient": "yarn",
   "command": {
     "publish": {
diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json
index a4d45486f..1590381fd 100644
--- a/packages/dockview-core/package.json
+++ b/packages/dockview-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
diff --git a/packages/dockview/package.json b/packages/dockview/package.json
index 3d0acd2ff..8232edcc7 100644
--- a/packages/dockview/package.json
+++ b/packages/dockview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -56,7 +56,7 @@
   "author": "https://github.com/mathuo",
   "license": "MIT",
   "dependencies": {
-    "dockview-core": "^1.7.4"
+    "dockview-core": "^1.7.5"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 7cb47b249..577f43f60 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview-docs",
-  "version": "1.7.4",
+  "version": "1.7.5",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -22,7 +22,7 @@
     "@minoru/react-dnd-treeview": "^3.4.3",
     "axios": "^1.3.3",
     "clsx": "^1.2.1",
-    "dockview": "^1.7.4",
+    "dockview": "^1.7.5",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",

From 477394cd1e1a8e481cfb47f68a1286c26ea907c7 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 20:43:13 +0100
Subject: [PATCH 08/19] chore: docs

---
 .../sandboxes/iframe-dockview/src/app.tsx     |  2 +-
 .../src/hoistedDockviewPanel.tsx              | 71 +++++--------------
 2 files changed, 18 insertions(+), 55 deletions(-)

diff --git a/packages/docs/sandboxes/iframe-dockview/src/app.tsx b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
index f52656551..8aefb6524 100644
--- a/packages/docs/sandboxes/iframe-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/iframe-dockview/src/app.tsx
@@ -12,10 +12,10 @@ const components = {
             return (
                 <iframe
                     style={{
+                        pointerEvents: 'none',
                         border: 'none',
                         width: '100%',
                         height: '100%',
-                        pointerEvents: 'auto',
                     }}
                     src="https://dockview.dev"
                 />
diff --git a/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx b/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
index 038cddd89..d00698f83 100644
--- a/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
+++ b/packages/docs/sandboxes/iframe-dockview/src/hoistedDockviewPanel.tsx
@@ -2,28 +2,6 @@ import { IDockviewPanelProps } from 'dockview';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-// watch an element for resize
-function watchElementResize(
-    element: HTMLElement,
-    cb: (entry: ResizeObserverEntry) => void
-): { dispose: () => void } {
-    const observer = new ResizeObserver((entires) => {
-        requestAnimationFrame(() => {
-            const firstEntry = entires[0];
-            cb(firstEntry);
-        });
-    });
-
-    observer.observe(element);
-
-    return {
-        dispose: () => {
-            observer.unobserve(element);
-            observer.disconnect();
-        },
-    };
-}
-
 // get absolute position of element allowing for scroll position
 function getDomNodePagePosition(domNode: HTMLElement): {
     left: number;
@@ -51,47 +29,27 @@ export const HoistedDockviewPanel = <T extends object>(
         const ref = React.useRef<HTMLDivElement>(null);
         const innerRef = React.useRef<HTMLDivElement>(null);
 
-        React.useEffect(() => {
+        const positionHoistedPanel = () => {
             if (!ref.current || !innerRef.current) {
                 return;
             }
 
-            const positionHoistedPanel = () => {
-                if (!ref.current || !innerRef.current) {
-                    return;
-                }
+            const { left, top, height, width } = getDomNodePagePosition(
+                ref.current.parentElement! // use the parent element to determine our size
+            );
 
-                const { left, top, height, width } = getDomNodePagePosition(
-                    ref.current.parentElement! // use the parent element to determine our size
-                );
-
-                innerRef.current.style.left = `${left}px`;
-                innerRef.current.style.top = `${top}px`;
-                innerRef.current.style.height = `${height}px`;
-                innerRef.current.style.width = `${width}px`;
-            };
-
-            const observer = watchElementResize(ref.current, (callback) => {
-                if (!ref.current || !innerRef.current) {
-                    return;
-                }
-
-                positionHoistedPanel(); // since the dockview-panel has changed we must re-position the hoisted element
-            });
-
-            positionHoistedPanel(); // initial-paint because a resize may not yet have occured
-
-            return () => {
-                observer.dispose(); // cleanup
-            };
-        }, []);
+            innerRef.current.style.left = `${left}px`;
+            innerRef.current.style.top = `${top}px`;
+            innerRef.current.style.height = `${height}px`;
+            innerRef.current.style.width = `${width}px`;
+        };
 
         React.useEffect(() => {
             if (!innerRef.current) {
                 return;
             }
 
-            const disposable = props.api.onDidVisibilityChange((event) => {
+            const disposable1 = props.api.onDidVisibilityChange((event) => {
                 if (!innerRef.current) {
                     return;
                 }
@@ -99,10 +57,15 @@ export const HoistedDockviewPanel = <T extends object>(
                 toggleVisibility(innerRef.current, event.isVisible); // subsequent checks of visibility
             });
 
-            toggleVisibility(innerRef.current, props.api.isVisible); // initial check of visibility
+            const disposable2 = props.api.onDidDimensionsChange(() => {
+                positionHoistedPanel();
+            });
+
+            positionHoistedPanel();
 
             return () => {
-                disposable.dispose(); // cleanup
+                disposable1.dispose(); // cleanup
+                disposable2.dispose();
             };
         }, [props.api]);
 

From 35a97b742605de028da1693d758afba03fcb9f47 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 21:17:04 +0100
Subject: [PATCH 09/19] test: gridview tests

---
 .../src/__tests__/gridview/gridview.spec.ts   | 574 ++++++++++++++++++
 1 file changed, 574 insertions(+)

diff --git a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
index 79cdd3de5..bb67ad2ea 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridview.spec.ts
@@ -18,6 +18,10 @@ class MockGridview implements IGridView {
     >().event;
     element: HTMLElement = document.createElement('div');
 
+    constructor() {
+        this.element.className = 'mock-grid-view';
+    }
+
     layout(width: number, height: number): void {
         //
     }
@@ -116,4 +120,574 @@ describe('gridview', () => {
 
         checkOrientationFlipsAtEachLevel((gridview as any).root as BranchNode);
     });
+
+    test('removeView: remove leaf from branch where branch becomes leaf and parent is root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(3);
+
+        gridview.removeView([1, 0], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(2);
+    });
+
+    test('removeView: remove leaf from branch where branch remains branch and parent is root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 1]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: {},
+                                size: 333,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 333,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 334,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(4);
+
+        gridview.removeView([1, 0], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(3);
+    });
+
+    test('removeView: remove leaf where parent is root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(3);
+
+        gridview.removeView([0], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'VERTICAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(2);
+    });
+
+    test('removeView: remove leaf from branch where branch becomes leaf and parent is not root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: [
+                                    {
+                                        data: {},
+                                        size: 250,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 250,
+                                        type: 'leaf',
+                                    },
+                                ],
+                                size: 500,
+                                type: 'branch',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(4);
+
+        gridview.removeView([1, 0, 0], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(3);
+    });
+
+    test('removeView: remove leaf from branch where branch remains branch and parent is not root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: [
+                                    {
+                                        data: {},
+                                        size: 166,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 166,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 168,
+                                        type: 'leaf',
+                                    },
+                                ],
+                                size: 500,
+                                type: 'branch',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(5);
+
+        gridview.removeView([1, 0, 1], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: [
+                                    {
+                                        data: {},
+                                        size: 250,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 250,
+                                        type: 'leaf',
+                                    },
+                                ],
+                                size: 500,
+                                type: 'branch',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(4);
+    });
+
+    test('removeView: remove leaf where parent is root', () => {
+        const gridview = new Gridview(
+            false,
+            { separatorBorder: '' },
+            Orientation.HORIZONTAL
+        );
+        gridview.layout(1000, 1000);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1]);
+
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 0]);
+        gridview.addView(new MockGridview(), Sizing.Distribute, [1, 0, 1]);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: [
+                            {
+                                data: [
+                                    {
+                                        data: {},
+                                        size: 166,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 166,
+                                        type: 'leaf',
+                                    },
+                                    {
+                                        data: {},
+                                        size: 168,
+                                        type: 'leaf',
+                                    },
+                                ],
+                                size: 500,
+                                type: 'branch',
+                            },
+                            {
+                                data: {},
+                                size: 500,
+                                type: 'leaf',
+                            },
+                        ],
+                        size: 500,
+                        type: 'branch',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(5);
+
+        gridview.removeView([1, 1], Sizing.Distribute);
+
+        expect(gridview.serialize()).toEqual({
+            height: 1000,
+            orientation: 'HORIZONTAL',
+            root: {
+                data: [
+                    {
+                        data: {},
+                        size: 500,
+                        type: 'leaf',
+                    },
+                    {
+                        data: {},
+                        size: 166,
+                        type: 'leaf',
+                    },
+                    {
+                        data: {},
+                        size: 166,
+                        type: 'leaf',
+                    },
+                    {
+                        data: {},
+                        size: 168,
+                        type: 'leaf',
+                    },
+                ],
+                size: 1000,
+                type: 'branch',
+            },
+            width: 1000,
+        });
+        expect(
+            gridview.element.querySelectorAll('.mock-grid-view').length
+        ).toBe(4);
+    });
 });

From e3dd45a185da3200cb1aad6db657730c931a8cb5 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 11 Jun 2023 21:34:34 +0100
Subject: [PATCH 10/19] test: add tests

---
 .../dockview/dockviewComponent.spec.ts        | 113 ++++++++++--------
 .../dockview-core/src/gridview/gridview.ts    |  53 ++++++--
 2 files changed, 100 insertions(+), 66 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index 67f317886..ae3659753 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -100,67 +100,67 @@ describe('dockviewComponent', () => {
         });
     });
 
-    // test('event leakage', () => {
-    //     Emitter.setLeakageMonitorEnabled(true);
+    test('event leakage', () => {
+        Emitter.setLeakageMonitorEnabled(true);
 
-    //     dockview = new DockviewComponent({
-    //         parentElement: container,
-    //         components: {
-    //             default: PanelContentPartTest,
-    //         },
-    //     });
+        dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+        });
 
-    //     dockview.layout(500, 1000);
+        dockview.layout(500, 1000);
 
-    //     dockview.addPanel({
-    //         id: 'panel1',
-    //         component: 'default',
-    //     });
+        dockview.addPanel({
+            id: 'panel1',
+            component: 'default',
+        });
 
-    //     const panel2 = dockview.addPanel({
-    //         id: 'panel2',
-    //         component: 'default',
-    //     });
+        const panel2 = dockview.addPanel({
+            id: 'panel2',
+            component: 'default',
+        });
 
-    //     dockview.removePanel(panel2);
+        dockview.removePanel(panel2);
 
-    //     const panel3 = dockview.addPanel({
-    //         id: 'panel3',
-    //         component: 'default',
-    //         position: {
-    //             direction: 'right',
-    //             referencePanel: 'panel1',
-    //         },
-    //     });
+        const panel3 = dockview.addPanel({
+            id: 'panel3',
+            component: 'default',
+            position: {
+                direction: 'right',
+                referencePanel: 'panel1',
+            },
+        });
 
-    //     const panel4 = dockview.addPanel({
-    //         id: 'panel4',
-    //         component: 'default',
-    //         position: {
-    //             direction: 'above',
-    //         },
-    //     });
+        const panel4 = dockview.addPanel({
+            id: 'panel4',
+            component: 'default',
+            position: {
+                direction: 'above',
+            },
+        });
 
-    //     dockview.moveGroupOrPanel(
-    //         panel4.group,
-    //         panel3.group.id,
-    //         panel3.id,
-    //         'center'
-    //     );
+        dockview.moveGroupOrPanel(
+            panel4.group,
+            panel3.group.id,
+            panel3.id,
+            'center'
+        );
 
-    //     dockview.dispose();
+        dockview.dispose();
 
-    //     if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
-    //         for (const entry of Array.from(
-    //             Emitter.MEMORY_LEAK_WATCHER.events
-    //         )) {
-    //             console.log('disposal', entry[1]);
-    //         }
-    //         throw new Error('not all listeners disposed');
-    //     }
+        if (Emitter.MEMORY_LEAK_WATCHER.size > 0) {
+            for (const entry of Array.from(
+                Emitter.MEMORY_LEAK_WATCHER.events
+            )) {
+                console.log('disposal', entry[1]);
+            }
+            throw new Error('not all listeners disposed');
+        }
 
-    //     Emitter.setLeakageMonitorEnabled(false);
-    // });
+        Emitter.setLeakageMonitorEnabled(false);
+    });
 
     test('duplicate panel', () => {
         dockview.layout(500, 1000);
@@ -2449,7 +2449,7 @@ describe('dockviewComponent', () => {
         });
     });
 
-    test('check', () => {
+    test('check dockview component is rendering to the DOM as expected', () => {
         const container = document.createElement('div');
 
         const dockview = new DockviewComponent({
@@ -2470,16 +2470,22 @@ describe('dockviewComponent', () => {
             component: 'default',
         });
 
+        expect(dockview.element.querySelectorAll('.view').length).toBe(1);
+
         const panel2 = dockview.addPanel({
             id: 'panel2',
             component: 'default',
         });
 
+        expect(dockview.element.querySelectorAll('.view').length).toBe(1);
+
         const panel3 = dockview.addPanel({
             id: 'panel3',
             component: 'default',
         });
 
+        expect(dockview.element.querySelectorAll('.view').length).toBe(1);
+
         dockview.moveGroupOrPanel(
             panel3.group,
             panel3.group.id,
@@ -2488,6 +2494,7 @@ describe('dockviewComponent', () => {
         );
 
         expect(dockview.groups.length).toBe(2);
+        expect(dockview.element.querySelectorAll('.view').length).toBe(2);
 
         dockview.moveGroupOrPanel(
             panel3.group,
@@ -2497,6 +2504,7 @@ describe('dockviewComponent', () => {
         );
 
         expect(dockview.groups.length).toBe(3);
+        expect(dockview.element.querySelectorAll('.view').length).toBe(4);
 
         dockview.moveGroupOrPanel(
             panel2.group,
@@ -2507,7 +2515,6 @@ describe('dockviewComponent', () => {
 
         expect(dockview.groups.length).toBe(2);
 
-        const viewQuery = container.querySelectorAll('.split-view-container');
-        expect(viewQuery).toBeTruthy();
+        expect(dockview.element.querySelectorAll('.view').length).toBe(2);
     });
 });
diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
index ee9d8f923..62c2ca9fb 100644
--- a/packages/dockview-core/src/gridview/gridview.ts
+++ b/packages/dockview-core/src/gridview/gridview.ts
@@ -678,60 +678,82 @@ export class Gridview implements IDisposable {
             throw new Error('Invalid location');
         }
 
-        const node = parent.children[index];
+        const nodeToRemove = parent.children[index];
 
-        if (!(node instanceof LeafNode)) {
+        if (!(nodeToRemove instanceof LeafNode)) {
             throw new Error('Invalid location');
         }
 
         parent.removeChild(index, sizing);
+        nodeToRemove.dispose();
 
-        if (parent.children.length === 0) {
-            return node.view;
+        if (parent.children.length !== 1) {
+            return nodeToRemove.view;
         }
 
-        if (parent.children.length > 1) {
-            return node.view;
-        }
+        // if the parent has only one child and we know the parent is a BranchNode we can make the tree
+        // more efficiently spaced by replacing the parent BranchNode with the child.
+        // if that child is a LeafNode then we simply replace the BranchNode with the child otherwise if the child
+        // is a BranchNode too we should spread it's children into the grandparent.
 
+        // refer to the remaining child as the sibling
         const sibling = parent.children[0];
 
         if (pathToParent.length === 0) {
-            // parent is root
+            // if the parent is root
 
             if (sibling instanceof LeafNode) {
-                return node.view;
+                // if the sibling is a leaf node no action is required
+                return nodeToRemove.view;
             }
 
-            // we must promote sibling to be the new root
+            // otherwise the sibling is a branch node. since the parent is the root and the root has only one child
+            // which is a branch node we can just set this branch node to be the new root node
+
+            // for good housekeeping we'll removing the sibling from it's existing tree
             parent.removeChild(0, sizing);
+
+            // and set that sibling node to be root
             this.root = sibling;
-            return node.view;
+
+            return nodeToRemove.view;
         }
 
+        // otherwise the parent is apart of a large sub-tree
+
         const [grandParent, ..._] = [...pathToParent].reverse();
         const [parentIndex, ...__] = [...rest].reverse();
 
         const isSiblingVisible = parent.isChildVisible(0);
+
+        // either way we need to remove the sibling from it's existing tree
         parent.removeChild(0, sizing);
 
+        // note the sizes of all of the grandparents children
         const sizes = grandParent.children.map((_size, i) =>
             grandParent.getChildSize(i)
         );
-        grandParent.removeChild(parentIndex, sizing);
+
+        // remove the parent from the grandparent since we are moving the sibling to take the parents place
+        // this parent is no longer used and can be disposed of
+        grandParent.removeChild(parentIndex, sizing).dispose();
 
         if (sibling instanceof BranchNode) {
+            // replace the parent with the siblings children
             sizes.splice(
                 parentIndex,
                 1,
                 ...sibling.children.map((c) => c.size)
             );
 
+            // and add those siblings to the grandparent
             for (let i = 0; i < sibling.children.length; i++) {
                 const child = sibling.children[i];
                 grandParent.addChild(child, child.size, parentIndex + i);
             }
         } else {
+            // otherwise create a new leaf node and add that to the grandparent
+
             const newSibling = new LeafNode(
                 sibling.view,
                 orthogonal(sibling.orientation),
@@ -740,14 +762,19 @@ export class Gridview implements IDisposable {
             const siblingSizing = isSiblingVisible
                 ? sibling.orthogonalSize
                 : Sizing.Invisible(sibling.orthogonalSize);
+
             grandParent.addChild(newSibling, siblingSizing, parentIndex);
         }
 
+        // the containing node of the sibling is no longer required and can be disposed of
+        sibling.dispose();
+
+        // resize everything
         for (let i = 0; i < sizes.length; i++) {
             grandParent.resizeChild(i, sizes[i]);
         }
 
-        return node.view;
+        return nodeToRemove.view;
     }
 
     public layout(width: number, height: number): void {

From 9e10814840067d97581402be8ae1b0f267548597 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 12 Jun 2023 21:36:24 +0100
Subject: [PATCH 11/19] Patch 1 (#278)

* Touch support for split view

* Attempting to make TS happy

* Making typescript happy round two

https://stackoverflow.com/questions/54688147/react-typescript-event-type-for-both-interfaces-mouseevent-and-touchevent

* make TS Happy

* Update splitview.ts

---------

Co-authored-by: Ray Foss <ray@vblip.com>
---
 .../dockview-core/src/splitview/splitview.ts  | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts
index fd68a4a29..a39c989e3 100644
--- a/packages/dockview-core/src/splitview/splitview.ts
+++ b/packages/dockview-core/src/splitview/splitview.ts
@@ -393,7 +393,8 @@ export class Splitview {
             const sash = document.createElement('div');
             sash.className = 'sash';
 
-            const onStart = (event: MouseEvent) => {
+            const onStart = (nativeEvent: MouseEvent | TouchEvent) => {
+                const event = nativeEvent instanceof TouchEvent ? nativeEvent.touches[0] : nativeEvent;
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -488,11 +489,12 @@ export class Splitview {
                 }
                 //
 
-                const mousemove = (mousemoveEvent: MouseEvent) => {
+                const mousemove = (nativeMoveEvent: MouseEvent | TouchEvent) => {
+                    const moveEvent = nativeMoveEvent instanceof TouchEvent ? nativeMoveEvent.touches[0] : nativeMoveEvent;
                     const current =
                         this._orientation === Orientation.HORIZONTAL
-                            ? mousemoveEvent.clientX
-                            : mousemoveEvent.clientY;
+                            ? moveEvent.clientX
+                            : moveEvent.clientY;
                     const delta = current - start;
 
                     this.resize(
@@ -523,15 +525,24 @@ export class Splitview {
 
                     document.removeEventListener('mousemove', mousemove);
                     document.removeEventListener('mouseup', end);
+                    document.removeEventListener("touchmove", mousemove);
+                    document.removeEventListener("touchend", end);
+                    document.removeEventListener("touchcancel", end);
 
                     this._onDidSashEnd.fire(undefined);
+                    return true // Consume, otherwise Monaco complains
                 };
 
                 document.addEventListener('mousemove', mousemove);
                 document.addEventListener('mouseup', end);
+                document.addEventListener("touchmove", mousemove);
+                document.addEventListener("touchend", end);
+                document.addEventListener("touchcancel", end);
+                return true // consume pull to refresh gesture
             };
 
             sash.addEventListener('mousedown', onStart);
+            sash.addEventListener("touchstart", onStart);
 
             const sashItem: ISashItem = {
                 container: sash,

From 01544a995338037aca4858d968a3a9890260f1b5 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Mon, 12 Jun 2023 21:41:46 +0100
Subject: [PATCH 12/19] feat: touch support refactor and test - add tests -
 refactor methods to have a clear seperation between mouse and touch   logic

---
 .../src/__tests__/splitview/splitview.spec.ts | 86 +++++++++++++++++++
 .../dockview-core/src/splitview/splitview.ts  | 57 ++++++++----
 2 files changed, 124 insertions(+), 19 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
index 7d14653d2..a93d7daf4 100644
--- a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
+++ b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
@@ -84,6 +84,8 @@ describe('splitview', () => {
     beforeEach(() => {
         container = document.createElement('div');
         container.className = 'container';
+
+        jest.clearAllMocks();
     });
 
     test('vertical splitview', () => {
@@ -610,6 +612,12 @@ describe('splitview', () => {
         splitview.addView(view1);
         splitview.addView(view2);
 
+        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+        const removeEventListenerSpy = jest.spyOn(
+            document,
+            'removeEventListener'
+        );
+
         const sashElement = container
             .getElementsByClassName('sash')
             .item(0) as HTMLElement;
@@ -623,6 +631,8 @@ describe('splitview', () => {
         // start the drag event
         fireEvent.mouseDown(sashElement, { clientX: 50, clientY: 100 });
 
+        expect(addEventListenerSpy).toBeCalledTimes(5);
+
         // during a sash drag the views should have pointer-events disabled
         expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
         expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
@@ -638,6 +648,8 @@ describe('splitview', () => {
         // end the drag event
         fireEvent.mouseUp(document);
 
+        expect(removeEventListenerSpy).toBeCalledTimes(5);
+
         // expect pointer-eventes on views to be restored
         expect(view1.element.parentElement!.style.pointerEvents).toBe('');
         expect(view2.element.parentElement!.style.pointerEvents).toBe('');
@@ -645,5 +657,79 @@ describe('splitview', () => {
         fireEvent.mouseMove(document, { clientX: 100, clientY: 100 });
         // expect no additional resizes
         expect([view1.size, view2.size]).toEqual([225, 175]);
+        // expect no additional document listeners
+        expect(addEventListenerSpy).toBeCalledTimes(5);
+        expect(removeEventListenerSpy).toBeCalledTimes(5);
+    });
+
+    test('dnd: touch events to move sash', () => {
+        const splitview = new Splitview(container, {
+            orientation: Orientation.HORIZONTAL,
+            proportionalLayout: false,
+        });
+        splitview.layout(400, 500);
+
+        const view1 = new Testview(0, 1000);
+        const view2 = new Testview(0, 1000);
+
+        splitview.addView(view1);
+        splitview.addView(view2);
+
+        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
+        const removeEventListenerSpy = jest.spyOn(
+            document,
+            'removeEventListener'
+        );
+
+        const sashElement = container
+            .getElementsByClassName('sash')
+            .item(0) as HTMLElement;
+
+        // validate the expected state before drag
+        expect([view1.size, view2.size]).toEqual([200, 200]);
+        expect(sashElement).toBeTruthy();
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        // start the drag event
+        fireEvent.touchStart(sashElement, {
+            touches: [{ clientX: 50, clientY: 100 }],
+        });
+
+        expect(addEventListenerSpy).toBeCalledTimes(5);
+
+        // during a sash drag the views should have pointer-events disabled
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
+
+        // expect a delta move of 70 - 50 = 20
+        fireEvent.touchMove(document, {
+            touches: [{ clientX: 70, clientY: 110 }],
+        });
+        expect([view1.size, view2.size]).toEqual([220, 180]);
+
+        // expect a delta move of 75 - 70 = 5
+        fireEvent.touchMove(document, {
+            touches: [{ clientX: 75, clientY: 110 }],
+        });
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+
+        // end the drag event
+        fireEvent.touchEnd(document);
+
+        expect(removeEventListenerSpy).toBeCalledTimes(5);
+
+        // expect pointer-eventes on views to be restored
+        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
+        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
+
+        fireEvent.touchMove(document, {
+            touches: [{ clientX: 100, clientY: 100 }],
+        });
+        // expect no additional resizes
+        expect([view1.size, view2.size]).toEqual([225, 175]);
+        // expect no additional document listeners
+        expect(addEventListenerSpy).toBeCalledTimes(5);
+        expect(removeEventListenerSpy).toBeCalledTimes(5);
     });
 });
diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts
index a39c989e3..98dcce6a8 100644
--- a/packages/dockview-core/src/splitview/splitview.ts
+++ b/packages/dockview-core/src/splitview/splitview.ts
@@ -393,8 +393,17 @@ export class Splitview {
             const sash = document.createElement('div');
             sash.className = 'sash';
 
-            const onStart = (nativeEvent: MouseEvent | TouchEvent) => {
-                const event = nativeEvent instanceof TouchEvent ? nativeEvent.touches[0] : nativeEvent;
+            const onTouchStart = (event: TouchEvent) => {
+                event.preventDefault();
+                const touch = event.touches[0];
+                onStart(touch);
+            };
+
+            const onMouseDown = (event: MouseEvent) => {
+                onStart(event);
+            };
+
+            const onStart = (event: { clientX: number; clientY: number }) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -487,14 +496,25 @@ export class Splitview {
                         size: snappedViewItem.size,
                     };
                 }
-                //
 
-                const mousemove = (nativeMoveEvent: MouseEvent | TouchEvent) => {
-                    const moveEvent = nativeMoveEvent instanceof TouchEvent ? nativeMoveEvent.touches[0] : nativeMoveEvent;
+                const onMouseMove = (event: MouseEvent) => {
+                    reposition(event);
+                };
+
+                const onTouchMove = (event: TouchEvent) => {
+                    event.preventDefault();
+                    const touch = event.touches[0];
+                    reposition(touch);
+                };
+
+                const reposition = (event: {
+                    clientX: number;
+                    clientY: number;
+                }) => {
                     const current =
                         this._orientation === Orientation.HORIZONTAL
-                            ? moveEvent.clientX
-                            : moveEvent.clientY;
+                            ? event.clientX
+                            : event.clientY;
                     const delta = current - start;
 
                     this.resize(
@@ -523,31 +543,30 @@ export class Splitview {
 
                     this.saveProportions();
 
-                    document.removeEventListener('mousemove', mousemove);
+                    document.removeEventListener('mousemove', onMouseMove);
                     document.removeEventListener('mouseup', end);
-                    document.removeEventListener("touchmove", mousemove);
-                    document.removeEventListener("touchend", end);
-                    document.removeEventListener("touchcancel", end);
+                    document.removeEventListener('touchmove', onTouchMove);
+                    document.removeEventListener('touchend', end);
+                    document.removeEventListener('touchcancel', end);
 
                     this._onDidSashEnd.fire(undefined);
-                    return true // Consume, otherwise Monaco complains
                 };
 
-                document.addEventListener('mousemove', mousemove);
+                document.addEventListener('mousemove', onMouseMove);
                 document.addEventListener('mouseup', end);
-                document.addEventListener("touchmove", mousemove);
-                document.addEventListener("touchend", end);
-                document.addEventListener("touchcancel", end);
-                return true // consume pull to refresh gesture
+                document.addEventListener('touchmove', onTouchMove);
+                document.addEventListener('touchend', end);
+                document.addEventListener('touchcancel', end);
             };
 
-            sash.addEventListener('mousedown', onStart);
-            sash.addEventListener("touchstart", onStart);
+            sash.addEventListener('mousedown', onMouseDown);
+            sash.addEventListener('touchstart', onTouchStart);
 
             const sashItem: ISashItem = {
                 container: sash,
                 disposable: () => {
                     sash.removeEventListener('mousedown', onStart);
+                    sash.removeEventListener('touchstart', onTouchStart);
                     this.sashContainer.removeChild(sash);
                 },
             };

From 59a947c4c7d9452d9c1ebc0989132e5d28b90cdf Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 16 Jun 2023 20:49:44 +0100
Subject: [PATCH 13/19] chore: prepare v1.7.6

---
 .../docs/blog/2023-06-18-dockview-1.7.6.md    | 20 +++++++++++++++++++
 .../basics.mdx                                |  0
 .../components/_category_.json                |  0
 .../components/dockview.mdx                   |  0
 .../components/gridview.mdx                   |  0
 .../components/paneview.mdx                   |  0
 .../components/splitview.mdx                  |  0
 .../index.mdx                                 |  0
 .../theme.mdx                                 |  0
 ...ebars.json => version-1.7.6-sidebars.json} |  0
 packages/docs/versions.json                   |  2 +-
 11 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 packages/docs/blog/2023-06-18-dockview-1.7.6.md
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/basics.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/components/_category_.json (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/components/dockview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/components/gridview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/components/paneview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/components/splitview.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/index.mdx (100%)
 rename packages/docs/versioned_docs/{version-1.7.5 => version-1.7.6}/theme.mdx (100%)
 rename packages/docs/versioned_sidebars/{version-1.7.5-sidebars.json => version-1.7.6-sidebars.json} (100%)

diff --git a/packages/docs/blog/2023-06-18-dockview-1.7.6.md b/packages/docs/blog/2023-06-18-dockview-1.7.6.md
new file mode 100644
index 000000000..556a52df3
--- /dev/null
+++ b/packages/docs/blog/2023-06-18-dockview-1.7.6.md
@@ -0,0 +1,20 @@
+---
+slug: dockview-1.7.6-release
+title: Dockview 1.7.6
+tags: [release]
+---
+
+# Release Notes
+
+Please reference to docs @ [dockview.dev](https://dockview.dev).
+
+## 🚀 Features
+
+-   Touch support for resize handles [#278](https://github.com/mathuo/dockview/pull/278)
+
+## 🛠 Miscs
+
+-   Internal cleanup [#275](https://github.com/mathuo/dockview/pull/275)
+-   iframe docs [#273](https://github.com/mathuo/dockview/pull/273)
+
+## 🔥 Breaking changes
diff --git a/packages/docs/versioned_docs/version-1.7.5/basics.mdx b/packages/docs/versioned_docs/version-1.7.6/basics.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/basics.mdx
rename to packages/docs/versioned_docs/version-1.7.6/basics.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/components/_category_.json b/packages/docs/versioned_docs/version-1.7.6/components/_category_.json
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/components/_category_.json
rename to packages/docs/versioned_docs/version-1.7.6/components/_category_.json
diff --git a/packages/docs/versioned_docs/version-1.7.5/components/dockview.mdx b/packages/docs/versioned_docs/version-1.7.6/components/dockview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/components/dockview.mdx
rename to packages/docs/versioned_docs/version-1.7.6/components/dockview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/components/gridview.mdx b/packages/docs/versioned_docs/version-1.7.6/components/gridview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/components/gridview.mdx
rename to packages/docs/versioned_docs/version-1.7.6/components/gridview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/components/paneview.mdx b/packages/docs/versioned_docs/version-1.7.6/components/paneview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/components/paneview.mdx
rename to packages/docs/versioned_docs/version-1.7.6/components/paneview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/components/splitview.mdx b/packages/docs/versioned_docs/version-1.7.6/components/splitview.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/components/splitview.mdx
rename to packages/docs/versioned_docs/version-1.7.6/components/splitview.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/index.mdx b/packages/docs/versioned_docs/version-1.7.6/index.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/index.mdx
rename to packages/docs/versioned_docs/version-1.7.6/index.mdx
diff --git a/packages/docs/versioned_docs/version-1.7.5/theme.mdx b/packages/docs/versioned_docs/version-1.7.6/theme.mdx
similarity index 100%
rename from packages/docs/versioned_docs/version-1.7.5/theme.mdx
rename to packages/docs/versioned_docs/version-1.7.6/theme.mdx
diff --git a/packages/docs/versioned_sidebars/version-1.7.5-sidebars.json b/packages/docs/versioned_sidebars/version-1.7.6-sidebars.json
similarity index 100%
rename from packages/docs/versioned_sidebars/version-1.7.5-sidebars.json
rename to packages/docs/versioned_sidebars/version-1.7.6-sidebars.json
diff --git a/packages/docs/versions.json b/packages/docs/versions.json
index e6f7e7291..cb4dfb291 100644
--- a/packages/docs/versions.json
+++ b/packages/docs/versions.json
@@ -1,3 +1,3 @@
 [
-  "1.7.5"
+  "1.7.6"
 ]
\ No newline at end of file

From 4fb8a3a098c192e1d83f220502c0c0be69570abe Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Fri, 16 Jun 2023 20:48:16 +0100
Subject: [PATCH 14/19] feat: retain layout size after fromJSON

---
 .../dockview/dockviewComponent.spec.ts        | 102 +++++
 .../gridview/gridviewComponent.spec.ts        | 348 +++++++++++++++++-
 .../paneview/paneviewComponent.spec.ts        |  81 ++++
 .../splitview/splitviewComponent.spec.ts      |  55 ++-
 .../src/dockview/dockviewComponent.ts         |   8 +-
 .../dockview-core/src/gridview/gridview.ts    |  12 +-
 .../src/gridview/gridviewComponent.ts         |   6 +-
 .../src/paneview/paneviewComponent.ts         |   6 +-
 .../src/splitview/splitviewComponent.ts       |   6 +-
 9 files changed, 598 insertions(+), 26 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
index ae3659753..8091ff768 100644
--- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts
@@ -541,6 +541,8 @@ describe('dockviewComponent', () => {
             },
         });
 
+        // dockview.layout(1000, 1000, true);
+
         expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
             activeGroup: 'group-1',
             grid: {
@@ -1723,6 +1725,9 @@ describe('dockviewComponent', () => {
                 test_tab_id: PanelTabPartTest,
             },
         });
+
+        dockview.layout(1000, 1000);
+
         dockview.fromJSON({
             activeGroup: 'group-1',
             grid: {
@@ -1918,6 +1923,8 @@ describe('dockviewComponent', () => {
             orientation: Orientation.HORIZONTAL,
         });
 
+        dockview.layout(1000, 1000);
+
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
         dockview.fromJSON({
@@ -2023,6 +2030,8 @@ describe('dockviewComponent', () => {
             orientation: Orientation.HORIZONTAL,
         });
 
+        dockview.layout(1000, 1000);
+
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
         dockview.fromJSON({
@@ -2163,6 +2172,8 @@ describe('dockviewComponent', () => {
             orientation: Orientation.HORIZONTAL,
         });
 
+        dockview.layout(1000, 1000);
+
         expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
 
         dockview.fromJSON({
@@ -2517,4 +2528,95 @@ describe('dockviewComponent', () => {
 
         expect(dockview.element.querySelectorAll('.view').length).toBe(2);
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const container = document.createElement('div');
+
+        const dockview = new DockviewComponent({
+            parentElement: container,
+            components: {
+                default: PanelContentPartTest,
+            },
+            tabComponents: {
+                test_tab_id: PanelTabPartTest,
+            },
+            orientation: Orientation.HORIZONTAL,
+        });
+
+        expect(dockview.orientation).toBe(Orientation.HORIZONTAL);
+
+        dockview.layout(1000, 500);
+
+        dockview.fromJSON({
+            activeGroup: 'group-1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1', 'panel2'],
+                                id: 'group-1',
+                                activeView: 'panel2',
+                            },
+                            size: 2000,
+                        },
+                    ],
+                    size: 1000,
+                },
+                height: 1000,
+                width: 2000,
+                orientation: Orientation.HORIZONTAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+                panel2: {
+                    id: 'panel2',
+                    contentComponent: 'default',
+                    title: 'panel2',
+                },
+            },
+        });
+
+        expect(JSON.parse(JSON.stringify(dockview.toJSON()))).toEqual({
+            activeGroup: 'group-1',
+            grid: {
+                root: {
+                    type: 'branch',
+                    data: [
+                        {
+                            type: 'leaf',
+                            data: {
+                                views: ['panel1', 'panel2'],
+                                id: 'group-1',
+                                activeView: 'panel2',
+                            },
+                            size: 1000,
+                        },
+                    ],
+                    size: 500,
+                },
+                height: 500,
+                width: 1000,
+                orientation: Orientation.HORIZONTAL,
+            },
+            panels: {
+                panel1: {
+                    id: 'panel1',
+                    contentComponent: 'default',
+                    title: 'panel1',
+                },
+                panel2: {
+                    id: 'panel2',
+                    contentComponent: 'default',
+                    title: 'panel2',
+                },
+            },
+        });
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
index 083526119..267600ffb 100644
--- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts
@@ -471,6 +471,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -528,7 +530,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        // gridview.layout(800, 400);
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -552,7 +555,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -587,7 +589,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        // gridview.layout(800, 400);
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -620,7 +623,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -664,7 +666,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        // gridview.layout(800, 400);
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -706,7 +709,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -759,7 +761,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        // gridview.layout(800, 400);
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -801,7 +804,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -854,6 +856,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -895,7 +899,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -948,7 +951,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
-        // gridview.layout(800, 400);
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -1005,7 +1009,6 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -1198,6 +1201,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -1254,7 +1259,8 @@ describe('gridview', () => {
             },
             activePanel: 'panel_1',
         });
-        gridview.layout(800, 400, true);
+
+        // gridview.layout(800, 400, true);
 
         expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
             grid: {
@@ -1322,6 +1328,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -1445,6 +1453,8 @@ describe('gridview', () => {
             components: { default: TestGridview },
         });
 
+        gridview.layout(800, 400);
+
         gridview.fromJSON({
             grid: {
                 height: 400,
@@ -1908,4 +1918,318 @@ describe('gridview', () => {
 
         return disposable.dispose();
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const container = document.createElement('div');
+
+        const gridview = new GridviewComponent({
+            parentElement: container,
+            proportionalLayout: true,
+            orientation: Orientation.VERTICAL,
+            components: { default: TestGridview },
+        });
+
+        gridview.layout(1600, 800);
+
+        gridview.fromJSON({
+            grid: {
+                height: 400,
+                width: 800,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 400,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 400,
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    size: 250,
+                                    data: {
+                                        id: 'panel_2',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 150,
+                                    data: {
+                                        id: 'panel_3',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 200,
+                            data: {
+                                id: 'panel_4',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
+            grid: {
+                height: 800,
+                width: 1600,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 800,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 400,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 800,
+                            data: [
+                                {
+                                    type: 'leaf',
+                                    size: 500,
+                                    data: {
+                                        id: 'panel_2',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 300,
+                                    data: {
+                                        id: 'panel_3',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 400,
+                            data: {
+                                id: 'panel_4',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+    });
+
+    test('that a deep layout with fromJSON dimensions identical to the current dimensions loads', async () => {
+        const container = document.createElement('div');
+
+        const gridview = new GridviewComponent({
+            parentElement: container,
+            proportionalLayout: true,
+            orientation: Orientation.VERTICAL,
+            components: { default: TestGridview },
+        });
+
+        gridview.layout(5000, 5000);
+
+        gridview.fromJSON({
+            grid: {
+                height: 5000,
+                width: 5000,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 2000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 1000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 2000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+
+        expect(JSON.parse(JSON.stringify(gridview.toJSON()))).toEqual({
+            grid: {
+                height: 5000,
+                width: 5000,
+                orientation: Orientation.HORIZONTAL,
+                root: {
+                    type: 'branch',
+                    size: 5000,
+                    data: [
+                        {
+                            type: 'leaf',
+                            size: 1000,
+                            data: {
+                                id: 'panel_1',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                        {
+                            type: 'branch',
+                            size: 2000,
+                            data: [
+                                {
+                                    type: 'branch',
+                                    size: 4000,
+                                    data: [
+                                        {
+                                            type: 'leaf',
+                                            size: 1000,
+                                            data: {
+                                                id: 'panel_2',
+                                                component: 'default',
+                                                snap: false,
+                                            },
+                                        },
+                                        {
+                                            type: 'branch',
+                                            size: 1000,
+                                            data: [
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_3',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                                {
+                                                    type: 'leaf',
+                                                    size: 2000,
+                                                    data: {
+                                                        id: 'panel_4',
+                                                        component: 'default',
+                                                        snap: false,
+                                                    },
+                                                },
+                                            ],
+                                        },
+                                    ],
+                                },
+                                {
+                                    type: 'leaf',
+                                    size: 1000,
+                                    data: {
+                                        id: 'panel_5',
+                                        component: 'default',
+                                        snap: false,
+                                    },
+                                },
+                            ],
+                        },
+                        {
+                            type: 'leaf',
+                            size: 2000,
+                            data: {
+                                id: 'panel_6',
+                                component: 'default',
+                                snap: false,
+                            },
+                        },
+                    ],
+                },
+            },
+            activePanel: 'panel_1',
+        });
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
index cb5763046..9ffd22e49 100644
--- a/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/paneview/paneviewComponent.spec.ts
@@ -408,4 +408,85 @@ describe('componentPaneview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const paneview = new PaneviewComponent({
+            parentElement: container,
+            components: {
+                testPanel: TestPanel,
+            },
+        });
+
+        paneview.layout(400, 600);
+
+        paneview.fromJSON({
+            size: 6,
+            views: [
+                {
+                    size: 1,
+                    data: {
+                        id: 'panel1',
+                        component: 'testPanel',
+                        title: 'Panel 1',
+                    },
+                    expanded: true,
+                },
+                {
+                    size: 2,
+                    data: {
+                        id: 'panel2',
+                        component: 'testPanel',
+                        title: 'Panel 2',
+                    },
+                    expanded: true,
+                },
+                {
+                    size: 3,
+                    data: {
+                        id: 'panel3',
+                        component: 'testPanel',
+                        title: 'Panel 3',
+                    },
+                    expanded: true,
+                },
+            ],
+        });
+
+        // heights slightly differ because header height isn't accounted for
+        expect(JSON.parse(JSON.stringify(paneview.toJSON()))).toEqual({
+            size: 600,
+            views: [
+                {
+                    size: 122,
+                    data: {
+                        id: 'panel1',
+                        component: 'testPanel',
+                        title: 'Panel 1',
+                    },
+                    expanded: true,
+                    minimumSize: 100,
+                },
+                {
+                    size: 122,
+                    data: {
+                        id: 'panel2',
+                        component: 'testPanel',
+                        title: 'Panel 2',
+                    },
+                    expanded: true,
+                    minimumSize: 100,
+                },
+                {
+                    size: 356,
+                    data: {
+                        id: 'panel3',
+                        component: 'testPanel',
+                        title: 'Panel 3',
+                    },
+                    expanded: true,
+                    minimumSize: 100,
+                },
+            ],
+        });
+    });
 });
diff --git a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
index e43c94239..81525a26c 100644
--- a/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
+++ b/packages/dockview-core/src/__tests__/splitview/splitviewComponent.spec.ts
@@ -330,7 +330,7 @@ describe('componentSplitview', () => {
                 testPanel: TestPanel,
             },
         });
-        splitview.layout(600, 400);
+        splitview.layout(400, 6);
 
         splitview.fromJSON({
             views: [
@@ -535,4 +535,57 @@ describe('componentSplitview', () => {
         expect(panel1Spy).toHaveBeenCalledTimes(1);
         expect(panel2Spy).toHaveBeenCalledTimes(1);
     });
+
+    test('that fromJSON layouts are resized to the current dimensions', async () => {
+        const splitview = new SplitviewComponent({
+            parentElement: container,
+            orientation: Orientation.VERTICAL,
+            components: {
+                testPanel: TestPanel,
+            },
+        });
+        splitview.layout(400, 600);
+
+        splitview.fromJSON({
+            views: [
+                {
+                    size: 1,
+                    data: { id: 'panel1', component: 'testPanel' },
+                    snap: false,
+                },
+                {
+                    size: 2,
+                    data: { id: 'panel2', component: 'testPanel' },
+                    snap: true,
+                },
+                { size: 3, data: { id: 'panel3', component: 'testPanel' } },
+            ],
+            size: 6,
+            orientation: Orientation.VERTICAL,
+            activeView: 'panel1',
+        });
+
+        expect(JSON.parse(JSON.stringify(splitview.toJSON()))).toEqual({
+            views: [
+                {
+                    size: 100,
+                    data: { id: 'panel1', component: 'testPanel' },
+                    snap: false,
+                },
+                {
+                    size: 200,
+                    data: { id: 'panel2', component: 'testPanel' },
+                    snap: true,
+                },
+                {
+                    size: 300,
+                    data: { id: 'panel3', component: 'testPanel' },
+                    snap: false,
+                },
+            ],
+            size: 600,
+            orientation: Orientation.VERTICAL,
+            activeView: 'panel1',
+        });
+    });
 });
diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts
index c180ad022..f62295de8 100644
--- a/packages/dockview-core/src/dockview/dockviewComponent.ts
+++ b/packages/dockview-core/src/dockview/dockviewComponent.ts
@@ -412,6 +412,10 @@ export class DockviewComponent
             throw new Error('root must be of type branch');
         }
 
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+
         this.gridview.deserialize(grid, {
             fromJSON: (node: ISerializedLeafNode<GroupPanelViewState>) => {
                 const { id, locked, hideHeader, views, activeView } = node.data;
@@ -453,6 +457,8 @@ export class DockviewComponent
             },
         });
 
+        this.layout(width, height);
+
         if (typeof activeGroup === 'string') {
             const panel = this.getPanel(activeGroup);
             if (panel) {
@@ -460,8 +466,6 @@ export class DockviewComponent
             }
         }
 
-        this.gridview.layout(this.width, this.height);
-
         this._onDidLayoutFromJSON.fire();
     }
 
diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts
index 62c2ca9fb..cd49a5624 100644
--- a/packages/dockview-core/src/gridview/gridview.ts
+++ b/packages/dockview-core/src/gridview/gridview.ts
@@ -371,8 +371,7 @@ export class Gridview implements IDisposable {
             root,
             orientation,
             deserializer,
-            orthogonalSize,
-            true
+            orthogonalSize
         ) as BranchNode;
     }
 
@@ -380,8 +379,7 @@ export class Gridview implements IDisposable {
         node: ISerializedNode,
         orientation: Orientation,
         deserializer: IViewDeserializer,
-        orthogonalSize: number,
-        isRoot = false
+        orthogonalSize: number
     ): Node {
         let result: Node;
         if (node.type === 'branch') {
@@ -398,14 +396,12 @@ export class Gridview implements IDisposable {
                 } as INodeDescriptor;
             });
 
-            // HORIZONTAL => height=orthogonalsize width=size
-            // VERTICAL => height=size width=orthogonalsize
             result = new BranchNode(
                 orientation,
                 this.proportionalLayout,
                 this.styles,
-                isRoot ? orthogonalSize : node.size,
-                isRoot ? node.size : orthogonalSize,
+                orthogonalSize, // <- size - flips at each depth
+                node.size, // <- orthogonal size - flips at each depth
                 children
             );
         } else {
diff --git a/packages/dockview-core/src/gridview/gridviewComponent.ts b/packages/dockview-core/src/gridview/gridviewComponent.ts
index b216cd8a9..40dea53aa 100644
--- a/packages/dockview-core/src/gridview/gridviewComponent.ts
+++ b/packages/dockview-core/src/gridview/gridviewComponent.ts
@@ -176,6 +176,10 @@ export class GridviewComponent
 
         const queue: Function[] = [];
 
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+
         this.gridview.deserialize(grid, {
             fromJSON: (node) => {
                 const { data } = node;
@@ -215,7 +219,7 @@ export class GridviewComponent
             },
         });
 
-        this.layout(this.width, this.height, true);
+        this.layout(width, height);
 
         queue.forEach((f) => f());
 
diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts
index 290316eb0..57c3b9beb 100644
--- a/packages/dockview-core/src/paneview/paneviewComponent.ts
+++ b/packages/dockview-core/src/paneview/paneviewComponent.ts
@@ -360,6 +360,10 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
 
         const queue: Function[] = [];
 
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -437,7 +441,7 @@ export class PaneviewComponent extends Resizable implements IPaneviewComponent {
             },
         });
 
-        this.layout(this.width, this.height);
+        this.layout(width, height);
 
         queue.forEach((f) => f());
 
diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts
index 37573c40e..973a81d24 100644
--- a/packages/dockview-core/src/splitview/splitviewComponent.ts
+++ b/packages/dockview-core/src/splitview/splitviewComponent.ts
@@ -337,6 +337,10 @@ export class SplitviewComponent
 
         const queue: Function[] = [];
 
+        // take note of the existing dimensions
+        const width = this.width;
+        const height = this.height;
+
         this.splitview = new Splitview(this.element, {
             orientation,
             proportionalLayout: this.options.proportionalLayout,
@@ -387,7 +391,7 @@ export class SplitviewComponent
             },
         });
 
-        this.layout(this.width, this.height);
+        this.layout(width, height);
 
         queue.forEach((f) => f());
 

From 5058a9c9788fbcc571341a7a4ad3ea231c829a57 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sat, 17 Jun 2023 14:09:26 +0100
Subject: [PATCH 15/19] chore: fix docs

---
 packages/docs/blog/2022-06-12-dockview-1.5.0.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/blog/2022-06-12-dockview-1.5.0.mdx b/packages/docs/blog/2022-06-12-dockview-1.5.0.mdx
index 2eb8a31d5..bb9f9ea59 100644
--- a/packages/docs/blog/2022-06-12-dockview-1.5.0.mdx
+++ b/packages/docs/blog/2022-06-12-dockview-1.5.0.mdx
@@ -20,7 +20,7 @@ import Link from '@docusaurus/Link';
     -   Provide a default React tab implementation to allow for simple changes to tab renderer without rewritting the entire tab
     -   Override the default tab in `ReactDockview` with the `defaultTabComponent` prop
 -   Group controls renderer [#138](https://github.com/mathuo/dockview/pull/138)
-    -   Provide the `groupControlComponent` prop in `ReactDockview` to create custom control components for groups. <Link to="../../docs/components/dockview/#group-controls-panel">Go</Link>
+    -   Provide the `groupControlComponent` prop in `ReactDockview` to create custom control components for groups.
 
 ## 🛠 Miscs
 

From f483e0849718c0ea095df826535acf1274c08da0 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sat, 17 Jun 2023 13:26:21 +0100
Subject: [PATCH 16/19] chore: update versions on github actions

---
 .github/workflows/codeql-analysis.yml | 2 +-
 .github/workflows/deploy-docs.yml     | 8 ++------
 .github/workflows/main.yml            | 4 ++--
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 7222bc815..035c9224f 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -30,7 +30,7 @@ jobs:
 
         steps:
             - name: Checkout repository
-              uses: actions/checkout@v2
+              uses: actions/checkout@v3
 
             # Initializes the CodeQL tools for scanning.
             - name: Initialize CodeQL
diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
index 6b82733a6..f81e2271b 100644
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -9,16 +9,13 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - name: Checkout 🛎️
-              uses: actions/checkout@v2.3.1 # If you're using actions/checkout@v2 you must set persist-credentials to false in most cases for the deployment to work correctly.
-              with:
-                  persist-credentials: false
-
+              uses: actions/checkout@v3
             - name: Use Node.js
               uses: actions/setup-node@v1
               with:
                   node-version: '16.x'
 
-            - uses: actions/cache@v2
+            - uses: actions/cache@v3
               with:
                   path: ~/.npm
                   key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
@@ -26,7 +23,6 @@ jobs:
                       ${{ runner.os }}-node-
 
             - run: yarn install
-            - run: lerna bootstrap
             - run: npm run build
               working-directory: packages/dockview-core
             - run: npm run build
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index ebf84ee07..39a05c47c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -7,7 +7,7 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v3
               # might be required for sonar to work correctly
               with:
                   fetch-depth: 0 # Shallow clones should be disabled for a better relevancy of analysis
@@ -16,7 +16,7 @@ jobs:
               with:
                   node-version: '16.x'
 
-            - uses: actions/cache@v2
+            - uses: actions/cache@v3
               with:
                   path: ~/.npm
                   key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}

From 2c8422b85e057b4494545909454329374d71c1b8 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sat, 17 Jun 2023 15:45:34 +0100
Subject: [PATCH 17/19] fix: remove .preventDefault() on touch events

---
 .../src/__tests__/splitview/splitview.spec.ts | 104 ++++--------------
 .../dockview-core/src/splitview/splitview.ts  |  49 ++-------
 2 files changed, 34 insertions(+), 119 deletions(-)

diff --git a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
index a93d7daf4..ec7654393 100644
--- a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
+++ b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts
@@ -599,7 +599,7 @@ describe('splitview', () => {
         expect(container.childNodes.length).toBe(0);
     });
 
-    test('dnd: mouse events to move sash', () => {
+    test('dnd: pointer events to move sash', () => {
         const splitview = new Splitview(container, {
             orientation: Orientation.HORIZONTAL,
             proportionalLayout: false,
@@ -629,107 +629,51 @@ describe('splitview', () => {
         expect(view2.element.parentElement!.style.pointerEvents).toBe('');
 
         // start the drag event
-        fireEvent.mouseDown(sashElement, { clientX: 50, clientY: 100 });
-
-        expect(addEventListenerSpy).toBeCalledTimes(5);
-
-        // during a sash drag the views should have pointer-events disabled
-        expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
-        expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
-
-        // expect a delta move of 70 - 50 = 20
-        fireEvent.mouseMove(document, { clientX: 70, clientY: 110 });
-        expect([view1.size, view2.size]).toEqual([220, 180]);
-
-        // expect a delta move of 75 - 70 = 5
-        fireEvent.mouseMove(document, { clientX: 75, clientY: 110 });
-        expect([view1.size, view2.size]).toEqual([225, 175]);
-
-        // end the drag event
-        fireEvent.mouseUp(document);
-
-        expect(removeEventListenerSpy).toBeCalledTimes(5);
-
-        // expect pointer-eventes on views to be restored
-        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
-        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
-
-        fireEvent.mouseMove(document, { clientX: 100, clientY: 100 });
-        // expect no additional resizes
-        expect([view1.size, view2.size]).toEqual([225, 175]);
-        // expect no additional document listeners
-        expect(addEventListenerSpy).toBeCalledTimes(5);
-        expect(removeEventListenerSpy).toBeCalledTimes(5);
-    });
-
-    test('dnd: touch events to move sash', () => {
-        const splitview = new Splitview(container, {
-            orientation: Orientation.HORIZONTAL,
-            proportionalLayout: false,
-        });
-        splitview.layout(400, 500);
-
-        const view1 = new Testview(0, 1000);
-        const view2 = new Testview(0, 1000);
-
-        splitview.addView(view1);
-        splitview.addView(view2);
-
-        const addEventListenerSpy = jest.spyOn(document, 'addEventListener');
-        const removeEventListenerSpy = jest.spyOn(
-            document,
-            'removeEventListener'
+        fireEvent(
+            sashElement,
+            new MouseEvent('pointerdown', { clientX: 50, clientY: 100 })
         );
 
-        const sashElement = container
-            .getElementsByClassName('sash')
-            .item(0) as HTMLElement;
-
-        // validate the expected state before drag
-        expect([view1.size, view2.size]).toEqual([200, 200]);
-        expect(sashElement).toBeTruthy();
-        expect(view1.element.parentElement!.style.pointerEvents).toBe('');
-        expect(view2.element.parentElement!.style.pointerEvents).toBe('');
-
-        // start the drag event
-        fireEvent.touchStart(sashElement, {
-            touches: [{ clientX: 50, clientY: 100 }],
-        });
-
-        expect(addEventListenerSpy).toBeCalledTimes(5);
+        expect(addEventListenerSpy).toBeCalledTimes(3);
 
         // during a sash drag the views should have pointer-events disabled
         expect(view1.element.parentElement!.style.pointerEvents).toBe('none');
         expect(view2.element.parentElement!.style.pointerEvents).toBe('none');
 
         // expect a delta move of 70 - 50 = 20
-        fireEvent.touchMove(document, {
-            touches: [{ clientX: 70, clientY: 110 }],
-        });
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 70, clientY: 110 })
+        );
         expect([view1.size, view2.size]).toEqual([220, 180]);
 
         // expect a delta move of 75 - 70 = 5
-        fireEvent.touchMove(document, {
-            touches: [{ clientX: 75, clientY: 110 }],
-        });
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 75, clientY: 110 })
+        );
         expect([view1.size, view2.size]).toEqual([225, 175]);
 
         // end the drag event
-        fireEvent.touchEnd(document);
+        fireEvent(
+            document,
+            new MouseEvent('pointerup', { clientX: 70, clientY: 110 })
+        );
 
-        expect(removeEventListenerSpy).toBeCalledTimes(5);
+        expect(removeEventListenerSpy).toBeCalledTimes(3);
 
         // expect pointer-eventes on views to be restored
         expect(view1.element.parentElement!.style.pointerEvents).toBe('');
         expect(view2.element.parentElement!.style.pointerEvents).toBe('');
 
-        fireEvent.touchMove(document, {
-            touches: [{ clientX: 100, clientY: 100 }],
-        });
+        fireEvent(
+            document,
+            new MouseEvent('pointermove', { clientX: 100, clientY: 100 })
+        );
         // expect no additional resizes
         expect([view1.size, view2.size]).toEqual([225, 175]);
         // expect no additional document listeners
-        expect(addEventListenerSpy).toBeCalledTimes(5);
-        expect(removeEventListenerSpy).toBeCalledTimes(5);
+        expect(addEventListenerSpy).toBeCalledTimes(3);
+        expect(removeEventListenerSpy).toBeCalledTimes(3);
     });
 });
diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts
index 98dcce6a8..007a8e60a 100644
--- a/packages/dockview-core/src/splitview/splitview.ts
+++ b/packages/dockview-core/src/splitview/splitview.ts
@@ -393,17 +393,7 @@ export class Splitview {
             const sash = document.createElement('div');
             sash.className = 'sash';
 
-            const onTouchStart = (event: TouchEvent) => {
-                event.preventDefault();
-                const touch = event.touches[0];
-                onStart(touch);
-            };
-
-            const onMouseDown = (event: MouseEvent) => {
-                onStart(event);
-            };
-
-            const onStart = (event: { clientX: number; clientY: number }) => {
+            const onPointerStart = (event: PointerEvent) => {
                 for (const item of this.viewItems) {
                     item.enabled = false;
                 }
@@ -497,20 +487,7 @@ export class Splitview {
                     };
                 }
 
-                const onMouseMove = (event: MouseEvent) => {
-                    reposition(event);
-                };
-
-                const onTouchMove = (event: TouchEvent) => {
-                    event.preventDefault();
-                    const touch = event.touches[0];
-                    reposition(touch);
-                };
-
-                const reposition = (event: {
-                    clientX: number;
-                    clientY: number;
-                }) => {
+                const onPointerMove = (event: PointerEvent) => {
                     const current =
                         this._orientation === Orientation.HORIZONTAL
                             ? event.clientX
@@ -543,30 +520,24 @@ export class Splitview {
 
                     this.saveProportions();
 
-                    document.removeEventListener('mousemove', onMouseMove);
-                    document.removeEventListener('mouseup', end);
-                    document.removeEventListener('touchmove', onTouchMove);
-                    document.removeEventListener('touchend', end);
-                    document.removeEventListener('touchcancel', end);
+                    document.removeEventListener('pointermove', onPointerMove);
+                    document.removeEventListener('pointerup', end);
+                    document.removeEventListener('pointercancel', end);
 
                     this._onDidSashEnd.fire(undefined);
                 };
 
-                document.addEventListener('mousemove', onMouseMove);
-                document.addEventListener('mouseup', end);
-                document.addEventListener('touchmove', onTouchMove);
-                document.addEventListener('touchend', end);
-                document.addEventListener('touchcancel', end);
+                document.addEventListener('pointermove', onPointerMove);
+                document.addEventListener('pointerup', end);
+                document.addEventListener('pointercancel', end);
             };
 
-            sash.addEventListener('mousedown', onMouseDown);
-            sash.addEventListener('touchstart', onTouchStart);
+            sash.addEventListener('pointerdown', onPointerStart);
 
             const sashItem: ISashItem = {
                 container: sash,
                 disposable: () => {
-                    sash.removeEventListener('mousedown', onStart);
-                    sash.removeEventListener('touchstart', onTouchStart);
+                    sash.removeEventListener('pointerdown', onPointerStart);
                     this.sashContainer.removeChild(sash);
                 },
             };

From 13516a5f37c6f4481685238bf7a6e110716a1850 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Tue, 20 Jun 2023 20:46:51 +0100
Subject: [PATCH 18/19] fix: pointmove sash events

---
 packages/dockview-core/src/splitview/splitview.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss
index c46ceb250..1f0df7ca9 100644
--- a/packages/dockview-core/src/splitview/splitview.scss
+++ b/packages/dockview-core/src/splitview/splitview.scss
@@ -106,6 +106,7 @@
             -webkit-user-select: none; // Safari
             -moz-user-select: none; // Firefox
             -ms-user-select: none; // IE 10 and IE 11
+            touch-action: none;
 
             &:active {
                 transition: background-color 0.1s ease-in-out;

From 5d1b6c336f066cfc43eb07ad6d27e1e30d1fe16f Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Wed, 21 Jun 2023 19:57:30 +0100
Subject: [PATCH 19/19] chore(release): publish v1.7.6

---
 lerna.json                          | 2 +-
 packages/dockview-core/package.json | 2 +-
 packages/dockview/package.json      | 4 ++--
 packages/docs/package.json          | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lerna.json b/lerna.json
index 77cdbbf1c..14afc2271 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,7 +3,7 @@
     "packages/*"
   ],
   "useWorkspaces": true,
-  "version": "1.7.5",
+  "version": "1.7.6",
   "npmClient": "yarn",
   "command": {
     "publish": {
diff --git a/packages/dockview-core/package.json b/packages/dockview-core/package.json
index 1590381fd..6627b402b 100644
--- a/packages/dockview-core/package.json
+++ b/packages/dockview-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview-core",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
diff --git a/packages/dockview/package.json b/packages/dockview/package.json
index 8232edcc7..86c778d43 100644
--- a/packages/dockview/package.json
+++ b/packages/dockview/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
   "main": "./dist/cjs/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -56,7 +56,7 @@
   "author": "https://github.com/mathuo",
   "license": "MIT",
   "dependencies": {
-    "dockview-core": "^1.7.5"
+    "dockview-core": "^1.7.6"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 577f43f60..b2862a1bd 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dockview-docs",
-  "version": "1.7.5",
+  "version": "1.7.6",
   "private": true,
   "scripts": {
     "docusaurus": "docusaurus",
@@ -22,7 +22,7 @@
     "@minoru/react-dnd-treeview": "^3.4.3",
     "axios": "^1.3.3",
     "clsx": "^1.2.1",
-    "dockview": "^1.7.5",
+    "dockview": "^1.7.6",
     "prism-react-renderer": "^1.3.5",
     "react": "^18.2.0",
     "react-dnd": "^16.0.1",