Merge pull request #740 from mathuo/739-sonar-code-cleanup

chore: code cleanup

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<TitleEvent>();
     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,

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,

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 readonly element: HTMLElement,
-        private callbacks: IDragAndDropObserverCallbacks
+        private readonly callbacks: IDragAndDropObserverCallbacks
     ) {
         super();
 

packages/dockview-core/src/dockview/components/panel/content.ts

@@ -3,12 +3,7 @@ import {
     IDisposable,
     MutableDisposable,
 } from '../../../lifecycle';
-import {
+import { Emitter, Event } from '../../../events';
-    addDisposableListener,
-    addDisposableWindowListener,
-    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<void>();
     readonly onDidFocus: Event<void> = this._onDidFocus.event;

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 readonly _element: HTMLElement;
-    private _content: HTMLElement;
+    private readonly _content: HTMLElement;
-    private action: HTMLElement;
+    private readonly action: HTMLElement;
     private _title: string | undefined;
 
     get element(): HTMLElement {

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;
 

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

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<string, IDisposable>();
 
     private readonly _onMove = new Emitter<GroupMoveEvent>();
@@ -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

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 readonly _minimumWidth: number | undefined;
-    private _minimumHeight: number | undefined;
+    private readonly _minimumHeight: number | undefined;
-    private _maximumWidth: number | undefined;
+    private readonly _maximumWidth: number | undefined;
-    private _maximumHeight: number | undefined;
+    private readonly _maximumHeight: number | undefined;
 
     get params(): Parameters | undefined {
         return this._params;

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

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<OverflowEvent>();
+    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<void>();
     public readonly onDidBlur: DockviewEvent<void> = this._onDidBlur.event;
 
-    private _refreshStateHandler: () => void;
+    private readonly _refreshStateHandler: () => void;
 
     constructor(element: HTMLElement | Window) {
         super();

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

packages/dockview-core/src/gridview/basePanelView.ts

@@ -32,7 +32,7 @@ export abstract class BasePanelView<T extends PanelApiImpl>
 {
     private _height = 0;
     private _width = 0;
-    private _element: HTMLElement;
+    private readonly _element: HTMLElement;
     protected part?: IFrameworkPart;
     protected _params?: PanelInitParameters;
 

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;

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;

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 { DefaultTab } from './dockview/components/tab/defaultTab';
-export * from './dockview/deserializer';
+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';
 

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<void>();
     readonly onDidChange: Event<void> = this._onDidChange.event;
@@ -53,8 +53,8 @@ export class Overlay extends CompositeDisposable {
     private readonly _onDidChangeEnd = new Emitter<void>();
     readonly onDidChangeEnd: Event<void> = this._onDidChangeEnd.event;
 
-    private static MINIMUM_HEIGHT = 20;
+    private static readonly MINIMUM_HEIGHT = 20;
-    private static MINIMUM_WIDTH = 20;
+    private static readonly MINIMUM_WIDTH = 20;
 
     private verticalAlignment: 'top' | 'bottom' | undefined;
     private horiziontalAlignment: 'left' | 'right' | undefined;

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;

packages/dockview-core/src/paneview/paneview.ts

@@ -15,10 +15,10 @@ interface PaneItem {
 }
 
 export class Paneview extends CompositeDisposable implements IDisposable {
-    private element: HTMLElement;
+    private readonly element: HTMLElement;
-    private splitview: Splitview;
+    private readonly splitview: Splitview;
     private paneItems: PaneItem[] = [];
-    private _orientation: Orientation;
+    private readonly _orientation: Orientation;
     private animationTimer: any;
     private skipAnimation = false;
 

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 readonly _disposable = new MutableDisposable();
-    private _viewDisposables = new Map<string, IDisposable>();
+    private readonly _viewDisposables = new Map<string, IDisposable>();
     private _paneview!: Paneview;
 
     private readonly _onDidLayoutfromJSON = new Emitter<void>();

packages/dockview-core/src/paneview/paneviewPanel.ts

@@ -67,9 +67,8 @@ export abstract class PaneviewPanel
     extends BasePanelView<PaneviewPanelApiImpl>
     implements IPaneview, IPaneviewPanel
 {
-    private _onDidChangeExpansionState: Emitter<boolean> = new Emitter<boolean>(
+    private readonly _onDidChangeExpansionState: Emitter<boolean> =
-        { replay: true }
+        new Emitter<boolean>({ 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;

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 readonly element: HTMLElement;
-    private viewContainer: HTMLElement;
+    private readonly viewContainer: HTMLElement;
-    private sashContainer: HTMLElement;
+    private readonly sashContainer: HTMLElement;
-    private viewItems: ViewItem[] = [];
+    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);

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<string, IDisposable>();
+    private readonly _panels = new Map<string, IDisposable>();
     private _options: SplitviewComponentOptions;
 
     private readonly _onDidLayoutfromJSON = new Emitter<void>();

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;

packages/dockview-core/src/theme.scss

@@ -293,20 +293,7 @@
     }
 
     .dv-horizontal > .dv-sash-container > .dv-sash {
-      &:not(.disabled) {
+        &: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 {
             &::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
+                        );
+                    }
                 }
             }
         }

packages/dockview/src/dockview/headerActionsRenderer.ts

@@ -12,8 +12,8 @@ import {
 } from 'dockview-core';
 
 export class ReactHeaderActionsRendererPart implements IHeaderActionsRenderer {
-    private mutableDisposable = new DockviewMutableDisposable();
+    private readonly mutableDisposable = new DockviewMutableDisposable();
-    private _element: HTMLElement;
+    private readonly _element: HTMLElement;
     private _part?: ReactPart<IDockviewHeaderActionsProps>;
 
     get element(): HTMLElement {

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<IDockviewPanelProps>;
 
     private readonly _onDidFocus = new DockviewEmitter<void>();

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<IGroupPanelBaseProps>;
 
     get element(): HTMLElement {

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<IWatermarkPanelProps>;
-    private parameters: GroupPanelPartInitParameters | undefined;
+    private readonly parameters: GroupPanelPartInitParameters | undefined;
 
     get element(): HTMLElement {
         return this._element;

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<IPaneviewPanelProps>;
 
     get element() {

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<P extends object, C extends object = {}>
     private componentInstance?: IPanelWrapperRef;
     private ref?: {
         portal: React.ReactPortal;
-        disposable: IDockviewDisposable;
+        disposable: DockviewIDisposable;
     };
     private disposed = false;
 
@@ -163,7 +163,7 @@ export class ReactPart<P extends object, C extends object = {}>
 
 type PortalLifecycleHook = () => [
     React.ReactPortal[],
-    (portal: React.ReactPortal) => IDockviewDisposable
+    (portal: React.ReactPortal) => DockviewIDisposable
 ];
 
 /**