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

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

Browse Source
This commit is contained in:
mathuo 2022-05-10 21:59:28 +01:00
commit f5b90725f4
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
29 changed files with 126 additions and 398 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/dockview-demo/src/layout-grid/activitybar.tsx
View File

@ -23,10 +23,10 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (sidebarPanel.api.isVisible) {
api.setVisible(sidebarPanel, false);
sidebarPanel.api.setVisible(false);
} else {
event.preventDefault(); // prevent focus
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}
};

21
packages/dockview-demo/src/layout-grid/layoutGrid.tsx
View File

@ -10,7 +10,6 @@ import {
IWatermarkPanelProps,
IDockviewPanel,
PanelCollection,
DockviewComponents,
} from 'dockview';
import { CustomTab } from './customTab';
import { Settings } from './settingsPanel';
@ -47,22 +46,10 @@ const Test = (props: IDockviewPanelProps) => {
}, []);
return (
<DockviewComponents.Panel>
{counter % 4 === 0 && (
<DockviewComponents.Tab>
<div>{`custom tab ${counter}`}</div>
</DockviewComponents.Tab>
)}
<DockviewComponents.Content>
<div>
<div>{`custom body ${counter}`}</div>
<button>Toggle</button>
</div>
</DockviewComponents.Content>
<DockviewComponents.Actions>
<div>{`custom action ${counter}`}</div>
</DockviewComponents.Actions>
</DockviewComponents.Panel>
<div>
<div>{`custom body ${counter}`}</div>
<button>Toggle</button>
</div>
);
};

118
packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx
View File

@ -1,4 +1,4 @@
import { DockviewComponents, IDockviewPanelProps } from 'dockview';
import { IDockviewPanelProps } from 'dockview';
import * as React from 'react';
import { CompositeDisposable } from '../../lifecycle';
import './exampleFunctions.scss';
@ -30,8 +30,10 @@ export const ExampleFunctions = (
isPanelVisible: x.isVisible,
}));
}),
props.api.onFocusEvent(() => {
input.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
input.current.focus();
}
})
);
@ -49,80 +51,52 @@ export const ExampleFunctions = (
};
return (
<DockviewComponents.Panel>
<DockviewComponents.Actions>
<div
style={{
height: '100%',
display: 'flex',
backgroundColor: 'rgba(255,255,255,0.1)',
padding: '0px 4px',
}}
>
<div className="example-functions-panel">
<div className="example-functions-panel-header-bar">
<span style={{ padding: '0px 8px' }}>
<span>{'isGroupActive: '}</span>
<span
onClick={onClose}
style={{
height: '100%',
width: '25px',
display: 'flex',
alignItems: 'center',
color: panelState.isGroupActive
? '#23d16f'
: '#cd312b',
}}
>
<a className="material-icons">menu</a>
{`${panelState.isGroupActive}`}
</span>
</div>
</DockviewComponents.Actions>
<DockviewComponents.Content>
<div className="example-functions-panel">
<div className="example-functions-panel-header-bar">
<span style={{ padding: '0px 8px' }}>
<span>{'isGroupActive: '}</span>
<span
style={{
color: panelState.isGroupActive
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isGroupActive}`}
</span>
</span>
<span style={{ padding: '0px 8px' }}>
<span>{'isPanelVisible: '}</span>
<span
style={{
color: panelState.isPanelVisible
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isPanelVisible}`}
</span>
</span>
</div>
<div className="example-functions-panel-section">
<input
value={panelName}
placeholder="New Panel Name"
type="text"
onChange={(event) =>
setPanelName(event.target.value)
}
/>
<button onClick={onRename}>Rename</button>
</div>
</span>
<span style={{ padding: '0px 8px' }}>
<span>{'isPanelVisible: '}</span>
<span
style={{
color: panelState.isPanelVisible
? '#23d16f'
: '#cd312b',
}}
>
{`${panelState.isPanelVisible}`}
</span>
</span>
</div>
<div className="example-functions-panel-section">
<input
value={panelName}
placeholder="New Panel Name"
type="text"
onChange={(event) => setPanelName(event.target.value)}
/>
<button onClick={onRename}>Rename</button>
</div>
<input
style={{ width: '175px' }}
ref={input}
placeholder="This is focused by the panel"
/>
<input
style={{ width: '175px' }}
placeholder="This is also focusable"
/>
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<input
style={{ width: '175px' }}
ref={input}
placeholder="This is focused by the panel"
/>
<input
style={{ width: '175px' }}
placeholder="This is also focusable"
/>
</div>
);
};

