@trebco/treb 29.3.4 → 29.5.0

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v29.3. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v29.5. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -743,13 +743,13 @@ export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     /**
      * set or clear cell valiation.
      *
-     * @param address - target cell
+     * @param target - target cell/area
      * @param validation - a spreadsheet range, list of data, or undefined. pass
      * undefined to remove existing cell validation.
      * @param error - setting an invalid value in the target cell is an error (and
      * is blocked). defaults to false.
      */
-    SetValidation(address: AddressReference, validation?: RangeReference | CellValue[], error?: boolean): void;
+    SetValidation(target: RangeReference, validation?: RangeReference | CellValue[], error?: boolean): void;
 
     /**
      * Delete a macro function.
@@ -1042,14 +1042,22 @@ export interface GetRangeOptions {
     formula?: boolean;
 
     /**
-     * optional style for returned values (replaces old flags).
+     * by default, GetRange returns cell values. the optional type field
+     * can be used to returns data in different formats.
      *
      * @remarks
      *
      * `formatted` returns formatted values, applying number formatting and
-     * returning strings. `formula` returns cell formulas instead of values.
+     * returning strings.
+     *
+     * `A1` returns cell formulas instead of values, in A1 format.
+     *
+     * `R1C1` returns cell formauls in R1C1 format.
+     *
+     * `formula` is an alias for 'A1', for backwards compatibility.
+     *
      */
-    type?: 'formatted' | 'formula';
+    type?: 'formatted' | 'A1' | 'R1C1' | 'formula';
 }
 
 /**
@@ -1244,6 +1252,7 @@ export type HorizontalAlign = '' | 'left' | 'center' | 'right';
 
 /** vertical align constants for cell style */
 export type VerticalAlign = '' | 'top' | 'bottom' | 'middle';
+export type ThemeColorType = typeof ThemeColorList[number];
 
 /**
  * font size for cell style. we generally prefer relative sizes
@@ -1254,20 +1263,20 @@ export interface FontSize {
     unit: 'pt' | 'px' | 'em' | '%';
     value: number;
 }
-
-/**
- * color for cell style. color is used for foreground, background and
- * borders in the cell style. can be either a theme color (theme index
- * plus tint), or CSS text.
- */
-export interface Color {
-    theme?: number;
+export interface HTMLColor {
+    text: string;
+}
+export interface ThemeColor {
+    theme: number | ThemeColorType;
     tint?: number;
-    text?: string;
-
-    /** @deprecated */
-    none?: boolean;
 }
+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;
 export type CellValue = undefined | string | number | boolean | Complex | DimensionedQuantity;
 
 /**
@@ -1501,7 +1510,7 @@ export declare type LoadSource = "drag-and-drop" | "local-file" | "network-file"
  * EmbeddedSheetEvent is a discriminated union. Switch on the `type` field
  * of the event.
  */
-export type EmbeddedSheetEvent = DocumentChangeEvent | DocumentResetEvent | DocumentLoadEvent | ViewChangeEvent | DataChangeEvent | FocusViewEvent | SelectionEvent | ResizeEvent;
+export type EmbeddedSheetEvent = DocumentChangeEvent | DocumentResetEvent | DocumentLoadEvent | ThemeChangeEvent | ViewChangeEvent | DataChangeEvent | FocusViewEvent | SelectionEvent | ResizeEvent;
 
 /**
  * options when inserting a table into a sheet
@@ -1540,6 +1549,14 @@ export interface ViewChangeEvent {
     type: 'view-change';
 }
 
+/**
+ * this event is sent when the theme is updated. it's intended for any
+ * subscribers to update corresponding colors or fonts.
+ */
+export interface ThemeChangeEvent {
+    type: 'theme-change';
+}
+
 /**
  * This event is sent when a document is loaded, and also on undo. The
  * source field can help determine if it was triggered by an undo operation.
@@ -1727,7 +1744,6 @@ export interface BaseCellData {
     table?: Table;
     area?: IArea;
     merge_area?: IArea;
-    validation?: DataValidation;
     calculated_type?: SerializedValueType;
     note?: string;
     hyperlink?: string;
@@ -1817,27 +1833,6 @@ export interface Table {
      */
     sort?: TableSortOptions;
 }
