@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-grid/src/layout/grid_layout.ts

@@ -0,0 +1,299 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import { BaseLayout } from './base_layout';
+import type { Tile } from '../types/tile';
+import { DOMUtilities } from '../util/dom_utilities';
+import type { DataModel, ViewModel } from '../types/data_model';
+
+const SVGNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * we used to have two layouts, this one and a legacy layout for IE11.
+ * since we dropped that one we could merge this with the base layout
+ * class (not strictly necessary, but would be cleaner & easier to follow).
+ */
+export class GridLayout extends BaseLayout {
+
+  constructor(model: DataModel, view: ViewModel){
+    super(model, view);
+
+    // nodes always exist
+
+    // everything except the selection node and the mouse
+    // mask needs to get attached to a container, when it's
+    // available
+
+    this.column_header = DOMUtilities.CreateDiv('treb-top-header');
+    this.row_header = DOMUtilities.CreateDiv('treb-left-header');
+    
+    this.corner = DOMUtilities.CreateDiv('treb-corner');
+    this.corner_canvas = document.createElement('canvas');
+    this.corner.appendChild(this.corner_canvas);
+
+    this.contents = DOMUtilities.CreateDiv('treb-contents');
+    this.buffer_canvas = DOMUtilities.Create('canvas', 'treb-buffer-canvas', this.contents);
+
+    // selection node attached to contents
+    this.grid_selection = document.createElementNS(SVGNS, 'svg');
+    this.grid_selection.classList.add('treb-grid-selection');
+    this.contents.appendChild(this.grid_selection);
+
+    // selection node for frozen rows
+    this.row_header_selection = document.createElementNS(SVGNS, 'svg');
+    this.row_header_selection.classList.add('frozen-selection');
+    this.row_header_selection.classList.add('frozen-selection-rows');
+    this.column_header.appendChild(this.row_header_selection);
+    this.row_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
+
+    // ...columns
+    this.column_header_selection = document.createElementNS(SVGNS, 'svg');
+    this.column_header_selection.classList.add('frozen-selection');
+    this.column_header_selection.classList.add('frozen-selection-columns');
+    this.row_header.appendChild(this.column_header_selection);
+    this.column_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
+
+    // ...corner
+    this.corner_selection = document.createElementNS(SVGNS, 'svg');
+    this.corner_selection.classList.add('frozen-selection');
+    this.corner.appendChild(this.corner_selection);
+    this.corner_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-corner', this.corner);
+
+
+    this.annotation_container = DOMUtilities.CreateDiv('treb-annotation-container');
+
+    this.grid_cover = DOMUtilities.CreateDiv('tile-cover grid-cover');
+    this.column_header_cover = DOMUtilities.CreateDiv('tile-cover column-header-cover');
+    this.row_header_cover = DOMUtilities.CreateDiv('tile-cover row-header-cover');
+
+  }
+
+  /** attach node structure to container */
+  public InitializeInternal(container: HTMLElement, scroll_callback: () => void): void {
+
+    this.container = container;
+    // this.container.classList.add('treb-grid-layout');
+
+    this.scroll_reference_node = this.container;
+
+    container.appendChild(this.column_header);
+    container.appendChild(this.row_header);
+    container.appendChild(this.corner);
+    container.appendChild(this.contents);
+    container.appendChild(this.annotation_container);
+    container.appendChild(this.grid_cover);
+    container.appendChild(this.column_header_cover);
+    container.appendChild(this.row_header_cover);
+    container.appendChild(this.mock_selection);
+
+    this.container.addEventListener('scroll', () => scroll_callback());
+
+  }
+
+  public ResizeCursor(resize?: 'row'|'column'): void {
+    switch (resize) {
+    case 'row':
+      this.row_header_cover.classList.add('resize');
+      break;
+    case 'column':
+      this.column_header_cover.classList.add('resize');
+      break;
+    default:
+      this.row_header_cover.classList.remove('resize');
+      this.column_header_cover.classList.remove('resize');
+      break;
+    }
+  }
+
+  protected UpdateTileGridPosition(tile: Tile): void {
+    tile.style.gridColumn = `${tile.tile_position.column + 1} / ${tile.tile_position.column + 2}`;
+    tile.style.gridRow = `${tile.tile_position.row + 1} / ${tile.tile_position.row + 2}`;
+  }
+
+  protected UpdateContainingGrid(): void {
+    
+    if (!this.container) throw new Error('missing container');
+
+    this.header_size.width = this.header_offset.x;
+    this.header_size.height = this.header_offset.y;
+
+    // update the containing grid (layout for column/row headers)
+
+    let x = this.header_offset.x;
+    let y = this.header_offset.y;
+
+    if (this.view.active_sheet.freeze.columns) {
+      for (let i = 0; i < this.view.active_sheet.freeze.columns; i++) x += this.ColumnWidth(i);
+    }
+    if (this.view.active_sheet.freeze.rows) {
+      for (let i = 0; i < this.view.active_sheet.freeze.rows; i++) y += this.RowHeight(i);
+    }
+
+    // this.container.style.gridTemplateColumns = `${x}px auto`;
+    // this.container.style.gridTemplateRows = `${y}px auto`;
+    this.container.style.gridTemplateColumns = `${this.header_offset.x}px auto`;
+    this.container.style.gridTemplateRows = `${this.header_offset.y}px auto`;
+
+    this.corner_canvas.setAttribute('width', `${this.dpr * x}`);
+    this.corner_canvas.setAttribute('height', `${this.dpr * y}`);
+
+    this.column_header.style.height = `${y}px`;
+
+    this.corner_canvas.style.width = `${x}px`;
+    this.corner_canvas.style.height = `${y}px`;
+
+  }
+
+  protected UpdateGridTemplates(columns = true, rows = true): void {
+
+    let width = 0;
+    let height = 0;
+
+    // update grids
+
+    this.column_header.style.gridTemplateColumns =
+    this.contents.style.gridTemplateColumns =
+      this.column_header_tiles.map((tile) => {
+        width += tile.logical_size.width;
+        return `${tile.logical_size.width}px`;
+      }).join(' ');
+
+    this.column_header.style.gridTemplateRows = `${this.header_offset.y}px auto`;
+
+    this.row_header.style.gridTemplateRows =
+    this.contents.style.gridTemplateRows =
+      this.row_header_tiles.map((tile) => {
+        height += tile.logical_size.height;
+        return `${tile.logical_size.height}px`;
+      }).join(' ');
+
+    // frozen selection -- now used for selection highlights
+    // as well (moved from render headers)
+
+    let y = this.header_offset.y;
+    if (this.view.active_sheet.freeze.rows) {
+      // let y = 0;
+      for (let i = 0; i < this.view.active_sheet.freeze.rows; i++) {
+        y += this.RowHeight(i);
+      }
+    }
+
+    this.column_header.style.height = `${y}px`;
+
+    this.row_header_selection.style.display = 'block';
+    this.row_header_selection.style.width = `${width}px`;
+    this.corner_selection.style.height =
+      this.row_header_selection.style.height = `${y}px`;
+    this.corner_selection.style.top =
+      this.row_header_selection.style.top = '0px'; 
+    this.row_header_selection.style.left = `0px`;
+
+    let x = this.header_offset.x;
+    if (this.view.active_sheet.freeze.columns) {
+      for (let i = 0; i < this.view.active_sheet.freeze.columns; i++) {
+        x += this.ColumnWidth(i);
+      }
+    }
+    this.column_header_selection.style.display = 'block';
+    this.corner_selection.style.width =
+      this.column_header_selection.style.width = `${x}px`;
+    this.column_header_selection.style.height = `${height}px`;
+    this.column_header_selection.style.top = `0px`;
+    this.corner_selection.style.left =
+      this.column_header_selection.style.left = '0px'; // `${this.model.sheet.header_offset.x}px`;
+
+    // --
+
+    const scaled_header = {
+      x: this.view.active_sheet.header_offset.x * this.scale,
+      y: this.view.active_sheet.header_offset.y * this.scale,
+    };
+
+    const freeze = this.view.active_sheet.freeze;
+    
+    if (freeze.rows && freeze.columns) {
+      this.row_header_annotations.style.display = 'block';
+      this.column_header_annotations.style.display = 'block';
+      this.corner_annotations.style.display = 'block';
+    }
+    else if (freeze.rows) {
+      this.row_header_annotations.style.display = 'block';
+      this.column_header_annotations.style.display = 'none';
+      this.corner_annotations.style.display = 'none';
+    }
+    else if (freeze.columns) {
+      this.row_header_annotations.style.display = 'none';
+      this.column_header_annotations.style.display = 'block';
+      this.corner_annotations.style.display = 'none';
+    }
+    else {
+      this.row_header_annotations.style.display = 'none';
+      this.column_header_annotations.style.display = 'none';
+      this.corner_annotations.style.display = 'none';
+    }
+
+    this.row_header_annotations.style.width = `${width}px`;
+    this.corner_annotations.style.height = 
+      this.row_header_annotations.style.height = `${y - scaled_header.y}px`;
+    this.corner_annotations.style.top = 
+      this.row_header_annotations.style.top = `${scaled_header.y}px`;
+
+    this.column_header_annotations.style.width =
+      this.corner_annotations.style.width = `${x - scaled_header.x}px`;
+    this.column_header_annotations.style.height = `${height}px`;
+    this.corner_annotations.style.left = 
+      this.column_header_annotations.style.left = `${scaled_header.x}px`;
+
+    /*
+    // dev
+    this.column_header_annotations.style.background = `rgba(255, 0, 0, .2)`;
+    this.row_header_annotations.style.background = `rgba(255, 0, 0, .2)`;
+    this.corner_annotations.style.background = `rgba(0, 255, 0, .2)`;
+    */
+
+    this.corner_selection.style.display = 'block';
+
+    /*
+    if (this.model.sheet.freeze.rows && this.model.sheet.freeze.columns) {
+      this.frozen_corner_selection.style.display = 'block';
+    }
+    else {
+      this.frozen_corner_selection.style.display = 'none';
+    }
+    */
+
+    // main selection
+
+    this.grid_selection.style.width = `${width}px`;
+    this.grid_selection.style.height = `${height}px`;
+    this.grid_selection.style.top = `${this.header_offset.y}px`;
+    this.grid_selection.style.left = `${this.header_offset.x}px`;
+
+    // annotations
+
+    this.annotation_container.style.width = `${width}px`;
+    this.annotation_container.style.height = `${height}px`;
+    this.annotation_container.style.top = `${this.header_offset.y}px`;
+    this.annotation_container.style.left = `${this.header_offset.x}px`;
+
+  }
+
+}

