@trebco/treb 30.9.2 → 30.10.1

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v30.9. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v30.10. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map

package/package.json

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

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

@@ -21,6 +21,8 @@
 
 import { type Color, type CellStyle, IsHTMLColor, IsThemeColor, ThemeColorIndex, type ThemeColor } from './style';
 import { ColorFunctions } from './color';
+// import * as LCHColorFunctions from './color2';
+
 import { DOMContext } from './dom-utilities';
 import { Measurement } from 'treb-utils';
 
@@ -107,7 +109,7 @@ export interface Theme {
   theme_colors?: string[];
 
   /** as RGB, so we can adjust them */
-  theme_colors_rgb?: number[][];
+  theme_colors_rgb?: [number, number, number][];
 
   /**
    * cache tinted colors. the way this works is we index by the 
@@ -207,7 +209,8 @@ const TintedColor = (theme: Theme, source: ThemeColor) => {
   let color = theme.tint_cache[index][tint];
   if (!color) {
 
-    const rgb = (theme.theme_colors_rgb ? theme.theme_colors_rgb[index] : [0, 0, 0]) || [0, 0, 0];
+    const rgb: [number, number, number] = (theme.theme_colors_rgb ? theme.theme_colors_rgb[index] : [0, 0, 0]) || [0, 0, 0];
+
     let tinted: {r: number, g: number, b: number};
     if (tint > 0) {
       tinted = ColorFunctions.Lighten(rgb[0], rgb[1], rgb[2], tint * 100, true);
@@ -216,6 +219,21 @@ const TintedColor = (theme: Theme, source: ThemeColor) => {
       tinted = ColorFunctions.Darken(rgb[0], rgb[1], rgb[2], -tint * 100, true);
     }
     color = `rgb(${tinted.r},${tinted.g},${tinted.b})`;
+
+    /*
+    // L is in [0, 100] and the passed tint value is between (-1 and 1). but
+    // is the tint value the desired value, or the adjustment? (...)
+    // looks like it's the adjustment. makes sense I guess if you pick the 
+    // original colors.
+
+    // if the tint value was not originally in perceptual space we might need
+    // to curve it a bit? (...)
+
+    const lch = LCHColorFunctions.RGBToLCH(...rgb);
+    const tinted = LCHColorFunctions.LCHToRGB(lch.l + 50 * tint, lch.c, lch.h);
+    color = `rgb(${tinted.r},${tinted.g},${tinted.b})`;
+    */
+
     theme.tint_cache[index][tint] = color;
 
   }
@@ -624,7 +642,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
       context.fillStyle = color;
       context.fillRect(0, 0, 3, 3);
       const imagedata = context.getImageData(1, 1, 1, 1);
-      return Array.from(imagedata.data);
+      return Array.from(imagedata.data) as [number, number, number];
     });
   }
   

package/treb-charts/style/charts.scss

@@ -55,20 +55,64 @@
    * of times we have to define the same colors.
    */
 
