@trebco/treb 31.3.2 → 31.3.4

package/dist/treb.d.ts

@@ -407,6 +407,42 @@ export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
      */
     ExternalEditor(config?: Partial<ExternalEditorConfig>): void;
 
+    /**
+     * @internalRemarks removing internal flag
+     */
+    ConditionalFormatDuplicateValues(range: RangeReference | undefined, options: ConditionalFormatDuplicateValuesOptions): ConditionalFormat;
+
+    /**
+     * @internalRemarks removing internal flag
+     */
+    ConditionalFormatGradient(range: RangeReference | undefined, options: ConditionalFormatGradientOptions | StandardGradient): ConditionalFormat;
+
+    /**
+     * @internalRemarks removing internal flag
+     */
+    ConditionalFormatCellMatch(range: RangeReference | undefined, options: ConditionalFormatCellMatchOptions): ConditionalFormat;
+
+    /**
+     * @internalRemarks removing internal flag
+     */
+    ConditionalFormatExpression(range: RangeReference | undefined, options: CondifionalFormatExpressionOptions): ConditionalFormat;
+
+    /**
+     * remove conditional format
+     *
+     * @internalRemarks removing internal flag
+     */
+    RemoveConditionalFormat(format: ConditionalFormat): void;
+
+    /**
+     * clear conditional formats from the target range (or currently selected
+     * range). we operate on format objects, meaning we'll remove the whole
+     * format object rather than clip the area.
+     *
+     * @internalRemarks removing internal flag
+     */
+    RemoveConditionalFormats(range?: RangeReference): void;
+
     /** dynamically load language module */
     LoadLanguage(language?: string): Promise<void>;
 
@@ -1152,42 +1188,79 @@ export interface FreezePane {
     rows: number;
     columns: number;
 }
