@trebco/treb 30.15.0 → 31.0.2

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v30.15. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v31.0. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -170,6 +170,9 @@ export interface EmbeddedSpreadsheetOptions {
     /** include the font scale control in the toolbar */
     font_scale?: boolean;
 
+    /** include the font stack control in the toolbar */
+    font_stack?: boolean;
+
     /** include the insert/remove table button in the toolbar */
     table_button?: boolean;
 
@@ -1601,7 +1604,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 | ThemeChangeEvent | ViewChangeEvent | DataChangeEvent | FocusViewEvent | SelectionEvent | ResizeEvent;
+export type EmbeddedSheetEvent = DocumentChangeEvent | DocumentResetEvent | DocumentLoadEvent | ThemeChangeEvent | ViewChangeEvent | DataChangeEvent | FocusViewEvent | SelectionEvent | ResizeEvent | AnnotationSelectionEvent;
 
 /**
  * options when inserting a table into a sheet
@@ -1691,6 +1694,14 @@ export interface SelectionEvent {
     type: 'selection';
 }
 
+/**
+ * this event is used when an annotation is selected. we're not changing
+ * the original selection event, because I don't want to break anything.
+ */
+export interface AnnotationSelectionEvent {
+    type: 'annotation-selection';
+}
+
 /**
  * This event is sent when the focused view changes, if you have more
  * than one view.
@@ -1973,6 +1984,12 @@ export interface AnnotationDataBase {
     /** the new layout, persisted and takes preference over the old one */
     layout?: AnnotationLayout;
 
+    /**
+     * adding cell style as a convenient store for font stack; atm we are
+     * ignoring everything but the font_face attribute
+     */
+    style?: CellStyle;
+
     /**
      * the old layout used rectangles, and we need to keep support for
      * that. this is not the layout rectangle. this rectangle is just

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "30.15.0",
+  "version": "31.0.2",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -30,8 +30,9 @@
     "treb-grid": "file:treb-grid",
     "treb-parser": "file:treb-parser",
     "treb-utils": "file:treb-utils",
-    "ts-node-dev": "^2.0.0",
+    "ts-node": "^10.9.2",
     "tslib": "^2.7.0",
+    "tsx": "^4.19.1",
     "typescript": "^5.3.3",
     "typescript-eslint": "^8.3.0",
     "uzip": "^0.20201231.0"
@@ -42,11 +43,11 @@
     "clean": "rm -fr build dist declaration",
     "watch": "node --watch esbuild-composite.mjs --watch --dev",
     "watch-production": "node --watch esbuild-composite.mjs --watch",
-    "tsc": "tsc -b treb-embed/modern.tsconfig.json",
-    "rebuild-tsc": "tsc -b --force treb-embed/modern.tsconfig.json",
-    "watch-tsc": "tsc -b treb-embed/modern.tsconfig.json -w",
-    "watch-api": "ts-node-dev --respawn api-generator/api-generator.ts --config api-config.json",
-    "generate-api": "ts-node-dev api-generator/api-generator.ts --config api-config.json",
+    "tsc": "tsc -b treb-embed/tsconfig.json",
+    "rebuild-tsc": "tsc -b --force treb-embed/tsconfig.json",
+    "watch-tsc": "tsc -b treb-embed/tsconfig.json -w",
+    "watch-api": "tsx --watch api-generator/api-generator.ts --config api-config.json",
+    "generate-api": "tsx api-generator/api-generator.ts --config api-config.json",
     "release": "npm run rebuild-tsc && npm run build && npm run generate-api"
   }
 }

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

@@ -0,0 +1,144 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2024 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import { UA } from 'treb-grid';
+import { Measurement } from 'treb-utils';
+import { type FontSize, Style } from './style';
+
+/**
+ * these are the stacks we're currently supporting. 
+ */
+export const font_stack_names = [
+  'default', 
+  'old-style', 
+  'transitional', 
+  'handwritten', 
+  'monospace', 
+  'industrial',
+  'ui',
+] as const;
+
+export type FontStackType = typeof font_stack_names[number];
+
+export const font_stack_labels: Record<FontStackType, string> = {
+  'default': 'Sans-serif',
+  'old-style': 'Old style',
+  'transitional': 'Serif',
+  'handwritten': 'Handwritten',
+  'monospace': 'Monospace',
+  'industrial': 'Industrial sans',
+  'ui': 'System UI',
+};
+
+/**
+ * representation of a font stack as an object we can manage in themes.
+ * the impetus for this is having some font "sets" we can use in a sheet
+ * that we know will render in a reasonable cross-platform way.
+ * 
+ * we're also taking advantage of chrome supporting font features in 
+ * canvas. we have to do a little bit of carve-out for ffx browsers on
+ * windows but that should be it, and the fallback is OK.
+ */
+
+export interface FontStack {
+
+  /** the font family from css. this will usually be a list. */
+  family: string;
+
+  /** the actual font used */
+  font?: string;
+
+  /** default size for grid cells. may be different for different fonts. */
+  size: FontSize;
+
+  /** 
+   * font variants. we used this for sitka text to apply lining-nums and 
+   * tabular-nums, although we're not using sitka anymore. atm only chrome
+   * supports font variants in canvas (boo).
+   */
+  variants?: string;
+
+}
+
+const font_cache: Map<string, boolean> = new Map();
+
+/**
+ * 
+ * @param name - for reporting purposes only
+ * @param computed - computed css to resolve variables
+ * @returns 
+ */
+export const GenerateFontStack = (name: string, computed: CSSStyleDeclaration): FontStack => {
+
+  const family = computed.fontFamily;
+  let font = '';
+
+  const elements = family.split(/,/);
+
+  for (let element of elements) {
+    element = element.replace(/'"/g, '').trim();
+    const lc = element.toLowerCase();
+
+    //
+    // platform-specific hacks. this is kind of unfortunate.
+    //
+
+    if (UA.is_firefox && /sitka text/i.test(lc)) {
+      continue;
+    }
+
+    let check = font_cache.get(lc);
+    if (typeof check === 'undefined') {
+      check = Measurement.FontLoaded(element);
+      font_cache.set(lc, check);
+    }
+ 
+    if (check) {
+      font = element;
+      break;
+    }
+  }
+
+  if (!font) {
+    console.warn('no font found for font stack', name);
+  }
+
+  // check the base size, and any adjustments for this font
+
+  const variable_name = font.toLowerCase().replace(/['"]/g, '').replace(/\W+/g, '-');
+
+  const base = computed.getPropertyValue('--treb-font-stack-default-size');
+  const adjusted = computed.getPropertyValue(`--treb-font-stack-${variable_name}-size`);
+  const variants = computed.getPropertyValue(`--treb-font-stack-${variable_name}-variant`);
+  const size = Style.ParseFontSize(adjusted || base || '10pt').font_size || { unit: 'pt', value: 10 };
+
+  // console.info({stack: name, family, font, base, adjusted, size, variants});
+
+  const stack = { 
+    family, 
+    font, 
+    variants,
+    size,
+  };
+
+  return stack;
+
+};

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

@@ -21,6 +21,8 @@
 
 const empty_json = JSON.stringify({}); // we could probably hard-code this
 
+import type { Theme } from './theme';
+
 /** horizontal align constants for cell style */
 export type HorizontalAlign = '' | 'left' | 'center' | 'right';
 
@@ -271,8 +273,9 @@ export const Style = {
     number_format: 'General', // '0.######',   // use symbolic, e.g. "general"
     nan: 'NaN',
 
-    font_size: { unit: 'pt', value: 10.5 },
-    font_face: 'sans-serif',
+    font_size: { unit: 'em', value: 1 },
+    // font_size: { unit: 'pt', value: 10.5 },
+    // font_face: 'sans-serif',
 
     bold: false,           // drop "font_"
     italic: false,         // ...
@@ -439,7 +442,9 @@ export const Style = {
     
   },
 
-  /** @internal */
+  /** 
+   * @internal 
+   */
   FontSize: (properties: CellStyle, prefer_points = true): string => {
 
     const value = properties.font_size?.value;
@@ -466,10 +471,49 @@ export const Style = {
     return '';
   },
 
-  /**
-   * returns a string representation suitable for canvas (or style)
+  /** 
+   * @internal 
+   * 
+   * generate a font size based on a base size (hopefully in actual units)
+   * and a relative size (em, %, or possibly a static unit). also optionally
+   * apply a scale.
+   * 
    */
-  Font: (properties: CellStyle, scale = 1) => {
+  CompositeFontSize: (base: FontSize, relative: FontSize, scale = 1, prefer_points = false) => {
+
+    let composite: FontSize = { ...base };
+
+    // maybe it's actually not relative
+
+    if (relative.unit === 'pt' || relative.unit === 'px') {
+      composite = { ...relative };
+    }
+    else {
+      composite.value = relative.value * base.value;
+      if (relative.unit === '%') { 
+        composite.value /= 100;
+      } 
+    }
+
+    if (composite.unit === 'px' && prefer_points) {
+      composite.value = Math.round((composite.value||16) * 300 / 4) / 100;
+    }
+
+    composite.value *= scale;
+
+    return composite;
+
+  },
+
+  /** 
+   * return a font string suitable for canvas. because our font sizes are 
+   * (probably) in ems, we need a base size to bounce off.
+   */
+  CompositeFont: (base: FontSize, properties: CellStyle, scale: number, theme: Theme) => {
+
+    let variants: string|undefined;
+    let stack_size: FontSize|undefined; // for reporting only
+    let font_size: FontSize|undefined;
 
     const parts: string[] = [];
 
@@ -481,13 +525,79 @@ export const Style = {
       parts.push('italic');
     }
 
-    parts.push(((properties.font_size?.value || 0) * scale).toFixed(2) + 
-      (properties.font_size?.unit || 'pt'));
 
-    parts.push(properties.font_face || '');
+    const font_face = properties.font_face || 'stack:default';
+    // let stack_scale = 1;
+
+    // check if this is a stack
+    if (font_face.startsWith('stack:')) {
+      let stack = theme.font_stacks[font_face.substring(6) || 'default'];
+
+      // default to default (not just a clever name). the rationale is we
+      // want to support environments that don't have fonts turned on. in
+      // that case, we just don't create the mappings, so everything shows
+      // as the default font.
+
+      if (!stack) {
+        stack = theme.font_stacks.default;
+      }
+
+      if (stack) {
+        stack_size = properties.font_size;
+        font_size = Style.CompositeFontSize(stack.size, properties.font_size || { unit: 'pt', value: 10 }, scale);
+        parts.push(font_size.value.toFixed(2) + font_size.unit);
+        parts.push(stack.font || '');
+        variants = stack.variants;
+      }
+    }
+    else {
+      font_size = Style.CompositeFontSize(base, properties.font_size || { unit: 'pt', value: 10 }, scale);
+      parts.push(font_size.value.toFixed(2) + font_size.unit);
+      parts.push(font_face || '');
+    }
+
+    return { font: parts.join(' '), variants, base, size: properties.font_size, scale, stack_size, font_size };
+
+  },
+
+  /*
+  Font2: (properties: CellStyle, scale: number, theme: Theme) => {
+
+    let features = false;
 
-    return parts.join(' ');
-   
+    const parts: string[] = [];
+
+    if (properties.bold) {
+      parts.push('bold');
+    }
+
+    if (properties.italic) {
+      parts.push('italic');
+    }
+
+    const font_face = properties.font_face || 'stack:default';
+    let stack_scale = 1;
+
+    // check if this is a stack
+    if (font_face.startsWith('stack:')) {
+      const stack = theme.font_stacks[font_face.substring(6) || 'default'];
+      if (stack) {
+        stack_scale = stack.scale;
+        parts.push(((properties.font_size?.value || 0) * (scale || 1) * (stack.scale || 1)).toFixed(2) + 
+          (properties.font_size?.unit || 'pt'));
+        parts.push(stack.font || '');
+        features = !!stack.apply_num_features;
+      }
+    }
+    else {
+      parts.push(((properties.font_size?.value || 0) * (scale || 1)).toFixed(2) + 
+        (properties.font_size?.unit || 'pt'));
+      parts.push(font_face || '');
+    }
+
+    return { font: parts.join(' '), features, base_size: properties.font_size, scale, stack_scale };
+    
   },
+  */
 
 };

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

@@ -19,12 +19,13 @@
  * 
  */
 
-import { type Color, type CellStyle, IsHTMLColor, IsThemeColor, ThemeColorIndex, type ThemeColor } from './style';
+import { type Color, type CellStyle, IsHTMLColor, IsThemeColor, ThemeColorIndex, type ThemeColor, type FontSize } from './style';
 import { ColorFunctions } from './color';
 // import * as LCHColorFunctions from './color2';
 
 import { DOMContext } from './dom-utilities';
 import { Measurement } from 'treb-utils';
+import { font_stack_names, type FontStack, GenerateFontStack } from './font-stack';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -90,6 +91,12 @@ export interface Theme {
   /** grid cell defaults (composite: size, font face, color, background) */
   grid_cell?: CellStyle;
 
+  /** 
+   * base font size for grid cell. we try to specify things in ems, but
+   * we do need to know this in order to measure
+   */
+  grid_cell_font_size: FontSize;
+
   /** gridlines color */
   grid_color: string;
 
@@ -150,6 +157,9 @@ export interface Theme {
   /** dark color for offset (against light background) */
   offset_dark: string;
 
+  /** precalculated font stacks */
+  font_stacks: Record<string, FontStack>;
+
 }
 
 /**
@@ -162,6 +172,8 @@ export const DefaultTheme: Theme = {
   offset_cache: {},
   offset_light: '#fff',
   offset_dark: '#000',
+  font_stacks: {},
+  grid_cell_font_size: { value: 10, unit: 'pt' },
 };
 
 /* *
@@ -428,19 +440,32 @@ const TableStyleFromCSS = (base: CSSStyleDeclaration, style: CSSStyleDeclaration
 */
 
 // testing
-const StyleFromCSS = (css: CSSStyleDeclaration): CellStyle => {
+const StyleFromCSS = (css: CSSStyleDeclaration, include_font_face = false): CellStyle => {
 
-  const { value, unit } = ParseFontSize(css.fontSize||'');
+  // const { value, unit } = ParseFontSize(css.fontSize||'');
 
   const style: CellStyle = {
     fill: { text: css.backgroundColor }, // || 'none',
     text: { text: css.color },
+    
+    /*
     font_size: {
       unit, value,
     },
-    font_face: css.fontFamily,
+    */
+
+    // use container size unless we scale. the reason we do this is 
+    // because if we set scale, we always wind up with em units.
+
+    font_size: { unit: 'em', value: 1 },
+
+    // font_face: css.fontFamily,
   };
 
+  if (include_font_face) {
+    style.font_face = css.fontFamily;
+  }
+
   // the default border comes from the "theme colors", not from 
   // the CSS property (it used to come from the CSS property, which
   // is why we have the CSS property set). 
@@ -544,7 +569,7 @@ export const ThemeColorTable = (theme_color: number, tint = .7): TableTheme => {
  * 
  * @internal
  */
-export const LoadThemeProperties = (container: HTMLElement): Theme => {
+export const LoadThemeProperties = (container: HTMLElement, use_font_stacks = false): Theme => {
     
   const theme: Theme = JSON.parse(JSON.stringify(DefaultTheme));
   const DOM = DOMContext.GetInstance(container.ownerDocument);
@@ -558,14 +583,34 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   }
 
   const node = Append(container, '');
-  const CSS = ElementCSS.bind(0, node);
+  const CSS: (classes: string) => CSSStyleDeclaration = ElementCSS.bind(0, node);
 
   let css = CSS('grid-cells');
-  theme.grid_cell = StyleFromCSS(css);
+  theme.grid_cell = StyleFromCSS(css, false);
   theme.grid_color = css.stroke || '';
+  theme.grid_cell_font_size = ParseFontSize(css.fontSize||'');
+
+  // console.info({theme});
+
+  if (use_font_stacks) {
+    for (const key of font_stack_names) {
+      css = CSS(`treb-font-stack-${key}`);
+      theme.font_stacks[key] = GenerateFontStack(key, css);
+    }
+  }
+  else {
 
+    // default only
+
+    css = CSS(`treb-font-stack-default`);
+    theme.font_stacks.default = GenerateFontStack('default', css);
+    
+  }
+  // console.info(theme.font_stacks);
+  
+  
   css = CSS('grid-headers');
-  theme.headers = StyleFromCSS(css);
+  theme.headers = StyleFromCSS(css, true);
   theme.headers_grid_color = css.stroke;
   if (!theme.headers_grid_color || theme.headers_grid_color === 'none') {
     theme.headers_grid_color = theme.grid_color;

package/treb-calculator/src/calculator.ts

@@ -1569,7 +1569,7 @@ export class Calculator extends Graph {
       };
     }
 
-    return this.expression_calculator.Calculate(vertex.expression, vertex.address); // <- this one
+    return this.expression_calculator.Calculate(vertex.expression, vertex.address, vertex.reference?.area); // <- this one
   }
 
 
@@ -1837,6 +1837,11 @@ export class Calculator extends Graph {
     for (const name of Object.keys(map)) {
 
       const descriptor = map[name];
+
+      // the way we call this now, this is unecessary
+      // @see `CallExpression` in `expression-calculator.ts`.
+
+      /*
       const original_function = descriptor.fn;
      
       // we don't bind to the actual context because that would allow
@@ -1844,28 +1849,23 @@ export class Calculator extends Graph {
       // that rely on it. which is a pretty far-fetched scenario, but we might
       // as well protect against it.
 
+      console.info('wrapping...');
+
       descriptor.fn = (...args: unknown[]) => {
+
+        console.info("wrapped?");
+
         return original_function.apply({
           address: { ...this.expression_calculator.context.address},
         }, args);
       };
+      */
 
       this.library.Register({[name]: descriptor});
     }
 
   }
 
-  /* *
-   * wrap the attachdata function so we can update the expression calculator
-   * at the same time (we should unwind this a little bit, it's an artifact
-   * of graph being a separate class)
-   * /
-  public AttachModel(): void {
-    // this.RebuildMap();
-    // this.expression_calculator.SetModel(this.model);
-  }
-  */
-
   /**
    * wrapper method for calculation
    */
@@ -2076,7 +2076,7 @@ export class Calculator extends Graph {
       address: ICellAddress = {row: -1, column: -1},
       preserve_flags = false): UnionValue {
 
-    return this.expression_calculator.Calculate(expression, address, preserve_flags).value; // dropping volatile flag
+    return this.expression_calculator.Calculate(expression, address, undefined, preserve_flags).value; // dropping volatile flag
   }
 
   /**

package/treb-calculator/src/descriptors.ts

@@ -19,7 +19,15 @@
  * 
  */
 
-import type { RenderFunction, ClickFunction, UnionValue } from 'treb-base-types';
+import type { RenderFunction, ClickFunction, UnionValue, ICellAddress, IArea } from 'treb-base-types';
+
+/**
+ * FIXME: possible to add stuff in here if we need it
+ */
+export interface FunctionContext {
+  address: ICellAddress;
+  area?: IArea;
+}
 
 // FIXME: at least some of this could move to base types
 
@@ -122,12 +130,12 @@ export interface CompositeFunctionDescriptor {
    * the actual function. if this is an object member and needs access
    * to the containing instance, make sure to bind it to that instance.
    * 
-   * FIXME: this should change to unknown, but that's going to cause 
-   * a lot of issues
+   * otherwise, `this` will be bound to a `CalculationContext` object
+   * if your function is defined as a function (i.e. not an arrow function).
    * 
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  fn: (...args: any[]) => UnionValue; 
+  fn: (this: FunctionContext|undefined, ...args: any[]) => UnionValue; 
 
   /**
    * limited visibility

package/treb-calculator/src/expression-calculator.ts

@@ -26,7 +26,8 @@ import type { Cell, ICellAddress,
          NumberUnion,
          UndefinedUnion,
          ComplexUnion, 
-         DimensionedQuantityUnion} from 'treb-base-types';
+         DimensionedQuantityUnion,
+         IArea} from 'treb-base-types';
 import { ValueType, GetValueType, Area } from 'treb-base-types';
 import type { Parser, ExpressionUnit, UnitBinary, UnitIdentifier,
          UnitGroup, UnitUnary, UnitAddress, UnitRange, UnitCall, UnitDimensionedQuantity, UnitStructuredReference } from 'treb-parser';
@@ -83,6 +84,7 @@ export interface ReferenceMetadata {
 
 export interface CalculationContext {
   address: ICellAddress;
+  area?: IArea;
   volatile: boolean;
 }
 
@@ -104,12 +106,13 @@ export class ExpressionCalculator {
    * there's a case where we are calling this from within a function
    * (which is weird, but hey) and to do that we need to preserve flags.
    */
-  public Calculate(expr: ExpressionUnit, addr: ICellAddress, preserve_flags = false): {
+  public Calculate(expr: ExpressionUnit, addr: ICellAddress, area?: IArea, preserve_flags = false): {
       value: UnionValue /*UnionOrArray*/, volatile: boolean }{
 
     if (!preserve_flags) {
       this.context.address = addr;
       this.context.volatile = false;
+      this.context.area = area;
     }
 
     return {
@@ -560,9 +563,19 @@ export class ExpressionCalculator {
         return argument_error;
       }
 
+      // cloning, out of an abundance of caution
+      // const ctx = JSON.parse(JSON.stringify({ address: this.context.address, area: this.context.area }));
+      const ctx = {
+        address: { ...this.context.address },
+        area: this.context.area ? {
+          start: { ...this.context.area.start, },
+          end: { ...this.context.area.end, },
+        } : undefined,
+      };
+
       if (func.return_type === 'reference') {
 
-        const result = func.fn.apply(null, mapped_args);
+        const result = func.fn.apply(ctx, mapped_args);
         
         if (return_reference) { 
           return result; 
@@ -581,7 +594,7 @@ export class ExpressionCalculator {
 
       }
 
-      return func.fn.apply(null, mapped_args);
+      return func.fn.apply(ctx, mapped_args);
 
     };