@trebco/treb 30.8.2 → 30.9.2

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v30.8. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v30.9. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -1779,6 +1779,9 @@ export interface SerializedSheet {
     /** sheet name */
     name?: string;
 
+    /** tab color */
+    tab_color?: Color;
+
     /** current active selection */
     selection: SerializedGridSelection;
 

package/package.json

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

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

@@ -19,6 +19,8 @@
  * 
  */
 
+
+
 /**
  * utility functions, primarily for adjusting lightness. since we generally
  * traffic in RGB (or symbolic colors) that requires translating to/from HSL.
@@ -120,5 +122,35 @@ export const ColorFunctions = {
     return p;
   },
 
+  ////////////////
+
+
+  GetLuminance: (r: number, g: number, b: number): number => {
+    const a = [r, g, b].map(v => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return 0.2126 * a[0] + 0.7152 * a[1] + 0.0722 * a[2];
+  },
+  
+  GetContrastRatio: (data: [number, number]): number => {
+    data.sort((a, b) => b - a);
+    return (data[0] + 0.05) / (data[1] + 0.05);
+  },
+  
+  GetTextColor: (background: [number, number, number], a: [number, number, number], b: [number, number, number]) => {
+
+    const luminance = ColorFunctions.GetLuminance(...background);
+    const luminance_a = ColorFunctions.GetLuminance(...a); 
+    const luminance_b = ColorFunctions.GetLuminance(...b);
+
+    const contrast_a = ColorFunctions.GetContrastRatio([luminance_a, luminance]);
+    const contrast_b = ColorFunctions.GetContrastRatio([luminance_b, luminance]);
+
+    return contrast_a > contrast_b ? a : b;
+  },
+  
 };
 
+
+

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import type { CellStyle } from './style';
+import type { CellStyle, Color } from './style';
 import type { SerializedValueType } from './value-type';
 import type { IArea } from './area';
 import type { AnnotationLayout } from './layout';
@@ -64,14 +64,13 @@ export interface ImportedSheetData {
   // optional, for backcompat
   sheet_style?: number;
   column_styles?: number[];
-
   row_styles?: number[];
 
-  // new
   annotations?: AnchoredAnnotation[];
+  outline?: number[];
 
   // new
-  outline?: number[];
+  tab_color?: Color;
 
   hidden?: boolean;
 

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

@@ -22,6 +22,7 @@
 import { type Color, type CellStyle, IsHTMLColor, IsThemeColor, ThemeColorIndex, type ThemeColor } from './style';
 import { ColorFunctions } from './color';
 import { DOMContext } from './dom-utilities';
+import { Measurement } from 'treb-utils';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -242,7 +243,15 @@ export const ResolveThemeColor = (theme: Theme, color?: Color, default_index?: n
       return ''; 
     }
 
-    const resolved = ResolveThemeColor(theme, color.offset);
+    let resolved = '';
+
+    if (IsHTMLColor(color.offset)) {
+      const clamped = Measurement.MeasureColor(color.offset.text);
+      resolved = `rgb(${clamped[0]}, ${clamped[1]}, ${clamped[2]})`;
+    }
+    else {
+      resolved = ResolveThemeColor(theme, color.offset, undefined);
+    }
 
     // check cache
     if (theme.offset_cache && theme.offset_cache[resolved]) {
@@ -253,17 +262,35 @@ export const ResolveThemeColor = (theme: Theme, color?: Color, default_index?: n
 
     if (resolved) {
       // ok figure it out?
-      const match = resolved.match(/rgb\((\d+), (\d+), (\d+)\)/);
+      const match = resolved.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
       if (match) {
-        const hsl = ColorFunctions.RGBToHSL(Number(match[1]), Number(match[2]), Number(match[3]));
-        // console.info('resolved', resolved, {hsl});
-        if (hsl.l > .65) {
+
+        type ColorTuple = [number, number, number];
+
+        const background: ColorTuple = [Number(match[1]), Number(match[2]), Number(match[3])];
+
+
+        // const hsl = ColorFunctions.RGBToHSL(r, g, b);
+        // const check = ColorFunctions.GetLuminance(r, g, b);
+
+        const a = Array.from(Measurement.MeasureColor(theme.offset_dark)) as ColorTuple;
+        const b = Array.from(Measurement.MeasureColor(theme.offset_light)) as ColorTuple;
+
+        const tc = ColorFunctions.GetTextColor(background, a, b);
+
+        offset = `rgb(${tc[0]}, ${tc[1]}, ${tc[2]})`;
+
+        /*
+         if (hsl.l >.65)) {
           offset = theme.offset_dark;
         }
+        */
+
+
       }
       else {
         // ...
-        console.warn(`can't offset against color`, resolved);
+        console.warn(`can't offset against color`, resolved, '(1)');
       }
 
       if (!theme.offset_cache) {
@@ -272,7 +299,7 @@ export const ResolveThemeColor = (theme: Theme, color?: Color, default_index?: n
       theme.offset_cache[resolved] = offset;
     }
     else {
-      console.warn(`can't resolve offset color`, color.offset);
+      console.warn(`can't resolve offset color`, color.offset, '(2)');
     }
 
     return offset;

package/treb-data-model/src/sheet.ts

@@ -145,6 +145,8 @@ export class Sheet {
 
   public name = Sheet.default_sheet_name;
 
+  public tab_color?: Color;
+
   public background_image?: string;
 
   protected _image: HTMLImageElement|undefined = undefined;
@@ -403,6 +405,9 @@ export class Sheet {
     if (source.name) {
       sheet.name = source.name;
     }
+    if (source.tab_color) {
+      sheet.tab_color = source.tab_color;
+    }
 
     if (source.background_image) {
       sheet.background_image = source.background_image;
@@ -2744,6 +2749,7 @@ export class Sheet {
 
       id: this.id,
       name: this.name,
+      tab_color: this.tab_color,
 
       data,
       sheet_style,
@@ -2915,7 +2921,11 @@ export class Sheet {
     // this.cells.FromJSON(cell_data);
     this.cells.FromJSON(data.cells);
     if (data.name) {
-      this.name = data.name || '';
+      this.name = data.name || ''; // wtf is this?
+    }
+
+    if (data.tab_color) {
+      this.tab_color = data.tab_color;
     }
 
     // 0 is implicitly just a general style

package/treb-data-model/src/sheet_types.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import type { IArea, SerializedCellData, CellStyle } from 'treb-base-types';
+import type { IArea, SerializedCellData, CellStyle, Color } from 'treb-base-types';
 import type { AnnotationData } from './annotation';
 import type { GridSelection, SerializedGridSelection } from './sheet_selection';
 import type { ConditionalFormatList } from './conditional_format';
@@ -126,6 +126,9 @@ export interface SerializedSheet {
   /** sheet name */
   name?: string;
 
+  /** tab color */
+  tab_color?: Color;
+
   /** current active selection */
   selection: SerializedGridSelection;
 

package/treb-embed/style/theme-defaults.scss

@@ -437,6 +437,22 @@ $text-reference-color-5: rgb(254, 47, 1);
       &[selected] {
         background: var(--treb-tab-bar-active-tab-background, #fff);
         color: var(--treb-tab-bar-active-tab-color, var(--treb-ui-color, inherit));
+
+        border-bottom-color: var(--treb-tab-bar-active-tab-border-color, currentColor);
+
+        /*
+        position: relative;
+        &::after {
+          content: '';
+          position: absolute;
+          bottom: 0px;
+          left: 0px;
+          width: 100%;
+          height: 1px;
+          background: currentColor;
+        }
+        */
+
       }
     }
 

package/treb-export/src/export.ts

@@ -439,13 +439,7 @@ export class Exporter {
 
     const dxf: DOMContent[] = style_cache.dxf_styles.map(style => {
 
-      const entry: DOMContent = {
-        fill: style.fill ? {
-          patternFill: {
-            bgColor: ColorAttrs(style.fill),
-          },
-        } : undefined,
-      };
+      const entry: DOMContent = {};
 
       if (style.text || style.bold || style.italic || style.underline) {
         entry.font = {
@@ -457,6 +451,14 @@ export class Exporter {
         };
       }
 
+      if (style.fill) {
+        entry.fill = {
+          patternFill: {
+            bgColor: ColorAttrs(style.fill),
+          }
+        }
+      };
+
       return entry;
 
     });
@@ -2214,6 +2216,34 @@ export class Exporter {
         // delete dom.worksheet.drawing;
       }
 
+      // --- tab color ---------------------------------------------------------
+
+      const tab_color_block: DOMContent = {};
+      if (sheet.tab_color) {
+        if (IsThemeColor(sheet.tab_color)) {
+          tab_color_block.sheetPr = {
+            tabColor: {
+              a$: {
+                theme: sheet.tab_color.theme,
+                tint: sheet.tab_color.tint,
+              }
+            }
+          };
+        }
+        else if (IsHTMLColor(sheet.tab_color)) {
+          const color = sheet.tab_color.text || ''; 
+          if (/^#[0-9a-fA-F]*$/.test(color)) {
+            tab_color_block.sheetPr = {
+              tabColor: {
+                a$: {
+                  rgb: `FF` + color.substring(1)
+                }
+              }
+            };
+          }
+        }
+      }
+
       // --- move page margins -------------------------------------------------
 
       // const margins = dom.worksheet.pageMargins;
@@ -2242,6 +2272,9 @@ export class Exporter {
 
         worksheet: {
           a$: { ...sheet_attributes },
+
+          ...tab_color_block,
+
           dimension: {
             a$: {
               ref: new Area(extent.start, extent.end).spreadsheet_label,

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

@@ -166,20 +166,26 @@ 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);
+                  }
+                  else if (/^_xlfn\./.test(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') {
@@ -591,6 +597,33 @@ export class Importer {
 
     const FindAll: (path: string) => any[] = 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 
 
     const conditional_formatting = FindAll('worksheet/conditionalFormatting');
@@ -1120,7 +1153,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 +1163,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 +1199,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 +1323,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

@@ -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: '<>',
 };

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