From 16ea522ee9a20cd5c13189a75620931ed08070a9 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 14 Mar 2022 22:14:01 +0000 Subject: [PATCH] chore: reduce function complexities --- packages/dockview/src/dnd/droptarget.ts | 139 ++++++++++++------ packages/dockview/src/gridview/gridview.ts | 28 ++-- .../src/paneview/draggablePaneviewPanel.ts | 117 +++++++-------- 3 files changed, 155 insertions(+), 129 deletions(-) diff --git a/packages/dockview/src/dnd/droptarget.ts b/packages/dockview/src/dnd/droptarget.ts index fc3ff4bba..68cb0b515 100644 --- a/packages/dockview/src/dnd/droptarget.ts +++ b/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; - let isLeft = false; - let isTop = false; - let isBottom = false; - - 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 quadrant = this.calculateQuadrant( + this.options.validOverlays, + xp, + yp + ); const isSmallX = width < 100; const isSmallY = height < 100; - toggleClass(this.overlay, 'right', !isSmallX && isRight); - toggleClass(this.overlay, 'left', !isSmallX && isLeft); - toggleClass(this.overlay, 'top', !isSmallY && isTop); - toggleClass(this.overlay, 'bottom', !isSmallY && isBottom); + this.toggleClasses(quadrant, isSmallX, isSmallY); - 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 - ); - - 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; - } + this.setState(quadrant); }, 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; diff --git a/packages/dockview/src/gridview/gridview.ts b/packages/dockview/src/gridview/gridview.ts index ecf341bf5..3fd7a756a 100644 --- a/packages/dockview/src/gridview/gridview.ts +++ b/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( 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; diff --git a/packages/dockview/src/paneview/draggablePaneviewPanel.ts b/packages/dockview/src/paneview/draggablePaneviewPanel.ts index 08fa853b0..ebcad0d78 100644 --- a/packages/dockview/src/paneview/draggablePaneviewPanel.ts +++ b/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; - readonly onDidRemove: Event; -} - -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(); - - 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); + this.onDrop(event); }) ); } + + 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); + } }