@trebco/treb 25.4.2 → 25.6.0

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v25.4. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v25.6. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -367,7 +367,7 @@ export declare class EmbeddedSpreadsheet {
      * @param argument_separator - the argument separator to use when evaluating
      * the function. defaults to current locale.
      */
-    InsertAnnotation(formula: string, type?: string, rect?: IRectangle | RangeReference, argument_separator?: ',' | ';'): void;
+    InsertAnnotation(formula: string, type?: AnnotationType, rect?: IRectangle | RangeReference, argument_separator?: ',' | ';'): void;
 
     /**
      * Insert an image. This method will open a file chooser and (if an image
@@ -952,6 +952,7 @@ export interface FreezePane {
     rows: number;
     columns: number;
 }
+export type AnnotationType = 'treb-chart' | 'image' | 'external';
 export declare type BorderConstants = "none" | "all" | "outside" | "top" | "bottom" | "left" | "right";
 
 /**
@@ -1210,7 +1211,7 @@ export interface TableSortOptions {
     asc: boolean;
 }
 export type TableSortType = 'text' | 'numeric' | 'auto';
-export declare type LoadSource = "drag-and-drop" | "local-file" | "network-file" | "local-storage" | "undo";
+export declare type LoadSource = "drag-and-drop" | "local-file" | "network-file" | "local-storage" | "inline-document" | "undo";
 
 /**
  * EmbeddedSheetEvent is a discriminated union. Switch on the `type` field

package/package.json

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

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

@@ -1,30 +1,31 @@
-/*
- * 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-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
+/*
+ * 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-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
 import type { Style } from './style';
 import type { ValueType } 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 } from 'treb-grid';
 
 export interface CellParseResult {
   row: number,
@@ -43,7 +44,7 @@ export interface CellParseResult {
 
 export interface AnchoredAnnotation {
   layout: AnnotationLayout;
-  type?: string;
+  type?: AnnotationType;
   formula?: string;
 }
 

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

@@ -63,10 +63,6 @@ export interface Table {
    */
   name: string;
 
-  /**
-   * column names. these are the same (icase) as text in the first row
-   */
-
   /** table area */
   area: IArea;
 

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

@@ -528,17 +528,6 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
     theme.offset_light = css.color;
   }
 
-  /*
-  css = CSS('grid-background');
-  if (css.backgroundImage) {
-    const match = css.backgroundImage.match(/url\("*(.*?)"*\)/);
-    if (match) {
-      theme.background_image = new Image();
-      theme.background_image.src = match[1];
-    }
-  }
-  */
-
   // this _is_ painted, but it doesn't necessarily need to be -- we
   // could use a node. that would require moving it around, though. 
   // let's leave it for now.

package/treb-calculator/src/calculator.ts

