BTMorton / angular2-grid

A drag/drop/resize grid-based plugin directive for angular2
https://bmorton.co.uk/angular/
MIT License
354 stars 159 forks source link

[(ngGridItem)] binding causes freezes #219

Open Ketec opened 7 years ago

Ketec commented 7 years ago

First it occurred when i implemented router reuse for my nav. And figured it must be a bug with the reuse strategy so i disabled router reuse for the page with this grid.

Now i was implementing it for a toggle sidebar - and browser froze every time i added the component with the grid.

Any idea why two bind would cause it to freeze? added in:

<ng-sidebar-container>
    <ng-sidebar [(opened)]="opened" [mode]="over" position="right" >
        <sidebarView [initData]="initSidebarData"></sidebarView>
    </ng-sidebar>
</ng-sidebar-container>

And the grid:

<div class="sidebar-container" [ngGrid]="gridConfig">
    <div class="widget-container" [(ngGridItem)]= "{minWidth: 350, minHeight: 300, resizable: false, col: 1, row: 1, dragHandle: '.handle'}">
        <div class="handle"><h4>test</h4></div>
    </div>
 </div>

If i remove the ngGridItem bind - it works fine. It freezes when you resize or navigate to the component.

And grid conf:

    private gridConfig: NgGridConfig = <NgGridConfig>{
        margins: [5],            //  The size of the margins of each item. Supports up to four values in the same way as CSS margins. Can be updated using setMargins()
        draggable: true,          //  Whether the items can be dragged. Can be updated using enableDrag()/disableDrag()
        resizable: true,          //  Whether the items can be resized. Can be updated using enableResize()/disableResize()
        max_cols: 2,              //  The maximum number of columns allowed. Set to 0 for infinite. Cannot be used with max_rows
        max_rows: 0,              //  The maximum number of rows allowed. Set to 0 for infinite. Cannot be used with max_cols
        visible_cols: 0,          //  The number of columns shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_cols
        visible_rows: 0,          //  The number of rows shown on screen when auto_resize is set to true. Set to 0 to not auto_resize. Will be overriden by max_rows
        min_cols: 0,              //  The minimum number of columns allowed. Can be any number greater than or equal to 1.
        min_rows: 0,              //  The minimum number of rows allowed. Can be any number greater than or equal to 1.
        col_width: 300,           //  The width of each column
        row_height: 25,          //  The height of each row
        cascade: 'up',            //  The direction to cascade primeng items ('up', 'right', 'down', 'left')
        min_width: 25,           //  The minimum width of an item. If greater than col_width, this will update the value of min_cols
        min_height: 25,          //  The minimum height of an item. If greater than row_height, this will update the value of min_rows
        fix_to_grid: true,       //  Fix all item movements to the primeng
        auto_style: true,         //  Automatically add required element styles at run-time
        auto_resize: false,       //  Automatically set col_width/row_height so that max_cols/max_rows fills the screen. Only has effect is max_cols or max_rows is set
        maintain_ratio: false,    //  Attempts to maintain aspect ratio based on the colWidth/rowHeight values set in the config
        limit_to_screen: true,   //  When resizing the screen, with this true and auto_resize false, the primeng will re-arrange to fit the screen size. Please note, at present this only works with cascade direction up.
    };

After some more testing - this seems to be caused by limit_to_screen. Possibly when elements are not visible on screen (hidden sidepanel, router reuse storing dom).

OnlyAGhost commented 7 years ago

Does it crash if you 2-way bind it to an instance of the NgGridItemConfig interface instead of a statically defined object like that? I'm not sure that would be a problem, but I've not seen that error pop up prior.

Ketec commented 7 years ago

Seems like this may have been a false positive - simply a coincidence because limit_to_screen: true was set. Which is the real cause of freezes in many cases.