Drag And Drop Accross 2 Components

[beliveInYouToHelpMe]

Thank your lib!!!

I have encountered an issue when dragging an external element to a tree, more specifically when the external element and the tree are in different components.

For example, in the template:

<p [treeDrag]="{name: 'first'}" [treeDragEnabled]="true">Drag me!

And the following relevant part of the tree's options:

actionMapping: { mouse: { drop: (tree: TreeModel, node: TreeNode, $event: any, { from, to }) => { // 'from' is null when dropping element outside component } } }

In my AppModule, I import TreeModule.forRoot(). And in the 2 components that use the lib import TreeModule.

This works fine when the element and the tree are in the same component. I'm using angular-tree-component 8.5.2, angular 8.2.14.

I've seen that problem was solved in version 6 but it seems that it happens again...

Is there a workaround or is dragging across components currently not supported?

[tobiasengelhardt]

PR #780 should have fixed this. Will be released soon.

[tobiasengelhardt]

@beliveInYouToHelpMe this should now again work in version 9.0.2 (or newer). Please note that the package name changed from angular-tree-component to @circlon/angular-tree-component. We tried to keep the old name but couldn't transfer the publishing rights. This requires some path changes after the update. Take a look at the changelog to see the changes.

If you are using Angular 8 in your app please let us know because then we will fix this also in version 8 of the tree.

[beliveInYouToHelpMe]

@tobiasengelhardt thank you for your work. I have some questions for you!

In the previous issue (https://github.com/CirclonGroup/angular-tree-component/issues/376), it seems that some Singleton are used. In order to share those we use forRoot() in AppModule but this function doesn't exist in the latest version. So how those Singleton are shared?

[tobiasengelhardt]

@beliveInYouToHelpMe I will link to the Angular docs because that explanation is probably better than mine. The forRoot is not needed anymore because the service is declared as a singleton with the providedIn: root pattern in the service itself. Because the service itself is declared a Singleton we don't need to use forRoot again. You can also take a look into the PR description from Keith and the actual service code.

[beliveInYouToHelpMe]

@tobiasengelhardt ooooh okay I see... I imported TreeModule in AppModule and provided TreeDraggedElement. In children module i also imported TreeModule. So that TreeDraggedElement is injected, is it correct?

[tobiasengelhardt]

@beliveInYouToHelpMe You don't need to provide TreeDraggedElement. It should work with just the TreeModule import.

[beliveInYouToHelpMe]

@tobiasengelhardt I already tested by just importing TreeModule in AppModule and my children components are using angular-tree-component's objects but it doesn't work. When I try to retrieve information from the source object of the drag and drop, I still have undefined.

[tobiasengelhardt]

@beliveInYouToHelpMe Ok, I will take a look into it. We don't have this use case - so I never tried it. With version 10 of the tree there will be a stackblitz issue template. You can preview it here: Stackblitz issue template and add a minimal repo of the problem.

[KeithGillette]

Drag and drop across components declared in different (lazy-loaded) modules is working fine for us, tested in our project under v9.0.3 and v10.0.0. In our case, we're not even importing TreeModule in AppModule, only in the lazy-loaded modules that include components with treeviews. The changes in PR#780 should automatically provide TreeDraggedElement to TreeComponent as a service singleton across all modules into which TreeModule is imported. The from property comes across to us in the drop handler as a TreeNode as it should:

drop: (treeModel: TreeModel, treeNode: TreeNode, dragEvent: DragEvent, data: { from: TreeNode; to: { parent: TreeNode; index: number; dropOnNode: boolean } })

[beliveInYouToHelpMe]

I finally found what was wrong, it's relative to my project not your lib. Thank you for your help and for your time!