Опция элемента сетки для динамического расчета и применения высоты элемента - PullRequest
Новая
       18

Опция элемента сетки для динамического расчета и применения высоты элемента

0 голосов
/ 20 октября 2019

Я работал с Angular Gridster в последние два дня, чтобы помочь создать инструмент "конструктор сайтов". Одно из требований инструмента конструктора сайтов включает возможность свободного перемещения компонентов в рабочей области. Мне удалось выполнить это требование с Angular Gridster. Однако у меня возникают некоторые трудности с обновлением gridsterItems, чтобы он соответствовал «динамической высоте ячеек сетки».

Я потратил некоторое время на чтение пакета, и оказалось, что это потому, что gridsterItems должен заполнять ровно один или несколькоячейки сетки, все столбцы должны быть одинаковой ширины, а все строки должны быть одинаковой высоты.

Представьте себе сценарий, в котором у вас есть два элемента gridsterItems, один с содержимым размером 200 на 200 пикселей, а другой размером 181 на 181 пикселей. Теперь невозможно, чтобы эти два элемента gridsterItem были смежными, если только у каждой строки и столбца не было высоты / ширины 1 пикселя (поскольку 181 - простое число и не имеет общих знаменателей с 200).

ВышеСценарий имеет смысл, но я работаю в контексте, где ширина компонента всегда будет одинаковой, а высота будет варьироваться. Мне не нужно, чтобы gridsterItems были смежными друг с другом. Они будут выше / ниже друг друга.

Я пытаюсь реализовать функциональность, чтобы учесть это сам, но я застрял. Мои gridsterItems, кажется, соответствуют только одной высоте и не «наследуют» истинный размер базового компонента. Любая идея, как я могу это исправить?

Мой код выглядит следующим образом: 

import {ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation} from '@angular/core';
import {CompactType, GridsterConfig, GridsterItem, GridsterItemComponent, GridsterPush, GridType} from 'angular-gridster2';

@Component({
  selector: 'app-component',
  styleUrls: ['app.component.css'],
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  options: GridsterConfig;
  dashboard: Array<GridsterItem>;
  itemToPush: GridsterItemComponent;

  ngOnInit() {
    this.options = {
      pushItems: true,
      maxCols: 1,
      margin: 10,
      maxRows: 2,
      displayGrid: 'none',
      scrollVertical: true,
      disableScrollHorizontal: true,
      compactType: 'compactUp&Left',
      mobileBreakpoint: 0,
      resizable: {
        enabled: false
      },
      draggable: {
        enabled: true
      }
    }
    this.dashboard = [{ x: 0, y: 0, rows: 1, cols: 1 },
      { x: 1, y: 0, rows: 1, cols: 1 }];
  }

  changedOptions() {
    if (this.options.api && this.options.api.optionsChanged) {
      this.options.api.optionsChanged();
    }
  }

  removeItem($event, item) {
    $event.preventDefault();
    $event.stopPropagation();
    this.dashboard.splice(this.dashboard.indexOf(item), 1);
  }

  addItem() {
    this.dashboard.push({x: 0, y: 0, cols: 1, rows: 1});
  }

  initItem(item: GridsterItem, itemComponent: GridsterItemComponent) {
    this.itemToPush = itemComponent;
  }

  pushItem() {
    const push = new GridsterPush(this.itemToPush); // init the service
    this.itemToPush.$item.rows += 4; // move/resize your item
    if (push.pushItems(push.fromNorth)) { // push items from a direction
      push.checkPushBack(); // check for items can restore to original position
      push.setPushedItems(); // save the items pushed
      this.itemToPush.setSize();
      this.itemToPush.checkItemChanges(this.itemToPush.$item, this.itemToPush.item);
    } else {
      this.itemToPush.$item.rows -= 4;
      push.restoreItems(); // restore to initial state the pushed items
    }
    push.destroy(); // destroy push instance
    // similar for GridsterPushResize and GridsterSwap
  }
}

Я включил Stackblitz здесь: https://stackblitz.com/edit/gridster-in-angular-di3ky5

Общий просмотр: https://gridster -in-angular-di3ky5.stackblitz.io .

...