rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-09-02 23:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: clean dnd logic

Browse Source
This commit is contained in:
mathuo 2023-02-12 21:11:51 +07:00
parent c99a385a1d
commit fa5cf06431
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
3 changed files with 20 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dockview/src/dnd/dnd.ts
View File

@ -10,7 +10,7 @@ export interface IDragAndDropObserverCallbacks {
} }
export class DragAndDropObserver extends CompositeDisposable { export class DragAndDropObserver extends CompositeDisposable {
private target: any; private target: EventTarget | null = null;
constructor( constructor(
private element: HTMLElement, private element: HTMLElement,

16
packages/dockview/src/dnd/droptarget.scss
View File

@ -19,22 +19,6 @@
will-change: transform; will-change: transform;
pointer-events: none; pointer-events: none;
&.left {
transform: translateX(-35%) scaleX(0.3)
}
&.right {
transform: translateX(25%) scaleX(0.5)
}
&.top {
transform: translateY(-25%) scaleY(0.5);
}
&.bottom {
transform: translateY(25%) scaleY(0.5);
}
&.small-top { &.small-top {
border-top: 1px solid var(--dv-drag-over-border-color); border-top: 1px solid var(--dv-drag-over-border-color);
} }

33
packages/dockview/src/dnd/droptarget.ts
View File

@ -82,6 +82,11 @@ export class Droptarget extends CompositeDisposable {
) { ) {
super(); super();
// use a set to take advantage of #<set>.has
const acceptedTargetZonesSet = new Set(
this.options.acceptedTargetZones
);
this.addDisposables( this.addDisposables(
this._onDrop, this._onDrop,
new DragAndDropObserver(this.element, { new DragAndDropObserver(this.element, {
@ -101,7 +106,7 @@ export class Droptarget extends CompositeDisposable {
const y = e.clientY - rect.top; const y = e.clientY - rect.top;
const quadrant = this.calculateQuadrant( const quadrant = this.calculateQuadrant(
this.options.acceptedTargetZones, acceptedTargetZonesSet,
x, x,
y, y,
width, width,
@ -258,7 +263,7 @@ export class Droptarget extends CompositeDisposable {
} }
private calculateQuadrant( private calculateQuadrant(
overlayType: DropTargetDirections[], overlayType: Set<DropTargetDirections>,
x: number, x: number,
y: number, y: number,
width: number, width: number,
@ -306,7 +311,7 @@ export class Droptarget extends CompositeDisposable {
} }
function calculateQuadrant_Percentage( function calculateQuadrant_Percentage(
overlayType: DropTargetDirections[], overlayType: Set<DropTargetDirections>,
x: number, x: number,
y: number, y: number,
width: number, width: number,
@ -316,20 +321,20 @@ function calculateQuadrant_Percentage(
const xp = (100 * x) / width; const xp = (100 * x) / width;
const yp = (100 * y) / height; const yp = (100 * y) / height;
if (overlayType.includes('left') && xp < threshold) { if (overlayType.has('left') && xp < threshold) {
return 'left'; return 'left';
} }
if (overlayType.includes('right') && xp > 100 - threshold) { if (overlayType.has('right') && xp > 100 - threshold) {
return 'right'; return 'right';
} }
if (overlayType.includes('top') && yp < threshold) { if (overlayType.has('top') && yp < threshold) {
return 'top'; return 'top';
} }
if (overlayType.includes('bottom') && yp > 100 - threshold) { if (overlayType.has('bottom') && yp > 100 - threshold) {
return 'bottom'; return 'bottom';
} }
if (!overlayType.includes('center')) { if (!overlayType.has('center')) {
return undefined; return undefined;
} }
@ -337,27 +342,27 @@ function calculateQuadrant_Percentage(
} }
function calculateQuadrant_Pixels( function calculateQuadrant_Pixels(
overlayType: DropTargetDirections[], overlayType: Set<DropTargetDirections>,
x: number, x: number,
y: number, y: number,
width: number, width: number,
height: number, height: number,
threshold: number threshold: number
): Quadrant | null | undefined { ): Quadrant | null | undefined {
if (overlayType.includes('left') && x < threshold) { if (overlayType.has('left') && x < threshold) {
return 'left'; return 'left';
} }
if (overlayType.includes('right') && x > width - threshold) { if (overlayType.has('right') && x > width - threshold) {
return 'right'; return 'right';
} }
if (overlayType.includes('top') && y < threshold) { if (overlayType.has('top') && y < threshold) {
return 'top'; return 'top';
} }
if (overlayType.includes('right') && y > height - threshold) { if (overlayType.has('right') && y > height - threshold) {
return 'bottom'; return 'bottom';
} }
if (!overlayType.includes('center')) { if (!overlayType.has('center')) {
return undefined; return undefined;
} }