@eclipse-scout/core/src/desktop/outline/overview/TileOutlineOverview.ts

Eclipse Scout runtime

/*
 * Copyright (c) 2010, 2025 BSI Business Systems Integration AG
 *
 * This program and the accompanying materials are made
 * available under the terms of the Eclipse Public License 2.0
 * which is available at https://www.eclipse.org/legal/epl-2.0/
 *
 * SPDX-License-Identifier: EPL-2.0
 */
import {
  aria, Desktop, EventHandler, HtmlComponent, InitModelOf, OutlineOverview, Page, PageTileGrid, PropertyChangeEvent, RowLayout, scout, TileOutlineOverviewEventMap, TileOutlineOverviewModel, TreeNodesDeletedEvent, TreeNodesInsertedEvent
} from '../../../index';

export class TileOutlineOverview extends OutlineOverview implements TileOutlineOverviewModel {
  declare model: TileOutlineOverviewModel;
  declare eventMap: TileOutlineOverviewEventMap;
  declare self: TileOutlineOverview;

  pageTileGrid: PageTileGrid;
  scrollable: boolean;
  titleVisible: boolean;
  contentHtmlComp: HtmlComponent;
  $title: JQuery;
  protected _desktopNavigationVisibilityChangeHandler: EventHandler<PropertyChangeEvent<boolean, Desktop>>;
  protected _outlineNodesInsertedHandler: EventHandler<TreeNodesInsertedEvent>;
  protected _outlineNodesDeletedHandler: EventHandler<TreeNodesDeletedEvent>;

  constructor() {
    super();
    this.pageTileGrid = null;
    this.scrollable = true;
    this.titleVisible = true;
    this._addWidgetProperties(['pageTileGrid']);
    this._desktopNavigationVisibilityChangeHandler = this._onDesktopNavigationVisibilityChange.bind(this);
    this._outlineNodesInsertedHandler = this._onOutlineNodesInserted.bind(this);
    this._outlineNodesDeletedHandler = this._onOutlineNodesDeleted.bind(this);
  }

  protected override _init(model: InitModelOf<this>) {
    super._init(model);
    this.pageTileGrid = this._createPageTileGrid();
    if (this.outline.compact) {
      this.outline.on('nodesDeleted', this._outlineNodesDeletedHandler);
      this.outline.on('nodesInserted', this._outlineNodesInsertedHandler);
    }
    this.scrollable = !this.outline.compact;
    this.addCssClass('dimmed-background');
  }

  protected override _destroy() {
    if (this.outline.compact) {
      this.outline.off('nodesDeleted', this._outlineNodesDeletedHandler);
      this.outline.off('nodesInserted', this._outlineNodesInsertedHandler);
    }
    super._destroy();
  }

  protected override _render() {
    this.$container = this.$parent.appendDiv('tile-overview');
    this.htmlComp = HtmlComponent.install(this.$container, this.session);
    this.htmlComp.setLayout(new RowLayout({stretch: this.outline.compact}));
    this.$content = this.$container.appendDiv('tile-overview-content');
    this.contentHtmlComp = HtmlComponent.install(this.$content, this.session);
    this.contentHtmlComp.setLayout(new RowLayout({stretch: this.outline.compact}));
    this.$title = this.$content.appendDiv('tile-overview-title').text(this.outline.title);
    HtmlComponent.install(this.$title, this.session);
    this.$title.cssMaxHeight(this.$title.cssHeight());
    this._updateTitle(false);
    this.findDesktop().on('propertyChange:navigationVisible', this._desktopNavigationVisibilityChangeHandler);
  }

  protected override _remove() {
    super._remove();
    this.findDesktop().off('propertyChange:navigationVisible', this._desktopNavigationVisibilityChangeHandler);
  }

  protected override _renderProperties() {
    super._renderProperties();
    this._renderPageTileGrid();
    this._renderScrollable();
  }

  protected setPageTileGrid(pageTileGrid: PageTileGrid) {
    this.setProperty('pageTileGrid', pageTileGrid);
  }

  protected _renderPageTileGrid() {
    this.pageTileGrid.render(this.$content);
  }

  protected _createPageTileGrid(): PageTileGrid {
    let page: Page;
    let nodes: Page[];
    if (this.outline.compact) {
      page = this.outline.compactRootNode();
      if (page) {
        nodes = page.childNodes;
      }
    }
    return scout.create(PageTileGrid, {
      parent: this,
      outline: this.outline,
      compact: this.outline.compact,
      page: page,
      nodes: nodes
    });
  }

  setScrollable(scrollable: boolean) {
    this.setProperty('scrollable', scrollable);
  }

  protected _renderScrollable() {
    if (this.scrollable) {
      this._installScrollbars({
        axis: 'y'
      });
    } else {
      this._uninstallScrollbars();
    }
  }

  protected _updateTitle(animated = true) {
    if (!this.$title) {
      return;
    }
    this.$title.toggleClass('animated', animated);
    this.$title.toggleClass('removed', this.findDesktop().navigationVisible);
    // hide title here if it is already rendered in navigation
    aria.hidden(this.$title, this.findDesktop().navigationVisible ? true : null);
  }

  protected _onDesktopNavigationVisibilityChange(event: PropertyChangeEvent<boolean, Desktop>) {
    this._updateTitle();
  }

  protected _onOutlineNodesInserted(event: TreeNodesInsertedEvent) {
    if (this.pageTileGrid) {
      // If there is already a page tile grid, it will handle the insertion itself
      return;
    }
    this.setPageTileGrid(this._createPageTileGrid());
  }

  protected _onOutlineNodesDeleted(event: TreeNodesDeletedEvent) {
    // If outline is compact, the root page is passed to the page tile grid.
    // If the root page is deleted, the grid needs to be recreated
    // If outline is not compact, the grid itself takes care of page removals / insertions
    const deletedNodes = event.nodes;
    if (this.pageTileGrid && deletedNodes.length === 1 && this.pageTileGrid.page === deletedNodes[0]) {
      this.setPageTileGrid(null);
    }
  }
}