+export interface CondifionalFormatExpressionOptions {
+    style: CellStyle;
+    expression: string;
+    options?: EvaluateOptions;
+}
+export interface ConditionalFormatGradientOptions {
 
-/**
- * options for serializing data
- */
-export interface SerializeOptions {
-
-    /** optimize for size */
-    optimize?: 'size' | 'speed';
+    /** property defaults to fill */
+    property?: 'fill' | 'text';
 
-    /** include the rendered/calculated value in export */
-    rendered_values?: boolean;
+    /** defaults to RGB */
+    color_space?: 'HSL' | 'RGB';
 
-    /** translate colors to xlsx-friendly values */
-    export_colors?: boolean;
+    /** gradient stops, required */
+    stops: Array<{
+        value: number;
+        color: Color;
+    }>;
 
-    /** export cells that have no value, but have a border or background color */
-    decorated_cells?: boolean;
+    /** min and max are optional. if not provided, we use the min/max of the range of data. */
+    min?: number;
 
-    /** prune unused rows/columns */
-    shrink?: boolean;
+    /** min and max are optional. if not provided, we use the min/max of the range of data. */
+    max?: number;
+}
+export type StandardGradient = keyof typeof StandardGradientsList;
+export interface ConditionalFormatCellMatchOptions {
+    style: CellStyle;
+    expression: string;
+    options?: EvaluateOptions;
+}
+export interface ConditionalFormatDuplicateValuesOptions {
+    style: CellStyle;
 
-    /**
-     * include tables. tables will be serialized in the model, so we can
-     * drop them from cells. but you can leave them in if that's useful.
-     */
-    tables?: boolean;
+    /** true to highlight unique cells, false to highlight duplicates. defaults to false. */
+    unique?: boolean;
+}
 
-    /** share resources (images, for now) to prevent writing data URIs more than once */
-    share_resources?: boolean;
+/**
+ * union, plus we're adding a state used to track application.
+ * that state is serialized if it's true.
+ * we also add an internal field that will be type-specific, and not serialized.
+ *
+ * ...everybody has a vertex now, we could standardize it
+ *
+ * update: adding a priority field, optional
+ *
+ */
+export type ConditionalFormat = {
+    internal?: unknown;
+    priority?: number;
+} & (ConditionalFormatDuplicateValues | ConditionalFormatExpression | ConditionalFormatCellMatch | ConditionalFormatGradient);
 
-    /**
-     * if a function has an export() handler, call that
-     */
-    export_functions?: boolean;
+/**
+ * conditional format predicated on an expression. if the expression
+ * evaluates to true, we apply the style. otherwise no.
+ */
+export interface ConditionalFormatExpression extends CondifionalFormatExpressionOptions {
+    type: 'expression';
+    area: IArea;
+}
+export interface ConditionalFormatGradient extends ConditionalFormatGradientOptions {
+    type: 'gradient';
+    area: IArea;
+}
+export interface ConditionalFormatCellMatch extends ConditionalFormatCellMatchOptions {
+    type: 'cell-match';
+    area: IArea;
+}
+export interface ConditionalFormatDuplicateValues extends ConditionalFormatDuplicateValuesOptions {
+    type: 'duplicate-values';
+    area: IArea;
 }
-export type AnnotationType = 'treb-chart' | 'image' | 'textbox' | 'external';
 
 /**
  * Structure represents a 2d range of cells.
@@ -1196,18 +1269,7 @@ export interface IArea {
     start: ICellAddress;
     end: ICellAddress;
 }
-export interface Point {
-    x: number;
-    y: number;
-}
-
-/** structure represents rectangle coordinates */
-export interface IRectangle {
-    top: number;
-    left: number;
-    width: number;
-    height: number;
-}
+export type Color = ThemeColor | HTMLColor | NullColor;
 
 /**
  * style properties applied to a single cell, row, column, or sheet.
@@ -1315,11 +1377,78 @@ export interface ThemeColor {
 }
 export interface NullColor {
 }
-export type Color = ThemeColor | HTMLColor | NullColor;
 export declare const ThemeColorIndex: (color: ThemeColor) => number;
 export declare const IsHTMLColor: (color?: Color) => color is HTMLColor;
 export declare const IsThemeColor: (color?: Color) => color is ThemeColor;
 export declare const IsDefinedColor: (color?: Color) => color is (ThemeColor | HTMLColor);
+
+/**
+ * options for the evaluate function
+ */
+export interface EvaluateOptions {
+
+    /**
+     * argument separator to use when parsing input. set this option to
+     * use a consistent argument separator independent of current locale.
+     */
+    argument_separator?: ',' | ';';
+
+    /**
+     * allow R1C1-style references. the Evaluate function cannot use
+     * relative references (e.g. R[-1]C[0]), so those will always fail.
+     * however it may be useful to use direct R1C1 references (e.g. R3C4),
+     * so we optionally support that behind this flag.
+     */
+    r1c1?: boolean;
+}
+
+/**
+ * options for serializing data
+ */
+export interface SerializeOptions {
+
+    /** optimize for size */
+    optimize?: 'size' | 'speed';
+
+    /** include the rendered/calculated value in export */
+    rendered_values?: boolean;
+
+    /** translate colors to xlsx-friendly values */
+    export_colors?: boolean;
+
+    /** export cells that have no value, but have a border or background color */
+    decorated_cells?: boolean;
+
+    /** prune unused rows/columns */
+    shrink?: boolean;
+
+    /**
+     * include tables. tables will be serialized in the model, so we can
+     * drop them from cells. but you can leave them in if that's useful.
+     */
+    tables?: boolean;
+
+    /** share resources (images, for now) to prevent writing data URIs more than once */
+    share_resources?: boolean;
+
+    /**
+     * if a function has an export() handler, call that
+     */
+    export_functions?: boolean;
+}
+export type AnnotationType = 'treb-chart' | 'image' | 'textbox' | 'external';
+export interface Point {
+    x: number;
+    y: number;
+}
+
+/** structure represents rectangle coordinates */
+export interface IRectangle {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
 export type CellValue = undefined | string | number | boolean | Complex | DimensionedQuantity;
 
 /**
@@ -1396,26 +1525,6 @@ export interface TableSortOptions {
 }
 export type TableSortType = 'text' | 'numeric' | 'auto';
 
-/**
- * options for the evaluate function
- */
-export interface EvaluateOptions {
-
-    /**
-     * argument separator to use when parsing input. set this option to
-     * use a consistent argument separator independent of current locale.
-     */
-    argument_separator?: ',' | ';';
-
-    /**
-     * allow R1C1-style references. the Evaluate function cannot use
-     * relative references (e.g. R[-1]C[0]), so those will always fail.
-     * however it may be useful to use direct R1C1 references (e.g. R3C4),
-     * so we optionally support that behind this flag.
-     */
-    r1c1?: boolean;
-}
-
 /** clipboard data is a 2d array */
 export type ClipboardData = ClipboardDataElement[][];
 

package/package.json

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

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

@@ -1481,7 +1481,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       
   }
 
-  /** @internal */
+  /** 
+   * @internalRemarks removing internal flag
+   */
   public ConditionalFormatDuplicateValues(range: RangeReference|undefined, options: ConditionalFormatDuplicateValuesOptions): ConditionalFormat {
       
     return this.AddConditionalFormat({
@@ -1493,7 +1495,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
-   * @internal
+   * @internalRemarks removing internal flag
    */
   public ConditionalFormatGradient(range: RangeReference|undefined, options: ConditionalFormatGradientOptions|StandardGradient): ConditionalFormat {
 
@@ -1512,7 +1514,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
   }
 
-  /** @internal */
+  /** 
+   * @internalRemarks removing internal flag
+   */
   public ConditionalFormatCellMatch(range: RangeReference|undefined, options: ConditionalFormatCellMatchOptions): ConditionalFormat {
 
     const format: ConditionalFormatCellMatch = {
@@ -1528,7 +1532,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
-   * @internal
+   * @internalRemarks removing internal flag
    */
   public ConditionalFormatExpression(range: RangeReference|undefined, options: CondifionalFormatExpressionOptions): ConditionalFormat {
 
@@ -1561,7 +1565,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   /**
    * remove conditional format
    * 
-   * @internal
+   * @internalRemarks removing internal flag
    */
   public RemoveConditionalFormat(format: ConditionalFormat) {
     this.grid.RemoveConditionalFormat({ format });
@@ -1572,7 +1576,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
    * range). we operate on format objects, meaning we'll remove the whole
    * format object rather than clip the area.
    * 
-   * @internal
+   * @internalRemarks removing internal flag
    */
   public RemoveConditionalFormats(range?: RangeReference) {
     const area = this.RangeOrSelection(range);
@@ -1602,6 +1606,23 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       // only handle a limited set of commands, then
 
       switch (event.command) {
+        case 'adjust-font-scale':
+          {
+            const delta = Number(event.delta || 0);
+            let scale = this.grid.GetAnnotationStyle()?.font_size;
+
+            if (!scale || scale.unit !== 'em') {
+              scale = { unit: 'em', value: 1 };
+            }
+
+            if (scale) {
+              scale.value += delta;
+              updated_style.font_size = scale;
+              this.grid.ApplyAnnotationStyle(updated_style);
+            }
+          }
+          break;
+
         case 'font-scale':
           {
             const scale = Number(event.scale || 1);
@@ -1629,7 +1650,13 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       const selection = this.grid.GetSelection();
       if (selection && !selection.empty) {
         const label = selection.area.spreadsheet_label;
-        this.InsertAnnotation(`=${func}(${label},,"${label}")`, undefined, undefined, ',');
+
+        if (func === 'Scatter.Plot' || func === 'Scatter.Line') {
+          this.InsertAnnotation(`=${func}(Series(,,${label}),"${label}")`, undefined, undefined, ',');
+        }
+        else {
+          this.InsertAnnotation(`=${func}(${label},,"${label}")`, undefined, undefined, ',');
+        }
       }
     };
 
@@ -1682,6 +1709,41 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
           }
           break;
 
+        case 'adjust-font-scale':
+          {
+            let scale = this.selection_state.style?.font_size;
+            const selection = this.grid.GetSelection();
+            const area = this.grid.active_sheet.RealArea(selection.area);
+            const delta = Number(event.delta || 0);
+
+            if (!scale || scale.unit !== 'em') {
+              scale = { unit: 'em', value: 1 };
+            }
+
+            // console.info({scale, delta});
+
+            if (scale && delta && !isNaN(delta)) {
+              scale.value += delta;
+              this.grid.ApplyStyle(undefined, {
+                font_size: scale,
+              }, true);
+              const rows: number[] = [];
+              for (let row = area.start.row; row <= area.end.row; row++) {
+                rows.push(row);
+              }
+
+              // tweak: don't resize row if merged, even if the merged
+              // area is too small
+
+              if (!this.selection_state?.merge) {
+                this.grid.SetRowHeight(rows, undefined, false);
+              }
+
+            }
+            
+          }
+          break;
+
         case 'font-scale':
 
           // above we handle 'font-size' events; this comes from a dropdown,
@@ -1695,6 +1757,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             const scale = Number(event.scale || 1);
 
             if (scale && !isNaN(scale)) {
+
+              console.info("FS", scale);
+
               this.grid.ApplyStyle(undefined, {
                 //font_size_unit: 'em', font_size_value: scale 
                 font_size: {
@@ -1709,6 +1774,10 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
               // tweak: don't resize row if merged, even if the merged
               // area is too small
 
+              // this should wait, because apply style is async.
+              // actually shouldn't it do that automatically because
+              // this is _also_ async? TODO: check that
+
               if (!this.selection_state?.merge) {
                 this.grid.SetRowHeight(rows, undefined, false);
               }
@@ -1773,6 +1842,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         case 'insert-column-chart': insert_annotation('Column.Chart'); break;
         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 'increase-precision':
         case 'decrease-precision':

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';
+  command: 'insert-image'|'insert-donut-chart'|'insert-line-chart'|'insert-column-chart'|'insert-bar-chart'|'insert-scatter-plot';
 }
 
 export interface LayoutToolbarMessage {
@@ -55,6 +55,11 @@ export interface FontScaleToolbarMessage {
   scale?: number;
 }
 
+export interface AdjustFontScaleToolbarMessage {
+  command: 'adjust-font-scale';
+  delta: number;
+}
+
 export interface FontStackToolbarMessage {
   command: 'font-stack';
   font_stack?: string;
@@ -108,5 +113,6 @@ export type ToolbarMessage
   | IndentMessage
   | NumberFormatToolbarMessage
   | FontScaleToolbarMessage
+  | AdjustFontScaleToolbarMessage
   | FontStackToolbarMessage
   ;

package/treb-embed/style/formula-bar.scss

@@ -121,6 +121,10 @@
         flex-direction: column;
         justify-content: center;
 
+        & > .treb-editor-shadow {
+          opacity: .4;
+        }
+
       }
 
       &[expanded] {

package/treb-grid/src/editors/formula_bar.ts

@@ -67,6 +67,26 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
   public tolled?: { text: string, substring: string };
 
+  /** 
+   * if we're showing a spill array and it's not the first cell, show
+   * the formula using a shadow style (and it's not editable).
+   */
+  public shadow_ = false;
+
+  public get shadow() { return this.shadow_; }
+
+  public set shadow(shadow: boolean) { 
+    this.shadow_ = shadow;
+    if (this.active_editor?.node) {
+      if (shadow) {
+        this.active_editor.node.classList.add('treb-editor-shadow');
+      }
+      else {
+        this.active_editor.node.classList.remove('treb-editor-shadow');
+     }
+    }
+  }
+
   /** is the _editor_ currently focused */
   // tslint:disable-next-line:variable-name
   public focused_ = false;
@@ -244,6 +264,12 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
       let text = this.active_editor.node.textContent || '';
 
+      if (this.shadow) {
+        this.shadow = false;
+        text = '';
+        this.active_editor.node.textContent = text;
+        this.active_editor.formatted_text = undefined; // why do we clear this here? 
+      }
       if (text[0] === '{' && text[text.length - 1] === '}') {
         text = text.substring(1, text.length - 1);
         this.active_editor.node.textContent = text;
@@ -555,6 +581,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     case 'Escape':
     case 'Esc':
       // this.selecting_ = false;
+      this.committed = true;
       this.Publish({ type: 'discard' });
       // this.FlushReference();
       break;

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

@@ -1698,6 +1698,19 @@ export class Grid extends GridBase {
 
   }
 
+  /** 
+   *
+   */
+  public GetAnnotationStyle(): CellStyle|undefined {
+    if (this.selected_annotation) {
+      if (this.selected_annotation.data?.style) {
+        return JSON.parse(JSON.stringify(this.selected_annotation.data.style));
+      }
+      return {};
+    }
+    return undefined;
+  }
+
   /**
    * 
    */
@@ -2612,7 +2625,7 @@ export class Grid extends GridBase {
 
     const current_width = sheet.GetColumnWidth(column);
     let max_width = 0;
-    const padding = 12; // 4 * 2; // FIXME: parameterize
+    const padding = 14; // 4 * 2; // FIXME: parameterize
 
     for (let row = 0; row < sheet.cells.rows; row++) {
       const cell = sheet.CellData({ row, column });
@@ -5386,6 +5399,8 @@ export class Grid extends GridBase {
    */
   private SetInferredType(selection: GridSelection, value: string|undefined, array = false, exec = true, apply_style?: CellStyle) {
 
+    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
     // an array, make sure that no affected cell is part of an existing
@@ -5464,10 +5479,22 @@ export class Grid extends GridBase {
 
     const commands: Command[] = [];
 
+    /* 
+
+    this was here to use the currently selected font stack, but it's broken - it 
+    clears backgrounds. temp removed in advance of proper fix.
+
+    ...because it was missing the `delta` parameter. I guess that defaults to false?
+
+    we never specified, and it's a boolean in an interface, so it defaults to false
+
+    */
+
     if (apply_style) {
       commands.push({
         key: CommandKey.UpdateStyle,
         style: apply_style,
+        delta: true,
         area: array ? selection.area : selection.target,
       })
     }
@@ -6692,6 +6719,7 @@ export class Grid extends GridBase {
 
     if (override) {
       if (this.formula_bar) {
+        this.formula_bar.shadow = false;
         this.formula_bar.formula = override;
       }
       return;
@@ -6699,6 +6727,7 @@ export class Grid extends GridBase {
 
     if (this.primary_selection.empty) {
       if (this.formula_bar) {
+        this.formula_bar.shadow = false;
         this.formula_bar.formula = '';
       }
     }
@@ -6708,11 +6737,14 @@ export class Grid extends GridBase {
       // optimally we would do this check prior to this call, but
       // it's the uncommon case... not sure how important that is
 
-      const head = data.merge_area || data.area;
+      const head = data.merge_area || data.area || data.spill;
+      let shadow = false;
+      
       if (head) {
         if (head.start.column !== this.primary_selection.target.column
           || head.start.row !== this.primary_selection.target.row) {
           data = this.active_sheet.CellData(head.start);
+          if (data.spill) { shadow = true; }
         }
       }
 
@@ -6752,12 +6784,13 @@ export class Grid extends GridBase {
 
       if (this.formula_bar) {
 
-        // add braces for area
+        this.formula_bar.shadow = shadow;
+
         if (data.area) {
           this.formula_bar.formula = '{' + (value || '') + '}';
         }
         else {
-          this.formula_bar.formula = (typeof value !== 'undefined') ? value.toString() : ''; // value || ''; // what about zero?
+          this.formula_bar.formula = (value ?? '').toString();
         }
 
       }