@trebco/treb 27.7.6 → 27.11.1

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v27.7. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v27.11. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -6,7 +6,9 @@
 declare global {
   interface HTMLElementTagNameMap {
     'treb-spreadsheet': HTMLElement & {
-      sheet: EmbeddedSpreadsheet|undefined;
+      instance: {
+        sheet: EmbeddedSpreadsheet | undefined;
+      } | undefined;
     };
   }
 }
@@ -385,11 +387,11 @@ export declare class EmbeddedSpreadsheet {
      * @param formula - annotation formula. For charts, the chart formula.
      * @param type - annotation type. Defaults to `treb-chart`.
      * @param rect - coordinates, or a range reference for layout.
-     *
-     * @param argument_separator - the argument separator to use when evaluating
-     * the function. defaults to current locale.
+     * @param options - evaluate options. because this function used to take
+     *  the argument separator, we allow that to be passed directly, but this
+     *  is deprecated. new code should use the options object.
      */
-    InsertAnnotation(formula: string, type?: AnnotationType, rect?: IRectangle | RangeReference, argument_separator?: ',' | ';'): void;
+    InsertAnnotation(formula: string, type?: AnnotationType, rect?: IRectangle | RangeReference, options?: EvaluateOptions | ',' | ';'): void;
 
     /**
      * Insert an image. This method will open a file chooser and (if an image
@@ -1291,6 +1293,26 @@ 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;
+}
+
 /**
  * this is the document type used by TREB. it has a lot of small variations
  * for historical reasons and backwards compatibility. usually it's preferable
@@ -1821,23 +1843,3 @@ export interface ExportOptions {
     /** use number formats when exporting numbers */
     formatted?: boolean;
 }
