@trebco/treb 28.15.1 → 28.17.4

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v28.15. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v28.17. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -271,6 +271,11 @@ export interface EmbeddedSpreadsheetOptions {
      * change in the future. key modifiers have no effect.
      */
     recalculate_on_f9?: boolean;
+
+    /**
+     * indent/outdent buttons; default false
+     */
+    indent_buttons?: boolean;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "28.15.1",
+  "version": "28.17.4",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {

package/treb-base-types/src/area.ts

@@ -101,7 +101,7 @@ export interface Dimensions {
  * sheet class has a method for reducing infinite ranges to actual
  * populated ranges.
  */
-export class Area implements IArea { // }, IterableIterator<ICellAddress> {
+export class Area implements IArea {
 
   // tslint:disable-next-line:variable-name
   private start_: ICellAddress;
@@ -562,6 +562,7 @@ export class Area implements IArea { // }, IterableIterator<ICellAddress> {
     return new Area(this.start, this.end); // ensure copies
   }
 
+  /* removed, use iterator
   public Array(): ICellAddress[] {
     if (this.entire_column || this.entire_row) throw new Error('can\'t convert infinite area to array');
     const array: ICellAddress[] = new Array<ICellAddress>(this.rows * this.columns);
@@ -578,6 +579,7 @@ export class Area implements IArea { // }, IterableIterator<ICellAddress> {
     }
     return array;
   }
+  */
 
   get left(): Area{
     const area = new Area(this.start_, this.end_);
@@ -637,6 +639,82 @@ export class Area implements IArea { // }, IterableIterator<ICellAddress> {
     return this; // fluent
   }
 
+  /* * 
+   * preferred to straight iterator. actually in this class iterator
+   * is OK but in some other cases we'll want to generate like this
+   * 
+   * eh I don't know about this inline function, is that going to be
+   * optimized out? ...
+   * /
+  public get contents(): Generator<{ row: number, column: number, sheet_id?: number }> { 
+
+    if (this.entire_row || this.entire_column) {
+      throw new Error(`don't iterate infinite area`);
+    }
+
+    const sheet_id = this.start_.sheet_id;
+    const start_column = this.start_.column;
+    const end_column = this.end_.column;
+    const start_row = this.start_.row;
+    const end_row = this.end_.row;
+
+
+    function *generator() {
+      for (let column = start_column; column <= end_column; column++){
+        for (let row = start_row; row <= end_row; row++){
+          yield {column, row, sheet_id};
+        }
+      }
+    }
+  
+    return generator();    
+
+  }
+  */
+
+  /** 
+   * modernizing. this is a proper iterator. generators are prettier
+   * but there's at least some performance cost -- I'm not sure how 
+   * much, but it's non-zero.
+   */
+  public [Symbol.iterator](): Iterator<ICellAddress> {
+
+    if (this.entire_row || this.entire_column) {
+      throw new Error(`don't iterate infinite area`);
+    }
+    
+    let row = this.start_.row;
+    let column = this.start_.column;
+
+    // this now uses "live" references, so if the object were mutated
+    // during iteration the iterator would reflect those changes. which
+    // seems bad, but also correct.
+
+    return {
+      next: () => {
+
+        const value = { column, row, sheet_id: this.start_.sheet_id };
+
+        if (column > this.end_.column) {
+          return { 
+            done: true, 
+            value: undefined,
+          };
+        }
+
+        if (++row > this.end_.row) {
+          row = this.start_.row;
+          column++;
+        }
+        
+        return { value };
+
+      },
+    };
+
+  };
+
+  /* * @deprecated * /
   public Iterate(f: (...args: any[]) => any): void {
     if (this.entire_column || this.entire_row) {
       console.warn(`don't iterate infinite area`);
@@ -648,6 +726,7 @@ export class Area implements IArea { // }, IterableIterator<ICellAddress> {
       }
     }
   }
+  */
 
   /* *
    * testing: we may have to polyfill for IE11, or just not use it at

package/treb-base-types/src/cells.ts

@@ -796,40 +796,33 @@ export class Cells {
     return this.GetRange({row: 0, column: 0}, {row: this.rows_ - 1, column: this.columns_ - 1}, transpose);
   }
 
-  /** simply cannot make this work with overloads (prove me wrong) */
-  public Normalize2(from: ICellAddress, to: ICellAddress): {from: ICellAddress, to: ICellAddress} {
+  /** overload */
+  public Normalize(from: ICellAddress, to: ICellAddress): { from: ICellAddress, to: ICellAddress };
 
-    if (from.column === Infinity) {
-      from = { ...from, column: 0, };
-    }
-
-    if (from.row === Infinity) {
-      from = { ...from, row: 0, };
-    }
-
-    if (to.column === Infinity) {
-      to = { ...to, column: this.columns_ - 1};
-    }
-
-    if (to.row === Infinity) {
-      to = { ...to, row: this.rows_ - 1};
-    }
+  /** overload */
+  public Normalize(from: ICellAddress): { from: ICellAddress };
 
-    return {from, to};
-  }
+  /** overload */
+  public Normalize<K extends ICellAddress|undefined>(from: ICellAddress, to: K): { from: ICellAddress, to: K };
 
-  /** simply cannot make this work with overloads (prove me wrong) */
-  public Normalize1(from: ICellAddress): ICellAddress {
+  /** base */
+  public Normalize(from: ICellAddress, to?: ICellAddress): { from: ICellAddress, to?: ICellAddress } {
 
-    if (from.column === Infinity) {
-      from = { ...from, column: 0, };
+    from = {
+      ...from,
+      row: from.row == Infinity ? 0 : from.row,
+      column: from.column == Infinity ? 0 : from.column,
     }
 
-    if (from.row === Infinity) {
-      from = { ...from, row: 0, };
+    if (to) {
+      to = {
+        ...to,
+        row: to.row == Infinity ? this.rows_ - 1 : to.row,
+        column: to.column == Infinity ? this.columns_ - 1 : to.column,
+      }
     }
 
-    return from;
+    return { from, to };
 
   }
 
@@ -851,7 +844,7 @@ export class Cells {
    */
   public RawValue(from: ICellAddress, to: ICellAddress = from): CellValue | CellValue[][] | undefined {
 
-    ({from, to} = this.Normalize2(from, to));
+    ({from, to} = this.Normalize(from, to));
 
     if (from.row === to.row && from.column === to.column) {
       if (this.data[from.row] && this.data[from.row][from.column]) {
@@ -885,12 +878,7 @@ export class Cells {
   /** gets range as values */
   public GetRange(from: ICellAddress, to?: ICellAddress, transpose = false){
 
-    if (to) {
-      ({from, to} = this.Normalize2(from, to));
-    }
-    else {
-      from = this.Normalize1(from);
-    }
+    ({from, to} = this.Normalize(from, to));
 
     // console.info("getrange", from, to, transpose);
 
@@ -972,7 +960,7 @@ export class Cells {
 
   public GetRange4(from: ICellAddress, to: ICellAddress = from, transpose = false): UnionValue {
 
-    ({from, to} = this.Normalize2(from, to));
+    ({from, to} = this.Normalize(from, to));
 
     if (from.row === to.row && from.column === to.column) {
       if (this.data[from.row] && this.data[from.row][from.column]){
@@ -1008,10 +996,10 @@ export class Cells {
 
   }
 
-  /**
+  /* *
    * apply function to address/area
    * @deprecated - use Apply2
-   */
+   * /
   public Apply(area: Area|ICellAddress, f: (cell: Cell, c?: number, r?: number) => void, create_missing_cells = false): void {
 
     // allow single address
@@ -1050,12 +1038,71 @@ export class Cells {
       }
     }
   }
+  */
 
-  /**
+  /* *
+   * as a replacement for the Apply functions. testing
+   * 
+   * (1) it seems like almost no one uses the cell address, so returning
+   *     it just adds a wasteful destructuring to every loop iteration.
+   * 
+   *     actually there's exactly one, and we could work around it. but
+   *     it seems like it might be useful in some cases, so... ?
+   * 
+   * (2) can we consolidate with the IterateAll method (named Iterate)? 
+   *     that would only work if we had the same return type, meaning either
+   *     drop the address from this one or add it to the other one
+   * 
+   * @deprecated use Iterate, if possible
+   * 
+   * /
+  public *IterateArea(area: Area|ICellAddress, create_missing_cells = false) {
+
+    // allow single address
+    if (IsCellAddress(area)) {
+      area = new Area(area);
+    }
+
+    // why not just cap? (...)
+    if (area.entire_column || area.entire_row) {
+      throw new Error(`don't iterate infinite cells`);
+    }
+
+    const start = area.start;
+    const end = area.end;
+
+    if (create_missing_cells){
+      for ( let r = start.row; r <= end.row; r++ ){
+        if (!this.data[r]) this.data[r] = [];
+        const row = this.data[r];
+        for ( let c = start.column; c <= end.column; c++ ){
+          if (!row[c]) row[c] = new Cell();
+          yield { row: r, column: c, cell: row[c] };
+        }
+      }
+    }
+    else {
+      // we can loop over indexes that don't exist, just check for existence
+      for ( let r = start.row; r <= end.row; r++ ){
+        if (this.data[r]){
+          const row = this.data[r];
+          for ( let c = start.column; c <= end.column; c++ ){
+            if (row[c]) {
+              yield { row: r, column: c, cell: row[c] };
+            }
+          }
+        }
+      }
+    }    
+
+  }
+  */
+
+  /* *
    * apply function to address/area
    * 
    * this version lets you abort by returning false from the callback function
-   */
+   * /
   public Apply2(area: Area|ICellAddress, func: (cell: Cell, c?: number, r?: number) => boolean, create_missing_cells = false): void {
 
     // allow single address
@@ -1100,6 +1147,7 @@ export class Cells {
       }
     }
   }
+  */
 
   /**
    * set area. shortcut to reduce overhead. consolidates single value
@@ -1148,11 +1196,108 @@ export class Cells {
   }
 
   /**
+   * replacement for old callback iterator. this is a composite 
+   * of iterating all and iterating an area. I want to remove the
+   * other method, but there are still some calls that use the
+   * cell address.
+   * 
+   * Q: is it possible to use Symbol.iterator with arguments?
+   * A: apparently it is, but how would you call it? (...)
+   */
+  public *Iterate(area?: Area|ICellAddress, create_missing_cells = false) {
+
+    // special case. normally iterating over all cells
+    // doesn't create missing, so we use a simpler loop.
+
+    if (!area && create_missing_cells) {
+      area = new Area({
+        row: 0,
+        column: 0,
+      }, {
+        row: this.rows_ - 1,
+        column: this.columns - 1,
+      });
+    }
+
+    // if we have an area, iterate over the area. we need indexes.
+
+    if (area) {
+      
+      // allow single address
+      if (IsCellAddress(area)) {
+        area = new Area(area);
+      }
+
+      // why not just cap? (...)
+      // if (area.entire_column || area.entire_row) {
+      //  throw new Error(`don't iterate infinite cells`);
+      //}
+
+      if (area.entire_column || area.entire_row) {
+        area = new Area(area.start, area.end);
+        if (area.start.column === Infinity) {
+          area.start.column = 0;
+          area.end.column = this.columns_ - 1;
+        }
+        if (area.start.row === Infinity) {
+          area.start.row = 0;
+          area.end.row = this.rows_ - 1;
+        }
+      }
+
+      const start = area.start;
+      const end = area.end;
+
+      if (create_missing_cells){
+        for ( let r = start.row; r <= end.row; r++ ){
+          if (!this.data[r]) this.data[r] = [];
+          const row = this.data[r];
+          for ( let c = start.column; c <= end.column; c++ ){
+            if (!row[c]) row[c] = new Cell();
+            yield row[c]; // { row: r, column: c, cell: row[c] };
+          }
+        }
+      }
+      else {
+        // we can loop over indexes that don't exist, just check for existence
+        for ( let r = start.row; r <= end.row; r++ ){
+          if (this.data[r]){
+            const row = this.data[r];
+            for ( let c = start.column; c <= end.column; c++ ){
+              if (row[c]) {
+                yield row[c]; // { row: r, column: c, cell: row[c] };
+              }
+            }
+          }
+        }
+      }
+
+    }
+    else {
+
+      // no area; just iterate all cells. implicitly skip undefined cells.
+
+      for (const row of this.data) {
+        if (row) {
+          for (const cell of row) {
+            if (cell) {
+              yield cell;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  /* *
    * iterates over all cells (using loops) and runs function per-cell.
    * FIXME: switch to indexing on empty indexes? (...)
-   */
+   * 
+   * removed in favor of generator-based function
+   * 
+   * /
   public IterateAll(func: (cell: Cell) => void){
-    /*
+    / *
     const row_keys = Object.keys(this.data);
     for (const row of row_keys){
       const n_row = Number(row) || 0;
@@ -1161,7 +1306,7 @@ export class Cells {
         f(this.data[n_row][Number(column_key)]);
       }
     }
-    */
+    * /
     for (const row of this.data) {
       if (row) {
         for (const cell of row) {
@@ -1173,6 +1318,7 @@ export class Cells {
     }
 
   }
+  */
 
   /** moved from sheet, so we can do it non-functional style (for perf) */
   public FlushCellStyles() {

package/treb-calculator/src/calculator.ts

@@ -2475,9 +2475,15 @@ export class Calculator extends Graph {
         const unit = dependencies.ranges[key];
         const range = new Area(unit.start, unit.end);
 
+        for (const address of range) {
+          this.AddLeafVertexEdge(address, vertex);
+        }
+
+        /*
         range.Iterate((address: ICellAddress) => {
           this.AddLeafVertexEdge(address, vertex);
         });
+        */
 
         /*
         for (const address of range) {
@@ -2709,7 +2715,13 @@ export class Calculator extends Graph {
             this.AddArrayEdge(range, address);
           }
           else {
-            range.Iterate((target: ICellAddress) => this.AddEdge(target, address));
+
+            for (const target of range) {
+              this.AddEdge(target, address);
+            }
+
+            // range.Iterate((target: ICellAddress) => this.AddEdge(target, address));
+            
           }
 
 

package/treb-embed/markup/toolbar.html

@@ -47,6 +47,11 @@
     <button data-command="align-bottom" title="Align to bottom"></button>
   </div>
 
+  <div class="group" wide indent-group>
+    <button data-command="outdent" title="Decrease indent"></button>
+    <button data-command="indent" title="Incrase indent"></button>
+  </div>
+
   <div class="group">
     <button data-command="wrap-text" title="Wrap text"></button>
     <button data-command="merge-cells" data-id="merge" data-inactive-title="Merge cells" data-active-title="Unmerge cells"></button>

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -146,6 +146,7 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
     if (this.root) {
 
       const names = this.root.getAttributeNames();
+      console.info({names});
 
       for (let name of names) {
 
@@ -202,8 +203,7 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
         // attrtibute options are in kebab-case while our internal
         // options are still in snake_case.
 
-        name = name.replace(/-/g, '_');
-        attribute_options[name] = this.CoerceAttributeValue(this.root.getAttribute(name));
+        attribute_options[name.replace(/-/g, '_')] = this.CoerceAttributeValue(this.root.getAttribute(name));
 
       }
     }
@@ -910,6 +910,9 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
     if (!sheet.options.file_menu) {
       remove.push(toolbar.querySelector('[file-menu]'));
     }
+    if (!sheet.options.indent_buttons) {
+      remove.push(toolbar.querySelector('[indent-group]'));
+    }
     if (!sheet.options.font_scale) {
       remove.push(toolbar.querySelector('[font-scale]'));
     }

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

@@ -1846,6 +1846,18 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
           });
           break;
 
+        case 'indent':
+        case 'outdent':
+
+          // hmmm. we should actually adjust selection cell-by-cell so
+          // all entries get +1/-1 from their current level. we don't 
+          // want to normalize here. this is unusual.
+
+          // let's make a method here in case we want to use this again
+
+          this.grid.Indent(undefined, (event.command === 'indent') ? 1 : -1);
+          break;
+
         default:
           console.info('unhandled', event.command);
           break;
@@ -2238,11 +2250,15 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
+   * this is a generic version that takes a callback, so we can use
+   * separately from charts. however (atm) we're using leaf vertices that
+   * don't actually calculate, they just indicate the dirty state. so we
+   * won't have access to the result of a calculation in the callback.
+   * 
    * @internal
    * 
-   * @returns an id that can be used to manage the reference
    */
-  public CreateConnectedChart(formula: string, target: HTMLElement, options: EvaluateOptions): number {
+  public CreateConnectedFormula(formula: string, callback?: (instance: ConnectedElementType) => void, options: EvaluateOptions = {}): number {
 
     // FIXME: merge w/ insert annotation?
 
@@ -2254,15 +2270,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     if (argument_separator === ',') {
       this.parser.SetLocaleSettings(DecimalMarkType.Period);
-
-      // this.parser.argument_separator = ArgumentSeparatorType.Comma;
-      // this.parser.decimal_mark = DecimalMarkType.Period;
     }
     else {
       this.parser.SetLocaleSettings(DecimalMarkType.Comma);
-
-      // this.parser.argument_separator = ArgumentSeparatorType.Semicolon;
-      // this.parser.decimal_mark = DecimalMarkType.Comma;
     }
 
     const result = this.parser.Parse(formula);
@@ -2274,19 +2284,41 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     }
     else {
       console.warn("invalid formula", result.error);
+      throw new Error(`invalid formula`);
     }
 
-    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) => {
+      update: callback ? (instance: ConnectedElementType) => {
+        callback.call(0, instance);
+      } : undefined,
+
+    });
+
+    this.calculator.UpdateConnectedElements(this.grid.active_sheet);
+    this.UpdateConnectedElements();
+
+    return id;
+
+  }
+
+  /**
+   * @internal
+   * 
+   * @returns an id that can be used to manage the reference
+   */
+  public CreateConnectedChart(formula: string, target: HTMLElement, options: EvaluateOptions): number {
+
+    const chart = this.CreateChart();
+    chart.Initialize(target);
+
+    const callback = (instance: ConnectedElementType) => {
 
         const parse_result = this.parser.Parse(instance.formula);
 
@@ -2310,14 +2342,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
         chart.Update();
 
-      },
-
-    });
-
-    this.calculator.UpdateConnectedElements(this.grid.active_sheet);
-    this.UpdateConnectedElements();
+    };
 
-    return id;
+    return this.CreateConnectedFormula(formula, callback, options);
 
   }
 

package/treb-embed/src/options.ts

@@ -316,6 +316,11 @@ export interface EmbeddedSpreadsheetOptions {
    */
   insert_function_button?: boolean;
 
+  /**
+   * indent/outdent buttons; default false
+   */
+  indent_buttons?: boolean;
+
 }
 
 /**

package/treb-embed/src/toolbar-message.ts

@@ -80,6 +80,10 @@ export interface RevertIndicatorMessage {
   command: 'revert-indicator';
 }
 
+export interface IndentMessage {
+  command: 'indent'|'outdent';
+}
+
 export type ToolbarMessage 
   = SetColorToolbarMessage 
   | CommentToolbarMessage 
@@ -96,6 +100,7 @@ export type ToolbarMessage
   | TableToolbarMessage
   | CommandToolbarMessage
   | StyleToolbarMessage
+  | IndentMessage
   | NumberFormatToolbarMessage
   | FontScaleToolbarMessage
   ;

package/treb-embed/style/toolbar.scss

@@ -264,6 +264,9 @@ $swatch-size: 18px;
     [data-command=justify-right] { --icon: var(--icon-text-align-right); }
     [data-command=justify-center] { --icon: var(--icon-text-align-center); }
 
+    [data-command=indent] { --icon: var(--icon-text-indent); }
+    [data-command=outdent] { --icon: var(--icon-text-outdent); }
+
     [data-command=align-top] { --icon: var(--icon-text-align-top); }
     [data-command=align-middle] { --icon: var(--icon-text-align-middle); }
     [data-command=align-bottom] { --icon: var(--icon-text-align-bottom); }