@trebco/treb 28.15.0 → 28.17.4

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); }

package/treb-embed/style/treb-icons.scss

@@ -38,6 +38,12 @@
 
   // --- toolbar ---------------------------------------------------------------
 
+  /* source: bootstrap-icons-1.8.3/text-indent-left.svg */
+  --icon-text-indent: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-left" viewBox="0 0 16 16"><path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m.646 2.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L4.293 8 2.646 6.354a.5.5 0 0 1 0-.708M7 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m-5 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/></svg>');
+
+  /* source: bootstrap-icons-1.8.3/text-indent-right.svg */
+  --icon-text-outdent: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-text-indent-right" viewBox="0 0 16 16"><path d="M2 3.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5m10.646 2.146a.5.5 0 0 1 .708.708L11.707 8l1.647 1.646a.5.5 0 0 1-.708.708l-2-2a.5.5 0 0 1 0-.708zM2 6.5a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5m0 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5"/></svg>');
+
   /* source: bootstrap-icons-1.8.3/text-left.svg */
   --icon-text-align-left: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'> <path fill-rule='evenodd' d='M2 12.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm0-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5z'/> </svg>");
 

package/treb-export/src/import2.ts

@@ -93,7 +93,7 @@ export class Importer {
           ref?: string;
         },
       };
-    }, // ElementTree.Element,
+    },
     shared_formulae: SharedFormulaMap,
     arrays: RangeType[],
     merges: RangeType[],
