@trebco/treb 28.7.0 → 28.10.5

package/treb-embed/src/custom-element/treb-global.ts

@@ -10,7 +10,7 @@ import type { EmbeddedSpreadsheet } from '../embedded-spreadsheet';
 export class TREBGlobal {
 
   /** 
-   * build version 
+   * Package version 
    * 
    * @privateRemarks
    * 
@@ -25,7 +25,15 @@ export class TREBGlobal {
   public version = process.env.BUILD_VERSION || '';
 
   /** 
-   * create a spreadsheet instance
+   * Create a spreadsheet. The `USER_DATA_TYPE` template parameter is the type 
+   * assigned to the `user_data` field of the spreadsheet instance -- it can
+   * help simplify typing if you are storing extra data in spreadsheet
+   * files. 
+   * 
+   * Just ignore this parameter if you don't need it.
+   * 
+   * @typeParam USER_DATA_TYPE - type for the `user_data` field in the 
+   * spreadsheet instance
    */
   public CreateSpreadsheet<USER_DATA_TYPE = unknown>(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet<USER_DATA_TYPE> {
     const container = options.container;

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

@@ -69,7 +69,7 @@ import {
 } from 'treb-base-types';
 
 import { EventSource, ValidateURI } from 'treb-utils';
-import { NumberFormatCache, ValueParser, NumberFormat } from 'treb-format';
+import { NumberFormatCache, ValueParser, NumberFormat, LotusDate, UnlotusDate } from 'treb-format';
 
 
 
@@ -87,6 +87,10 @@ import type { BorderToolbarMessage, ToolbarMessage } from './toolbar-message';
 import { Chart, ChartFunctions } from 'treb-charts';
 import type { SetRangeOptions } from 'treb-grid';
 
+import type { StateLeafVertex } from 'treb-calculator';
+import type { ConnectedElementType } from 'treb-grid';
+
+
 // --- worker ------------------------------------------------------------------
 
 /**
@@ -95,7 +99,6 @@ 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 -------------------------------------------------------------------
 
@@ -486,13 +489,19 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     this.DocumentChange();
   }
 
-  /** opaque user data (metadata) */
+  /** 
+   * opaque user data (metadata). `USER_DATA_TYPE` is a template
+   * parameter you can set when creating the spreadsheet.
+   */
   public get user_data(): USER_DATA_TYPE|undefined {
     return this.grid.model.user_data;
   }
 
-  /** opaque user data (metadata) */
-  public set user_data(data: USER_DATA_TYPE) {
+  /** 
+   * opaque user data (metadata). `USER_DATA_TYPE` is a template
+   * parameter you can set when creating the spreadsheet.
+   */
+  public set user_data(data: USER_DATA_TYPE|undefined) {
     this.grid.model.user_data = data;
     this.DocumentChange();
   }
@@ -883,6 +892,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       this.grid.grid_events.Subscribe((event) => {
 
+        // console.info({event});
+
         switch (event.type) {
 
           case 'error':
@@ -986,7 +997,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
           case 'structure':
             {
+              // console.info("S event", event);
+
               const cached_selection = this.last_selection;
+              if (event.conditional_format) {
+                this.calculator.UpdateConditionals();
+                this.ApplyConditionalFormats(this.grid.active_sheet, false);
+              }
+
               if (event.rebuild_required) {
                 this.calculator.Reset();
 
@@ -1412,12 +1430,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       ...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;
 
@@ -1445,18 +1457,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       ...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;
@@ -1470,20 +1470,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    */
   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();
+    this.grid.AddConditionalFormat(format);
 
     // fluent
     return format;
@@ -1496,40 +1483,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    * @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();
-    }
-
+    this.grid.RemoveConditionalFormat({ format });
   }
 
   /**
@@ -1548,37 +1502,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       }
       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();
-      }
-
-    }
 
+    const area = this.model.ResolveArea(range, this.grid.active_sheet);
+    this.grid.RemoveConditionalFormat({ area });
 
   }
 
@@ -2274,6 +2200,114 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   }
 
+  public RemoveConnectedChart(id: number) {
+    const element = this.model.RemoveConnectedElement(id);
+    if (element) {
+      const removed = this.calculator.RemoveConnectedELement(element);
+      if (removed) {
+        // ... actually don't need to update here
+      }
+    }
+  }
+
+  public UpdateConnectedChart(id: number, formula: string) {
+    const element = this.model.connected_elements.get(id);
+    if (element) {
+      element.formula = formula;
+      const internal = (element.internal) as { vertex: StateLeafVertex, state: any };
+
+      if (internal?.state) {
+        internal.state = undefined;
+      }
+      this.calculator.UpdateConnectedElements(this.grid.active_sheet, element);     
+      
+      if (element.update) {
+        element.update.call(0, element);
+      }
+
+    }
+  }
+
+  /**
+   * @internal
+   * 
+   * @returns an id that can be used to manage the reference
+   */
+  public CreateConnectedChart(formula: string, target: HTMLElement, options: EvaluateOptions): number {
+
+    // FIXME: merge w/ insert annotation?
+
+    let r1c1 = options?.r1c1 || false;
+    let argument_separator = options?.argument_separator || this.parser.argument_separator; // default to current
+
+    this.parser.Save();
+    this.parser.flags.r1c1 = r1c1;
+
+    if (argument_separator === ',') {
+      this.parser.argument_separator = ArgumentSeparatorType.Comma;
+      this.parser.decimal_mark = DecimalMarkType.Period;
+    }
+    else {
+      this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
+      this.parser.decimal_mark = DecimalMarkType.Comma;
+    }
+
+    const result = this.parser.Parse(formula);
+
+    this.parser.Restore();
+
+    if (result.expression) {
+      formula = '=' + this.parser.Render(result.expression, { missing: '' });
+    }
+    else {
+      console.warn("invalid formula", result.error);
+    }
+
+    const chart = this.CreateChart();
+    chart.Initialize(target);
+
+    const id = this.model.AddConnectedElement({
+      formula,
+
+      // this is circular, but I want to leave `this` bound to the sheet
+      // instance in case we need it -- so what's a better approach? pass
+      // in the formula explicitly, and update if we need to make changes?
+
+      update: (instance: ConnectedElementType) => {
+
+        const parse_result = this.parser.Parse(instance.formula);
+
+        if (parse_result &&
+          parse_result.expression &&
+          parse_result.expression.type === 'call') {
+
+          // FIXME: make a method for doing this
+
+          this.parser.Walk(parse_result.expression, (unit) => {
+            if (unit.type === 'address' || unit.type === 'range') {
+              this.model.ResolveSheetID(unit, undefined, this.grid.active_sheet);
+            }
+            return true;
+          });
+
+          const expr_name = parse_result.expression.name.toLowerCase();
+          const result = this.calculator.CalculateExpression(parse_result.expression);
+          chart.Exec(expr_name, result as ExtendedUnion); // FIXME: type?
+        }
+
+        chart.Update();
+
+      },
+
+    });
+
+    this.calculator.UpdateConnectedElements(this.grid.active_sheet);
+    this.UpdateConnectedElements();
+
+    return id;
+
+  }
+
   /**
    * Insert an annotation node. Usually this means inserting a chart. Regarding
    * the argument separator, see the Evaluate function.
@@ -2303,11 +2337,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       target = Rectangle.IsRectangle(rect) ? rect : this.model.ResolveArea(rect, this.grid.active_sheet);
     }
 
+    // FIXME: with the new parser save/restore semantics we should 
+    // just always do this. also I don't think the r1c1 logic works
+    // properly here... unless we're assuming that the default state
+    // is always off
+
     if (argument_separator && argument_separator !== this.parser.argument_separator || r1c1) {
+
+      this.parser.Save();
+
+      /*
       const current = {
         argument_separator: this.parser.argument_separator, 
         decimal_mark: this.parser.decimal_mark,
       };
+      */
 
       if (argument_separator === ',') {
         this.parser.argument_separator = ArgumentSeparatorType.Comma;
@@ -2318,17 +2362,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         this.parser.decimal_mark = DecimalMarkType.Comma;
       }
 
-      const r1c1_state = this.parser.flags.r1c1;
-      if (r1c1) {
-        this.parser.flags.r1c1 = r1c1;
-      }
+      // 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;
+      */
+      this.parser.Restore();
 
       if (result.expression) {
         formula = '=' + this.parser.Render(result.expression, { missing: '' });
@@ -3977,6 +4025,23 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     return NumberFormatCache.Get(format).Format(value);
   }
 
+  /**
+   * convert a javascript date (or timestamp) to a spreadsheet date
+   */
+  public SpreadsheetDate(javascript_date: number|Date) {
+    if (javascript_date instanceof Date) {
+      javascript_date = javascript_date.getTime();
+    }
+    return UnlotusDate(javascript_date, true);
+  }
+
+  /**
+   * convert a spreadsheet date to a javascript date
+   */
+  public JavascriptDate(spreadsheet_date: number) {
+    return LotusDate(spreadsheet_date).getTime();
+  }
+
   /**
    * Apply borders to range. 
    * 
@@ -4611,7 +4676,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     this.UpdateAnnotations();
 
+    // we don't really need to call UpdateConditionals here unless
+    // something has changed in a previously inactive sheet -- right?
+
     this.calculator.UpdateConditionals();
+
+    // we do need to call apply (I think)
+
     this.ApplyConditionalFormats(event.activate, true);
 
   }
@@ -4910,6 +4981,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    * (just sparklines atm) and update if necessary.
    */
   protected UpdateAnnotations(): void {
+
     for (const annotation of this.grid.active_sheet.annotations) {
       if (annotation.temp.vertex) {
         const vertex = annotation.temp.vertex as StateLeafVertex;
@@ -4947,6 +5019,27 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       }
 
     }
+
+    this.UpdateConnectedElements();
+
+  }
+
+  protected UpdateConnectedElements() {
+    for (const element of this.model.connected_elements.values()) {
+      const internal = (element.internal) as { vertex: StateLeafVertex, state: any };
+      if (internal?.vertex && internal.vertex.state_id !== internal.state ) {
+        internal.state = internal.vertex.state_id;
+        const fn = element.update; 
+        if (fn) {
+
+          // FIXME: what if there are multiple calls pending? some 
+          // kind of a dispatch system might be useful
+
+          Promise.resolve().then(() => fn.call(0, element));
+
+        }
+      }
+    }
   }
 
   /*
@@ -5798,15 +5891,25 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   /**
    * handle key down to intercept ctrl+z (undo)
-   *
+   * UPDATE: we're also handling F9 for recalc (optionally)
+   * 
    * FIXME: redo (ctrl+y or ctrl+shift+z)
    */
   protected HandleKeyDown(event: KeyboardEvent): void {
+
+    // can we drop the event.code stuff in 2024? (YES)
+
     if (event.ctrlKey && (event.code === 'KeyZ' || event.key === 'z')) {
       event.stopPropagation();
       event.preventDefault();
       this.Undo();
     }
+    else if (event.key === 'F9' && this.options.recalculate_on_f9) {
+      event.stopPropagation();
+      event.preventDefault();
+      this.Recalculate();
+    }
+
   }
 
 

package/treb-embed/src/options.ts

@@ -304,6 +304,13 @@ export interface EmbeddedSpreadsheetOptions {
    */
   preload?: (instance: unknown) => void;
 
+  /**
+   * handle the F9 key and recalculate the spreadsheet. for compatibility.
+   * we're leaving this option to default `false` for now, but that may 
+   * change in the future. key modifiers have no effect.
+   */
+  recalculate_on_f9?: boolean;
+
 }
 
 /**

package/treb-embed/style/layout.scss

@@ -64,6 +64,10 @@
 
   font-family: var(--treb-default-font, system-ui, $font-stack);
 
+  // reset in case we inherit something
+
+  line-height: normal;
+
   div, button, input, ul, ol, li, a, textarea, svg {
 
     // maybe this is being too aggressive. we could be a little 

package/treb-embed/style/toolbar.scss

@@ -411,6 +411,43 @@ $swatch-size: 18px;
 
     }
 
+    .treb-font-scale {
+      padding-left: 2em;
+      width: 5em;
+      text-align: right;
+    }
+
+    [composite][font-scale] {
+      position: relative;
+    }
+
+    .treb-font-scale-icon {
+      position: absolute;
+      top: 50%;
+      left: .5em;
+      transform: translateY(-50%);
+      opacity: .9;
+      // border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+      border-radius: 3px;
+      // background: color-mix(in srgb, currentColor 10%, transparent);
+
+      pointer-events: none;
+      line-height: 1;
+
+      &::before, &::after {
+        content: 'A';
+        position: relative;
+      }
+
+      &::before {
+        font-size: 1.2em;
+      }
+      &::after {
+        font-size: .9em;
+        left: -.125em;
+      }
+    }
+
   }
 
 }

package/treb-grid/src/index.ts

@@ -22,7 +22,7 @@
 export { Grid } from './types/grid';
 export { GridBase } from './types/grid_base';
 export { Sheet } from './types/sheet';
-export { DataModel, type MacroFunction } from './types/data_model';
+export { DataModel, type MacroFunction, type ConnectedElementType } from './types/data_model';
 export type { SerializedNamedExpression, SerializedModel } from './types/data_model';
 export * from './types/grid_events';
 export type { SerializedSheet, FreezePane } from './types/sheet_types';

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

@@ -33,7 +33,7 @@ export interface ConditionalFormatGradientOptions {
   /** property defaults to fill */
   property?: 'fill'|'text';
 
-  /** defaults to HSL */
+  /** defaults to RGB */
   color_space?: 'HSL'|'RGB';
 
   /** gradient stops, required */

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

@@ -26,6 +26,12 @@ import { NamedRangeCollection } from './named_range';
 import { type ExpressionUnit, type UnitAddress, type UnitStructuredReference, type UnitRange, Parser, QuotedSheetNameRegex } from 'treb-parser';
 import { Area, IsCellAddress, Style } from 'treb-base-types';
 
+export interface ConnectedElementType {
+  formula: string;
+  update?: (instance: ConnectedElementType) => void;
+  internal?: unknown; // opaque type to prevent circular dependencies
+}
+
 export interface SerializedMacroFunction {
   name: string;
   function_def: string;
@@ -444,6 +450,32 @@ export class DataModel {
     return address; // already range or address
 
   }
+  
+  public AddConnectedElement(connected_element: ConnectedElementType): number {
+    const id = this.connected_element_id++;
+    this.connected_elements.set(id, connected_element);
+    return id;
+  }
+
+  public RemoveConnectedElement(id: number) {
+    const element = this.connected_elements.get(id);
+    this.connected_elements.delete(id);
+    return element;
+  }
+
+  /** 
+   * identifier for connected elements, used to manage. these need to be 
+   * unique in the lifetime of a model instance, but no more than that.
+   */
+  protected connected_element_id = 100;
+
+  /** 
+   * these are intentionally NOT serialized. they're ephemeral, created 
+   * at runtime and not persistent.
+   * 
+   * @internal
+   */
+  public connected_elements: Map<number, ConnectedElementType> = new Map();
 
 }
 

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

@@ -4627,6 +4627,13 @@ export class Grid extends GridBase {
       }
     }
     else {
+
+      // ignore function keys 
+      
+      if (/^F\d+$/.test(event.key)) {
+        return;
+      }
+
       switch (event.key) {
         case 'Tab':
           if (event.shiftKey) delta.columns--;
@@ -4687,7 +4694,10 @@ export class Grid extends GridBase {
           return;
 
         default:
-          // console.info('ek', event.key);
+
+          // FIXME: we're handling F9 (optionally) in the embedded
+          // component. this handler should ignore all function keys.
+          // not sure there's a good global for that, though. regex?
 
           if (!selection.empty) {
             if (event.key !== 'Escape') {