-export type DataValidation = DataValidationList | DataValidationRange | DataValidationNumber | DataValidationDate | DataValidationBoolean;
-export interface DataValidationBase {
-    error?: boolean;
-}
-export interface DataValidationRange extends DataValidationBase {
-    type: 'range';
-    area: IArea;
-}
-export interface DataValidationList extends DataValidationBase {
-    type: 'list';
-    list: CellValue[];
-}
-export interface DataValidationDate extends DataValidationBase {
-    type: 'date';
-}
-export interface DataValidationNumber extends DataValidationBase {
-    type: 'number';
-}
-export interface DataValidationBoolean extends DataValidationBase {
-    type: 'boolean';
-}
 
 /**
  * string types for import/export

package/package.json

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

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

@@ -584,6 +584,13 @@ export class Area implements IArea {
       && area.end_.column === this.end_.column;
   }
 
+  public Equals2(area: IArea): boolean {
+    return area.start.row === this.start_.row
+      && area.start.column === this.start_.column
+      && area.end.row === this.end_.row
+      && area.end.column === this.end_.column;
+  }
+
   public Clone(): Area {
     return new Area(this.start, this.end); // ensure copies
   }

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

@@ -21,7 +21,7 @@
 
 // import { Parser } from 'treb-parser';
 
-import type { Area, IArea } from './area';
+import type { Area } from './area';
 import type { CellStyle } from './style';
 import type { TextPart } from './text_part';
 import type { Complex } from './value-type';
@@ -117,50 +117,6 @@ export type ClickFunction = (options: ClickFunctionOptions) => ClickFunctionResu
  *  - raw per-cell style information. this is in a separate array (object).
  */
 