@@ -1774,13 +1774,13 @@ export class Calculator extends Graph {
     }
 
     for (const entry of list) {
-      if (entry.formula) {
+      if (entry.data.formula) {
         if (!entry.temp.vertex) {
           entry.temp.vertex = new LeafVertex();
         }
         const vertex = entry.temp.vertex as LeafVertex;
         this.AddLeafVertex(vertex);
-        this.UpdateLeafVertex(vertex, entry.formula, context);
+        this.UpdateLeafVertex(vertex, entry.data.formula, context);
       }
     }
 

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -208,6 +208,10 @@ export class SpreadsheetConstructor {
           case 'data-treb':
             continue; 
 
+          // has special handling as an attribute
+          case 'inline-document':
+            continue;
+
           // special case
           case 'src':
             attribute_options.document = this.root.getAttribute('src') || undefined;
@@ -255,6 +259,49 @@ export class SpreadsheetConstructor {
         }
       }
 
+      // inline-document means look in the tag contents for a script 
+      // element, and use that. the script must have type "application/json",
+      // and if it has a name, the name must match the value of the 
+      // inline-document attribute.
+      //
+      // so either 
+      //
+      // <treb-spreadsheet inline-document>
+      //   <script type="application/json">{ ... }</script>
+      // </treb-spreadsheet>
+      //
+      // or 
+      //
+      // <treb-spreadsheet inline-document="xyz">
+      //   <script type="application/json" name="xyz">{ ... }</script>
+      // </treb-spreadsheet>
+
+      if (this.root.hasAttribute('inline-document')) {
+        const inline_name = this.root.getAttribute('inline-document') || '';
+        for (const element of Array.from(this.root.children)) {
+          if (element instanceof HTMLScriptElement) {
+            if (element.type === 'application/json') {
+              const name = element.getAttribute('name') || '';
+              if (name === inline_name) {
+                const content = element.textContent;
+                if (content) {
+                  try {
+                    options.inline_document = JSON.parse(content);
+                  }
+                  catch (err) {
+                    console.error(err);
+                  }
+                }
+                break;
+              }
+            }
+          }
+        }
+        if (!options.inline_document) {
+          console.warn('inline document failed');
+        }
+      }
+
       this.root.innerHTML = html;
       options.container = this.root.querySelector('.treb-layout-spreadsheet') as HTMLElement;
 

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

@@ -29,7 +29,8 @@ import type {
   SerializedModel, FreezePane, SerializedSheet,
   SheetChangeEvent, GridOptions, 
   GridSelection, CellEvent, FunctionDescriptor, 
-  AnnotationViewData, 
+  AnnotationViewData,
+  AnnotationType, 
 } from 'treb-grid';
 
 import {
@@ -506,11 +507,15 @@ export class EmbeddedSpreadsheet {
       }
     }
 
+    if (this.options.document && this.options.inline_document) {
+      console.warn('both document and inline-document are provided');
+    }
+
     const network_document = this.options.document;
 
     // optionally data from storage, with fallback
 
-    let data: string | undefined;
+    let data: string | undefined | TREBDocument;
     let source: LoadSource | undefined;
 
     // don't load if we're a split view. we can also skip the 
@@ -523,6 +528,14 @@ export class EmbeddedSpreadsheet {
       }
     }
 
+    // if we have an inline document, and there was nothing in local storage,
+    // load the inline document now. not for splits.
+
+    if (!data && !this.options.toll_initial_load && !options.model && options.inline_document) {
+      data = options.inline_document;
+      source = LoadSource.INLINE_DOCUMENT;
+    }
+
     // this one should not be done for a split view, but we should still
     // do it if the toll flag is set, and storage key is set. 
 
