mirror of
https://github.com/mathuo/dockview
synced 2025-08-28 13:06:28 +00:00
Merge branch 'master' of https://github.com/mathuo/dockview into 84-add-ability-to-have-fixed-panel-with-no-tab-in-dockviewreact
This commit is contained in:
commit
05f8ab8f8b
@ -2,7 +2,7 @@
|
||||
"packages": [
|
||||
"packages/*"
|
||||
],
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"command": {
|
||||
"publish": {
|
||||
"message": "chore(release): publish %s"
|
||||
|
2
packages/dockview-demo/package-lock.json
generated
2
packages/dockview-demo/package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview-demo",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "dockview-demo",
|
||||
"private": true,
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"description": "Demo project for https://github.com/mathuo/dockview",
|
||||
"scripts": {
|
||||
"build": "npm run build-webpack && npm run build-storybook",
|
||||
@ -15,7 +15,7 @@
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@mdx-js/react": "^2.1.1",
|
||||
"dockview": "^1.3.0",
|
||||
"dockview": "^1.3.1",
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0",
|
||||
"recoil": "^0.7.2"
|
||||
|
2
packages/dockview/package-lock.json
generated
2
packages/dockview/package-lock.json
generated
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
|
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "dockview",
|
||||
"version": "1.3.0",
|
||||
"version": "1.3.1",
|
||||
"description": "Zero dependency layout manager supporting tabs, grids and splitviews with ReactJS support",
|
||||
"main": "./dist/cjs/index.js",
|
||||
"types": "./dist/cjs/index.d.ts",
|
||||
|
@ -1,4 +1,3 @@
|
||||
import { DockviewComponent } from '../..';
|
||||
import {
|
||||
SplitviewApi,
|
||||
PaneviewApi,
|
||||
@ -8,6 +7,7 @@ import {
|
||||
import { GridviewComponent } from '../../gridview/gridviewComponent';
|
||||
import { PaneviewComponent } from '../../paneview/paneviewComponent';
|
||||
import { SplitviewComponent } from '../../splitview/splitviewComponent';
|
||||
import { DockviewComponent } from '../../dockview/dockviewComponent';
|
||||
|
||||
describe('component.api', () => {
|
||||
describe('splitview', () => {
|
||||
@ -22,9 +22,8 @@ describe('component.api', () => {
|
||||
'onDidLayoutChange',
|
||||
'onDidAddView',
|
||||
'onDidRemoveView',
|
||||
'getPanels',
|
||||
'panels',
|
||||
'focus',
|
||||
'resizeToFit',
|
||||
'toJSON',
|
||||
];
|
||||
|
||||
@ -54,9 +53,8 @@ describe('component.api', () => {
|
||||
'onDidLayoutChange',
|
||||
'onDidAddView',
|
||||
'onDidRemoveView',
|
||||
'getPanels',
|
||||
'panels',
|
||||
'focus',
|
||||
'resizeToFit',
|
||||
'toJSON',
|
||||
];
|
||||
|
||||
@ -88,7 +86,6 @@ describe('component.api', () => {
|
||||
'onDidLayoutChange',
|
||||
'orientation',
|
||||
'focus',
|
||||
'resizeToFit',
|
||||
'toJSON',
|
||||
'onDidActiveGroupChange',
|
||||
'onDidAddGroup',
|
||||
@ -130,7 +127,6 @@ describe('component.api', () => {
|
||||
'activePanel',
|
||||
'focus',
|
||||
'closeAllGroups',
|
||||
'resizeToFit',
|
||||
'toJSON',
|
||||
'onDidActiveGroupChange',
|
||||
'onDidAddGroup',
|
||||
|
@ -1,4 +1,5 @@
|
||||
import {
|
||||
DockviewDropEvent,
|
||||
IDockviewComponent,
|
||||
SerializedDockview,
|
||||
} from '../dockview/dockviewComponent';
|
||||
@ -40,9 +41,7 @@ export interface CommonApi<T = any> {
|
||||
readonly onDidLayoutFromJSON: Event<void>;
|
||||
focus(): void;
|
||||
layout(width: number, height: number): void;
|
||||
resizeToFit(): void;
|
||||
fromJSON(data: T): void;
|
||||
|
||||
toJSON(): T;
|
||||
}
|
||||
|
||||
@ -71,6 +70,10 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
return this.component.orientation;
|
||||
}
|
||||
|
||||
get panels(): ISplitviewPanel[] {
|
||||
return this.component.panels;
|
||||
}
|
||||
|
||||
get onDidLayoutFromJSON(): Event<void> {
|
||||
return this.component.onDidLayoutFromJSON;
|
||||
}
|
||||
@ -101,10 +104,6 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
this.component.setVisible(panel, isVisible);
|
||||
}
|
||||
|
||||
getPanels(): ISplitviewPanel[] {
|
||||
return this.component.getPanels();
|
||||
}
|
||||
|
||||
focus(): void {
|
||||
this.component.focus();
|
||||
}
|
||||
@ -121,12 +120,8 @@ export class SplitviewApi implements CommonApi<SerializedSplitview> {
|
||||
return this.component.layout(width, height);
|
||||
}
|
||||
|
||||
addPanel(options: AddSplitviewComponentOptions): void {
|
||||
this.component.addPanel(options);
|
||||
}
|
||||
|
||||
resizeToFit(): void {
|
||||
this.component.resizeToFit();
|
||||
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
|
||||
return this.component.addPanel(options);
|
||||
}
|
||||
|
||||
movePanel(from: number, to: number): void {
|
||||
@ -159,6 +154,10 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
return this.component.width;
|
||||
}
|
||||
|
||||
get panels(): IPaneviewPanel[] {
|
||||
return this.component.panels;
|
||||
}
|
||||
|
||||
get onDidLayoutChange(): Event<void> {
|
||||
return this.component.onDidLayoutChange;
|
||||
}
|
||||
@ -192,10 +191,6 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
|
||||
constructor(private readonly component: IPaneviewComponent) {}
|
||||
|
||||
getPanels(): IPaneviewPanel[] {
|
||||
return this.component.getPanels();
|
||||
}
|
||||
|
||||
removePanel(panel: IPaneviewPanel): void {
|
||||
this.component.removePanel(panel);
|
||||
}
|
||||
@ -216,12 +211,8 @@ export class PaneviewApi implements CommonApi<SerializedPaneview> {
|
||||
this.component.layout(width, height);
|
||||
}
|
||||
|
||||
addPanel(options: AddPaneviewComponentOptions): void {
|
||||
this.component.addPanel(options);
|
||||
}
|
||||
|
||||
resizeToFit(): void {
|
||||
this.component.resizeToFit();
|
||||
addPanel(options: AddPaneviewComponentOptions): IPaneviewPanel {
|
||||
return this.component.addPanel(options);
|
||||
}
|
||||
|
||||
fromJSON(data: SerializedPaneview): void {
|
||||
@ -300,8 +291,8 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
|
||||
this.component.layout(width, height, force);
|
||||
}
|
||||
|
||||
addPanel(options: AddComponentOptions): void {
|
||||
this.component.addPanel(options);
|
||||
addPanel(options: AddComponentOptions): IGridviewPanel {
|
||||
return this.component.addPanel(options);
|
||||
}
|
||||
|
||||
removePanel(panel: IGridviewPanel, sizing?: Sizing): void {
|
||||
@ -315,10 +306,6 @@ export class GridviewApi implements CommonApi<SerializedGridview> {
|
||||
this.component.movePanel(panel, options);
|
||||
}
|
||||
|
||||
resizeToFit(): void {
|
||||
this.component.resizeToFit();
|
||||
}
|
||||
|
||||
getPanel(id: string): IGridviewPanel | undefined {
|
||||
return this.component.getPanel(id);
|
||||
}
|
||||
@ -409,6 +396,10 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
return this.component.onDidLayoutChange;
|
||||
}
|
||||
|
||||
get onDidDrop(): Event<DockviewDropEvent> {
|
||||
return this.component.onDidDrop;
|
||||
}
|
||||
|
||||
get panels(): IGroupPanel[] {
|
||||
return this.component.panels;
|
||||
}
|
||||
@ -471,10 +462,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
|
||||
this.component.removeGroup(<GroupviewPanel>group);
|
||||
}
|
||||
|
||||
resizeToFit(): void {
|
||||
return this.component.resizeToFit();
|
||||
}
|
||||
|
||||
getGroup(id: string): IGroupviewPanel | undefined {
|
||||
return this.component.getPanel(id);
|
||||
}
|
||||
|
@ -16,8 +16,7 @@ export interface SuppressClosableEvent {
|
||||
* omit visibility modifiers since the visibility of a single group doesn't make sense
|
||||
* because it belongs to a groupview
|
||||
*/
|
||||
export interface DockviewPanelApi
|
||||
extends Omit<GridviewPanelApi, 'setVisible' | 'visible'> {
|
||||
export interface DockviewPanelApi extends Omit<GridviewPanelApi, 'setVisible'> {
|
||||
readonly group: GroupviewPanel | undefined;
|
||||
readonly isGroupActive: boolean;
|
||||
readonly title: string;
|
||||
|
@ -15,26 +15,24 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--dv-drag-over-background-color);
|
||||
|
||||
transition-duration: 0.15s;
|
||||
transition-timing-function: ease-out;
|
||||
transition: top 70ms ease-out,left 70ms ease-out,width 70ms ease-out,height 70ms ease-out,opacity .15s ease-out;
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
|
||||
&.left {
|
||||
transform: translateX(-25%) scaleX(50%)
|
||||
transform: translateX(-25%) scaleX(0.5)
|
||||
}
|
||||
|
||||
&.right {
|
||||
transform: translateX(25%) scaleX(50%)
|
||||
transform: translateX(25%) scaleX(0.5)
|
||||
}
|
||||
|
||||
&.top {
|
||||
transform: translateY(-25%) scaleY(50%);
|
||||
transform: translateY(-25%) scaleY(0.5);
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
transform: translateY(25%) scaleY(50%);
|
||||
transform: translateY(25%) scaleY(0.5);
|
||||
}
|
||||
|
||||
&.small-top {
|
||||
|
@ -54,7 +54,6 @@ export interface DockviewComponentOptions extends DockviewRenderFunctions {
|
||||
watermarkFrameworkComponent?: any;
|
||||
frameworkComponentFactory?: GroupPanelFrameworkComponentFactory;
|
||||
tabHeight?: number;
|
||||
debug?: boolean;
|
||||
orientation?: Orientation;
|
||||
styles?: ISplitviewStyles;
|
||||
showDndOverlay?: (event: DragEvent, target: DockviewDropTargets) => boolean;
|
||||
|
@ -62,7 +62,6 @@ export interface IBaseGrid<T extends IGridPanelView> {
|
||||
toJSON(): object;
|
||||
fromJSON(data: any): void;
|
||||
layout(width: number, height: number, force?: boolean): void;
|
||||
resizeToFit(): void;
|
||||
setVisible(panel: T, visible: boolean): void;
|
||||
isVisible(panel: T): boolean;
|
||||
}
|
||||
@ -299,18 +298,6 @@ export abstract class BaseGrid<T extends IGridPanelView>
|
||||
this.gridview.layout(width, height);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize the layout to fit the parent container
|
||||
*/
|
||||
public resizeToFit(): void {
|
||||
if (!this.element.parentElement) {
|
||||
return;
|
||||
}
|
||||
const { width, height } =
|
||||
this.element.parentElement.getBoundingClientRect();
|
||||
this.layout(width, height);
|
||||
}
|
||||
|
||||
public dispose(): void {
|
||||
super.dispose();
|
||||
|
||||
|
@ -44,7 +44,7 @@ export interface AddComponentOptions extends BaseComponentOptions {
|
||||
maximumHeight?: number;
|
||||
position?: {
|
||||
direction: Direction;
|
||||
reference: string;
|
||||
referencePanel: string;
|
||||
};
|
||||
location?: number[];
|
||||
}
|
||||
@ -62,7 +62,7 @@ export interface IGridviewComponent extends IBaseGrid<GridviewPanel> {
|
||||
readonly orientation: Orientation;
|
||||
readonly onDidLayoutFromJSON: Event<void>;
|
||||
updateOptions(options: Partial<GridviewComponentUpdateOptions>): void;
|
||||
addPanel(options: AddComponentOptions): void;
|
||||
addPanel(options: AddComponentOptions): IGridviewPanel;
|
||||
removePanel(panel: IGridviewPanel, sizing?: Sizing): void;
|
||||
toggleVisibility(panel: IGridviewPanel): void;
|
||||
focus(): void;
|
||||
@ -273,17 +273,17 @@ export class GridviewComponent
|
||||
this.doAddGroup(removedPanel, relativeLocation, options.size);
|
||||
}
|
||||
|
||||
public addPanel(options: AddComponentOptions): void {
|
||||
public addPanel(options: AddComponentOptions): IGridviewPanel {
|
||||
let relativeLocation: number[] = options.location || [0];
|
||||
|
||||
if (options.position?.reference) {
|
||||
if (options.position?.referencePanel) {
|
||||
const referenceGroup = this._groups.get(
|
||||
options.position.reference
|
||||
options.position.referencePanel
|
||||
)?.value;
|
||||
|
||||
if (!referenceGroup) {
|
||||
throw new Error(
|
||||
`reference group ${options.position.reference} does not exist`
|
||||
`reference group ${options.position.referencePanel} does not exist`
|
||||
);
|
||||
}
|
||||
|
||||
@ -329,6 +329,8 @@ export class GridviewComponent
|
||||
this.registerPanel(view);
|
||||
|
||||
this.doAddGroup(view, relativeLocation, options.size);
|
||||
|
||||
return view;
|
||||
}
|
||||
|
||||
private registerPanel(panel: GridviewPanel) {
|
||||
|
@ -115,10 +115,10 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
return;
|
||||
}
|
||||
|
||||
const allPanels = containerApi.getPanels();
|
||||
const allPanels = containerApi.panels;
|
||||
|
||||
const fromIndex = allPanels.indexOf(existingPanel);
|
||||
let toIndex = containerApi.getPanels().indexOf(this);
|
||||
let toIndex = containerApi.panels.indexOf(this);
|
||||
|
||||
if (
|
||||
event.position === Position.Left ||
|
||||
|
@ -98,6 +98,7 @@ export interface IPaneviewComponent extends IDisposable {
|
||||
readonly height: number;
|
||||
readonly minimumSize: number;
|
||||
readonly maximumSize: number;
|
||||
readonly panels: IPaneviewPanel[];
|
||||
readonly onDidAddView: Event<PaneviewPanel>;
|
||||
readonly onDidRemoveView: Event<PaneviewPanel>;
|
||||
readonly onDidDrop: Event<PaneviewDropEvent2>;
|
||||
@ -107,9 +108,7 @@ export interface IPaneviewComponent extends IDisposable {
|
||||
layout(width: number, height: number): void;
|
||||
toJSON(): SerializedPaneview;
|
||||
fromJSON(serializedPaneview: SerializedPaneview): void;
|
||||
resizeToFit(): void;
|
||||
focus(): void;
|
||||
getPanels(): IPaneviewPanel[];
|
||||
removePanel(panel: IPaneviewPanel): void;
|
||||
getPanel(id: string): IPaneviewPanel | undefined;
|
||||
movePanel(from: number, to: number): void;
|
||||
@ -139,6 +138,10 @@ export class PaneviewComponent
|
||||
private readonly _onDidRemoveView = new Emitter<PaneviewPanel>();
|
||||
readonly onDidRemoveView = this._onDidRemoveView.event;
|
||||
|
||||
get panels(): PaneviewPanel[] {
|
||||
return this.paneview.getPanes();
|
||||
}
|
||||
|
||||
set paneview(value: Paneview) {
|
||||
this._paneview = value;
|
||||
|
||||
@ -288,12 +291,8 @@ export class PaneviewComponent
|
||||
return view;
|
||||
}
|
||||
|
||||
getPanels(): PaneviewPanel[] {
|
||||
return this.paneview.getPanes();
|
||||
}
|
||||
|
||||
removePanel(panel: PaneviewPanel) {
|
||||
const views = this.getPanels();
|
||||
const views = this.panels;
|
||||
const index = views.findIndex((_) => _ === panel);
|
||||
this.paneview.removePane(index);
|
||||
|
||||
@ -305,7 +304,7 @@ export class PaneviewComponent
|
||||
}
|
||||
|
||||
getPanel(id: string): PaneviewPanel | undefined {
|
||||
return this.getPanels().find((view) => view.id === id);
|
||||
return this.panels.find((view) => view.id === id);
|
||||
}
|
||||
|
||||
layout(width: number, height: number): void {
|
||||
@ -316,18 +315,6 @@ export class PaneviewComponent
|
||||
this.paneview.layout(size, orthogonalSize);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize the layout to fit the parent container
|
||||
*/
|
||||
resizeToFit(): void {
|
||||
if (!this.element.parentElement) {
|
||||
return;
|
||||
}
|
||||
const { width, height } =
|
||||
this.element.parentElement.getBoundingClientRect();
|
||||
this.layout(width, height);
|
||||
}
|
||||
|
||||
toJSON(): SerializedPaneview {
|
||||
const maximum = (value: number) =>
|
||||
value === Number.MAX_SAFE_INTEGER ||
|
||||
|
@ -36,11 +36,10 @@ export interface DockviewReadyEvent {
|
||||
}
|
||||
|
||||
export interface IDockviewReactProps {
|
||||
components?: PanelCollection<IDockviewPanelProps>;
|
||||
components: PanelCollection<IDockviewPanelProps>;
|
||||
tabComponents?: PanelCollection<IDockviewPanelHeaderProps>;
|
||||
watermarkComponent?: React.FunctionComponent<IWatermarkPanelProps>;
|
||||
onReady?: (event: DockviewReadyEvent) => void;
|
||||
debug?: boolean;
|
||||
onReady: (event: DockviewReadyEvent) => void;
|
||||
tabHeight?: number;
|
||||
onTabContextMenu?: (event: TabContextMenuEvent) => void;
|
||||
onDidDrop?: (event: DockviewDropEvent) => void;
|
||||
@ -127,7 +126,6 @@ export const DockviewReact = React.forwardRef(
|
||||
frameworkComponents: props.components,
|
||||
frameworkTabComponents: props.tabComponents,
|
||||
tabHeight: props.tabHeight,
|
||||
debug: props.debug,
|
||||
watermarkFrameworkComponent: props.watermarkComponent,
|
||||
styles: props.hideBorders
|
||||
? { separatorBorder: 'transparent' }
|
||||
|
@ -22,8 +22,8 @@ export interface IGridviewPanelProps<T extends { [index: string]: any } = any>
|
||||
}
|
||||
|
||||
export interface IGridviewReactProps {
|
||||
orientation: Orientation;
|
||||
onReady?: (event: GridviewReadyEvent) => void;
|
||||
orientation?: Orientation;
|
||||
onReady: (event: GridviewReadyEvent) => void;
|
||||
components: PanelCollection<IGridviewPanelProps>;
|
||||
hideBorders?: boolean;
|
||||
className?: string;
|
||||
@ -64,7 +64,7 @@ export const GridviewReact = React.forwardRef(
|
||||
typeof props.proportionalLayout === 'boolean'
|
||||
? props.proportionalLayout
|
||||
: true,
|
||||
orientation: props.orientation,
|
||||
orientation: props.orientation || Orientation.HORIZONTAL,
|
||||
frameworkComponents: props.components,
|
||||
frameworkComponentFactory: {
|
||||
createComponent: (id: string, componentId, component) => {
|
||||
|
@ -27,8 +27,8 @@ export interface PaneviewDropEvent extends PaneviewDropEvent2 {
|
||||
}
|
||||
|
||||
export interface IPaneviewReactProps {
|
||||
onReady?: (event: PaneviewReadyEvent) => void;
|
||||
components?: PanelCollection<IPaneviewPanelProps>;
|
||||
onReady: (event: PaneviewReadyEvent) => void;
|
||||
components: PanelCollection<IPaneviewPanelProps>;
|
||||
headerComponents?: PanelCollection<IPaneviewPanelProps>;
|
||||
className?: string;
|
||||
disableAutoResizing?: boolean;
|
||||
|
@ -22,8 +22,8 @@ export interface ISplitviewPanelProps<T extends { [index: string]: any } = any>
|
||||
}
|
||||
|
||||
export interface ISplitviewReactProps {
|
||||
orientation: Orientation;
|
||||
onReady?: (event: SplitviewReadyEvent) => void;
|
||||
orientation?: Orientation;
|
||||
onReady: (event: SplitviewReadyEvent) => void;
|
||||
components: PanelCollection<ISplitviewPanelProps>;
|
||||
proportionalLayout?: boolean;
|
||||
hideBorders?: boolean;
|
||||
@ -58,7 +58,7 @@ export const SplitviewReact = React.forwardRef(
|
||||
|
||||
React.useEffect(() => {
|
||||
const splitview = new SplitviewComponent(domRef.current!, {
|
||||
orientation: props.orientation,
|
||||
orientation: props.orientation || Orientation.HORIZONTAL,
|
||||
frameworkComponents: props.components,
|
||||
frameworkWrapper: {
|
||||
createComponent: (
|
||||
|
@ -61,18 +61,17 @@ export interface ISplitviewComponent extends IDisposable {
|
||||
readonly onDidAddView: Event<IView>;
|
||||
readonly onDidRemoveView: Event<IView>;
|
||||
readonly onDidLayoutFromJSON: Event<void>;
|
||||
readonly panels: SplitviewPanel[];
|
||||
updateOptions(options: Partial<SplitviewComponentUpdateOptions>): void;
|
||||
addPanel(options: AddSplitviewComponentOptions): void;
|
||||
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel;
|
||||
layout(width: number, height: number): void;
|
||||
onDidLayoutChange: Event<void>;
|
||||
toJSON(): SerializedSplitview;
|
||||
fromJSON(serializedSplitview: SerializedSplitview): void;
|
||||
resizeToFit(): void;
|
||||
focus(): void;
|
||||
getPanel(id: string): ISplitviewPanel | undefined;
|
||||
setActive(view: ISplitviewPanel, skipFocus?: boolean): void;
|
||||
removePanel(panel: ISplitviewPanel, sizing?: Sizing): void;
|
||||
getPanels(): SplitviewPanel[];
|
||||
setVisible(panel: ISplitviewPanel, visible: boolean): void;
|
||||
movePanel(from: number, to: number): void;
|
||||
}
|
||||
@ -87,7 +86,7 @@ export class SplitviewComponent
|
||||
private _disposable = new MutableDisposable();
|
||||
private _splitview!: Splitview;
|
||||
private _activePanel: SplitviewPanel | undefined;
|
||||
private panels = new Map<string, IValueDisposable<SplitviewPanel>>();
|
||||
private _panels = new Map<string, IValueDisposable<SplitviewPanel>>();
|
||||
private _options: SplitviewComponentOptions;
|
||||
|
||||
private readonly _onDidLayoutfromJSON = new Emitter<void>();
|
||||
@ -102,15 +101,23 @@ export class SplitviewComponent
|
||||
private readonly _onDidLayoutChange = new Emitter<void>();
|
||||
readonly onDidLayoutChange: Event<void> = this._onDidLayoutChange.event;
|
||||
|
||||
get options() {
|
||||
get panels(): SplitviewPanel[] {
|
||||
return this.splitview.getViews();
|
||||
}
|
||||
|
||||
get options(): SplitviewComponentOptions {
|
||||
return this._options;
|
||||
}
|
||||
|
||||
get orientation() {
|
||||
get length(): number {
|
||||
return this._panels.size;
|
||||
}
|
||||
|
||||
get orientation(): Orientation {
|
||||
return this.splitview.orientation;
|
||||
}
|
||||
|
||||
get splitview() {
|
||||
get splitview(): Splitview {
|
||||
return this._splitview;
|
||||
}
|
||||
|
||||
@ -128,30 +135,26 @@ export class SplitviewComponent
|
||||
);
|
||||
}
|
||||
|
||||
get minimumSize() {
|
||||
get minimumSize(): number {
|
||||
return this.splitview.minimumSize;
|
||||
}
|
||||
|
||||
get maximumSize() {
|
||||
get maximumSize(): number {
|
||||
return this.splitview.maximumSize;
|
||||
}
|
||||
|
||||
get height() {
|
||||
get height(): number {
|
||||
return this.splitview.orientation === Orientation.HORIZONTAL
|
||||
? this.splitview.orthogonalSize
|
||||
: this.splitview.size;
|
||||
}
|
||||
|
||||
get width() {
|
||||
get width(): number {
|
||||
return this.splitview.orientation === Orientation.HORIZONTAL
|
||||
? this.splitview.size
|
||||
: this.splitview.orthogonalSize;
|
||||
}
|
||||
|
||||
get length() {
|
||||
return this.panels.size;
|
||||
}
|
||||
|
||||
constructor(
|
||||
private readonly element: HTMLElement,
|
||||
options: SplitviewComponentOptions
|
||||
@ -195,23 +198,23 @@ export class SplitviewComponent
|
||||
);
|
||||
}
|
||||
|
||||
focus() {
|
||||
focus(): void {
|
||||
this._activePanel?.focus();
|
||||
}
|
||||
|
||||
movePanel(from: number, to: number) {
|
||||
movePanel(from: number, to: number): void {
|
||||
this.splitview.moveView(from, to);
|
||||
}
|
||||
|
||||
setVisible(panel: SplitviewPanel, visible: boolean) {
|
||||
const index = this.getPanels().indexOf(panel);
|
||||
setVisible(panel: SplitviewPanel, visible: boolean): void {
|
||||
const index = this.panels.indexOf(panel);
|
||||
this.splitview.setViewVisible(index, visible);
|
||||
}
|
||||
|
||||
setActive(view: SplitviewPanel, skipFocus?: boolean) {
|
||||
setActive(view: SplitviewPanel, skipFocus?: boolean): void {
|
||||
this._activePanel = view;
|
||||
|
||||
this.getPanels()
|
||||
this.panels
|
||||
.filter((v) => v !== view)
|
||||
.forEach((v) => {
|
||||
v.api._onDidActiveChange.fire({ isActive: false });
|
||||
@ -225,12 +228,8 @@ export class SplitviewComponent
|
||||
}
|
||||
}
|
||||
|
||||
getPanels(): SplitviewPanel[] {
|
||||
return this.splitview.getViews();
|
||||
}
|
||||
|
||||
removePanel(panel: SplitviewPanel, sizing?: Sizing) {
|
||||
const disposable = this.panels.get(panel.id);
|
||||
removePanel(panel: SplitviewPanel, sizing?: Sizing): void {
|
||||
const disposable = this._panels.get(panel.id);
|
||||
|
||||
if (!disposable) {
|
||||
throw new Error(`unknown splitview panel ${panel.id}`);
|
||||
@ -239,23 +238,23 @@ export class SplitviewComponent
|
||||
disposable.disposable.dispose();
|
||||
disposable.value.dispose();
|
||||
|
||||
this.panels.delete(panel.id);
|
||||
this._panels.delete(panel.id);
|
||||
|
||||
const index = this.getPanels().findIndex((_) => _ === panel);
|
||||
const index = this.panels.findIndex((_) => _ === panel);
|
||||
this.splitview.removeView(index, sizing);
|
||||
|
||||
const panels = this.getPanels();
|
||||
const panels = this.panels;
|
||||
if (panels.length > 0) {
|
||||
this.setActive(panels[panels.length - 1]);
|
||||
}
|
||||
}
|
||||
|
||||
getPanel(id: string): SplitviewPanel | undefined {
|
||||
return this.getPanels().find((view) => view.id === id);
|
||||
return this.panels.find((view) => view.id === id);
|
||||
}
|
||||
|
||||
addPanel(options: AddSplitviewComponentOptions): void {
|
||||
if (this.panels.has(options.id)) {
|
||||
addPanel(options: AddSplitviewComponentOptions): ISplitviewPanel {
|
||||
if (this._panels.has(options.id)) {
|
||||
throw new Error(`panel ${options.id} already exists`);
|
||||
}
|
||||
|
||||
@ -292,18 +291,8 @@ export class SplitviewComponent
|
||||
|
||||
this.doAddView(view);
|
||||
this.setActive(view);
|
||||
}
|
||||
|
||||
/**
|
||||
* Resize the layout to fit the parent container
|
||||
*/
|
||||
resizeToFit(): void {
|
||||
if (!this.element.parentElement) {
|
||||
return;
|
||||
}
|
||||
const { width, height } =
|
||||
this.element.parentElement.getBoundingClientRect();
|
||||
this.layout(width, height);
|
||||
return view;
|
||||
}
|
||||
|
||||
layout(width: number, height: number): void {
|
||||
@ -314,7 +303,7 @@ export class SplitviewComponent
|
||||
this.splitview.layout(size, orthogonalSize);
|
||||
}
|
||||
|
||||
private doAddView(view: SplitviewPanel) {
|
||||
private doAddView(view: SplitviewPanel): void {
|
||||
const disposable = view.api.onDidFocusChange((event) => {
|
||||
if (!event.isFocused) {
|
||||
return;
|
||||
@ -322,7 +311,7 @@ export class SplitviewComponent
|
||||
this.setActive(view, true);
|
||||
});
|
||||
|
||||
this.panels.set(view.id, { disposable, value: view });
|
||||
this._panels.set(view.id, { disposable, value: view });
|
||||
}
|
||||
|
||||
toJSON(): SerializedSplitview {
|
||||
@ -349,11 +338,11 @@ export class SplitviewComponent
|
||||
fromJSON(serializedSplitview: SerializedSplitview): void {
|
||||
const { views, orientation, size, activeView } = serializedSplitview;
|
||||
|
||||
for (const [_, value] of this.panels.entries()) {
|
||||
for (const [_, value] of this._panels.entries()) {
|
||||
value.disposable.dispose();
|
||||
value.value.dispose();
|
||||
}
|
||||
this.panels.clear();
|
||||
this._panels.clear();
|
||||
this.splitview.dispose();
|
||||
|
||||
const queue: Function[] = [];
|
||||
@ -366,7 +355,7 @@ export class SplitviewComponent
|
||||
views: views.map((view) => {
|
||||
const data = view.data;
|
||||
|
||||
if (this.panels.has(data.id)) {
|
||||
if (this._panels.has(data.id)) {
|
||||
throw new Error(`panel ${data.id} already exists`);
|
||||
}
|
||||
|
||||
@ -422,12 +411,12 @@ export class SplitviewComponent
|
||||
this._onDidLayoutfromJSON.fire();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
for (const [_, value] of this.panels.entries()) {
|
||||
dispose(): void {
|
||||
for (const [_, value] of this._panels.entries()) {
|
||||
value.disposable.dispose();
|
||||
value.value.dispose();
|
||||
}
|
||||
this.panels.clear();
|
||||
this._panels.clear();
|
||||
|
||||
this.splitview.dispose();
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user