@trebco/treb 28.7.0 → 28.10.0

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';
 
 
 
@@ -486,13 +486,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 +889,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       this.grid.grid_events.Subscribe((event) => {
 
+        // console.info({event});
+
         switch (event.type) {
 
           case 'error':
@@ -986,7 +994,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 +1427,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 +1454,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 +1467,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 +1480,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 +1499,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 });
 
   }
 
@@ -3977,6 +3900,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 +4551,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);
 
   }
@@ -5798,15 +5744,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/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/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') {

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

@@ -67,6 +67,10 @@ interface PatchOptions extends PatchAreaOptions {
   sheet: Sheet;
 }
 
+const AssertNever = (value: never) => {
+  console.error('invalid case');
+};
+
 export class GridBase {
 
   // --- public members --------------------------------------------------------
@@ -160,6 +164,24 @@ export class GridBase {
 
   // --- API methods -----------------------------------------------------------
 
+  public RemoveConditionalFormat(options: {
+        format?: ConditionalFormat;
+        area?: IArea;
+      }) {
+
+    this.ExecCommand({
+      key: CommandKey.RemoveConditionalFormat,
+      ...options,
+    });
+  }
+
+  public AddConditionalFormat(format: ConditionalFormat) {
+    this.ExecCommand({
+      key: CommandKey.AddConditionalFormat,
+      format,
+    });
+  }
+
   /** remove a table. doesn't remove any data, just removes the overlay. */
   public RemoveTable(table: Table) {
     this.ExecCommand({
@@ -1887,7 +1909,7 @@ export class GridBase {
           break;
         */
 
-        // special case
+        // special cases
         case CommandKey.SortTable:
         case CommandKey.RemoveTable:
           if (!command.table.area.start.sheet_id) {
@@ -1895,6 +1917,12 @@ export class GridBase {
           }
           break;
 
+        case CommandKey.AddConditionalFormat:
+          if (!command.format.area.start.sheet_id) {
+            command.format.area.start.sheet_id = id;
+          }
+          break;
+
         // field
         case CommandKey.ResizeRows:
         case CommandKey.ResizeColumns:
@@ -1920,6 +1948,14 @@ export class GridBase {
         case CommandKey.Select:
         case CommandKey.InsertTable:
 
+        // note that remove conditional format could have a format
+        // object (with an area) instead of an area. but in that case,
+        // the format object must match an existing format, so it would
+        // have to have a proper area. there's no case where we would
+        // want to add it. so we only handle the area case.
+
+        case CommandKey.RemoveConditionalFormat:
+
           if (command.area) {
             if (IsCellAddress(command.area)) {
               if (!command.area.sheet_id) {
@@ -1934,10 +1970,13 @@ export class GridBase {
           }
           break;
 
-        // default:
-        //  // command key here should be `never` if we've covered all the 
-        //  // cases (ts will complain)
-        //  // console.warn('unhandled command key', command.key);
+        default:
+
+          // this is intended to check that we've handled all cases. if you
+          // add additional commands and they're not handled, this should 
+          // raise a ts error.
+
+          AssertNever(command);
 
       }
     }
@@ -3534,6 +3573,88 @@ export class GridBase {
 
           break;
 
+        case CommandKey.AddConditionalFormat:
+          {
+
+            const sheet = this.FindSheet(command.format.area);
+            sheet.conditional_formats.push(command.format);
+
+            sheet.Invalidate(new Area(command.format.area.start, command.format.area.end));
+
+            if (sheet === this.active_sheet) {
+              // flags.style_area = Area.Join(command.format.area, flags.style_area);
+              flags.render_area = Area.Join(command.format.area, flags.render_area);
+            }
+            else {
+              // flags.style_event = true;
+            }
+
+            flags.structure_event = true;
+            flags.conditional_formatting_event = true;
+
+          }
+          break;
+
+        case CommandKey.RemoveConditionalFormat:
+
+          {
+            let sheet: Sheet|undefined;
+            let count = 0;
+
+            if (command.format) {
+
+              // we're removing by object equivalence, not strict equality.
+              // this is in case we're switching contexts and the objects
+              // are not strictly equal. may be unecessary. do we need to
+              // normalize in some way? (...)
+
+              const format = JSON.stringify(command.format);
+
+              sheet = this.FindSheet(command.format.area);
+              sheet.conditional_formats = sheet.conditional_formats.filter(test => {
+                // if (test === command.format) {
+                if (JSON.stringify(test) === format) {
+                  count++;
+                  flags.render_area = Area.Join(test.area, flags.render_area);
+                  return false;
+                }
+                return true;
+              });
+
+            }
+            else if (command.area) {
+              const area = new Area(command.area.start, command.area.end);
+              sheet = this.FindSheet(command.area);
+
+              sheet.conditional_formats = sheet.conditional_formats.filter(test => {
+                const compare = new Area(test.area.start, test.area.end);
+                if (compare.Intersects(area)) {
+                  count++;
+                  flags.render_area = Area.Join(compare, flags.render_area);
+                  return false;
+                }
+                return true;
+              });
+        
+            }
+
+            if (sheet && count) {
+              sheet.FlushConditionalFormats();
+              flags.structure_event = true;
+
+              // this will flush leaf vertices. but it's expensive because
+              // it's rebuilding the whole graph. we could maybe reduce a 
+              // bit... the question is what's worse: rebuilding the graph
+              // or leaving orphans for a while?
+
+              // flags.structure_rebuild_required = true;
+
+              flags.conditional_formatting_event = true;
+            }
+
+          }
+          break;
+
         case CommandKey.InsertTable:
 
           // the most important thing here is validating that we can
@@ -4170,6 +4291,7 @@ export class GridBase {
       events.push({
         type: 'structure',
         rebuild_required: flags.structure_rebuild_required,
+        conditional_format: flags.conditional_formatting_event,
       });
     }
 

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

@@ -22,6 +22,7 @@
 import type { ICellAddress, IArea, Style, CellStyle, Color, CellValue, Table, TableSortType, TableTheme } from 'treb-base-types';
 import type { ExpressionUnit } from 'treb-parser';
 import type { BorderConstants } from './border_constants';
+import type { ConditionalFormat } from './conditional_format';
 
 /**
  * switching to an exec-command based model, so we can serialize
@@ -73,6 +74,9 @@ export enum CommandKey {
   InsertTable,
   RemoveTable,
 
+  AddConditionalFormat,
+  RemoveConditionalFormat,
+
 }
 
 /** base type for sheet commands -- can select sheet by name, id or index */
@@ -418,6 +422,32 @@ export interface ReorderSheetCommand {
   move_before: number;
 }
 
+/**
+ * add conditional format
+ */
+export interface AddConditionalFormatCommand {
+  key: CommandKey.AddConditionalFormat;
+  format: ConditionalFormat;
+}
+
+/**
+ * remove conditional format, either as an object or from a target 
+ * area. as an object, we'll match using object equivalence and not 
+ * identity. 
+ */
+export interface RemoveConditionalFormatCommand {
+
+  key: CommandKey.RemoveConditionalFormat;
+
+  /** if format is omitted, we will remove all formats from the target range */
+  format?: ConditionalFormat;
+
+  /** one of area or format should be supplied */
+  area?: IArea; 
+
+}
+
+
 /**
  * ephemeral flag added to commands.
  * /
@@ -459,6 +489,8 @@ export type Command =
   | ActivateSheetCommand
   | DataValidationCommand
   | DuplicateSheetCommand
+  | AddConditionalFormatCommand
+  | RemoveConditionalFormatCommand
   ) ; // & Ephemeral;
 
 /**

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

@@ -23,6 +23,7 @@ import type { GridSelection } from './grid_selection';
 import type { Annotation } from './annotation';
 import type { Sheet } from './sheet';
 import type { Area } from 'treb-base-types';
+import type { ConditionalFormat } from './conditional_format';
 
 export enum ErrorCode {
 
@@ -80,6 +81,12 @@ export interface StructureEvent {
    * FIXME: merge/unmerge? (...) I think yes
    */
   rebuild_required?: boolean;
+
+  /** 
+   * we can use this when conditional formats are modified/added/removed 
+   */
+  conditional_format?: boolean;
+  
 }
 
 export interface AnnotationEvent {

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

@@ -24,6 +24,14 @@ import type { StatsEntry } from './tab_bar';
 
 export type StatsFunction = (data: CellValue|CellValue[][]|undefined) => StatsEntry[];
 
+
+/**
+ * @internalRemarks
+ * 
+ * why are there two levels of options? can we consolidate this with
+ * the embedded spreadsheet options? they are never (AFAICT) used 
+ * independently. maybe that's recent.
+ */
 export interface GridOptions {
 
   /** can expand rows/columns */