@trebco/treb 27.7.6 → 27.11.1

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

@@ -0,0 +1,168 @@
+
+import type { CellStyle, EvaluateOptions, IArea, Color, Gradient, GradientStop, UnionValue } from 'treb-base-types';
+
+interface VertexPlaceholder {
+  result: UnionValue;
+  updated: boolean;
+} 
+
+export interface CondifionalFormatExpressionOptions {
+  style: CellStyle;
+  expression: string;
+  options?: EvaluateOptions;
+}
+
+/** 
+ * conditional format predicated on an expression. if the expression 
+ * evaluates to true, we apply the style. otherwise no.
+ */
+export interface ConditionalFormatExpression extends CondifionalFormatExpressionOptions {
+  
+  type: 'expression';
+  area: IArea;
+
+  /** @internal */
+  internal?: {
+    vertex?: VertexPlaceholder;
+  };
+
+}
+
+export interface ConditionalFormatGradientOptions {
+
+  /** property defaults to fill */
+  property?: 'fill'|'text';
+
+  /** defaults to HSL */
+  color_space?: 'HSL'|'RGB';
+
+  /** gradient stops, required */
+  stops: Array<{ value: number, color: Color }>;
+  
+  /** min and max are optional. if not provided, we use the min/max of the range of data. */
+  min?: number;
+  
+  /** min and max are optional. if not provided, we use the min/max of the range of data. */
+  max?: number;
+
+}
+
+
+export const StandardGradientsList = {
+  'red-green': {
+    color_space: 'RGB',
+    stops: [
+      { value: 0, color: { theme: 5, tint: .5 }}, 
+      { value: 1, color: { theme: 9, tint: .5 }}, 
+    ] as GradientStop[],
+  },
+  'red-yellow-green': {
+    color_space: 'RGB',
+    stops: [
+      { value: 0, color: { theme: 5, tint: .5 }}, 
+      { value: 0.5, color: { theme: 7, tint: .5 }}, 
+      { value: 1, color: { theme: 9, tint: .5 }}, 
+    ] as GradientStop[],
+  },
+  'green-red': {
+    color_space: 'RGB',
+    stops: [
+      { value: 0, color: { theme: 9, tint: .5 }}, 
+      { value: 1, color: { theme: 5, tint: .5 }}, 
+    ] as GradientStop[],
+  },
+  'green-yellow-red': {
+    color_space: 'RGB',
+    stops: [
+      { value: 0, color: { theme: 9, tint: .5 }}, 
+      { value: 0.5, color: { theme: 7, tint: .5 }}, 
+      { value: 1, color: { theme: 5, tint: .5 }}, 
+    ] as GradientStop[],
+  },
+} as const; 
+export type StandardGradient = keyof typeof StandardGradientsList;
+
+export interface ConditionalFormatGradient extends ConditionalFormatGradientOptions {
+  type: 'gradient';
+  area: IArea;
+
+  /** @internal */
+  internal?: {
+    gradient?: Gradient;
+    vertex?: VertexPlaceholder;
+  };
+}
+
+export interface ConditionalFormatCellMatchOptions {
+  style: CellStyle;
+  expression: string;
+  options?: EvaluateOptions;
+}
+
+export interface ConditionalFormatCellMatch extends ConditionalFormatCellMatchOptions {
+  type: 'cell-match';
+  area: IArea;
+
+  /** @internal */
+  internal?: {
+    vertex?: VertexPlaceholder;
+  };
+}
+
+export interface ConditionalFormatCellMatchOptions {
+  style: CellStyle;
+  expression: string;
+  options?: EvaluateOptions;
+}
+
+export interface ConditionalFormatCellMatch extends ConditionalFormatCellMatchOptions {
+  type: 'cell-match';
+  area: IArea;
+
+  /** @internal */
+  internal?: {
+    vertex?: VertexPlaceholder;
+  };
+}
+
+export interface ConditionalFormatDuplicateValuesOptions {
+  style: CellStyle;
+
+  /** true to highlight unique cells, false to highlight duplicates. defaults to false. */
+  unique?: boolean;
+}
+
+export interface ConditionalFormatDuplicateValues extends ConditionalFormatDuplicateValuesOptions {
+
+  type: 'duplicate-values';
+  area: IArea;
+
+  /** @internal */
+  internal?: {
+    vertex?: VertexPlaceholder;
+  };
+
+}
+
+/** 
+ * union, plus we're adding a state used to track application.
+ * that state is serialized if it's true. 
+ * we also add an internal field that will be type-specific, and not serialized.
+ * 
+ * ...everybody has a vertex now, we could standardize it
+ * 
+ */
+export type ConditionalFormat = { internal?: unknown } & (
+    ConditionalFormatDuplicateValues |
+    ConditionalFormatExpression |
+    ConditionalFormatCellMatch |
+    ConditionalFormatGradient
+  );
+
+/**
+ * the list of formats, in reverse order of precedence. as a starting
+ * point we're using the naive approach, just applying everything in
+ * order. that may change.
+ */
+export type ConditionalFormatList = ConditionalFormat[];
+

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

