@trebco/treb 30.2.4 → 30.2.14

package/treb-data-model/src/data_model.ts

@@ -22,12 +22,13 @@
 import type { Sheet } from './sheet';
 import { SheetCollection } from './sheet_collection';
 import { type UnitAddress, type UnitStructuredReference, type UnitRange, Parser, QuotedSheetNameRegex, DecimalMarkType, ArgumentSeparatorType } from 'treb-parser';
-import type { IArea, ICellAddress, Table, CellStyle } from 'treb-base-types';
+import type { IArea, ICellAddress, Table, CellStyle, CellValue } from 'treb-base-types';
+import { Is2DArray } from 'treb-base-types';
 import { Area, IsCellAddress, Style } from 'treb-base-types';
 import type { SerializedNamed } from './named';
 import { NamedRangeManager } from './named';
 import type { ConnectedElementType, MacroFunction } from './types';
-
+import type { LanguageModel } from './language-model';
 
 /**
  * 
@@ -36,6 +37,9 @@ export class DataModel {
 
   public readonly parser: Parser = new Parser();
 
+  /** moved from embedded spreadsheet */
+  public language_model?: LanguageModel;
+
   /** document metadata */
   public document_name?: string;
 
@@ -523,5 +527,226 @@ export class DataModel {
    */
   public connected_elements: Map<number, ConnectedElementType> = new Map();
 
+
+
+  // --- moving translation here ----------------------------------------------
+
+  
+  /** 
+   * maps common language (english) -> local language. this should 
+   * be passed in (actually set via a function).
+   */
+  private language_map?: Record<string, string>;
+
+  /**
+   * maps local language -> common (english). this should be constructed
+   * when the forward function is passed in, so there's a 1-1 correspondence.
+   */
+ private reverse_language_map?: Record<string, string>;
+
+
+  /**
+   * set the language translation map. this is a set of function names 
+   * (in english) -> the local equivalent. both should be in canonical form,
+   * as that will be used when we translate one way or the other.
+   */
+  public SetLanguageMap(language_map?: Record<string, string>) {
+
+    if (!language_map) {
+      this.language_map = this.reverse_language_map = undefined;
+    }
+    else {
+
+      const keys = Object.keys(language_map);
+
+      // normalize forward
+      this.language_map = {};
+      for (const key of keys) {
+        this.language_map[key.toUpperCase()] = language_map[key];
+      }
+
+      // normalize backward
+      this.reverse_language_map = {};
+      for (const key of keys) {
+        const value = language_map[key];
+        this.reverse_language_map[value.toUpperCase()] = key;
+      }
+
+    }
+
+    /*
+    // we might need to update the current displayed selection. depends
+    // on when we expect languages to be set.
+
+    if (!this.primary_selection.empty) {
+      this.Select(this.primary_selection, this.primary_selection.area, this.primary_selection.target);
+    }
+    */
+
+  }
+
+  /**
+   * translate function from common (english) -> local language. this could
+   * be inlined (assuming it's only called in one place), but we are breaking
+   * it out so we can develop/test/manage it.
+   */
+  public TranslateFunction(value: string): string {
+    if (this.language_map) {
+      return this.TranslateInternal(value, this.language_map, this.language_model?.boolean_true, this.language_model?.boolean_false);
+    }
+    return value;
+  }
+
+  /**
+   * translate from local language -> common (english).
+   * @see TranslateFunction
+   */
+  public UntranslateFunction(value: string): string {
+    if (this.reverse_language_map) {
+      return this.TranslateInternal(value, this.reverse_language_map, 'TRUE', 'FALSE');
+    }
+    return value;
+  }
+
+  public UntranslateData(value: CellValue|CellValue[]|CellValue[][]): CellValue|CellValue[]|CellValue[][] {
+
+    if (Array.isArray(value)) {
+
+      // could be 1d or 2d. typescript is complaining, not sure why...
+
+      if (Is2DArray(value)) {
+        return value.map(row => row.map(entry => {
+          if (entry && typeof entry === 'string' && entry[0] === '=') {
+            return this.UntranslateFunction(entry);
+          }
+          return entry;
+        }));
+      }
+      else {
+        return value.map(entry => {
+          if (entry && typeof entry === 'string' && entry[0] === '=') {
+            return this.UntranslateFunction(entry);
+          }
+          return entry;
+        });
+      }
+
+    }
+    else if (value && typeof value === 'string' && value[0] === '=') {
+
+      // single value
+      value = this.UntranslateFunction(value);
+
+    }
+
+    return value;
+
+  }
+
+
+  /**
+   * translation back and forth is the same operation, with a different 
+   * (inverted) map. although it still might be worth inlining depending
+   * on cost.
+   * 
+   * FIXME: it's about time we started using proper maps, we dropped 
+   * support for IE11 some time ago.
+   */
+  private TranslateInternal(value: string, map: Record<string, string>, boolean_true?: string, boolean_false?: string): string {
+
+    const parse_result = this.parser.Parse(value);
+
+    if (parse_result.expression) {
+      
+      let modified = false;
+      this.parser.Walk(parse_result.expression, unit => {
+        if (unit.type === 'call') {
+          const replacement = map[unit.name.toUpperCase()];
+          if (replacement) {
+            modified = true;
+            unit.name = replacement;
+          }
+        }
+        else if (unit.type === 'literal' && typeof unit.value === 'boolean') {
+
+          // to/from english/locale depends on the direction, but we're not 
+          // passing that in? FIXME, pass it as a parameter. it doesn't matter
+          // here, but later when we render.
+
+          modified = true;
+
+        } 
+
+        return true;
+      });
+
+      if (modified) {
+        return '=' + this.parser.Render(parse_result.expression, { 
+          missing: '', boolean_true, boolean_false,
+        });
+      }
+    }
+
+    return value;
+
+  }
+  
+
+  /** 
+   * this is not public _yet_ 
+   * 
+   * @internal
+   */
+  public SetLanguage(model?: LanguageModel): void {
+
+    this.language_model = model;
+
+    if (!model) {
+      this.SetLanguageMap(); // clear
+
+      // set defaults for parsing. 
+
+      this.parser.flags.boolean_true = 'TRUE';
+      this.parser.flags.boolean_false = 'FALSE';
+
+    }
+    else {
+
+      // create a name map for grid
+
+      const map: Record< string, string > = {};
+
+      if (model.functions) {
+        for (const entry of model.functions || []) {
+          map[entry.base.toUpperCase()] = entry.name; // toUpperCase because of a data error -- fix at the source
+        }
+      }
+
+      this.SetLanguageMap(map);
+
+      // console.info({map});
+
+      if (!model.boolean_false) {
+        model.boolean_false = map['FALSE'];
+      }
+      if (!model.boolean_true) {
+        model.boolean_true = map['TRUE'];
+      }
+
+      // set defaults for parsing. 
+
+      this.parser.flags.boolean_true = model.boolean_true || 'TRUE';
+      this.parser.flags.boolean_false = model.boolean_false || 'FALSE';
+
+      // console.info("booleans:", this.model.parser.flags.boolean_true, ",", this.model.parser.flags.boolean_false)
+
+    }
+
+    for (const sheet of this.sheets.list) {
+      sheet.FlushCellStyles();
+    }
+
+  }
+
 }
 

