Merge branch 'master' of https://github.com/mathuo/dockview into 100-docs

docs/docusaurus.config.js

@@ -14,7 +14,7 @@ const config = {
     title: 'Dockview',
     tagline: 'Zero dependency layout manager for React',
     url: 'https://your-docusaurus-test-site.com',
-    baseUrl: process.env.CI ? `/dockview/${DEPLOY_PATH}/` : '/',
+    baseUrl: process.env.CI ? `/${DEPLOY_PATH}/` : '/',
     onBrokenLinks: 'throw',
     onBrokenMarkdownLinks: 'warn',
     favicon: 'img/favicon.ico',
@@ -37,15 +37,6 @@ const config = {
             return {
                 name: 'webpack',
                 configureWebpack: (config, isServer, utils) => {
-                    if (isServer) {
-                        return {
-                            externals: [
-                                'react',
-                                'react-dom',
-                                ...(config.externals || []),
-                            ],
-                        };
-                    }
                     return {
                         // externals: ['react', 'react-dom'],
                         devtool: 'source-map',

docs/package.json

@@ -20,7 +20,7 @@
     "@docusaurus/preset-classic": "2.0.0-beta.20",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.1.1",
-    "dockview": "file:../packages/dockview",
+    "dockview": "^1.4.2",
     "prism-react-renderer": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

packages/dockview/src/__tests__/gridview/baseComponentGridview.spec.ts

@@ -100,6 +100,10 @@ class ClassUnderTest extends BaseGrid<TestPanel> {
     public toJSON(): object {
         return {};
     }
+
+    public clear(): void {
+        //
+    }
 }
 
 describe('baseComponentGridview', () => {

packages/dockview/src/api/component.api.ts

@@ -43,6 +43,7 @@ export interface CommonApi<T = any> {
     layout(width: number, height: number): void;
     fromJSON(data: T): void;
     toJSON(): T;
+    clear(): void;
 }
 
 export class SplitviewApi implements CommonApi<SerializedSplitview> {
@@ -127,6 +128,10 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
     toJSON(): SerializedSplitview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class PaneviewApi implements CommonApi<SerializedPaneview> {
@@ -214,6 +219,10 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
     toJSON(): SerializedPaneview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class GridviewApi implements CommonApi<SerializedGridview> {
@@ -309,6 +318,10 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
     toJSON(): SerializedGridview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }
 
 export class DockviewApi implements CommonApi<SerializedDockview> {
@@ -453,4 +466,8 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
     toJSON(): SerializedDockview {
         return this.component.toJSON();
     }
+
+    clear(): void {
+        this.component.clear();
+    }
 }

packages/dockview/src/dockview/dockviewComponent.ts

@@ -125,7 +125,7 @@ export class DockviewComponent
 {
   private _deserializer: IPanelDeserializer | undefined;
   private _api: DockviewApi;
-  private _options: DockviewComponentOptions;
+  private _options: Exclude<DockviewComponentOptions, 'orientation'>;
 
   private readonly _onTabContextMenu = new Emitter<TabContextMenuEvent>();
   readonly onTabContextMenu: Event<TabContextMenuEvent> =
@@ -237,7 +237,7 @@ export class DockviewComponent
   updateOptions(options: DockviewComponentUpdateOptions): void {
       const hasOrientationChanged =
           typeof options.orientation === 'string' &&
-          this.options.orientation !== options.orientation;
+          this.gridview.orientation !== options.orientation;
 
       this._options = { ...this.options, ...options };
 
@@ -333,25 +333,7 @@ export class DockviewComponent
   }
 
   fromJSON(data: SerializedDockview): void {
-      const groups = Array.from(this._groups.values()).map((_) => _.value);
+      this.clear()
-
-      const hasActiveGroup = !!this.activeGroup;
-      const hasActivePanel = !!this.activePanel
-
-      for (const group of groups) {
-          // remove the group will automatically remove the panels
-          this.removeGroup(group, true);
-      }
-
-      if (hasActiveGroup) {
-        this.doSetGroupActive(undefined);
-      }
-
-      if( hasActivePanel) {
-        this._onDidActivePanelChange.fire(undefined);
-      }
-
-      this.gridview.clear();
 
       if (!this.deserializer) {
           throw new Error('invalid deserializer');
@@ -414,6 +396,28 @@ export class DockviewComponent
       this._onDidLayoutFromJSON.fire();
   }
 
+  clear():void {
+    const groups = Array.from(this._groups.values()).map((_) => _.value);
+
+    const hasActiveGroup = !!this.activeGroup;
+    const hasActivePanel = !!this.activePanel
+
+    for (const group of groups) {
+        // remove the group will automatically remove the panels
+        this.removeGroup(group, true);
+    }
+
+    if (hasActiveGroup) {
+      this.doSetGroupActive(undefined);
+    }
+
+    if( hasActivePanel) {
+      this._onDidActivePanelChange.fire(undefined);
+    }
+
+    this.gridview.clear();
+  }
+
   closeAllGroups(): void {
       for (const entry of this._groups.entries()) {
           const [_, group] = entry;

packages/dockview/src/gridview/baseComponentGridview.ts

@@ -61,6 +61,7 @@ export interface IBaseGrid<T extends IGridPanelView> {
     getPanel(id: string): T | undefined;
     toJSON(): object;
     fromJSON(data: any): void;
+    clear(): void;
     layout(width: number, height: number, force?: boolean): void;
     setVisible(panel: T, visible: boolean): void;
     isVisible(panel: T): boolean;
@@ -173,6 +174,8 @@ export abstract class BaseGrid<T extends IGridPanelView>
 
     public abstract fromJSON(data: any): void;
 
+    public abstract clear(): void;
+
     public setVisible(panel: T, visible: boolean) {
         this.gridview.setViewVisible(getGridLocation(panel.element), visible);
         this._onDidLayoutChange.fire();

packages/dockview/src/gridview/gridviewComponent.ts

@@ -78,7 +78,7 @@ export class GridviewComponent
     extends BaseGrid<GridviewPanel>
     implements IGridviewComponent
 {
-    private _options: GridviewComponentOptions;
+    private _options: Exclude<GridviewComponentOptions, 'orientation'>;
     private _deserializer: IPanelDeserializer | undefined;
 
     private readonly _onDidLayoutfromJSON = new Emitter<void>();
@@ -124,7 +124,7 @@ export class GridviewComponent
     updateOptions(options: Partial<GridviewComponentUpdateOptions>): void {
         const hasOrientationChanged =
             typeof options.orientation === 'string' &&
-            this.options.orientation !== options.orientation;
+            this.gridview.orientation !== options.orientation;
 
         this._options = { ...this.options, ...options };
 
@@ -173,22 +173,10 @@ export class GridviewComponent
     }
 
     public fromJSON(serializedGridview: SerializedGridview) {
+        this.clear();
+
         const { grid, activePanel } = serializedGridview;
 
-        const hasActiveGroup = this.activeGroup;
-
-        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
-        for (const group of groups) {
-            group.disposable.dispose();
-            this.doRemoveGroup(group.value, { skipActive: true });
-        }
-
-        if (hasActiveGroup) {
-            this.doSetGroupActive(undefined);
-        }
-
-        this.gridview.clear();
-
         const queue: Function[] = [];
 
         this.gridview.deserialize(grid, {
@@ -244,6 +232,22 @@ export class GridviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        const hasActiveGroup = this.activeGroup;
+
+        const groups = Array.from(this._groups.values()); // reassign since group panels will mutate
+        for (const group of groups) {
+            group.disposable.dispose();
+            this.doRemoveGroup(group.value, { skipActive: true });
+        }
+
+        if (hasActiveGroup) {
+            this.doSetGroupActive(undefined);
+        }
+
+        this.gridview.clear();
+    }
+
     movePanel(
         panel: GridviewPanel,
         options: { direction: Direction; reference: string; size?: number }

packages/dockview/src/paneview/defaultPaneviewHeader.ts

@@ -3,6 +3,7 @@ import { PaneviewPanelApiImpl } from '../api/paneviewPanelApi';
 import { CompositeDisposable, MutableDisposable } from '../lifecycle';
 import { PanelUpdateEvent } from '../panel/types';
 import { IPaneHeaderPart, PanePanelInitParameter } from './paneviewPanel';
+import { toggleClass } from '../dom';
 
 export class DefaultHeader
     extends CompositeDisposable
@@ -40,10 +41,12 @@ export class DefaultHeader
         this.apiRef.api = params.api;
 
         this._content.textContent = params.title;
-        this._expander.textContent = params.api.isExpanded ? '▼' : '▶';
+        this._expander.textContent = '▼';
+
+        toggleClass(this._expander, 'collapsed', !params.api.isExpanded);
 
         this.disposable.value = params.api.onDidExpansionChange((e) => {
-            this._expander.textContent = e.isExpanded ? '▼' : '▶';
+            toggleClass(this._expander, 'collapsed', !e.isExpanded);
         });
     }
 

packages/dockview/src/paneview/paneview.scss

@@ -31,12 +31,12 @@
             padding: 0px 8px;
             cursor: pointer;
 
-            a {
+            .collapsed {
-                padding-right: 8px;
+                transform: rotate(-90deg);
-                width: 10px;
             }
 
             > span {
+                padding-left: 8px;
                 flex-grow: 1;
             }
         }

packages/dockview/src/paneview/paneviewComponent.ts

@@ -113,6 +113,7 @@ export interface IPaneviewComponent extends IDisposable {
     getPanel(id: string): IPaneviewPanel | undefined;
     movePanel(from: number, to: number): void;
     updateOptions(options: Partial<PaneviewComponentOptions>): void;
+    clear(): void;
 }
 
 export class PaneviewComponent
@@ -343,17 +344,12 @@ export class PaneviewComponent
     }
 
     fromJSON(serializedPaneview: SerializedPaneview): void {
+        this.clear();
+
         const { views, size } = serializedPaneview;
 
         const queue: Function[] = [];
 
-        for (const [_, value] of this._viewDisposables.entries()) {
-            value.dispose();
-        }
-        this._viewDisposables.clear();
-
-        this.paneview.dispose();
-
         this.paneview = new Paneview(this.element, {
             orientation: Orientation.VERTICAL,
             descriptor: {
@@ -437,6 +433,15 @@ export class PaneviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        for (const [_, value] of this._viewDisposables.entries()) {
+            value.dispose();
+        }
+        this._viewDisposables.clear();
+
+        this.paneview.dispose();
+    }
+
     private doAddPanel(panel: PaneFramework) {
         const disposable = panel.onDidDrop((event) => {
             this._onDidDrop.fire(event);

packages/dockview/src/splitview/splitviewComponent.ts

@@ -72,6 +72,7 @@ export interface ISplitviewComponent extends IDisposable {
     removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
     setVisible(panel: ISplitviewPanel, visible: boolean): void;
     movePanel(from: number, to: number): void;
+    clear(): void;
 }
 
 /**
@@ -334,14 +335,9 @@ export class SplitviewComponent
     }
 
     fromJSON(serializedSplitview: SerializedSplitview): void {
-        const { views, orientation, size, activeView } = serializedSplitview;
+        this.clear();
 
-        for (const [_, value] of this._panels.entries()) {
+        const { views, orientation, size, activeView } = serializedSplitview;
-            value.disposable.dispose();
-            value.value.dispose();
-        }
-        this._panels.clear();
-        this.splitview.dispose();
 
         const queue: Function[] = [];
 
@@ -409,6 +405,15 @@ export class SplitviewComponent
         this._onDidLayoutfromJSON.fire();
     }
 
+    clear(): void {
+        for (const [_, value] of this._panels.entries()) {
+            value.disposable.dispose();
+            value.value.dispose();
+        }
+        this._panels.clear();
+        this.splitview.dispose();
+    }
+
     dispose(): void {
         for (const [_, value] of this._panels.entries()) {
             value.disposable.dispose();