6
packages/dockview-demo/src/layout-grid/sidebar.tsx
View File

@ -64,8 +64,10 @@ export const Sidebar = (props: IGridviewPanelProps) => {
props.api.onDidVisibilityChange((event) => {
console.log(event);
}),
props.api.onFocusEvent(() => {
api.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
api.current.focus();
}
})
);

12
packages/dockview-demo/src/layout-grid/splitPanel.tsx
View File

@ -29,8 +29,10 @@ const components = {
props.api.onDidActiveChange((event) => {
setActive(event.isActive);
}),
props.api.onFocusEvent(() => {
ref.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
ref.current.focus();
}
})
);
@ -65,8 +67,10 @@ export const SplitPanel = (props: IDockviewPanelProps) => {
props.api.onDidDimensionsChange((event) => {
api.current?.layout(event.width, event.height - 25);
}),
props.api.onFocusEvent(() => {
api.current.focus();
props.api.onDidFocusChange(({ isFocused }) => {
if (isFocused) {
api.current.focus();
}
})
);

2
packages/dockview-demo/src/panels/splitview/splitview.tsx
View File

@ -227,7 +227,7 @@ export const Common = (
const toggleVisibility = (i: number) => () => {
const panel = api.current.panels[i];
api.current.setVisible(panel, !panel.api.isVisible);
panel.api.setVisible(panel.api.isVisible);
setDimensions((dimensions) => ({
...dimensions,
visibility: api.current.panels.map((_) => _.api.isVisible),

6
packages/dockview-demo/src/services/widgets.tsx
View File

@ -161,11 +161,11 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (sidebarPanel.api.isVisible) {
if (!alwaysOpen && selectedActive) {
api.setVisible(sidebarPanel, false);
sidebarPanel.api.setVisible(false);
}
} else {
event.preventDefault(); // prevent focus
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}
@ -234,7 +234,7 @@ export const Activitybar = (props: IGridviewPanelProps) => {
const sidebarPanel = api.getPanel('sidebar');
if (!sidebarPanel.api.isVisible) {
api.setVisible(sidebarPanel, true);
sidebarPanel.api.setVisible(true);
sidebarPanel.focus();
}

33
packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx
View File

@ -1,6 +1,5 @@
import {
DockviewApi,
DockviewComponents,
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
@ -18,35 +17,9 @@ const components: PanelCollection<IDockviewPanelProps<any>> = {
ticker: (props: IDockviewPanelProps<{ ticker: number }>) => {
const close = () => props.api.close();
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span
style={{ fontSize: '9px' }}
>{`(${props.params.ticker})`}</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
{`The current ticker value is ${props.params.ticker}`}
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<div style={{ padding: '10px', height: '100%' }}>
{`The current ticker value is ${props.params.ticker}`}
</div>
);
},
iframe: (props) => {

31
packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx
View File

@ -1,6 +1,5 @@
import {
DockviewApi,
DockviewComponents,
DockviewReact,
DockviewReadyEvent,
IDockviewPanelProps,
@ -13,35 +12,7 @@ const components: PanelCollection<IDockviewPanelProps> = {
default: (props) => {
const close = () => props.api.close();
return (
<DockviewComponents.Panel>
<DockviewComponents.Tab>
<div
style={{
border: '1px solid pink',
height: '100%',
boxSizing: 'border-box',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
padding: '0px 8px',
width: '200px',
}}
>
<span>{props.api.title}</span>
<span style={{ fontSize: '9px' }}>
{'(Custom tab component)'}
</span>
{!props.api.suppressClosable && (
<span onClick={close}>X</span>
)}
</div>
</DockviewComponents.Tab>
<DockviewComponents.Content>
<div style={{ padding: '10px', height: '100%' }}>
hello world
</div>
</DockviewComponents.Content>
</DockviewComponents.Panel>
<div style={{ padding: '10px', height: '100%' }}>hello world</div>
);
},
};

4
packages/dockview/src/__tests__/api/api.spec.ts
View File

@ -41,11 +41,11 @@ describe('api', () => {
expect(api.height).toBe(0);
expect(api.width).toBe(0);
api._onDidPanelDimensionChange.fire({ height: 10, width: 20 });
api._onDidDimensionChange.fire({ height: 10, width: 20 });
expect(api.height).toBe(10);
expect(api.width).toBe(20);
api._onDidPanelDimensionChange.fire({ height: 20, width: 10 });
api._onDidDimensionChange.fire({ height: 20, width: 10 });
expect(api.height).toBe(20);
expect(api.width).toBe(10);
});

20
packages/dockview/src/api/component.api.ts
View File

@ -100,10 +100,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
this.component.removePanel(panel, sizing);
}
setVisible(panel: ISplitviewPanel, isVisible: boolean): void {
this.component.setVisible(panel, isVisible);
}
focus(): void {
this.component.focus();
}
@ -112,10 +108,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
return this.component.getPanel(id);
}
setActive(panel: ISplitviewPanel): void {
this.component.setActive(panel);
}
layout(width: number, height: number): void {
return this.component.layout(width, height);
}
@ -310,18 +302,6 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
return this.component.getPanel(id);
}
toggleVisibility(panel: IGridviewPanel): void {
this.component.toggleVisibility(panel);
}
setVisible(panel: IGridviewPanel, visible: boolean): void {
this.component.setVisible(panel, visible);
}
setActive(panel: IGridviewPanel): void {
this.component.setActive(panel);
}
fromJSON(data: SerializedGridview): void {
return this.component.fromJSON(data);
}

13
packages/dockview/src/api/panelApi.ts
View File

@ -23,8 +23,6 @@ export interface PanelApi {
readonly onDidFocusChange: Event<FocusEvent>;
readonly onDidVisibilityChange: Event<VisibilityEvent>;
readonly onDidActiveChange: Event<ActiveEvent>;
readonly onFocusEvent: Event<void>;
//
setVisible(isVisible: boolean): void;
setActive(): void;
/**
@ -63,11 +61,10 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
private _width = 0;
private _height = 0;
readonly _onDidPanelDimensionChange =
new Emitter<PanelDimensionChangeEvent>({
replay: true,
});
readonly onDidDimensionsChange = this._onDidPanelDimensionChange.event;
readonly _onDidDimensionChange = new Emitter<PanelDimensionChangeEvent>({
replay: true,
});
readonly onDidDimensionsChange = this._onDidDimensionChange.event;
//
readonly _onDidChangeFocus = new Emitter<FocusEvent>({
replay: true,
@ -121,7 +118,7 @@ export class PanelApiImpl extends CompositeDisposable implements PanelApi {
super();
this.addDisposables(
this._onDidPanelDimensionChange,
this._onDidDimensionChange,
this._onDidChangeFocus,
this._onDidVisibilityChange,
this._onDidActiveChange,

73
packages/dockview/src/dockview/components/tab/defaultTab.ts
View File

@ -7,67 +7,6 @@ import { addDisposableListener } from '../../../events';
import { PanelUpdateEvent } from '../../../panel/types';
import { GroupPanel } from '../../../groupview/groupviewPanel';
export class WrappedTab implements ITabRenderer {
private readonly _element: HTMLElement;
constructor(private readonly renderer: ITabRenderer) {
this._element = document.createElement('element');
this.show();
}
get innerRenderer() {
return this.renderer;
}
get element() {
return this._element;
}
get id() {
return this.renderer.id;
}
show() {
if (!this.renderer.element.parentElement) {
this._element.appendChild(this.renderer.element);
}
}
hide() {
if (this.renderer.element.parentElement) {
this.renderer.element.remove();
}
}
layout(width: number, height: number): void {
this.renderer.layout(width, height);
}
update(event: PanelUpdateEvent): void {
this.renderer.update(event);
}
toJSON(): object {
return this.renderer.toJSON();
}
focus(): void {
this.renderer.focus();
}
init(parameters: GroupPanelPartInitParameters): void {
this.renderer.init(parameters);
}
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void {
this.renderer.updateParentGroup(group, isPanelVisible);
}
dispose() {
this.renderer.dispose();
}
}
export class DefaultTab extends CompositeDisposable implements ITabRenderer {
private _element: HTMLElement;
@ -148,10 +87,16 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
}
public updateParentGroup(group: GroupPanel, isPanelVisible: boolean) {
const changed =
this._isPanelVisible !== isPanelVisible ||
this._isGroupActive !== group.isActive;
this._isPanelVisible = isPanelVisible;
this._isGroupActive = group.isActive;
this.render();
if (changed) {
this.render();
}
}
public layout(_width: number, _height: number) {
@ -159,6 +104,8 @@ export class DefaultTab extends CompositeDisposable implements ITabRenderer {
}
private render() {
this._content.textContent = this.params.title;
if (this._content.textContent !== this.params.title) {
this._content.textContent = this.params.title;
}
}
}

11
packages/dockview/src/dockview/defaultGroupPanelView.ts
View File

@ -1,4 +1,4 @@
import { DefaultTab, WrappedTab } from './components/tab/defaultTab';
import { DefaultTab } from './components/tab/defaultTab';
import {
GroupPanelPartInitParameters,
IActionsRenderer,
@ -22,7 +22,7 @@ export interface IGroupPanelView extends IDisposable {
export class DefaultGroupPanelView implements IGroupPanelView {
private readonly _content: IContentRenderer;
private readonly _tab: WrappedTab;
private readonly _tab: ITabRenderer;
private readonly _actions: IActionsRenderer | undefined;
get content() {
@ -43,7 +43,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
actions?: IActionsRenderer;
}) {
this._content = renderers.content;
this._tab = new WrappedTab(renderers.tab ?? new DefaultTab());
this._tab = renderers.tab ?? new DefaultTab();
this._actions =
renderers.actions ||
(this.content.actions
@ -78,10 +78,7 @@ export class DefaultGroupPanelView implements IGroupPanelView {
toJSON(): {} {
return {
content: this.content.toJSON(),
tab:
this.tab.innerRenderer instanceof DefaultTab
? undefined
: this.tab.toJSON(),
tab: this.tab instanceof DefaultTab ? undefined : this.tab.toJSON(),
};
}

2
packages/dockview/src/dockview/dockviewComponent.ts
View File

@ -669,7 +669,7 @@ export class DockviewComponent
}
const view = new GroupPanel(this, id, options);
view.init({ params: {}, containerApi: <any>null }); // required to initialized .part and allow for correct disposal of group
view.init({ params: {}, accessor: <any>null }); // required to initialized .part and allow for correct disposal of group
if (!this._groups.has(view.id)) {
const disposable = new CompositeDisposable(

2
packages/dockview/src/dockview/dockviewGroupPanel.ts
View File

@ -169,7 +169,7 @@ export class DockviewGroupPanel
public layout(width: number, height: number) {
// the obtain the correct dimensions of the content panel we must deduct the tab height
this.api._onDidPanelDimensionChange.fire({
this.api._onDidDimensionChange.fire({
width,
height: height - (this.group.model.header.height || 0),
});

2
packages/dockview/src/gridview/basePanelView.ts
View File

@ -90,7 +90,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
layout(width: number, height: number) {
this._width = width;
this._height = height;
this.api._onDidPanelDimensionChange.fire({ width, height });
this.api._onDidDimensionChange.fire({ width, height });
if (this.part) {
if (this._params) {

10
packages/dockview/src/gridview/gridviewComponent.ts
View File

@ -22,7 +22,6 @@ import {
IGridviewPanel,
} from './gridviewPanel';
import { BaseComponentOptions } from '../panel/types';
import { GridviewApi } from '../api/component.api';
import { Orientation, Sizing } from '../splitview/core/splitview';
import { createComponent } from '../panel/componentFactory';
import { Emitter, Event } from '../events';
@ -64,7 +63,6 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
addPanel(options: AddComponentOptions): IGridviewPanel;
removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
toggleVisibility(panel: IGridviewPanel): void;
focus(): void;
fromJSON(serializedGridview: SerializedGridview): void;
toJSON(): SerializedGridview;
@ -170,10 +168,6 @@ export class GridviewComponent
});
}
toggleVisibility(panel: GridviewPanel) {
this.setVisible(panel, !this.isVisible(panel));
}
focus() {
this.activeGroup?.focus();
}
@ -217,7 +211,7 @@ export class GridviewComponent
maximumHeight: data.maximumHeight,
priority: data.priority,
snap: !!data.snap,
containerApi: new GridviewApi(this),
accessor: this,
isVisible: node.visible,
})
);
@ -322,7 +316,7 @@ export class GridviewComponent
maximumHeight: options.maximumHeight,
priority: options.priority,
snap: !!options.snap,
containerApi: new GridviewApi(this),
accessor: this,
isVisible: true,
});

16
packages/dockview/src/gridview/gridviewPanel.ts
View File

@ -1,5 +1,8 @@
import { PanelInitParameters } from '../panel/types';
import { IGridPanelComponentView } from './gridviewComponent';
import {
GridviewComponent,
IGridPanelComponentView,
} from './gridviewComponent';
import { FunctionOrValue } from '../types';
import {
BasePanelView,
@ -10,7 +13,6 @@ import { GridviewPanelApiImpl } from '../api/gridviewPanelApi';
import { LayoutPriority } from '../splitview/core/splitview';
import { Emitter, Event } from '../events';
import { IViewSize } from './gridview';
import { GridviewApi } from '../api/component.api';
export interface GridviewInitParameters extends PanelInitParameters {
minimumWidth?: number;
@ -19,7 +21,7 @@ export interface GridviewInitParameters extends PanelInitParameters {
maximumHeight?: number;
priority?: LayoutPriority;
snap?: boolean;
containerApi: GridviewApi;
accessor: GridviewComponent;
isVisible?: boolean;
}
@ -132,12 +134,12 @@ export abstract class GridviewPanel
this._onDidChange,
this.api.onVisibilityChange((event) => {
const { isVisible } = event;
const { containerApi } = this._params as GridviewInitParameters;
containerApi.setVisible(this, isVisible);
const { accessor } = this._params as GridviewInitParameters;
accessor.setVisible(this, isVisible);
}),
this.api.onActiveChange(() => {
const { containerApi } = this._params as GridviewInitParameters;
containerApi.setActive(this);
const { accessor } = this._params as GridviewInitParameters;
accessor.setActive(this);
}),
this.api.onDidConstraintsChangeInternal((event) => {
if (

4
packages/dockview/src/groupview/types.ts
View File

@ -5,7 +5,6 @@ import { PanelInitParameters, IPanel } from '../panel/types';
import { DockviewApi } from '../api/component.api';
import { GroupPanel } from './groupviewPanel';
import { Event } from '../events';
import { WrappedTab } from '../dockview/components/tab/defaultTab';
export interface IRenderable {
id: string;
@ -28,7 +27,7 @@ export interface GroupPanelPartInitParameters
export interface GroupPanelContentPartInitParameters
extends GroupPanelPartInitParameters {
tab: WrappedTab;
tab: ITabRenderer;
}
export interface IWatermarkRenderer extends IPanel {
@ -54,7 +53,6 @@ export interface IContentRenderer extends IPanel {
readonly onDidBlur?: Event<void>;
updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void;
init(parameters: GroupPanelContentPartInitParameters): void;
close?(): Promise<boolean>;
}
// watermark component

89
packages/dockview/src/react/dockview/components.tsx
View File

@ -1,89 +0,0 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { isReactElement, ReactPartContext } from '../react';
import { ReactContentPartContext } from './reactContentPart';
interface WithChildren {
children: React.ReactNode;
}
const Tab: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
return <>{props.children}</>;
};
const Content: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
const Actions: React.FunctionComponent<WithChildren> = (
props: WithChildren
) => {
return <>{props.children}</>;
};
function isValidComponent(element: React.ReactElement) {
return [Content, Actions, Tab].find((comp) => element.type === comp);
}
const Panel: React.FunctionComponent<WithChildren> = (props: WithChildren) => {
const context = React.useContext(
ReactPartContext
) as ReactContentPartContext;
const sections = React.useMemo(() => {
const childs =
React.Children.map(props.children, (_) => _)?.filter(
isReactElement
) || [];
const isInvalid = !!childs.find((_) => !isValidComponent(_));
if (isInvalid) {
throw new Error(
'Children of DockviewComponents.Panel must be one of the following: DockviewComponents.Content, DockviewComponents.Actions, DockviewComponents.Tab'
);
}
const body = childs.find((_) => _.type === Content);
const actions = childs.find((_) => _.type === Actions);
const tab = childs.find((_) => _.type === Tab);
return { body, actions, tab };
}, [props.children]);
React.useEffect(() => {
/**
* hide or show the default tab behavior based on whether we want to override
* with our own React tab.
*/
if (sections.tab) {
context.tabPortalElement.hide();
} else {
context.tabPortalElement.show();
}
}, [sections.tab]);
return (
<>
{sections.actions &&
ReactDOM.createPortal(
sections.actions,
context.actionsPortalElement
)}
{sections.tab &&
ReactDOM.createPortal(
sections.tab,
context.tabPortalElement.element
)}
{sections.body || props.children}
</>
);
};
export const DockviewComponents = {
Tab,
Content,
Actions,
Panel,
};

8
packages/dockview/src/react/dockview/reactContentPart.ts
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import {
IContentRenderer,
GroupPanelContentPartInitParameters,
ITabRenderer,
} from '../../groupview/types';
import { ReactPart, ReactPortalStore } from '../react';
import { IDockviewPanelProps } from '../dockview/dockview';
@ -10,7 +11,6 @@ import { DockviewPanelApi } from '../../api/groupPanelApi';
import { DockviewApi } from '../../api/component.api';
import { GroupPanel } from '../../groupview/groupviewPanel';
import { Emitter, Event } from '../../events';
import { WrappedTab } from '../../dockview/components/tab/defaultTab';
export interface IGroupPanelActionbarProps {
api: DockviewPanelApi;
@ -21,7 +21,7 @@ export interface ReactContentPartContext {
api: DockviewPanelApi;
containerApi: DockviewApi;
actionsPortalElement: HTMLElement;
tabPortalElement: WrappedTab;
tabPortalElement: ITabRenderer;
}
export class ReactPanelContentPart implements IContentRenderer {
@ -104,10 +104,6 @@ export class ReactPanelContentPart implements IContentRenderer {
// noop
}
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() {
this._onDidFocus.dispose();
this._onDidBlur.dispose();

4
packages/dockview/src/react/dockview/v2/reactContentRenderer.ts
View File

@ -99,10 +99,6 @@ export class ReactContentRenderer implements IContentRenderer {
this._hostedContainer.layout(this.element);
}
public close(): Promise<boolean> {
return Promise.resolve(true);
}
public dispose() {
this.part?.dispose();
}

6
packages/dockview/src/react/gridview/view.ts
View File

@ -1,3 +1,4 @@
import { GridviewApi } from '../../api/component.api';
import {
GridviewPanel,
GridviewInitParameters,
@ -24,8 +25,9 @@ export class ReactGridPanelView extends GridviewPanel {
{
params: this._params?.params || {},
api: this.api,
containerApi: (this._params as GridviewInitParameters)
.containerApi,
containerApi: new GridviewApi(
(this._params as GridviewInitParameters).accessor
),
}
);
}

1
packages/dockview/src/react/index.ts
View File

@ -1,5 +1,4 @@
export * from './dockview/dockview';
export * from './dockview/components';
export * from './splitview/splitview';
export * from './gridview/gridview';
export * from './dockview/reactContentPart';

6
packages/dockview/src/react/splitview/view.ts
View File

@ -1,3 +1,4 @@
import { SplitviewApi } from '../../api/component.api';
import { PanelViewInitParameters } from '../../splitview/core/options';
import { SplitviewPanel } from '../../splitview/splitviewPanel';
import { ReactPart, ReactPortalStore } from '../react';
@ -21,8 +22,9 @@ export class ReactPanelView extends SplitviewPanel {
{
params: this._params?.params || {},
api: this.api,
containerApi: (this._params as PanelViewInitParameters)
.containerApi,
containerApi: new SplitviewApi(
(this._params as PanelViewInitParameters).accessor
),
}
);
}

4
packages/dockview/src/splitview/core/options.ts
View File

@ -2,14 +2,14 @@ import { IPanel, PanelInitParameters } from '../../panel/types';
import { IView, SplitViewOptions, LayoutPriority } from './splitview';
import { FrameworkFactory } from '../../types';
import { SplitviewPanel } from '../splitviewPanel';
import { SplitviewApi } from '../../api/component.api';
import { SplitviewComponent } from '../splitviewComponent';
export interface PanelViewInitParameters extends PanelInitParameters {
minimumSize?: number;
maximumSize?: number;
snap?: boolean;
priority?: LayoutPriority;
containerApi: SplitviewApi;
accessor: SplitviewComponent;
}
export interface ISerializableView extends IView, IPanel {

6
packages/dockview/src/splitview/splitviewComponent.ts
View File

@ -14,7 +14,6 @@ import {
import { SplitviewComponentOptions } from './core/options';
import { BaseComponentOptions } from '../panel/types';
import { Emitter, Event } from '../events';
import { SplitviewApi } from '../api/component.api';
import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel';
import { createComponent } from '../panel/componentFactory';
@ -70,7 +69,6 @@ export interface ISplitviewComponent extends IDisposable {
fromJSON(serializedSplitview: SerializedSplitview): void;
focus(): void;
getPanel(id: string): ISplitviewPanel | undefined;
setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
setVisible(panel: ISplitviewPanel, visible: boolean): void;
movePanel(from: number, to: number): void;
@ -279,7 +277,7 @@ export class SplitviewComponent
maximumSize: options.maximumSize,
snap: options.snap,
priority: options.priority,
containerApi: new SplitviewApi(this),
accessor: this,
});
const size: Sizing | number =
@ -380,7 +378,7 @@ export class SplitviewComponent
maximumSize: data.maximumSize,
snap: view.snap,
priority: view.priority,
containerApi: new SplitviewApi(this),
accessor: this,
});
});

10
packages/dockview/src/splitview/splitviewPanel.ts
View File

@ -85,14 +85,12 @@ export abstract class SplitviewPanel
this._onDidChange,
this.api.onVisibilityChange((event) => {
const { isVisible } = event;
const { containerApi } = this
._params as PanelViewInitParameters;
containerApi.setVisible(this, isVisible);
const { accessor } = this._params as PanelViewInitParameters;
accessor.setVisible(this, isVisible);
}),
this.api.onActiveChange(() => {
const { containerApi } = this
._params as PanelViewInitParameters;
containerApi.setActive(this);
const { accessor } = this._params as PanelViewInitParameters;
accessor.setActive(this);
}),
this.api.onDidConstraintsChangeInternal((event) => {
if (