I want to fill empty row space but resize wont work!

[rufreakde]

I try to resize my Item on drag, and fill the space of a row where a item is already in place. But the resize is always the sizex and sizey of the griditem!

Config:

gridItemConfig: NgGridItemConfig = <NgGridItemConfig>{
    col: 1,               //  The start column for the item
    row: 1,               //  The start row for the item
    sizex: 1,             //  The start width in terms of columns for the item
    sizey: 1,             //  The start height in terms of rows for the item
    dragHandle: '.drag-handle',     //  The selector to be used for the drag handle. If null, uses the whole item
    // tslint:disable-next-line:max-line-length
    resizeHandle: null,   //  The selector to be used for the resize handle. If null, uses 'borderSize' pixels from the right for horizontal resize,
    //  'borderSize' pixels from the bottom for vertical, and the square in the corner bottom-right for both
    borderSize: 30,
    fixed: false,         //  If the grid item should be cascaded or not. If yes, manual movement is required
    draggable: true,      //  If the grid item can be dragged. If this or the global setting is set to false, the item cannot be dragged.
    resizable: true,      //  If the grid item can be resized. If this or the global setting is set to false, the item cannot be resized.
    payload: null,        //  An optional custom payload (string/number/object) to be used to identify the item for serialization
    maxCols: 12,
    minCols: 3,
    maxRows: 12,
    minRows: 3,
    minWidth: 1,
    minHeight: 1
  };

private gridConfig: NgGridConfig = <NgGridConfig>{
    margins: [5],
    draggable: true,
    resizable: true,
    max_cols: 0,
    max_rows: 0,
    visible_cols: 12,
    visible_rows: 0,
    min_cols: 0,
    min_rows: 0,
    col_width: 160,
    row_height: 160,
    cascade: 'none',
    min_width: 1,
    min_height: 1,
    fix_to_grid: false,
    auto_style: true,
    auto_resize: false,
    maintain_ratio: true,
    prefer_new: false,
    zoom_on_drag: false,
    limit_to_screen: false
  };

On the grid I have an event and try to set the size:

onItemDrag(event): void {
    // TODO Preview of the cliping!
    console.log(event);
    event.setSize({ x: 10, y: 2 }, true);
  }

Seems like this is applied to the temporary object and when I stop the drag the size is going back to the 3/3 of the griditem (min) ! Where can I hook to automatically resize when I drag beneath my other items to fill the empty space?

[rufreakde]

Ok I saw that when I do this the placeholder wont be resized and when I stop the values of the placeholder override the values of the item!

[rufreakde]

Also

maintain_ratio: true, does not work if you resize it just resizes the way you drag ( i tried it in your Demo and used your settings just changed to: maintain_ratio: true,

And it does not maintain any ratio. Do I do something terribly wrong here?

[BTMorton]

OK, can you explain the behaviour that you're expecting here as I'm a little confused. Is it that when you move an item, it will be resized to fill the space in the row it's dragged into?

Some initial questions then: What have you bound the onItemDrag method to? How is your config being generated - is it created on the fly or bound to a variable? Ideally, you should update the item config to change the sizex/sizey rather than calling the setSize method, as that will cause issues internally.

maintain_ratio is used with max_rows, max_cols, visible_rows or visible_cols in order to maintain the ratio of column width and row height. It will not fix the items to a set ratio of rows/cols if that's what you were expecting. If that is a feature you would like, please open a new issue to request it.

[rufreakde]

@BTMorton Yeah when I move an item from row 1 into row 2 it will be resized to fill the free row space of row 2. This is not a feature you have, I want to implement it. But my problem is that I cant resize the Item anyway. First I tried just to set sizex/sizey but this has no effect at all! Thats when I found the setter and thought that should be the right way doing it.

To the binding:

<div [ngGrid]="gridConfig" (window:pageshow)="onWindowResize($event)" (onDragStart)="onItemStartDrag($event)" (onDragStop)="onItemDragStop($event)"
  (onItemChange)="onItemChange($event)" (onResize)="onItemResize($event)" (onDrag)="onItemDrag($event)">

My item config is per item on each element. And it is a variable i bind to it. <div [ngGridItem]="gridItemConfig"...

Okay I misunderstood this I thought that if I set my sizex/sizey to 1/2 when i resize x=2 it would set y to 4. Sorry for that.

EDIT: event.sizex and event.sizey are readOnly with a getter? I cant set them i can only set the private _sizex/y but this is not intended right?

[rufreakde]

Modiffiing the config of the dragged item like this:

onItemStartDrag(event): void {
    console.log(event._config);
    event._config.sizex = 4;
    event._config.sizey = 2;
  }

Will result in an browser freeze. (newest version angular2 and chrome)

EDIT: it only freezes on the first one if I drag it somewhere without a layout interaction! I f I drag it beneath another item and they stay. There is no problem after that. Don't understand where the freeze comes from. There are no error massages. Can there be an infinite loop somewhere?

[rufreakde]

Okay here is a pretty dirty workaround:

In my GridComponent with your Grid Directive:

private tempItemSizeScale = {
    x: 4,
    y: 2
  };

I had to use both methods to set the values! And in different event hooks!

onItemDrag(event): void {
    event.setSize(this.tempItemSizeScale, true);
  }

  onItemDragStop(event) {
    event._config.sizex = this.tempItemSizeScale.x;
    event._config.sizey = this.tempItemSizeScale.y;
  }

Now I can resize the Items without infinite loops. Is there a beautiful way to get the remaining "unused" cols of a row from the grid?

Cheers, rufreakde

[BTMorton]

Not in the grid. You'll have to use the items and the number of columns to calculate it yourself. Theoretically, you could use the item grid that is currently in place to get the free columns, but I'm going to be removing that soon as it's not the most efficient method of handling things, especially with large number of columns/rows