@trebco/treb 28.13.2 → 28.15.1

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

@@ -76,6 +76,7 @@ export interface CellXf {
   horizontal_alignment?: string;
   vertical_alignment?: string;
   xfid?: number;
+  indent?: number;
 
   // FIXME // apply_font?: boolean;
   // FIXME // apply_border?: boolean;
@@ -157,6 +158,7 @@ export interface StyleOptions {
   vertical_alignment?: string;
   wrap?: boolean;
   fill?: Fill;
+  indent?: number;
 }
 
 
@@ -434,6 +436,8 @@ export class StyleCache {
         break;
     }
 
+    options.indent = composite.indent;
+
     if (composite.fill) {
       fill.pattern_type = 'solid';
       if (composite.fill.text) {
@@ -663,6 +667,10 @@ export class StyleCache {
         break;
     }
 
+    // indent
+
+    props.indent = (typeof xf.indent === 'string') ? Number(xf.indent) : xf.indent;
+
     // wrap
 
     if (xf.wrap_text) {
@@ -714,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));
   }
 
@@ -1091,6 +1112,7 @@ export class StyleCache {
           xf.border === border_index &&
           xf.number_format === number_format_index &&
           !!xf.wrap_text === !!options.wrap &&
+          xf.indent === options.indent &&
           ((!options.horizontal_alignment && !xf.horizontal_alignment) || options.horizontal_alignment === xf.horizontal_alignment) &&
           ((!options.vertical_alignment && !xf.vertical_alignment) || options.vertical_alignment === xf.vertical_alignment)) {
           
@@ -1106,6 +1128,7 @@ export class StyleCache {
       fill: fill_index,
       border: border_index,
       number_format: number_format_index,
+      indent: options.indent,
     };
 
     if (options.horizontal_alignment) {
@@ -1120,44 +1143,6 @@ export class StyleCache {
 
     this.cell_xfs.push(new_xf);
 
-    /*
-
-    // add the node structure
-
-    if (!this.dom) throw new Error('missing dom');
-    const xfs = this.dom.find('./cellXfs');
-
-    if (!xfs) throw new Error('xfs not found');
-    xfs.attrib.count = (Number(xfs.attrib.count || 0) + 1).toString();
-
-    const new_element = Element('xf', {
-      borderId: new_xf.border.toString(),
-      fillId: new_xf.fill.toString(),
-      fontId: new_xf.font.toString(),
-      numFmtId: new_xf.number_format.toString(),
-    });
-
-    if (new_xf.horizontal_alignment || new_xf.vertical_alignment) {
-      const attrs: {[index: string]: string} = {};
-      if (new_xf.horizontal_alignment) {
-        attrs.horizontal = new_xf.horizontal_alignment;
-      }
-      if (new_xf.vertical_alignment) {
-        attrs.vertical = new_xf.vertical_alignment;
-      }
-      if (new_xf.wrap_text) {
-        attrs.wrapText = '1';
-      }
-      new_element.append(Element('alignment', attrs));
-    }
-
-    if (typeof new_xf.xfid !== 'undefined') {
-      new_element.attrib.xfId = new_xf.xfid.toString();
-    }
-
-    xfs.append(new_element);
-    */
-
     return this.cell_xfs.length - 1;
 
   }
@@ -1202,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;
-
     });
 
     // ---
@@ -1255,6 +1214,7 @@ export class StyleCache {
         xf.horizontal_alignment = element.alignment.a$.horizontal;
         xf.vertical_alignment = element.alignment.a$.vertical;
         xf.wrap_text = !!element.alignment.a$.wrapText;
+        xf.indent = element.alignment.a$.indent || undefined;
       }
 
       return xf;
@@ -1340,6 +1300,7 @@ export class StyleCache {
         if (element.color.a$?.rgb) {
           font.color_argb = element.color.a$.rgb;
         }
+
       }
 
       return font;

package/treb-export/src/workbook2.ts

@@ -44,6 +44,7 @@ import { Theme } from './workbook-theme2';
 import { Sheet, VisibleState } from './workbook-sheet2';
 import type { RelationshipMap } from './relationship';
 import { ZipWrapper } from './zip-wrapper';
+import type { CellStyle } from 'treb-base-types';
 
 
 /*
@@ -98,7 +99,23 @@ export interface AnchoredChartDescription {
   anchor: TwoCellAnchor,
 }
 
-export type AnchoredDrawingPart = AnchoredChartDescription|AnchoredImageDescription;
+export interface AnchoredTextBoxDescription {
+  type: 'textbox';
+  style?: CellStyle;
+  paragraphs: { 
+    style?: CellStyle,
+    content: {
+      text: string, 
+      style?: CellStyle 
+    }[],
+  }[];
+  anchor: TwoCellAnchor,
+}
+
+export type AnchoredDrawingPart = 
+    AnchoredChartDescription | 
+    AnchoredTextBoxDescription |
+    AnchoredImageDescription ;
 
 export interface TableFooterType {
   type: 'label'|'formula';
@@ -363,6 +380,107 @@ export class Workbook {
           }
 
         }
+        else {
+
+          let style: CellStyle|undefined;
+
+          const sppr = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:spPr')[0];
+          if (sppr) {
+            style = {};
+            const fill = sppr['a:solidFill'];
+            if (fill) {
+              if (fill['a:schemeClr']?.a$?.val) {
+                let m = (fill['a:schemeClr'].a$.val).match(/accent(\d+)/);
+                if (m) {
+                  style.fill = { theme: Number(m[1]) + 3 }
+                  if (fill['a:schemeClr']['a:lumOff']?.a$?.val) {
+                    const num = Number(fill['a:schemeClr']['a:lumOff'].a$.val);
+                    if (!isNaN(num)) {
+                      style.fill.tint = num / 1e5;
+                    }
+                  }
+                }
+
+              }
+            }
+          }
+
+          const tx = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:txBody')[0];
+          if (tx) {
+
+            const paragraphs: { 
+              style?: CellStyle,
+              content: {
+                text: string, 
+                style?: CellStyle 
+              }[],
+            }[] = [];
+
+            /*
+            const content: {
+              text: string,
+              style?: CellStyle,
+            }[][] = [];
+            */
+
+            const p_list = XMLUtils.FindAll(tx, 'a:p');
+            for (const paragraph of p_list) {
+              const para: { text: string, style?: CellStyle }[] = [];
+              let style: CellStyle|undefined;
+
+              let appr = paragraph['a:pPr'];
+              if (appr) {
+                style = {};
+                if (appr.a$?.algn === 'r') {
+                  style.horizontal_align = 'right';
+                }
+                else if (appr.a$?.algn === 'ctr') {
+                  style.horizontal_align = 'center';
+                }
+              }
+
+              let ar = paragraph['a:r'];
+              if (ar) {
+                if (!Array.isArray(ar)) {
+                  ar = [ar];
+                }
+                for (const line of ar) {
+
+                  const entry: { text: string, style?: CellStyle } = { 
+                    text: line['a:t'] || '',
+                  };
+
+                  // format
+                  const fmt = line['a:rPr'];
+                  if (fmt) {
+                    entry.style = {};
+                    if (fmt.a$?.b === '1') {
+                      entry.style.bold = true;
+                    }
+                    if (fmt.a$?.i === '1') {
+                      entry.style.italic = true;
+                    }
+                  }
+
+                  para.push(entry);
+
+                }
+              }
+
+              paragraphs.push({ content: para, style });
+
+            }
+            
+            results.push({
+              type: 'textbox', 
+              style,
+              paragraphs,
+              anchor,
+            });
+
+          }
+
+        }
 
 
       }

