[gelöst] FTUI3: ftui-grid – verschachtelte Grids über ftui-content-Bugfix-Vorschlag

[ToM_ToM]

Hallo setstate,

wenn ich ein ftui-grid über ftui-content in eine Kachel eines äußeren Grids lade (so wie in der Doku beschrieben), liegen alle Kacheln des inneren Grids übereinander an Position 0/0.

Ursache in grid.component.js:

• onConnected() ist zweimal definiert. Die zweite Definition überschreibt die erste, dadurch werden die Event-Listener nie registriert und das Grid rechnet nur einmal im Konstruktor.
• Beim Nachladen über ftui-content wird das Grid vor seinen Kacheln initialisiert. tile.col, tile.width usw. sind dann noch undefined, die Positionen werden NaN.

Meine Änderungen:

1. Die beiden onConnected() zusammengeführt (die zweite, untere Definition habe ich gelöscht):

Code Auswählen Erweitern

  onConnected() {
    if (this.responsive) {
      if (this.columns > 0 && this.rows > 0) {
        this.configResponsiveGrid2();
      }
      return;
    }
    if (this.resizeObserver) {
      this.resizeObserver.observe(document.body);
    } else if (this.resize) {
      window.addEventListener('resize', this.onWindowResize);
    }
    document.addEventListener('ftuiVisibilityChanged', this.onVisibilityChanged);
    document.addEventListener('ftuiComponentsAdded', this.onComponentsAdded);
  }

2. Neue Hilfsfunktion, die nur die eigenen Kacheln des Grids liefert (ohne die eines verschachtelten Grids):

Code Auswählen Erweitern

  getTiles() {
    return [...this.querySelectorAll('ftui-grid-tile, [data-grid-tile]')]
      .filter(tile => tile.parentElement && tile.parentElement.closest('ftui-grid') === this);
  }

3. configureGrid() sammelt die Kacheln jetzt bei jedem Aufruf neu ein und liest die Werte direkt aus den Attributen:

Code Auswählen Erweitern

  configureGrid() {
    let highestCol = -1;
    let highestRow = -1;
    let baseWidth = 0;
    let baseHeight = 0;
    let cols = 0;
    let rows = 0;

    this.tiles = this.getTiles();
    const attr = (tile, name) => Number(tile.getAttribute(name)) || 0;

    this.tiles.forEach(tile => {
      const colVal = attr(tile, 'col') + attr(tile, 'width') - 1;
      if (colVal > highestCol) { highestCol = colVal; }
      const rowVal = attr(tile, 'row') + attr(tile, 'height') - 1;
      if (rowVal > highestRow) { highestRow = rowVal; }
    });

    cols = (this.cols > 0) ? this.cols : highestCol;
    rows = (this.rows > 0) ? this.rows : highestRow;
    baseWidth = (this.baseWidth > 0) ? this.baseWidth : (this.clientWidth - this.margin) / cols;
    baseHeight = (this.baseHeight > 0) ? this.baseHeight : (this.clientHeight - this.margin) / rows;
    if (baseWidth < this.minX) {
      baseWidth = this.minX;
    }
    if (baseHeight < this.minY) {
      baseHeight = this.minY;
    }

    this.tiles.forEach(tile => {
      const col = attr(tile, 'col');
      const row = attr(tile, 'row');
      const width = attr(tile, 'width');
      const height = attr(tile, 'height');
      const style = tile.style;
      style.width = (width * baseWidth - this.margin) + 'px';
      style.height = (height * baseHeight - this.margin) + 'px';
      style['position'] = 'absolute';
      if (tile.querySelector('ftui-grid')) {
        style.backgroundColor = 'transparent';
        style.left = ((col - 1) * baseWidth) + 'px';
        style.top = ((row - 1) * baseHeight) + 'px';
      } else {
        style.left = ((col - 1) * baseWidth + this.margin) + 'px';
        style.top = ((row - 1) * baseHeight + this.margin) + 'px';
      }
    });
  }

Damit werden die verschachtelten Grids bei mir korrekt dargestellt.

Viele Grüße

Thomas

[setstate]

danke für die Info und den Fix. Genau das Thema habe ich gestern aber schon gefixt. Schau dir mal die letzte Version an und guck was noch nicht passt. Ich habe deine Sachen jetzt noch nicht näher angeschaut

[ToM_ToM]

Ah sorry, da hatte ich irgendwie parallel versucht, das bei mir zu fixen. 
Dein Update funktioniert bei mir - habe ich eben getestet.

Danke für die schnelle Antwort.