Add support for proper ComponentItemConfig in DragSource

golden-layout · May 12, 2022 · aec4db5 · aec4db5
1 parent 5ecdd9e
commit aec4db5
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 36 deletions.
diff --git a/apitest/app.ts b/apitest/app.ts
@@ -3,7 +3,6 @@ import {
     ComponentContainer,
     ComponentItemConfig,
     ContentItem,
-    DragSource,
     EventEmitter,
     GoldenLayout,
     JsonValue,
@@ -498,9 +497,13 @@ export class App {
         this._goldenLayout.addComponent(componentType);
     }
 
-    private getDragComponentTypeAndState(): DragSource.ComponentItemConfig {
+    private getDragComponentTypeAndState(): ComponentItemConfig {
         const componentType = this._registeredComponentTypesForAddSelect.value;
-        return { type: componentType };
+        const itemConfig: ComponentItemConfig = {
+            type: 'component',
+            componentType,
+        }
+        return itemConfig;
     }
 
     private handleLoadLayoutButtonClick() {

diff --git a/etc/golden-layout.api.md b/etc/golden-layout.api.md
@@ -384,16 +384,17 @@ export class DragSource {
     _layoutManager: LayoutManager,
     _element: HTMLElement,
     _extraAllowableChildTargets: HTMLElement[],
-    _componentTypeOrFtn: JsonValue | (() => DragSource.ComponentItemConfig),
+    _componentTypeOrFtn: JsonValue | (() => (DragSource.ComponentItemConfig | ComponentItemConfig)),
     _componentState: JsonValue | undefined,
-    _title: string | undefined);
+    _title: string | undefined,
+    _id: string | undefined);
     // @internal
     destroy(): void;
 }
 
 // @public (undocumented)
 export namespace DragSource {
-    // (undocumented)
+    // @deprecated (undocumented)
     export interface ComponentItemConfig {
         // (undocumented)
         state?: JsonValue;
@@ -402,6 +403,8 @@ export namespace DragSource {
         // (undocumented)
         type: JsonValue;
     }
+    // @deprecated (undocumented)
+    export function isDragSourceComponentItemConfig(config: DragSource.ComponentItemConfig | ComponentItemConfig): config is DragSource.ComponentItemConfig;
 }
 
 // @public
@@ -1139,9 +1142,9 @@ export abstract class LayoutManager extends EventEmitter {
     minifyConfig(config: ResolvedLayoutConfig): ResolvedLayoutConfig;
     newComponent(componentType: JsonValue, componentState?: JsonValue, title?: string): ComponentItem;
     newComponentAtLocation(componentType: JsonValue, componentState?: JsonValue, title?: string, locationSelectors?: LayoutManager.LocationSelector[]): ComponentItem | undefined;
-    newDragSource(element: HTMLElement, itemConfigCallback: () => DragSource.ComponentItemConfig): DragSource;
-    // (undocumented)
-    newDragSource(element: HTMLElement, componentType: JsonValue, componentState?: JsonValue, title?: JsonValue): DragSource;
+    newDragSource(element: HTMLElement, itemConfigCallback: () => (DragSource.ComponentItemConfig | ComponentItemConfig)): DragSource;
+    // @deprecated (undocumented)
+    newDragSource(element: HTMLElement, componentType: JsonValue, componentState?: JsonValue, title?: JsonValue, id?: string): DragSource;
     newItem(itemConfig: RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig): ContentItem;
     newItemAtLocation(itemConfig: RowOrColumnItemConfig | StackItemConfig | ComponentItemConfig, locationSelectors?: readonly LayoutManager.LocationSelector[]): ContentItem | undefined;
     // (undocumented)

diff --git a/src/ts/controls/drag-source.ts b/src/ts/controls/drag-source.ts
@@ -1,12 +1,12 @@
-import { ComponentItemConfig } from '../config/config';
+import { ComponentItemConfig as ConfigComponentItemConfig } from '../config/config'; // remove alias in version 3
+import { ResolvedRowOrColumnItemConfig } from "../config/resolved-config";
 import { UnexpectedNullError } from '../errors/internal-error';
 import { ComponentItem } from '../items/component-item';
 import { GroundItem } from '../items/ground-item';
 import { LayoutManager } from '../layout-manager';
 import { DragListener } from '../utils/drag-listener';
 import { JsonValue } from '../utils/types';
 import { DragProxy } from './drag-proxy';
-import { ResolvedRowOrColumnItemConfig } from "../config/resolved-config";
 
 /**
  * Allows for any DOM item to create a component on drag
@@ -29,12 +29,14 @@ export class DragSource {
         private readonly _element: HTMLElement,
         /** @internal */
         private readonly _extraAllowableChildTargets: HTMLElement[],
-        /** @internal */
-        private _componentTypeOrFtn: JsonValue | (() => DragSource.ComponentItemConfig),
-        /** @internal */
+        /** @internal @deprecated replace with componentItemConfigOrFtn in version 3 */
+        private _componentTypeOrFtn: JsonValue | (() => (DragSource.ComponentItemConfig | ConfigComponentItemConfig)),
+        /** @internal @deprecated remove in version 3 */
         private _componentState: JsonValue | undefined,
-        /** @internal */
+        /** @internal @deprecated remove in version 3 */
         private _title: string | undefined,
+        /** @internal @deprecated remove in version 3 */
+        private _id: string | undefined
     ) {
         this._dragListener = null;
 
@@ -74,32 +76,38 @@ export class DragSource {
      * @internal
      */
     private onDragStart(x: number, y: number) {
-        let componentType: JsonValue;
-        let componentState: JsonValue | undefined;
-        let title: string | undefined;
+        const type = 'component';
+        let dragSourceItemConfig: ConfigComponentItemConfig;
+
         if (typeof this._componentTypeOrFtn === "function") {
-            const dragSourceItemConfig: DragSource.ComponentItemConfig = this._componentTypeOrFtn();
-            componentType = dragSourceItemConfig.type;
-            componentState = dragSourceItemConfig.state;
-            title = dragSourceItemConfig.title;
+            const ftnDragSourceItemConfig = this._componentTypeOrFtn() as (DragSource.ComponentItemConfig | ConfigComponentItemConfig);
+            // If the componentType property exists, then it is already a ComponentItemConfig so nothing to do
+            if (DragSource.isDragSourceComponentItemConfig(ftnDragSourceItemConfig)) {
+                dragSourceItemConfig = {
+                    type,
+                    componentState: ftnDragSourceItemConfig.state,
+                    componentType: ftnDragSourceItemConfig.type,
+                    title: ftnDragSourceItemConfig.title ?? this._title,
+                };
+            } else {
+                dragSourceItemConfig = ftnDragSourceItemConfig;
+            }
         } else {
-            componentType = this._componentTypeOrFtn;
-            componentState = this._componentState;
-            title = this._title;
+            dragSourceItemConfig = {
+                type,
+                componentState: this._componentState,
+                componentType: this._componentTypeOrFtn,
+                title: this._title,
+                id: this._id,
+            };
         }
 
         // Create a dummy ContentItem only for drag purposes
         // All ContentItems (except for GroundItem) need a parent.  When dragging, the parent is not used.
         // Instead of allowing null parents (as Javascript version did), use a temporary dummy GroundItem parent and add ContentItem to that
         // If this does not work, need to create alternative GroundItem class
 
-        const itemConfig: ComponentItemConfig = {
-            type: 'component',
-            componentType,
-            componentState,
-            title,
-        }
-        const resolvedItemConfig = ComponentItemConfig.resolve(itemConfig, false);
+        const resolvedItemConfig = ConfigComponentItemConfig.resolve(dragSourceItemConfig, false);
 
         const componentItem = new ComponentItem(this._layoutManager, resolvedItemConfig, this._dummyGroundContentItem)
         this._dummyGroundContentItem.contentItems.push(componentItem);
@@ -143,9 +151,17 @@ export class DragSource {
 
 /** @public */
 export namespace DragSource {
+    /** @deprecated  use Config {@link (ComponentItemConfig:interface)} */
     export interface ComponentItemConfig {
         type: JsonValue,
         state?: JsonValue,
         title?: string,
     }
+
+    /** @deprecated remove in version 3 */
+    export function isDragSourceComponentItemConfig(
+        config: DragSource.ComponentItemConfig | ConfigComponentItemConfig
+    ): config is DragSource.ComponentItemConfig {
+        return !("componentType" in config);
+    }
 }
diff --git a/src/ts/layout-manager.ts b/src/ts/layout-manager.ts
@@ -957,14 +957,16 @@ export abstract class LayoutManager extends EventEmitter {
 	 *          and the attached itemConfig. This can be used in
 	 *          removeDragSource() later to get rid of the drag listeners.
      */
-    newDragSource(element: HTMLElement, itemConfigCallback: () => DragSource.ComponentItemConfig): DragSource;
-    newDragSource(element: HTMLElement, componentType: JsonValue, componentState?: JsonValue, title?: JsonValue): DragSource;
+    newDragSource(element: HTMLElement, itemConfigCallback: () => (DragSource.ComponentItemConfig | ComponentItemConfig)): DragSource;
+    /** @deprecated will be replaced in version 3 with newDragSource(element: HTMLElement, itemConfig: ComponentItemConfig) */
+    newDragSource(element: HTMLElement, componentType: JsonValue, componentState?: JsonValue, title?: JsonValue, id?: string): DragSource;
     newDragSource(element: HTMLElement,
-        componentTypeOrItemConfigCallback: JsonValue | (() => DragSource.ComponentItemConfig),
+        componentTypeOrItemConfigCallback: JsonValue | (() => (DragSource.ComponentItemConfig | ComponentItemConfig)),
         componentState?: JsonValue,
         title?: string,
+        id?: string,
     ): DragSource {
-        const dragSource = new DragSource(this, element, [], componentTypeOrItemConfigCallback, componentState, title);
+        const dragSource = new DragSource(this, element, [], componentTypeOrItemConfigCallback, componentState, title, id);
         this._dragSources.push(dragSource);
 
         return dragSource;