diff --git a/packages/splitview-demo/src/layout-grid/application.tsx b/packages/splitview-demo/src/layout-grid/application.tsx index c932309c6..43651b666 100644 --- a/packages/splitview-demo/src/layout-grid/application.tsx +++ b/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, }); diff --git a/packages/splitview-demo/src/layout-grid/panel.tsx b/packages/splitview-demo/src/layout-grid/panel.tsx index 9ce01c3ae..6578e874d 100644 --- a/packages/splitview-demo/src/layout-grid/panel.tsx +++ b/packages/splitview-demo/src/layout-grid/panel.tsx @@ -20,8 +20,16 @@ export const Panel = (props: IGridviewPanelProps) => { }; }, []); - const onClick = () => { - props.api.setSize({ height: 500 }); + const onToggle = () => { + 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) => {
This panel is outside of the dockable layer - + +
{`isPanelActive: ${active} isPanelFocused: ${focused}`}
diff --git a/packages/splitview/src/api/api.ts b/packages/splitview/src/api/api.ts index 7dbe78790..f9b3692a2 100644 --- a/packages/splitview/src/api/api.ts +++ b/packages/splitview/src/api/api.ts @@ -44,6 +44,8 @@ export interface IBaseViewApi { onDidVisibilityChange: Event; onDidActiveChange: Event; onFocusEvent: Event; + // + 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 = this ._onDidVisibilityChange.event; // + + readonly _onVisibilityChange = new Emitter(); + readonly onVisibilityChange: Event = this + ._onVisibilityChange.event; + // readonly _onDidActiveChange = new Emitter({ 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 diff --git a/packages/splitview/src/api/component.api.ts b/packages/splitview/src/api/component.api.ts index 95fd67dfd..791bd2c31 100644 --- a/packages/splitview/src/api/component.api.ts +++ b/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(); } diff --git a/packages/splitview/src/dockview/componentDockview.ts b/packages/splitview/src/dockview/componentDockview.ts index f40f29d69..6cd3ae76e 100644 --- a/packages/splitview/src/dockview/componentDockview.ts +++ b/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, diff --git a/packages/splitview/src/dockview/components/watermark/watermark.ts b/packages/splitview/src/dockview/components/watermark/watermark.ts index 3f9ca0bb6..78aa79d4b 100644 --- a/packages/splitview/src/dockview/components/watermark/watermark.ts +++ b/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); } diff --git a/packages/splitview/src/gridview/gridviewPanel.ts b/packages/splitview/src/gridview/gridviewPanel.ts index b4606363b..f2e361992 100644 --- a/packages/splitview/src/gridview/gridviewPanel.ts +++ b/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' || diff --git a/packages/splitview/src/groupview/panel/panel.ts b/packages/splitview/src/groupview/groupviewPanel.ts similarity index 89% rename from packages/splitview/src/groupview/panel/panel.ts rename to packages/splitview/src/groupview/groupviewPanel.ts index 40d618d97..b8a857d47 100644 --- a/packages/splitview/src/groupview/panel/panel.ts +++ b/packages/splitview/src/groupview/groupviewPanel.ts @@ -1,17 +1,17 @@ -import { IGroupPanel } from './parts'; -import { GroupPanelApi } from '../../api/groupPanelApi'; -import { Event } from '../../events'; -import { IGroupview, GroupChangeKind } from '../groupview'; -import { MutableDisposable, CompositeDisposable } from '../../lifecycle'; +import { IGroupPanel } from './panel/parts'; +import { GroupPanelApi } from '../api/groupPanelApi'; +import { Event } from '../events'; +import { IGroupview, GroupChangeKind } from './groupview'; +import { MutableDisposable, CompositeDisposable } from '../lifecycle'; import { PanelContentPart, PanelHeaderPart, IGroupPanelInitParameters, -} from './parts'; -import { PanelUpdateEvent } from '../../panel/types'; -import { DockviewApi } from '../../api/component.api'; +} from './panel/parts'; +import { PanelUpdateEvent } from '../panel/types'; +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; diff --git a/packages/splitview/src/index.ts b/packages/splitview/src/index.ts index 39c23ec59..f2a3ce5a1 100644 --- a/packages/splitview/src/index.ts +++ b/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'; diff --git a/packages/splitview/src/react/deserializer.ts b/packages/splitview/src/react/deserializer.ts index 5e2362e35..ef92a4d31 100644 --- a/packages/splitview/src/react/deserializer.ts +++ b/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({ diff --git a/packages/splitview/src/splitview/componentSplitview.ts b/packages/splitview/src/splitview/componentSplitview.ts index 6e15595ea..16d45fb09 100644 --- a/packages/splitview/src/splitview/componentSplitview.ts +++ b/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; diff --git a/packages/splitview/src/splitview/core/splitview.ts b/packages/splitview/src/splitview/core/splitview.ts index 7a5b995a0..572fb96fa 100644 --- a/packages/splitview/src/splitview/core/splitview.ts +++ b/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); diff --git a/packages/splitview/src/splitview/splitviewPanel.ts b/packages/splitview/src/splitview/splitviewPanel.ts index 82b4767ea..9f6364ca7 100644 --- a/packages/splitview/src/splitview/splitviewPanel.ts +++ b/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' ||