@trebco/treb 27.9.0 → 27.11.4

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v27.9. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v27.11. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -6,7 +6,9 @@
 declare global {
   interface HTMLElementTagNameMap {
     'treb-spreadsheet': HTMLElement & {
-      sheet: EmbeddedSpreadsheet|undefined;
+      instance: {
+        sheet: EmbeddedSpreadsheet | undefined;
+      } | undefined;
     };
   }
 }
@@ -385,11 +387,11 @@ export declare class EmbeddedSpreadsheet {
      * @param formula - annotation formula. For charts, the chart formula.
      * @param type - annotation type. Defaults to `treb-chart`.
      * @param rect - coordinates, or a range reference for layout.
-     *
-     * @param argument_separator - the argument separator to use when evaluating
-     * the function. defaults to current locale.
+     * @param options - evaluate options. because this function used to take
+     *  the argument separator, we allow that to be passed directly, but this
+     *  is deprecated. new code should use the options object.
      */
-    InsertAnnotation(formula: string, type?: AnnotationType, rect?: IRectangle | RangeReference, argument_separator?: ',' | ';'): void;
+    InsertAnnotation(formula: string, type?: AnnotationType, rect?: IRectangle | RangeReference, options?: EvaluateOptions | ',' | ';'): void;
 
     /**
      * Insert an image. This method will open a file chooser and (if an image

package/package.json

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

package/{treb-grid/src/util/dom_utilities.ts → treb-base-types/src/dom-utilities.ts}

@@ -19,25 +19,50 @@
  * 
  */
 
+const SVGNS = 'http://www.w3.org/2000/svg';
+
 export class DOMUtilities {
 
   /** creates a div and assigns class name/names */
-  public static CreateDiv(classes = '', parent?: HTMLElement, scope?: string): HTMLDivElement {
+  public static Div(classes?: string|string[], parent?: HTMLElement, scope?: string): HTMLDivElement {
     return this.Create('div', classes, parent, scope);
   }
 
+  public static ClassNames(element: HTMLElement|SVGElement, classes: string|string[]) {
+    element.classList.add(...(Array.isArray(classes) ? classes : [classes]).reduce((arr: string[], entry) => [...arr, ...entry.split(/\s+/g)], []));
+  }
+
+  public static SVG<K extends keyof SVGElementTagNameMap>(
+      tag: K, 
+      classes?: string|string[],
+      parent?: HTMLElement|SVGElement
+    ): SVGElementTagNameMap[K] {
+
+    const element = document.createElementNS(SVGNS, tag);
+
+    if (classes) {
+      this.ClassNames(element, classes);
+    }
+
+    if (parent) {
+      parent.appendChild(element);
+    }
+
+    return element;
+  }
+
   /** better typing */
   public static Create<K extends keyof HTMLElementTagNameMap>(
       tag: K, 
-      class_name = '', 
+      classes?: string|string[], 
       parent?: HTMLElement, 
       scope?: string, 
       attrs?: Record<string, string>): HTMLElementTagNameMap[K] {
  
     const element = document.createElement(tag);
 
-    if (class_name) {
-      element.className = class_name;
+    if (classes) {
+      this.ClassNames(element, classes);
     }
 
     if (scope) {
@@ -58,20 +83,4 @@ export class DOMUtilities {
     return element;
   }
 
-  /* * generic element constructor. shame we need the tag AND the type. * /
-  public static Create1<E extends HTMLElement>(tag = '', classes = '', parent?: HTMLElement, scope?: string, attrs?: Record<string, string>){
-    const element = document.createElement(tag) as E;
-    if (classes) element.setAttribute('class', classes);
-    if (scope) element.setAttribute(scope, '');
-    if (attrs) {
-      const keys = Object.keys(attrs);
-      for (const key of keys) {
-        element.setAttribute(key, attrs[key]);
-      }
-    }
-    if (parent) parent.appendChild(element);
-    return element;
-  }
-  */
-
 }

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

@@ -38,6 +38,7 @@ export * from './api_types';
 export * from './table';
 export * from './gradient';
 export * from './evaluate-options';
+export * from './dom-utilities';
 
 // import * as Style from './style';
 // export { Style };

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

@@ -21,6 +21,7 @@
 
 import type { Color, CellStyle } from './style';
 import { ColorFunctions } from './color';
+import { DOMUtilities } from './dom-utilities';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -494,10 +495,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   const theme: Theme = JSON.parse(JSON.stringify(DefaultTheme));
 
   const Append = (parent: HTMLElement, classes: string): HTMLDivElement => {
-    const node = document.createElement('div');
-    node.setAttribute('class', classes);
-    parent.appendChild(node);
-    return node;
+    return DOMUtilities.Div(classes, parent);
   }
 
   const ElementCSS = (parent: HTMLElement, classes: string): CSSStyleDeclaration => {
@@ -574,7 +572,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   // we could just parse, we know the returned css format is going
   // to be an rgb triple (I think?)
 
-  const canvas = document.createElement('canvas');
+  const canvas = DOMUtilities.Create('canvas');
 
   canvas.width = 3;
   canvas.height = 3;

package/treb-embed/src/custom-element/global.d.ts

@@ -5,7 +5,9 @@
 declare global {
   interface HTMLElementTagNameMap {
     'treb-spreadsheet': HTMLElement & {
-      sheet: EmbeddedSpreadsheet|undefined;
+      instance: {
+        sheet: EmbeddedSpreadsheet | undefined;
+      } | undefined;
     };
   }
 }

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

@@ -19,8 +19,11 @@ interface ElementOptions {
   classes: string|string[];
 }
 
-const Element = <T extends HTMLElement>(tag: string, parent?: HTMLElement|DocumentFragment, options: Partial<ElementOptions> = {}, attrs: Record<string, string> = {}): T => {
-  const element = document.createElement(tag) as T;
+/**
+ * FIXME: unify this with DOMUtils
+ */
+const Element = <K extends keyof HTMLElementTagNameMap>(tag: K, parent?: HTMLElement|DocumentFragment, options: Partial<ElementOptions> = {}, attrs: Record<string, string> = {}): HTMLElementTagNameMap[K] => {
+  const element = document.createElement(tag);
   if (options.classes) {
 
     // you can't use an array destructure in a ternary expression? TIL
@@ -105,21 +108,12 @@ export class SpreadsheetConstructor {
 
       const style_node = document.head.querySelector('style[treb-stylesheet]');
       if (!style_node) {
-        const style = document.createElement('style');
+        const style = Element('style');
         style.setAttribute('treb-stylesheet', '');
         style.textContent = css;
         document.head.prepend(style);
       }
 
-      /*
-      if (!SpreadsheetConstructor.stylesheets_attached) {
-        const style = document.createElement('style');
-        style.textContent = css;
-        document.head.prepend(style);
-        SpreadsheetConstructor.stylesheets_attached = true;
-      }
-      */
-
     }
 
   }
@@ -509,9 +503,9 @@ export class SpreadsheetConstructor {
 
         const resize_parent = root.querySelector('.treb-main') as HTMLElement; // was document.body
 
-        resizer = Element<HTMLDivElement>('div', resize_parent, { classes: 'treb-resize-rect' });
+        resizer = Element('div', resize_parent, { classes: 'treb-resize-rect' });
 
-        mask = Element<HTMLDivElement>('div', resize_parent, { 
+        mask = Element('div', resize_parent, { 
           classes: 'treb-resize-mask', 
           style: 'cursor: nw-resize;',
         });
@@ -724,7 +718,7 @@ export class SpreadsheetConstructor {
               }
 
             }
-            Element<HTMLButtonElement>('button', fragment, { style, title, data: { command: 'set-color', color: JSON.stringify(entry.color) } });
+            Element('button', fragment, { style, title, data: { command: 'set-color', color: JSON.stringify(entry.color) } });
           }
         }
 
@@ -733,7 +727,7 @@ export class SpreadsheetConstructor {
       this.swatch_lists.theme?.replaceChildren(fragment);
 
       fragment = document.createDocumentFragment();
-      Element<HTMLButtonElement>('button', fragment, { 
+      Element('button', fragment, { 
         classes: 'treb-default-color',
         title: 'Default color', 
         data: { command: 'set-color', color: JSON.stringify({}) },
@@ -748,7 +742,7 @@ export class SpreadsheetConstructor {
 
       for (const text of [...colors, ...additional_colors]) {
         const style = `background: ${text.toLowerCase()};`;
-        Element<HTMLButtonElement>('button', fragment, { style, title: text, data: { command: 'set-color', color: JSON.stringify({text: text.toLowerCase()})}});
+        Element('button', fragment, { style, title: text, data: { command: 'set-color', color: JSON.stringify({text: text.toLowerCase()})}});
       }
 
       this.swatch_lists.other?.replaceChildren(fragment);
@@ -777,7 +771,7 @@ export class SpreadsheetConstructor {
     }
 
     const Button = (format: string) => {
-      return Element<HTMLButtonElement>('button', undefined, {
+      return Element('button', undefined, {
         text: format, data: { format, command: 'number-format' },
       });
     };
@@ -785,7 +779,7 @@ export class SpreadsheetConstructor {
     const fragment = document.createDocumentFragment();
     fragment.append(...number_formats.map(format => Button(format)));
 
-    fragment.append(Element<HTMLDivElement>('div', undefined, {}, {separator: ''}));
+    fragment.append(Element('div', undefined, {}, {separator: ''}));
     fragment.append(...date_formats.map(format => Button(format)));
 
     format_menu.textContent = '';

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

@@ -65,7 +65,7 @@ import type {
 
 import {
   IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, type CellStyle,
-  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, ValueType, 
+  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, ValueType, DOMUtilities, 
 } from 'treb-base-types';
 
 import { EventSource, Yield, ValidateURI } from 'treb-utils';
@@ -565,12 +565,33 @@ export class EmbeddedSpreadsheet {
     // 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. 
 
+    // FIXME: shouldn't this gate on dirty? (...)
+    // ALSO: check if we can use a different event. see
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
+    //
+    // and, including the alternatives:
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
+    //
+
     if (this.options.local_storage && !options.model ) {
+
+      window.addEventListener('visibilitychange', event => {
+        if (document.visibilityState === 'hidden') {
+          if (this.options.local_storage && this.dirty) {
+            this.SaveLocalStorage(this.options.local_storage);
+          }
+        }
+      });
+
+      /*
       window.addEventListener('beforeunload', () => {
-        if (this.options.local_storage) {
+        if (this.options.local_storage && this.dirty) {
           this.SaveLocalStorage(this.options.local_storage);
         }
       });
+      */
     }
 
     let container: HTMLElement | undefined;
@@ -2206,19 +2227,29 @@ export class EmbeddedSpreadsheet {
    * @param formula - annotation formula. For charts, the chart formula.
    * @param type - annotation type. Defaults to `treb-chart`.
    * @param rect - coordinates, or a range reference for layout.
-   * 
-   * @param argument_separator - the argument separator to use when evaluating
-   * the function. defaults to current locale.
+   * @param options - evaluate options. because this function used to take 
+   *  the argument separator, we allow that to be passed directly, but this
+   *  is deprecated. new code should use the options object.
    */
-  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, argument_separator?: ','|';'): void {
+  public InsertAnnotation(formula: string, type: AnnotationType = 'treb-chart', rect?: IRectangle|RangeReference, options?: EvaluateOptions|','|';'): void {
 
     let target: IRectangle | Partial<Area> | undefined;
+    let argument_separator: ','|';'|undefined = undefined;
+    let r1c1 = false;
+
+    if (typeof options === 'object') {
+      argument_separator = options.argument_separator;
+      r1c1 = !!options.r1c1;
+    }
+    else if (options === ',' || options === ';') {
+      argument_separator = options;
+    }
 
     if (rect) {
       target = Rectangle.IsRectangle(rect) ? rect : this.model.ResolveArea(rect, this.grid.active_sheet);
     }
 
-    if (argument_separator && argument_separator !== this.parser.argument_separator) {
+    if (argument_separator && argument_separator !== this.parser.argument_separator || r1c1) {
       const current = {
         argument_separator: this.parser.argument_separator, 
         decimal_mark: this.parser.decimal_mark,
@@ -2233,11 +2264,17 @@ export class EmbeddedSpreadsheet {
         this.parser.decimal_mark = DecimalMarkType.Comma;
       }
 
+      const r1c1_state = this.parser.flags.r1c1;
+      if (r1c1) {
+        this.parser.flags.r1c1 = r1c1;
+      }
+
       const result = this.parser.Parse(formula);
       
       // reset
       this.parser.argument_separator = current.argument_separator;
       this.parser.decimal_mark = current.decimal_mark;
+      this.parser.flags.r1c1 = r1c1_state;
 
       if (result.expression) {
         formula = '=' + this.parser.Render(result.expression, { missing: '' });
@@ -3106,14 +3143,6 @@ export class EmbeddedSpreadsheet {
 
     if (text && filename) {
       const blob = new Blob([text as any], { type: 'text/plain;charset=utf-8' });
-      /*
-      // FileSaver.saveAs(blob, filename, { autoBom: false });
-      const a = document.createElement('a');
-      a.href = URL.createObjectURL(blob);
-      a.download = filename;
-      a.click();
-      URL.revokeObjectURL(a.href);
-      */
       this.SaveAs(blob, filename);
     }
 
@@ -4312,7 +4341,7 @@ export class EmbeddedSpreadsheet {
    */
   protected SaveAs(blob: Blob, filename: string) {
 
-    const a = document.createElement('a');
+    const a = DOMUtilities.Create('a');
     a.href = URL.createObjectURL(blob);
     a.download = filename;
     a.click();
@@ -4437,7 +4466,7 @@ export class EmbeddedSpreadsheet {
             return;
           }
 
-          const a = document.createElement('a');
+          const a = DOMUtilities.Create('a');
           a.setAttribute('target', this.options.hyperlinks);
           a.setAttribute('href', data);
           a.setAttribute('noreferrer', 'true');
@@ -4578,7 +4607,7 @@ export class EmbeddedSpreadsheet {
   protected SelectFile2(accept: string, operation: FileChooserOperation) {
 
     if (!this.file_chooser) {
-      this.file_chooser = document.createElement('input');
+      this.file_chooser = DOMUtilities.Create('input');
       this.file_chooser.type = 'file';
 
       const file_chooser = this.file_chooser;      
@@ -4611,79 +4640,6 @@ export class EmbeddedSpreadsheet {
 
   }
 
-  /* *
-   * show file chooser and resolve with the selected file, or undefined
-   * /
-  protected SelectFile(accept?: string): Promise<File | undefined> {
-
-    return new Promise((resolve) => {
-
-      const file_chooser = document.createElement('input');
-      file_chooser.type = 'file';
-
-      if (accept) {
-        file_chooser.accept = accept;
-      }
-
-      // so the thing here is there is no way to trap a "cancel" event
-      // from the file chooser. if you are waiting on a promise, that will
-      // just get orphaned forever. 
-
-      // it's not the end of the world, really, to leave a few of these 
-      // dangling, but this should allow it to clean up.
-
-      // the concept is that since file chooser is modal, there will never
-      // be a focus event until the modal is closed. unfortunately the focus
-      // event comes _before_ any input or change event from the file input,
-      // so we have to wait.
-
-      // tested Cr, FF, IE11
-      // update: works in Safari, although oddly not if you call the API
-      // function from the console. not sure if that's a browserstack thing.
-
-      // eslint-disable-next-line prefer-const
-      let finalize: (file?: File) => void;
-      let timeout: NodeJS.Timeout|undefined;
-
-      // if you get a focus event, allow some reasonable time for the 
-      // corresponding change event. realistically this should be immediate,
-      // but as long as there's not a lot of logic waiting on a cancel, it 
-      // doesn't really matter.
-
-      const window_focus = () => {
-
-        // prevent this from accidentally being called more than once
-        window.removeEventListener('focus', window_focus);
-        timeout = setTimeout(finalize, 250);
-      }
-
-      const change_handler = () => {
-        if (timeout) {
-          clearTimeout(timeout);
-          timeout = undefined; // necessary?
-        }
-        finalize(file_chooser.files ? file_chooser.files[0] : undefined);
-      }
-
-      // our finalize method cleans up and resolves
-
-      finalize = (file?: File) => {
-        file_chooser.removeEventListener('change', change_handler);
-        window.removeEventListener('focus', window_focus);
-        resolve(file);
-      };
-
-      file_chooser.addEventListener('change', change_handler);
-      window.addEventListener('focus', window_focus);
-
-      file_chooser.click();
-
-
-    });
-
-  }
-  */
-
   /**
    * Insert an image. This method will open a file chooser and (if an image
    * is selected) insert the image into the document.
@@ -4728,7 +4684,7 @@ export class EmbeddedSpreadsheet {
               }
             }
 
-            const img = document.createElement('img');
+            const img = DOMUtilities.Create('img');
             img.src = contents;
 
             // this is to let the browser figure out the image size.
@@ -5093,7 +5049,7 @@ export class EmbeddedSpreadsheet {
           const reference = ValidateURI(annotation.data.data.src);
           if (reference) {
  
-            const img = document.createElement('img');
+            const img = DOMUtilities.Create('img');
             img.src = reference;
 
             if (annotation.data.data.scale === 'fixed') {
@@ -5142,9 +5098,27 @@ export class EmbeddedSpreadsheet {
 
       // console.info(json);
 
+      // why are we saving this here? and should we not route
+      // through the method? I guess the question should be, is
+      // the visibilitychange handler not sufficient to save the
+      // file? (...)
+
+      // I would prefer to just save once, on visibilitychange -> hidden.
+      // the problem is that this method gets called on "data" events,
+      // which should not trigger saving. we could check the flag?
+
+      // if this does come back, (1) use a method -- maybe split the 
+      // SaveLocalStorage method in two, and call the inner half (because
+      // we've already serialized); and (2) gate on dirty.
+
+      // but for the time being we're removing it.
+
+      /*
       if (this.options.local_storage) {
         localStorage.setItem(this.options.local_storage, json);
       }
+      */
+
       if (this.options.undo) {
         this.PushUndo(json, undo_selection, false);
       }

package/treb-embed/src/spinner.ts

@@ -19,16 +19,16 @@
  * 
  */
 
+import { DOMUtilities } from 'treb-base-types';
+
 export class Spinner {
 
   private node: HTMLDivElement;
   private visible = false;
 
   constructor(public container: HTMLElement) {
-    this.node = document.createElement('div');
-    this.node.classList.add('treb-spinner');
+    this.node = DOMUtilities.Div('treb-spinner', container);
     this.node.innerHTML = `<div><div></div><div></div><div></div><div></div></div>`;
-    container.appendChild(this.node);
   }
 
   public Show(): void {

package/treb-embed/style/layout.scss

@@ -228,7 +228,7 @@
         justify-self: end;
         align-self: end;
 
-        border: .5rem solid var(--treb-resize-handle-color, blue);
+        border: .5rem solid var(--treb-resize-handle-color, #0059B9);
         border-top-color: transparent;
         border-left-color: transparent;
 

package/treb-embed/style/overlay-editor.scss

@@ -90,6 +90,15 @@
       white-space: nowrap;
       position: relative;
       // -webkit-user-modify: read-write;
+
+      // this fixes the firefox issue (firefox removing spaces), but 
+      // I'm not sure if it will cause other problems. for the overlay
+      // editor we're trapping CR, so it shouldn't be a typing problem --
+      // it might be an issue on paste though. also need to check safari
+      // with pre here.
+
+      white-space: pre; 
+
     }
 
     /** fix for firefox layout bug */

package/treb-export/src/drawing2/chart2.ts

@@ -169,7 +169,11 @@ export class Chart {
         }
       }
 
-      series['c:spPr']['a:ln']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+      // "accent7" will break 
+
+      if (i < 6) {
+        series['c:spPr']['a:ln']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+      }
 
       series['c:yVal']['c:numRef']['c:f'] = this.options.data[i]?.label;
 
@@ -255,7 +259,12 @@ export class Chart {
 
         series['c:idx'] = { a$: { val: i.toString() }};
         series['c:order'] = { a$: { val: i.toString() }};
-        series['c:spPr']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+
+        // "accent7" will break 
+
+        if (i < 6) {
+          series['c:spPr']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+        }
 
         if (!i && this.options.labels) {
           series['c:cat'] = {

package/treb-export/src/export2.ts

@@ -642,6 +642,9 @@ export class Exporter {
     // is this backwards, vis a vis our rendering? I think it might be...
     // YES: should be row pattern -> row -> column -> cell [corrected]
 
+    // FIXME: can't we just ask the sheet? (A: no, because we don't have 
+    // an actual sheet, although we could?)
+
     // if (sheet.row_style && sheet.row_style[row]) {
     //  list.push(sheet.row_style[row]);
     // }
@@ -1270,6 +1273,7 @@ export class Exporter {
           },
           dataValidations: {},
           hyperlinks: {},
+          conditionalFormatting: {},
           pageMargins: {
             a$: {
               left: 0.7,
@@ -2157,7 +2161,13 @@ export class Exporter {
         if (conditionalFormatting.length) {
           dom.worksheet.conditionalFormatting = (conditionalFormatting.length > 1) ? conditionalFormatting : conditionalFormatting[0];
         }
-        
+        else {
+          delete dom.worksheet.conditionalFormatting;
+        }
+
+      }
+      else {
+        delete dom.worksheet.conditionalFormatting;
       }
 
       // --- merges ------------------------------------------------------------
@@ -2333,9 +2343,9 @@ export class Exporter {
 
       // --- move page margins -------------------------------------------------
 
-      const margins = dom.worksheet.pageMargins;
-      delete dom.worksheet.pageMargins;
-      dom.worksheet.pageMargins = margins;
+      // const margins = dom.worksheet.pageMargins;
+      // delete dom.worksheet.pageMargins;
+      // dom.worksheet.pageMargins = margins;
 
       // --- end? --------------------------------------------------------------
 

package/treb-export/src/workbook-style2.ts

@@ -424,17 +424,18 @@ export class StyleCache {
       fill.pattern_type = 'solid';
       if (composite.fill.text) {
         fill.fg_color = { argb: composite.fill.text };  
+        options.fill = fill;
       }
       else if (typeof composite.fill.theme === 'number') {
         fill.fg_color = { theme: composite.fill.theme };
         if (composite.fill.tint) {
           fill.fg_color.tint = composite.fill.tint;
         }
+        options.fill = fill;
       }
       else {
-        fill.fg_color = { theme: 1 };
+        // fill.fg_color = { theme: 1 };
       }
-      options.fill = fill;
     }
 
     if (composite.wrap) {