rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-03-12 17:02:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

code

Browse Source
This commit is contained in:
Matthew O'Connor 2020-10-22 21:20:14 +01:00
parent 72b0f8861c
commit a2a930a714
13 changed files with 102 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/splitview-demo/src/layout-grid/application.tsx
View File

@ -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,
});

15
packages/splitview-demo/src/layout-grid/panel.tsx
View File

@ -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) => {
<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>

13
packages/splitview/src/api/api.ts
View File

@ -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

4
packages/splitview/src/api/component.api.ts
View File

@ -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();
}

4
packages/splitview/src/dockview/componentDockview.ts
View File

@ -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,

10
packages/splitview/src/dockview/components/watermark/watermark.ts
View File

@ -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);
}

5
packages/splitview/src/gridview/gridviewPanel.ts
View File

@ -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' ||

18
packages/splitview/src/groupview/panel/panel.ts → packages/splitview/src/groupview/groupviewPanel.ts
View File

@ -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;

2
packages/splitview/src/index.ts
View File

@ -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';

4
packages/splitview/src/react/deserializer.ts
View File

@ -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({

12
packages/splitview/src/splitview/componentSplitview.ts
View File

@ -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;

35
packages/splitview/src/splitview/core/splitview.ts
View File

@ -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);

5
packages/splitview/src/splitview/splitviewPanel.ts
View File

@ -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' ||