package/treb-grid/src/editors/formula_bar.ts

@@ -29,9 +29,11 @@ import { DOMContext } from 'treb-base-types';
 
 // --- from formula_bar ---
 
+/*
 export interface FormulaBarResizeEvent {
   type: 'formula-bar-resize';
 }
+*/
 
 export interface FormulaButtonEvent {
   type: 'formula-button';
@@ -46,7 +48,7 @@ export interface AddressLabelEvent {
 
 export type FormulaBar2Event
   = FormulaButtonEvent
-  | FormulaBarResizeEvent
+  // | FormulaBarResizeEvent
   | AddressLabelEvent
   ;
 
@@ -172,6 +174,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
     this.InitAddressLabel();
 
+    /*
     if (this.options.insert_function_button) {
       this.button = DOM.Create('button', 'formula-button', inner_node);
       this.button.addEventListener('click', () => {
@@ -179,6 +182,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
         this.Publish({ type: 'formula-button', formula });
       });
     }
+    */
 
     this.container_node = container.querySelector('.treb-editor-container') as HTMLDivElement;
     const target = this.container_node.firstElementChild as HTMLDivElement;
@@ -270,9 +274,18 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     this.RegisterListener(descriptor, 'keydown', this.FormulaKeyDown.bind(this));
     this.RegisterListener(descriptor, 'keyup', this.FormulaKeyUp.bind(this));
 
+    // why is this here, instead of in markup? just an oversight?
+
     if (this.options.expand_formula_button) {
+
+      let focus_related_target: HTMLElement|undefined;
+
       this.expand_button = DOM.Create('button', 'expand-button', inner_node, { 
         events: {
+          focus: (event: FocusEvent) => {
+            focus_related_target = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : undefined;
+          },
+
           click: (event: MouseEvent) => {
             event.stopPropagation();
             event.preventDefault();
@@ -285,6 +298,11 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
             else {
               inner_node.setAttribute('expanded', '');
             }
+
+            if (focus_related_target) {
+              focus_related_target.focus();
+            }
+
           },
         },
       });
@@ -297,6 +315,10 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     return element === this.active_editor?.node;
   }
 
+  public IsExpandButton(element: HTMLElement): boolean {
+    return this.expand_button && (element === this.expand_button);
+  }
+
   public InitAddressLabel() {
 
     this.address_label.contentEditable = 'true';

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

@@ -34,6 +34,7 @@ import type { BaseLayout, TileRange } from '../layout/base_layout';
 import type { DataModel, ViewModel } from '../types/data_model';
 import type { GridOptions } from '../types/grid_options';
 
+const DEFAULT_INDENT = '  '; // two spaces in the current font
 const BASELINE = 'bottom';
 const WK = /webkit/i.test(typeof navigator === 'undefined' ? '' : navigator?.userAgent || '') ? 1 : 0;
 
@@ -723,6 +724,15 @@ export class TileRenderer {
     let override_formatting: string | undefined;
     let formatted = cell.editing ? '' : cell.formatted; // <-- empty on editing, to remove overflows
 
+    // precalculate indent as string so we can use layout
+
+    let indent = '';
+    if (style.indent) {
+      for (let i = 0; i < style.indent; i++) {
+        indent += DEFAULT_INDENT;
+      }
+    }
+
     if (Array.isArray(formatted)) {
 
       // type 1 is a multi-part formatted string; used for number formats.
@@ -733,6 +743,15 @@ export class TileRenderer {
 
       // this is a single line, with number formatting
 
+      if (indent) {
+        if (style.horizontal_align === 'right') {
+          formatted.push({ text: indent });
+        }
+        else if (style.horizontal_align !== 'center') {
+          formatted.unshift({ text: indent });
+        }
+      }
+
       for (const part of formatted) {
         if (part.flag === TextPartFlag.formatting) {
           override_formatting = part.text;
@@ -810,11 +829,14 @@ export class TileRenderer {
 
       // for wrapping
 
-      const bound = cell_width - (2 * this.cell_edge_buffer);
+      let bound = cell_width - (2 * this.cell_edge_buffer);
       const strings: RenderTextPart[][] = [];
 
       if (style.wrap) {
 
+        const indent_width = (indent && style.horizontal_align !== 'center') ? context.measureText(indent).width : 0;
+        bound -= indent_width;
+
         for (const line of md) {
 
           // we should probably normalize whitespace -- because formatting
@@ -921,14 +943,26 @@ export class TileRenderer {
 
             max_width = Math.max(max_width, last.width);
 
-            strings.push(line2.map((metric) => {
+            const line_string = line2.map((metric) => {
               return {
                 ...metric.part,
                 hidden: false, 
                 width: metric.width, 
                 text: metric.text, 
               };
-            }));
+            });
+
+            if (style.indent) {
+              if (style.horizontal_align === 'right') {
+                line_string.push({ text: indent, hidden: false, width: indent_width });
+              }
+              else if (style.horizontal_align !== 'center') {
+                line_string.unshift({ text: indent, hidden: false, width: indent_width });
+              }
+    
+            }
+
+            strings.push(line_string);
 
           }
 
@@ -939,9 +973,20 @@ export class TileRenderer {
 
         // simple case
 
+
         for (const line of md) {
           const parts: RenderTextPart[] = [];
 
+          if (style.indent) {
+            if (style.horizontal_align === 'right') {
+              line.push({ text: indent });
+            }
+            else if (style.horizontal_align !== 'center') {
+              line.unshift({ text: indent });
+            }
+    
+          }
+
           let line_width = 0;
 
           for (const element of line) {

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import type { ICellAddress, AnnotationLayout, IRectangle } from 'treb-base-types';
+import type { ICellAddress, AnnotationLayout, IRectangle, CellStyle } from 'treb-base-types';
 import { Rectangle } from 'treb-base-types';
 
 /**
@@ -97,7 +97,7 @@ export interface ImageAnnotationData {
   
 }
 
-export type AnnotationType = 'treb-chart'|'image'|'external';
+export type AnnotationType = 'treb-chart'|'image'|'textbox'|'external';
 
 /**
  * splitting persisted data from the annotation class. that class might
@@ -182,12 +182,26 @@ export interface AnnotationChartData extends AnnotationDataBase {
   type: 'treb-chart';
 }
 
+export interface AnnotationTextBoxData extends AnnotationDataBase {
+  type: 'textbox';
+  data: {
+    style?: CellStyle;
+    paragraphs: { 
+      style?: CellStyle,
+      content: {
+        text: string, 
+        style?: CellStyle 
+      }[],
+    }[];
+  };
+};
+
 export interface AnnotationExternalData extends AnnotationDataBase {
   type: 'external';
   data: Record<string, string>;
 }
 
-export type AnnotationData = AnnotationChartData | AnnotationImageData | AnnotationExternalData;
+export type AnnotationData = AnnotationChartData | AnnotationImageData | AnnotationExternalData | AnnotationTextBoxData;
 
 /**
  * why is this a class? it doesn't do anything.

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

@@ -634,6 +634,14 @@ export class Grid extends GridBase {
               this.editing_annotation = annotation;
               this.layout.ShowSelections(true);
             }
+            else if (this.formula_bar?.IsExpandButton(event.relatedTarget as HTMLElement)) {
+
+              // for this particular case, do nothing. basically you are 
+              // expanding/contracting the formula bar. we want to preserve
+              // the selected annotation, if any. after the operation we'll
+              // restore focus.
+
+            }
             else {
               if (this.selected_annotation === annotation) {
                 this.selected_annotation = undefined;
@@ -970,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;
         }
 

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

@@ -68,8 +68,9 @@ export interface GridOptions {
   /* * show delete tab in the tab bar */
   // delete_tab?: boolean;
 
-  /** show the "insert function" button. requires formula bar. */
+  /* * show the "insert function" button. requires formula bar. * /
   insert_function_button?: boolean;
+  */
 
   /** button to increase/reduce size of formula editor */
   expand_formula_button?: boolean;
@@ -97,7 +98,7 @@ export const DefaultGridOptions: GridOptions = {
   formula_bar: true,
   add_tab: false,
   tab_bar: 'auto',
-  insert_function_button: false,
+  // insert_function_button: false,
   expand_formula_button: false,
   expand: true,
   repaint_on_cell_change: true,

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

@@ -92,10 +92,17 @@ export class NamedRangeCollection {
       console.warn('invalid name');
       return false;
     }
+
+    // why is this considered invalid here? I've seen it done. 
+    // maybe something we're doing with these ranges doesn't 
+    // collapse them? (...)
+
     if (range.entire_column || range.entire_row) {
-      console.warn('invalid range');
+      console.info({range});
+      console.warn(`invalid range`);
       return false;
     }
+
     this.forward[validated] = range;
     if (apply) {
       this.RebuildList();