@trebco/treb 25.0.0-rc2 → 25.0.0-rc3

package/build/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v25.0.0-rc2. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v25.0.0-rc3. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map

package/esbuild-custom-element.mjs

@@ -55,7 +55,13 @@ const NotifyPlugin = (label) => {
       });
       build.onEnd(result => {
         if (!result.errors.length) {
-          console.info(`${label ? `${label} ` : ''}build complete @ ${new Date().toLocaleTimeString()}`);
+          
+          const keys = Object.keys(result.metafile?.outputs||{});
+          const bytes = keys.length ? result.metafile?.outputs[keys[0]]?.bytes : 0;
+          const size = bytes ? `; build size: ${FormatSize(bytes)}` : '';
+
+          console.info(`${label ? `${label} ` : ''}build complete @ ${new Date().toLocaleTimeString()}${size}`);
+          // console.info(result.metafile);
         }
         if (!label) {
           console.info('');
@@ -70,7 +76,7 @@ const NotifyPlugin = (label) => {
  * @param {number} size - size in bytes
  * @returns {string} - size as a human readable string
  */
-const FormatSize = (size) => {
+const FormatSize = (size, precision = 1) => {
 
   const units = ['B', 'KB', 'MB'];
   let index = 0;
@@ -82,7 +88,7 @@ const FormatSize = (size) => {
     }
   }
 
-  return `${size.toFixed(1)} ${units[index]}`;
+  return `${size.toFixed(2)} ${units[index]}`;
 
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "25.0.0-rc2",
+  "version": "25.0.0-rc3",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -39,6 +39,7 @@
     "dev": "node esbuild-custom-element.mjs --dev",
     "clean": "rm -fr build dist declaration",
     "watch": "node --watch esbuild-custom-element.mjs --watch --dev",
+    "watch-production": "node --watch esbuild-custom-element.mjs --watch",
     "tsc": "tsc -b treb-embed/modern.tsconfig.json",
     "rebuild-tsc": "tsc -b --force treb-embed/modern.tsconfig.json",
     "watch-tsc": "tsc -b treb-embed/modern.tsconfig.json -w",

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

@@ -61,19 +61,23 @@ export interface IArea {
  * 
  * @internal
  */
-export const IsCellAddress = (obj: any): obj is ICellAddress => {
+export const IsCellAddress = (obj: unknown): obj is ICellAddress => {
   return (
-    typeof obj === 'object' &&
-    typeof obj.row !== 'undefined' &&
-    typeof obj.column !== 'undefined');
+    obj !== null 
+    && typeof obj === 'object' 
+    && 'row' in obj 
+    && 'column' in obj);
 };
 
 /** @internal */
-export const IsArea = (obj: any): obj is IArea => {
+export const IsArea = (obj: unknown): obj is IArea => {
   return (
-    typeof obj === 'object' &&
-    IsCellAddress(obj.start) &&
-    IsCellAddress(obj.end));
+    obj !== null 
+    && typeof obj === 'object' 
+    && 'start' in obj 
+    && IsCellAddress(obj.start) 
+    && 'end' in obj 
+    && IsCellAddress(obj.end));
 };
 
 export interface Dimensions {

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

@@ -480,10 +480,17 @@ export const ThemeColorTable = (theme_color: number, tint = .7): TableTheme => {
 }
 
 /**
+ * for stuff that's painted, we wamt to get the corresponding CSS value.
+ * we now set everything via CSS variables, but using the node structure
+ * allows us to read calculated values, especially when there are cascades.
+ * 
+ * I keep trying to change this to just read CSS variables, but that does
+ * not do the same thing.
+ * 
  * @internal
  */
 export const LoadThemeProperties = (container: HTMLElement): Theme => {
-
+    
   const theme: Theme = JSON.parse(JSON.stringify(DefaultTheme));
 
   const Append = (parent: HTMLElement, classes: string): HTMLDivElement => {
@@ -602,6 +609,9 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   // this is a little odd, since we have the check above for "existing element";
   // should we switch on that? or is that never used, and we can drop it? (...)
 
+  // console.info(node);
+  // console.info(theme);
+
   (node.parentElement as Element)?.removeChild(node);
 
   return theme;

package/treb-embed/markup/layout.html

@@ -1,5 +1,5 @@
 
-<div class="treb-layout">
+<div class="treb-main treb-theme">
   
   <div class="treb-layout-header treb-animate">
     <div class="treb-toolbar">
@@ -67,6 +67,8 @@
           </div>
         </div>
 
+        <div class="treb-spreadsheet-backdrop"></div>
+
         <!-- shouldn't grid be on the next one? which has a tabindex? -->
         <div class="treb-spreadsheet-body" role="grid">
           <div class="treb-grid" tabindex="-1">

package/treb-embed/markup/toolbar.html

@@ -1,5 +1,6 @@
 
   <div class="treb-menu" title="File menu" file-menu>
+    <button data-icon="file-menu" menu-target></button>
     <div>
       <button data-command="reset">New document</button>
       <div separator></div>
@@ -8,30 +9,29 @@
       <div separator></div>
       <button data-command="export-xlsx">Export XLSX</button>
     </div>
-    <button data-icon="file-menu"></button>
   </div>
 
   <div composite narrow>
     <button data-command="justify-left" data-target="justify" title="Left-align text"></button>
     <div class="treb-menu">
+      <button dropdown></button>
       <div class="treb-icon-buttons" data-replace="justify">
         <button data-command="justify-left" title="Left-align text"></button>
         <button data-command="justify-center" title="Center-align text"></button>
         <button data-command="justify-right" title="Right-align text"></button>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 
   <div composite narrow>
     <button data-command="align-top" data-target="align" title="Align to top"></button>
     <div class="treb-menu">
+      <button dropdown></button>
       <div class="treb-icon-buttons" data-replace="align">
         <button data-command="align-top" title="Align to top"></button>
         <button data-command="align-middle" title="Align to middle"></button>
         <button data-command="align-bottom" title="Align to bottom"></button>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 
@@ -54,6 +54,7 @@
     <button data-command="freeze-panes" data-title="Freeze panes" data-active-title="Unfreeze panes" freeze-button></button>
     <button data-command="insert-table" data-icon="table" data-title="Insert table" data-active-title="Remove table" table-button></button>
     <div class="treb-menu">
+      <button data-icon="comment" data-title="Comment" data-active-title="Update comment"></button>
       <div class="treb-comment-box">
         <textarea></textarea>
         <div>
@@ -61,13 +62,13 @@
           <button data-command="update-comment">Save</button>
         </div>
       </div>
-      <button data-icon="comment" data-title="Comment" data-active-title="Update comment"></button>
     </div>
   </div>
 
   <div composite>
     <button data-command="fill-color" data-color-bar="fill" data-color="{}" title="Fill color"></button>
     <div class="treb-menu treb-color-menu" data-color-command="fill-color" data-replace-color="fill" data-default-color-text="No fill">
+      <button dropdown></button>
       <div class="treb-color-chooser">
         <div class="treb-caption">Theme colors</div>
         <div class="treb-swatches"></div>
@@ -83,7 +84,6 @@
           </button>
         </div>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 
@@ -97,6 +97,7 @@
   <div composite>
     <button data-command="border-bottom" data-target="border" title="Bottom border"></button>
     <div class="treb-menu">
+      <button dropdown></button>
       <div class="treb-icon-buttons" data-replace="border">
         <button data-command="border-top" title="Top border"></button>        
         <button data-command="border-left" title="Left border"></button>        
@@ -111,13 +112,13 @@
           <button data-icon="palette" data-color-bar="border" data-color="{}"></button>
         </div>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 
   <div composite font-scale>
     <input class="treb-font-scale" title="Font scale">
     <div class="treb-menu">
+      <button dropdown></button>
       <div>
         <button data-command="font-scale" data-scale="0.8">0.80</button>
         <button data-command="font-scale" data-scale="0.9">0.90</button>
@@ -127,11 +128,11 @@
         <button data-command="font-scale" data-scale="1.5">1.50</button>
         <button data-command="font-scale" data-scale="2.0">2.00</button>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 
   <div class="treb-menu">
+    <button data-icon="layout" title="Rows & columns"></button>
     <div>
       <button data-command="insert-row">Insert row</button>
       <button data-command="insert-column">Insert column</button>
@@ -141,14 +142,13 @@
       <button data-command="insert-sheet" add-remove-sheet>Add sheet</button>
       <button data-command="delete-sheet" add-remove-sheet>Delete sheet</button>
     </div>
-    <button data-icon="layout" title="Rows & columns"></button>
   </div>
 
   <div composite>
     <input class="treb-number-format" title="Number format">
     <div class="treb-menu">
-      <div class="treb-number-format-menu"></div>
       <button dropdown></button>
+      <div class="treb-number-format-menu"></div>
     </div>
   </div>
 
@@ -160,6 +160,7 @@
   <div composite chart-menu>
     <button data-command="insert-column-chart" data-target="annotation" title="Insert column chart"></button>
     <div class="treb-menu">
+      <button dropdown></button>
       <div class="treb-icon-buttons" data-replace="annotation">
         <button data-command="insert-column-chart" title="Insert column chart"></button>
         <button data-command="insert-donut-chart" title="Insert donut chart"></button>
@@ -168,7 +169,6 @@
         <div separator></div>
         <button data-command="insert-image" title="Insert image"></button>
       </div>
-      <button dropdown></button>
     </div>
   </div>
 

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

@@ -291,7 +291,7 @@ export class SpreadsheetConstructor {
 
     // handle sidebar collapse
 
-    this.layout_element = root.querySelector('.treb-layout') as HTMLElement;
+    this.layout_element = root.querySelector('.treb-main') as HTMLElement;
     const button = root.querySelector('.treb-toggle-sidebar-button');
 
     if (button && this.layout_element) {
@@ -909,7 +909,6 @@ export class SpreadsheetConstructor {
       };
 
       let command = target?.dataset.command;
-      // console.info(command);
 
       if (command) {
 
@@ -1083,7 +1082,19 @@ export class SpreadsheetConstructor {
     // if you scroll the toolbar. we could track scrolling, but it makes 
     // as much sense to just close any open menu.
 
-    scroller.addEventListener('scroll', () => sheet.Focus());
+    // firefox thinks this is a "scroll linked posiitoning effect". that's
+    // not 100% wrong but it's an absurd thing to flag for that warning.
+
+    if (/firefox/i.test(navigator.userAgent)) {
+      scroller.addEventListener('scroll', () => {
+        if (document.activeElement instanceof HTMLElement ) {
+          document.activeElement.blur();
+        }
+      });
+    }
+    else {
+      scroller.addEventListener('scroll', () => sheet.Focus());
+    }
 
     // we set up a key listener for the escape key when menus are open, we
     // need to remove it if focus goes out of the toolbar
@@ -1109,14 +1120,32 @@ export class SpreadsheetConstructor {
       }
     };
 
-    // positioning on focusin will catch keyboard and mouse navigation
+    const PositionMenu = (event: FocusEvent|MouseEvent) => {
 
-    toolbar.addEventListener('focusin', event => {
+      // FIXME: because these are situational, move the 
+      // lookups/checks outside of this function into the 
+      // event handlers
 
-      const target = event.target as HTMLElement;
-      const parent = target?.parentElement;
+      let target = event.target as HTMLElement;
+      let parent = target?.parentElement;
 
-      if (parent?.classList.contains('treb-menu')) {
+      if (target?.classList.contains('treb-menu')) {
+        parent = target;
+        for (const child of Array.from(parent.children)) {
+          if (child.tagName === 'BUTTON') {
+            target = child as HTMLElement;
+            break;
+          }
+        }
+      }
+      else if (!parent?.classList.contains('treb-menu')) {
+        return;
+      }
+
+      // if (parent?.classList.contains('treb-menu')) 
+      if (target && parent) {
+
+        // console.info('positioning');
 
         if (!handlers_attached) {
           toolbar.addEventListener('focusout', focusout_handler);
@@ -1181,14 +1210,15 @@ export class SpreadsheetConstructor {
 
         }
 
-        const focus = menu.querySelector('textarea, input') as HTMLElement;
+        // const focus = menu.querySelector('textarea, input') as HTMLElement;
+        const focus = menu.querySelector('textarea') as HTMLElement;
         if (focus) {
           requestAnimationFrame(() => focus.focus());
         }
 
       }
 
-    });
+    };
 
     const format_menu = this.root?.querySelector('.treb-number-format-menu') as HTMLElement;
     if (format_menu) {
@@ -1222,6 +1252,33 @@ export class SpreadsheetConstructor {
 
     }
 
+    const safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
+    // positioning on focusin will catch keyboard and mouse navigation
+    // ...but this won't work on safari. ...
+
+    toolbar.addEventListener('focusin', event => {
+      PositionMenu(event);
+    });
+
+    // safari disables focus on buttons for some reason. you can override
+    // that, but does anyone do that? also, what about osx?
+    //
+    // for safari, we'll position on mousedown. this will result in some 
+    // extra calls to the position routine but that shouldn't be too 
+    // bad. we also need to remove focus on the menu elements we're adding
+    // tab indexes to.
+
+    if(safari) {
+      const elements = Array.from(toolbar.querySelectorAll('.treb-menu') as NodeListOf<HTMLElement>);
+      for (const element of elements) {
+        element.tabIndex = 0;
+      }
+      toolbar.addEventListener('mousedown', event => {
+        PositionMenu(event);
+      });  
+    }
+
   }
 
 }

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

@@ -487,7 +487,7 @@ export class EmbeddedSpreadsheet {
     // consolidate options w/ defaults. note that this does not
     // support nested options, for that you need a proper merge
 
-    this.options = { ...DefaultOptions, ...options, storage_key: this.ResolveStorageKey(options.storage_key) };
+    this.options = { ...DefaultOptions, ...options, storage_key: this.ResolveStorageKey(options.storage_key, 'document') };
 
     if (typeof this.options.imaginary_value === 'string') {
       NumberFormat.imaginary_character = this.options.imaginary_value;
@@ -572,35 +572,32 @@ export class EmbeddedSpreadsheet {
       grid_options.tab_bar = true; // implied
 
       if (this.options.persist_scale) {
-        if (this.options.persist_scale === true) {
-          grid_options.persist_scale_key = 'spreadsheet-scale';
-        }
-        else {
-          grid_options.persist_scale_key = 'spreadsheet-scale-' + this.options.persist_scale;
-        }
-
-        // persisted scale should _not_ override parameter/option... only
-        // set here if option is blank... actually, no, that's not right.
-        // persisted scale should override parameter, because if you do NOT
-        // want that behavior you can just disable persisting. so there are 
-        // clear ways to accomplish any of
-
-        // (1) no initial scale, persist
-        // (2) initial scale, don't persist (revert to parameter)
-        // (3) initial scale but persist and use persisted value if available
-
-        // if (!this.options.scale_control) {
-        const json = localStorage.getItem(grid_options.persist_scale_key);
-        if (json) {
-          try {
-            const obj = JSON.parse(json);
-            grid_options.initial_scale = obj.scale || 1;
-          }
-          catch (e) {
-            console.warn('parsing persisted scale failed');
+        grid_options.persist_scale_key = this.ResolveStorageKey(this.options.persist_scale, 'scale');
+        if (grid_options.persist_scale_key) {
+
+          // persisted scale should _not_ override parameter/option... only
+          // set here if option is blank... actually, no, that's not right.
+          // persisted scale should override parameter, because if you do NOT
+          // want that behavior you can just disable persisting. so there are 
+          // clear ways to accomplish any of
+
+          // (1) no initial scale, persist
+          // (2) initial scale, don't persist (revert to parameter)
+          // (3) initial scale but persist and use persisted value if available
+
+          // if (!this.options.scale_control) {
+          const json = localStorage.getItem(grid_options.persist_scale_key);
+          if (json) {
+            try {
+              const obj = JSON.parse(json);
+              grid_options.initial_scale = obj.scale || 1;
+            }
+            catch (e) {
+              console.warn('parsing persisted scale failed');
+            }
           }
-        }
 
+        }
       }
 
     }
@@ -4703,9 +4700,10 @@ export class EmbeddedSpreadsheet {
 
   /**
    * if we have a boolean for a storage key, generate a (weak) hash
-   * based on document URI.
+   * based on document URI. use the prefix to create separate keys
+   * when using the autogenerated key (uri hash)
    */
-  protected ResolveStorageKey(key?: string|boolean): string|undefined {
+  protected ResolveStorageKey(key?: string|boolean, prefix = ''): string|undefined {
 
     if (!key) { 
       return undefined;
@@ -4718,10 +4716,8 @@ export class EmbeddedSpreadsheet {
         hash = (hash << 5) - hash + data.charCodeAt(i);
         hash |= 0; 
       }
-
-      // console.info('resolved', Math.abs(hash).toString(16));
-
-      return Math.abs(hash).toString(16);
+      const generated = Math.abs(hash).toString(16);
+      return prefix ? prefix + '-' + generated : generated;
     }
 
     return key;

package/treb-embed/style/autocomplete.scss

@@ -27,7 +27,7 @@
    /* this is no longer attached to document, we can trim some of these */
   /* also a lot of this should move to theme */
 
-.treb-layout {
+.treb-main {
 
   .treb-autocomplete {
 

package/treb-embed/style/dialog.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-layout {
+.treb-main {
 
   --treb-icon-svg: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='153.073px' height='133.742px' viewBox='0.673 4.629 153.073 133.742' enable-background='new 0.673 4.629 153.073 133.742' xml:space='preserve'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='0.6729' y1='71.5' x2='153.7461' y2='71.5'%3E%3Cstop offset='0' style='stop-color:%235CB5FF'/%3E%3Cstop offset='1' style='stop-color:%230059B9'/%3E%3C/linearGradient%3E%3Cpath fill='url(%23SVGID_1_)' d='M91.656,28.313c-4.989,0-17.266,6.249-21.305,8.504c-2.344-2.473-2.603-6.162-3.036-10.933 c-2.344,2.429-0.824,9.806,0,12.496c-10.238,7.635-18.83,15.531-27.597,24.471c-2.992-4.729-5.031-8.593-5.726-17.183 c-3.038,6.509,0.867,15.057,3.121,19.784c-9.674,12.193-19.263,25.297-27.03,37.834C-25.405,28.313,82.936-16.248,153.746,14.431 C109.879,43.63,98.554,135.784,21.498,111.274c-5.423,7.809-9.069,18.006-13.538,27.072c-3.73,0.263-6.334-1.646-7.288-3.12 c7.506-18.181,17.183-34.192,27.075-49.984c10.718,0.306,21.346,0.478,30.198-1.04c-7.681-2.038-16.877-0.78-26.032-3.123 c5.597-10.718,13.754-18.876,21.867-27.075c8.808,0.782,17.746,3.21,27.074,1.041c-8.111-1.431-15.966-1.952-22.909-4.165 C65.539,42.502,80.722,33.389,91.656,28.313z'/%3E%3C/svg%3E%0A");
   
@@ -65,7 +65,7 @@
     align-items: center;
     position: relative;
 
-    padding: 1em;
+    padding: 1rem;
     background: var(--treb-dialog-background, #fff);
     color: var(--treb-dialog-color, #000);
 
@@ -164,8 +164,8 @@
       height: 6px;
       border: 1px solid #ddd;
       margin: auto;
-      margin-top: 1em;
-      margin-bottom: .5em;
+      margin-top: 1rem;
+      margin-bottom: .5rem;
     }
 
     .treb-embed-progress-bar {

package/treb-embed/style/dropdown-select.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-layout {
+.treb-main {
 
   .treb-dropdown-caret {
 

package/treb-embed/style/formula-bar.scss

@@ -19,7 +19,7 @@
  * 
  */
 
-.treb-layout {
+.treb-main {
 
     .treb-formula-bar {
 

package/treb-embed/style/grid.scss

@@ -36,7 +36,7 @@
 @import 'tab-bar.scss';
 @import 'overlay-editor.scss';
 
-.treb-layout {
+.treb-main {
 
 
   /*