@trebco/treb 31.3.4 → 31.7.0

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v31.3. 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.3.4",
+  "version": "31.7.0",
   "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

@@ -1411,18 +1411,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 +1437,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 +1456,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 +1665,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 +1772,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 +1855,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 +2243,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 +2440,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 +2619,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 +2702,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 +5391,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 +5526,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 +5556,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();
         }

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 {

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

@@ -104,7 +104,9 @@ import type {
   InsertRowsCommand, InsertColumnsCommand, SetNameCommand,
   ActivateSheetCommand, DataValidationCommand, 
   ResizeRowsCommand, ResizeColumnsCommand, 
-  SelectCommand
+  SelectCommand,
+  CreateAnnotationCommand,
+  RemoveAnnotationCommand
 } from './grid_command';
 import { CommandKey
 } from './grid_command';
@@ -705,6 +707,26 @@ export class Grid extends GridBase {
     return undefined;
   }
   
+  public CreateAnnotation(
+        properties: Partial<AnnotationData> = {}, 
+        sheet: Sheet = this.active_sheet,
+        add_to_sheet = true, 
+        offset = false, 
+        target?: IArea|IRectangle,
+        focus?: boolean ) {
+
+    this.ExecCommand({
+      key: CommandKey.CreateAnnotation,
+      properties,
+      add_to_sheet,
+      offset,
+      target,
+      focus,
+      sheet,
+    });
+
+  }
+
   /**
    * create an annotation, with properties, without an original object.
    * optionally (and by default) add to sheet.
@@ -716,10 +738,11 @@ export class Grid extends GridBase {
    * @param target new parameter allows setting annotation as rect or as
    * cell range
    */
-  public CreateAnnotation(properties: Partial<AnnotationData> = {}, add_to_sheet = true, offset = false, target?: Partial<Area>|IRectangle): Annotation {
-    const annotation = new Annotation(properties);
+  protected CreateAnnotationInternal(command: CreateAnnotationCommand) {
 
-    if (offset) {
+    const annotation = new Annotation(command.properties);
+
+    if (command.offset) {
 
       // to offset, we have to have layout (or at least scaled rect)
       if (!annotation.data.layout && annotation.scaled_rect) {
@@ -734,7 +757,7 @@ export class Grid extends GridBase {
         let recheck = true;
         while (recheck) {
           recheck = false;
-          for (const test of this.active_sheet.annotations) {
+          for (const test of command.sheet.annotations) {
             if (test === annotation) { continue; }
             if (test.scaled_rect && test.scaled_rect.top === target_rect.top && test.scaled_rect.left === target_rect.left) {
               target_rect = target_rect.Shift(20, 20);
@@ -747,28 +770,44 @@ export class Grid extends GridBase {
       }
     }
 
-    if (target) {
-      if (Rectangle.IsRectangle(target)) {
+    if (command.target) {
+      if (Rectangle.IsRectangle(command.target)) {
         // console.info('creating from rectangle,', target);
         annotation.data.layout = undefined;
-        annotation.rect = Rectangle.Create(target);
+        annotation.rect = Rectangle.Create(command.target);
       }
-      else if (target.start) {
+      else if (command.target.start) {
         annotation.rect = undefined;
-        annotation.data.layout = this.layout.AddressToAnnotationLayout(target.start, target.end||target.start);
+        annotation.data.layout = this.layout.AddressToAnnotationLayout(command.target.start, command.target.end||command.target.start);
       }
     }
     
-    if (add_to_sheet) {
+    if (command.add_to_sheet) {
 
       // ensure we haven't already added this
-      if (!this.active_sheet.annotations.some((test) => test === annotation)) {
-        this.active_sheet.annotations.push(annotation);
+      if (!command.sheet.annotations.some((test) => test === annotation)) {
+        command.sheet.annotations.push(annotation);
       }
 
       this.AddAnnotation(annotation);
     }
-    return annotation;
+
+    if (command.focus) {
+
+      // pending... we need to know which view it was pasted in. maybe this
+      // should be the index?
+
+      const view = annotation.view[this.view_index];
+      if (view && view.node) {
+        const node = view.node;
+        setTimeout(() => {
+          node.focus();
+        }, 1);
+      }
+
+    }
+
+    // return annotation;
   }
 
   /** placeholder */
@@ -1060,21 +1099,17 @@ export class Grid extends GridBase {
    * the parent (although the node still exists in the annotation, if
    * it existed before).
    */
-  public RemoveAnnotation(annotation: Annotation): void {
-    for (let i = 0; i < this.active_sheet.annotations.length; i++) {
-      if (annotation === this.active_sheet.annotations[i]) {
-        this.active_sheet.annotations.splice(i, 1);
-
-        this.layout.RemoveAnnotation(annotation);
+  public RemoveAnnotation(annotation: Annotation, sheet = this.active_sheet): void {
+    this.ExecCommand({
+      key: CommandKey.RemoveAnnotation,
+      annotation,
+      sheet,
+    });
+  }
 
-        this.grid_events.Publish({
-          type: 'annotation',
-          annotation,
-          event: 'delete',
-        });
-        return;
-      }
-    }
+  protected RemoveAnnotationInternal(command: RemoveAnnotationCommand) {
+    super.RemoveAnnotationInternal(command);
+    this.layout.RemoveAnnotation(command.annotation);
   }
 
   /**
@@ -1474,6 +1509,18 @@ export class Grid extends GridBase {
 
   }
 
+  /** set scale directly */
+  public SetScale(scale: number) {
+    scale = Math.round(scale * 1000) / 1000;
+    scale = Math.min(2, Math.max(scale, .5));
+
+    if (this.options.persist_scale_key) {
+      localStorage.setItem(this.options.persist_scale_key, JSON.stringify({scale}));
+    }
+
+    this.scale = scale;
+  }
+
   /**
    * @param container html container element
    */
@@ -2430,6 +2477,15 @@ export class Grid extends GridBase {
     this.DelayedRender(force, area);
   }
 
+  /**
+   * update annotation layouts (not content)
+   */
+  public UpdateAnnotations() {
+    if (this.active_sheet.annotations.length) {
+      this.layout.UpdateAnnotation(this.active_sheet.annotations, this.theme);
+    }
+  }
+
   /* *
    * API method
    *
@@ -2676,6 +2732,18 @@ export class Grid extends GridBase {
     
   }
 
+  /**
+   * this is intended to synchronize views when annotations are added/removed.
+   * there should be no need to call it if there's only one view.
+   */
+  public RefreshAnnotations() {
+
+    this.RemoveAnnotationNodes();
+    for (const element of this.active_sheet.annotations) {
+      this.AddAnnotation(element, true, true);
+    }
+
+  }
 
   /**
    * specialization for grid. note that we don't call superclass,
@@ -3934,7 +4002,14 @@ export class Grid extends GridBase {
     if (cell?.note) {
 
       // optional MD formatting
-      const md = this.options.markdown ? MDParser.instance.HTML(MDParser.instance.Parse(cell.note)) : undefined;
+
+      // UPDATE: we should allow MD in notes irrespective of the cell 
+      // markdown setting. or maybe split the two settings? it makes
+      // a lot of sense in comments, even if you don't want it in cells.
+
+      const parsed = MDParser.instance.Parse(cell.note);
+
+      const md = this.options.comment_markdown ? MDParser.instance.HTML(parsed, { br: false }) : undefined;
       this.layout.ShowNote(cell.note, address, event, md);
 
       this.hover_data.note = true;
@@ -5399,7 +5474,7 @@ export class Grid extends GridBase {
    */
   private SetInferredType(selection: GridSelection, value: string|undefined, array = false, exec = true, apply_style?: CellStyle) {
 
-    console.info("SIT", {apply_style});
+    // console.info("SIT", {apply_style});
 
     // validation: cannot change part of an array without changing the
     // whole array. so check the array. separately, if you are entering
@@ -7285,6 +7360,9 @@ export class Grid extends GridBase {
             }
           }
         }
+
+        this.CreateAnnotation(composite.data, undefined, true, true, undefined, true);
+        /*
         const annotation = this.CreateAnnotation(composite.data, true, true);
         const view = annotation.view[this.view_index];
         if (view && view.node) {
@@ -7293,6 +7371,7 @@ export class Grid extends GridBase {
             node.focus();
           }, 1);
         }
+        */
       }
       catch (e) {
         console.error(e);