@@ -111,7 +111,7 @@ import { CommandKey
 
 import type { DataModel, SerializedModel } from './data_model';
 
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import { GridBase } from './grid_base';
 import type { SetRangeOptions } from './set_range_options';
 import type { ClipboardCellData } from './clipboard_data';
@@ -262,6 +262,9 @@ export class Grid extends GridBase {
   /** new key capture overlay/ICE */
   private overlay_editor?: OverlayEditor;
 
+  /** moving autocomplete to a class field */
+  private autocomplete?: Autocomplete;
+
   /** formula bar editor (optional) */
   private formula_bar?: FormulaBar;
 
@@ -568,13 +571,13 @@ export class Grid extends GridBase {
 
       // FIXME: why is this not in layout? it is layout.
 
-      view.node = document.createElement('div');
+      view.node = DOMUtilities.Div();
       view.node.dataset.scale = this.layout.scale.toString();
       view.node.style.fontSize = `${10 * this.layout.scale}pt`;
 
-      view.content_node = DOMUtilities.CreateDiv('annotation-content', view.node);
-      const move_target = DOMUtilities.CreateDiv('annotation-move-target', view.node);
-      const resize_target = DOMUtilities.CreateDiv('annotation-resize-target', view.node);
+      view.content_node = DOMUtilities.Div('annotation-content', view.node);
+      const move_target = DOMUtilities.Div('annotation-move-target', view.node);
+      const resize_target = DOMUtilities.Div('annotation-resize-target', view.node);
 
       if (view.node) {
         const node = view.node;
@@ -1275,13 +1278,13 @@ export class Grid extends GridBase {
     const higher_level_container = view_node.querySelector('.treb-spreadsheet-body') as HTMLElement;
     const container = higher_level_container.querySelector('div') as HTMLElement;
 
-    let autocomplete: Autocomplete | undefined;
+    // let autocomplete: Autocomplete | undefined;
 
     if (this.options.formula_bar) {
-      if (!autocomplete) {
-        autocomplete = new Autocomplete({ theme: this.theme, container });
+      if (!this.autocomplete) {
+        this.autocomplete = new Autocomplete({ theme: this.theme, container });
       }
-      this.InitFormulaBar(view_node, autocomplete);
+      this.InitFormulaBar(view_node, this.autocomplete);
     }
 
     if (this.options.tab_bar) {
@@ -1408,10 +1411,10 @@ export class Grid extends GridBase {
 
     // Sheet.sheet_events.Subscribe(this.HandleSheetEvent.bind(this));
 
-    if (!autocomplete) {
-      autocomplete = new Autocomplete({ theme: this.theme, container });
+    if (!this.autocomplete) {
+      this.autocomplete = new Autocomplete({ theme: this.theme, container });
     }
-    this.InitOverlayEditor(autocomplete);
+    this.InitOverlayEditor(this.autocomplete);
 
     this.AttachListeners();
 
@@ -1720,15 +1723,16 @@ export class Grid extends GridBase {
     this.RenderSelections();
   }
 
-  /**
+  /* *
    * FIXME: who uses this? anyone?
-   */
+   * /
   public GetNumberFormat(address: ICellAddress): string|undefined {
     const style = this.active_sheet.CellStyleData(address);
     if (style && style.number_format) {
       return NumberFormatCache.Get(style.number_format).toString();
     }
   }
+  */
 
   /**
    * I can't figure out a way in typescript to overload the GetRange function 
@@ -1986,7 +1990,7 @@ export class Grid extends GridBase {
   }
 
   /** repaint after an external event (calculation) */
-  public Update(force = false, area?: Area): void {
+  public Update(force = false, area?: IArea|IArea[]): void {
     this.DelayedRender(force, area);
   }
 
@@ -2694,35 +2698,6 @@ export class Grid extends GridBase {
 
             this.OverlayKeyDown(event.event);
 
-            /*
-            let cloned_event: KeyboardEvent;
-            if (UA.trident) {
-              cloned_event = document.createEvent('KeyboardEvent');
-              const modifiers = [];
-              if (event.event.ctrlKey) modifiers.push('Control');
-              if (event.event.altKey) modifiers.push('Alt');
-              if (event.event.shiftKey) modifiers.push('Shift');
-
-              // have to mask type for trident
-              (cloned_event as any).initKeyboardEvent(
-                event.event.type,
-                false,
-                false,
-                event.event.view,
-                event.event.key,
-                event.event.location,
-                modifiers.join(' '),
-                event.event.repeat,
-                Localization.locale);
-            }
-            else {
-              cloned_event = new KeyboardEvent(event.event.type, event.event);
-            }
-
-            if (cloned_event && this.container) {
-              this.container.dispatchEvent(cloned_event);
-            }
-            */
           }
           break;
 
@@ -2792,9 +2767,7 @@ export class Grid extends GridBase {
 
   }
 
-
-
-  private DelayedRender(force = false, area?: Area, full_tile = false) {
+  private DelayedRender(force = false, area?: IArea|IArea[], full_tile = false) {
 
     // if area is passed, set dirty before calling repaint
 
@@ -3764,6 +3737,17 @@ export class Grid extends GridBase {
 
     const selecting_argument = this.SelectingArgument();
     
+    /*
+    let blocking_tooltip = false;
+    if (selecting_argument) {
+      if (this.autocomplete?.tooltip_visible) {
+        this.autocomplete.SetBlock();
+        this.autocomplete.Hide();
+        blocking_tooltip = true;
+      }
+    }
+    */
+
     if (!selecting_argument && this.additional_selections.length) {
       this.ClearAdditionalSelections();
     }
@@ -4053,6 +4037,12 @@ export class Grid extends GridBase {
       // console.info('end');
       this.UpdateAddressLabel();
 
+      /*
+      if (blocking_tooltip) {
+        this.autocomplete?.ResetBlock();
+      }
+      */
+
       if (selecting_argument) {
         if (this.overlay_editor?.editing) {
           // ...

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

@@ -40,7 +40,7 @@ import type { DataModel, MacroFunction, SerializedModel, SerializedNamedExpressi
 import type { Parser, UnitAddress} from 'treb-parser';
 import { type ExpressionUnit, IllegalSheetNameRegex, ParseCSV, ArgumentSeparatorType, DecimalMarkType } from 'treb-parser';
 import { Area, IsCellAddress, ValidationType, ValueType, DefaultTableSortOptions } from 'treb-base-types';
-import type { ICellAddress, IArea, Cell, CellValue , Style, CellStyle, Table, TableSortOptions, TableTheme, Complex } from 'treb-base-types';
+import type { ICellAddress, IArea, Cell, CellValue , Style, CellStyle, Table, TableSortOptions, TableTheme, Complex, PatchOptions as PatchAreaOptions } from 'treb-base-types';
 import { Sheet } from './sheet';
 import type { FunctionDescriptor} from '../editors/autocomplete_matcher';
 import { AutocompleteMatcher, DescriptorType } from '../editors/autocomplete_matcher';
@@ -61,6 +61,11 @@ import type { UpdateFlags } from './update_flags';
 import type { FreezePane, LegacySerializedSheet } from './sheet_types';
 import type { Annotation } from './annotation';
 import type { ClipboardCellData } from './clipboard_data';
+import type { ConditionalFormat } from './conditional_format';
+
+interface PatchOptions extends PatchAreaOptions {
+  sheet: Sheet;
+}
 
 export class GridBase {
 
@@ -2146,6 +2151,29 @@ export class GridBase {
 
   }
 
+  protected PatchExpressionSheetName(expression: string, old_name: string, name: string): string|undefined {
+
+    let modified = false;
+    const parsed = this.parser.Parse(expression || '');
+    if (parsed.expression) {
+      this.parser.Walk(parsed.expression, (element: ExpressionUnit) => {
+        if (element.type === 'address') {
+          if (element.sheet && element.sheet.toLowerCase() === old_name) {
+            element.sheet = name;
+            modified = true;
+          }
+        }
+        return true; // continue walk
+      });
+      if (modified) {
+        return '=' + this.parser.Render(parsed.expression, { missing: '' });
+      }
+    }
+
+    return undefined;
+
+  }
+
   /**
    * splitting this logic into a new function so we can reuse it 
    * for invalidating broken references. generally we'll call this
@@ -2165,45 +2193,39 @@ export class GridBase {
       // cells
       sheet.cells.IterateAll((cell: Cell) => {
         if (cell.ValueIsFormula()) {
-          let modified = false;
-          const parsed = this.parser.Parse(cell.value || '');
-          if (parsed.expression) {
-            this.parser.Walk(parsed.expression, (element: ExpressionUnit) => {
-              if (element.type === 'address') {
-                if (element.sheet && element.sheet.toLowerCase() === old_name) {
-                  element.sheet = name;
-                  modified = true;
+          const updated = this.PatchExpressionSheetName(cell.value||'', old_name, name);
+          if (updated) {
+            cell.value = updated;
+            changes++;
+          }          
+        }
+      });
+
+      // conditionals
+      if (sheet.conditional_formats?.length) {
+        for (const format of sheet.conditional_formats) {
+          switch (format.type) {
+            case 'cell-match':
+            case 'expression':
+              {
+                const updated = this.PatchExpressionSheetName(format.expression, old_name, name);
+                if (updated) {
+                  format.expression = updated;
+                  changes++;
                 }
               }
-              return true; // continue walk
-            });
-            if (modified) {
-              cell.value = '=' + this.parser.Render(parsed.expression, { missing: '' });
-              changes++;
-            }
+              break;
           }
         }
-      });
+      }
 
       // annotations
       for (const annotation of sheet.annotations) {
         if (annotation.data.formula) {
-          let modified = false;
-          const parsed = this.parser.Parse(annotation.data.formula || '');
-          if (parsed.expression) {
-            this.parser.Walk(parsed.expression, (element: ExpressionUnit) => {
-              if (element.type === 'address') {
-                if (element.sheet && element.sheet.toLowerCase() === old_name) {
-                  element.sheet = name;
-                  modified = true;
-                }
-              }
-              return true; // continue walk
-            });
-            if (modified) {
-              annotation.data.formula = '=' + this.parser.Render(parsed.expression, { missing: '' });
-              changes++;
-            }
+          const updated = this.PatchExpressionSheetName(annotation.data.formula, old_name, name);
+          if (updated) {
+            annotation.data.formula = updated;
+            changes++;
           }
         }
       }
@@ -2430,6 +2452,7 @@ export class GridBase {
         });
         if (transformed) {
 
+          /*
           if (!this.flags.warned_r1c1) {
 
             // 1-time warning
@@ -2437,6 +2460,7 @@ export class GridBase {
             this.flags.warned_r1c1 = true;
             console.warn('NOTE: R1C1 support is experimental. the semantics may change in the future.');
           }
+          */
 
           value = '=' + this.parser.Render(result.expression, { missing: '' });
         }
@@ -2634,7 +2658,121 @@ export class GridBase {
 
   }
 
-  
+  /**
+   * patch an expression for insert/delete row/column operations.
+   * FIXME: should move, maybe to parser? (...)
+   * 
+   * NOTE: did I write this twice? we only need one. check which one is better.
+   * @see PatchFormulasInternal
+   * 
+   * @returns the updated expression, or `undefined` if no changes were made.
+   */
+  protected PatchExpression(expression: string, options: PatchOptions) { 
+
+    let count = 0;
+    const parse_result = this.parser.Parse(expression);
+    if (parse_result.expression) {
+
+      this.parser.Walk(parse_result.expression, unit => {
+        if (unit.type === 'range') {
+          if (!unit.start.sheet || (unit.start.sheet.toLowerCase() === options.sheet.name.toLowerCase())) {
+            const updated = Area.PatchArea(unit, options);
+            if (updated) {
+              unit.start.row = updated.start.row;
+              unit.start.column = updated.start.column;
+              unit.end.row = updated.end.row;
+              unit.end.column = updated.end.column;
+            }
+            else {
+
+              // FIXME: maybe have options for this? we don't really have a 
+              // good way to replace nodes atm
+              unit.start.row = unit.end.row = unit.start.column = unit.end.column = -1;
+
+            }
+          }
+          count++;
+          return false;
+        }
+        else if (unit.type === 'address') {
+          const updated = Area.PatchArea({start: unit, end: unit}, options);
+          if (updated) {
+            unit.row = updated.start.row;
+            unit.column = updated.start.column;
+          }
+          else {
+
+            // see above
+            unit.row = unit.column = -1;
+          }
+          count++;
+          return false;
+        }
+        return true;
+      });
+
+      if (count) {
+        const rendered = this.parser.Render(parse_result.expression, {
+          missing: '',
+        });
+        // console.info("FROM", expression, "TO", rendered);
+        return rendered;
+      }
+
+    }
+
+    return undefined;
+
+  }
+
+  /**
+   * patch sheet conditionals for insert/delete row/column operations.
+   * some of them may be deleted.
+   */
+  protected PatchConditionals(options: PatchOptions) {
+
+    if (options.sheet.conditional_formats?.length) {
+
+      const delete_list: Set<ConditionalFormat> = new Set();
+      for (const format of options.sheet.conditional_formats) {
+
+        // first adjust the format area 
+
+        const updated = Area.PatchArea(format.area, options);
+        if (updated) {
+          format.area = JSON.parse(JSON.stringify(updated));
+        }
+        else {
+          delete_list.add(format);
+          continue; // don't bother with formula
+        }
+
+        // next update the formula, if necessary. what do we do if the
+        // area has disappeared? should be a #REF error, not sure we 
+        // can encode that properly
+
+        switch (format.type) {
+          case 'expression':
+          case 'cell-match':
+            {
+              const updated = this.PatchExpression(format.expression, options);
+
+              if (updated) {
+                format.expression = updated;
+              }
+            }
+            break;
+        }
+
+      }
+
+      if (delete_list.size) {
+        options.sheet.conditional_formats = options.sheet.conditional_formats.filter(test => !delete_list.has(test));
+      }
+
+    }
+
+  }
 
   /**
    * FIXME: should be API method
@@ -2664,6 +2802,15 @@ export class GridBase {
       return { error: true };
     }
 
+    // conditionals
+    this.PatchConditionals({
+        sheet: target_sheet, 
+        before_column: 0, 
+        column_count: 0, 
+        before_row: command.before_row, 
+        row_count: command.count
+      });
+
     // see InsertColumnsInternal re: tables. rows are less complicated,
     // except that if you delete the header row we want to remove the 
     // table entirely.
@@ -2978,6 +3125,14 @@ export class GridBase {
       return { error: true };
     }
     
+    // conditionals
+    this.PatchConditionals({
+      sheet: target_sheet, 
+      before_column: command.before_column, 
+      column_count: command.count, 
+      before_row: 0, 
+      row_count: 0 });
+
     // patch tables. we removed this from the sheet routine entirely,
     // we need to rebuild any affected tables now.
 

package/treb-grid/src/types/scale-control.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities as DOM } from '../util/dom_utilities';
+import { DOMUtilities as DOM } from 'treb-base-types';
 import { NumberFormat, NumberFormatCache, ValueParser } from 'treb-format';
 import { ValueType } from 'treb-base-types';
 import { EventSource } from 'treb-utils';
@@ -54,7 +54,7 @@ export class ScaleControl extends EventSource<ScaleEvent> {
     // const div = DOM.CreateDiv('treb-scale-control-2', container);
 
     this.input = DOM.Create('input', 'treb-scale-input', /* div */ container);
-    const popup = DOM.CreateDiv('treb-slider-container', /* div */ container);
+    const popup = DOM.Div('treb-slider-container', /* div */ container);
 
     /*
     this.input.addEventListener('keyup', (event) => {