-  // moved // background: var(--treb-chart-background, #fff);
-
-  .series-1  { color: var(--treb-chart-color-series-1,  #80B1D3); }
-  .series-2  { color: var(--treb-chart-color-series-2,  #8DD3C7); }
-  .series-3  { color: var(--treb-chart-color-series-3,  #BEBADA); }
-  .series-4  { color: var(--treb-chart-color-series-4,  #FB8072); }
-  .series-5  { color: var(--treb-chart-color-series-5,  #FDB462); }
-  .series-6  { color: var(--treb-chart-color-series-6,  #B3DE69); }
-  .series-7  { color: var(--treb-chart-color-series-7,  #FCCDE5); }
-  .series-8  { color: var(--treb-chart-color-series-8,  #D9D9D9); }
-  .series-9  { color: var(--treb-chart-color-series-9,  #BC80BD); }
-  .series-10 { color: var(--treb-chart-color-series-10, #CCEBC5); }
-  .series-11 { color: var(--treb-chart-color-series-11, #FFED6F); }
-  .series-12 { color: var(--treb-chart-color-series-12, #FFFFB3); }
+  // lightness offsets for subsequent colors. is there a way we could 
+  // have the charts just use a modulo and an offset? (...) would be 
+  // cleaner maybe
+
+  /* something like this:
+   *
+   * .series-1 { color: var(--theme-color); --base-color: var(--theme-color); }
+   * .segment-2 { color: lch(from var(--base-color) calc(l + 20) c h); }
+   *
+   */
+
+  --segment-2-offset: -20;
+  --segment-3-offset:  10;
+  --segment-4-offset: -10;
+  --segment-5-offset:  20;
+  --segment-6-offset: -25;
+
+  .series-1 { color: var(--treb-applied-theme-color-1); }
+  .series-2 { color: var(--treb-applied-theme-color-2); }
+  .series-3 { color: var(--treb-applied-theme-color-3); }
+  .series-4 { color: var(--treb-applied-theme-color-4); }
+  .series-5 { color: var(--treb-applied-theme-color-5); }
+  .series-6 { color: var(--treb-applied-theme-color-6); }
+
+  .series-7  { color: hsl(from var(--treb-applied-theme-color-1) h s calc(l + var(--segment-2-offset))); }
+  .series-8  { color: hsl(from var(--treb-applied-theme-color-2) h s calc(l + var(--segment-2-offset))); }
+  .series-9  { color: hsl(from var(--treb-applied-theme-color-3) h s calc(l + var(--segment-2-offset))); }
+  .series-10 { color: hsl(from var(--treb-applied-theme-color-4) h s calc(l + var(--segment-2-offset))); }
+  .series-11 { color: hsl(from var(--treb-applied-theme-color-5) h s calc(l + var(--segment-2-offset))); }
+  .series-12 { color: hsl(from var(--treb-applied-theme-color-6) h s calc(l + var(--segment-2-offset))); }
+
+  .series-13 { color: hsl(from var(--treb-applied-theme-color-1) h s calc(l + var(--segment-3-offset))); }
+  .series-14 { color: hsl(from var(--treb-applied-theme-color-2) h s calc(l + var(--segment-3-offset))); }
+  .series-15 { color: hsl(from var(--treb-applied-theme-color-3) h s calc(l + var(--segment-3-offset))); }
+  .series-16 { color: hsl(from var(--treb-applied-theme-color-4) h s calc(l + var(--segment-3-offset))); }
+  .series-17 { color: hsl(from var(--treb-applied-theme-color-5) h s calc(l + var(--segment-3-offset))); }
+  .series-18 { color: hsl(from var(--treb-applied-theme-color-6) h s calc(l + var(--segment-3-offset))); }
+
+  .series-19 { color: hsl(from var(--treb-applied-theme-color-1) h s calc(l + var(--segment-4-offset))); }
+  .series-20 { color: hsl(from var(--treb-applied-theme-color-2) h s calc(l + var(--segment-4-offset))); }
+  .series-21 { color: hsl(from var(--treb-applied-theme-color-3) h s calc(l + var(--segment-4-offset))); }
+  .series-22 { color: hsl(from var(--treb-applied-theme-color-4) h s calc(l + var(--segment-4-offset))); }
+  .series-23 { color: hsl(from var(--treb-applied-theme-color-5) h s calc(l + var(--segment-4-offset))); }
+  .series-24 { color: hsl(from var(--treb-applied-theme-color-6) h s calc(l + var(--segment-4-offset))); }
+
+  .series-25 { color: hsl(from var(--treb-applied-theme-color-1) h s calc(l + var(--segment-5-offset))); }
+  .series-26 { color: hsl(from var(--treb-applied-theme-color-2) h s calc(l + var(--segment-5-offset))); }
+  .series-27 { color: hsl(from var(--treb-applied-theme-color-3) h s calc(l + var(--segment-5-offset))); }
+  .series-28 { color: hsl(from var(--treb-applied-theme-color-4) h s calc(l + var(--segment-5-offset))); }
+  .series-29 { color: hsl(from var(--treb-applied-theme-color-5) h s calc(l + var(--segment-5-offset))); }
+  .series-30 { color: hsl(from var(--treb-applied-theme-color-6) h s calc(l + var(--segment-5-offset))); }
+
+  .series-31 { color: hsl(from var(--treb-applied-theme-color-1) h s calc(l + var(--segment-6-offset))); }
+  .series-32 { color: hsl(from var(--treb-applied-theme-color-2) h s calc(l + var(--segment-6-offset))); }
+  .series-33 { color: hsl(from var(--treb-applied-theme-color-3) h s calc(l + var(--segment-6-offset))); }
+  .series-34 { color: hsl(from var(--treb-applied-theme-color-4) h s calc(l + var(--segment-6-offset))); }
+  .series-35 { color: hsl(from var(--treb-applied-theme-color-5) h s calc(l + var(--segment-6-offset))); }
+  .series-36 { color: hsl(from var(--treb-applied-theme-color-6) h s calc(l + var(--segment-6-offset))); }
 
   /* chart title, at top or bottom */
   .chart-title {

package/treb-export/src/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[],
@@ -178,7 +209,12 @@ export class Importer {
                   if (/^_xll\./.test(unit.name)) {
                     unit.name = unit.name.substring(5);
                   }
-                  else if (/^_xlfn\./.test(unit.name)) {
+                  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);
                   }
                 }
@@ -347,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':
@@ -431,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?)
@@ -442,7 +480,7 @@ export class Importer {
             }
             else {
               console.info("unexpected conditional expression", {rule});
-
+              rule.formula = '';
             }
           }
 
@@ -520,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;
               }
             }           
 
@@ -595,7 +633,7 @@ 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
 
@@ -640,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);
@@ -661,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));
@@ -677,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);
@@ -796,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 });
@@ -864,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);
         }

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';
@@ -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 {