code

packages/splitview-demo/src/layout-grid/application.tsx

@@ -37,7 +37,7 @@ export const Application = () => {
         // return;
 
         event.api.addComponent({
-            id: '0',
+            id: 'i',
             component: 'activitybar',
             minimumWidth: 48,
             maximumWidth: 48,
@@ -45,7 +45,7 @@ export const Application = () => {
         });
 
         event.api.addComponent({
-            id: '4',
+            id: 'footer',
             component: 'footer',
             location: [1],
             maximumHeight: 22,
@@ -53,7 +53,7 @@ export const Application = () => {
         });
 
         event.api.addComponent({
-            id: '2',
+            id: 'editor',
             component: 'editor',
             snap: true,
             location: [0, 1],
@@ -64,15 +64,15 @@ export const Application = () => {
             id: 'sidebar',
             component: 'sidebar',
             snap: true,
-            position: { reference: '2', direction: 'left' },
+            position: { reference: 'editor', direction: 'left' },
             minimumWidth: 170,
             size: 100,
         });
 
         event.api.addComponent({
-            id: '3',
+            id: 'panel',
             component: 'panel',
-            position: { reference: '2', direction: 'below' },
+            position: { reference: 'editor', direction: 'below' },
             size: 200,
             snap: true,
         });

packages/splitview-demo/src/layout-grid/panel.tsx

@@ -20,8 +20,16 @@ export const Panel = (props: IGridviewPanelProps) => {
         };
     }, []);
 
-    const onClick = () => {
+    const onToggle = () => {
-        props.api.setSize({ height: 500 });
+        const editorPanel = props.containerApi.getPanel('editor');
+        editorPanel.api.setVisible(!editorPanel.api.isVisible);
+    };
+
+    const onClose = () => {
+        const editorPanel = props.containerApi.getPanel('editor');
+
+        editorPanel.api.setVisible(true);
+        props.api.setVisible(false);
     };
 
     return (
@@ -36,7 +44,8 @@ export const Panel = (props: IGridviewPanelProps) => {
             <div style={{ display: 'flex', padding: '5px' }}>
                 <span>This panel is outside of the dockable layer</span>
                 <span style={{ flexGrow: 1 }} />
-                <button onClick={onClick}>Resize</button>
+                <button onClick={onToggle}>Resize</button>
+                <button onClick={onClose}>Close</button>
             </div>
             <div style={{ padding: '0px 5px' }}>
                 <div>{`isPanelActive: ${active} isPanelFocused: ${focused}`}</div>

packages/splitview/src/api/api.ts

@@ -44,6 +44,8 @@ export interface IBaseViewApi {
     onDidVisibilityChange: Event<VisibilityEvent>;
     onDidActiveChange: Event<ActiveEvent>;
     onFocusEvent: Event<void>;
+    //
+    setVisible(isVisible: boolean): void;
     // state
     setState(key: string, value: StateObject): void;
     setState(state: State): void;
@@ -64,7 +66,7 @@ export class BaseViewApi extends CompositeDisposable implements IBaseViewApi {
     private _state: State = {};
     private _isFocused = false;
     private _isActive = false;
-    private _isVisible = false;
+    private _isVisible = true;
     private _width = 0;
     private _height = 0;
 
@@ -92,6 +94,11 @@ export class BaseViewApi extends CompositeDisposable implements IBaseViewApi {
     readonly onDidVisibilityChange: Event<VisibilityEvent> = this
         ._onDidVisibilityChange.event;
     //
+
+    readonly _onVisibilityChange = new Emitter<VisibilityEvent>();
+    readonly onVisibilityChange: Event<VisibilityEvent> = this
+        ._onVisibilityChange.event;
+    //
     readonly _onDidActiveChange = new Emitter<ActiveEvent>({
         replay: true,
     });
@@ -144,6 +151,10 @@ export class BaseViewApi extends CompositeDisposable implements IBaseViewApi {
         );
     }
 
+    setVisible(isVisible: boolean) {
+        this._onVisibilityChange.fire({ isVisible });
+    }
+
     setState(
         key: string | { [key: string]: StateObject },
         value?: StateObject

packages/splitview/src/api/component.api.ts

@@ -40,6 +40,10 @@ export class SplitviewApi {
         this.component.removePanel(panel, sizing);
     }
 
+    setVisible(panel: SplitviewPanel, isVisible: boolean) {
+        return this.component.setVisible(panel, isVisible);
+    }
+
     getPanels(): SplitviewPanel[] {
         return this.component.getPanels();
     }

packages/splitview/src/dockview/componentDockview.ts

@@ -10,7 +10,7 @@ import {
     GroupChangeEvent,
     GroupDropEvent,
 } from '../groupview/groupview';
-import { DefaultPanel } from '../groupview/panel/panel';
+import { GroupviewPanel } from '../groupview/groupviewPanel';
 import {
     CompositeDisposable,
     IDisposable,
@@ -535,7 +535,7 @@ export class ComponentDockview
             options.tabComponentName
         );
 
-        const panel = new DefaultPanel(options.id, this._api);
+        const panel = new GroupviewPanel(options.id, this._api);
         panel.init({
             headerPart,
             contentPart,

packages/splitview/src/dockview/components/watermark/watermark.ts

@@ -11,8 +11,8 @@ import { CompositeDisposable } from '../../../lifecycle';
 
 export class Watermark extends CompositeDisposable implements WatermarkPart {
     private _element: HTMLElement;
-    private accessor: IComponentDockview;
     private group: IGroupview;
+    private params: GroupPanelPartInitParameters;
 
     get id() {
         return 'watermark';
@@ -47,7 +47,7 @@ export class Watermark extends CompositeDisposable implements WatermarkPart {
         this.addDisposables(
             addDisposableListener(closeAnchor, 'click', (ev) => {
                 ev.preventDefault();
-                this.accessor.removeGroup(this.group);
+                this.params.containerApi.removeGroup(this.group);
             })
         );
     }
@@ -57,10 +57,10 @@ export class Watermark extends CompositeDisposable implements WatermarkPart {
     }
 
     public init(params: GroupPanelPartInitParameters) {
-        // this.accessor = params.accessor;
+        this.params = params;
 
         this.addDisposables(
-            this.accessor.onDidLayoutChange((event) => {
+            this.params.containerApi.onDidLayoutChange((event) => {
                 this.render();
             })
         );
@@ -78,7 +78,7 @@ export class Watermark extends CompositeDisposable implements WatermarkPart {
     }
 
     private render() {
-        const isOneGroup = this.accessor.size <= 1;
+        const isOneGroup = this.params.containerApi.size <= 1;
         toggleClass(this.element, 'has-actions', isOneGroup);
     }
 

packages/splitview/src/gridview/gridviewPanel.ts

@@ -65,6 +65,11 @@ export abstract class GridviewPanel
         super(id, component, new GridPanelApi());
 
         this.addDisposables(
+            this.api.onVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { containerApi } = this.params as GridviewInitParameters;
+                containerApi.setVisible(this, isVisible);
+            }),
             this.api.onDidConstraintsChange((event) => {
                 if (
                     typeof event.minimumWidth === 'number' ||

packages/splitview/src/groupview/groupviewPanel.ts

@@ -1,17 +1,17 @@
-import { IGroupPanel } from './parts';
+import { IGroupPanel } from './panel/parts';
-import { GroupPanelApi } from '../../api/groupPanelApi';
+import { GroupPanelApi } from '../api/groupPanelApi';
-import { Event } from '../../events';
+import { Event } from '../events';
-import { IGroupview, GroupChangeKind } from '../groupview';
+import { IGroupview, GroupChangeKind } from './groupview';
-import { MutableDisposable, CompositeDisposable } from '../../lifecycle';
+import { MutableDisposable, CompositeDisposable } from '../lifecycle';
 import {
     PanelContentPart,
     PanelHeaderPart,
     IGroupPanelInitParameters,
-} from './parts';
+} from './panel/parts';
-import { PanelUpdateEvent } from '../../panel/types';
+import { PanelUpdateEvent } from '../panel/types';
-import { DockviewApi } from '../../api/component.api';
+import { DockviewApi } from '../api/component.api';
 
-export class DefaultPanel extends CompositeDisposable implements IGroupPanel {
+export class GroupviewPanel extends CompositeDisposable implements IGroupPanel {
     private readonly mutableDisposable = new MutableDisposable();
 
     readonly api: GroupPanelApi;

packages/splitview/src/index.ts

@@ -8,7 +8,7 @@ export * from './groupview/panel/content/content';
 export * from './groupview/panel/tab/tab';
 export * from './events';
 export * from './lifecycle';
-export * from './groupview/panel/panel';
+export * from './groupview/groupviewPanel';
 export * from './api/groupPanelApi';
 export * from './api/component.api';
 export * from './react/react';

packages/splitview/src/react/deserializer.ts

@@ -1,5 +1,5 @@
 import { ComponentDockview } from '../dockview/componentDockview';
-import { DefaultPanel } from '../groupview/panel/panel';
+import { GroupviewPanel } from '../groupview/groupviewPanel';
 import {
     PanelContentPart,
     PanelHeaderPart,
@@ -40,7 +40,7 @@ export class ReactPanelDeserialzier implements IPanelDeserializer {
             this.layout.options.frameworkComponentFactory.tab
         ) as PanelHeaderPart;
 
-        const panel = new DefaultPanel(panelId, new DockviewApi(this.layout));
+        const panel = new GroupviewPanel(panelId, new DockviewApi(this.layout));
 
         // TODO container api
         panel.init({

packages/splitview/src/splitview/componentSplitview.ts

@@ -13,7 +13,6 @@ import {
 import { BaseComponentOptions } from '../panel/types';
 import { Emitter, Event } from '../events';
 import { SplitviewApi } from '../api/component.api';
-import { Paneview } from '../paneview/paneview';
 import { SplitviewPanel } from './splitviewPanel';
 
 export interface AddSplitviewComponentOptions extends BaseComponentOptions {
@@ -37,6 +36,7 @@ export interface IComponentSplitview extends IDisposable {
     setActive(view: SplitviewPanel, skipFocus?: boolean): void;
     removePanel(panel: SplitviewPanel, sizing?: Sizing): void;
     getPanels(): SplitviewPanel[];
+    setVisible(panel: SplitviewPanel, visible: boolean): void;
 }
 
 /**
@@ -86,6 +86,16 @@ export class ComponentSplitview
         this._activePanel?.focus();
     }
 
+    setVisible(panel: SplitviewPanel, visible: boolean) {
+        const index = this.getPanels().indexOf(panel);
+
+        if (index < 0) {
+            throw new Error('invalid operation');
+        }
+
+        this.splitview.setViewVisible(index, visible);
+    }
+
     setActive(view: SplitviewPanel, skipFocus?: boolean) {
         this._activePanel = view;
 

packages/splitview/src/splitview/core/splitview.ts

@@ -181,7 +181,6 @@ export class Splitview {
     }
 
     style(styles: ISplitviewStyles): void {
-        console.log('styles', styles);
         if (styles?.separatorBorder === 'transparent') {
             removeClasses(this.element, 'separator-border');
             this.element.style.removeProperty('--separator-border');
@@ -744,6 +743,32 @@ export class Splitview {
         return undefined;
     }
 
+    private _startSnappingEnabled = true;
+    get startSnappingEnabled(): boolean {
+        return this._startSnappingEnabled;
+    }
+    set startSnappingEnabled(startSnappingEnabled: boolean) {
+        if (this._startSnappingEnabled === startSnappingEnabled) {
+            return;
+        }
+
+        this._startSnappingEnabled = startSnappingEnabled;
+        this.updateSashEnablement();
+    }
+
+    private _endSnappingEnabled = true;
+    get endSnappingEnabled(): boolean {
+        return this._endSnappingEnabled;
+    }
+    set endSnappingEnabled(endSnappingEnabled: boolean) {
+        if (this._endSnappingEnabled === endSnappingEnabled) {
+            return;
+        }
+
+        this._endSnappingEnabled = endSnappingEnabled;
+        this.updateSashEnablement();
+    }
+
     private updateSashEnablement(): void {
         let previous = false;
         const collapsesDown = this.views.map(
@@ -791,18 +816,14 @@ export class Splitview {
                 if (
                     snappedBefore &&
                     collapsesUp[index] &&
-                    // (
+                    (position > 0 || this.startSnappingEnabled)
-                    position > 0
-                    //  || this.startSnappingEnabled)
                 ) {
                     this.updateSash(sash, SashState.MINIMUM);
                     // sash.state = SashState.Minimum;
                 } else if (
                     snappedAfter &&
                     collapsesDown[index] &&
-                    // (
+                    (position < this.contentSize || this.endSnappingEnabled)
-                    position < this.contentSize
-                    // || this.endSnappingEnabled)
                 ) {
                     // sash.state = SashState.Maximum;
                     this.updateSash(sash, SashState.MAXIMUM);

packages/splitview/src/splitview/splitviewPanel.ts

@@ -40,6 +40,11 @@ export abstract class SplitviewPanel
         super(id, componentName, new PanelApi());
 
         this.addDisposables(
+            this.api.onVisibilityChange((event) => {
+                const { isVisible } = event;
+                const { containerApi } = this.params as PanelViewInitParameters;
+                containerApi.setVisible(this, isVisible);
+            }),
             this.api.onDidConstraintsChange((event) => {
                 if (
                     typeof event.minimumSize === 'number' ||