Merge pull request #139 from mathuo/133-dnd-enhancements

feat: don't serialize info when using default tab

packages/dockview/src/__tests__/react/dockview/groupControlsRenderer.spec.ts

@@ -0,0 +1,56 @@
+import { Groupview } from '../../../groupview/groupview';
+import {
+    GroupPanel,
+    GroupviewPanelApi,
+} from '../../../groupview/groupviewPanel';
+import { ReactGroupControlsRendererPart } from '../../../react/dockview/groupControlsRenderer';
+
+describe('groupControlsRenderer', () => {
+    test('#1', () => {
+        const groupviewMock = jest.fn<Partial<Groupview>, []>(() => {
+            return {
+                onDidAddPanel: jest.fn(),
+                onDidRemovePanel: jest.fn(),
+                onDidActivePanelChange: jest.fn(),
+            };
+        });
+
+        const groupview = new groupviewMock() as Groupview;
+
+        const groupPanelMock = jest.fn<Partial<GroupPanel>, []>(() => {
+            return {
+                api: {} as GroupviewPanelApi as any,
+                model: groupview,
+            };
+        });
+
+        const groupPanel = new groupPanelMock() as GroupPanel;
+
+        const cut = new ReactGroupControlsRendererPart(
+            jest.fn(),
+            {
+                addPortal: jest.fn(),
+            },
+            groupPanel
+        );
+
+        expect(cut.element.childNodes.length).toBe(0);
+        expect(cut.element.className).toBe('dockview-react-part');
+        expect(cut.part).toBeUndefined();
+
+        cut.init({
+            containerApi: <any>jest.fn(),
+            api: <any>{
+                onDidActiveChange: jest.fn(),
+            },
+        });
+
+        const update = jest.fn();
+
+        jest.spyOn(cut.part!, 'update').mockImplementation(update);
+
+        cut.update({ params: { valueA: 'A' } });
+
+        expect(update).toBeCalledWith({ valueA: 'A' });
+    });
+});

packages/dockview/src/__tests__/react/dockview/reactHeaderPart.spec.ts

@@ -0,0 +1,24 @@
+import { DEFAULT_TAB_IDENTIFIER } from '../../../react';
+import { ReactPanelHeaderPart } from '../../../react/dockview/reactHeaderPart';
+
+describe('reactHeaderPart', () => {
+    test('that tab id is present in toJSON when not the default tab', () => {
+        const cut = new ReactPanelHeaderPart(
+            'test-id',
+            jest.fn(),
+            <any>jest.fn()
+        );
+
+        expect(cut.toJSON()).toEqual({ id: 'test-id' });
+    });
+
+    test('that tab id is not present in the toJSON when is default tab', () => {
+        const cut = new ReactPanelHeaderPart(
+            DEFAULT_TAB_IDENTIFIER,
+            jest.fn(),
+            <any>jest.fn()
+        );
+
+        expect(cut.toJSON()).toEqual({});
+    });
+});

packages/dockview/src/dockview/defaultGroupPanelView.ts

@@ -55,9 +55,16 @@ export class DefaultGroupPanelView implements IGroupPanelView {
     }
 
     toJSON(): {} {
+        let tab =
+            this.tab instanceof DefaultTab ? undefined : this.tab.toJSON();
+
+        if (tab && Object.keys(tab).length === 0) {
+            tab = undefined;
+        }
+
         return {
             content: this.content.toJSON(),
-            tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
+            tab,
         };
     }
 

packages/dockview/src/react/dockview/reactHeaderPart.ts