package/treb-data-model/src/index.ts

@@ -34,4 +34,5 @@ export type { AnnotationData, AnnotationType } from './annotation';
 
 export * from './data-validation';
 export * from './types';
+export * from './language-model';
 

package/{treb-embed → treb-data-model}/src/language-model.ts

@@ -37,5 +37,8 @@ export interface LanguageModel {
   version?: string;
   locale?: string;
   functions?: TranslatedFunctionDescriptor[];
+  
+  boolean_true?: string;
+  boolean_false?: string;
 }
 

package/treb-data-model/src/sheet.ts

@@ -807,19 +807,6 @@ export class Sheet {
     }
   }
 
-  /* *
-   * factory method creates a sheet from a 2D array.
-   *
-   * /
-  public static FromArray(data: any[] = [], transpose = false): Sheet {
-    const sheet = new Sheet();
-    sheet.cells.FromArray(data, transpose);
-
-    return sheet;
-  }
-  */
-
-
   // --- public methods -------------------------------------------------------
 
   public MergeCells(area: Area): void {

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

@@ -49,7 +49,10 @@ import type {
     CondifionalFormatExpressionOptions,
     ConditionalFormatCellMatchOptions,
     ConditionalFormatCellMatch,
-  
+
+    LanguageModel, 
+    TranslatedFunctionDescriptor,
+
    } from 'treb-data-model';
 
 
@@ -88,7 +91,6 @@ import { Spinner } from './spinner';
 import { type EmbeddedSpreadsheetOptions, DefaultOptions, type ExportOptions } from './options';
 import { type TREBDocument, SaveFileType, LoadSource, type EmbeddedSheetEvent, type InsertTableOptions } from './types';
 
-import type { LanguageModel, TranslatedFunctionDescriptor } from './language-model';
 import type { SelectionState } from './selection-state';
 import type { BorderToolbarMessage, ToolbarMessage } from './toolbar-message';
 
@@ -341,8 +343,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     return Localization;
   }
 
-  /** loaded language model, if any */
+  /* * loaded language model, if any (moved to data model) * /
   protected language_model?: LanguageModel;
+  */
 
   /** FIXME: fix type (needs to be extensible) */
   protected events = new EventSource<{ type: string }>();
