Animation while tree expansion is lagging

[ratnam99]

Hi, I have been using this library for almost a year. But now, sometimes the animation of tree expansion is lagging. So, What can I do to fix this.

Thanks in advance.

[shmarlya]

+1, my animation start lagging on contract, also i've got horizontal scroll bar appear P.S. by the way only in chrome browser

[adamkleingit]

Have you upgraded your version? Are you using animateExpand, animateSpeed, and animateAccelaration?

On Sat, Mar 17, 2018 at 4:35 PM, shmarlya notifications@github.com wrote:

+1, my animation start lagging on contract, also i've got horizontal scroll bar appear

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/500tech/angular-tree-component/issues/586#issuecomment-373924688, or mute the thread https://github.com/notifications/unsubscribe-auth/AA2SSgtspL7VjXfuNe7muw0G_3E7qRWbks5tfR8_gaJpZM4StXrt .

[ratnam99]

Yes, I'm using animateExpand, animateSpeed, and animateAccelaration

[adamkleingit]

Can you reproduce in the plunkr: https://plnkr.co/edit/u5fMmaM14rJ0aqG3k240?p=preview ?

On Sat, Mar 17, 2018 at 9:53 PM, ratnam99 notifications@github.com wrote:

Yes, I'm using animateExpand, animateSpeed, and animateAccelaration

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/500tech/angular-tree-component/issues/586#issuecomment-373948022, or mute the thread https://github.com/notifications/unsubscribe-auth/AA2SSmXkx55SGm5Np7SYPuro6xTFQjqyks5tfWm5gaJpZM4StXrt .

[ratnam99]

I can provide you values of animateExpand, animateSpeed, and animateAccelaration

[ratnam99]

This is the modified plunkr code of src/app-child-component.ts

import {Component, OnInit} from '@angular/core
import { TreeNode, TreeModel, TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions } from 'angular-tree-component';

const actionMapping: IActionMapping = {
    mouse: {
        dblClick: (tree, node, $event) => {
            if (node.hasChildren) {
                TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
            }
        },
        click: (tree, node, $event) => {
            $event.shiftKey ? TREE_ACTIONS.TOGGLE_SELECTED_MULTI(tree, node, $event) : TREE_ACTIONS.TOGGLE_SELECTED(tree, node, $event);
        }
    }
}; 

@Component({
  selector: 'my-app',
  template: `
    <tree-root 
      [nodes]="nodes"
      [options]="options"
    ></tree-root>
  `,
}) export class ChildComponent implements OnInit {

  showTree = true;
  nodes = NODES; // declared after component...
  options = OPTIONS;

  ngOnInit() {
  }

}

const OPTIONS = {
    actionMapping,
    animateExpand: true,
    animateSpeed: 100,
    animateAcceleration: 1.2
};

const NODES = [
  {
    id:'1', 
    name:'Root', 
    children: [
      {
        id:'2',
        name:'First Child'
      },
      {
        id:'3',
        name:'Second Child'
      }
    ]
  },
  {
    id:'4', 
    name:'Root2', 
    children: [
      {
        id:'5',
        name:'First Child',
        children: [
          { id: '7', name: 'grandchild' }
        ]
      },
      {
        id:'6',
        name:'Second Child'
      }
    ]
  },
]

[shmarlya]

@adamkleingit update to latest version fix animation bug, but now there some warnings in console: