@trebco/treb 27.7.6 → 27.11.1

package/treb-embed/src/embedded-spreadsheet.ts

@@ -32,33 +32,47 @@ import type {
   AnnotationViewData,
   AnnotationType, 
   ExternalEditorConfig,
+  ConditionalFormatDuplicateValuesOptions,
+  ConditionalFormatDuplicateValues,
+  ConditionalFormatGradientOptions,
+  ConditionalFormat, 
+  ConditionalFormatGradient, 
+  ConditionalFormatExpression,
+  StandardGradient,
+  CondifionalFormatExpressionOptions,
+  ConditionalFormatCellMatchOptions,
+  ConditionalFormatCellMatch,
 } from 'treb-grid';
 
 import {
-  DataModel, Grid, BorderConstants, Sheet, ErrorCode, UA
+  DataModel, Grid, BorderConstants, Sheet, ErrorCode, UA,
+  StandardGradientsList,
 } from 'treb-grid';
 
 import { 
   Parser, DecimalMarkType, 
   ArgumentSeparatorType, QuotedSheetNameRegex } from 'treb-parser';
 
-import { Calculator, type EvaluateOptions, type LeafVertex } from 'treb-calculator';
+import { Calculator, type LeafVertex } from 'treb-calculator';
 
 import type {
   ICellAddress, 
+  EvaluateOptions,
   IArea, CellValue, Point,
   Complex, ExtendedUnion, IRectangle,
-  AddressReference, RangeReference, TableSortOptions, Table, TableTheme,
+  AddressReference, RangeReference, TableSortOptions, Table, TableTheme, GradientStop,
 } from 'treb-base-types';
 
 import {
   IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, type CellStyle,
-  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, 
+  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, ValueType, DOMUtilities, 
 } from 'treb-base-types';
 
 import { EventSource, Yield, ValidateURI } from 'treb-utils';
 import { NumberFormatCache, ValueParser, NumberFormat } from 'treb-format';
 
+
+
 // --- local -------------------------------------------------------------------
 
 import { Dialog, DialogType } from './progress-dialog';
@@ -81,6 +95,7 @@ import type { SetRangeOptions } from 'treb-grid';
  * the script so we can run it as a worker.
  */
 import * as export_worker_script from 'worker:../../treb-export/src/export-worker/index.worker';
+import { StateLeafVertex } from 'treb-calculator/src/dag/state_leaf_vertex';
 
 // --- types -------------------------------------------------------------------
 
@@ -1251,6 +1266,265 @@ export class EmbeddedSpreadsheet {
 
   }
 
+  //////////////////////////////////////////////////////////////////////////////
+  //
+  // conditional formatting API (WIP)
+  //
+
+  /**
+   * list conditional formats. uses the active sheet by default, or pass a 
+   * sheet name or id.
+   * 
+   * @internal
+   */
+  public ListConditionalFormats(sheet?: number|string) {
+
+    const target = (typeof sheet === 'undefined') ? 
+      this.grid.active_sheet :
+      this.model.sheets.Find(sheet);
+
+    return target?.conditional_formats || [];
+      
+  }
+
+  /** @internal */
+  public ConditionalFormatDuplicateValues(range: RangeReference|undefined, options: ConditionalFormatDuplicateValuesOptions): ConditionalFormat {
+       
+    if (range === undefined) {
+      const ref = this.GetSelectionReference();
+      if (ref.empty) {
+        throw new Error('invalid range (no selection)');
+      }
+      range = ref.area;
+    }
+    
+    return this.AddConditionalFormat({
+        type: 'duplicate-values',
+        area: this.model.ResolveArea(range, this.grid.active_sheet),
+        ...options,
+      });
+
+  }
+
+  /**
+   * @internal
+   */
+  public ConditionalFormatGradient(range: RangeReference|undefined, options: ConditionalFormatGradientOptions|StandardGradient): ConditionalFormat {
+
+    if (range === undefined) {
+      const ref = this.GetSelectionReference();
+      if (ref.empty) {
+        throw new Error('invalid range (no selection)');
+      }
+      range = ref.area;
+    }
+    
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+
+    const format: ConditionalFormatGradient = (typeof options === 'object') ?
+      {
+        type: 'gradient', area, ...options,
+      } :
+      {
+        type: 'gradient', area, ...StandardGradientsList[options]
+      };
+
+    this.AddConditionalFormat(format);
+    return format;
+
+  }
+
+  /** @internal */
+  public ConditionalFormatCellMatch(range: RangeReference|undefined, options: ConditionalFormatCellMatchOptions): ConditionalFormat {
+
+    if (range === undefined) {
+      const ref = this.GetSelectionReference();
+      if (ref.empty) {
+        throw new Error('invalid range (no selection)');
+      }
+      range = ref.area;
+    }
+    
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+
+    const format: ConditionalFormatCellMatch = {
+      type: 'cell-match',
+      area,
+      ...options,
+    };
+
+    // we need to calculate the formula once, to get an initial state
+    // update: internal
+    // let result = this.Evaluate(this.Unresolve(area, true, false) + ' ' + options.expression, options.options);
+
+    // ... apply ...
+
+    this.AddConditionalFormat(format);
+    return format;
+
+
+  }
+
+  /**
+   * @internal
+   */
+  public ConditionalFormatExpression(range: RangeReference|undefined, options: CondifionalFormatExpressionOptions): ConditionalFormat {
+
+    if (range === undefined) {
+      const ref = this.GetSelectionReference();
+      if (ref.empty) {
+        throw new Error('invalid range (no selection)');
+      }
+      range = ref.area;
+    }
+    
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+
+    const format: ConditionalFormatExpression = {
+      type: 'expression',
+      area,
+      ...options,
+    };
+
+    /*
+    // we need to calculate the formula once, to get an initial state
+    let result = this.Evaluate(options.expression, options.options);
+
+    if (Array.isArray(result)) {
+      result = result[0][0];
+    }
+    const applied = !!result;
+    
+    this.AddConditionalFormat({...format, applied });
+    */
+
+    this.AddConditionalFormat(format);
+
+    return format;
+
+  }
+
+  /**
+   * add a conditional format
+   * 
+   * @internal
+   */
+  public AddConditionalFormat(format: ConditionalFormat) {
+
+    const sheet = this.model.sheets.Find(format.area.start.sheet_id||0);
+    
+    if (!sheet) {
+      throw new Error('invalid reference in format');
+    }
+
+    sheet.conditional_formats.push(format);
+
+    this.calculator.UpdateConditionals(format, sheet);
+
+    // call update if it's the current sheet
+    this.ApplyConditionalFormats(sheet, sheet === this.grid.active_sheet);
+
+    this.PushUndo();
+
+    // fluent
+    return format;
+
+  }
+
+  /**
+   * remove conditional format
+   * 
+   * @internal
+   */
+  public RemoveConditionalFormat(format: ConditionalFormat) {
+    const area = format.area;
+    const sheet = area.start.sheet_id ? this.model.sheets.Find(area.start.sheet_id) : this.grid.active_sheet;
+
+    if (!sheet) {
+      throw new Error('invalid reference in format');
+    }
+
+    let count = 0;
+    sheet.conditional_formats = sheet.conditional_formats.filter(test => {
+      if (test === format) {
+        count++;
+        this.calculator.RemoveConditional(test);
+        return false;
+      }
+      return true;
+    });
+
+    if (count) {
+      sheet.FlushConditionalFormats();
+    }
+
+    // we want to call update if it's the current sheet,
+    // but we want a full repaint
+
+    this.ApplyConditionalFormats(sheet, false);
+
+    if (sheet === this.grid.active_sheet) {
+      this.grid.Update(true);
+    }
+
+    if (count) {
+      this.PushUndo();
+    }
+
+  }
+
+  /**
+   * clear conditional formats from the target range (or currently selected
+   * range). we operate on format objects, meaning we'll remove the whole
+   * format object rather than clip the area.
+   * 
+   * @internal
+   */
+  public RemoveConditionalFormats(range?: RangeReference) {
+
+    if (range === undefined) {
+      const ref = this.GetSelectionReference();
+      if (ref.empty) {
+        throw new Error('invalid range (no selection)');
+      }
+      range = ref.area;
+    }
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+    const sheet = area.start.sheet_id ? this.model.sheets.Find(area.start.sheet_id) : this.grid.active_sheet;
+
+    if (sheet) {
+      let count = 0;
+
+      sheet.conditional_formats = sheet.conditional_formats.filter(test => {
+        const compare = new Area(test.area.start, test.area.end);
+        if (compare.Intersects(area)) {
+          count++;
+          this.calculator.RemoveConditional(test);
+          return false;
+        }
+        return true;
+      });
+
+      if (count) {
+
+        sheet.FlushConditionalFormats();
+
+        this.ApplyConditionalFormats(sheet, false);
+    
+        if (sheet === this.grid.active_sheet) {
+          this.grid.Update(true);
+        }
+
+        this.PushUndo();
+      }
+
+    }
+
+
+  }
+
+  //////////////////////////////////////////////////////////////////////////////
+
   /**
    * @internal
    */
@@ -1794,6 +2068,19 @@ export class EmbeddedSpreadsheet {
 
     this.UpdateDocumentStyles();
 
+    // we need to flush conditional formats that use theme colors
+    // (I guess we're just flushing everybody?)
+
+    for (const sheet of this.model.sheets.list) {
+      for (const format of sheet.conditional_formats) {
+        format.internal = undefined;
+      }
+    }
+
+    this.calculator.UpdateConditionals();
+    this.ApplyConditionalFormats(this.grid.active_sheet, false);
+    this.grid.Update(true);
+
   }
 
   /**
@@ -1919,19 +2206,29 @@ export class EmbeddedSpreadsheet {
    * @param formula - annotation formula. For charts, the chart formula.
    * @param type - annotation type. Defaults to `treb-chart`.
    * @param rect - coordinates, or a range reference for layout.
-   * 
-   * @param argument_separator - the argument separator to use when evaluating
-   * the function. defaults to current locale.
+   * @param options - evaluate options. because this function used to take 
+   *  the argument separator, we allow that to be passed directly, but this
+   *  is deprecated. new code should use the options object.
    */
-  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, argument_separator?: ','|';'): void {
+  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, options?: EvaluateOptions|','|';'): void {
 
     let target: IRectangle | Partial<Area> | undefined;
+    let argument_separator: ','|';'|undefined = undefined;
+    let r1c1 = false;
+
+    if (typeof options === 'object') {
+      argument_separator = options.argument_separator;
+      r1c1 = !!options.r1c1;
+    }
+    else if (options === ',' || options === ';') {
+      argument_separator = options;
+    }
 
     if (rect) {
       target = Rectangle.IsRectangle(rect) ? rect : this.model.ResolveArea(rect, this.grid.active_sheet);
     }
 
-    if (argument_separator && argument_separator !== this.parser.argument_separator) {
+    if (argument_separator && argument_separator !== this.parser.argument_separator || r1c1) {
       const current = {
         argument_separator: this.parser.argument_separator, 
         decimal_mark: this.parser.decimal_mark,
@@ -1946,11 +2243,17 @@ export class EmbeddedSpreadsheet {
         this.parser.decimal_mark = DecimalMarkType.Comma;
       }
 
+      const r1c1_state = this.parser.flags.r1c1;
+      if (r1c1) {
+        this.parser.flags.r1c1 = r1c1;
+      }
+
       const result = this.parser.Parse(formula);
       
       // reset
       this.parser.argument_separator = current.argument_separator;
       this.parser.decimal_mark = current.decimal_mark;
+      this.parser.flags.r1c1 = r1c1_state;
 
       if (result.expression) {
         formula = '=' + this.parser.Render(result.expression, { missing: '' });
@@ -2819,14 +3122,6 @@ export class EmbeddedSpreadsheet {
 
     if (text && filename) {
       const blob = new Blob([text as any], { type: 'text/plain;charset=utf-8' });
-      /*
-      // FileSaver.saveAs(blob, filename, { autoBom: false });
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(a.href);
-      */
       this.SaveAs(blob, filename);
     }
 
@@ -2954,11 +3249,11 @@ export class EmbeddedSpreadsheet {
     // FIXME: optional? parameter? (...)
 
     if (data.rendered_values && !options.recalculate) {
-      this.grid.Update();
       this.calculator.RebuildClean(true);
+      this.ApplyConditionalFormats(this.grid.active_sheet, false);
+      this.grid.Update();
     }
     else {
-      // console.info('load recalc');
       this.Recalculate();
     }
 
@@ -3248,6 +3543,7 @@ export class EmbeddedSpreadsheet {
     }
 
     this.calculator.Calculate(area);
+    this.ApplyConditionalFormats(this.grid.active_sheet, false);
 
     this.grid.Update(true); // , area);
     this.UpdateAnnotations();
@@ -3432,6 +3728,9 @@ export class EmbeddedSpreadsheet {
       ref = resolved;
     }
 
+    return this.calculator.Unresolve(ref, this.grid.active_sheet, qualified, named);
+
+    /*
     let range = '';
     const area = IsCellAddress(ref) ? new Area(ref) : new Area(ref.start, ref.end);
 
@@ -3457,10 +3756,11 @@ export class EmbeddedSpreadsheet {
     // the active selection must be on the active sheet? (...)
 
     const sheet_id = area.start.sheet_id || this.grid.active_sheet.id;
-    const sheet_name = this.ResolveSheetName(sheet_id, true);
+    const sheet_name = this.calculator.ResolveSheetName(sheet_id, true);
 
     return sheet_name ? sheet_name + '!' + range : range;
-    
+    */
+
   }
   
   /**
@@ -3482,7 +3782,7 @@ export class EmbeddedSpreadsheet {
 
     return this.calculator.Evaluate(
         expression, this.grid.active_sheet, options);
-
+   
   }
 
   /**
@@ -3522,7 +3822,7 @@ export class EmbeddedSpreadsheet {
     // the active selection must be on the active sheet? (...)
 
     const sheet_id = ref.area.start.sheet_id || this.grid.active_sheet.id;
-    const sheet_name = this.ResolveSheetName(sheet_id, true);
+    const sheet_name = this.calculator.ResolveSheetName(sheet_id, true);
 
     return sheet_name ? sheet_name + '!' + range : range;
 
@@ -3940,6 +4240,47 @@ export class EmbeddedSpreadsheet {
 
   // --- internal (protected) methods ------------------------------------------
 
+  /**
+   * 
+   */
+  protected ApplyConditionalFormats(sheet: Sheet, call_update: boolean) {
+
+    // const sheet = this.grid.active_sheet;
+    const areas: IArea[] = [];
+
+    if (sheet.conditional_formats.length || sheet.flush_conditional_formats) {
+
+      for (const entry of sheet.conditional_formats) {
+        areas.push(entry.area);
+
+        // NOTE: we're (optionally) adding the gradient here, instead
+        // of when it's created, because we might want to flush this
+        // from time to time. specifically, because gradient might use
+        // theme colors, we need to flush it when the theme is updated.
+
+        // so don't move it, even though it is tempting. or rewrite to 
+        // update on theme changes.
+
+        if (entry.type === 'gradient') {
+          if (!entry.internal) {
+            entry.internal = {};
+          }
+          if (!entry.internal.gradient) {
+            entry.internal.gradient = new Gradient(entry.stops, this.grid.theme, entry.color_space);
+          }
+        }
+      }
+
+      sheet.ApplyConditionalFormats();
+
+    }
+
+    if (call_update) {
+      this.grid.Update(true, areas);
+    }
+
+  }
+
   protected ResolveTable(reference: RangeReference): Table|undefined {
 
     let table: Table|undefined = undefined;
@@ -3979,7 +4320,7 @@ export class EmbeddedSpreadsheet {
    */
   protected SaveAs(blob: Blob, filename: string) {
 
-    const a = document.createElement('a');
+    const a = DOMUtilities.Create('a');
     a.href = URL.createObjectURL(blob);
     a.download = filename;
     a.click();
@@ -4044,6 +4385,11 @@ export class EmbeddedSpreadsheet {
 
             this.InflateAnnotations();
 
+            // and conditional formats
+
+            this.calculator.UpdateConditionals();
+            this.ApplyConditionalFormats(this.grid.active_sheet, false);
+            
           }
           else {
             return reject('unknown error (missing data)');
@@ -4099,7 +4445,7 @@ export class EmbeddedSpreadsheet {
             return;
           }
 
-          const a = document.createElement('a');
+          const a = DOMUtilities.Create('a');
           a.setAttribute('target', this.options.hyperlinks);
           a.setAttribute('href', data);
           a.setAttribute('noreferrer', 'true');
@@ -4164,6 +4510,9 @@ export class EmbeddedSpreadsheet {
 
     this.UpdateAnnotations();
 
+    this.calculator.UpdateConditionals();
+    this.ApplyConditionalFormats(event.activate, true);
+
   }
 
   protected HandleDrag(event: DragEvent): void {
@@ -4237,7 +4586,7 @@ export class EmbeddedSpreadsheet {
   protected SelectFile2(accept: string, operation: FileChooserOperation) {
 
     if (!this.file_chooser) {
-      this.file_chooser = document.createElement('input');
+      this.file_chooser = DOMUtilities.Create('input');
       this.file_chooser.type = 'file';
 
       const file_chooser = this.file_chooser;      
@@ -4270,79 +4619,6 @@ export class EmbeddedSpreadsheet {
 
   }
 
-  /* *
-   * show file chooser and resolve with the selected file, or undefined
-   * /
-  protected SelectFile(accept?: string): Promise<File | undefined> {
-
-    return new Promise((resolve) => {
-
-      const file_chooser = document.createElement('input');
-      file_chooser.type = 'file';
-
-      if (accept) {
-        file_chooser.accept = accept;
-      }
-
-      // so the thing here is there is no way to trap a "cancel" event
-      // from the file chooser. if you are waiting on a promise, that will
-      // just get orphaned forever. 
-
-      // it's not the end of the world, really, to leave a few of these 
-      // dangling, but this should allow it to clean up.
-
-      // the concept is that since file chooser is modal, there will never
-      // be a focus event until the modal is closed. unfortunately the focus
-      // event comes _before_ any input or change event from the file input,
-      // so we have to wait.
-
-      // tested Cr, FF, IE11
-      // update: works in Safari, although oddly not if you call the API
-      // function from the console. not sure if that's a browserstack thing.
-
-      // eslint-disable-next-line prefer-const
-      let finalize: (file?: File) => void;
-      let timeout: NodeJS.Timeout|undefined;
-
-      // if you get a focus event, allow some reasonable time for the 
-      // corresponding change event. realistically this should be immediate,
-      // but as long as there's not a lot of logic waiting on a cancel, it 
-      // doesn't really matter.
-
-      const window_focus = () => {
-
-        // prevent this from accidentally being called more than once
-        window.removeEventListener('focus', window_focus);
-        timeout = setTimeout(finalize, 250);
-      }
-
-      const change_handler = () => {
-        if (timeout) {
-          clearTimeout(timeout);
-          timeout = undefined; // necessary?
-        }
-        finalize(file_chooser.files ? file_chooser.files[0] : undefined);
-      }
-
-      // our finalize method cleans up and resolves
-
-      finalize = (file?: File) => {
-        file_chooser.removeEventListener('change', change_handler);
-        window.removeEventListener('focus', window_focus);
-        resolve(file);
-      };
-
-      file_chooser.addEventListener('change', change_handler);
-      window.addEventListener('focus', window_focus);
-
-      file_chooser.click();
-
-
-    });
-
-  }
-  */
-
   /**
    * Insert an image. This method will open a file chooser and (if an image
    * is selected) insert the image into the document.
@@ -4387,7 +4663,7 @@ export class EmbeddedSpreadsheet {
               }
             }
 
-            const img = document.createElement('img');
+            const img = DOMUtilities.Create('img');
             img.src = contents;
 
             // this is to let the browser figure out the image size.
@@ -4556,7 +4832,7 @@ export class EmbeddedSpreadsheet {
   protected UpdateAnnotations(): void {
     for (const annotation of this.grid.active_sheet.annotations) {
       if (annotation.temp.vertex) {
-        const vertex = annotation.temp.vertex as LeafVertex;
+        const vertex = annotation.temp.vertex as StateLeafVertex;
         if (vertex.state_id !== annotation.temp.state) {
           annotation.temp.state = vertex.state_id;
 
@@ -4752,7 +5028,7 @@ export class EmbeddedSpreadsheet {
           const reference = ValidateURI(annotation.data.data.src);
           if (reference) {
  
-            const img = document.createElement('img');
+            const img = DOMUtilities.Create('img');
             img.src = reference;
 
             if (annotation.data.data.scale === 'fixed') {
@@ -5436,35 +5712,5 @@ export class EmbeddedSpreadsheet {
     }
   }
 
-  /**
-   * this is only used in one place, can we just inline?
-   * [A: seems like it might be useful, though]
-   * 
-   * @param id 
-   * @param quote 
-   * @returns 
-   */
-  protected ResolveSheetName(id: number, quote = false): string | undefined {
-    const sheet = this.model.sheets.Find(id);
-    if (sheet) {
-      if (quote && QuotedSheetNameRegex.test(sheet.name)) {
-        return `'${sheet.name}'`;
-      }
-      return sheet.name;
-    }
-
-    /*
-    for (const sheet of this.grid.model.sheets) {
-      if (sheet.id === id) {
-        if (quote && QuotedSheetNameRegex.test(sheet.name)) {
-          return `'${sheet.name}'`;
-        }
-        return sheet.name;
-      }
-    }
-    */
-
-    return undefined;
-  }
 
 }