Angular-tree-component: low performance

[tvolodimir]

Hi,
Found some performance issue when element is dragging.
FPS is slow down to 6
https://gfycat.com/ScentedExcellentBengaltiger
use
"angular-tree-component": "3.8.0"
"@ angular/core": "4.2.5"

[johaven]

You should try to use virtualscroll and check performance with AOT (prod mode enabled)

[tvolodimir]

I've tried. Looks little bit better but fps drops from 60 to 28 (in angular prod build with virtualscroll in chrome with closed devtools)
I thinks your component has some bottleneck logic. In my case it may has some freezing in canvas drawing

302 #268 #352

upd:
on my personal PC same perfomance as above (5-10 fps with prod build)

[adamkleingit]

Very strange, do you feel that also in the demo example?
Have you tried using enableProdMode()?

[tvolodimir]

Now I do tried prod with aot
And have incredeable 60fps all time
But I am confused why in dev env I still have 4-5 fps. I created minimal project with bare your tree-node-component without any customization. And I have same problem
link Can you investigate this problem?
dragging another component with unfolded nodes 4-5fps
dragging treenode parent component with unfolded nodes 4-5fps
dragging any component with folded nodes 59-60fps

[adamkleingit]

Not sure I understand the videos. What are those windows you are dragging? Is it a component inside an app? Is it inside a browser?

[tvolodimir]

it's look like this:
document
-> dragable container
----> tree component
-> dragable container
----> pixijs component

[gmaggiodev]

I have a similar problem. It seems that depends more on the complexity of the DOM in which the treeview reside than the numbers of treeview items.

[gmaggiodev]

I found a workaround by detaching the change detection of the parent component during drag/drop.
This is possible using dragStart/dragEnd actionMapping.

[ottosson]

I have problems with really bad performance when drag-and-dropping nodes in a tree with 150-200 nodes. It's a shallow tree, maybe two-three sub levels on a handful of nodes.

@GianlucaMaggio could you supply some code to show how you did to avoid change detection? Thanks!

[gmaggiodev]

You have to intercept dragStart and dragEnd using ITreeOptions:

let treeOptions: ITreeOptions = {
        actionMapping: {
            mouse: {
                dragStart: () => { this.cd.detach(); },
                dragEnd: () => { this.cd.reattach(); },
            }
        }
    };

where this.cd is the ChangeDetectorRef injected in the constructor:

protected cd: ChangeDetectorRef,

[ottosson]

Ah, very nice. I'll try it out.

Thanks!

[dannyzhan]

@GianlucaMaggio , Great! the performance issue sounds gone after your changes are made.

[tobiasengelhardt]

Updated the docs with a hint. Closing this issue. Please open a new issue if the problem still exists.