@@ -6,7 +6,7 @@ import {
 import { GroupPanel } from '../../groupview/groupviewPanel';
 import { PanelUpdateEvent } from '../../panel/types';
 import { ReactPart, ReactPortalStore } from '../react';
-import { IGroupPanelBaseProps } from './dockview';
+import { DEFAULT_TAB_IDENTIFIER, IGroupPanelBaseProps } from './dockview';
 
 export class ReactPanelHeaderPart implements ITabRenderer {
     private _element: HTMLElement;
@@ -47,6 +47,10 @@ export class ReactPanelHeaderPart implements ITabRenderer {
     }
 
     public toJSON() {
+        if (this.id === DEFAULT_TAB_IDENTIFIER) {
+            return {};
+        }
+
         return {
             id: this.id,
         };

packages/dockview/src/theme.scss

@@ -63,21 +63,64 @@
 .dockview-theme-vs {
     @include dockview-theme-dark-mixin();
 
-    --dv-activegroup-visiblepanel-tab-background-color: dodgerblue;
-    --dv-tabs-and-actions-container-height: 18px;
+    --dv-tabs-and-actions-container-background-color: #2d2d30;
+
+    --dv-tabs-and-actions-container-height: 20px;
     --dv-tabs-and-actions-container-font-size: 11px;
 
+    --dv-activegroup-visiblepanel-tab-background-color: #007acc;
+    --dv-inactivegroup-visiblepanel-tab-background-color: #3f3f46;
+
+    --dv-activegroup-visiblepanel-tab-color: white;
+    --dv-activegroup-hiddenpanel-tab-color: white;
+    --dv-inactivegroup-visiblepanel-tab-color: white;
+    --dv-inactivegroup-hiddenpanel-tab-color: white;
+
     .groupview {
         &.active-group {
             > .tabs-and-actions-container {
+                box-sizing: content-box;
                 border-bottom: 2px solid
                     var(--dv-activegroup-visiblepanel-tab-background-color);
+
+                .tab {
+                    &.active-tab {
+                        border-top: 2px solid
+                            var(
+                                --dv-activegroup-visiblepanel-tab-background-color
+                            );
+                    }
+
+                    &.inactive-tab {
+                        border-top: 2px solid
+                            var(
+                                --dv-activegroup-hiddenpanel-tab-background-color
+                            );
+                    }
+                }
             }
         }
         &.inactive-group {
             > .tabs-and-actions-container {
+                box-sizing: content-box;
                 border-bottom: 2px solid
                     var(--dv-inactivegroup-visiblepanel-tab-background-color);
+
+                .tab {
+                    &.active-tab {
+                        border-top: 2px solid
+                            var(
+                                --dv-inactivegroup-visiblepanel-tab-background-color
+                            );
+                    }
+
+                    &.inactive-tab {
+                        border-top: 2px solid
+                            var(
+                                --dv-inactivegroup-hiddenpanel-tab-background-color
+                            );
+                    }
+                }
             }
         }
     }
@@ -107,6 +150,77 @@
     --dv-paneview-active-outline-color: #596f99;
 }
 
+@mixin dockview-theme-dracula-mixin {
+    @include dockview-theme-core-mixin();
+    //
+    --dv-group-view-background-color: #282a36;
+    //
+    --dv-tabs-and-actions-container-background-color: #191a21;
+    //
+    --dv-activegroup-visiblepanel-tab-background-color: #282a36;
+    --dv-activegroup-hiddenpanel-tab-background-color: #21222c;
+    --dv-inactivegroup-visiblepanel-tab-background-color: #282a36;
+    --dv-inactivegroup-hiddenpanel-tab-background-color: #21222c;
+    --dv-tab-divider-color: #191a21;
+    //
+    --dv-activegroup-visiblepanel-tab-color: rgb(248, 248, 242);
+    --dv-activegroup-hiddenpanel-tab-color: rgb(98, 114, 164);
+    --dv-inactivegroup-visiblepanel-tab-color: rgba(248, 248, 242, 0.5);
+    --dv-inactivegroup-hiddenpanel-tab-color: rgba(98, 114, 164, 0.5);
+    //
+    --dv-separator-border: #bd93f9;
+    --dv-paneview-header-border-color: #bd93f9;
+
+    --dv-paneview-active-outline-color: #6272a4;
+
+    .groupview {
+        &.active-group {
+            > .tabs-and-actions-container {
+                > .tabs-container {
+                    > .tab.active-tab {
+                        position: relative;
+
+                        &::after {
+                            position: absolute;
+                            left: 0px;
+                            top: 0px;
+                            content: '';
+                            width: 100%;
+                            height: 1px;
+                            background-color: #94527e;
+                            z-index: 999;
+                        }
+                    }
+                }
+            }
+        }
+        &.inactive-group {
+            > .tabs-and-actions-container {
+                > .tabs-container {
+                    > .tab.active-tab {
+                        position: relative;
+
+                        &::after {
+                            position: absolute;
+                            left: 0px;
+                            bottom: 0px;
+                            content: '';
+                            width: 100%;
+                            height: 1px;
+                            background-color: #5e3d5a;
+                            z-index: 999;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
 .dockview-theme-abyss {
     @include dockview-theme-abyss-mixin();
 }
+
+.dockview-theme-dracula {
+    @include dockview-theme-dracula-mixin();
+}