@@ -858,8 +871,12 @@ export class EmbeddedSpreadsheet {
     // FIXME: this should yield so we can subscribe to events before the initial load
 
     if (data) {
-      this.LoadDocument(JSON.parse(data), 
-        { recalculate: !!this.options.recalculate, source});
+      if (typeof data === 'string') {
+        data = JSON.parse(data);
+      }
+      if (data) {
+        this.LoadDocument(data as TREBDocument, { recalculate: !!this.options.recalculate, source});
+      }
     }
     else if (!network_document) {
 
@@ -1875,7 +1892,7 @@ export class EmbeddedSpreadsheet {
    * @param argument_separator - the argument separator to use when evaluating
    * the function. defaults to current locale.
    */
-  public InsertAnnotation(formula: string, type = 'treb-chart', rect?: IRectangle|RangeReference, argument_separator?: ','|';'): void {
+  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, argument_separator?: ','|';'): void {
 
     let target: IRectangle | Partial<Area> | undefined;
 
@@ -2307,6 +2324,15 @@ export class EmbeddedSpreadsheet {
    */
   public Revert(): void {
 
+    if (this.options.inline_document) {
+      this.LoadDocument(this.options.inline_document);
+      if (this.options.storage_key) {
+        this.SaveLocalStorage('reverted_backup');
+        localStorage.removeItem(this.options.storage_key);
+      }
+      return;
+    }
+
     const canonical = this.options.document;
 
     if (canonical) {
@@ -3146,7 +3172,7 @@ export class EmbeddedSpreadsheet {
         }
 
         for (const annotation of sheet.annotations || []) {
-          if (annotation.type === 'image' && annotation.data.src) {
+          if (annotation.type === 'image' && annotation.data?.src) {
             annotation.data.src = Store(annotation.data.src);
           }
         }
@@ -4325,15 +4351,20 @@ export class EmbeddedSpreadsheet {
             const annotation = this.grid.CreateAnnotation({
               type: 'image',
               formula: '',
+              data: {
+                scale: '',
+                src: contents,
+                original_size: { width: img.width || 300, height: img.height || 300 },
+              },
             }, undefined, undefined, {
               top: 30,
               left: 30,
               width: img.width || 300,
-              height: img.height || 300
+              height: img.height || 300,
             });
 
-            annotation.data.src = contents;
-            annotation.data.original_size = { width: img.width || 300, height: img.height || 300 };
+            // annotation.data.src = contents;
+            // annotation.data.original_size = { width: img.width || 300, height: img.height || 300 };
 
           }
 
@@ -4588,9 +4619,12 @@ export class EmbeddedSpreadsheet {
       annotation.dirty = false;
     }
 
-    if (view.content_node && annotation.data) {
+    // why was this testing for data? that would always exist on an annotation
+    // instance (but not in our new data type). maybe some legacy thing? 
 
-      if (annotation.type === 'treb-chart') {
+    if (view.content_node ) { // && annotation.annotation_data.data) {
+
+      if (annotation.data.type === 'treb-chart') {
 
         // if (!(self as any).TREB || !(self as any).TREB.CreateChart2) {
         //    console.warn('missing chart library');
@@ -4608,8 +4642,8 @@ export class EmbeddedSpreadsheet {
 
           const update_chart = () => {
 
-            if (annotation.formula) {
-              const parse_result = this.parser.Parse(annotation.formula);
+            if (annotation.data.formula) {
+              const parse_result = this.parser.Parse(annotation.data.formula);
               if (parse_result &&
                 parse_result.expression &&
                 parse_result.expression.type === 'call') {
@@ -4661,16 +4695,16 @@ export class EmbeddedSpreadsheet {
         }
 
       }
-      else if (annotation.type === 'image') {
-        if (typeof annotation.data.src === 'string') {
+      else if (annotation.data.type === 'image') {
+        if (typeof annotation.data.data?.src === 'string') {
 
-          const reference = ValidateURI(annotation.data.src);
+          const reference = ValidateURI(annotation.data.data.src);
           if (reference) {
  
             const img = document.createElement('img');
             img.src = reference;
 
-            if (annotation.data.scale === 'fixed') {
+            if (annotation.data.data.scale === 'fixed') {
               img.style.position = 'relative';
               img.style.left = '50%';
               img.style.top = '50%';
@@ -5019,7 +5053,7 @@ export class EmbeddedSpreadsheet {
       for (const sheet_data of sheets) {
 
         if (sheet_data.annotations) {
-          for (const annotation of (sheet_data.annotations as Annotation[])) {
+          for (const annotation of (sheet_data.annotations)) {
             if (annotation.formula) {
               const translated = translate(annotation.formula);
               if (translated) {
@@ -5136,7 +5170,7 @@ export class EmbeddedSpreadsheet {
           sheet.background_image = Unshare(sheet.background_image);
         }
         for (const annotation of sheet.annotations || []) {
-          if (annotation.type === 'image' && annotation.data.src) {
+          if (annotation.type === 'image' && annotation.data?.src) {
             annotation.data.src = Unshare(annotation.data.src);
           }
         }

package/treb-embed/src/options.ts

@@ -20,6 +20,7 @@
  */
 
 import type { ICellAddress } from 'treb-base-types';
+import type { TREBDocument } from './types';
 
 /**
  * options for exporting CSV/TSV
@@ -97,6 +98,16 @@ export interface EmbeddedSpreadsheetOptions {
    */
   document?: string;
 
+  /**
+   * @internal - testing
+   * 
+   * load document directly from data. obeys the same rules as `document` 
+   * regarding local storage and revert. if you provide both document and
+   * inline_document we will show a warning, but inline_document will take
+   * precedence.
+   */
+  inline_document?: TREBDocument;
+
   /** 
    * fetch network document (URI) 
    * @deprecated - use `document`

package/treb-embed/src/types.ts

@@ -74,6 +74,7 @@ export enum LoadSource {
   LOCAL_FILE = 'local-file',
   NETWORK_FILE = 'network-file',
   LOCAL_STORAGE = 'local-storage',
+  INLINE_DOCUMENT = 'inline-document',
   UNDO = 'undo',
 }
 

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

@@ -182,9 +182,14 @@ $text-reference-color-5: rgb(254, 47, 1);
     background: var(--treb-grid-background, #fff);
   }
 
+  /* 
+   * we stopped using this in favor of sheet backgrounds. although
+   * there's a case to be made for the static background as well.
+   *
   .grid-background {
     background-image: var(--treb-grid-background-image, none);
   }
+  */
 
   /**
    * this is used for freeze-area highlights

package/treb-export/src/export2.ts

@@ -35,7 +35,7 @@ import { template } from './template-2';
 import type { SerializedSheet } from 'treb-grid';
 
 import type { IArea, ICellAddress, CellValue, DataValidation,
-         AnnotationLayout, Corner as LayoutCorner, Cell } from 'treb-base-types';
+         AnnotationLayout, Corner as LayoutCorner, Cell, Rectangle } from 'treb-base-types';
 import { Area, Cells, ValueType, Style, ValidationType } from 'treb-base-types';
 
 // import * as xmlparser from 'fast-xml-parser';
@@ -61,6 +61,7 @@ import type { ImageOptions } from './drawing2/embedded-image';
 import type { TwoCellAnchor } from './drawing2/drawing2';
 import { Drawing } from './drawing2/drawing2';
 import type { TableDescription, TableFooterType } from './workbook2';
+import type { AnnotationData } from 'treb-grid/src/types/annotation';
 
 export class Exporter {
 
@@ -651,12 +652,7 @@ export class Exporter {
    * the target units are.
    */
   public AnnotationRectToAnchor(
-      annotation_rect: { 
-        left: number; 
-        top: number; 
-        width: number; 
-        height: number; 
-      }, 
+      src_rect: Partial<Rectangle>, 
       sheet: SerializedSheet): TwoCellAnchor {
     
     const anchor: TwoCellAnchor = {
@@ -664,6 +660,11 @@ export class Exporter {
       to: {row: -1, column: -1},
     };
 
+    const annotation_rect = {
+      top: 0, left: 0, width: 301, height: 301,
+      ...src_rect,
+    };
+
     const rect = {
       ...annotation_rect,  // {top, left, width, height}
       right: annotation_rect.left + annotation_rect.width,
@@ -706,7 +707,7 @@ export class Exporter {
 
     const images: Array<{ anchor: TwoCellAnchor, options: ImageOptions }> = [];
 
-    for (const annotation of sheet_source.annotations || []) {
+    for (const annotation of (sheet_source.annotations as Array<AnnotationData & {rect?: Partial<Rectangle>}>) || []) {
       if (annotation.type === 'image' && annotation.data?.src) {
 
         // this is (should be) a data URI in base64. at least (atm) 
@@ -940,9 +941,14 @@ export class Exporter {
             }
           }
 
-          if (annotation.rect) {
+          // FIXME: fix this type (this happened when we switched from annotation
+          // class to a data interface)
+
+          const rect = (annotation as AnnotationData & { rect?: Partial<Rectangle>}).rect;
+
+          if (rect) {
             charts.push({
-              anchor: this.AnnotationRectToAnchor(annotation.rect, sheet_source), options});
+              anchor: this.AnnotationRectToAnchor(rect, sheet_source), options});
             // sheet.AddChart(this.AnnotationRectToAnchor(annotation.rect, sheet_source), options);
           }
           else if (annotation.layout) {

package/treb-export/src/import2.ts

@@ -37,6 +37,7 @@ import { XMLUtils } from './xml-utils';
 
 // import { one_hundred_pixels } from './constants';
 import { ColumnWidthToPixels } from './column-width';
+import type { AnnotationType } from 'treb-grid';
 
 interface SharedFormula {
   row: number;
@@ -697,7 +698,7 @@ export class Importer {
           br: AnchorToCorner(descriptor.anchor.to),
         };
 
-        let type: string|undefined;
+        let type: AnnotationType|undefined;
         const args: Array<string|undefined> = [];
         let func = '';        
         const series = descriptor.chart?.series;

package/treb-grid/src/index.ts

@@ -37,4 +37,5 @@ export { BorderConstants } from './types/border_constants';
 export type { SerializeOptions } from './types/serialize_options';
 export type { FunctionDescriptor, ArgumentDescriptor } from './editors/autocomplete_matcher';
 export { UA } from './util/ua';
-export type { SetRangeOptions } from './types/set_range_options';
+export type { SetRangeOptions } from './types/set_range_options';
+export type { AnnotationData, AnnotationType } from './types/annotation';

package/treb-grid/src/layout/base_layout.ts

@@ -672,21 +672,21 @@ export abstract class BaseLayout {
         // be persisted (assuming it's saved). eventually this should
         // be superfluous...
 
-        if (annotation.rect && !annotation.layout) {
+        if (annotation.rect && !annotation.data.layout) {
 
           // this is breaking on freeze when the spreadsheet is scrolled because
           // the top-left uses the freeze panes. stop doing that.
 
           annotation.scaled_rect = annotation.rect.Scale(this.scale);
-          annotation.layout = this.RectToAnnotationLayout(annotation.scaled_rect);
+          annotation.data.layout = this.RectToAnnotationLayout(annotation.scaled_rect);
         }
 
 
         // FIXME: merge cells? [...]
 
-        if (annotation.layout) {
+        if (annotation.data.layout) {
 
-          const rect = this.AnnotationLayoutToRect(annotation.layout);
+          const rect = this.AnnotationLayoutToRect(annotation.data.layout);
           rect.ApplyStyle(view.node);
 
           // NOTE: we still set the scaled rect, because that's used in 
@@ -949,9 +949,9 @@ export abstract class BaseLayout {
           }
 
         }, () => {
-          annotation.extent = undefined; // reset
+          annotation.data.extent = undefined; // reset
           // annotation.rect = rect.Scale(1/this.scale);
-          annotation.layout = this.RectToAnnotationLayout(rect);
+          annotation.data.layout = this.RectToAnnotationLayout(rect);
           // this.grid_events.Publish({ type: 'annotation', annotation, event: 'move' });
           resolve({ type: 'annotation', annotation, event: 'move' })
         });
@@ -969,11 +969,14 @@ export abstract class BaseLayout {
         node.focus();
 
         let aspect = 0;
-        if (annotation.data?.original_size
-          && annotation.data.original_size.width
-          && annotation.data.original_size.height) {
-          aspect = annotation.data.original_size.width /
-            annotation.data.original_size.height;
+        if (annotation.data.type === 'image') {
+          if (annotation.data.data
+            && annotation.data.data.original_size
+            && annotation.data.data.original_size.width
+            && annotation.data.data.original_size.height) {
+            aspect = annotation.data.data.original_size.width /
+              annotation.data.data.original_size.height;
+          }
         }
 
         const bounds = node.getBoundingClientRect();
@@ -1029,9 +1032,9 @@ export abstract class BaseLayout {
           }
 
         }, () => {
-          annotation.extent = undefined; // reset
+          annotation.data.extent = undefined; // reset
           // annotation.rect = rect.Scale(1/this.scale);
-          annotation.layout = this.RectToAnnotationLayout(rect);
+          annotation.data.layout = this.RectToAnnotationLayout(rect);
 
           // this.grid_events.Publish({ type: 'annotation', annotation, event: 'resize' });
           resolve({ type: 'annotation', annotation, event: 'resize' });