mirror of
https://github.com/mathuo/dockview
synced 2025-02-02 14:35:46 +00:00
chore: reduce function complexities
This commit is contained in:
parent
39eb6a3e25
commit
16ea522ee9
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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,6 +84,12 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
this.handler,
|
||||
this.target,
|
||||
this.target.onDrop((event) => {
|
||||
this.onDrop(event);
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
private onDrop(event: DroptargetEvent) {
|
||||
const data = getPaneData();
|
||||
|
||||
if (!data) {
|
||||
@ -148,7 +137,5 @@ export abstract class DraggablePaneviewPanel extends PaneviewPanel {
|
||||
}
|
||||
|
||||
containerApi.movePanel(fromIndex, toIndex);
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user