@trebco/treb 27.7.6 → 27.9.0

package/treb-grid/src/types/sheet.ts

@@ -42,6 +42,7 @@ import type { SerializeOptions } from './serialize_options';
 import type { GridSelection } from './grid_selection';
 import { CreateSelection } from './grid_selection';
 import { Annotation } from './annotation';
+import type { ConditionalFormatList } from './conditional_format';
 
 // --- constants --------------------------------------------------------------
 
@@ -147,10 +148,21 @@ export class Sheet {
 
   protected _image: HTMLImageElement|undefined = undefined;
 
+  /**
+   * set this flag when we need to update conditional formats even
+   * if they are not dirty (generally when one is deleted)
+   */
+  public flush_conditional_formats = false;
+
   public get image(): HTMLImageElement|undefined {
     return this._image;
   }
 
+  /**
+   * @internal
+   */
+  public conditional_formats: ConditionalFormatList = [];
+
   /**
    * @internal
    * 
@@ -228,6 +240,21 @@ export class Sheet {
 
   private cell_style: CellStyle[][] = [];
 
+  /**
+   * applied conditional formats are stored them in this array;
+   * they will be stacked on top of cell style when rendering.
+   * conditional formats have top priority. [FIXME: what about tables?]
+   */
+  private conditional_format_cache: CellStyle[][][] = [];
+
+  /**
+   * this is a list of cells we formatted on the last pass, so we can 
+   * compare when applying conditional formats .
+   * 
+   * update: using areas
+   */
+  private conditional_format_checklist: IArea[] = [];
+
   // --- accessors ------------------------------------------------------------
 
   // public get column_header_count() { return this.column_header_count_; }
@@ -352,6 +379,10 @@ export class Sheet {
       sheet.default_row_height = source.default_row_height;
     }
 
+    if (source.conditional_formats) {
+      sheet.conditional_formats = source.conditional_formats;
+    }
+
     // persist ID, name
 
     if (source.id) {
@@ -1010,7 +1041,7 @@ export class Sheet {
 
     // testing
     // const underlying = this.CompositeStyleForCell(address, false);
-    const underlying = this.CompositeStyleForCell(address, false, false);
+    const underlying = this.CompositeStyleForCell(address, false, false, undefined, false);
 
     const merged = Style.Composite([
       this.default_style_properties,
@@ -1048,7 +1079,8 @@ export class Sheet {
     this.cell_style[column][row] = composite; // merged;
 
     // targeted flush
-    this.CellData(address).FlushStyle();
+    // this.CellData(address).FlushStyle();
+    this.BleedFlush({start: address, end: address});
 
   }
 
@@ -1332,7 +1364,7 @@ export class Sheet {
    * @param address 
    */
   public GetCopyStyle(address: ICellAddress): CellStyle {
-    return this.CompositeStyleForCell(address, true, false);
+    return this.CompositeStyleForCell(address, true, false, undefined, false);
   }
 
   /**
@@ -2069,6 +2101,8 @@ export class Sheet {
    * this is a new GetCellStyle function, used for external access
    * to style (for API access). there was an old GetCellStyle function
    * for rendering, but that's been removed (control+F for info).
+   * 
+   * Q: does this include conditional formatting? (...)
    */
   public GetCellStyle(area: ICellAddress|IArea, apply_theme = false): CellStyle|CellStyle[][] {
 
@@ -2558,6 +2592,13 @@ export class Sheet {
 
     const cell_styles = this.CompressCellStyles(cell_reference_map);
 
+    // if we serialize this when it has Area values (instead of IArea) it
+    // will export incorrectly. is that an issue anywhere else? (...)
+
+    const conditional_formats = this.conditional_formats.length ? 
+      JSON.parse(JSON.stringify(this.conditional_formats.map(format => ({...format, internal: undefined })))) : 
+      undefined;
+
     const result: SerializedSheet = {
 
       // not used atm, but in the event we need to gate
@@ -2580,6 +2621,8 @@ export class Sheet {
       row_style,
       column_style,
 
+      conditional_formats,
+
       row_pattern: row_pattern.length ? row_pattern : undefined,
 
       // why are these serialized? (...) export!
@@ -2763,6 +2806,10 @@ export class Sheet {
       this.annotations.push(new Annotation(annotation));
     }
 
+    for (const format of data.conditional_formats || []) {
+      this.conditional_formats.push(format);
+    }
+
     if (data.hidden) {
       this.visible = false;
     }
@@ -2976,28 +3023,6 @@ export class Sheet {
 
   }
 
-  /* *
-   * styles are applied as a stack, 
-   * 
-   * sheet
-   * row pattern
-   * row
-   * column
-   * cell
-   * 
-   * there are some cases where we wind up with overridden but matching
-   * styles that are duplicative. they can be removed, although it's not 
-   * necessarily useful to do it in real time -- we can do it on load/save
-   * or perhaps on idle.
-   * 
-   * /
-  private FlattenStyles() {
-
-    this.CompositeStyleForCell
-
-  }
-  */
-
   /**
    * updates column properties. reverse-overrides cells (@see UpdateSheetStyle).
    */
@@ -3049,6 +3074,276 @@ export class Sheet {
 
   }
 
+  /* *
+   * flush the cache and the checklist. flush cell styles at the same
+   * time. this should be called when adding/removing a conditional format.
+   * optionally apply active formats again.
+   * 
+   * is this actually necessary? what's the use case? (...)
+   * 
+   * /
+  public FlushConditionalFormats(reapply = false) {
+
+    for (const [row, column] of this.conditional_format_checklist) {
+      this.CellData({row, column}).FlushStyle();
+    }
+
+    this.conditional_format_checklist = [];
+    this.conditional_format_cache = [];
+
+    if (reapply) {
+      this.ApplyConditionalFormats();
+    }
+
+  }
+  */
+
+  public BleedFlush(area: IArea) {
+
+    let rows = [Math.max(0, area.start.row - 1), area.end.row + 1];
+    let cols = [Math.max(0, area.start.column - 1), area.end.column + 1];
+
+    for (let row = rows[0]; row <= rows[1]; row++) {
+      for (let column = cols[0]; column <= cols[1]; column++) {
+        // const cell = this.cells.EnsureCell({row, column});
+        this.cells.GetCell({row, column}, false)?.FlushStyle();
+      }
+    }
+    
+  }
+
+  public FlushConditionalFormats() {
+    this.flush_conditional_formats = true;
+  }
+
+  /**
+   * this version combines flushing the cache with building it, using
+   * the application flag in the format objects. 
+   * 
+   * this function was set up to support comparing the two lists and
+   * only flushing style if necessary; but that turns out to be so 
+   * much additional work that I'm not sure it's preferable to just 
+   * repaint. need to test.
+   * 
+   * ...we're also probably looping unecessarily. since we're using
+   * those leaf nodes we can probably check if the state changed, and
+   * it not, skip the loop pass. I think we'd need to identify or map
+   * the applications though (meaning use a stack that matches the list
+   * of formats). or you could even recheck everything if one of them 
+   * changed, you'd still probably save a lot in cases where nothing
+   * changed.
+   * 
+   */
+  public ApplyConditionalFormats() {
+
+    // we're not doing any pruning at the moment, so this is doing
+    // a lot of unecessary looping -- we could start with one big
+    // global check
+
+    // ...we need to account for the case where a format is removed,
+    // in that case we will need to update. flag?
+
+    let updated = this.flush_conditional_formats; // maybe required
+
+    for (const format of this.conditional_formats) {
+      if (format.internal?.vertex?.updated) {
+        updated = true;
+        break;
+      }
+    }
+
+    if (!updated) {
+
+      // console.info('no updates');
+
+      // that should save 90% of the calculation, we'll still do 
+      // unecessary work but it's a step in the right direction.
+
+      // note that this flag doesn't necessarily indicate anything
+      // has changed -- it will get set if you do a global recalc,
+      // because that marks everything as dirty. still a good step
+      // though.
+
+      return;
+    }
+
+    this.flush_conditional_formats = false; // unset
+
+    const temp: CellStyle[][][] = [];
+    const checklist: IArea[] = [...this.conditional_format_checklist];
+
+    this.conditional_format_checklist = []; // flush
+
+    for (const format of this.conditional_formats) {
+
+      if (format.internal?.vertex?.updated) {
+
+        // console.info('updated');
+
+        format.internal.vertex.updated = false;
+      }
+
+      // NOTE: if you go backwards, then you can short-circuit if a format 
+      // is already set. except then if you want to support "stop" rules, 
+      // that won't work. 
+      //
+      // although you might still want to go backwards as it's easier to 
+      // apply stop rules in reverse (why? because if you are going backwards,
+      // you can just drop everything on the stack when you see a 
+      // stop rule. if you go forwards, you need some sort of indicator 
+      // or flag).
+
+      if (format.type === 'gradient') {
+        const area = JSON.parse(JSON.stringify(format.area));
+        const result = format.internal?.vertex?.result;
+
+        if (result && format.internal?.gradient) {
+          const property: 'fill'|'text' = format.property ?? 'fill';
+
+          if (result.type === ValueType.array) {
+            for (let row = area.start.row; row <= area.end.row; row++) {
+              for (let column = area.start.column; column <= area.end.column; column++) {
+                const value = result.value[column - area.start.column][row - area.start.row];
+                if (value.type === ValueType.number) {
+                  if (!temp[row]) { temp[row] = []; }
+                  if (!temp[row][column] ) { temp[row][column] = []; }
+                  const color = format.internal.gradient.Interpolate(value.value);
+                  temp[row][column].push({ [property]: color});
+                }
+              }
+            }
+          }
+          else if (result.type === ValueType.number) {
+            const color = format.internal.gradient.Interpolate(result.value);
+            for (let row = area.start.row; row <= area.end.row; row++) {
+              if (!temp[row]) { temp[row] = []; }
+              for (let column = area.start.column; column <= area.end.column; column++) {
+                if (!temp[row][column] ) { temp[row][column] = []; }
+                temp[row][column].push({ [property]: color});
+              }
+            }
+          }
+
+          checklist.push(area);
+          this.conditional_format_checklist.push(area);
+
+        }
+      }
+      else {
+
+        // handle types expression, cell-match and duplicate-values
+
+        const area = JSON.parse(JSON.stringify(format.area));
+        const result = format.internal?.vertex?.result;
+
+        if (result) {
+
+          if (result.type === ValueType.array) {
+            for (let row = area.start.row; row <= area.end.row; row++) {
+              for (let column = area.start.column; column <= area.end.column; column++) {
+                const value = result.value[column - area.start.column][row - area.start.row];
+                if ((value.type === ValueType.boolean || value.type === ValueType.number) && !!value.value) {
+                  if (!temp[row]) { temp[row] = []; }
+                  if (!temp[row][column] ) { temp[row][column] = []; }
+                  temp[row][column].push(format.style);
+                }
+              }
+            }
+          }
+          else {
+            if (result.type === ValueType.boolean || result.type === ValueType.number) {
+              if(!!result.value) {
+                for (let row = area.start.row; row <= area.end.row; row++) {
+                  if (!temp[row]) { temp[row] = []; }
+                  for (let column = area.start.column; column <= area.end.column; column++) {
+                      if (!temp[row][column] ) { temp[row][column] = []; }
+                      temp[row][column].push(format.style);
+                  }
+                }
+              }
+            }
+          }
+  
+          checklist.push(area);
+          this.conditional_format_checklist.push(area);
+ 
+        }
+
+      }
+   
+    }
+
+    for (const area of checklist) {
+      this.BleedFlush(area);
+    }
+
+    this.conditional_format_cache = temp;
+
+  }
+
+  /*
+  public ApplyConditionalFormats() {
+
+    this.FlushConditionalFormatCache();
+
+    for (const entry of this.conditional_formats) {
+
+      console.info({entry});
+
+      if (entry.applied) {
+        this.ApplyConditionalFormatCache(entry);
+      }
+    }
+
+  }
+
+  public FlushConditionalFormatCache() {
+
+    // FIXME: need to flush any styles that are set, unless they match;
+    // perhaps we should use an alternate cache so we can compare? TODO/FIXME
+
+    for (const [row, row_data] of this.conditional_format_cache.entries()) {
+      if (row_data) {
+        for (const [column, column_data] of row_data.entries()) {
+          if (column_data) {
+
+            this.CellData({row, column}).FlushStyle();
+
+          }
+        }
+      }
+    }
+
+    this.conditional_format_cache = [];
+
+  }
+
+  public ApplyConditionalFormatCache(format: ConditionalFormat) {
+    
+    for (let row = format.area.start.row; row <= format.area.end.row; row++ ) {
+      for (let column = format.area.start.column; column <= format.area.end.column; column++ ) {
+        if (!this.conditional_format_cache[row]) {
+          this.conditional_format_cache[row] = [];
+        }
+        if (!this.conditional_format_cache[row][column]) {
+          this.conditional_format_cache[row][column] = [];
+        }
+        this.conditional_format_cache[row][column].push(format.style);
+        this.CellData({row, column}).FlushStyle();
+
+      }
+    }
+
+  }
+  */
+
+  private ConditionalFormatForCell(address: ICellAddress): CellStyle[] {
+    if (this.conditional_format_cache[address.row]) {
+      return this.conditional_format_cache[address.row][address.column] || [];
+    }
+    return [];
+  }
+
   /**
    * generates the composite style for the given cell. this
    * should only be used to generate a cache of styles (Q: really? PERF?)
@@ -3057,7 +3352,12 @@ export class Sheet {
    * want to check what happens if the cell style is not applied; if nothing 
    * happens, then we can drop the cell style (or the property in the style).
    */
-  private CompositeStyleForCell(address: ICellAddress, apply_cell_style = true, apply_row_pattern = true, apply_default = true) {
+  private CompositeStyleForCell(
+        address: ICellAddress, 
+        apply_cell_style = true, 
+        apply_row_pattern = true, 
+        apply_default = true,
+        apply_conditional = true, ) {
 
     const { row, column } = address;
     const stack: CellStyle[] = [];
@@ -3085,6 +3385,10 @@ export class Sheet {
       stack.push(this.cell_style[column][row]);
     }
 
+    if (apply_conditional) {
+      stack.push(...this.ConditionalFormatForCell(address));
+    }
+
     return Style.Composite(stack);
   }
 

package/treb-grid/src/types/sheet_types.ts

@@ -22,6 +22,7 @@
 import type { IArea, SerializedCellData, Style, CellStyle } from 'treb-base-types';
 import type { Annotation, AnnotationData } from './annotation';
 import type { GridSelection, SerializedGridSelection } from './grid_selection';
+import type { ConditionalFormatList } from './conditional_format';
 
 export interface UpdateHints {
   data?: boolean;
@@ -68,6 +69,9 @@ export interface SerializedSheet {
    */
   cell_styles: CellStyleRecord[]; // Array<{row: number; column: number; ref: number, rows?: number}>;
 
+  /** @internal */
+  conditional_formats?: ConditionalFormatList;
+
   /** 
    * @deprecated use `styles` instead
    */