dockview 1.5.1 → 1.6.0

package/dist/esm/dnd/dataTransfer.js

@@ -1,69 +1,69 @@
-class TransferObject {
-    constructor() {
-        //
-    }
-}
-export class PanelTransfer extends TransferObject {
-    constructor(viewId, groupId, panelId) {
-        super();
-        this.viewId = viewId;
-        this.groupId = groupId;
-        this.panelId = panelId;
-    }
-}
-export class PaneTransfer extends TransferObject {
-    constructor(viewId, paneId) {
-        super();
-        this.viewId = viewId;
-        this.paneId = paneId;
-    }
-}
-/**
- * A singleton to store transfer data during drag & drop operations that are only valid within the application.
- */
-export class LocalSelectionTransfer {
-    constructor() {
-        // protect against external instantiation
-    }
-    static getInstance() {
-        return LocalSelectionTransfer.INSTANCE;
-    }
-    hasData(proto) {
-        return proto && proto === this.proto;
-    }
-    clearData(proto) {
-        if (this.hasData(proto)) {
-            this.proto = undefined;
-            this.data = undefined;
-        }
-    }
-    getData(proto) {
-        if (this.hasData(proto)) {
-            return this.data;
-        }
-        return undefined;
-    }
-    setData(data, proto) {
-        if (proto) {
-            this.data = data;
-            this.proto = proto;
-        }
-    }
-}
-LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
-export function getPanelData() {
-    const panelTransfer = LocalSelectionTransfer.getInstance();
-    const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
-    if (!isPanelEvent) {
-        return undefined;
-    }
-    return panelTransfer.getData(PanelTransfer.prototype)[0];
-}
-export function getPaneData() {
-    const paneTransfer = LocalSelectionTransfer.getInstance();
-    const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
-    if (!isPanelEvent) {
-        return undefined;
-    }
-    return paneTransfer.getData(PaneTransfer.prototype)[0];
-}
+class TransferObject {
+    constructor() {
+        //
+    }
+}
+export class PanelTransfer extends TransferObject {
+    constructor(viewId, groupId, panelId) {
+        super();
+        this.viewId = viewId;
+        this.groupId = groupId;
+        this.panelId = panelId;
+    }
+}
+export class PaneTransfer extends TransferObject {
+    constructor(viewId, paneId) {
+        super();
+        this.viewId = viewId;
+        this.paneId = paneId;
+    }
+}
+/**
+ * A singleton to store transfer data during drag & drop operations that are only valid within the application.
+ */
+export class LocalSelectionTransfer {
+    constructor() {
+        // protect against external instantiation
+    }
+    static getInstance() {
+        return LocalSelectionTransfer.INSTANCE;
+    }
+    hasData(proto) {
+        return proto && proto === this.proto;
+    }
+    clearData(proto) {
+        if (this.hasData(proto)) {
+            this.proto = undefined;
+            this.data = undefined;
+        }
+    }
+    getData(proto) {
+        if (this.hasData(proto)) {
+            return this.data;
+        }
+        return undefined;
+    }
+    setData(data, proto) {
+        if (proto) {
+            this.data = data;
+            this.proto = proto;
+        }
+    }
+}
+LocalSelectionTransfer.INSTANCE = new LocalSelectionTransfer();
+export function getPanelData() {
+    const panelTransfer = LocalSelectionTransfer.getInstance();
+    const isPanelEvent = panelTransfer.hasData(PanelTransfer.prototype);
+    if (!isPanelEvent) {
+        return undefined;
+    }
+    return panelTransfer.getData(PanelTransfer.prototype)[0];
+}
+export function getPaneData() {
+    const paneTransfer = LocalSelectionTransfer.getInstance();
+    const isPanelEvent = paneTransfer.hasData(PaneTransfer.prototype);
+    if (!isPanelEvent) {
+        return undefined;
+    }
+    return paneTransfer.getData(PaneTransfer.prototype)[0];
+}

package/dist/esm/dnd/dnd.d.ts

