@trebco/treb 25.0.1 → 25.4.2

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

@@ -21,27 +21,37 @@
 
 // --- imports -----------------------------------------------------------------
 
-import {
-  Grid, GridEvent, SerializeOptions, Annotation,
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./content-types.d.ts" />
+
+import type {
+  GridEvent, SerializeOptions, Annotation,
   SerializedModel, FreezePane, SerializedSheet,
-  BorderConstants, SheetChangeEvent, GridOptions, 
-  Sheet, GridSelection, CellEvent, FunctionDescriptor, 
-  DataModel, AnnotationViewData, ErrorCode, UA
+  SheetChangeEvent, GridOptions, 
+  GridSelection, CellEvent, FunctionDescriptor, 
+  AnnotationViewData, 
+} from 'treb-grid';
+
+import {
+  DataModel, Grid, BorderConstants, Sheet, ErrorCode, UA
 } from 'treb-grid';
 
 import { 
   Parser, DecimalMarkType, 
   ArgumentSeparatorType, QuotedSheetNameRegex } from 'treb-parser';
 
-import { Calculator, EvaluateOptions, LeafVertex } from 'treb-calculator';
+import { Calculator, type EvaluateOptions, type LeafVertex } from 'treb-calculator';
+
+import type {
+  ICellAddress, 
+  IArea, CellValue, Point,
+  Complex, ExtendedUnion, IRectangle,
+  AddressReference, RangeReference, TableSortOptions, Table, TableTheme,
+} from 'treb-base-types';
 
 import {
-  ThemeColor2,
-  IsCellAddress, Localization, Style, ICellAddress, 
-  Area, IArea, CellValue, Point,
-  IsFlatData, IsFlatDataArray, Rectangle, IsComplex, 
-  ComplexToString, Complex, ExtendedUnion, IRectangle,
-  AddressReference, RangeReference, IsArea, TableSortOptions, Table, ThemeColorTable, TableTheme,
+  IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, 
+  Localization, Style, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, 
 } from 'treb-base-types';
 
 import { EventSource, Yield, ValidateURI } from 'treb-utils';
@@ -51,36 +61,32 @@ import { NumberFormatCache, ValueParser, NumberFormat } from 'treb-format';
 
 import { Dialog, DialogType } from './progress-dialog';
 import { Spinner } from './spinner';
-import { EmbeddedSpreadsheetOptions, DefaultOptions, ExportOptions } from './options';
-import { TREBDocument, SaveFileType, LoadSource, EmbeddedSheetEvent, InsertTableOptions } from './types';
+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';
 
 import { Chart, ChartFunctions } from 'treb-charts';
-
-// --- 3d party ----------------------------------------------------------------
-
-// import * as FileSaver from 'file-saver';
-
-// --- style -------------------------------------------------------------------
-
-// we moved grid style (sass) imports from grid -> here so we can better
-// support headless/server-side grid. if we build with esbuild they'd
-// disappear so we could move these back...
-
-// import 'treb-grid/style/grid-layout.scss';
-// import 'treb-grid/style/grid.scss';
-// import '../style/embed.scss';
-
 import type { SetRangeOptions } from 'treb-grid';
 
-// ---
+// --- worker ------------------------------------------------------------------
 
-import export_worker_script from 'worker:../../treb-export/src/export-worker/index-modern.ts';
+/**
+ * note the clumsy URI-like syntax. if typescript can see that the thing
+ * is a ts file, even if we have a prefix and a type defined for that 
+ * prefix, it will still try to read it. 
+ * 
+ * this is not a great solution. I was thinking about letting ts read it.
+ * That won't impact esbuild, and it has the helpful side effect of type 
+ * checking the worker when we run tsc. but it doesn't like the .ts extension.
+ * also it actually tries to import the file, which means you have to export
+ * some junk value.
+ */
+import export_worker_script from 'worker://../../treb-export/src/export-worker/index-modern.ts';
 
-// ---
+// --- types -------------------------------------------------------------------
 
 /**
  * options for saving files. we add the option for JSON formatting.
@@ -680,7 +686,7 @@ export class EmbeddedSpreadsheet {
       // to the current view. this can lead to strange behavior depending
       // on which window you're in. needs some thought.
 
-      this.key_listener = this.HandleKeyDown.bind(this);
+      this.key_listener = (event) => this.HandleKeyDown(event);
       container.addEventListener('keydown', this.key_listener);
 
       const toll_initial_render = !!(data || this.options.document);
@@ -866,16 +872,12 @@ export class EmbeddedSpreadsheet {
 
     this.FlushUndo();
 
-    // FIXME: this is deprecated [what?]
-    // [this is now a file property, not an option]
-
-    // if (options.freeze_rows || options.freeze_columns) {
-    //  this.grid.Freeze(options.freeze_rows || 0, options.freeze_columns || 0);
-    // }
+    // why is this outside of the container test? there should be
+    // no reason to do this when headless
 
-    // if (typeof options.show_headers !== 'undefined') {
     this.grid.ShowHeaders(this.options.headers);
-    // }
+
+    // again, this should be gated on container
 
     // optionally scroll grid on create (async -- why?)
 
@@ -1053,6 +1055,11 @@ export class EmbeddedSpreadsheet {
           message: `You can't change part of an array`,
         }
 
+      case ErrorCode.invalid_area_for_paste:
+        return {
+          message: 'Invalid area for paste',
+        }
+
       case ErrorCode.invalid_area_for_table:
         return {
           message: `Invalid area for table`,
@@ -1905,12 +1912,15 @@ export class EmbeddedSpreadsheet {
     
     const { x, y } = this.grid.GetScrollOffset();
     const scale = this.grid.scale || 1;
+    const auto_size = { width: 301, height: 301 };
+
+    // we're not sizing this very well at scale, because scale is stepped. FIXME
 
     this.grid.CreateAnnotation({
       type,
       formula,
       // class_name,
-    }, undefined, undefined, target || { top: y / scale + 30, left: x / scale + 30, width: 300, height: 300 });
+    }, undefined, undefined, target || { top: y / scale + 30, left: x / scale + 30, ...auto_size });
 
   }
 
@@ -2241,6 +2251,12 @@ export class EmbeddedSpreadsheet {
    */
   public async ExportBlob(): Promise<Blob> {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      throw new Error('this build does not include xlsx support.');
+    }
+
     if (!this.export_worker) {
       this.export_worker = await this.LoadWorker('export');
     }
@@ -2338,6 +2354,12 @@ export class EmbeddedSpreadsheet {
    */
   public Export(): void {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      return;
+    }
+
     // API v1 OK
 
     // it might be nice to merge the workers, but since export is (presumably)
@@ -3471,7 +3493,7 @@ export class EmbeddedSpreadsheet {
 
     // still for now we can take advantage of that and skip the check.
 
-    this.grid.ApplyBorders(range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined, borders, undefined, width);
+    this.grid.ApplyBorders2(range ? this.calculator.ResolveArea(range, this.grid.active_sheet) : undefined, borders, {}, width);
 
   }
 
@@ -3896,6 +3918,12 @@ export class EmbeddedSpreadsheet {
    */
    protected async ImportXLSX(data: string, source: LoadSource): Promise<Blob | void> {
 
+    // this is inlined to ensure the code will be tree-shaken properly
+    if (!process.env.XLSX_SUPPORT) {
+      console.warn('this build does not include xlsx support.');
+      return;
+    }
+
     if (this.parent_view) {
       return this.parent_view.ImportXLSX(data, source);
     }
@@ -4354,7 +4382,9 @@ export class EmbeddedSpreadsheet {
             this.dialog?.ShowDialog({
               title: 'Error reading file',
               close_box: true,
-              message: 'Please make sure your file is a valid XLSX, CSV or TREB file.',
+              message: process.env.XLSX_SUPPORT ? 
+                'Please make sure your file is a valid XLSX, CSV or TREB file.' :
+                'Please make sure your file is a valid CSV or TREB file.' ,
               type: DialogType.error,
               timeout: 3000,
             });
@@ -4372,7 +4402,7 @@ export class EmbeddedSpreadsheet {
             if (/\.csv$/i.test(file.name)) {
               this.LoadCSV(reader.result as string, source);
             }
-            else if (/\.xls[xm]$/i.test(file.name)) {
+            else if (process.env.XLSX_SUPPORT &&  /\.xls[xm]$/i.test(file.name)) {
               let contents: string;
 
               if (typeof reader.result === 'string') {
@@ -5224,35 +5254,35 @@ export class EmbeddedSpreadsheet {
    */
   protected async LoadWorker(name: string): Promise<Worker> {
 
-    // for esm we now support embedding the worker as a blob
-    // (as text, actually); we can construct it from the text 
-    // as necessary.
+    // this is inlined to ensure the code will be tree-shaken properly
+    // (we're trying to force it to remove the imported worker script)
 
-    if (export_worker_script) {
-      try {
-        const worker = new Worker(
-            URL.createObjectURL(new Blob([export_worker_script], { type: 'application/javascript' })));
-        return worker;
-      }
-      catch (err) {
-        console.info('embedded worker failed');
-        console.error(err);
+    if (process.env.XLSX_SUPPORT) {
+    
+      // for esm we now support embedding the worker as a blob
+      // (as text, actually); we can construct it from the text 
+      // as necessary.
+
+      if (export_worker_script) {
+        try {
+          const worker = new Worker(
+              URL.createObjectURL(new Blob([export_worker_script], { type: 'application/javascript' })));
+          return worker;
+        }
+        catch (err) {
+          console.info('embedded worker failed');
+          console.error(err);
+        }
       }
+
+    } 
+    else {
+      console.warn('this build does not include xlsx support.');
     }
 
+    throw new Error('creating worker failed');
+
     /*
-    if (EmbeddedSpreadsheet.export_worker_text) {
-      try {
-        const worker = new Worker(
-            URL.createObjectURL(new Blob([EmbeddedSpreadsheet.export_worker_text], { type: 'application/javascript' })));
-        return worker;
-      }
-      catch (err) {
-        console.info('embedded worker failed');
-        console.error(err);
-      }
-    }
-    */
 
     if (!EmbeddedSpreadsheet.treb_base_path) {
       console.warn('worker path is not set. it you are loading TREB in an ESM module, please either '
@@ -5304,6 +5334,7 @@ export class EmbeddedSpreadsheet {
     }
 
     return worker;
+    */
 
   }
 

package/treb-embed/src/progress-dialog.ts

@@ -19,9 +19,6 @@
  * 
  */
 
-import {tmpl, NodeModel} from 'treb-utils'; 
-// import '../style/icon.scss';
-
 export enum DialogType {
   default = '', 
   info = 'info',

package/treb-embed/src/types.ts

@@ -20,7 +20,8 @@
  */
 
 import type { IArea, Table, TableTheme } from 'treb-base-types';
-import type { MacroFunction, SerializedNamedExpression, SerializedSheet } from 'treb-grid';
+import type { SerializedNamedExpression, SerializedSheet } from 'treb-grid';
+import type { SerializedMacroFunction } from 'treb-grid/src/types/data_model';
 
 export enum SaveFileType {
   json = 'json',
@@ -38,6 +39,12 @@ export enum SaveFileType {
 // and so on
 //
 
+/**
+ * we're not exporting this type in the public API because there are so many 
+ * nested types that aren't used anywhere else (in public functions). 
+ * 
+ * I would like to do it, though, that `any` looks bad in the  public API.
+ */
 export interface TREBDocument {
   app: string;
   version: string;
@@ -48,8 +55,11 @@ export interface TREBDocument {
   decimal_mark?: '.' | ',';
   active_sheet?: number;
   rendered_values?: boolean;
-  named_ranges?: {[index: string]: IArea};
-  macro_functions?: MacroFunction[];
+  
+  // named_ranges?: {[index: string]: IArea};
+  named_ranges?: Record<string, IArea>;
+
+  macro_functions?: SerializedMacroFunction[];
   named_expressions?: SerializedNamedExpression[];
   tables?: Table[];
   shared_resources?: Record<string, string>;

package/treb-embed/style/dialog.scss

@@ -53,7 +53,9 @@
 
     line-height: 1.6em;
 
+    font-size: var(--treb-dialog-font-size, 16px);
     border: 1px solid var(--treb-dialog-border-color, var(--treb-ui-border-color, #999));
+    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, .3);
 
     border-top-width: 3px;
     border-top-color: rgb(0, 157, 255);

package/treb-embed/style/layout.scss

@@ -2,7 +2,7 @@
 @import './grid.scss';
 @import './theme-defaults.scss';
 @import './dark-theme.scss';
-@import 'treb-charts/style/charts.scss';
+@import '../../treb-charts/style/charts.scss';
 @import './dialog.scss';
 @import './spinner.scss';
 @import './treb-icons.scss';
@@ -276,8 +276,8 @@
         border-top-right-radius: 0px;
         border-bottom-right-radius: 0px;
         &::after {
-          mask-image: var(--treb-sidebar-icon-chevron-left);
-          -webkit-mask-image: var(--treb-sidebar-icon-chevron-left);
+          mask-image: var(--icon-chevron-left);
+          -webkit-mask-image: var(--icon-chevron-left);
         }
         background: var(--treb-toolbar-button-background, #fff);
     
@@ -303,8 +303,8 @@
       mask-repeat: no-repeat;
       -webkit-mask-repeat: no-repeat;
       transition: background-color 0.1s ease;
-      mask-image: var(--treb-mask-image);
-      -webkit-mask-image: var(--treb-mask-image);
+      mask-image: var(--icon);
+      -webkit-mask-image: var(--icon);
     }
   
     &:hover::after {
@@ -312,23 +312,23 @@
     }
 
     &[data-command=recalculate] {
-      --treb-mask-image: var(--treb-sidebar-icon-reset);
+      --icon: var(--icon-reset);
     }
 
     &[data-command=toggle-toolbar] {
-      --treb-mask-image: var(--treb-sidebar-icon-toolbar);
+      --icon: var(--icon-toolbar);
     }
 
     &[data-command=revert] {
-      --treb-mask-image: var(--treb-sidebar-icon-revert);
+      --icon: var(--icon-revert);
     }
 
     &[data-command=export-xlsx] {
-      --treb-mask-image: var(--treb-sidebar-icon-export);
+      --icon: var(--icon-export);
     }
 
     &[data-command=about] {
-      --treb-mask-image: var(--treb-sidebar-icon-about);
+      --icon: var(--icon-about);
     }
    
   }
@@ -358,40 +358,43 @@
     &::after {
       height: 12px;
       width: 12px;
-      mask-image: var(--treb-sidebar-icon-chevron-right);
-      -webkit-mask-image: var(--treb-sidebar-icon-chevron-right);
+      mask-image: var(--icon-chevron-right);
+      -webkit-mask-image: var(--icon-chevron-right);
     }
 
   }
 
-}
 
-// these are (atm) outside of the container because we want them
-// to be able to float over any outside content as well... what's the
-// rule with that? something about stacking contexts? of course we're
-// always goint to be fighting z-indexes.
-//
-// ...possible to use a dialog element? TODO: investigate...
-//
-
-.treb-resize-rect {
-  all: initial;
-  z-index: 9998; // ugh
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  border: 1px dotted var(--treb-resize-frame-color, blue);
-  width: 100%;
-  height: 100%;
-  display: block;
-}
+  // these are (atm) outside of the container because we want them
+  // to be able to float over any outside content as well... what's the
+  // rule with that? something about stacking contexts? of course we're
+  // always goint to be fighting z-indexes.
+  //
+  // ...possible to use a dialog element? TODO: investigate...
+  //
+
+  // OK, but then we can't scope properly. so no.
+
+  .treb-resize-rect {
+    all: initial;
+    z-index: 9998; // ugh
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    border: 1px dotted var(--treb-resize-frame-color, blue);
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .treb-resize-mask {
+    all: initial;
+    z-index: 9999; // ugh
+    position: fixed;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+  }
 
-.treb-resize-mask {
-  all: initial;
-  z-index: 9999; // ugh
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  width: 100vw;
-  height: 100vh;
 }

package/treb-embed/style/toolbar.scss

@@ -258,47 +258,47 @@ $swatch-size: 18px;
 
     // ---------------------------------------------------------------------------
 
-    [data-icon=file-menu]{ --icon: var(--treb-icon-file-menu); }
+    [data-icon=file-menu]{ --icon: var(--icon-file-menu); }
     
-    [data-command=justify-left] { --icon: var(--treb-icon-text-align-left); }
-    [data-command=justify-right] { --icon: var(--treb-icon-text-align-right); }
-    [data-command=justify-center] { --icon: var(--treb-icon-text-align-center); }
-
-    [data-command=align-top] { --icon: var(--treb-icon-text-align-top); }
-    [data-command=align-middle] { --icon: var(--treb-icon-text-align-middle); }
-    [data-command=align-bottom] { --icon: var(--treb-icon-text-align-bottom); }
-    [data-command=merge-cells] { --icon: var(--treb-icon-merge-cells); }
-    [data-command=unmerge-cells] { --icon: var(--treb-icon-unmerge-cells); }
-
-    [data-command=fill-color] { --icon: var(--treb-icon-fill-color); }
-    [data-command=text-color] { --icon: var(--treb-icon-text-color); }
-
-    [data-command=lock-cells] { --icon: var(--treb-icon-lock); }
-    [data-command=wrap-text] { --icon: var(--treb-icon-wrap-text); }
-    [data-icon=comment] { --icon: var(--treb-icon-comment); }
-    [data-icon=table] { --icon: var(--treb-icon-table); }
+    [data-command=justify-left] { --icon: var(--icon-text-align-left); }
+    [data-command=justify-right] { --icon: var(--icon-text-align-right); }
+    [data-command=justify-center] { --icon: var(--icon-text-align-center); }
+
+    [data-command=align-top] { --icon: var(--icon-text-align-top); }
+    [data-command=align-middle] { --icon: var(--icon-text-align-middle); }
+    [data-command=align-bottom] { --icon: var(--icon-text-align-bottom); }
+    [data-command=merge-cells] { --icon: var(--icon-merge-cells); }
+    [data-command=unmerge-cells] { --icon: var(--icon-unmerge-cells); }
+
+    [data-command=fill-color] { --icon: var(--icon-fill-color); }
+    [data-command=text-color] { --icon: var(--icon-text-color); }
+
+    [data-command=lock-cells] { --icon: var(--icon-lock); }
+    [data-command=wrap-text] { --icon: var(--icon-wrap-text); }
+    [data-icon=comment] { --icon: var(--icon-comment); }
+    [data-icon=table] { --icon: var(--icon-table); }
     
-    [data-icon=layout] { --icon: var(--treb-icon-layout); }
-    [data-command=freeze-panes] { --icon: var(--treb-icon-freeze); }
+    [data-icon=layout] { --icon: var(--icon-layout); }
+    [data-command=freeze-panes] { --icon: var(--icon-freeze); }
     
-    [data-command=insert-column-chart] { --icon: var(--treb-icon-column-chart); }
-    [data-command=insert-donut-chart] { --icon: var(--treb-icon-donut-chart); }
-    [data-command=insert-bar-chart] { --icon: var(--treb-icon-bar-chart); }
-    [data-command=insert-line-chart] { --icon: var(--treb-icon-line-chart); }
-    [data-command=insert-image] { --icon: var(--treb-icon-image); }
-
-    [data-command=border-bottom] { --icon: var(--treb-icon-border-bottom); }
-    [data-command=border-left] { --icon: var(--treb-icon-border-left); }
-    [data-command=border-right] { --icon: var(--treb-icon-border-right); }
-    [data-command=border-top] { --icon: var(--treb-icon-border-top); }
-    [data-command=border-outside] { --icon: var(--treb-icon-border-outer); }
-    [data-command=border-all] { --icon: var(--treb-icon-border-all); }
-    [data-command=border-none] { --icon: var(--treb-icon-border-none); }
-    [data-command=border-double-bottom] { --icon: var(--treb-icon-border-double-bottom); }
-    [data-icon=palette] { --icon: var(--treb-icon-palette); } 
+    [data-command=insert-column-chart] { --icon: var(--icon-column-chart); }
+    [data-command=insert-donut-chart] { --icon: var(--icon-donut-chart); }
+    [data-command=insert-bar-chart] { --icon: var(--icon-bar-chart); }
+    [data-command=insert-line-chart] { --icon: var(--icon-line-chart); }
+    [data-command=insert-image] { --icon: var(--icon-image); }
+
+    [data-command=border-bottom] { --icon: var(--icon-border-bottom); }
+    [data-command=border-left] { --icon: var(--icon-border-left); }
+    [data-command=border-right] { --icon: var(--icon-border-right); }
+    [data-command=border-top] { --icon: var(--icon-border-top); }
+    [data-command=border-outside] { --icon: var(--icon-border-outer); }
+    [data-command=border-all] { --icon: var(--icon-border-all); }
+    [data-command=border-none] { --icon: var(--icon-border-none); }
+    [data-command=border-double-bottom] { --icon: var(--icon-border-double-bottom); }
+    [data-icon=palette] { --icon: var(--icon-palette); } 
 
     [data-command=recalculate] { 
-      --icon: var(--treb-icon-recalculate); 
+      --icon: var(--icon-recalculate); 
       --icon-size: 20px 20px;
     } 
 
@@ -375,8 +375,8 @@ $swatch-size: 18px;
           -webkit-mask-position: center;
           mask-repeat: no-repeat;
           -webkit-mask-repeat: no-repeat;
-          mask-image: var(--treb-icon-x);
-          -webkit-mask-image: var(--treb-icon-x);
+          mask-image: var(--icon-x);
+          -webkit-mask-image: var(--icon-x);
           mask-size: 24px 24px;
           -webkit-mask-size: 24px 24px;
         }