@trebco/treb 27.12.1 → 28.0.5

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();
@@ -4468,7 +4501,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 +4642,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 +4721,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.
@@ -5051,7 +5086,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 +5116,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-grid/src/editors/autocomplete.ts

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 import type { Theme, Rectangle } from 'treb-base-types';
 import type { AutocompleteExecResult, DescriptorType } from './autocomplete_matcher';
 
@@ -72,26 +72,37 @@ export class Autocomplete {
 
   private active_element?: HTMLElement;
 
+  private DOM: DOMContext;
+
   constructor(private options: AutocompleteOptions = {}){
 
+    this.DOM = DOMContext.GetInstance(options.container?.ownerDocument);
+    if (!this.DOM.doc) {
+      throw new Error('invalid context');
+    }
+
     // this.scope = 'AC' + Math.round(Math.random() * Math.pow(10, 10)).toString(16);
 
-    this.completion_list = DOMUtilities.Div(
+    this.completion_list = this.DOM.Div(
       'treb-cell-editor-ac-list treb-autocomplete',
-      options.container || document.body,
-      ); // this.scope);
+      options.container || this.DOM.doc.body,
+      { 
+        events: {
+          mousedown: (event) => this.ListMouseDown(event),
+          mousemove: (event) => this.ListMouseMove(event)
+        }
+      }
+    );
 
-    this.completion_list.addEventListener('mousedown', (event) => this.ListMouseDown(event));
+    // this.completion_list.addEventListener('mousedown', (event) => this.ListMouseDown(event));
 
     // FIXME: should we add/remove listener based on visibility? (...)
 
-    this.completion_list.addEventListener('mousemove', (event) => this.ListMouseMove(event));
-
-    this.tooltip = DOMUtilities.Div('treb-cell-editor-ac-tooltip treb-autocomplete-tooltip',
-      options.container || document.body,
-      ); // this.scope);
+    // this.completion_list.addEventListener('mousemove', (event) => this.ListMouseMove(event));
 
-    // this.UpdateTheme();
+    this.tooltip = this.DOM.Div(
+      'treb-cell-editor-ac-tooltip treb-autocomplete-tooltip',
+      options.container || this.DOM.doc.body);
 
   }
 
@@ -360,8 +371,8 @@ export class Autocomplete {
         // compiler thinks this is possibly undefined, but vs code does
         // not -- I thought vs code used the same tsc we use to compile?
 
-        if (document.documentElement) {
-          const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
+        if (this.DOM.doc?.documentElement) {
+          const viewport_height = Math.max(this.DOM.doc.documentElement.clientHeight, this.DOM.view?.innerHeight || 0);
           if (viewport_height - position.bottom < 200 ){
             layout_top = true;
           }