@trebco/treb 30.8.2 → 30.10.1

package/treb-export/src/{import2.ts → import.ts}

@@ -35,7 +35,7 @@ import type { SerializedValueType } from 'treb-base-types';
 import type { Sheet} from './workbook-sheet2';
 import { VisibleState } from './workbook-sheet2';
 import type { CellAnchor } from './drawing2/drawing2';
-import { type DOMContent, XMLUtils } from './xml-utils';
+import { type GenericDOMElement, XMLUtils } from './xml-utils';
 
 // import { one_hundred_pixels } from './constants';
 import { ColumnWidthToPixels } from './column-width';
@@ -52,6 +52,55 @@ interface SharedFormula {
 
 interface SharedFormulaMap { [index: string]: SharedFormula }
 
+interface CellElementType {
+  a$: {
+    r?: string;
+    t?: string;
+    s?: string;
+  };
+  v?: string|number|{
+    t$: string;
+    a$?: Record<string, string>; // DOMContent;
+  }; 
+  f?: string|{ 
+    t$: string;
+    a$?: {
+      si?: string;
+      t?: string;
+      ref?: string;
+    },
+  };
+};
+
+interface ConditionalFormatRule {
+  a$: {
+    type?: string;
+    dxfId?: string;
+    priority?: string;
+    operator?: string;
+  };
+  formula?: string|[number,number]|{t$: string};
+  colorScale?: {
+    cfvo?: {
+      a$: {
+        type?: string;
+        val?: string;
+      }
+    }[];
+    color?: {
+      a$: {
+        rgb?: string;
+        theme?: string;
+        tint?: string;
+      }
+    }[];
+  };
+}
+
+const ElementHasTextNode = (test: unknown): test is {t$: string} => {
+  return typeof test === 'object' && typeof (test as {$t: string}).$t !== 'undefined';
+}
+
 export class Importer {
 
   // FIXME: need a way to share/pass parser flags
@@ -76,25 +125,7 @@ export class Importer {
 
   public ParseCell(
     sheet: Sheet,
-    element: {
-      a$: {
-        r?: string;
-        t?: string;
-        s?: string;
-      };
-      v?: string|number|{
-        t$: string;
-        a$?: DOMContent;
-      }; 
-      f?: string|{ 
-        t$: string;
-        a$?: {
-          si?: string;
-          t?: string;
-          ref?: string;
-        },
-      };
-    },
+    element: CellElementType,
     shared_formulae: SharedFormulaMap,
     arrays: RangeType[],
     merges: RangeType[],
@@ -166,20 +197,31 @@ export class Importer {
           // doing it like this is sloppy (also does not work properly).
           value = '=' + formula.replace(/^_xll\./g, '');
 
-          const parse_result = this.parser.Parse(formula); // l10n?
-          if (parse_result.expression) {
-            this.parser.Walk(parse_result.expression, (unit) => {
-              if (unit.type === 'call') {
-                if (/^_xll\./.test(unit.name)) {
-                  unit.name = unit.name.substring(5);
-                }
-                else if (/^_xlfn\./.test(unit.name)) {
-                  unit.name = unit.name.substring(6);
+          // drop the formula if it's a ref error, we can't handle this
+          if (/#REF/.test(formula)) {
+            value = formula;
+          }
+          else {
+            const parse_result = this.parser.Parse(formula); // l10n?
+            if (parse_result.expression) {
+              this.parser.Walk(parse_result.expression, (unit) => {
+                if (unit.type === 'call') {
+                  if (/^_xll\./.test(unit.name)) {
+                    unit.name = unit.name.substring(5);
+                  }
+                  if (/^_xlfn\./.test(unit.name)) {
+                    console.info("xlfn:", unit.name);
+                    unit.name = unit.name.substring(6);
+                  }
+                  if (/^_xlws\./.test(unit.name)) {
+                    console.info("xlws:", unit.name);
+                    unit.name = unit.name.substring(6);
+                  }
                 }
-              }
-              return true;
-            });
-            value = '=' + this.parser.Render(parse_result.expression, { missing: '' });
+                return true;
+              });
+              value = '=' + this.parser.Render(parse_result.expression, { missing: '' });
+            }
           }
 
           if (typeof element.f !== 'string') {
@@ -341,11 +383,13 @@ export class Importer {
 
   }
 
-  public ParseConditionalFormat(address: RangeType|AddressType, rule: any): ConditionalFormat|ConditionalFormat[]|undefined {
+  public ParseConditionalFormat(address: RangeType|AddressType, rule: ConditionalFormatRule): ConditionalFormat|ConditionalFormat[]|undefined {
 
     const area = this.AddressToArea(address);
     const operators = ConditionalFormatOperators;
 
+    // console.info({rule});
+
     switch (rule.a$.type) {
       case 'duplicateValues':
       case 'uniqueValues':
@@ -425,7 +469,7 @@ export class Importer {
         if (rule.formula) {
 
           if (typeof rule.formula !== 'string') {
-            if (rule.formula.t$) {
+            if (ElementHasTextNode(rule.formula)) {
 
               // the only case (to date) we've seen here is that the attribute 
               // is "xml:space=preserve", which we can ignore (are you sure?)
@@ -436,7 +480,7 @@ export class Importer {
             }
             else {
               console.info("unexpected conditional expression", {rule});
-
+              rule.formula = '';
             }
           }
 
@@ -514,7 +558,7 @@ export class Importer {
             else if (color_element.a$.theme) {
               (color as ThemeColor).theme = Number(color_element.a$.theme) || 0;
               if (color_element.a$.tint) {
-                (color as ThemeColor).tint = Math.round(color_element.a$.tint * 1000) / 1000;
+                (color as ThemeColor).tint = Math.round(Number(color_element.a$.tint) * 1000) / 1000;
               }
             }           
 
@@ -589,7 +633,34 @@ export class Importer {
 
     const annotations: AnchoredAnnotation[] = [];
 
-    const FindAll: (path: string) => any[] = XMLUtils.FindAll.bind(XMLUtils, sheet.sheet_data);
+    const FindAll: <T = GenericDOMElement>(path: string) => T[] = XMLUtils.FindAll.bind(XMLUtils, sheet.sheet_data);
+
+    // tab color
+
+    const tab_color_element = FindAll('worksheet/sheetPr/tabColor');
+
+    let tab_color: Color|undefined;
+    
+    if (tab_color_element?.[0]) {
+
+      const element = tab_color_element[0];
+      if (element.a$?.theme) {
+        tab_color = { theme: Number(element.a$.theme) };
+        if (element.a$?.tint) {
+          tab_color.tint = Number(element.a$.tint);
+        }
+      }
+      if (element.a$?.rgb) {
+        const argb = element.a$.rgb;
+        tab_color = {
+          text: '#' + (
+            argb.length > 6 ?
+            argb.substr(argb.length - 6) :
+            argb),
+        };
+      }
+
+    }
 
     // conditionals 
 
@@ -607,7 +678,7 @@ export class Importer {
           if (element.cfRule) {
             const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
             for (const rule of rules) {
-              const format = this.ParseConditionalFormat(area, rule);
+              const format = this.ParseConditionalFormat(area, rule as unknown as ConditionalFormatRule);
               if (format) {
                 if (Array.isArray(format)) {
                   conditional_formats.push(...format);
@@ -628,7 +699,7 @@ export class Importer {
     const merge_cells = FindAll('worksheet/mergeCells/mergeCell');
 
     for (const element of merge_cells) {
-      if (element.a$.ref) {
+      if (element.a$?.ref) {
         const merge = sheet.TranslateAddress(element.a$.ref);
         if (is_range(merge)) {
           merges.push(ShiftRange(merge, -1, -1));
@@ -644,7 +715,7 @@ export class Importer {
       const ref = entry.a$?.sqref;
       const formula = entry.formula1;
 
-      if (ref && formula && type === 'list') {
+      if (ref && formula && typeof formula === 'string' && type === 'list') {
         // let address: ICellAddress|undefined;
         let validation: DataValidation|undefined;
         let parse_result = this.parser.Parse(ref);
@@ -763,8 +834,8 @@ export class Importer {
 
       }
       else {
-        reference = child.__location || '';
-        text = child.__display || '';
+        reference = typeof child.__location === 'string' ? child.__location : '';
+        text = typeof child.__display === 'string' ? child.__display : '';
       }
 
       links.push({ address, reference, text });
@@ -831,11 +902,10 @@ export class Importer {
         row_heights[row_index - 1] = height;
       }
 
-      let cells = row.c || [];
-      if (!Array.isArray(cells)) { cells = [cells]; }
+      const cells = row.c ? Array.isArray(row.c) ? row.c : [row.c] : [];
 
       for (const element of cells) {
-        const cell = this.ParseCell(sheet, element, shared_formulae, arrays, merges, links); // , validations);
+        const cell = this.ParseCell(sheet, element as unknown as CellElementType, shared_formulae, arrays, merges, links); // , validations);
         if (cell) {
           data.push(cell);
         }
@@ -1120,7 +1190,8 @@ export class Importer {
             type = 'treb-chart';
             func = 'Box.Plot';
             if (series?.length) {
-              args[0] = `Group(${series.map(s => `Series(${s.title || ''},,${s.values||''})` || '').join(', ')})`;
+              args[0] = `Group(${series.map(s => `Series(${s.title || ''},,${s.values||''})`).join(', ')})`;
+              console.info("S?", {series}, args[0])
             }
             args[1] = descriptor.chart.title;
             break;
@@ -1129,7 +1200,7 @@ export class Importer {
             type = 'treb-chart';
             func = 'Scatter.Line';
             if (series && series.length) {
-              args[0] = `Group(${series.map(s => `Series(${s.title || ''},${s.categories||''},${s.values||''})` || '').join(', ')})`;
+              args[0] = `Group(${series.map(s => `Series(${s.title || ''},${s.categories||''},${s.values||''})`).join(', ')})`;
             }
             args[1] = descriptor.chart.title;
             break;
@@ -1165,7 +1236,7 @@ export class Importer {
 
             if (series) {
               if (series.length > 1) {
-                args[0] = `Group(${series.map(s => `Series(${s.title || ''},,${s.values||''})` || '').join(', ')})`;
+                args[0] = `Group(${series.map(s => `Series(${s.title || ''},,${s.values||''})`).join(', ')})`;
               }
               else if (series.length === 1) {
                 if (series[0].title) {
@@ -1289,6 +1360,7 @@ export class Importer {
       default_column_width,
       column_widths,
       row_heights,
+      tab_color,
       row_styles,
       annotations,
       conditional_formats,

package/treb-export/src/index.worker.ts

@@ -23,7 +23,7 @@ import type { ImportedSheetData } from 'treb-base-types';
 import type { SerializedModel } from 'treb-data-model';
 
 import { Exporter } from './export';
-import { Importer } from './import2';
+import { Importer } from './import';
 
 const ctx: Worker = self as unknown as Worker;
 const exporter = new Exporter();

package/treb-export/src/workbook2.ts

@@ -20,10 +20,10 @@
  */
 
 import { XMLParser } from 'fast-xml-parser';
-import { XMLUtils, XMLOptions, XMLOptions2 } from './xml-utils';
+import { XMLUtils, XMLOptions2 } from './xml-utils';
 
 // const xmlparser = new XMLParser();
-const xmlparser1 = new XMLParser(XMLOptions);
+// const xmlparser1 = new XMLParser(XMLOptions);
 const xmlparser2 = new XMLParser(XMLOptions2);
 
 // import * as he from 'he';
@@ -45,10 +45,10 @@ import type { SerializedNamed } from 'treb-data-model';
 export const ConditionalFormatOperators: Record<string, string> = {
   greaterThan: '>',
   greaterThanOrEqual: '>=',
-  greaterThanOrEquals: '>=',
+  // greaterThanOrEquals: '>=',
   lessThan: '<',
   lessThanOrEqual: '<=',
-  lessThanOrEquals: '<=',
+  // lessThanOrEquals: '<=',
   equal: '=',
   notEqual: '<>',
 };
@@ -514,7 +514,8 @@ export class Workbook {
     const data = this.zip.Get(reference.replace(/^../, 'xl'));
     if (!data) { return undefined; }
 
-    const xml = xmlparser1.parse(data);
+    // const xml = xmlparser1.parse(data);
+    const xml = xmlparser2.parse(data);
 
     const result: ChartDescription = {
       type: ChartType.Unknown
@@ -532,8 +533,8 @@ export class Workbook {
         if (typeof node === 'string') {
           result.title = node;
         }
-        else if (node.text__) {
-          result.title = node.text__; // why is this not quoted, if the later one is quoted? is this a reference?
+        else if (node.t$) {
+          result.title = node.t$; // why is this not quoted, if the later one is quoted? is this a reference?
         }
       }
       else {
@@ -553,14 +554,14 @@ export class Workbook {
         series_nodes = [series_nodes];
       }
 
-      // console.info("SN", series_nodes);
+      // console.info({SN: series_nodes});
 
       for (const series_node of series_nodes) {
 
         let index = series.length;
         const order_node = series_node['c:order'];
         if (order_node) {
-          index = Number(order_node.__val||0) || 0;
+          index = Number(order_node.a$?.val||0) || 0;
         }
 
         const series_data: ChartSeries = {};
@@ -626,7 +627,7 @@ export class Workbook {
       result.type = ChartType.Bar;
       // console.info("BD", node);
       if (node['c:barDir']) {
-        if (node['c:barDir'].__val === 'col') {
+        if (node['c:barDir'].a$?.val === 'col') {
           result.type = ChartType.Column;
         }
       }
@@ -682,7 +683,7 @@ export class Workbook {
 
       const ex_series = XMLUtils.FindAll(xml, 'cx:chartSpace/cx:chart/cx:plotArea/cx:plotAreaRegion/cx:series');
       if (ex_series?.length) {
-        if (ex_series.every(test => test.__layoutId === 'boxWhisker')) {
+        if (ex_series.every(test => test.a$?.layoutId === 'boxWhisker')) {
           result.type = ChartType.Box;
           result.series = [];
           const data = XMLUtils.FindAll(xml, 'cx:chartSpace/cx:chartData/cx:data'); // /cx:data/cx:numDim/cx:f');
@@ -693,9 +694,9 @@ export class Workbook {
 
             const series: ChartSeries = {};
 
-            const id = Number(entry['cx:dataId']?.['__val']);
+            const id = Number(entry['cx:dataId']?.a$?.val);
             for (const data_series of data) {
-              if (Number(data_series.__id) === id) {
+              if (Number(data_series.a$?.id) === id) {
                 series.values = data_series['cx:numDim']?.['cx:f'] || '';
                 break;
               }

package/treb-export/src/xml-utils.ts

@@ -28,6 +28,26 @@ export interface DOMContent {
   [index: string]: string|DOMContent|string[]|DOMContent[]|number|number[]|undefined;
 }
 
+// --- take 2 ------------------------------------------------------------------
+
+export interface XMLKeys {
+  a$?: Record<string, string>;
+  t$?: string;
+}
+
+export type DOMElementType = number|number[]|string|string[]|(BaseDOM & XMLKeys)|(BaseDOM & XMLKeys)[];
+
+export interface BaseDOM {
+  [key: string]: DOMElementType;
+}
+
+export type GenericDOMElement = BaseDOM & XMLKeys;
+
+export const GenericDOMArray = (element: GenericDOMElement|GenericDOMElement[]): GenericDOMElement[] => element ? Array.isArray(element) ? element : [element] : [];
+
+// -----------------------------------------------------------------------------
+
+
 /**
  * not sure why we have to do this, but filter attributes that 
  * have value === undefined
@@ -76,6 +96,7 @@ export const PatchXMLBuilder = (options: Partial<XmlBuilderOptions>) => {
 
 //////////////////
 
+/*
 export const XMLOptions: Partial<X2jOptions> = {
   ignoreAttributes: false,
   attributeNamePrefix: '__',
@@ -84,6 +105,7 @@ export const XMLOptions: Partial<X2jOptions> = {
   tagValueProcessor: XMLTagProcessor,
   ignoreDeclaration: true,
 };
+*/
 
 /**
  * group attributes under `a$`, and don't add attribute prefixes (should be 
@@ -91,7 +113,6 @@ export const XMLOptions: Partial<X2jOptions> = {
  */
 export const XMLOptions2: Partial<X2jOptions> = {
   ignoreAttributes: false,
-  // attrNodeName: 'a$', // FXP v4
   attributesGroupName: 'a$',
   attributeNamePrefix: '',
   textNodeName: 't$',

package/treb-grid/src/layout/base_layout.ts

@@ -96,6 +96,8 @@ export abstract class BaseLayout {
 
   public header_size: Size = { width: 0, height: 0 };
 
+  public applied_theme_colors: string[] = [];
+
   /**
    * last rendered column. this is used to calculate the limits of
    * cell overflows, which may exceed actual data in the sheet.
@@ -1280,6 +1282,18 @@ export abstract class BaseLayout {
 
   }
 
+  public ApplyThemeColors() {
+
+    // what's the best node for this? (...)
+    
+    if (this.container) {
+      for (const [index, entry] of this.applied_theme_colors.entries()) {
+        this.container.style.setProperty(`--treb-applied-theme-color-${index + 1}`, entry);
+      }
+
+    }
+  }
+
   /**
    * applies theme to nodes, as necessary
    */
@@ -1307,6 +1321,13 @@ export abstract class BaseLayout {
 
     this.dropdown_list.style.font = Style.Font(theme.grid_cell || {});
 
+    // testing
+
+    this.applied_theme_colors = theme.theme_colors?.slice(4, 10) || [];
+    if (this.container) {
+      this.ApplyThemeColors();
+    }
+
   }
 
   public UpdateTotalSize(): void {

package/treb-grid/src/layout/grid_layout.ts

@@ -95,6 +95,8 @@ export class GridLayout extends BaseLayout {
 
     this.container.addEventListener('scroll', () => scroll_callback());
 
+    this.ApplyThemeColors();
+
   }
 
   public ResizeCursor(resize?: 'row'|'column'): void {

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

@@ -967,7 +967,7 @@ export class Grid extends GridBase {
     if (add_to_layout) {
       this.layout.AddAnnotation(annotation);
       if (annotation.data.layout) {
-        this.EnsureAddress(annotation.data.layout.br.address, 1);
+        this.EnsureAddress(annotation.data.layout.br.address, 1, toll_events);
       }
     }
     else {
@@ -1190,7 +1190,7 @@ export class Grid extends GridBase {
     this.QueueLayoutUpdate();
 
     this.StyleDefaultFromTheme();
-        
+
     if (render) {
       this.Repaint(false, false); // true, true);
     }
@@ -1403,6 +1403,10 @@ export class Grid extends GridBase {
 
     // this.tile_renderer.UpdateTheme(); // has reference
 
+    if (this.tab_bar) {
+      this.tab_bar.UpdateTheme();
+    }
+
     if (!initial) {
 
       this.UpdateLayout(); // in case we have changed font size
@@ -1454,7 +1458,7 @@ export class Grid extends GridBase {
 
     if (this.options.tab_bar) {
 
-      this.tab_bar = new TabBar(this.layout, this.model, this.view, this.options, view_node);
+      this.tab_bar = new TabBar(this.layout, this.model, this.view, this.options, this.theme, view_node);
       this.tab_bar.Subscribe((event) => {
         switch (event.type) {
           case 'cancel':
@@ -5936,7 +5940,7 @@ export class Grid extends GridBase {
   /** 
    * if the address is outside of current extent, expand 
    */
-  private EnsureAddress(address: ICellAddress, step = 8): boolean {
+  private EnsureAddress(address: ICellAddress, step = 8, toll_layout = false): boolean {
 
     let expanded = false;
 
@@ -5959,7 +5963,7 @@ export class Grid extends GridBase {
         expanded = true;
       }
 
-      if (expanded) {
+      if (expanded && !toll_layout) {
         this.layout.UpdateTiles();
         this.layout.UpdateContentsSize();
         this.Repaint(true, true);

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

@@ -25,7 +25,7 @@ import type { BaseLayout } from '../layout/base_layout';
 import { MouseDrag } from './drag_mask';
 import type { GridOptions } from './grid_options';
 import { type ScaleEvent, ScaleControl } from './scale-control';
-import { DOMContext } from 'treb-base-types';
+import { DOMContext, ResolveThemeColor, type Theme } from 'treb-base-types';
 
 export interface ActivateSheetEvent {
   type: 'activate-sheet';
@@ -100,6 +100,8 @@ export class TabBar extends EventSource<TabEvent> {
     timeout?: number;
   } = {};
 
+  private tab_color_cache: Map<number, { background: string, foreground: string }> = new Map();
+
   // tslint:disable-next-line: variable-name
   private _visible = false;
 
@@ -133,6 +135,7 @@ export class TabBar extends EventSource<TabEvent> {
       private model: DataModel,
       private view: ViewModel,
       private options: GridOptions,
+      private theme: Theme,
       // private container: HTMLElement,
       view_node: HTMLElement,
     ) {
@@ -236,10 +239,21 @@ export class TabBar extends EventSource<TabEvent> {
     if (active) {
       // tab.classList.add('treb-selected');
       tab.setAttribute('selected', '');
+
+      if (tab.dataset.background_color) {
+        tab.style.backgroundColor = `color-mix(in srgb, ${tab.dataset.background_color} 20%, var(--treb-tab-bar-active-tab-background, #fff))`;
+        tab.style.color = '';
+      }
     }
     else {
       // tab.classList.remove('treb-selected');
       tab.removeAttribute('selected');
+      if (tab.dataset.background_color) {
+        tab.style.backgroundColor = tab.dataset.background_color;
+      }
+      if (tab.dataset.foreground_color) {
+        tab.style.color = tab.dataset.foreground_color;
+      }
     }
   }
 
@@ -419,6 +433,11 @@ export class TabBar extends EventSource<TabEvent> {
 
   }
 
+  public UpdateTheme() {
+    this.tab_color_cache.clear();
+    this.Update();
+  }
+
   /**
    * update tabs from model.
    */
@@ -464,6 +483,24 @@ export class TabBar extends EventSource<TabEvent> {
       const tab = this.DOM.Create('li');
       tab.setAttribute('tabindex', '0');
 
+      if (sheet.tab_color) {
+        const id = sheet.id;
+        if (!this.tab_color_cache.has(id)) {
+          const background = ResolveThemeColor(this.theme, sheet.tab_color);
+          const foreground = ResolveThemeColor(this.theme, { offset: sheet.tab_color });
+          if (background && foreground) {
+            this.tab_color_cache.set(id, { background, foreground });
+          }
+        }
+        const color = this.tab_color_cache.get(id);
+        if (color) {
+          tab.style.backgroundColor = color.background;
+          tab.style.color = color.foreground;
+          tab.dataset.background_color = color.background;
+          tab.dataset.foreground_color = color.foreground;
+        }
+      }
+
       // tab.classList.add('tab');
       tab.style.order = (index * 2).toString();
       tab.role = 'tab';