use HTML Drag and Drop API [WIP]

README.md

@@ -15,6 +15,20 @@ Golden Layout is a Javascript layout manager which enables you to layout compone
 * Works in modern browsers (Firefox, Chrome)
 * Reponsive design
 
+The 'd-n-d-api' branch is an experimental fork making use
+of the [HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API).
+This enables:
+
+* Drag from one window and drop to another.
+* Drag from one window and drop to desktop as new window (popout).
+* Cancel a drag (usually by typing Escape before releasing mouse).
+
+*This is experimental with an unstable API and known issues.*
+It is used in the`drag-drop` branch of [DomTerm](https://github.com/PerBothner/DomTerm/).
+
+The 'd-n-d-api' branch builds on the 'tab-renderer' branch,
+which is part of [GL pull request #759](https://github.com/golden-layout/golden-layout/pull/759).
+
 ## Installation
 The library can be installed into an application package with the npm command:\
 `npm i golden-layout`

etc/golden-layout.api.md

@@ -54,12 +54,14 @@ export class ComponentContainer extends EventEmitter {
     _config: ResolvedComponentItemConfig,
     _parent: ComponentItem,
     _layoutManager: LayoutManager,
-    _element: HTMLElement,
+    _element: HTMLElement | undefined,
     _updateItemConfigEvent: ComponentContainer.UpdateItemConfigEventHandler,
     _showEvent: ComponentContainer.ShowEventHandler,
     _hideEvent: ComponentContainer.HideEventHandler,
     _focusEvent: ComponentContainer.FocusEventHandler,
     _blurEvent: ComponentContainer.BlurEventHandler);
+    // @internal (undocumented)
+    addVirtualSizedContainerToLayoutManager(): void;
     blur(suppressEvent?: boolean): void;
     close(): void;
     // (undocumented)
@@ -72,7 +74,7 @@ export class ComponentContainer extends EventEmitter {
     destroy(): void;
     // @internal (undocumented)
     drag(): void;
-    get element(): HTMLElement;
+    get element(): HTMLElement | undefined;
     // @internal
     enterDragMode(width: number, height: number): void;
     // @internal (undocumented)
@@ -85,7 +87,7 @@ export class ComponentContainer extends EventEmitter {
     extendState(state: Record<string, unknown>): void;
     focus(suppressEvent?: boolean): void;
     // @deprecated (undocumented)
-    getElement(): HTMLElement;
+    getElement(): HTMLElement | undefined;
     // @deprecated
     getState(): JsonValue | undefined;
     // (undocumented)
@@ -96,6 +98,8 @@ export class ComponentContainer extends EventEmitter {
     get isHidden(): boolean;
     // (undocumented)
     get layoutManager(): LayoutManager;
+    // (undocumented)
+    notifyResize: ComponentContainer.NotifyResizeHandler | undefined;
     // @internal (undocumented)
     notifyVirtualRectingRequired(): void;
     // (undocumented)
@@ -107,13 +111,13 @@ export class ComponentContainer extends EventEmitter {
     setLogicalZIndex(logicalZIndex: LogicalZIndex): void;
     // @internal
     setSize(width: number, height: number): boolean;
-    // @internal
-    setSizeToNodeSize(width: number, height: number, force: boolean): void;
     // @deprecated
     setState(state: JsonValue): void;
     // @internal (undocumented)
     setTab(tab: Tab): void;
     setTitle(title: string): void;
+    // (undocumented)
+    setTitleRenderer(renderer: Tab.TitleRenderer | undefined): void;
     // @internal (undocumented)
     setVisibility(value: boolean): void;
     show(): void;
@@ -156,6 +160,8 @@ export namespace ComponentContainer {
     export type FocusEventHandler = (this: void, suppressEvent: boolean) => void;
     // @internal (undocumented)
     export type HideEventHandler = (this: void) => void;
+    // (undocumented)
+    export type NotifyResizeHandler = (this: void, container: ComponentContainer, left: number, top: number, width: number, height: number) => void;
     // @internal (undocumented)
     export type ShowEventHandler = (this: void) => void;
     // (undocumented)
@@ -226,15 +232,21 @@ export class ComponentItem extends ContentItem {
     // (undocumented)
     setTab(tab: Tab): void;
     setTitle(title: string): void;
+    // (undocumented)
+    setTitleRenderer(renderer: Tab.TitleRenderer | undefined): void;
     // @internal (undocumented)
     show(): void;
     // (undocumented)
     get tab(): Tab;
     // (undocumented)
     get title(): string;
     // (undocumented)
+    get titleRenderer(): Tab.TitleRenderer | undefined;
+    // (undocumented)
     toConfig(): ResolvedComponentItemConfig;
     // @internal (undocumented)
+    updateNodeSize(): void;
+    // @internal (undocumented)
     updateSize(): void;
 }
 
@@ -304,6 +316,10 @@ export abstract class ContentItem extends EventEmitter {
     // (undocumented)
     get id(): string;
     set id(value: string);
+    // (undocumented)
+    ignoring: boolean;
+    // (undocumented)
+    ignoringChild: boolean;
     // @internal
     init(): void;
     // @internal (undocumented)
@@ -380,7 +396,6 @@ export class DragSource {
     constructor(
     _layoutManager: LayoutManager,
     _element: HTMLElement,
-    _extraAllowableChildTargets: HTMLElement[],
     _componentTypeOrFtn: JsonValue | (() => DragSource.ComponentItemConfig),
     _componentState: JsonValue | undefined,
     _title: string | undefined);
@@ -465,13 +480,21 @@ export namespace EventEmitter {
     // (undocumented)
     export type ComponentItemParam = [ComponentItem];
     // (undocumented)
+    export type DragComponentParams = [event: DragEvent, component: ComponentItem];
+    // (undocumented)
+    export type DragEventParams = [event: DragEvent];
+    // (undocumented)
     export type DragParams = [offsetX: number, offsetY: number, event: PointerEvent];
     // (undocumented)
     export type DragStartParams = [originalX: number, originalY: number];
     // (undocumented)
     export type DragStopParams = [event: PointerEvent | undefined];
     // (undocumented)
     export interface EventParamsMap {
+        // (undocumented)
+        "drag-enter-window": DragEventParams;
+        // (undocumented)
+        "drag-leave-window": DragEventParams;
         // (undocumented)
         "__all": UnknownParams;
         // (undocumented)
@@ -491,8 +514,14 @@ export namespace EventEmitter {
         // (undocumented)
         "drag": DragParams;
         // (undocumented)
+        "dragend": DragEventParams;
+        // (undocumented)
+        "dragExported": DragComponentParams;
+        // (undocumented)
         "dragStart": DragStartParams;
         // (undocumented)
+        "dragstart": DragComponentParams;
+        // (undocumented)
         "dragStop": DragStopParams;
         // (undocumented)
         "focus": BubblingEventParam;
@@ -663,6 +692,8 @@ export class Header extends EventEmitter {
     // @internal (undocumented)
     applyFocusedValue(value: boolean): void;
     // (undocumented)
+    availableTabsSize(): number;
+    // (undocumented)
     get controlsContainerElement(): HTMLElement;
     // @internal
     createTab(componentItem: ComponentItem, index: number): void;
@@ -921,6 +952,7 @@ export namespace LayoutConfig {
     export interface Dimensions {
         borderGrabWidth?: number;
         borderWidth?: number;
+        contentInset: number;
         dragProxyHeight?: number;
         dragProxyWidth?: number;
         headerHeight?: number;
@@ -975,8 +1007,11 @@ export namespace LayoutConfig {
     // (undocumented)
     export interface Settings {
         blockedPopoutsThrowError?: boolean;
+        checkGlWindowKey?: boolean;
         closePopoutsOnUnload?: boolean;
         constrainDragToContainer?: boolean;
+        // (undocumented)
+        dragDataMimetype?: string;
         // @deprecated (undocumented)
         hasHeaders?: boolean;
         popInOnClose?: boolean;
@@ -992,6 +1027,8 @@ export namespace LayoutConfig {
         showPopoutIcon?: boolean;
         tabControlOffset?: number;
         tabOverlapAllowance?: number;
+        // (undocumented)
+        useDragAndDrop?: boolean;
     }
     // (undocumented)
     export namespace Settings {
@@ -1032,16 +1069,30 @@ export abstract class LayoutManager extends EventEmitter {
     get container(): HTMLElement;
     // (undocumented)
     createAndInitContentItem(config: ResolvedItemConfig, parent: ContentItem): ContentItem;
+    // (undocumented)
+    createContainerElement: (lm: LayoutManager, config: ResolvedComponentItemConfig) => HTMLElement | undefined;
     // @internal
     createContentItem(config: ResolvedItemConfig, parent: ContentItem): ContentItem;
     createPopout(itemConfigOrContentItem: ContentItem | ResolvedRootItemConfig, positionAndSize: ResolvedPopoutLayoutConfig.Window, parentId: string | null, indexInParent: number | null): BrowserPopout;
     // @internal (undocumented)
     createPopoutFromContentItem(item: ContentItem, window: ResolvedPopoutLayoutConfig.Window | undefined, parentId: string | null, indexInParent: number | null | undefined): BrowserPopout;
     // @internal (undocumented)
     createPopoutFromPopoutLayoutConfig(config: ResolvedPopoutLayoutConfig): BrowserPopout;
+    // (undocumented)
+    _currentlyDragging: boolean;
+    // (undocumented)
+    deferIfDragging(action: (cancel: boolean) => void): void;
     // @deprecated (undocumented)
     get deprecatedConstructor(): boolean;
     destroy(): void;
+    // (undocumented)
+    doDeferredActions(cancel: boolean): void;
+    // (undocumented)
+    dragDataMimetype(): string;
+    // (undocumented)
+    _draggedComponentItem: ComponentItem | undefined;
+    // (undocumented)
+    draggingInOtherWindow(ending: boolean): void;
     // Warning: (ae-forgotten-export) The symbol "DropTargetIndicator" needs to be exported by the entry point index.d.ts
     //
     // @internal (undocumented)
@@ -1065,10 +1116,16 @@ export abstract class LayoutManager extends EventEmitter {
     // @internal (undocumented)
     get groundItem(): GroundItem | undefined;
     // (undocumented)
+    get headersContainerElement(): HTMLElement;
+    // (undocumented)
     get height(): number | null;
+    // (undocumented)
+    _hideTargetIndicator(): void;
     // @internal
     init(): void;
     // (undocumented)
+    inSomeWindow: boolean;
+    // (undocumented)
     get isInitialised(): boolean;
     // (undocumented)
     readonly isSubWindow: boolean;
@@ -1089,7 +1146,11 @@ export abstract class LayoutManager extends EventEmitter {
     newItemAtLocation(itemConfig: RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig, locationSelectors?: readonly LayoutManager.LocationSelector[]): ContentItem | undefined;
     // (undocumented)
     get openPopouts(): BrowserPopout[];
+    // (undocumented)
+    popoutClickHandler: (item: Stack, ev: Event) => boolean;
     removeDragSource(dragSource: DragSource): void;
+    // (undocumented)
+    removeElementEventually(element: HTMLElement): void;
     // @internal @deprecated (undocumented)
     get root(): GroundItem | undefined;
     // (undocumented)
@@ -1101,7 +1162,9 @@ export abstract class LayoutManager extends EventEmitter {
     setMaximisedStack(stack: Stack | undefined): void;
     setSize(width: number, height: number): void;
     // @internal (undocumented)
-    startComponentDrag(x: number, y: number, dragListener: DragListener, componentItem: ComponentItem, stack: Stack): void;
+    startComponentDrag(ev: DragEvent, componentItem: ComponentItem): void;
+    // @internal (undocumented)
+    startComponentDragOld(x: number, y: number, dragListener: DragListener, componentItem: ComponentItem, stack: Stack): void;
     // @internal (undocumented)
     get tabDropPlaceholder(): HTMLElement;
     // @deprecated (undocumented)
@@ -1120,6 +1183,10 @@ export abstract class LayoutManager extends EventEmitter {
     // @internal (undocumented)
     updateSizeFromContainer(): void;
     // (undocumented)
+    useNativeDragAndDrop(): boolean;
+    // (undocumented)
+    validDragEvent(e: DragEvent): boolean;
+    // (undocumented)
     get width(): number | null;
     }
 
@@ -1129,6 +1196,8 @@ export namespace LayoutManager {
     export type AfterVirtualRectingEvent = (this: void) => void;
     // (undocumented)
     export type BeforeVirtualRectingEvent = (this: void, count: number) => void;
+    const // (undocumented)
+    VIRTUAL_ELEMENT_DUMMY: HTMLDivElement;
     // @internal (undocumented)
     export interface ConstructorParameters {
         // (undocumented)
@@ -1422,6 +1491,8 @@ export namespace ResolvedLayoutConfig {
         // (undocumented)
         readonly borderWidth: number;
         // (undocumented)
+        readonly contentInset: number;
+        // (undocumented)
         readonly dragProxyHeight: number;
         // (undocumented)
         readonly dragProxyWidth: number;
@@ -1471,10 +1542,14 @@ export namespace ResolvedLayoutConfig {
         // (undocumented)
         readonly blockedPopoutsThrowError: boolean;
         // (undocumented)
+        readonly checkGlWindowKey: boolean;
+        // (undocumented)
         readonly closePopoutsOnUnload: boolean;
         // (undocumented)
         readonly constrainDragToContainer: boolean;
         // (undocumented)
+        readonly dragDataMimetype: string;
+        // (undocumented)
         readonly popInOnClose: boolean;
         // (undocumented)
         readonly popoutWholeStack: boolean;
@@ -1488,6 +1563,8 @@ export namespace ResolvedLayoutConfig {
         readonly tabControlOffset: number;
         // (undocumented)
         readonly tabOverlapAllowance: number;
+        // (undocumented)
+        readonly useDragAndDrop: boolean;
     }
     // (undocumented)
     export namespace Settings {
@@ -1749,6 +1826,8 @@ export class Stack extends ComponentParentableItem {
     toggleMaximise(): void;
     // @internal (undocumented)
     updateSize(): void;
+    // (undocumented)
+    updateTabSizes(): void;
 }
 
 // @public (undocumented)
@@ -1841,6 +1920,8 @@ export class Tab {
     setFocused(): void;
     setTitle(title: string): void;
     // (undocumented)
+    readonly tabClickListener: (ev: MouseEvent) => void;
+    // (undocumented)
     get titleElement(): HTMLElement;
     }
 
@@ -1852,6 +1933,17 @@ export namespace Tab {
     export type DragStartEvent = (x: number, y: number, dragListener: DragListener, componentItem: ComponentItem) => void;
     // @internal (undocumented)
     export type FocusEvent = (componentItem: ComponentItem) => void;
+    // (undocumented)
+    export enum RenderFlags {
+        // (undocumented)
+        DropdownActive = 1,
+        // (undocumented)
+        InDropdownMenu = 2,
+        // (undocumented)
+        IsActiveTab = 4
+    }
+    // (undocumented)
+    export type TitleRenderer = (component: ComponentContainer, target: HTMLElement, availableWidth: number, flags: RenderFlags) => void;
 }
 
 // @public (undocumented)