chore: reduce function complexities

packages/dockview/src/dnd/droptarget.ts

@@ -11,6 +11,8 @@ export enum Position {
     Center = 'Center',
 }
 
+type Quadrant = 'top' | 'bottom' | 'left' | 'right';
+
 export interface DroptargetEvent {
     position: Position;
     nativeEvent: DragEvent;
@@ -100,60 +102,18 @@ export class Droptarget extends CompositeDisposable {
                     const xp = (100 * x) / width;
                     const yp = (100 * y) / height;
 
-                    let isRight = false;
+                    const quadrant = this.calculateQuadrant(
-                    let isLeft = false;
+                        this.options.validOverlays,
-                    let isTop = false;
+                        xp,
-                    let isBottom = false;
+                        yp
-
+                    );
-                    switch (this.options.validOverlays) {
-                        case 'all':
-                            isRight = xp > 80;
-                            isLeft = xp < 20;
-                            isTop = !isRight && !isLeft && yp < 20;
-                            isBottom = !isRight && !isLeft && yp > 80;
-                            break;
-                        case 'vertical':
-                            isTop = yp < 50;
-                            isBottom = yp >= 50;
-                            break;
-                        case 'horizontal':
-                            isLeft = xp < 50;
-                            isRight = xp >= 50;
-                            break;
-                    }
 
                     const isSmallX = width < 100;
                     const isSmallY = height < 100;
 
-                    toggleClass(this.overlay, 'right', !isSmallX && isRight);
+                    this.toggleClasses(quadrant, isSmallX, isSmallY);
-                    toggleClass(this.overlay, 'left', !isSmallX && isLeft);
-                    toggleClass(this.overlay, 'top', !isSmallY && isTop);
-                    toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
 
-                    toggleClass(
+                    this.setState(quadrant);
-                        this.overlay,
-                        'small-right',
-                        isSmallX && isRight
-                    );
-                    toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
-                    toggleClass(this.overlay, 'small-top', isSmallY && isTop);
-                    toggleClass(
-                        this.overlay,
-                        'small-bottom',
-                        isSmallY && isBottom
-                    );
-
-                    if (isRight) {
-                        this._state = Position.Right;
-                    } else if (isLeft) {
-                        this._state = Position.Left;
-                    } else if (isTop) {
-                        this._state = Position.Top;
-                    } else if (isBottom) {
-                        this._state = Position.Bottom;
-                    } else {
-                        this._state = Position.Center;
-                    }
                 },
                 onDragLeave: (e) => {
                     this.removeDropTarget();
@@ -181,6 +141,87 @@ export class Droptarget extends CompositeDisposable {
         this.removeDropTarget();
     }
 
+    private toggleClasses(
+        quadrant: Quadrant | null,
+        isSmallX: boolean,
+        isSmallY: boolean
+    ) {
+        if (!this.overlay) {
+            return;
+        }
+
+        const isLeft = quadrant === 'left';
+        const isRight = quadrant === 'right';
+        const isTop = quadrant === 'top';
+        const isBottom = quadrant === 'bottom';
+
+        toggleClass(this.overlay, 'right', !isSmallX && isRight);
+        toggleClass(this.overlay, 'left', !isSmallX && isLeft);
+        toggleClass(this.overlay, 'top', !isSmallY && isTop);
+        toggleClass(this.overlay, 'bottom', !isSmallY && isBottom);
+
+        toggleClass(this.overlay, 'small-right', isSmallX && isRight);
+        toggleClass(this.overlay, 'small-left', isSmallX && isLeft);
+        toggleClass(this.overlay, 'small-top', isSmallY && isTop);
+        toggleClass(this.overlay, 'small-bottom', isSmallY && isBottom);
+    }
+
+    private setState(quadrant: Quadrant | null) {
+        switch (quadrant) {
+            case 'top':
+                this._state = Position.Top;
+                break;
+            case 'left':
+                this._state = Position.Left;
+                break;
+            case 'bottom':
+                this._state = Position.Bottom;
+                break;
+            case 'right':
+                this._state = Position.Right;
+                break;
+            default:
+                this._state = Position.Center;
+                break;
+        }
+    }
+
+    private calculateQuadrant(
+        overlayType: DropTargetDirections,
+        xp: number,
+        yp: number
+    ): Quadrant | null {
+        switch (overlayType) {
+            case 'all':
+                if (xp < 20) {
+                    return 'left';
+                }
+                if (xp > 80) {
+                    return 'right';
+                }
+                if (yp < 20) {
+                    return 'top';
+                }
+                if (yp > 80) {
+                    return 'bottom';
+                }
+                break;
+            case 'vertical':
+                if (yp < 50) {
+                    return 'top';
+                }
+                return 'bottom';
+
+            case 'horizontal':
+                if (xp < 50) {
+                    return 'left';
+                }
+                return 'right';
+        }
+
+        return null;
+    }
+
     private removeDropTarget() {
         if (this.target) {
             this._state = undefined;

packages/dockview/src/gridview/gridview.ts

@@ -17,6 +17,19 @@ import { Node } from './types';
 import { Emitter, Event } from '../events';
 import { IDisposable, MutableDisposable } from '../lifecycle';
 
+function findLeaf(candiateNode: Node, last: boolean): LeafNode {
+    if (candiateNode instanceof LeafNode) {
+        return candiateNode;
+    }
+    if (candiateNode instanceof BranchNode) {
+        return findLeaf(
+            candiateNode.children[last ? candiateNode.children.length - 1 : 0],
+            last
+        );
+    }
+    throw new Error('invalid node');
+}
+
 function flipNode<T extends Node>(
     node: T,
     size: number,
@@ -442,21 +455,6 @@ export class Gridview implements IDisposable {
             throw new Error('invalid location');
         }
 
-        const findLeaf = (candiateNode: Node, last: boolean): LeafNode => {
-            if (candiateNode instanceof LeafNode) {
-                return candiateNode;
-            }
-            if (candiateNode instanceof BranchNode) {
-                return findLeaf(
-                    candiateNode.children[
-                        last ? candiateNode.children.length - 1 : 0
-                    ],
-                    last
-                );
-            }
-            throw new Error('invalid node');
-        };
-
         for (let i = path.length - 1; i > -1; i--) {
             const n = path[i];
             const l = location[i] || 0;

packages/dockview/src/paneview/draggablePaneviewPanel.ts

@@ -5,7 +5,7 @@ import {
     PaneTransfer,
 } from '../dnd/dataTransfer';
 import { Droptarget, DroptargetEvent, Position } from '../dnd/droptarget';
-import { Emitter, Event } from '../events';
+import { Emitter } from '../events';
 import { IDisposable } from '../lifecycle';
 import { Orientation } from '../splitview/core/splitview';
 import {
@@ -14,23 +14,6 @@ import {
     PaneviewPanel,
 } from './paneviewPanel';
 
-interface ViewContainer {
-    readonly title: string;
-    readonly icon: string;
-}
-
-interface ViewContainerModel {
-    readonly title: string;
-    readonly icon: string;
-    readonly onDidAdd: Event<void>;
-    readonly onDidRemove: Event<void>;
-}
-
-interface IViewContainerService {
-    getViewContainerById(id: string): ViewContainer;
-    getViewContainerModel(container: ViewContainer): ViewContainerModel;
-}
-
 export interface PaneviewDropEvent2 extends DroptargetEvent {
     panel: IPaneviewPanel;
     getData: () => PaneTransfer | undefined;
@@ -101,54 +84,58 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
             this.handler,
             this.target,
             this.target.onDrop((event) => {
-                const data = getPaneData();
+                this.onDrop(event);
-
-                if (!data) {
-                    this._onDidDrop.fire({
-                        ...event,
-                        panel: this,
-                        getData: () => getPaneData(),
-                    });
-                    return;
-                }
-
-                const containerApi = (this._params! as PanePanelInitParameter)
-                    .containerApi;
-                const panelId = data.paneId;
-
-                const existingPanel = containerApi.getPanel(panelId);
-                if (!existingPanel) {
-                    this._onDidDrop.fire({
-                        ...event,
-                        panel: this,
-                        getData: () => getPaneData(),
-                    });
-                    return;
-                }
-
-                const allPanels = containerApi.getPanels();
-
-                const fromIndex = allPanels.indexOf(existingPanel);
-                let toIndex = containerApi.getPanels().indexOf(this);
-
-                if (
-                    event.position === Position.Left ||
-                    event.position === Position.Top
-                ) {
-                    toIndex = Math.max(0, toIndex - 1);
-                }
-                if (
-                    event.position === Position.Right ||
-                    event.position === Position.Bottom
-                ) {
-                    if (fromIndex > toIndex) {
-                        toIndex++;
-                    }
-                    toIndex = Math.min(allPanels.length - 1, toIndex);
-                }
-
-                containerApi.movePanel(fromIndex, toIndex);
             })
         );
     }
+
+    private onDrop(event: DroptargetEvent) {
+        const data = getPaneData();
+
+        if (!data) {
+            this._onDidDrop.fire({
+                ...event,
+                panel: this,
+                getData: () => getPaneData(),
+            });
+            return;
+        }
+
+        const containerApi = (this._params! as PanePanelInitParameter)
+            .containerApi;
+        const panelId = data.paneId;
+
+        const existingPanel = containerApi.getPanel(panelId);
+        if (!existingPanel) {
+            this._onDidDrop.fire({
+                ...event,
+                panel: this,
+                getData: () => getPaneData(),
+            });
+            return;
+        }
+
+        const allPanels = containerApi.getPanels();
+
+        const fromIndex = allPanels.indexOf(existingPanel);
+        let toIndex = containerApi.getPanels().indexOf(this);
+
+        if (
+            event.position === Position.Left ||
+            event.position === Position.Top
+        ) {
+            toIndex = Math.max(0, toIndex - 1);
+        }
+        if (
+            event.position === Position.Right ||
+            event.position === Position.Bottom
+        ) {
+            if (fromIndex > toIndex) {
+                toIndex++;
+            }
+            toIndex = Math.min(allPanels.length - 1, toIndex);
+        }
+
+        containerApi.movePanel(fromIndex, toIndex);
+    }
 }