@trebco/treb 27.5.2 → 27.7.6

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v27.5. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v27.7. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -316,7 +316,7 @@ export declare class EmbeddedSpreadsheet {
      * to support outside tooling by highlighting a list of arguments and
      * responding to selection.
      */
-    ExternalEditor(editor?: Partial<ExternalEditorType>): void;
+    ExternalEditor(config?: Partial<ExternalEditorConfig>): void;
 
     /**
      * Use this function to batch multiple document changes. Essentially the
@@ -1055,7 +1055,7 @@ export interface SetRangeOptions {
      */
     r1c1?: boolean;
 }
-export interface ExternalEditorType {
+export interface ExternalEditorConfig {
 
     /**
      * list of dependencies to highlight. we support undefined entries in
@@ -1074,6 +1074,20 @@ export interface ExternalEditorType {
      * practice.
      */
     update: ExternalEditorCallback;
+
+    /**
+     * a list of nodes that will serve as editors. when you attach, we will do
+     * an initial pass of context highlighting. we highlight on text changes
+     * and insert references if you make a selection in the spreadsheet while
+     * an editor is focused.
+     */
+    nodes: HTMLElement[];
+
+    /**
+     * assume that we're editing a formula. does not require leading `=`.
+     * defaults to `true` for historical reasons.
+     */
+    assume_formula?: boolean;
 }
 export type DependencyList = Array<IArea | ICellAddress | undefined>;
 export type ExternalEditorCallback = (selection?: string) => DependencyList | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "27.5.2",
+  "version": "27.7.6",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -15,9 +15,9 @@
     "@types/node": "^20.4.0",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
-    "archiver": "^5.3.0",
+    "archiver": "^6.0.1",
     "cssnano": "^6.0.0",
-    "esbuild": "^0.18.11",
+    "esbuild": "^0.19.2",
     "eslint": "^8.19.0",
     "fast-xml-parser": "^4.0.7",
     "html-minifier": "^4.0.0",

package/treb-calculator/src/calculator.ts

@@ -180,7 +180,11 @@ export class Calculator extends Graph {
 
   // FIXME: need a way to share/pass parser flags
 
-  public readonly parser: Parser = new Parser();
+  // public readonly parser: Parser = new Parser();
+  /** localized parser instance. we're sharing. */
+  protected get parser(): Parser {
+    return this.model.parser;
+  }
 
   protected readonly library = new FunctionLibrary();
 
@@ -192,10 +196,14 @@ export class Calculator extends Graph {
   // protected graph: Graph = new Graph(); // |null = null;
   // protected status: GraphStatus = GraphStatus.OK;
 
+  /*
   // FIXME: why is this a separate class? [actually is this a composition issue?]
   protected expression_calculator = new ExpressionCalculator(
       this.library,
       this.parser);
+    */
+
+  protected expression_calculator: ExpressionCalculator;
 
   /** the next calculation must do a full rebuild -- set on reset */
   protected full_rebuild_required = false;
@@ -204,6 +212,9 @@ export class Calculator extends Graph {
 
     super();
 
+    this.expression_calculator = new ExpressionCalculator(this.library, this.parser);
+
+
     // at the moment options are only used here; in the future
     // we may need to extend handling.
 
@@ -1380,64 +1391,6 @@ export class Calculator extends Graph {
     return map;
   }
 
-  /** wrapper method ensures it always returns an Area (instance, not interface) */
-  public ResolveArea(address: string|ICellAddress|IArea, active_sheet: Sheet): Area {
-    const resolved = this.ResolveAddress(address, active_sheet);
-    return IsCellAddress(resolved) ? new Area(resolved) : new Area(resolved.start, resolved.end);
-  }
-
-  /** 
-   * moved from embedded sheet. also modified to preserve ranges, so it
-   * might return a range (area). if you are expecting the old behavior
-   * you need to check (perhaps we could have a wrapper, or make it optional?)
-   * 
-   * Q: why does this not go in grid? or model? (...)
-   * Q: why are we not preserving absoute/relative? (...)
-   * 
-   */
-   public ResolveAddress(address: string|ICellAddress|IArea, active_sheet: Sheet): ICellAddress|IArea {
-    
-    if (typeof address === 'string') {
-      const parse_result = this.parser.Parse(address);
-      if (parse_result.expression && parse_result.expression.type === 'address') {
-        this.ResolveSheetID(parse_result.expression, undefined, active_sheet);
-        return {
-          row: parse_result.expression.row,
-          column: parse_result.expression.column,
-          sheet_id: parse_result.expression.sheet_id,
-        };
-      }
-      else if (parse_result.expression && parse_result.expression.type === 'range') {
-        this.ResolveSheetID(parse_result.expression, undefined, active_sheet);
-        return {
-          start: {
-            row: parse_result.expression.start.row,
-            column: parse_result.expression.start.column,
-            sheet_id: parse_result.expression.start.sheet_id,
-          },
-          end: {
-            row: parse_result.expression.end.row,
-            column: parse_result.expression.end.column,
-          }
-        };
-      }
-      else if (parse_result.expression && parse_result.expression.type === 'identifier') {
-
-        // is named range guaranteed to have a sheet ID? (I think yes...)
-
-        const named_range = this.model.named_ranges.Get(parse_result.expression.name);
-        if (named_range) {
-          return named_range;
-        }
-      }
-
-      return { row: 0, column: 0 }; // default for string types -- broken
-
-    }
-
-    return address; // already range or address
-
-  }
 
   /** moved from embedded sheet */
   public Evaluate(expression: string, active_sheet?: Sheet, options: EvaluateOptions = {}) {
@@ -1487,7 +1440,7 @@ export class Calculator extends Graph {
             }
           }
 
-          this.ResolveSheetID(unit, undefined, active_sheet);
+          this.model.ResolveSheetID(unit, undefined, active_sheet);
         }
         return true;
       });
@@ -1813,48 +1766,6 @@ export class Calculator extends Graph {
 
   }
 
-  /**
-   * returns false if the sheet cannot be resolved, which probably
-   * means the name changed (that's the case we are working on with
-   * this fix).
-   */
-  public ResolveSheetID(expr: UnitAddress|UnitRange, context?: ICellAddress, active_sheet?: Sheet): boolean {
-
-    const target = expr.type === 'address' ? expr : expr.start;
-
-    if (target.sheet_id) {
-      return true;
-    }
-
-    if (target.sheet) {
-      const sheet = this.model.sheets.Find(target.sheet);
-      if (sheet) {
-        target.sheet_id = sheet.id;
-        return true;
-      }
-
-      /*
-      const lc = target.sheet.toLowerCase();
-      for (const sheet of this.model.sheets.list) {
-        if (sheet.name.toLowerCase() === lc) {
-          target.sheet_id = sheet.id;
-          return true;
-        }
-      }
-      */
-    }
-    else if (context?.sheet_id) {
-      target.sheet_id = context.sheet_id;
-      return true;
-    }
-    else if (active_sheet?.id) {
-      target.sheet_id = active_sheet.id;
-      return true;
-    }
-
-    return false; // the error
-
-  }
 
   // --- protected -------------------------------------------------------------
 
@@ -1866,13 +1777,13 @@ export class Calculator extends Graph {
 
     switch (expr.type) {
       case 'address':
-        if (this.ResolveSheetID(expr, context)) {
+        if (this.model.ResolveSheetID(expr, context)) {
           return new Area(expr);
         }
         break;
 
       case 'range':
-        if (this.ResolveSheetID(expr, context)) {
+        if (this.model.ResolveSheetID(expr, context)) {
           return new Area(expr.start, expr.end);
         }
         break;

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

@@ -31,7 +31,7 @@ import type {
   GridSelection, CellEvent, FunctionDescriptor, 
   AnnotationViewData,
   AnnotationType, 
-  ExternalEditorType,
+  ExternalEditorConfig,
 } from 'treb-grid';
 
 import {
@@ -355,7 +355,7 @@ export class EmbeddedSpreadsheet {
 
   /** localized parser instance. we're sharing. */
   protected get parser(): Parser {
-    return this.calculator.parser;
+    return this.model.parser;
   }
 
   /** for destruction */
@@ -659,7 +659,7 @@ export class EmbeddedSpreadsheet {
     // if we don't have a container. that's distinct (at the moment)
     // from headless, which is a state that can change.
 
-    this.grid = new Grid(grid_options, this.parser, this.model, undefined, !!container);
+    this.grid = new Grid(grid_options, this.model, undefined, !!container);
 
     if (this.options.headless) {
       this.grid.headless = true; // FIXME: move into grid options
@@ -1177,8 +1177,8 @@ export class EmbeddedSpreadsheet {
    * to support outside tooling by highlighting a list of arguments and 
    * responding to selection.
    */
-  public ExternalEditor(editor?: Partial<ExternalEditorType>) {
-    this.grid.ExternalEditor(editor);
+  public ExternalEditor(config?: Partial<ExternalEditorConfig>) {
+    this.grid.ExternalEditor(config);
   }
 
   /**
@@ -1846,7 +1846,7 @@ export class EmbeddedSpreadsheet {
    * @param reference 
    */
   public InsertTable(range?: RangeReference, options: InsertTableOptions = {}) {
-    const area = range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : this.GetSelectionReference().area;
+    const area = range ? this.model.ResolveArea(range, this.grid.active_sheet) : this.GetSelectionReference().area;
 
     let theme = options.theme;
     if (typeof theme === 'number') {
@@ -1928,7 +1928,7 @@ export class EmbeddedSpreadsheet {
     let target: IRectangle | Partial<Area> | undefined;
 
     if (rect) {
-      target = Rectangle.IsRectangle(rect) ? rect : this.calculator.ResolveArea(rect, this.grid.active_sheet);
+      target = Rectangle.IsRectangle(rect) ? rect : this.model.ResolveArea(rect, this.grid.active_sheet);
     }
 
     if (argument_separator && argument_separator !== this.parser.argument_separator) {
@@ -2273,7 +2273,7 @@ export class EmbeddedSpreadsheet {
 
     // API v1 OK
 
-    this.grid.MergeCells(range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined);
+    this.grid.MergeCells(range ? this.model.ResolveArea(range, this.grid.active_sheet) : undefined);
   }
 
   /**
@@ -2287,7 +2287,7 @@ export class EmbeddedSpreadsheet {
 
     // API v1 OK
 
-    this.grid.UnmergeCells(range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined);
+    this.grid.UnmergeCells(range ? this.model.ResolveArea(range, this.grid.active_sheet) : undefined);
   }
 
   /** 
@@ -2996,7 +2996,7 @@ export class EmbeddedSpreadsheet {
     // API v1 OK
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address, this.grid.active_sheet);
+      const reference = this.model.ResolveAddress(address, this.grid.active_sheet);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3016,7 +3016,7 @@ export class EmbeddedSpreadsheet {
   public SetValidation(address: AddressReference, validation?: RangeReference|CellValue[], error?: boolean) {
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address, this.grid.active_sheet);
+      const reference = this.model.ResolveAddress(address, this.grid.active_sheet);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3024,7 +3024,7 @@ export class EmbeddedSpreadsheet {
       this.grid.SetValidation(address, validation, error);
     }
     else {
-      const range = this.calculator.ResolveArea(validation, this.grid.active_sheet);
+      const range = this.model.ResolveArea(validation, this.grid.active_sheet);
       this.grid.SetValidation(address, range, error);
     }
 
@@ -3034,7 +3034,7 @@ export class EmbeddedSpreadsheet {
   public RemoveValidation(address: AddressReference) {
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address);
+      const reference = this.model.ResolveAddress(address);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3045,7 +3045,7 @@ export class EmbeddedSpreadsheet {
   public SetValidationList(address: AddressReference, list: CellValue[]) {
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address);
+      const reference = this.model.ResolveAddress(address);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3056,11 +3056,11 @@ export class EmbeddedSpreadsheet {
   public SetValidationRange(address: AddressReference, range: RangeReference) {
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address);
+      const reference = this.model.ResolveAddress(address);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
-    range = this.calculator.ResolveArea(range);
+    range = this.model.ResolveArea(range);
     this.grid.SetValidation(address, range);
 
   }
@@ -3364,7 +3364,7 @@ export class EmbeddedSpreadsheet {
     // API v1 OK
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address, this.grid.active_sheet);
+      const reference = this.model.ResolveAddress(address, this.grid.active_sheet);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3404,7 +3404,7 @@ export class EmbeddedSpreadsheet {
     // FIXME: we're using the sheet EnsureAddress method, but that should
     // move either in here or into some sort of helper class
 
-    const result = this.calculator.ResolveAddress(reference, this.grid.active_sheet);
+    const result = this.model.ResolveAddress(reference, this.grid.active_sheet);
 
     if (IsCellAddress(result)) {
       return result.sheet_id ? result : undefined;
@@ -3600,7 +3600,7 @@ export class EmbeddedSpreadsheet {
 
     // still for now we can take advantage of that and skip the check.
 
-    this.grid.ApplyBorders2(range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined, borders, {}, width);
+    this.grid.ApplyBorders2(range ? this.model.ResolveArea(range, this.grid.active_sheet) : undefined, borders, {}, width);
 
   }
 
@@ -3623,7 +3623,7 @@ export class EmbeddedSpreadsheet {
     // translate old-style alignment constants (UPDATE: moved to grid)
 
     this.grid.ApplyStyle(
-      range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined, style, delta);
+      range ? this.model.ResolveArea(range, this.grid.active_sheet) : undefined, style, delta);
   }
 
   /**
@@ -3687,7 +3687,7 @@ export class EmbeddedSpreadsheet {
 
     if (typeof value === 'object') {
       if (IsCellAddress(value) || IsArea(value)) {
-        this.grid.SetName(name, this.calculator.ResolveArea(value, this.grid.active_sheet));
+        this.grid.SetName(name, this.model.ResolveArea(value, this.grid.active_sheet));
         return;
       }
     }
@@ -3704,7 +3704,7 @@ export class EmbeddedSpreadsheet {
       switch (parse_result.expression.type) {
         case 'address':
         case 'range':
-          this.grid.SetName(name, this.calculator.ResolveArea(parse_result.expression, this.grid.active_sheet));
+          this.grid.SetName(name, this.model.ResolveArea(parse_result.expression, this.grid.active_sheet));
           return;
       }
       this.grid.SetName(name, undefined, value);
@@ -3730,7 +3730,7 @@ export class EmbeddedSpreadsheet {
 
     // NOTE: AC is handled internally
 
-    this.grid.SetName(name, this.calculator.ResolveArea(range, this.grid.active_sheet));
+    this.grid.SetName(name, this.model.ResolveArea(range, this.grid.active_sheet));
     */
   }
 
@@ -3756,7 +3756,7 @@ export class EmbeddedSpreadsheet {
     // API v1 OK
 
     if (typeof address === 'string') {
-      const reference = this.calculator.ResolveAddress(address, this.grid.active_sheet);
+      const reference = this.model.ResolveAddress(address, this.grid.active_sheet);
       address = IsCellAddress(reference) ? reference : reference.start;
     }
 
@@ -3784,7 +3784,7 @@ export class EmbeddedSpreadsheet {
     let resolved: Area|undefined = undefined; 
 
     if (!!range) {
-      resolved = this.calculator.ResolveArea(range, this.grid.active_sheet);
+      resolved = this.model.ResolveArea(range, this.grid.active_sheet);
       if (resolved.start.sheet_id) {
         if (resolved.start.sheet_id !== this.grid.active_sheet.id) {
           this.grid.ActivateSheetID(resolved.start.sheet_id);
@@ -3826,7 +3826,7 @@ export class EmbeddedSpreadsheet {
       }
     }
 
-    return this.grid.GetRange(this.calculator.ResolveAddress(range, this.grid.active_sheet), options.type);
+    return this.grid.GetRange(this.model.ResolveAddress(range, this.grid.active_sheet), options.type);
 
   }
 
@@ -3855,7 +3855,7 @@ export class EmbeddedSpreadsheet {
 
     if (!range) { return undefined; }
 
-    return this.grid.GetRangeStyle(this.calculator.ResolveAddress(range, this.grid.active_sheet), apply_theme);
+    return this.grid.GetRangeStyle(this.model.ResolveAddress(range, this.grid.active_sheet), apply_theme);
     
   }
 
@@ -3884,7 +3884,7 @@ export class EmbeddedSpreadsheet {
     }
 
     if (range) {
-      const area = this.calculator.ResolveArea(range, this.grid.active_sheet);
+      const area = this.model.ResolveArea(range, this.grid.active_sheet);
 
       if (options.spill && Array.isArray(data)) {
         const rows = data.length;
@@ -3953,7 +3953,7 @@ export class EmbeddedSpreadsheet {
 
     if (!table) {
 
-      let address = this.calculator.ResolveAddress(reference, this.grid.active_sheet);
+      let address = this.model.ResolveAddress(reference, this.grid.active_sheet);
 
       if (!IsCellAddress(address)) {
         address = address.start;
@@ -4703,7 +4703,7 @@ export class EmbeddedSpreadsheet {
 
                 this.parser.Walk(parse_result.expression, (unit) => {
                   if (unit.type === 'address' || unit.type === 'range') {
-                    this.calculator.ResolveSheetID(unit, undefined, this.grid.active_sheet);
+                    this.model.ResolveSheetID(unit, undefined, this.grid.active_sheet);
                   }
                   return true;
                 });

package/treb-embed/style/formula-bar.scss

@@ -127,6 +127,8 @@
         overflow-y: hidden;
         overflow-x: hidden;
 
+        white-space: pre-wrap;
+
         /** 
          * 1.35 is better on safari, seems like a wash on windows.
          * can we browser-limit this? (...)

package/treb-embed/style/theme-defaults.scss

@@ -31,27 +31,43 @@
 $primary-selection-color: #4caaf1;
 $primary-selection-color-unfocused: #acc0cf;
 
-
+/*
 $alternate-selection-color-1: rgb(251, 177, 60);
-//$alternate-selection-color-2: rgb(87, 184, 255);
 $alternate-selection-color-2: rgb(64, 192, 64);
 $alternate-selection-color-3: rgb(182, 109, 13);
 $alternate-selection-color-4: rgb(33, 118, 174);
 $alternate-selection-color-5: rgb(254, 104, 71);
 
-/**
+/ * *
  * slightly darkening colors for text highlighting
  * algo: convert to HSL; if L > .5, regenerate with L = .5; back to RGB (why?)
- */
+ * /
 $text-reference-color-1: rgb(250, 155, 5);
-//$text-reference-color-2: rgb(0, 147, 255);
 $text-reference-color-2: rgb(58, 173, 58);
 $text-reference-color-3: rgb(182, 109, 13);
 $text-reference-color-4: rgb(33, 118, 174);
 $text-reference-color-5: rgb(254, 47, 1);
+*/
 
 .treb-main.treb-main {
 
+  --alternate-selection-color-1: rgb(251, 177, 60);
+  --alternate-selection-color-2: rgb(64, 192, 64);
+  --alternate-selection-color-3: rgb(182, 109, 13);
+  --alternate-selection-color-4: rgb(33, 118, 174);
+  --alternate-selection-color-5: rgb(254, 104, 71);
+  
+  /**
+   * slightly darkening colors for text highlighting
+   * algo: convert to HSL; if L > .5, regenerate with L = .5; back to RGB (why?)
+   */
+  --text-reference-color-1: rgb(224, 138, 0);
+  --text-reference-color-2: rgb(58, 173, 58);
+  --text-reference-color-3: rgb(182, 109, 13);
+  --text-reference-color-4: rgb(33, 118, 174);
+  --text-reference-color-5: rgb(254, 47, 1);
+  
+
   /** 
    * move primary selection focus color to focus-within on the top-level 
    * node, and use a (new) unfocused selection color. name?
@@ -284,29 +300,39 @@ $text-reference-color-5: rgb(254, 47, 1);
   .treb-editor-container>div,
   .treb-overlay-editor {
 
+    [data-highlight-index="1"] { color: var(--text-reference-color-1); }
+    [data-highlight-index="2"] { color: var(--text-reference-color-2); }
+    [data-highlight-index="3"] { color: var(--text-reference-color-3); }
+    [data-highlight-index="4"] { color: var(--text-reference-color-4); }
+    [data-highlight-index="5"] { color: var(--text-reference-color-5); }
+
     /* span:nth-of-type(1n) { */
     span.highlight-1 {
-      color: $text-reference-color-1;
+      color: var(--text-reference-color-1);
     }
 
     /* span:nth-of-type(2n) { */
     span.highlight-2 {
-      color: $text-reference-color-2;
+      // color: $text-reference-color-2;
+      color: var(--text-reference-color-2);
     }
 
     /* span:nth-of-type(3n) { */
     span.highlight-3 {
-      color: $text-reference-color-3;
+      // color: $text-reference-color-3;
+      color: var(--text-reference-color-3);
     }
 
     /* span:nth-of-type(4n) { */
     span.highlight-4 {
-      color: $text-reference-color-4;
+      // color: $text-reference-color-4;
+      color: var(--text-reference-color-4);
     }
 
     /* span:nth-of-type(5n) { */
     span.highlight-5 {
-      color: $text-reference-color-5;
+      // color: $text-reference-color-5;
+      color: var(--text-reference-color-5);
     }
 
   }
@@ -339,23 +365,28 @@ $text-reference-color-5: rgb(254, 47, 1);
     }
 
     .alternate-selection:nth-of-type(1n) {
-      color: $alternate-selection-color-1;
+      // color: $alternate-selection-color-1;
+      color: var(--alternate-selection-color-1);
     }
 
     .alternate-selection:nth-of-type(2n) {
-      color: $alternate-selection-color-2;
+      // color: $alternate-selection-color-2;
+      color: var(--alternate-selection-color-2);
     }
 
     .alternate-selection:nth-of-type(3n) {
-      color: $alternate-selection-color-3;
+      // color: $alternate-selection-color-3;
+      color: var(--alternate-selection-color-3);
     }
 
     .alternate-selection:nth-of-type(4n) {
-      color: $alternate-selection-color-4;
+      // color: $alternate-selection-color-4;
+      color: var(--alternate-selection-color-4);
     }
 
     .alternate-selection:nth-of-type(5n) {
-      color: $alternate-selection-color-5;
+      // color: $alternate-selection-color-5;
+      color: var(--alternate-selection-color-5);
     }
 
     /**