From bb247e1303e6cfa9123c30908f40584dc62cba63 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 9 May 2022 21:23:23 +0100 Subject: [PATCH 1/5] feat: fix dnd firefox bug + simplify tab rendering and remove support for HOC Dockview components since it's not a great implementation - can find another solution if required --- .../src/dockview/components/tab/defaultTab.ts | 69 ++------------ .../src/dockview/defaultGroupPanelView.ts | 11 +-- packages/dockview/src/groupview/types.ts | 4 +- .../src/react/dockview/components.tsx | 89 ------------------- .../src/react/dockview/reactContentPart.ts | 8 +- .../react/dockview/v2/reactContentRenderer.ts | 4 - packages/dockview/src/react/index.ts | 1 - 7 files changed, 14 insertions(+), 172 deletions(-) delete mode 100644 packages/dockview/src/react/dockview/components.tsx diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.ts b/packages/dockview/src/dockview/components/tab/defaultTab.ts index 89888da2a..2411d6851 100644 --- a/packages/dockview/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview/src/dockview/components/tab/defaultTab.ts @@ -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) { diff --git a/packages/dockview/src/dockview/defaultGroupPanelView.ts b/packages/dockview/src/dockview/defaultGroupPanelView.ts index dac5eec02..c59190758 100644 --- a/packages/dockview/src/dockview/defaultGroupPanelView.ts +++ b/packages/dockview/src/dockview/defaultGroupPanelView.ts @@ -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(), }; } diff --git a/packages/dockview/src/groupview/types.ts b/packages/dockview/src/groupview/types.ts index 32e6917c7..4c50bfc72 100644 --- a/packages/dockview/src/groupview/types.ts +++ b/packages/dockview/src/groupview/types.ts @@ -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; updateParentGroup(group: GroupPanel, isPanelVisible: boolean): void; init(parameters: GroupPanelContentPartInitParameters): void; - close?(): Promise; } // watermark component diff --git a/packages/dockview/src/react/dockview/components.tsx b/packages/dockview/src/react/dockview/components.tsx deleted file mode 100644 index 8f382ab58..000000000 --- a/packages/dockview/src/react/dockview/components.tsx +++ /dev/null @@ -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 = (props: WithChildren) => { - return <>{props.children}; -}; - -const Content: React.FunctionComponent = ( - props: WithChildren -) => { - return <>{props.children}; -}; -const Actions: React.FunctionComponent = ( - props: WithChildren -) => { - return <>{props.children}; -}; - -function isValidComponent(element: React.ReactElement) { - return [Content, Actions, Tab].find((comp) => element.type === comp); -} - -const Panel: React.FunctionComponent = (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, -}; diff --git a/packages/dockview/src/react/dockview/reactContentPart.ts b/packages/dockview/src/react/dockview/reactContentPart.ts index 319000fe7..07d4036cb 100644 --- a/packages/dockview/src/react/dockview/reactContentPart.ts +++ b/packages/dockview/src/react/dockview/reactContentPart.ts @@ -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 { - return Promise.resolve(true); - } - public dispose() { this._onDidFocus.dispose(); this._onDidBlur.dispose(); diff --git a/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts b/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts index 90fbd2af2..83f693b80 100644 --- a/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts +++ b/packages/dockview/src/react/dockview/v2/reactContentRenderer.ts @@ -99,10 +99,6 @@ export class ReactContentRenderer implements IContentRenderer { this._hostedContainer.layout(this.element); } - public close(): Promise { - return Promise.resolve(true); - } - public dispose() { this.part?.dispose(); } diff --git a/packages/dockview/src/react/index.ts b/packages/dockview/src/react/index.ts index 05705fbdd..023167a96 100644 --- a/packages/dockview/src/react/index.ts +++ b/packages/dockview/src/react/index.ts @@ -1,5 +1,4 @@ export * from './dockview/dockview'; -export * from './dockview/components'; export * from './splitview/splitview'; export * from './gridview/gridview'; export * from './dockview/reactContentPart'; From 48a1cc9693a84bec42543c72a8add5c724d145c0 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 9 May 2022 21:25:18 +0100 Subject: [PATCH 2/5] chore: fix demo demo app to be deleted soon in favor of docs so fix is just to remove code --- .../src/layout-grid/layoutGrid.tsx | 21 +--- .../layout-grid/panels/exampleFunctions.tsx | 112 +++++++----------- .../dockview/dockview.params.stories.tsx | 33 +----- .../stories/dockview/dockview.tab.stories.tsx | 31 +---- 4 files changed, 50 insertions(+), 147 deletions(-) diff --git a/packages/dockview-demo/src/layout-grid/layoutGrid.tsx b/packages/dockview-demo/src/layout-grid/layoutGrid.tsx index 6c660d91f..d8889ec72 100644 --- a/packages/dockview-demo/src/layout-grid/layoutGrid.tsx +++ b/packages/dockview-demo/src/layout-grid/layoutGrid.tsx @@ -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 ( - - {counter % 4 === 0 && ( - -
{`custom tab ${counter}`}
- - )} - -
-
{`custom body ${counter}`}
- -
- - -
{`custom action ${counter}`}
- - +
+
{`custom body ${counter}`}
+ +
); }; diff --git a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx index e0384ac30..a24f7e477 100644 --- a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx +++ b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx @@ -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'; @@ -49,80 +49,52 @@ export const ExampleFunctions = ( }; return ( - - -
+
+
+ + {'isGroupActive: '} - menu + {`${panelState.isGroupActive}`} -
- - -
-
- - {'isGroupActive: '} - - {`${panelState.isGroupActive}`} - - - - {'isPanelVisible: '} - - {`${panelState.isPanelVisible}`} - - -
-
- - setPanelName(event.target.value) - } - /> - -
+ + + {'isPanelVisible: '} + + {`${panelState.isPanelVisible}`} + + +
+
+ setPanelName(event.target.value)} + /> + +
- - -
- - + + +
); }; diff --git a/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx index eaed448c2..888f76bd5 100644 --- a/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx +++ b/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx @@ -1,6 +1,5 @@ import { DockviewApi, - DockviewComponents, DockviewReact, DockviewReadyEvent, IDockviewPanelProps, @@ -18,35 +17,9 @@ const components: PanelCollection> = { ticker: (props: IDockviewPanelProps<{ ticker: number }>) => { const close = () => props.api.close(); return ( - - -
- {props.api.title} - {`(${props.params.ticker})`} - {!props.api.suppressClosable && ( - X - )} -
- - -
- {`The current ticker value is ${props.params.ticker}`} -
- - +
+ {`The current ticker value is ${props.params.ticker}`} +
); }, iframe: (props) => { diff --git a/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx index 60bffe701..9f5edfc5e 100644 --- a/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx +++ b/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx @@ -1,6 +1,5 @@ import { DockviewApi, - DockviewComponents, DockviewReact, DockviewReadyEvent, IDockviewPanelProps, @@ -13,35 +12,7 @@ const components: PanelCollection = { default: (props) => { const close = () => props.api.close(); return ( - - -
- {props.api.title} - - {'(Custom tab component)'} - - {!props.api.suppressClosable && ( - X - )} -
- - -
- hello world -
- - +
hello world
); }, }; From a7b05cf1a81e910439c76392a4133b0fdcfd28e9 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 9 May 2022 21:37:57 +0100 Subject: [PATCH 3/5] feat: only update text content if required --- packages/dockview/src/dockview/components/tab/defaultTab.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.ts b/packages/dockview/src/dockview/components/tab/defaultTab.ts index 2411d6851..19d0b06be 100644 --- a/packages/dockview/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview/src/dockview/components/tab/defaultTab.ts @@ -104,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; + } } } From b4a1f46a49ed567d1ca31d5b62d04e5b46be24b0 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 10 May 2022 21:33:32 +0100 Subject: [PATCH 4/5] feat: api enhancements * rename variable * remove interface functions not intended to be public --- .../dockview/src/__tests__/api/api.spec.ts | 4 ++-- packages/dockview/src/api/component.api.ts | 20 ------------------- packages/dockview/src/api/panelApi.ts | 13 +++++------- .../src/dockview/dockviewComponent.ts | 2 +- .../src/dockview/dockviewGroupPanel.ts | 2 +- .../dockview/src/gridview/basePanelView.ts | 2 +- .../src/gridview/gridviewComponent.ts | 10 ++-------- .../dockview/src/gridview/gridviewPanel.ts | 16 ++++++++------- packages/dockview/src/react/gridview/view.ts | 6 ++++-- packages/dockview/src/react/splitview/view.ts | 6 ++++-- .../dockview/src/splitview/core/options.ts | 4 ++-- .../src/splitview/splitviewComponent.ts | 6 ++---- .../dockview/src/splitview/splitviewPanel.ts | 10 ++++------ 13 files changed, 37 insertions(+), 64 deletions(-) diff --git a/packages/dockview/src/__tests__/api/api.spec.ts b/packages/dockview/src/__tests__/api/api.spec.ts index 647ff98c4..10f9bc657 100644 --- a/packages/dockview/src/__tests__/api/api.spec.ts +++ b/packages/dockview/src/__tests__/api/api.spec.ts @@ -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); }); diff --git a/packages/dockview/src/api/component.api.ts b/packages/dockview/src/api/component.api.ts index 034b3b946..00adb0c7f 100644 --- a/packages/dockview/src/api/component.api.ts +++ b/packages/dockview/src/api/component.api.ts @@ -100,10 +100,6 @@ export class SplitviewApi implements CommonApi { 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 { 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 { 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); } diff --git a/packages/dockview/src/api/panelApi.ts b/packages/dockview/src/api/panelApi.ts index 88e657531..1b16d9195 100644 --- a/packages/dockview/src/api/panelApi.ts +++ b/packages/dockview/src/api/panelApi.ts @@ -23,8 +23,6 @@ export interface PanelApi { readonly onDidFocusChange: Event; readonly onDidVisibilityChange: Event; readonly onDidActiveChange: Event; - readonly onFocusEvent: Event; - // 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({ - replay: true, - }); - readonly onDidDimensionsChange = this._onDidPanelDimensionChange.event; + readonly _onDidDimensionChange = new Emitter({ + replay: true, + }); + readonly onDidDimensionsChange = this._onDidDimensionChange.event; // readonly _onDidChangeFocus = new Emitter({ 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, diff --git a/packages/dockview/src/dockview/dockviewComponent.ts b/packages/dockview/src/dockview/dockviewComponent.ts index 48efdad29..91f5dc6d5 100644 --- a/packages/dockview/src/dockview/dockviewComponent.ts +++ b/packages/dockview/src/dockview/dockviewComponent.ts @@ -669,7 +669,7 @@ export class DockviewComponent } const view = new GroupPanel(this, id, options); - view.init({ params: {}, containerApi: null }); // required to initialized .part and allow for correct disposal of group + view.init({ params: {}, accessor: null }); // required to initialized .part and allow for correct disposal of group if (!this._groups.has(view.id)) { const disposable = new CompositeDisposable( diff --git a/packages/dockview/src/dockview/dockviewGroupPanel.ts b/packages/dockview/src/dockview/dockviewGroupPanel.ts index 5150cd736..b7d44229e 100644 --- a/packages/dockview/src/dockview/dockviewGroupPanel.ts +++ b/packages/dockview/src/dockview/dockviewGroupPanel.ts @@ -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), }); diff --git a/packages/dockview/src/gridview/basePanelView.ts b/packages/dockview/src/gridview/basePanelView.ts index f6e5f7567..61445fa21 100644 --- a/packages/dockview/src/gridview/basePanelView.ts +++ b/packages/dockview/src/gridview/basePanelView.ts @@ -90,7 +90,7 @@ export abstract class BasePanelView 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) { diff --git a/packages/dockview/src/gridview/gridviewComponent.ts b/packages/dockview/src/gridview/gridviewComponent.ts index e7413925c..7738f6158 100644 --- a/packages/dockview/src/gridview/gridviewComponent.ts +++ b/packages/dockview/src/gridview/gridviewComponent.ts @@ -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 { updateOptions(options: Partial): 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, }); diff --git a/packages/dockview/src/gridview/gridviewPanel.ts b/packages/dockview/src/gridview/gridviewPanel.ts index 8d49c8cd9..fbdfc6575 100644 --- a/packages/dockview/src/gridview/gridviewPanel.ts +++ b/packages/dockview/src/gridview/gridviewPanel.ts @@ -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 ( diff --git a/packages/dockview/src/react/gridview/view.ts b/packages/dockview/src/react/gridview/view.ts index 9fa0f2446..417734f33 100644 --- a/packages/dockview/src/react/gridview/view.ts +++ b/packages/dockview/src/react/gridview/view.ts @@ -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 + ), } ); } diff --git a/packages/dockview/src/react/splitview/view.ts b/packages/dockview/src/react/splitview/view.ts index 3f427da2d..9c7c66450 100644 --- a/packages/dockview/src/react/splitview/view.ts +++ b/packages/dockview/src/react/splitview/view.ts @@ -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 + ), } ); } diff --git a/packages/dockview/src/splitview/core/options.ts b/packages/dockview/src/splitview/core/options.ts index 24cf5de5a..05d01864f 100644 --- a/packages/dockview/src/splitview/core/options.ts +++ b/packages/dockview/src/splitview/core/options.ts @@ -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 { diff --git a/packages/dockview/src/splitview/splitviewComponent.ts b/packages/dockview/src/splitview/splitviewComponent.ts index 486bfd43f..d802ca4e0 100644 --- a/packages/dockview/src/splitview/splitviewComponent.ts +++ b/packages/dockview/src/splitview/splitviewComponent.ts @@ -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, }); }); diff --git a/packages/dockview/src/splitview/splitviewPanel.ts b/packages/dockview/src/splitview/splitviewPanel.ts index 3b2a21886..459cea825 100644 --- a/packages/dockview/src/splitview/splitviewPanel.ts +++ b/packages/dockview/src/splitview/splitviewPanel.ts @@ -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 ( From 6d58e48470370b46f4205df9542701ad4f02c051 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Tue, 10 May 2022 21:59:06 +0100 Subject: [PATCH 5/5] chore: fix demo --- .../dockview-demo/src/layout-grid/activitybar.tsx | 4 ++-- .../src/layout-grid/panels/exampleFunctions.tsx | 6 ++++-- packages/dockview-demo/src/layout-grid/sidebar.tsx | 6 ++++-- .../dockview-demo/src/layout-grid/splitPanel.tsx | 12 ++++++++---- .../dockview-demo/src/panels/splitview/splitview.tsx | 2 +- packages/dockview-demo/src/services/widgets.tsx | 6 +++--- 6 files changed, 22 insertions(+), 14 deletions(-) diff --git a/packages/dockview-demo/src/layout-grid/activitybar.tsx b/packages/dockview-demo/src/layout-grid/activitybar.tsx index 925d3d680..ba68ef956 100644 --- a/packages/dockview-demo/src/layout-grid/activitybar.tsx +++ b/packages/dockview-demo/src/layout-grid/activitybar.tsx @@ -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(); } }; diff --git a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx index a24f7e477..b0832f0cf 100644 --- a/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx +++ b/packages/dockview-demo/src/layout-grid/panels/exampleFunctions.tsx @@ -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(); + } }) ); diff --git a/packages/dockview-demo/src/layout-grid/sidebar.tsx b/packages/dockview-demo/src/layout-grid/sidebar.tsx index 864043275..bdb69f55d 100644 --- a/packages/dockview-demo/src/layout-grid/sidebar.tsx +++ b/packages/dockview-demo/src/layout-grid/sidebar.tsx @@ -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(); + } }) ); diff --git a/packages/dockview-demo/src/layout-grid/splitPanel.tsx b/packages/dockview-demo/src/layout-grid/splitPanel.tsx index 177954997..c5b812383 100644 --- a/packages/dockview-demo/src/layout-grid/splitPanel.tsx +++ b/packages/dockview-demo/src/layout-grid/splitPanel.tsx @@ -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(); + } }) ); diff --git a/packages/dockview-demo/src/panels/splitview/splitview.tsx b/packages/dockview-demo/src/panels/splitview/splitview.tsx index c74fe45b4..17012f142 100644 --- a/packages/dockview-demo/src/panels/splitview/splitview.tsx +++ b/packages/dockview-demo/src/panels/splitview/splitview.tsx @@ -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), diff --git a/packages/dockview-demo/src/services/widgets.tsx b/packages/dockview-demo/src/services/widgets.tsx index af1174277..555d0cb64 100644 --- a/packages/dockview-demo/src/services/widgets.tsx +++ b/packages/dockview-demo/src/services/widgets.tsx @@ -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(); }