We are currently in the process of migrating from golden-layout version 1.5.9 to version 2.6.0 within a large Angular 16 production application, albeit slowly and somewhat painfully.
Within our application, there exists a dropdown menu that displays the names of all available widgets that can be added to the page. Upon initialization, all HTML elements within this menu are set up as drag sources using the newDragSource method provided by the GoldenLayout object.
In the previous version (1.5.9), this functionality worked flawlessly - users could drag items from the menu onto the page and they would appear as golden-layout components with full functionality. Additionally, clicking on an item in the menu also added the component to the page successfully.
However, in the latest version (2.6.0) this feature is completely broken. The menu items are not draggable at all. Nonetheless, clicking on an item in the menu still results in adding the selected component to the layout, which functions as expected.
The code snippet used to create the drag sources is outlined below:
public createNewWidgetDragSource(element: HTMLElement, widgetModel: Widget): void {
const gl = this.getGoldenLayoutInstance();
const config = () => {
const item: DragSource.ComponentItemConfig = {
state: null,
title: widgetModel.name,
type: 'widget-golden-instance',
};
return item;
};
gl.newDragSource(element, config);
}
It's worth noting that this code closely resembles the one utilized in the golden-layout-ng-app reference application, where it operates seamlessly. However, the reference app employs golden-layout version 2.5.0.
The widget-golden-instance component type represents a generic golden-layout container component, serving as a host for many of our own widgets.
Upon inspecting the gl object in the aforementioned code, I can confirm that the _dragSources array within the object does contain the LI elements from the menu.
No errors are reported in either the editor or browser, aside from a deprecation warning related to ComponentItemConfig under the DragSource namespace. This warning was disregarded, with no impact on the behavior noted.
Despite everything appearing correct, the dragging capability simply does not work. Could it be an oversight on my part, or perhaps a bug within the system?
Edit:
I suspect this issue may relate to the fact that the list items designated as drag sources are located within a menu. When hard-coded elements outside of the menu are made draggable using the same function createNewWidgetDragSource, they work as intended.
Even after attempting delayed initialization of the menu elements as drag sources when the menu is visible, the problem persists. Furthermore, calling the createNewWidgetDragSource method without passing an HTML element triggers an error from the golden-layout source, despite confirming that the method is passed the list-item elements from the menu.
An attempt to update the reference app to utilize golden-layout version 2.6.0 instead of 2.5.0 resulted in successful dragging functionality, leaving me perplexed as to why the same logic fails in our implementation.
All aspects seem to align correctly, with the appropriate elements present at the expected times and absence of any noticeable errors. Yet, the feature remains unresponsive.