@@ -800,7 +803,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
               const obj = JSON.parse(json);
               grid_options.initial_scale = obj.scale || 1;
             }
-            catch (e) {
+            catch {
               console.warn('parsing persisted scale failed');
             }
           }
@@ -1204,10 +1207,10 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     let list: FunctionDescriptor[] = this.calculator.SupportedFunctions();
 
-    if (this.language_model?.functions) {
+    if (this.model.language_model?.functions) {
 
       const map: Record<string, TranslatedFunctionDescriptor> = {};
-      for (const entry of this.language_model.functions || []) {
+      for (const entry of this.model.language_model.functions || []) {
         map[entry.base.toUpperCase()] = entry;
       }
 
@@ -2002,13 +2005,18 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       language = parts[0];
     }
 
-    this.SetLanguage(); // clear
-
     language = language.toLowerCase();
-
     let mod: { LanguageMap: LanguageModel } | undefined;
 
-    if (language && language !== 'en') {
+    // FIXME: this should be generated and included, to allow for changes.
+    // for the time being hardcoding as a quick fix
+
+    const supported_languages = [
+      'es', 'fr', 'pt', 'nl', 'de',
+      'pl', 'sv', 'no', 'da', 'it',
+    ];
+
+    if (language && supported_languages.includes(language)) {
 
       // FIXME: even though we now have a dynamic import
       // working, we still probably want to use a filter
@@ -2029,39 +2037,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     }
 
     if (mod) {
-      this.SetLanguage(mod.LanguageMap);
-    }
-
-  }
-
-  /** 
-   * this is not public _yet_ 
-   * 
-   * @internal
-   */
-  public SetLanguage(model?: LanguageModel): void {
-
-    this.language_model = model;
-
-    if (!model) {
-      this.grid.SetLanguageMap(); // clear
+      this.model.SetLanguage(mod.LanguageMap);
     }
     else {
-
-      // create a name map for grid
-
-      const map: Record< string, string > = {};
-
-      if (model.functions) {
-        for (const entry of model.functions || []) {
-          map[entry.base] = entry.name;
-        }
-      }
-
-      this.grid.SetLanguageMap(map);
-
+      this.model.SetLanguage();
     }
 
+    this.grid.Reselect();
+    this.grid.Update(true);
     this.UpdateAC();
 
   }

package/treb-embed/style/autocomplete.scss

@@ -33,7 +33,6 @@
 
 
     box-sizing: border-box;
-    * { box-sizing: border-box; }
 
     position: fixed;
     top: -1000px;
@@ -46,6 +45,8 @@
     overflow-y: auto;
     z-index: $z-index-autocomplete;
 
+    * { box-sizing: border-box; }
+
     ul {
 
       font-size: inherit;
@@ -73,23 +74,6 @@
         }
       }
 
-      /*
-      here we unwind the selected style if there's a hover,
-      unless you're hovering over the selection. and so on.
-      * /
-
-      &:hover li a.selected {
-        background: inherit;
-        color: inherit;
-
-        &:hover {
-          background: #339966;
-          color: #fff;
-        }
-
-      }
-      */
-
     }
   }
 

package/treb-embed/style/dialog.scss

@@ -98,6 +98,7 @@
       padding: 0;
       background: transparent;
       border: 0;
+      padding: 4px;
 
       &>svg {
 
@@ -112,7 +113,6 @@
         }
       }
 
-      padding: 4px;
 
     }
 

package/treb-embed/style/dropdown-select.scss

@@ -56,6 +56,11 @@
     color: var(--treb-dropdown-color, inherit);
     border: 1px solid var(--treb-dropdown-border-color, unset);
 
+    text-align: left;
+    max-height: 10em;
+    overflow-y: auto;
+    outline: none;
+
     & div {
       padding: 2px;
       cursor: default;
@@ -66,12 +71,6 @@
       color: var(--treb-dropdown-selected-color, #fff);
     }
 
-    text-align: left;
-
-    max-height: 10em;
-    overflow-y: auto;
-    outline: none;
-
   }
 
   .treb-dropdown-caret.active {

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

@@ -30,15 +30,17 @@
       text-align: left;
       gap: .5em;
 
-      &[hidden] {
-        display: none;
-      }
+
 
       padding: 0px 2px 12px 2px; // FIXME: use ems?
 
       max-width: 100%;
       overflow-x: hidden;
 
+      &[hidden] {
+        display: none;
+      }
+
       /** label for selection address */
       .treb-address-label {
 

package/treb-embed/style/grid.scss

@@ -207,23 +207,25 @@
       /** specific layout for column header cover */
       &.column-header-cover {
 
+        z-index: $z-index-header-tile-cover;
+
         /** style is attached when mousing over a column boundary */
         &.resize {
           cursor: col-resize;
         }
 
-        z-index: $z-index-header-tile-cover;
       }
 
       /** specific layout for row header cover */
       &.row-header-cover {
 
+        z-index: $z-index-header-tile-cover;
+
         /** style is attached when mousing over a row boundary */
         &.resize {
           cursor: row-resize;
         }
 
-        z-index: $z-index-header-tile-cover;
       }
 
     }
@@ -234,6 +236,9 @@
       top: 0px;
       left: 0px;
 
+      z-index: $z-index-annotations;
+      pointer-events: none;
+
       .annotation {
         position: absolute;
         overflow: hidden;
@@ -297,8 +302,6 @@
         cursor: move;
       }
 
-      z-index: $z-index-annotations;
-      pointer-events: none;
     }
 
     /** selection stacks over the grid but under the cover */

