@trebco/treb 27.12.2 → 28.2.0

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

@@ -65,10 +65,10 @@ import type {
 
 import {
   IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, type CellStyle,
-  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, ValueType, DOMUtilities, 
+  Localization, Style, type Color, ThemeColor2, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, ValueType, DOMContext, 
 } from 'treb-base-types';
 
-import { EventSource, Yield, ValidateURI } from 'treb-utils';
+import { EventSource, ValidateURI } from 'treb-utils';
 import { NumberFormatCache, ValueParser, NumberFormat } from 'treb-format';
 
 
@@ -232,15 +232,17 @@ export class EmbeddedSpreadsheet {
   /** @internal */
   public static treb_embedded_script_path = '';
 
-  /** @internal */
-  public static enable_engine = false;
+  /* * @internal */
+  // public static enable_engine = false;
 
-  /** @internal */
-  public static enable_formatter = false;
+  /* * @internal */
+  // public static enable_formatter = false;
 
   /** @internal */
   public static one_time_warnings: Record<string, boolean> = {};
 
+  protected DOM = DOMContext.GetInstance(); // default
+
   /**
    * this flag will be set on LoadDocument. the intent is to be able to
    * know if you have loaded a network document, which may happen before you
@@ -253,10 +255,10 @@ export class EmbeddedSpreadsheet {
    */
   public loaded = false;
 
-  /**
+  /* *
    * @internal
    */
-  public toolbar_ctl?: ToolbarCtl;
+  // public toolbar_ctl?: ToolbarCtl;
 
   /**
    * this is a cache of number formats and colors used in the document. it's
@@ -334,6 +336,39 @@ export class EmbeddedSpreadsheet {
    */
   protected last_save_version = 0;
 
+  /* *
+   * this is an attempt to improve our recordkeeping for stuff that
+   * has user-generated changes. it means "this is the version that
+   * was in the network document or inline document".  it has no 
+   * meaning in sheets that start empty.
+   * 
+   * we use "network version" to mean both network documents and inline
+   * documents (Which technically come from the network).
+   * 
+   * the problem with this is that the only way for it to work would
+   * be to store it in the document, but once we start storing this 
+   * value it will get stuck and cause problems. there's no way to
+   * "only store it in some contexts". I guess in theory we could wipe
+   * it if necesssary, but that's weak... something like 
+   * 
+   * (1) if this document comes from anywhere but local storage, 
+   *     dump the value
+   * 
+   * (2) never save this value unless you're writing to local storage
+   * 
+   * it's still going to get stuck in places it shouldn't be but we can
+   * mitigate problems with it. I'll think about it. we can do the 
+   * "can revert" thing in a different way.
+   * 
+   * /
+  protected canonical_network_version = 0;
+  */
+
+  /**
+   * simpler flag for testing if we can revert
+   */
+  protected initial_load_source: LoadSource|undefined = undefined;
+
   /**
    * calculator instance. we may share this if we're in a split view.
    */
@@ -487,6 +522,50 @@ export class EmbeddedSpreadsheet {
     return this.file_version;
   }
 
+  /**
+   * this flag indicates we can revert the document. what that means is 
+   * we loaded a user-created version from localStorage, but there's a 
+   * backing network or inline document. or we did load the original version
+   * but the user has made some document changes.
+   * 
+   * it's like `dirty`, but that uses the load source as the ground truth,
+   * which means if you load a modified document from localStorage it's 
+   * initially considered not-dirty (which is maybe just a bad design?)
+   * 
+   * the intent of this field is to support enabling/disabling revert 
+   * logic, or to add a visual indicator that you are not looking at the
+   * canonical version.
+   * 
+   * @privateRemarks
+   * for that to work we need to know that we loaded from localStorage --
+   * that's not something we're keeping track of at the moment. 
+   * 
+   * it might be good to include the "canonical version" when we put stuff
+   * in localStorage...
+   * 
+   */
+  public get can_revert(): boolean {
+
+    // first check we came from a network source.
+
+    if (!this.options.inline_document && !this.options.document) {
+      return false;
+    }
+
+    // next check if we actually loaded from localStorage. for the purposes
+    // of this state check we only care about the initial load, so we can
+    // store that.
+
+    if (this.initial_load_source === LoadSource.LOCAL_STORAGE) {
+      return true;
+    }
+
+    // last check dirty -- that's everything else
+
+    return this.dirty;
+
+  }
+
   /**
    * indicates the current revision of the document is not equal to the 
    * last-saved revision of the document.
@@ -672,6 +751,7 @@ export class EmbeddedSpreadsheet {
     if (options.model) {
       this.model = options.model.model;
       this.calculator = options.model.calculator; // as CalcType;
+      this.DOM = options.model.DOM;
     }
     else {
 
@@ -692,11 +772,15 @@ export class EmbeddedSpreadsheet {
     //this.extra_calculator = //new Calculator(this.model);
     //  this.CreateCalculator(this.model);
 
+    if (container) {
+      this.DOM = DOMContext.GetInstance(container.ownerDocument);
+    }
+
     // update: tell the grid if we don't want to initialize the DOM,
     // if we don't have a container. that's distinct (at the moment)
     // from headless, which is a state that can change.
 
-    this.grid = new Grid(grid_options, this.model, undefined, !!container);
+    this.grid = new Grid(grid_options, this.model, undefined, !!container, this.DOM);
 
     if (this.options.headless) {
       this.grid.headless = true; // FIXME: move into grid options
@@ -706,6 +790,8 @@ export class EmbeddedSpreadsheet {
 
     if (container) {
 
+      this.DOM = DOMContext.GetInstance(container.ownerDocument);
+
       // if this is the first one, update UA classes (used to be in grid)
 
       if (!this.parent_view) {
@@ -1003,80 +1089,6 @@ export class EmbeddedSpreadsheet {
 
   }
 
-  /**
-   * we need to load relative resources. we can't access the path of this
-   * script, but because it has to be added via a script tag -- either
-   * statically or dynamically -- we should be able to get it.
-   *
-   * it is possible that the script tag goes away, but if we sniff on first
-   * script execution, we can probably assume it's still there -- because the
-   * client won't have had a chance to remove it yet.
-   * 
-   * @internal
-   */
-  public static BuildPath(): void {
-    const tags = (typeof document === 'undefined') ? [] : document.querySelectorAll('script');
-
-    // FIXME: fragile!
-    const default_script_name = process.env.BUILD_ENTRY_MAIN || '';
-    let rex = new RegExp(default_script_name);
-
-    // tslint:disable-next-line:prefer-for-of
-    for (let i = 0; i < tags.length; i++) {
-
-      const tag = tags[i];
-      const src = tag.src; // fully-qualified here [FIXME: IE11?]
-
-      /*
-      if (src && /\?.*?engine/i.test(src)) {
-        console.info('s', src);
-        this.enable_engine = true;
-      }
-      */
-
-      if (src && rex.test(src)) {
-
-        /*
-        if (src && /\?.*?utils/i.test(src)) {
-          this.enable_utils = true;
-        }
-        */
-
-        if (src && /\?.*?engine/i.test(src)) {
-          this.enable_engine = true;
-        }
-
-        if (src && /\?.*?format/i.test(src)) {
-          this.enable_formatter = true;
-        }
-
-        this.treb_embedded_script_path = src;
-        this.treb_base_path = src.replace(new RegExp(default_script_name + '.*$'), '');
-
-        return;
-      }
-
-    }
-
-    // to support .mjs imports, look for the import line
-
-    rex = new RegExp(`import.*?from.*?['"](.*?${default_script_name}.*?)['"]`);
-    for (let i = 0; i < tags.length; i++) {
-      const tag = tags[i];
-      if (!tag.src) {
-        const text = tag.textContent;
-        const match = (text||'').match(rex);
-        if (match) {
-          const src = match[1];
-          this.treb_embedded_script_path = src;
-          this.treb_base_path = src.replace(new RegExp(default_script_name + '.*$'), '');
-          return;
-        }
-      }
-    }
-    
-  }
-
   /**
    * update autocomplete functions. we're breaking this out into a 
    * separate method so we can better manage language translation.
@@ -1872,6 +1884,17 @@ export class EmbeddedSpreadsheet {
           this.ShowSidebar(event.command === 'toggle-sidebar' ? undefined : event.command === 'show-sidebar');
           break;
 
+        case 'revert-indicator':
+          this.dialog?.ShowDialog({
+            title:  `This is a modified version of the document.\n` +
+                    `You can revert to the original or save your\n` +
+                    `changes in the sidebar.`,
+            close_box: true,
+            timeout: 5000,
+            type: DialogType.info,
+          });
+          break;
+
         default:
           console.info('unhandled', event.command);
           break;
@@ -2676,13 +2699,18 @@ export class EmbeddedSpreadsheet {
   }
 
   /**
-   * revert to the network version of this document, if both `local_storage` 
-   * and `network_document` are set.
+   * revert to the network version of this document, if `local_storage` 
+   * is set and the create options had either `document` or `inline-document`
+   * set.
+   * 
+   * FIXME: we should adjust for documents that fail to load.
    */
   public Revert(): void {
 
     if (this.options.inline_document) {
       this.LoadDocument(this.options.inline_document);
+      this.initial_load_source = LoadSource.INLINE_DOCUMENT; // update this flag, even though it's not "initial"
+
       if (this.options.local_storage) {
         this.SaveLocalStorage('reverted_backup');
         localStorage.removeItem(this.options.local_storage);
@@ -2704,6 +2732,7 @@ export class EmbeddedSpreadsheet {
       */
 
       this.LoadNetworkDocument(canonical);
+      this.initial_load_source = LoadSource.NETWORK_FILE; // update this flag, even though it's not "initial"
 
       // flush storage? what about mistakes? maybe we should 
       // back it up somewhere? (...)
@@ -3203,6 +3232,10 @@ export class EmbeddedSpreadsheet {
       return this.parent_view.LoadDocument(data, options);
     }
 
+    if (!this.initial_load_source) {
+      this.initial_load_source = options.source;
+    }
+
     // API v1 OK
 
     /*
@@ -3298,7 +3331,7 @@ export class EmbeddedSpreadsheet {
    
     if (options.scroll) {
       const scroll = options.scroll;
-      Yield().then(() => this.ScrollTo(scroll));
+      Promise.resolve().then(() => this.ScrollTo(scroll));
     }
 
   }
@@ -4343,7 +4376,7 @@ export class EmbeddedSpreadsheet {
    */
   protected SaveAs(blob: Blob, filename: string) {
 
-    const a = DOMUtilities.Create('a');
+    const a = this.DOM.Create('a');
     a.href = URL.createObjectURL(blob);
     a.download = filename;
     a.click();
@@ -4357,7 +4390,8 @@ export class EmbeddedSpreadsheet {
   /**
    *
    */
-   protected async ImportXLSX(data: string, source: LoadSource): Promise<Blob | void> {
+   protected async ImportXLSX( // data: string, source: LoadSource): Promise<Blob | void> {
+    data: ArrayBuffer, source: LoadSource): Promise<Blob | void> {
 
     // this is inlined to ensure the code will be tree-shaken properly
     if (!process.env.XLSX_SUPPORT) {
@@ -4468,7 +4502,7 @@ export class EmbeddedSpreadsheet {
             return;
           }
 
-          const a = DOMUtilities.Create('a');
+          const a = this.DOM.Create('a');
           a.setAttribute('target', this.options.hyperlinks);
           a.setAttribute('href', data);
           a.setAttribute('noreferrer', 'true');
@@ -4609,27 +4643,29 @@ export class EmbeddedSpreadsheet {
   protected SelectFile2(accept: string, operation: FileChooserOperation) {
 
     if (!this.file_chooser) {
-      this.file_chooser = DOMUtilities.Create('input');
-      this.file_chooser.type = 'file';
-
-      const file_chooser = this.file_chooser;      
-      file_chooser.addEventListener('change', () => {
-        if (file_chooser.files && file_chooser.files[0]) {
-          const file = file_chooser.files[0];
-          file_chooser.value = '';
-          switch (this.file_chooser_operation) {
-            case FileChooserOperation.InsertImage:
-              this.InsertImageInternal(file);
-              break;
-            case FileChooserOperation.LoadFile:
-              this.LoadFileInternal(file, LoadSource.LOCAL_FILE, true);
-              break;
-            default:
-              console.warn('file chooser: no operation');
-              break;
-          }
-        }
+      const file_chooser = this.DOM.Create('input', undefined, undefined, {
+        attrs: { type: 'file' },
+        events: {
+          change: () => {
+            if (file_chooser.files && file_chooser.files[0]) {
+              const file = file_chooser.files[0];
+              file_chooser.value = '';
+              switch (this.file_chooser_operation) {
+                case FileChooserOperation.InsertImage:
+                  this.InsertImageInternal(file);
+                  break;
+                case FileChooserOperation.LoadFile:
+                  this.LoadFileInternal(file, LoadSource.LOCAL_FILE, true);
+                  break;
+                default:
+                  console.warn('file chooser: no operation');
+                  break;
+              }
+            }
+          },
+        },
       });
+      this.file_chooser = file_chooser;
     }
 
     if (!this.file_chooser) {
@@ -4686,7 +4722,7 @@ export class EmbeddedSpreadsheet {
               }
             }
 
-            const img = DOMUtilities.Create('img');
+            const img = this.DOM.Create('img');
             img.src = contents;
 
             // this is to let the browser figure out the image size.
@@ -4784,30 +4820,12 @@ export class EmbeddedSpreadsheet {
               this.LoadCSV(reader.result as string, source);
             }
             else if (process.env.XLSX_SUPPORT &&  /\.xls[xm]$/i.test(file.name)) {
-              let contents: string;
-
               if (typeof reader.result === 'string') {
-                contents = reader.result;
+                finalize('Unsupported file');
               }
-              else {  // IE11
-
-                /* can break on large blob
-                contents = String.fromCharCode.apply(null,
-                  (new Uint8Array(reader.result as ArrayBuffer) as any));
-                */
-
-                // FIXME: chunk
-
-                contents = '';
-                const bytes = new Uint8Array(reader.result);
-                for (let i = 0; i < bytes.byteLength; i++) {
-                  contents += String.fromCharCode(bytes[i]);
-                }
-
+              else {
+                this.ImportXLSX(reader.result, source).then(() => finalize()).catch(err => finalize(err));
               }
-
-              this.ImportXLSX(contents, source).then(() => finalize()).catch(err => finalize(err));
-
               return;
             }
             else {
@@ -4829,13 +4847,8 @@ export class EmbeddedSpreadsheet {
       // FIXME: this should be done async, possibly in a worker
 
       setTimeout(() => {
-        if (/\.xlsx$/i.test(file.name)) {
-          if (reader.readAsBinaryString) {
-            reader.readAsBinaryString(file);
-          }
-          else {
-            reader.readAsArrayBuffer(file); // IE11
-          }
+        if (/\.xls[xm]$/i.test(file.name)) {
+          reader.readAsArrayBuffer(file);
         }
         else {
           reader.readAsText(file);
@@ -5051,7 +5064,7 @@ export class EmbeddedSpreadsheet {
           const reference = ValidateURI(annotation.data.data.src);
           if (reference) {
  
-            const img = DOMUtilities.Create('img');
+            const img = this.DOM.Create('img');
             img.src = reference;
 
             if (annotation.data.data.scale === 'fixed') {
@@ -5081,7 +5094,7 @@ export class EmbeddedSpreadsheet {
    */
   protected DocumentChange(undo_selection?: string): void {
 
-    Yield().then(() => {
+    Promise.resolve().then(() => {
 
       // console.info('serializing');
 

package/treb-embed/src/options.ts

@@ -94,6 +94,9 @@ export interface EmbeddedSpreadsheetOptions {
   /** add resizable wrapper */
   resizable?: boolean;
 
+  /** even if we allow resizing, constrain width. this is to support fixed width columns. */
+  constrain_width?: boolean;
+
   /** export to xlsx, now optional */
   export?: boolean;
 
@@ -266,6 +269,12 @@ export interface EmbeddedSpreadsheetOptions {
    */
   revert_button?: boolean;
 
+  /**
+   * show the revert indicator. this is an indicator that shows on the 
+   * top-left of the spreadsheet when a network document has local changes.
+   */
+  revert_indicator?: boolean;
+
 }
 
 /**

package/treb-embed/src/spinner.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 
 export class Spinner {
 
@@ -27,8 +27,10 @@ export class Spinner {
   private visible = false;
 
   constructor(public container: HTMLElement) {
-    this.node = DOMUtilities.Div('treb-spinner', container);
-    this.node.innerHTML = `<div><div></div><div></div><div></div><div></div></div>`;
+    const DOM = DOMContext.GetInstance(container.ownerDocument);
+    this.node = DOM.Div('treb-spinner', container, {
+      html: `<div><div></div><div></div><div></div><div></div></div>`,
+    });
   }
 
   public Show(): void {

package/treb-embed/src/toolbar-message.ts

@@ -76,6 +76,10 @@ export interface UIToolbarMessage {
   command: 'toggle-toolbar'|'show-toolbar'|'hide-toolbar'|'toggle-sidebar'|'show-sidebar'|'hide-sidebar';
 }
 
+export interface RevertIndicatorMessage {
+  command: 'revert-indicator';
+}
+
 export type ToolbarMessage 
   = SetColorToolbarMessage 
   | CommentToolbarMessage 
@@ -87,6 +91,7 @@ export type ToolbarMessage
   | AnnotationToolbarMessage
   | PrecisionToolbarMessage
   | JustifyToolbarMessage
+  | RevertIndicatorMessage
   | AlignToolbarMessage
   | TableToolbarMessage
   | CommandToolbarMessage

package/treb-embed/style/layout.scss

@@ -187,6 +187,13 @@
   
   }
 
+  .treb-views.treb-can-revert .treb-view {
+    .treb-revert-indicator {
+      opacity: 1;
+      pointer-events: initial;
+    }
+  }
+
   .treb-view {
 
     position: relative;
@@ -219,6 +226,50 @@
       display: none;
     }
 
+    .treb-revert-indicator {
+      display: none;
+    }
+
+    &:first-of-type {
+
+      .treb-revert-indicator {
+        display: block;
+        grid-area: 2/1/3/2; // overlap the grid body
+        justify-self: start;
+        align-self: start;
+        width: 1rem;
+        height: 1rem;
+        position: relative;
+        overflow: hidden;
+        opacity: 0;
+        transition: opacity .125s ease;
+        pointer-events: none;
+
+        /* rounded style
+        &::after {
+          content: '';
+          position: absolute;
+          display: block;
+          top: -1rem;
+          left: -1rem;
+          border-radius: 1rem;
+          border: 1rem solid orange;
+        }
+        */
+
+        /* triangular style */
+
+        border: .5em solid orange;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+
+        /* end styles */
+
+        z-index: 20; // FIXME: use stack
+      }
+
+    }
+
     &:last-of-type {
 
       .treb-layout-resize-handle {
@@ -331,8 +382,21 @@
       -webkit-mask-image: var(--icon);
     }
   
+    // working on how to alter the revert button depending on state...
+    // remove hover effect? remove the button? (...)
+
+    /*
+    &:not(.sidebar-disabled):hover::after{
+      background: #666; // FIXME
+    }
+    */
+
+    &[data-can-revert=false] {
+      display: none;
+    }
+
     &:hover::after {
-      background: #666;
+      background: #666; // FIXME
     }
 
     &[data-command=recalculate] {

package/treb-export/src/export-worker/export-worker.ts

@@ -27,27 +27,22 @@ import { Importer } from '../import2';
 const ctx: Worker = self as any;
 const exporter = new Exporter();
 
-const ExportSheets = async (data: any) => {
+const ExportSheets = (data: any) => {
 
   if (data.sheet) {
-    await exporter.Init(data.decorated || []);
-    await exporter.Export(data.sheet);
-
-    const blob = await exporter.AsBlob(1);
-    const corrected = (blob as Blob).slice(0, (blob as Blob).size,
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-
-    ctx.postMessage({ status: 'complete', blob: corrected });
+    exporter.Init(data.decorated || []);
+    exporter.Export(data.sheet);
+    ctx.postMessage({ status: 'complete', blob: exporter.Blob() });
   }
 
 };
 
-const ImportSheet = async (data: any) => {
+const ImportSheet = (data: any) => {
 
   const importer = new Importer();
 
   try {
-    await importer.Init(data.data);
+    importer.Init(data.data);
 
     const count = importer.SheetCount();
     const results = {
@@ -57,7 +52,7 @@ const ImportSheet = async (data: any) => {
     };
 
     for (let i = 0; i < count; i++) {
-      const result = await importer.GetSheet(i);
+      const result = importer.GetSheet(i);
       if (result) {
         results.sheets.push(result);
       }