package/treb-grid/src/layout/rectangle_cache.ts

@@ -0,0 +1,86 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import type { Rectangle } from 'treb-base-types';
+
+/**
+ * FIXME: efficiency of using sparse arrays here?
+ *
+ * (vs what, a lookup table? sparse arrays are basically a lookup
+ * table, and we can assume they're reasonably efficient)
+ */
+/*export*/ class RectangleCache {
+
+  private cache: Rectangle[][] = [];
+
+  /*
+
+  private hits = 0;
+  private misses = 0;
+
+  public Stats(){
+    return {
+      hits: this.hits,
+      misses: this.misses,
+      hit_rate: (this.hits + this.misses) ? this.hits / (this.hits + this.misses) : 0,
+    };
+  }
+
+  */
+
+  /** flush cache */
+  public Clear(){
+    this.cache = [];
+  }
+
+  /**
+   * cache lookup.
+   * FIXME: why row/column and not address type?
+   */
+  public Get(column: number, row: number): Rectangle|undefined {
+
+    if (!this.cache[column]) return undefined;
+    const rect = this.cache[column][row];
+    return rect ? rect.Shift(0, 0) : undefined;
+
+    /*
+    if (this.cache[column]) {
+      const rect = this.cache[column][row];
+      if (rect) {
+        this.hits++;
+        return rect.Shift(0, 0);
+      }
+    }
+    this.misses++;
+    return undefined;
+    */
+  }
+
+  /**
+   * cache set.
+   * FIXME: why row/column and not address type?
+   */
+  public Set(column: number, row: number, rect: Rectangle) {
+    if (!this.cache[column]) this.cache[column] = [];
+    this.cache[column][row] = rect.Shift(0, 0); // clone
+  }
+
+}