@@ -1,27 +1,27 @@
-import { CompositeDisposable } from '../lifecycle';
-export interface IDragAndDropObserverCallbacks {
-    onDragEnter: (e: DragEvent) => void;
-    onDragLeave: (e: DragEvent) => void;
-    onDrop: (e: DragEvent) => void;
-    onDragEnd: (e: DragEvent) => void;
-    onDragOver?: (e: DragEvent) => void;
-}
-export declare class DragAndDropObserver extends CompositeDisposable {
-    private element;
-    private callbacks;
-    private counter;
-    constructor(element: HTMLElement, callbacks: IDragAndDropObserverCallbacks);
-    private registerListeners;
-}
-export interface IDraggedCompositeData {
-    eventData: DragEvent;
-    dragAndDropData: any;
-}
-export interface ICompositeDragAndDropObserverCallbacks {
-    onDragEnter?: (e: IDraggedCompositeData) => void;
-    onDragLeave?: (e: IDraggedCompositeData) => void;
-    onDrop?: (e: IDraggedCompositeData) => void;
-    onDragOver?: (e: IDraggedCompositeData) => void;
-    onDragStart?: (e: IDraggedCompositeData) => void;
-    onDragEnd?: (e: IDraggedCompositeData) => void;
-}
+import { CompositeDisposable } from '../lifecycle';
+export interface IDragAndDropObserverCallbacks {
+    onDragEnter: (e: DragEvent) => void;
+    onDragLeave: (e: DragEvent) => void;
+    onDrop: (e: DragEvent) => void;
+    onDragEnd: (e: DragEvent) => void;
+    onDragOver?: (e: DragEvent) => void;
+}
+export declare class DragAndDropObserver extends CompositeDisposable {
+    private element;
+    private callbacks;
+    private target;
+    constructor(element: HTMLElement, callbacks: IDragAndDropObserverCallbacks);
+    private registerListeners;
+}
+export interface IDraggedCompositeData {
+    eventData: DragEvent;
+    dragAndDropData: any;
+}
+export interface ICompositeDragAndDropObserverCallbacks {
+    onDragEnter?: (e: IDraggedCompositeData) => void;
+    onDragLeave?: (e: IDraggedCompositeData) => void;
+    onDrop?: (e: IDraggedCompositeData) => void;
+    onDragOver?: (e: IDraggedCompositeData) => void;
+    onDragStart?: (e: IDraggedCompositeData) => void;
+    onDragEnd?: (e: IDraggedCompositeData) => void;
+}

package/dist/esm/dnd/dnd.js

@@ -1,41 +1,36 @@
-import { addDisposableListener } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-export class DragAndDropObserver extends CompositeDisposable {
-    constructor(element, callbacks) {
-        super();
-        this.element = element;
-        this.callbacks = callbacks;
-        // A helper to fix issues with repeated DRAG_ENTER / DRAG_LEAVE
-        // calls see https://github.com/microsoft/vscode/issues/14470
-        // when the element has child elements where the events are fired
-        // repeadedly.
-        this.counter = 0;
-        this.registerListeners();
-    }
-    registerListeners() {
-        this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
-            this.counter++;
-            this.callbacks.onDragEnter(e);
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
-            e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
-            if (this.callbacks.onDragOver) {
-                this.callbacks.onDragOver(e);
-            }
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
-            this.counter--;
-            if (this.counter === 0) {
-                this.callbacks.onDragLeave(e);
-            }
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
-            this.counter = 0;
-            this.callbacks.onDragEnd(e);
-        }));
-        this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
-            this.counter = 0;
-            this.callbacks.onDrop(e);
-        }));
-    }
-}
+import { addDisposableListener } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+export class DragAndDropObserver extends CompositeDisposable {
+    constructor(element, callbacks) {
+        super();
+        this.element = element;
+        this.callbacks = callbacks;
+        this.target = null;
+        this.registerListeners();
+    }
+    registerListeners() {
+        this.addDisposables(addDisposableListener(this.element, 'dragenter', (e) => {
+            this.target = e.target;
+            this.callbacks.onDragEnter(e);
+        }, true));
+        this.addDisposables(addDisposableListener(this.element, 'dragover', (e) => {
+            e.preventDefault(); // needed so that the drop event fires (https://stackoverflow.com/questions/21339924/drop-event-not-firing-in-chrome)
+            if (this.callbacks.onDragOver) {
+                this.callbacks.onDragOver(e);
+            }
+        }, true));
+        this.addDisposables(addDisposableListener(this.element, 'dragleave', (e) => {
+            if (this.target === e.target) {
+                this.target = null;
+                this.callbacks.onDragLeave(e);
+            }
+        }));
+        this.addDisposables(addDisposableListener(this.element, 'dragend', (e) => {
+            this.target = null;
+            this.callbacks.onDragEnd(e);
+        }));
+        this.addDisposables(addDisposableListener(this.element, 'drop', (e) => {
+            this.callbacks.onDrop(e);
+        }));
+    }
+}