-
-/**
- * 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;
-}

package/notes/conditional-fomratring.md

@@ -0,0 +1,29 @@
+conditional formatting TODO list
+
+ - import/export 
+
+ - run through the command queue
+
+ - dragging selection knob should expand conditional formats
+   (if you have the whole thing selected). at the moment it
+   seems to be hard-copying the format, which is bad.
+
+---
+
+done
+ 
+ - consolidate expression and cell-match types, in the sheet part,
+   handle arrays and single cells
+
+   note that these are now essentially the same thing, with a small
+   difference when we attach the conditional format to the graph. so 
+   we could combine them. but, because there's a hard distinction in 
+   XLSX, we will probably need to keep track of which is which.
+
+ - if you do the above you can remove the "applied" flag
+
+ - update range (and formula) based on insert/delete row/col
+   (+ sheet name change)
+
+ - use a gradient function
+

package/package.json

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

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

@@ -55,6 +55,13 @@ export interface IArea {
   end: ICellAddress;
 }
 
+export interface PatchOptions {
+  before_column: number;
+  column_count: number;
+  before_row: number;
+  row_count: number;
+}
+
 /**
  * type guard function
  * FIXME: is there a naming convention for these?
@@ -197,7 +204,181 @@ export class Area implements IArea { // }, IterableIterator<ICellAddress> {
       });
   }
 
+  /**
+   * adjust an area in response to an insert/delete operation.
+   * I noticed we were doing this in several places. moved here to unify.
+   * 
+   * @param source - the starting area. we'll create a new object to return
+   * (we will not mutate in place)
+   */
+  public static PatchArea(source: IArea, options: PatchOptions): Area | false {
+
+    const { before_column, column_count, before_row, row_count } = options;
+
+    let area = new Area(source.start, source.end);
+    const sheet_id = source.start.sheet_id;
+
+    if (column_count && before_column <= area.end.column) {
+
+      /*
+      // (1) we are before the insert point, not affected
+
+      if (before_column > range.end.column) {
+        continue;
+      }
+      */
+
+      if (column_count > 0) {
+
+        // (2) it's an insert and we are past the insert point:
+        //     increment [start] and [end] by [count]
+
+        if (before_column <= area.start.column) {
+          area.Shift(0, column_count);
+        }
+
+        // (3) it's an insert and we contain the insert point:
+        //     increment [end] by [count]
+
+        else if (before_column > area.start.column && before_column <= area.end.column) {
+          area.ConsumeAddress({row: area.end.row, column: area.end.column + column_count});
+        }
+
+        else {
+          console.warn(`AA X case 1`, before_column, column_count, JSON.stringify(area));
+        }
+
+      }
+      else if (column_count < 0) {
+
+        // (4) it's a delete and we are past the delete point (before+count):
+        //     decrement [start] and [end] by [count]
+
+        if (before_column - column_count <= area.start.column) {
+          area.Shift(0, column_count);
+        }
+
+        // (5) it's a delete and contains the entire range
+
+        else if (before_column <= area.start.column && before_column - column_count > area.end.column) {
+
+          // we can actually just return at this point
+          return false;
+
+        }
+
+        // (6) it's a delete and contains part of the range. clip the range.
+
+        else if (before_column <= area.start.column) {
+          const last_column = before_column - column_count - 1;
+          area = new Area({
+            row: area.start.row, column: last_column + 1 + column_count, sheet_id }, {
+              row: area.end.row, column: area.end.column + column_count });
+        }
+
+        else if (before_column <= area.end.column) {
+          const last_column = before_column - column_count - 1;
+
+          if (last_column >= area.end.column) {
+            area = new Area({
+              row: area.start.row, column: area.start.column, sheet_id }, {
+                row: area.end.row, column: before_column - 1 });
+          }
+          else {
+            area = new Area({
+              row: area.start.row, column: area.start.column, sheet_id }, {
+                row: area.end.row, column: area.start.column + area.columns + column_count - 1});
+          }
+
+        }
+
+        else {
+          console.warn(`AA X case 2`, before_column, column_count, JSON.stringify(area));
+        }
 
+      }
+    }
+
+    if (row_count && before_row <= area.end.row) {
+
+      /*
+      // (1) we are before the insert point, not affected
+
+      if (before_column > range.end.column) {
+        continue;
+      }
+      */
+
+      if (row_count > 0) {
+
+        // (2) it's an insert and we are past the insert point:
+        //     increment [start] and [end] by [count]
+
+        if (before_row <= area.start.row) {
+          area.Shift(row_count, 0);
+        }
+
+        // (3) it's an insert and we contain the insert point:
+        //     increment [end] by [count]
+
+        else if (before_row > area.start.row && before_row <= area.end.row) {
+          area.ConsumeAddress({row: area.end.row + row_count, column: area.end.column});
+        }
+
+        else {
+          console.warn(`AA X case 3`, before_row, row_count, JSON.stringify(area));
+        }
+
+      }
+      else if (row_count < 0) {
+
+        // (4) it's a delete and we are past the delete point (before+count):
+        //     decrement [start] and [end] by [count]
+
+        if (before_row - row_count <= area.start.row) {
+          area.Shift(row_count, 0);
+        }
+
+        // (5) it's a delete and contains the entire range
+
+        else if (before_row <= area.start.row && before_row - row_count > area.end.row) {
+          return false;
+        }
+
+        // (6) it's a delete and contains part of the range. clip the range.
+
+        else if (before_row <= area.start.row) {
+          const last_row = before_row - row_count - 1;
+          area = new Area({
+            column: area.start.column, row: last_row + 1 + row_count, sheet_id }, {
+              column: area.end.column, row: area.end.row + row_count });
+        }
+
+        else if (before_row <= area.end.row) {
+          const last_row = before_row - row_count - 1;
+          if (last_row >= area.end.row) {
+            area = new Area({
+              column: area.start.column, row: area.start.row, sheet_id }, {
+                column: area.end.column, row: before_row - 1 });
+          }
+          else {
+            area = new Area({
+              column: area.start.column, row: area.start.row, sheet_id }, {
+                column: area.end.column, row: area.start.row + area.rows + row_count - 1 });
+          }
+
+        }
+
+        else {
+          console.warn(`AA X case 4`, before_row, row_count, JSON.stringify(area));
+        }
+
+      }
+    }
+
+    return area;
+
+  }
 
   /** accessor returns a _copy_ of the start address */
   public get start(): ICellAddress {

package/{treb-grid/src/util/dom_utilities.ts → treb-base-types/src/dom-utilities.ts}

@@ -19,25 +19,50 @@
  * 
  */
 
+const SVGNS = 'http://www.w3.org/2000/svg';
+
 export class DOMUtilities {
 
   /** creates a div and assigns class name/names */
-  public static CreateDiv(classes = '', parent?: HTMLElement, scope?: string): HTMLDivElement {
+  public static Div(classes?: string|string[], parent?: HTMLElement, scope?: string): HTMLDivElement {
     return this.Create('div', classes, parent, scope);
   }
 
+  public static ClassNames(element: HTMLElement|SVGElement, classes: string|string[]) {
+    element.classList.add(...(Array.isArray(classes) ? classes : [classes]).reduce((arr: string[], entry) => [...arr, ...entry.split(/\s+/g)], []));
+  }
+
+  public static SVG<K extends keyof SVGElementTagNameMap>(
+      tag: K, 
+      classes?: string|string[],
+      parent?: HTMLElement|SVGElement
+    ): SVGElementTagNameMap[K] {
+
+    const element = document.createElementNS(SVGNS, tag);
+
+    if (classes) {
+      this.ClassNames(element, classes);
+    }
+
+    if (parent) {
+      parent.appendChild(element);
+    }
+
+    return element;
+  }
+
   /** better typing */
   public static Create<K extends keyof HTMLElementTagNameMap>(
       tag: K, 
-      class_name = '', 
+      classes?: string|string[], 
       parent?: HTMLElement, 
       scope?: string, 
       attrs?: Record<string, string>): HTMLElementTagNameMap[K] {
  
     const element = document.createElement(tag);
 
-    if (class_name) {
-      element.className = class_name;
+    if (classes) {
+      this.ClassNames(element, classes);
     }
 
     if (scope) {
@@ -58,20 +83,4 @@ export class DOMUtilities {
     return element;
   }
 
-  /* * generic element constructor. shame we need the tag AND the type. * /
-  public static Create1<E extends HTMLElement>(tag = '', classes = '', parent?: HTMLElement, scope?: string, attrs?: Record<string, string>){
-    const element = document.createElement(tag) as E;
-    if (classes) element.setAttribute('class', classes);
-    if (scope) element.setAttribute(scope, '');
-    if (attrs) {
-      const keys = Object.keys(attrs);
-      for (const key of keys) {
-        element.setAttribute(key, attrs[key]);
-      }
-    }
-    if (parent) parent.appendChild(element);
-    return element;
-  }
-  */
-
 }

package/treb-base-types/src/evaluate-options.ts

@@ -0,0 +1,21 @@
+
+/**
+ * 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;
+  
+}

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

@@ -0,0 +1,97 @@
+
+import { Measurement } from 'treb-utils';
+import { type Color } from './style';
+import { type Theme, ThemeColor2 } from './theme';
+import { ColorFunctions } from './color';
+
+export interface GradientStop {
+  value: number;
+  color: Color;
+}
+
+export type ColorSpace = 'RGB'|'HSL';
+
+export class Gradient {
+
+  public mapped: Array<GradientStop & { resolved: number[] }>;
+
+  constructor(stops: GradientStop[], theme: Theme, public color_space: ColorSpace = 'HSL') {
+
+    this.mapped = stops.map(stop => {
+
+      if (stop.value < 0 || stop.value > 1) {
+        throw new Error('invalid stop value');
+      }
+
+      const rgb = Measurement.MeasureColor(ThemeColor2(theme, stop.color));
+
+      let resolved: number[] = [];
+
+      if (color_space === 'HSL') {
+        const hsl = ColorFunctions.RGBToHSL(rgb[0], rgb[1], rgb[2]);
+        resolved = [hsl.h, hsl.s, hsl.l];
+      }
+      else {
+        resolved = [...rgb];
+      }
+
+      return {
+        ...stop, resolved,
+      };
+
+    });
+
+    this.mapped.sort((a, b) => a.value - b.value);
+
+    // FIXME: we should expand the gradient, but for now we'll just clamp
+
+    if (this.mapped[0].value > 0) {
+      this.mapped.unshift({
+        ...this.mapped[0], value: 0
+      });
+    }
+
+    if (this.mapped[this.mapped.length - 1].value < 1) {
+      this.mapped.push({
+        ...this.mapped[this.mapped.length - 1], value: 1
+      });
+    }
+
+  }
+
+  public RenderColor(values: number[]) {
+    if (this.color_space === 'RGB') {
+      return { text: `rgb(${values})` };
+    }
+    return { text: `hsl(${values[0]},${values[1] * 100}%,${values[2] * 100}%)` };
+  }
+
+  public Interpolate(value: number): Color {
+
+    value = Math.min(1, Math.max(0, value));
+    for (const [index, stop] of this.mapped.entries()) {
+
+      if (value === stop.value) {
+        return this.RenderColor(stop.resolved);
+      }
+      if (value < stop.value) {
+        const a = this.mapped[index - 1];
+        const b = stop;
+
+        const range = b.value - a.value; // FIXME: cache
+        const advance = value - a.value;
+        
+        const values = [0,1,2].map(index => {
+          return a.resolved[index] + (b.resolved[index] - a.resolved[index]) / range * advance;
+        });
+
+        return this.RenderColor(values);
+
+      }
+    }
+    
+    return { text: '' };
+
+  }
+
+}

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

@@ -25,7 +25,7 @@ import type { IArea } from './area';
 import type { AnnotationLayout } from './layout';
 import type { DataValidation } from './cell';
 import type { Table } from './table';
-import type { AnnotationType } from 'treb-grid';
+import type { AnnotationType, ConditionalFormat } from 'treb-grid';
 
 export interface CellParseResult {
   row: number,
@@ -58,6 +58,7 @@ export interface ImportedSheetData {
   column_widths: number[];
   row_heights: number[];
   styles: CellStyle[];
+  conditional_formats: ConditionalFormat[];
 
   // optional, for backcompat
   sheet_style?: number;

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

@@ -36,6 +36,9 @@ export * from './layout';
 export * from './render_text';
 export * from './api_types';
 export * from './table';
+export * from './gradient';
+export * from './evaluate-options';
+export * from './dom-utilities';
 
 // import * as Style from './style';
 // export { Style };

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

@@ -21,6 +21,7 @@
 
 import type { Color, CellStyle } from './style';
 import { ColorFunctions } from './color';
+import { DOMUtilities } from './dom-utilities';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -494,10 +495,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   const theme: Theme = JSON.parse(JSON.stringify(DefaultTheme));
 
   const Append = (parent: HTMLElement, classes: string): HTMLDivElement => {
-    const node = document.createElement('div');
-    node.setAttribute('class', classes);
-    parent.appendChild(node);
-    return node;
+    return DOMUtilities.Div(classes, parent);
   }
 
   const ElementCSS = (parent: HTMLElement, classes: string): CSSStyleDeclaration => {
@@ -574,7 +572,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   // we could just parse, we know the returned css format is going
   // to be an rgb triple (I think?)
 
-  const canvas = document.createElement('canvas');
+  const canvas = DOMUtilities.Create('canvas');
 
   canvas.width = 3;
   canvas.height = 3;