@@ -117,11 +117,9 @@ export class Importer {
     // console.info(element);
 
     let value: undefined | number | boolean | string;
-    // let type: ValueType = ValueType.undefined;
     let type: SerializedValueType = 'undefined';
 
     let calculated_value: undefined | number | boolean | string;
-    // let calculated_type: ValueType = ValueType.undefined;
     let calculated_type: SerializedValueType = 'undefined';
     
     // QUESTIONS:
@@ -397,7 +395,6 @@ export class Importer {
         if (rule.formula) {
 
           if (typeof rule.formula !== 'string') {
-            console.info("conditional expression", {rule});
             if (rule.formula.t$) {
 
               // the only case (to date) we've seen here is that the attribute 
@@ -407,6 +404,10 @@ export class Importer {
               rule.formula = rule.formula.t$;
 
             }
+            else {
+              console.info("unexpected conditional expression", {rule});
+
+            }
           }
 
           let style = {};
@@ -536,18 +537,6 @@ export class Importer {
           }
         }
 
-        /*
-        const area = sheet.TranslateAddress(element.a$.sqref);
-        if (element.cfRule) {
-          const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
-          for (const rule of rules) {
-            const format = this.ParseConditionalFormat(area, rule);
-            if (format) {
-              conditional_formats.push(format);
-            }
-          }
-        }
-        */
       }
     }
     

package/treb-export/src/workbook-style2.ts

@@ -669,7 +669,7 @@ export class StyleCache {
 
     // indent
 
-    props.indent = xf.indent;
+    props.indent = (typeof xf.indent === 'string') ? Number(xf.indent) : xf.indent;
 
     // wrap
 
@@ -722,6 +722,19 @@ export class StyleCache {
 
   /** map all cell xfs to styles; retain order */
   public CellXfToStyles(): CellStyle[] {
+
+    /*
+    const mapped = this.cell_xfs.map((xf, index) => {
+      const style = this.CellXfToStyle(xf);
+      if (style.font_size?.value && style.font_size.value > 200) {
+        console.info({index, fs: JSON.stringify(style.font_size), style, xf});
+        console.info(this);
+      }
+      return style;
+    });
+    return mapped;
+    */
+
     return this.cell_xfs.map((xf) => this.CellXfToStyle(xf));
   }
 
@@ -1174,40 +1187,14 @@ export class StyleCache {
     
 
     this.borders = composite.map(element => {
-
       const border: BorderStyle = JSON.parse(JSON.stringify(default_border));
 
-      /*
-      // we're relying on these being empty strings -> falsy, not a good look
-
-      if (element.left) {
-        // border.left.style = element.left.a$.style;
-        // border.left.color = Number(element.left.color?.a$?.indexed);
-      }
-
-      if (element.right) {
-        // border.right.style = element.right.a$.style;
-        // border.right.color = Number(element.right.color?.a$?.indexed);
-      }
-
-      if (element.top) {
-        // border.top.style = element.top.a$.style;
-        // border.top.color = Number(element.top.color?.a$?.indexed);
-      }
-
-      if (element.bottom) {
-        // border.bottom.style = element.bottom.a$.style;
-        // border.bottom.color = Number(element.bottom.color?.a$?.indexed);
-      }
-      */
-
       ElementToBorderEdge(element.left, border.left);
       ElementToBorderEdge(element.right, border.right);
       ElementToBorderEdge(element.top, border.top);
       ElementToBorderEdge(element.bottom, border.bottom);
       
       return border;
-
     });
 
     // ---
@@ -1313,6 +1300,7 @@ export class StyleCache {
         if (element.color.a$?.rgb) {
           font.color_argb = element.color.a$.rgb;
         }
+
       }
 
       return font;

package/treb-grid/src/render/tile_renderer.ts

@@ -23,7 +23,8 @@ import type { ICellAddress,
          PreparedText, RenderTextPart,
          Cell, Size, 
          CellStyle,
-         Theme} from 'treb-base-types';
+         Theme,
+         HorizontalAlign} from 'treb-base-types';
 import { TextPartFlag, Style, ValueType, Area, Rectangle, ThemeColor, ThemeColor2 } from 'treb-base-types';
 
 import type { Tile } from '../types/tile';
@@ -146,12 +147,22 @@ export class TileRenderer {
     // flush all, mark dirty and drop areas.
 
     const cells = this.view.active_sheet.cells;
+
+    for (const cell of cells.Iterate()) {
+      if (cell.renderer_data?.overflowed) {
+        cell.renderer_data = undefined;
+        cell.render_clean[this.view.view_index] = false;
+      }
+    }
+
+    /*
     cells.IterateAll(cell => {
       if (cell.renderer_data?.overflowed) {
         cell.renderer_data = undefined;
         cell.render_clean[this.view.view_index] = false;
       }
     });
+    */
 
     for (const overflow_area of this.overflow_areas) {
       overflow_area.tile.dirty = true;
@@ -727,10 +738,22 @@ export class TileRenderer {
     // precalculate indent as string so we can use layout
 
     let indent = '';
+    let align: HorizontalAlign|undefined;
+
     if (style.indent) {
+
       for (let i = 0; i < style.indent; i++) {
         indent += DEFAULT_INDENT;
       }
+
+      align = style.horizontal_align;
+
+      // default might be left or right based on type
+
+      if (!align) {
+        align = (cell.type === ValueType.number || cell.calculated_type === ValueType.number) ? 'right' : 'left';
+      }
+      
     }
 
     if (Array.isArray(formatted)) {
@@ -744,12 +767,13 @@ export class TileRenderer {
       // this is a single line, with number formatting
 
       if (indent) {
-        if (style.horizontal_align === 'left') {
-          formatted.unshift({ text: indent });
-        }
-        else if (style.horizontal_align === 'right') {
+
+        if (align === 'right') {
           formatted.push({ text: indent });
         }
+        else if (align === 'left') {
+          formatted.unshift({ text: indent });
+        }
       }
 
       for (const part of formatted) {
@@ -953,12 +977,12 @@ export class TileRenderer {
             });
 
             if (style.indent) {
-              if (style.horizontal_align === 'left') {
-                line_string.unshift({ text: indent, hidden: false, width: indent_width });
-              }
-              else if (style.horizontal_align === 'right') {
+              if (align === 'right') {
                 line_string.push({ text: indent, hidden: false, width: indent_width });
               }
+              else if (align === 'left') {
+                line_string.unshift({ text: indent, hidden: false, width: indent_width });
+              }
             }
 
             strings.push(line_string);
@@ -977,12 +1001,12 @@ export class TileRenderer {
           const parts: RenderTextPart[] = [];
 
           if (style.indent) {
-            if (style.horizontal_align === 'left') {
-              line.unshift({ text: indent });
-            }
-            else if (style.horizontal_align === 'right') {
+            if (align === 'right') {
               line.push({ text: indent });
             }
+            else if (align === 'left') {
+              line.unshift({ text: indent });
+            }
           }
 
           let line_width = 0;

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

@@ -978,7 +978,7 @@ export class Grid extends GridBase {
 
         const validated = this.model.named_ranges.ValidateNamed(name);
         if (!validated) {
-          console.warn(`invalid name: ${name}`);
+          console.warn(`invalid name: ${name}`, import_data.names[name]);
           continue;
         }
 
@@ -2044,6 +2044,21 @@ export class Grid extends GridBase {
   }
   */
 
+  public Indent(area?: Area, delta = 0): void {
+
+    if (!area) {
+      if (this.primary_selection.empty) { return; }
+      area = this.primary_selection.area;
+    }
+
+    this.ExecCommand({
+      key: CommandKey.Indent,
+      area, 
+      delta,
+    });
+
+  }
+
   /** updated API method, probably change the name */
   public ApplyBorders2(area?: Area, borders: BorderConstants = BorderConstants.None, color?: Color, width = 1): void {
 
@@ -4972,6 +4987,15 @@ export class Grid extends GridBase {
       }
     }
     else if (array) {
+
+      for (const cell of this.active_sheet.cells.Iterate(selection.area, false)) {
+        if (cell.area) {
+          this.Error(ErrorCode.array);
+          return;
+        }
+      }
+
+      /*
       let existing_array = false;
       this.active_sheet.cells.Apply(selection.area, (element: Cell) => {
         if (element.area) {
@@ -4982,6 +5006,8 @@ export class Grid extends GridBase {
         this.Error(ErrorCode.array);
         return;
       }
+      */
+
     }
 
     if (cell.validation && cell.validation.error) {
@@ -6099,9 +6125,28 @@ export class Grid extends GridBase {
       let real_area = this.active_sheet.RealArea(area);
       if (!target) target = real_area.start;
 
-      let recheck = true;
+      // there has to be a better way to do this... 
+
+      // the operation here is composing the selection by adding all merge
+      // areas. the issue is that when you do that, you might be adding other
+      // cells that are not in the merge area (because the selection has to
+      // be a rectangle) and one of those new cells might itself be merged.
+      // so we need to iterate. there's a lot of duplication here, though.
+
+      recheck_loop: while (true) {
+        for (const cell of this.active_sheet.cells.Iterate(real_area, false)) {
+          if (cell.merge_area && !real_area.ContainsArea(cell.merge_area)) {
+            area.ConsumeArea(cell.merge_area);
+            real_area = this.active_sheet.RealArea(area);
+            continue recheck_loop;
+          }
+        }
+        break;
+      }
 
-      // there has to be a better way to do this...
+      /*
+
+      let recheck = true;
 
       while (recheck) {
         recheck = false;
@@ -6113,6 +6158,7 @@ export class Grid extends GridBase {
           }
         });
       }
+      */
 
       selection.area = new Area({ ...area.start, sheet_id: this.active_sheet.id }, area.end);
       if (target) {