package/dist/esm/dnd/droptarget.d.ts

@@ -1,37 +1,42 @@
-import { Event } from '../events';
-import { CompositeDisposable } from '../lifecycle';
-export declare enum Position {
-    Top = "Top",
-    Left = "Left",
-    Bottom = "Bottom",
-    Right = "Right",
-    Center = "Center"
-}
-export declare type Quadrant = 'top' | 'bottom' | 'left' | 'right';
-export interface DroptargetEvent {
-    position: Position;
-    nativeEvent: DragEvent;
-}
-export declare type DropTargetDirections = 'vertical' | 'horizontal' | 'all' | 'none';
-export declare type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Quadrant | null) => boolean);
-export declare class Droptarget extends CompositeDisposable {
-    private readonly element;
-    private readonly options;
-    private target;
-    private overlay;
-    private _state;
-    private readonly _onDrop;
-    readonly onDrop: Event<DroptargetEvent>;
-    get state(): Position | undefined;
-    set validOverlays(value: DropTargetDirections);
-    set canDisplayOverlay(value: CanDisplayOverlay);
-    constructor(element: HTMLElement, options: {
-        canDisplayOverlay: CanDisplayOverlay;
-        validOverlays: DropTargetDirections;
-    });
-    dispose(): void;
-    private toggleClasses;
-    private setState;
-    private calculateQuadrant;
-    private removeDropTarget;
-}
+import { Event } from '../events';
+import { CompositeDisposable } from '../lifecycle';
+import { Direction } from '../gridview/baseComponentGridview';
+export declare function directionToPosition(direction: Direction): Position;
+export declare function positionToDirection(position: Position): Direction;
+export interface DroptargetEvent {
+    readonly position: Position;
+    readonly nativeEvent: DragEvent;
+}
+export type Position = 'top' | 'bottom' | 'left' | 'right' | 'center';
+export type CanDisplayOverlay = boolean | ((dragEvent: DragEvent, state: Position) => boolean);
+export declare class Droptarget extends CompositeDisposable {
+    private readonly element;
+    private readonly options;
+    private target;
+    private overlay;
+    private _state;
+    private readonly _onDrop;
+    readonly onDrop: Event<DroptargetEvent>;
+    get state(): Position | undefined;
+    constructor(element: HTMLElement, options: {
+        canDisplayOverlay: CanDisplayOverlay;
+        acceptedTargetZones: Position[];
+        overlayModel?: {
+            size?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+            activationSize?: {
+                value: number;
+                type: 'pixels' | 'percentage';
+            };
+        };
+    });
+    dispose(): void;
+    private toggleClasses;
+    private setState;
+    private calculateQuadrant;
+    private removeDropTarget;
+}
+export declare function calculateQuadrantAsPercentage(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;
+export declare function calculateQuadrantAsPixels(overlayType: Set<Position>, x: number, y: number, width: number, height: number, threshold: number): Position | null;