-/**
- * validation TODO: date, number, boolean, &c
- */
-export enum ValidationType {
-  List = 'list',
-  Date = 'date',
-  Range = 'range',
-  Number = 'number',
-  Boolean = 'boolean',
-}
-
-export interface DataValidationBase {
-  error?: boolean;
-}
-
-export interface DataValidationRange extends DataValidationBase {
-  type: 'range'; // ValidationType.Range;
-  area: IArea;
-}
-
-export interface DataValidationList extends DataValidationBase {
-  type: 'list'; // ValidationType.List;
-  list: CellValue[];
-}
-
-export interface DataValidationDate extends DataValidationBase {
-  type: 'date'; // ValidationType.Date;
-}
-
-export interface DataValidationNumber extends DataValidationBase {
-  type: 'number'; // ValidationType.Number;
-}
-
-export interface DataValidationBoolean extends DataValidationBase {
-  type: 'boolean'; // ValidationType.Boolean;
-}
-
-export type DataValidation 
-  = DataValidationList
-  | DataValidationRange
-  | DataValidationNumber
-  | DataValidationDate
-  | DataValidationBoolean;
-
 export class Cell {
 
   // --- static methods -------------------------------------------------------
@@ -342,7 +298,7 @@ export class Cell {
   /** not editable */
   // public locked?: boolean;
 
-  public validation?: DataValidation;
+  // public validation?: DataValidation;
 
   // --- class methods --------------------------------------------------------
 

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

@@ -26,7 +26,9 @@
 
 import type { IArea, ICellAddress} from './area';
 import { Area, IsCellAddress } from './area';
-import type { DataValidation } from './cell';
+
+// import type { DataValidation } from './cell';
+
 import { Cell } from './cell';
 import type { Table } from './table';
 import { type SerializedValueType, ValueType, GetValueType, ValueTypeList } from './value-type';
@@ -79,7 +81,7 @@ export interface BaseCellData {
   table?: Table;
   area?: IArea;
   merge_area?: IArea;
-  validation?: DataValidation;
+  // validation?: DataValidation;
   calculated_type?: SerializedValueType; //  ValueType;
   note?: string;
   hyperlink?: string;
@@ -404,7 +406,7 @@ export class Cells {
 
 
 
-  /**
+  /* *
    * this method is used for importing legacy data validation types. in those
    * those we used a numeric enum. we're just dropping that altogether (c.f.
    * ValueType, which we're keeping) so we need to translate for backcompat. 
@@ -419,7 +421,8 @@ export class Cells {
    *   Boolean = 'boolean',
    * }
    * 
-   */
+   * OK, removed
+   * /
   public ImportDataValidation(value: DataValidation): DataValidation|undefined {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -435,6 +438,7 @@ export class Cells {
 
     return value;
   }
+  */
 
   /**
    * UPDATE: adding optional style refs, for export
@@ -572,6 +576,7 @@ export class Cells {
         }
       }
 
+      /*
       if (obj.validation) {
 
         // the old type used a numeric enum. we just dropped that in favor
@@ -581,6 +586,7 @@ export class Cells {
         cell.validation = this.ImportDataValidation(obj.validation);
 
       }
+      */
 
     }
 
@@ -678,7 +684,7 @@ export class Cells {
               (merge_head || cell.type || (cell.calculated_type && options.expand_arrays) ||
                 (cell.calculated_type && options.calculated_value) ||
                 (cell.note) ||
-                (cell.validation) ||
+                // (cell.validation) ||
                 (options.decorated_cells && cell.style &&
                   ( cell.style.fill || cell.style.border_bottom ||
                     cell.style.border_top || cell.style.border_left || cell.style.border_right)))){
@@ -715,9 +721,9 @@ export class Cells {
             if (cell.merge_area) {
               obj.merge_area = cell.merge_area.toJSON();
             }
-            if (cell.validation) {
-              obj.validation = cell.validation; // safe? 
-            }
+            // if (cell.validation) {
+            //   obj.validation = cell.validation; // safe? 
+            // }
 
             if (options.cell_style_refs &&
                 options.cell_style_refs[column] &&

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

@@ -1,7 +1,7 @@
 
 import { Measurement } from 'treb-utils';
 import { type Color } from './style';
-import { type Theme, ThemeColor2 } from './theme';
+import { type Theme, ResolveThemeColor } from './theme';
 import { ColorFunctions } from './color';
 
 export interface GradientStop {
@@ -23,7 +23,7 @@ export class Gradient {
         throw new Error('invalid stop value');
       }
 
-      const rgb = Measurement.MeasureColor(ThemeColor2(theme, stop.color));
+      const rgb = Measurement.MeasureColor(ResolveThemeColor(theme, stop.color));
 
       let resolved: number[] = [];
 

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

@@ -23,9 +23,8 @@ import type { CellStyle } from './style';
 import type { SerializedValueType } from './value-type';
 import type { IArea } from './area';
 import type { AnnotationLayout } from './layout';
-import type { DataValidation } from './cell';
 import type { Table } from './table';
-import type { AnnotationType, ConditionalFormat } from 'treb-data-model';
+import type { DataValidation, AnnotationType, ConditionalFormat } from 'treb-data-model';
 
 export interface CellParseResult {
   row: number,
@@ -60,6 +59,7 @@ export interface ImportedSheetData {
   row_heights: number[];
   styles: CellStyle[];
   conditional_formats: ConditionalFormat[];
+  data_validations?: DataValidation[];
 
   // optional, for backcompat
   sheet_style?: number;

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

@@ -27,6 +27,34 @@ export type HorizontalAlign = '' | 'left' | 'center' | 'right';
 /** vertical align constants for cell style */
 export type VerticalAlign = '' | 'top' | 'bottom' | 'middle';
 
+const ThemeColorList = [
+  'Background',
+  'Text',
+  'Background2',
+  'Text2',
+  'Accent',
+  'Accent2',
+  'Accent3',
+  'Accent4',
+  'Accent5',
+  'Accent6',
+] as const;
+
+export type ThemeColorType = typeof ThemeColorList[number];
+
+const ThemeColorMap: Record<string, number> = {};
+
+for (const [index, entry] of ThemeColorList.entries()) {
+  ThemeColorMap[entry] = index;
+}
+
+export const ThemeColorIndex = (color: ThemeColor) => {
+  if (typeof color.theme === 'number') {
+    return color.theme;
+  }
+  return ThemeColorMap[color.theme] || 0;
+};
+
 /** 
  * font size for cell style. we generally prefer relative sizes
  * (percent or em) because they are relative to the default theme
@@ -37,26 +65,67 @@ export interface FontSize {
   value: number;
 }
 
-/** 
+/* * 
  * color for cell style. color is used for foreground, background and 
  * borders in the cell style. can be either a theme color (theme index 
  * plus tint), or CSS text.
  * 
  * @privateRemarks
  * FIXME: this should be a union type. we do a lot of if switching anyway.
- */
+ * /
 export interface Color {
 
   theme?: number;
   tint?: number;
   text?: string;
 
-  /** @internal */
+  / ** @internal * /
   offset?: Color;
 
-  /** @deprecated */
+  / ** @deprecated * /
   none?: boolean;
 }
+*/
+
+export interface HTMLColor {
+  text: string;
+
+  /** @internal */
+  offset?: Color;
+
+}
+
+export interface ThemeColor {
+  theme: number|ThemeColorType;
+  tint?: number;
+
+  /** @internal */
+  offset?: Color;
+
+}
+
+export interface NullColor {
+
+  /** @internal */
+  offset?: Color;
+
+}
+
+export type Color = ThemeColor|HTMLColor|NullColor;
+
+export const IsHTMLColor = (color?: Color): color is HTMLColor => {
+  return !!color && (typeof (color as HTMLColor).text === 'string');
+};
+
+export const IsThemeColor = (color?: Color): color is ThemeColor => {
+  return !!color && (typeof (color as ThemeColor).theme !== 'undefined');
+};
+
+export const IsDefinedColor = (color?: Color): color is (ThemeColor|HTMLColor) => {
+  return !!color && (
+    (typeof (color as HTMLColor).text === 'string') ||
+    (typeof (color as ThemeColor).theme !== 'undefined'));
+}
 
 /** @internal */
 export interface CompositeBorderEdge {
@@ -258,15 +327,19 @@ export const Style = {
     return JSON.stringify(style) === empty_json;
   },
 
-  /** 
+  /* * 
    * this looks like a type guard, we should switch to a union
    * type and then add real type guards
    * 
    * @internal 
-   */
+   * /
   ValidColor: (color?: Color): boolean => {
     return !!(color && (!color.none) && (color.text || color.theme || color.theme === 0));
   },
+  */
+
+
+
 
   /** @internal */
    ParseFontSize: (text = '', default_unit = 'em'): CellStyle => {

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import type { Color, CellStyle } from './style';
+import { type Color, type CellStyle, IsHTMLColor, IsThemeColor, ThemeColorIndex, type ThemeColor } from './style';
 import { ColorFunctions } from './color';
 import { DOMContext } from './dom-utilities';
 
@@ -161,14 +161,20 @@ export const DefaultTheme: Theme = {
   offset_dark: '#000',
 };
 
-/**
+/* *
  * now just a wrapper, we should remove
+ * 
+ * the only difference between this and the other function (ThemeColor2)
+ * is that this has a default for "defaultindex" => 0; calls can just 
+ * call the second method with the extra argument.
+ * 
  * @deprecated
  * @internal
- */
+ * /
 export const ThemeColor = (theme: Theme, color?: Color): string => {
   return ThemeColor2(theme, color, 0);
 };
+*/
 
 /**
  * we cache values in the theme object so that we can dump it when we 
@@ -180,7 +186,10 @@ export const ThemeColor = (theme: Theme, color?: Color): string => {
  * 
  * because this is ephemeral it won't impact export.
  */
-const TintedColor = (theme: Theme, index: number, tint: number) => {
+const TintedColor = (theme: Theme, source: ThemeColor) => {
+
+  const index = ThemeColorIndex(source);
+  let tint = (source.tint || 0);
 
   if (theme.mode === 'dark') {
     tint = -tint; // invert;
@@ -223,9 +232,9 @@ const TintedColor = (theme: Theme, index: number, tint: number) => {
  * 
  * @internal
  */
-export const ThemeColor2 = (theme: Theme, color?: Color, default_index?: number): string => {
+export const ResolveThemeColor = (theme: Theme, color?: Color, default_index?: number): string => {
 
-  if (color?.offset) {
+  if (color && color.offset) {
 
     // don't do this
     if (color.offset.offset) {
@@ -233,7 +242,7 @@ export const ThemeColor2 = (theme: Theme, color?: Color, default_index?: number)
       return ''; 
     }
 
-    const resolved = ThemeColor2(theme, color.offset);
+    const resolved = ResolveThemeColor(theme, color.offset);
 
     // check cache
     if (theme.offset_cache && theme.offset_cache[resolved]) {
@@ -271,17 +280,17 @@ export const ThemeColor2 = (theme: Theme, color?: Color, default_index?: number)
 
   // explicit color, or none
 
-  if (color?.text) {
+  if (IsHTMLColor(color)) {
     return color.text === 'none' ? '' : color.text;
   }
 
   // theme color. we need a way to cache these lookups, especially for tinting
 
-  if (color?.theme || color?.theme === 0) {
+  if (IsThemeColor(color)) {
     if (color.tint) {
-      return TintedColor(theme, color.theme, color.tint);
+      return TintedColor(theme, color);
     }
-    return theme.theme_colors ? theme.theme_colors[color.theme] : '';
+    return theme.theme_colors ? theme.theme_colors[ThemeColorIndex(color)] : '';
   }
 
   // default from argument
@@ -427,11 +436,11 @@ const DeriveColorScheme = (theme: Theme, context: CanvasRenderingContext2D): 'li
 
   // because these are rendered to a canvas, we know that A is 255
 
-  context.fillStyle = foreground_color?.text || '';
+  context.fillStyle = IsHTMLColor(foreground_color) ? foreground_color.text : '';
   context.fillRect(0, 0, 3, 3);
   const fg = ColorFunctions.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
 
-  context.fillStyle = background_color?.text || '';
+  context.fillStyle = IsHTMLColor(background_color) ? background_color.text : '';
   context.fillRect(0, 0, 3, 3);
   const bg = ColorFunctions.RGBToHSL(...(Array.from(context.getImageData(1, 1, 1, 1).data) as [number, number, number]));
 
@@ -558,8 +567,8 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   const compare = css.color;
 
   theme.theme_colors = [
-    theme.grid_cell.fill?.text || 'rgb(255, 255, 255)',
-    theme.grid_cell.text?.text || 'rgb(51, 51, 51)',
+    IsHTMLColor(theme.grid_cell.fill) ? theme.grid_cell.fill.text : 'rgb(255, 255, 255)',
+    IsHTMLColor(theme.grid_cell.text) ? theme.grid_cell.text.text : 'rgb(51, 51, 51)',
   ];
 
   for (let i = 1; i < 32; i++) {