@trebco/treb 31.4.0 → 31.7.2

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v31.4. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v31.7. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -498,6 +498,7 @@ export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     InsertTable(range?: RangeReference, options?: InsertTableOptions): void;
     RemoveTable(range?: RangeReference): void;
     UpdateTableStyle(range?: RangeReference, theme?: TableTheme | number): void;
+    SetTabColor(sheet?: number | string, color?: Color): void;
 
     /**
      * Add a sheet, optionally named.
@@ -2153,6 +2154,11 @@ export interface AnnotationChartData extends AnnotationDataBase {
 }
 export interface AnnotationTextBoxData extends AnnotationDataBase {
     type: 'textbox';
+
+    /**
+     * @internalRemarks
+     * what's with this weird structure? did we inherit it? can we clean it up?
+     */
     data: {
         style?: CellStyle;
         paragraphs: {

package/package.json

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

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

@@ -125,14 +125,22 @@ export const ColorFunctions = {
   ////////////////
 
 
-  GetLuminance: (r: number, g: number, b: number): number => {
+  GetLuminance: ([r, g, 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];
   },
-  
+ 
+  WeightedLuminance: ([r, g, b]: number[], weights: number[] = [1,1,1]): 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] * weights[0] + 0.7152 * a[1] * weights[1] + 0.0722 * a[2] * weights[2];
+  },
+ 
   GetContrastRatio: (data: [number, number]): number => {
     data.sort((a, b) => b - a);
     return (data[0] + 0.05) / (data[1] + 0.05);
@@ -140,14 +148,39 @@ export const ColorFunctions = {
   
   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);
+    // weighted contrast ratio: assign more weight to the r channel.
+
+    const weights = [0.4, 0.3, 0.3];
+      
+    const luminance = ColorFunctions.WeightedLuminance(background, weights);
+    const luminance_a = ColorFunctions.WeightedLuminance(a, weights); 
+    const luminance_b = ColorFunctions.WeightedLuminance(b, weights);
 
     const contrast_a = ColorFunctions.GetContrastRatio([luminance_a, luminance]);
     const contrast_b = ColorFunctions.GetContrastRatio([luminance_b, luminance]);
 
     return contrast_a > contrast_b ? a : b;
+
+    // perceptual lightness (actually I like this one)
+
+    /*
+    const background_lightness = ColorFunctions.RGBToHSL(...background).l;
+    const a_lightness = ColorFunctions.RGBToHSL(...a).l;
+    const b_lightness = ColorFunctions.RGBToHSL(...b).l;
+
+    console.info("background", background_lightness, "a", a_lightness, "b", b_lightness);
+
+    const lighter = a_lightness > b_lightness ? a : b;
+    const darker = a_lightness > b_lightness ? b : a;
+    
+    if (background_lightness < .6) {
+      return lighter;
+    }
+    else {
+      return darker;
+    }
+    */
+
   },
   
 };

package/treb-base-types/src/font-stack.ts

@@ -21,7 +21,7 @@
 
 import { UA } from 'treb-grid';
 import { Measurement } from 'treb-utils';
-import { type FontSize, Style } from './style';
+import { Style, type FontSize } from './style';
 
 /**
  * these are the stacks we're currently supporting. 

package/treb-calculator/src/dag/state_leaf_vertex.ts

@@ -37,6 +37,15 @@ import { Color } from './vertex';
  * FIXME: it might be better to have an intermediate class/interface and
  * have both leaf- and spreadsheet-vertex extend that.
  *
+ * UPDATE: we're removing the internal "state" representation because (1)
+ * it should be unnecessary, if we are only updating when dependencies
+ * change, and (2) it was broken anyway.
+ * 
+ * Now we rely on the calculation graph to indicate when the leaf is 
+ * dirty and needs to update. This will result in extra calculation when
+ * you do a hard recalc, but that seems reasonable (and we could possibly
+ * work around that).
+ * 
  */
 export class StateLeafVertex extends SpreadsheetVertex {
 
@@ -54,42 +63,6 @@ export class StateLeafVertex extends SpreadsheetVertex {
    */
   public color = Color.black;
 
-  protected state_representation = '';
-
-  /**
-   * construct the state, compare, and increment the state id if
-   * it changes. this is expected to be called from Calculate(), but
-   * we can also call it on init if we already know the state.
-   *
-   * FIXME: what's more expensive, generating this state field or
-   * re-rendering a chart with the same data? (...?)
-   * especially since it's only called on dirty...
-   *
-   * what is the case where the depenendency is dirty but state
-   * does not change? you type in the same value? (...) or maybe
-   * there's a volatile function that doesn't change value (e.g. Today())
-   *
-   * still, it seems like a waste here. let's test without the state.
-   * (meaning just update the flag anytime it's dirty)
-   *
-   * Actually I think the case is manual recalc, when values don't change
-   * (especially true for MC charts).
-   *
-   * TODO: perf
-   */
-  public UpdateState(): void {
-
-    // FIXME: hash!
-    //const state = JSON.stringify(this.edges_in.map((edge) => (edge as SpreadsheetVertex).result));
-    const state = JSON.stringify(Array.from(this.edges_in).map((edge) => (edge as SpreadsheetVertex).result));
-
-    if (state !== this.state_representation) {
-      this.state_representation = state;
-      this.state_id++;
-    }
-
-  }
-
   /** overrides calculate function */
   public Calculate(): void {
 
@@ -103,11 +76,15 @@ export class StateLeafVertex extends SpreadsheetVertex {
       }
     }
 
-    // ok, we can evaluate... all we are doing here is checking state consistency
-    this.UpdateState();
+    // ok update state so clients know they need to refresh
+    // (see note above re: internal state)
+
+    this.state_id++; 
+
+    // and we're clean
+
     this.dirty = false;
 
-    // we are not allowed to have edges out, so nothing to do
   }
 
   public AddDependent(): void {

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

@@ -190,6 +190,11 @@ export interface AnnotationChartData extends AnnotationDataBase {
 
 export interface AnnotationTextBoxData extends AnnotationDataBase {
   type: 'textbox';
+
+  /**
+   * @internalRemarks 
+   * what's with this weird structure? did we inherit it? can we clean it up?
+   */
   data: {
     style?: CellStyle;
     paragraphs: { 

package/treb-embed/src/embedded-spreadsheet.ts

@@ -945,6 +945,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
         switch (event.type) {
 
+          // these messages can stack, they don't have undo effect
+
           case 'error':
             this.dialog?.ShowDialog({
               type: DialogType.error,
@@ -965,6 +967,34 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             this.UpdateSelectionStyle();
             break;
 
+          case 'scale':
+            this.RebuildAllAnnotations();
+            this.Publish({ type: 'view-change' });
+            break;
+  
+          case 'cell-event':
+            this.HandleCellEvent(event);
+            break;
+
+          // messages that trigger undo need some special handling, 
+          // because we don't want to stack a sequence of messages
+          // and push multiple undo events. that applies to data, 
+          // style, structure, and (maybe?) annotations
+
+          // OK, temp we have a composite event for data+style
+          
+          case 'composite':
+            {
+              const cached_selection = this.last_selection;
+              if (this.calculation === CalculationOptions.automatic) {
+                this.Recalculate(event);
+              }
+              this.DocumentChange(cached_selection);
+              this.UpdateDocumentStyles();
+              this.UpdateSelectionStyle();
+            }
+            break;
+
           case 'data':
             {
               // because this is async (more than once), we can't expect the 
@@ -973,13 +1003,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
               const cached_selection = this.last_selection;
 
-              /*
-              ((this.calculation === CalculationOptions.automatic) ?
-                this.Recalculate(event) : Promise.resolve()).then(() => {
-                  this.DocumentChange(cached_selection);
-                });
-              */
-
               // recalc is no longer async
 
               if (this.calculation === CalculationOptions.automatic) {
@@ -988,17 +1011,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
               this.DocumentChange(cached_selection);
 
-              /*
-              if (this.calculation === CalculationOptions.automatic) {
-                this.Recalculate(event).then(() => {
-                  this.DocumentChange(cached_selection);
-                });
-              }
-              else {
-                Promise.resolve().then(() => this.DocumentChange(cached_selection));
-              }
-              */
-
             }
             break;
 
@@ -1008,11 +1020,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             this.UpdateSelectionStyle();
             break;
 
-          case 'scale':
-            this.RebuildAllAnnotations();
-            this.Publish({ type: 'view-change' });
-            break;
-
           case 'annotation':
             // FIXME: maybe need to update vertices (on create, update, delete,
             // not on move or resize)
@@ -1083,13 +1090,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
               if (event.rebuild_required) {
                 this.calculator.Reset();
 
-                /*
-                ((this.calculation === CalculationOptions.automatic) ?
-                  this.Recalculate(event) : Promise.resolve()).then(() => {
-                    this.DocumentChange(cached_selection);
-                  });
-                */
-
                 // recalculate is no longer async
 
                 if (this.calculation === CalculationOptions.automatic) {
@@ -1105,10 +1105,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             this.UpdateSelectionStyle();
             break;
 
-          case 'cell-event':
-            this.HandleCellEvent(event);
-            break;
-
         }
       });
 
@@ -1411,18 +1407,25 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       if (event.type === 'structure') {
         this.grid.EnsureActiveSheet();
         this.grid.UpdateLayout();
-        // (this.grid as any).tab_bar?.Update();
         this.grid.UpdateTabBar();
+        
+        if (event.update_annotations) {
+          this.grid.RefreshAnnotations();
+          this.InflateAnnotations();
+        }
+
       }
     });
 
     view.Subscribe(event => {
+
       switch (event.type) {
         case 'selection':
           break;
         default:
           view.UpdateAnnotations();
           this.grid.Update(true);
+          this.grid.UpdateAnnotations();
       }
     });
 
@@ -1430,8 +1433,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       if (event.type === 'structure') {
         view.grid.EnsureActiveSheet();
         view.grid.UpdateLayout();
-        // (view.grid as any).tab_bar?.Update();
         view.grid.UpdateTabBar();
+
+        if (event.update_annotations) {
+          view.grid.RefreshAnnotations();
+          view.InflateAnnotations();
+        }
+
       }
     });
 
@@ -1444,12 +1452,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         case 'reset':
           view.grid.EnsureActiveSheet(true); // force update of annotations
           view.UpdateAnnotations();
+          view.grid.UpdateAnnotations();
           view.grid.Update(true);
           break;
 
         default:
           view.UpdateAnnotations();
           view.grid.Update(true);
+          view.grid.UpdateAnnotations();
       }
     });
 
@@ -1651,7 +1661,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       if (selection && !selection.empty) {
         const label = selection.area.spreadsheet_label;
 
-        if (func === 'Scatter.Plot' || func === 'Scatter.Line') {
+        if (func === 'Scatter.Plot' || func === 'Scatter.Line' || func === 'Box.Plot') {
           this.InsertAnnotation(`=${func}(Series(,,${label}),"${label}")`, undefined, undefined, ',');
         }
         else {
@@ -1758,8 +1768,6 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
             if (scale && !isNaN(scale)) {
 
-              console.info("FS", scale);
-
               this.grid.ApplyStyle(undefined, {
                 //font_size_unit: 'em', font_size_value: scale 
                 font_size: {
@@ -1843,6 +1851,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         case 'insert-bar-chart': insert_annotation('Bar.Chart'); break;
         case 'insert-line-chart': insert_annotation('Line.Chart'); break;
         case 'insert-scatter-plot': insert_annotation('Scatter.Plot'); break;
+        case 'insert-box-plot': insert_annotation('Box.Plot'); break;
 
         case 'increase-precision':
         case 'decrease-precision':
@@ -2230,12 +2239,22 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     // FIXME: sheet change events (affects annotations)
     // TODO: sheet change events (affects annotations)
 
+    // console.info({events});
+
     for (const event of events) {
-      if (event.type === 'data') {
-        recalc = true;
-      }
-      else if (event.type === 'structure') {
-        if (event.rebuild_required) reset = true;
+      switch (event.type) {
+        case 'data':
+          recalc = true;
+          break;
+
+        case 'structure':
+          if (event.rebuild_required) {
+            reset = true;
+          }
+          break;
+
+        default:
+          // console.info('unhandled event:', event.type, { event });
       }
     }
 
@@ -2417,6 +2436,17 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   }
 
+  public SetTabColor(sheet?: number|string, color?: Color) {
+    const target = (typeof sheet === 'undefined') ? 
+      this.grid.active_sheet :
+      this.model.sheets.Find(sheet);
+
+    if (target) {
+      this.grid.TabColor(target, color);
+    }
+
+  }
+
   /**
    * Add a sheet, optionally named. 
    */
@@ -2585,9 +2615,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    *  the argument separator, we allow that to be passed directly, but this
    *  is deprecated. new code should use the options object.
    */
-  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, options?: EvaluateOptions|','|';'): void {
+  public InsertAnnotation(
+      formula: string, 
+      type: AnnotationType = 'treb-chart', 
+      rect?: IRectangle|RangeReference, 
+      options?: EvaluateOptions|','|';'): void {
 
-    let target: IRectangle | Partial<Area> | undefined;
+    let target: IRectangle | IArea | undefined;
     let argument_separator: ','|';'|undefined = undefined;
     let r1c1 = false;
 
@@ -2664,7 +2698,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       type,
       formula,
       // class_name,
-    }, undefined, undefined, target || { top: y / scale + 30, left: x / scale + 30, ...auto_size });
+    }, undefined, undefined, undefined, target || { top: y / scale + 30, left: x / scale + 30, ...auto_size });
 
   }
 
@@ -5353,7 +5387,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
                 src: contents,
                 original_size: { width: img.width || 300, height: img.height || 300 },
               },
-            }, undefined, undefined, {
+            }, undefined, undefined, undefined, {
               top: 30,
               left: 30,
               width: img.width || 300,
@@ -5488,7 +5522,17 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
           // set all views dirty in this case
           for (const view of annotation.view) {
-            view.dirty = true;
+
+            // if !view, that usually means it was just created. it should
+            // get taken care of soon, so don't worry about it.
+
+            if (view) {
+              view.dirty = true;
+            }
+            // else {
+            //   console.info("empty view")
+            // }
+
           }
         }
 
@@ -5508,6 +5552,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         // either we just set this dirty for all views, or another
         // view set it dirty for us: in either case, update
 
+        view.dirty = false;
+
         if (view.update_callback) {
           view.update_callback();
         }
@@ -5785,6 +5831,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    */
   protected DocumentChange(undo_selection?: string): void {
 
+    console.info("DC");
+    console.trace();
+
     Promise.resolve().then(() => {
 
       // console.info('serializing');
@@ -5874,6 +5923,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     const selection = last_selection || this.last_selection;
 
     // console.info('push undo', JSON.stringify(selection));
+    // console.trace();
 
     if (this.undo_stack[this.undo_pointer - 1]) {
       this.undo_stack[this.undo_pointer - 1].selection = selection;
@@ -6429,12 +6479,15 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    */
   protected HandleKeyDown(event: KeyboardEvent): void {
 
-    // can we drop the event.code stuff in 2024? (YES)
-
-    if (event.ctrlKey && (event.code === 'KeyZ' || event.key === 'z')) {
-      event.stopPropagation();
-      event.preventDefault();
-      this.Undo();
+    // handle osx properly, but leave the old combination on osx
+    // in case anyone is using it. we can maybe drop it in the future
+    
+    if (event.key === 'z') {
+      if ((UA.is_mac && event.metaKey) || event.ctrlKey) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.Undo();
+      }
     }
     else if (event.key === 'F9' && this.options.recalculate_on_f9) {
       event.stopPropagation();

package/treb-embed/src/toolbar-message.ts

@@ -23,7 +23,7 @@ export interface BorderToolbarMessage {
 }
 
 export interface AnnotationToolbarMessage {
-  command: 'insert-image'|'insert-donut-chart'|'insert-line-chart'|'insert-column-chart'|'insert-bar-chart'|'insert-scatter-plot';
+  command: 'insert-image'|'insert-donut-chart'|'insert-line-chart'|'insert-column-chart'|'insert-bar-chart'|'insert-scatter-plot'|'insert-box-plot';
 }
 
 export interface LayoutToolbarMessage {