From b812cf911756d5625e9b449c8261df92a5fb345d Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 27 Oct 2024 19:53:29 +0000 Subject: [PATCH 1/2] chore: code cleanup --- .../dockview-core/src/api/dockviewPanelApi.ts | 4 +-- .../src/dnd/abstractDragHandler.ts | 2 +- packages/dockview-core/src/dnd/dnd.ts | 4 +-- .../src/dockview/components/panel/content.ts | 11 ++----- .../src/dockview/components/tab/defaultTab.ts | 6 ++-- .../components/watermark/watermark.ts | 2 +- .../src/dockview/dockviewComponent.ts | 4 +-- .../src/dockview/dockviewGroupPanelModel.ts | 4 +-- .../src/dockview/dockviewPanel.ts | 8 ++--- .../dockview-core/src/dockview/options.ts | 1 - packages/dockview-core/src/dom.ts | 32 ++++++++++++++++++- .../src/gridview/baseComponentGridview.ts | 2 +- .../src/gridview/basePanelView.ts | 2 +- .../dockview-core/src/gridview/branchNode.ts | 2 +- .../dockview-core/src/gridview/leafNode.ts | 2 +- packages/dockview-core/src/index.ts | 24 ++++++++++---- packages/dockview-core/src/overlay/overlay.ts | 6 ++-- .../src/paneview/defaultPaneviewHeader.ts | 4 ++- .../dockview-core/src/paneview/paneview.ts | 6 ++-- .../src/paneview/paneviewComponent.ts | 6 ++-- .../src/paneview/paneviewPanel.ts | 7 ++-- .../dockview-core/src/splitview/splitview.ts | 17 ++++++---- .../src/splitview/splitviewComponent.ts | 6 ++-- .../dockview-core/src/splitview/viewItem.ts | 2 +- .../src/dockview/headerActionsRenderer.ts | 4 +-- .../dockview/src/dockview/reactContentPart.ts | 2 +- .../dockview/src/dockview/reactHeaderPart.ts | 2 +- .../src/dockview/reactWatermarkPart.ts | 5 ++- .../src/paneview/{view.tsx => view.ts} | 2 +- 29 files changed, 108 insertions(+), 71 deletions(-) rename packages/dockview/src/paneview/{view.tsx => view.ts} (96%) diff --git a/packages/dockview-core/src/api/dockviewPanelApi.ts b/packages/dockview-core/src/api/dockviewPanelApi.ts index 7afe192e5..20646b16d 100644 --- a/packages/dockview-core/src/api/dockviewPanelApi.ts +++ b/packages/dockview-core/src/api/dockviewPanelApi.ts @@ -69,7 +69,7 @@ export class DockviewPanelApiImpl implements DockviewPanelApi { private _group: DockviewGroupPanel; - private _tabComponent: string | undefined; + private readonly _tabComponent: string | undefined; readonly _onDidTitleChange = new Emitter(); readonly onDidTitleChange = this._onDidTitleChange.event; @@ -131,7 +131,7 @@ export class DockviewPanelApiImpl } constructor( - private panel: DockviewPanel, + private readonly panel: DockviewPanel, group: DockviewGroupPanel, private readonly accessor: DockviewComponent, component: string, diff --git a/packages/dockview-core/src/dnd/abstractDragHandler.ts b/packages/dockview-core/src/dnd/abstractDragHandler.ts index 0baae94c0..84345c160 100644 --- a/packages/dockview-core/src/dnd/abstractDragHandler.ts +++ b/packages/dockview-core/src/dnd/abstractDragHandler.ts @@ -1,4 +1,4 @@ -import { disableIframePointEvents, getElementsByTagName } from '../dom'; +import { disableIframePointEvents } from '../dom'; import { addDisposableListener, Emitter } from '../events'; import { CompositeDisposable, diff --git a/packages/dockview-core/src/dnd/dnd.ts b/packages/dockview-core/src/dnd/dnd.ts index 2120f2994..cf3dbc14e 100644 --- a/packages/dockview-core/src/dnd/dnd.ts +++ b/packages/dockview-core/src/dnd/dnd.ts @@ -13,8 +13,8 @@ export class DragAndDropObserver extends CompositeDisposable { private target: EventTarget | null = null; constructor( - private element: HTMLElement, - private callbacks: IDragAndDropObserverCallbacks + private readonly element: HTMLElement, + private readonly callbacks: IDragAndDropObserverCallbacks ) { super(); diff --git a/packages/dockview-core/src/dockview/components/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts index d09606382..533b5de88 100644 --- a/packages/dockview-core/src/dockview/components/panel/content.ts +++ b/packages/dockview-core/src/dockview/components/panel/content.ts @@ -3,12 +3,7 @@ import { IDisposable, MutableDisposable, } from '../../../lifecycle'; -import { - addDisposableListener, - addDisposableWindowListener, - Emitter, - Event, -} from '../../../events'; +import { Emitter, Event } from '../../../events'; import { trackFocus } from '../../../dom'; import { IDockviewPanel } from '../../dockviewPanel'; import { DockviewComponent } from '../../dockviewComponent'; @@ -33,9 +28,9 @@ export class ContentContainer extends CompositeDisposable implements IContentContainer { - private _element: HTMLElement; + private readonly _element: HTMLElement; private panel: IDockviewPanel | undefined; - private disposable = new MutableDisposable(); + private readonly disposable = new MutableDisposable(); private readonly _onDidFocus = new Emitter(); readonly onDidFocus: Event = this._onDidFocus.event; diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts index af86ee35b..80c30be5d 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.ts +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.ts @@ -4,9 +4,9 @@ import { addDisposableListener } from '../../../events'; import { createCloseButton } from '../../../svg'; export class DefaultTab extends CompositeDisposable implements ITabRenderer { - private _element: HTMLElement; - private _content: HTMLElement; - private action: HTMLElement; + private readonly _element: HTMLElement; + private readonly _content: HTMLElement; + private readonly action: HTMLElement; private _title: string | undefined; get element(): HTMLElement { diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index bee5c4b5a..f213868b8 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -13,7 +13,7 @@ export class Watermark extends CompositeDisposable implements IWatermarkRenderer { - private _element: HTMLElement; + private readonly _element: HTMLElement; private _group: IDockviewGroupPanel | undefined; private _api: DockviewApi | undefined; diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index ba027fa55..a7b71827d 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -39,7 +39,7 @@ import { toTarget, } from '../gridview/baseComponentGridview'; import { DockviewApi } from '../api/component.api'; -import { Orientation, Sizing } from '../splitview/splitview'; +import { Orientation } from '../splitview/splitview'; import { GroupOptions, GroupPanelViewState, @@ -1977,7 +1977,7 @@ export class DockviewComponent const newGroup = this.createGroupAtLocation(targetLocation); this.movingLock(() => - newGroup.model.openPanel(removedPanel!, { + newGroup.model.openPanel(removedPanel, { skipSetActive: true, }) ); diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 21e9cbe2d..fb27c42fd 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -272,7 +272,7 @@ export class DockviewGroupPanelModel private _width = 0; private _height = 0; - private _panels: IDockviewPanel[] = []; + private readonly _panels: IDockviewPanel[] = []; private readonly _panelDisposables = new Map(); private readonly _onMove = new Emitter(); @@ -429,7 +429,7 @@ export class DockviewGroupPanelModel constructor( private readonly container: HTMLElement, - private accessor: DockviewComponent, + private readonly accessor: DockviewComponent, public id: string, private readonly options: GroupOptions, private readonly groupPanel: DockviewGroupPanel diff --git a/packages/dockview-core/src/dockview/dockviewPanel.ts b/packages/dockview-core/src/dockview/dockviewPanel.ts index 8eb2cfb7f..bf71ca6c1 100644 --- a/packages/dockview-core/src/dockview/dockviewPanel.ts +++ b/packages/dockview-core/src/dockview/dockviewPanel.ts @@ -45,10 +45,10 @@ export class DockviewPanel private _title: string | undefined; private _renderer: DockviewPanelRenderer | undefined; - private _minimumWidth: number | undefined; - private _minimumHeight: number | undefined; - private _maximumWidth: number | undefined; - private _maximumHeight: number | undefined; + private readonly _minimumWidth: number | undefined; + private readonly _minimumHeight: number | undefined; + private readonly _maximumWidth: number | undefined; + private readonly _maximumHeight: number | undefined; get params(): Parameters | undefined { return this._params; diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index 561a732f4..9f21344e1 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -14,7 +14,6 @@ import { import { IDockviewPanel } from './dockviewPanel'; import { DockviewPanelRenderer } from '../overlay/overlayRenderContainer'; import { IGroupHeaderProps } from './framework'; -import { AnchoredBox } from '../types'; import { FloatingGroupOptions } from './dockviewComponent'; import { Contraints } from '../gridview/gridviewPanel'; diff --git a/packages/dockview-core/src/dom.ts b/packages/dockview-core/src/dom.ts index bcc82a496..d61b1cacb 100644 --- a/packages/dockview-core/src/dom.ts +++ b/packages/dockview-core/src/dom.ts @@ -6,6 +6,36 @@ import { } from './events'; import { IDisposable, CompositeDisposable } from './lifecycle'; +export interface OverflowEvent { + hasScrollX: boolean; + hasScrollY: boolean; +} + +export class OverflowObserver extends CompositeDisposable { + private readonly _onDidChange = new Emitter(); + readonly onDidChange = this._onDidChange.event; + + private _value: OverflowEvent | null = null; + + constructor(el: HTMLElement) { + super(); + + this.addDisposables( + this._onDidChange, + watchElementResize(el, (entry) => { + const hasScrollX = + entry.target.scrollWidth > entry.target.clientWidth; + + const hasScrollY = + entry.target.scrollHeight > entry.target.clientHeight; + + this._value = { hasScrollX, hasScrollY }; + this._onDidChange.fire(this._value); + }) + ); + } +} + export function watchElementResize( element: HTMLElement, cb: (entry: ResizeObserverEntry) => void @@ -106,7 +136,7 @@ class FocusTracker extends CompositeDisposable implements IFocusTracker { private readonly _onDidBlur = new Emitter(); public readonly onDidBlur: DockviewEvent = this._onDidBlur.event; - private _refreshStateHandler: () => void; + private readonly _refreshStateHandler: () => void; constructor(element: HTMLElement | Window) { super(); diff --git a/packages/dockview-core/src/gridview/baseComponentGridview.ts b/packages/dockview-core/src/gridview/baseComponentGridview.ts index 332cef90c..e86dee387 100644 --- a/packages/dockview-core/src/gridview/baseComponentGridview.ts +++ b/packages/dockview-core/src/gridview/baseComponentGridview.ts @@ -7,7 +7,7 @@ import { ISplitviewStyles, Orientation, Sizing } from '../splitview/splitview'; import { IPanel } from '../panel/types'; import { MovementOptions2 } from '../dockview/options'; import { Resizable } from '../resizable'; -import { Classnames, toggleClass } from '../dom'; +import { Classnames } from '../dom'; const nextLayoutId = sequentialNumberGenerator(); diff --git a/packages/dockview-core/src/gridview/basePanelView.ts b/packages/dockview-core/src/gridview/basePanelView.ts index 088831aad..8057ade52 100644 --- a/packages/dockview-core/src/gridview/basePanelView.ts +++ b/packages/dockview-core/src/gridview/basePanelView.ts @@ -32,7 +32,7 @@ export abstract class BasePanelView { private _height = 0; private _width = 0; - private _element: HTMLElement; + private readonly _element: HTMLElement; protected part?: IFrameworkPart; protected _params?: PanelInitParameters; diff --git a/packages/dockview-core/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts index 1fb55e7ef..084c69830 100644 --- a/packages/dockview-core/src/gridview/branchNode.ts +++ b/packages/dockview-core/src/gridview/branchNode.ts @@ -19,7 +19,7 @@ import { CompositeDisposable, IDisposable, Disposable } from '../lifecycle'; export class BranchNode extends CompositeDisposable implements IView { readonly element: HTMLElement; - private splitview: Splitview; + private readonly splitview: Splitview; private _orthogonalSize: number; private _size: number; private _childrenDisposable: IDisposable = Disposable.NONE; diff --git a/packages/dockview-core/src/gridview/leafNode.ts b/packages/dockview-core/src/gridview/leafNode.ts index 017d4e06b..5d5c9ae16 100644 --- a/packages/dockview-core/src/gridview/leafNode.ts +++ b/packages/dockview-core/src/gridview/leafNode.ts @@ -17,7 +17,7 @@ export class LeafNode implements IView { this._onDidChange.event; private _size: number; private _orthogonalSize: number; - private _disposable: IDisposable; + private readonly _disposable: IDisposable; private get minimumWidth(): number { return this.view.minimumWidth; diff --git a/packages/dockview-core/src/index.ts b/packages/dockview-core/src/index.ts index b0f9a9ac7..02171ae7d 100644 --- a/packages/dockview-core/src/index.ts +++ b/packages/dockview-core/src/index.ts @@ -1,4 +1,9 @@ -export * from './dnd/dataTransfer'; +export { + getPaneData, + getPanelData, + PaneTransfer, + PanelTransfer, +} from './dnd/dataTransfer'; /** * Events, Emitters and Disposables are very common concepts that many codebases will contain, however we need @@ -7,14 +12,13 @@ export * from './dnd/dataTransfer'; */ export { Emitter as DockviewEmitter, Event as DockviewEvent } from './events'; export { - IDisposable as IDockviewDisposable, + IDisposable as DockviewIDisposable, MutableDisposable as DockviewMutableDisposable, CompositeDisposable as DockviewCompositeDisposable, Disposable as DockviewDisposable, } from './lifecycle'; export * from './panel/types'; -export * from './panel/componentFactory'; export * from './splitview/splitview'; export { @@ -27,7 +31,10 @@ export * from './gridview/gridview'; export { GridviewComponentOptions } from './gridview/options'; export * from './gridview/baseComponentGridview'; -export * from './paneview/draggablePaneviewPanel'; +export { + DraggablePaneviewPanel, + PaneviewDropEvent, +} from './paneview/draggablePaneviewPanel'; export * from './dockview/components/panel/content'; export * from './dockview/components/tab/tab'; @@ -50,8 +57,11 @@ export { export * from './dockview/options'; export * from './dockview/dockviewPanel'; -export * from './dockview/components/tab/defaultTab'; -export * from './dockview/deserializer'; +export { DefaultTab } from './dockview/components/tab/defaultTab'; +export { + DefaultDockviewDeserialzier, + IPanelDeserializer, +} from './dockview/deserializer'; export * from './dockview/dockviewComponent'; export * from './gridview/gridviewComponent'; @@ -60,7 +70,7 @@ export * from './paneview/paneviewComponent'; export { PaneviewComponentOptions } from './paneview/options'; export * from './gridview/gridviewPanel'; -export * from './splitview/splitviewPanel'; +export { SplitviewPanel, ISplitviewPanel } from './splitview/splitviewPanel'; export * from './paneview/paneviewPanel'; export * from './dockview/types'; diff --git a/packages/dockview-core/src/overlay/overlay.ts b/packages/dockview-core/src/overlay/overlay.ts index c0a2fd598..b34fb9296 100644 --- a/packages/dockview-core/src/overlay/overlay.ts +++ b/packages/dockview-core/src/overlay/overlay.ts @@ -45,7 +45,7 @@ class AriaLevelTracker { const arialLevelTracker = new AriaLevelTracker(); export class Overlay extends CompositeDisposable { - private _element: HTMLElement = document.createElement('div'); + private readonly _element: HTMLElement = document.createElement('div'); private readonly _onDidChange = new Emitter(); readonly onDidChange: Event = this._onDidChange.event; @@ -53,8 +53,8 @@ export class Overlay extends CompositeDisposable { private readonly _onDidChangeEnd = new Emitter(); readonly onDidChangeEnd: Event = this._onDidChangeEnd.event; - private static MINIMUM_HEIGHT = 20; - private static MINIMUM_WIDTH = 20; + private static readonly MINIMUM_HEIGHT = 20; + private static readonly MINIMUM_WIDTH = 20; private verticalAlignment: 'top' | 'bottom' | undefined; private horiziontalAlignment: 'left' | 'right' | undefined; diff --git a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts index 300a9be44..ee37cc597 100644 --- a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts +++ b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts @@ -16,7 +16,9 @@ export class DefaultHeader private readonly _element: HTMLElement; private readonly _content: HTMLElement; private readonly _expander: HTMLElement; - private apiRef: { api: PaneviewPanelApiImpl | null } = { api: null }; + private readonly apiRef: { api: PaneviewPanelApiImpl | null } = { + api: null, + }; get element(): HTMLElement { return this._element; diff --git a/packages/dockview-core/src/paneview/paneview.ts b/packages/dockview-core/src/paneview/paneview.ts index 53a6516a8..7fdd405e9 100644 --- a/packages/dockview-core/src/paneview/paneview.ts +++ b/packages/dockview-core/src/paneview/paneview.ts @@ -15,10 +15,10 @@ interface PaneItem { } export class Paneview extends CompositeDisposable implements IDisposable { - private element: HTMLElement; - private splitview: Splitview; + private readonly element: HTMLElement; + private readonly splitview: Splitview; private paneItems: PaneItem[] = []; - private _orientation: Orientation; + private readonly _orientation: Orientation; private animationTimer: any; private skipAnimation = false; diff --git a/packages/dockview-core/src/paneview/paneviewComponent.ts b/packages/dockview-core/src/paneview/paneviewComponent.ts index 2920cb802..171f4a703 100644 --- a/packages/dockview-core/src/paneview/paneviewComponent.ts +++ b/packages/dockview-core/src/paneview/paneviewComponent.ts @@ -24,7 +24,7 @@ import { sequentialNumberGenerator } from '../math'; import { PaneTransfer } from '../dnd/dataTransfer'; import { Resizable } from '../resizable'; import { Parameters } from '../panel/types'; -import { Classnames, toggleClass } from '../dom'; +import { Classnames } from '../dom'; const nextLayoutId = sequentialNumberGenerator(); @@ -133,8 +133,8 @@ export interface IPaneviewComponent extends IDisposable { export class PaneviewComponent extends Resizable implements IPaneviewComponent { private readonly _id = nextLayoutId.next(); private _options: PaneviewComponentOptions; - private _disposable = new MutableDisposable(); - private _viewDisposables = new Map(); + private readonly _disposable = new MutableDisposable(); + private readonly _viewDisposables = new Map(); private _paneview!: Paneview; private readonly _onDidLayoutfromJSON = new Emitter(); diff --git a/packages/dockview-core/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts index 9a4df9e13..38b4586f6 100644 --- a/packages/dockview-core/src/paneview/paneviewPanel.ts +++ b/packages/dockview-core/src/paneview/paneviewPanel.ts @@ -67,9 +67,8 @@ export abstract class PaneviewPanel extends BasePanelView implements IPaneview, IPaneviewPanel { - private _onDidChangeExpansionState: Emitter = new Emitter( - { replay: true } - ); + private readonly _onDidChangeExpansionState: Emitter = + new Emitter({ replay: true }); onDidChangeExpansionState = this._onDidChangeExpansionState.event; private readonly _onDidChange = new Emitter<{ size?: number; @@ -78,7 +77,7 @@ export abstract class PaneviewPanel readonly onDidChange: Event<{ size?: number; orthogonalSize?: number }> = this._onDidChange.event; - private headerSize = 22; + private readonly headerSize = 22; private _orthogonalSize = 0; private _size = 0; private _minimumBodySize = 100; diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index e19456bc7..2d774c6ad 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -7,7 +7,6 @@ import { removeClasses, addClasses, toggleClass, - getElementsByTagName, disableIframePointEvents, } from '../dom'; import { Event, Emitter } from '../events'; @@ -98,17 +97,17 @@ export interface ISplitViewDescriptor { } export class Splitview { - private element: HTMLElement; - private viewContainer: HTMLElement; - private sashContainer: HTMLElement; - private viewItems: ViewItem[] = []; + private readonly element: HTMLElement; + private readonly viewContainer: HTMLElement; + private readonly sashContainer: HTMLElement; + private readonly viewItems: ViewItem[] = []; private sashes: ISashItem[] = []; private _orientation: Orientation; private _size = 0; private _orthogonalSize = 0; private _contentSize = 0; private _proportions: (number | undefined)[] | undefined = undefined; - private proportionalLayout: boolean; + private readonly proportionalLayout: boolean; private _startSnappingEnabled = true; private _endSnappingEnabled = true; private _disabled = false; @@ -989,7 +988,11 @@ export class Splitview { } private updateSash(sash: ISashItem, state: SashState): void { - toggleClass(sash.container, 'dv-disabled', state === SashState.DISABLED); + toggleClass( + sash.container, + 'dv-disabled', + state === SashState.DISABLED + ); toggleClass(sash.container, 'dv-enabled', state === SashState.ENABLED); toggleClass(sash.container, 'dv-maximum', state === SashState.MAXIMUM); toggleClass(sash.container, 'dv-minimum', state === SashState.MINIMUM); diff --git a/packages/dockview-core/src/splitview/splitviewComponent.ts b/packages/dockview-core/src/splitview/splitviewComponent.ts index aa666fbfe..ab8bb6cf5 100644 --- a/packages/dockview-core/src/splitview/splitviewComponent.ts +++ b/packages/dockview-core/src/splitview/splitviewComponent.ts @@ -17,7 +17,7 @@ import { Emitter, Event } from '../events'; import { SplitviewPanel, ISplitviewPanel } from './splitviewPanel'; import { createComponent } from '../panel/componentFactory'; import { Resizable } from '../resizable'; -import { Classnames, toggleClass } from '../dom'; +import { Classnames } from '../dom'; export interface SerializedSplitviewPanelData { id: string; @@ -82,10 +82,10 @@ export class SplitviewComponent extends Resizable implements ISplitviewComponent { - private _splitviewChangeDisposable = new MutableDisposable(); + private readonly _splitviewChangeDisposable = new MutableDisposable(); private _splitview!: Splitview; private _activePanel: SplitviewPanel | undefined; - private _panels = new Map(); + private readonly _panels = new Map(); private _options: SplitviewComponentOptions; private readonly _onDidLayoutfromJSON = new Emitter(); diff --git a/packages/dockview-core/src/splitview/viewItem.ts b/packages/dockview-core/src/splitview/viewItem.ts index f5078f4ff..df2c6f336 100644 --- a/packages/dockview-core/src/splitview/viewItem.ts +++ b/packages/dockview-core/src/splitview/viewItem.ts @@ -51,7 +51,7 @@ export class ViewItem { public container: HTMLElement, public view: IView, size: number | { cachedVisibleSize: number }, - private disposable: IDisposable + private readonly disposable: IDisposable ) { if (typeof size === 'number') { this._size = size; diff --git a/packages/dockview/src/dockview/headerActionsRenderer.ts b/packages/dockview/src/dockview/headerActionsRenderer.ts index da4a4e898..c856b1bbc 100644 --- a/packages/dockview/src/dockview/headerActionsRenderer.ts +++ b/packages/dockview/src/dockview/headerActionsRenderer.ts @@ -12,8 +12,8 @@ import { } from 'dockview-core'; export class ReactHeaderActionsRendererPart implements IHeaderActionsRenderer { - private mutableDisposable = new DockviewMutableDisposable(); - private _element: HTMLElement; + private readonly mutableDisposable = new DockviewMutableDisposable(); + private readonly _element: HTMLElement; private _part?: ReactPart; get element(): HTMLElement { diff --git a/packages/dockview/src/dockview/reactContentPart.ts b/packages/dockview/src/dockview/reactContentPart.ts index 84991d844..46d8b3bb4 100644 --- a/packages/dockview/src/dockview/reactContentPart.ts +++ b/packages/dockview/src/dockview/reactContentPart.ts @@ -10,7 +10,7 @@ import { } from 'dockview-core'; export class ReactPanelContentPart implements IContentRenderer { - private _element: HTMLElement; + private readonly _element: HTMLElement; private part?: ReactPart; private readonly _onDidFocus = new DockviewEmitter(); diff --git a/packages/dockview/src/dockview/reactHeaderPart.ts b/packages/dockview/src/dockview/reactHeaderPart.ts index f4a3e078f..772a4a814 100644 --- a/packages/dockview/src/dockview/reactHeaderPart.ts +++ b/packages/dockview/src/dockview/reactHeaderPart.ts @@ -8,7 +8,7 @@ import { } from 'dockview-core'; export class ReactPanelHeaderPart implements ITabRenderer { - private _element: HTMLElement; + private readonly _element: HTMLElement; private part?: ReactPart; get element(): HTMLElement { diff --git a/packages/dockview/src/dockview/reactWatermarkPart.ts b/packages/dockview/src/dockview/reactWatermarkPart.ts index 731ecd646..f4b95c02e 100644 --- a/packages/dockview/src/dockview/reactWatermarkPart.ts +++ b/packages/dockview/src/dockview/reactWatermarkPart.ts @@ -2,7 +2,6 @@ import React from 'react'; import { ReactPart, ReactPortalStore } from '../react'; import { PanelUpdateEvent, - DockviewGroupPanel, GroupPanelPartInitParameters, IWatermarkRenderer, WatermarkRendererInitParameters, @@ -10,9 +9,9 @@ import { } from 'dockview-core'; export class ReactWatermarkPart implements IWatermarkRenderer { - private _element: HTMLElement; + private readonly _element: HTMLElement; private part?: ReactPart; - private parameters: GroupPanelPartInitParameters | undefined; + private readonly parameters: GroupPanelPartInitParameters | undefined; get element(): HTMLElement { return this._element; diff --git a/packages/dockview/src/paneview/view.tsx b/packages/dockview/src/paneview/view.ts similarity index 96% rename from packages/dockview/src/paneview/view.tsx rename to packages/dockview/src/paneview/view.ts index 99c4d08b8..3d3a5d8f6 100644 --- a/packages/dockview/src/paneview/view.tsx +++ b/packages/dockview/src/paneview/view.ts @@ -8,7 +8,7 @@ import { ReactPart, ReactPortalStore } from '../react'; import { IPaneviewPanelProps } from './paneview'; export class PanePanelSection implements IPaneBodyPart { - private _element: HTMLElement; + private readonly _element: HTMLElement; private part?: ReactPart; get element() { From 40c1a26eadd098d2bce2a4bdc9d3dda134006c00 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Sun, 27 Oct 2024 19:54:43 +0000 Subject: [PATCH 2/2] chore: fix --- packages/dockview-core/src/theme.scss | 33 +++++++++++++++------------ packages/dockview/src/react.ts | 8 +++---- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index e121f583a..b0b6e8e61 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -293,20 +293,7 @@ } .dv-horizontal > .dv-sash-container > .dv-sash { - &:not(.disabled) { - &::after { - content: ''; - height: 40px; - width: 4px; - border-radius: 2px; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: var(--dv-separator-handle-background-color); - position: absolute; - } - - &:hover { + &:not(.disabled) { &::after { content: ''; height: 40px; @@ -321,9 +308,25 @@ &:hover { &::after { + content: ''; + height: 40px; + width: 4px; + border-radius: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); background-color: var( - --dv-separator-handle-hover-background-color + --dv-separator-handle-background-color ); + position: absolute; + } + + &:hover { + &::after { + background-color: var( + --dv-separator-handle-hover-background-color + ); + } } } } diff --git a/packages/dockview/src/react.ts b/packages/dockview/src/react.ts index 85e82dbd0..dedde9504 100644 --- a/packages/dockview/src/react.ts +++ b/packages/dockview/src/react.ts @@ -3,12 +3,12 @@ import ReactDOM from 'react-dom'; import { DockviewDisposable, IFrameworkPart, - IDockviewDisposable, + DockviewIDisposable, Parameters, } from 'dockview-core'; export interface ReactPortalStore { - addPortal: (portal: React.ReactPortal) => IDockviewDisposable; + addPortal: (portal: React.ReactPortal) => DockviewIDisposable; } interface IPanelWrapperProps { @@ -75,7 +75,7 @@ export class ReactPart

private componentInstance?: IPanelWrapperRef; private ref?: { portal: React.ReactPortal; - disposable: IDockviewDisposable; + disposable: DockviewIDisposable; }; private disposed = false; @@ -163,7 +163,7 @@ export class ReactPart

type PortalLifecycleHook = () => [ React.ReactPortal[], - (portal: React.ReactPortal) => IDockviewDisposable + (portal: React.ReactPortal) => DockviewIDisposable ]; /**