@trebco/treb 30.8.2 → 30.10.1

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.10. 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.10.1",
   "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

@@ -21,7 +21,10 @@
 
 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';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -106,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 
@@ -206,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);
@@ -215,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;
 
   }
@@ -242,7 +261,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 +280,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 +317,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;
@@ -597,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-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,