package/treb-embed/style/layout.scss

@@ -68,6 +68,28 @@
 
   line-height: normal;
 
+  // ---------------------------------------------------------------------------
+
+  color-scheme: var(--treb-color-scheme, unset);
+
+  font-family: $font-stack;
+
+  font-style: normal;
+  font-weight: normal;
+  color: inherit;
+  font-size: 14px; // ?
+
+  height: 100%;
+  width: 100%;
+
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  grid-template-columns: minmax(0, 1fr) auto;
+  // gap: 1em;
+
+  // ---------------------------------------------------------------------------
+
   div, button, input, ul, ol, li, a, textarea, svg {
 
     // maybe this is being too aggressive. we could be a little 
@@ -110,23 +132,6 @@
 
   // ---------------------------------------------------------------------------
 
-  color-scheme: var(--treb-color-scheme, unset);
-
-  font-family: $font-stack;
-
-  font-style: normal;
-  font-weight: normal;
-  color: inherit;
-  font-size: 14px; // ?
-
-  height: 100%;
-  width: 100%;
-
-  position: relative;
-  display: grid;
-  grid-template-rows: auto minmax(0, 1fr);
-  grid-template-columns: minmax(0, 1fr) auto;
-  // gap: 1em;
 
   &[animate] {
     .treb-layout-header {
@@ -354,11 +359,11 @@
         right: 0px;
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
+        background: var(--treb-toolbar-button-background, #fff);
         &::after {
           mask-image: var(--icon-chevron-left);
           -webkit-mask-image: var(--icon-chevron-left);
         }
-        background: var(--treb-toolbar-button-background, #fff);
     
     }
   }

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

@@ -29,6 +29,8 @@
 
     grid-area: 3/1/4/2;
 
+    align-items: center;
+
     .treb-spreadsheet-tab-container {
       align-self: flex-start;
       overflow: hidden;
@@ -59,8 +61,6 @@
       display: none;
     }
 
-    align-items: center;
-
     & .treb-spreadsheet-tabs>li {
       display: inline-block;
       position: relative;

package/treb-embed/style/theme-defaults.scss

@@ -234,6 +234,10 @@ $text-reference-color-5: rgb(254, 47, 1);
     color: var(--treb-autocomplete-tooltip-color, inherit);
     border: 1px solid var(--treb-autocomplete-tooltip-border-color, unset);
 
+    padding: 3px 8px;
+    margin: 4px 0px;
+    line-height: normal;
+
     & .active-argument {
       font-weight: 700;
     }
@@ -242,10 +246,6 @@ $text-reference-color-5: rgb(254, 47, 1);
       font-style: italic;
     }
 
-    padding: 3px 8px;
-    margin: 4px 0px;
-    line-height: normal;
-
   }
 
   /** 

package/treb-embed/style/toolbar.scss

@@ -167,10 +167,10 @@ $swatch-size: 18px;
       gap: 0;
 
       button[data-command] {
+        font-size: $split-font-size;
         &::before {
           display: none;
         }
-        font-size: $split-font-size;
       }
 
       & > button {

package/treb-grid/src/render/tile_renderer.ts

@@ -727,6 +727,20 @@ export class TileRenderer {
     let pad_entry: RenderTextPart | undefined;
     let composite_width = 0;
 
+    // -------------------------------------------------------------------------
+
+    // moved translated boolean formatting here. I don't like this. it 
+    // should be in sheet (at least that's where the rest of formatting
+    // is), but sheet doesn't have a reference to data model (and because
+    // sheets are owned by data model, I don't want to add a circular ref).
+
+    if (cell.rendered_type === ValueType.boolean) {
+      const value = cell.calculated_type ? cell.calculated : cell.value;
+      cell.formatted = value ? (this.model.language_model?.boolean_true || 'TRUE') : (this.model.language_model?.boolean_false || 'FALSE');
+    }
+
+    // -------------------------------------------------------------------------
+
     let override_formatting: string | undefined;
     let formatted = cell.editing ? '' : cell.formatted; // <-- empty on editing, to remove overflows