@trebco/treb 28.13.2 → 28.15.1

package/treb-embed/markup/layout.html

@@ -38,7 +38,7 @@
         <div data-bind='message' class='treb-embed-dialog-message'></div>
         <div data-bind='about' class='treb-embed-dialog-body'></div>
       </div>
-      <button type='button' title='Close dialog' data-bind='close' class='treb-close-box'>
+      <button type='button' data-title='close_dialog' data-bind='close' class='treb-close-box'>
         <svg viewBox='0 0 16 16'>
           <path d='M11.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708-.708l7-7a.5.5 0 0 1 .708 0z'/>
           <path d='M4.146 4.146a.5.5 0 0 0 0 .708l7 7a.5.5 0 0 0 .708-.708l-7-7a.5.5 0 0 0-.708 0z'/>
@@ -62,6 +62,9 @@
 
         <div class="treb-formula-bar notranslate" hidden>
           <div class="treb-address-label"><div></div></div>
+          <button class="treb-insert-function-button"
+                  data-title="insert_function" 
+                  data-conditional="insert-function">𝑓<small>(x)</small></button>
           <div class="treb-editor-container">
             <div contenteditable="true"></div>
           </div>
@@ -95,7 +98,7 @@
           -->
   
           <!-- converted to button, more appropriate -->
-          <button class="treb-delete-tab" title="Delete current sheet" data-command="delete-tab" data-conditional="delete-tab">
+          <button class="treb-delete-tab" data-title="delete_sheet" data-command="delete-tab" data-conditional="delete-tab">
             <svg tabindex="-1" viewbox='0 0 16 16'><path d='M4,4 L12,12 M12,4 L4,12'/></svg>
           </button>
   
@@ -105,7 +108,8 @@
           </div>
 
           <!-- converted to button, more appropriate -->
-          <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" title="Add sheet">+</button>
+          <button class="treb-add-tab" data-command="add-tab" data-conditional="add-tab" 
+                  data-title="add_sheet">+</button>
   
           <!-- 
             we removed the junk node with "flex grow" to split the layout, in
@@ -125,7 +129,8 @@
         
         <div class="treb-revert-indicator" 
               data-command="revert-indicator"
-              title="This document has been modified from the original version."></div>
+              data-title="document_modified"
+              ></div>
 
       </div> <!-- /treb-view -->
     </template>
@@ -133,13 +138,13 @@
   </div>
 
   <div class="treb-layout-sidebar treb-animate">
-    <button data-command="recalculate" title="Recalculate"></button>
-    <button data-command="toggle-toolbar" data-conditional="toolbar" title="Toggle toolbar"></button>
-    <button data-command="export-xlsx" data-conditional="export" title="Export as XLSX"></button>
-    <button data-command="revert" data-conditional="revert" title="Revert to original version"></button>
-    <button data-command="about" title="What's this?"></button>
+    <button data-command="recalculate" data-title="recalculate"></button>
+    <button data-command="toggle-toolbar" data-conditional="toolbar" data-title="toggle_toolbar"></button>
+    <button data-command="export-xlsx" data-conditional="export" data-title="export"></button>
+    <button data-command="revert" data-conditional="revert" data-title="revert"></button>
+    <button data-command="about" data-title="about"></button>
   </div>
 
-  <button class="treb-toggle-sidebar-button" title="Toggle sidebar"></button>
+  <button class="treb-toggle-sidebar-button" data-title="toggle_sidebar"></button>
 
 </div>

package/treb-embed/markup/toolbar.html

@@ -49,12 +49,12 @@
 
   <div class="group">
     <button data-command="wrap-text" title="Wrap text"></button>
-    <button data-command="merge-cells" data-id="merge" data-title="Merge cells" data-active-title="Unmerge cells"></button>
-    <button data-command="lock-cells" data-title="Lock cells" data-active-title="Unlock cells"></button>
-    <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>
+    <button data-command="merge-cells" data-id="merge" data-inactive-title="Merge cells" data-active-title="Unmerge cells"></button>
+    <button data-command="lock-cells" data-inactive-title="Lock cells" data-active-title="Unlock cells"></button>
+    <button data-command="freeze-panes" data-inactive-title="Freeze panes" data-active-title="Unfreeze panes" freeze-button></button>
+    <button data-command="insert-table" data-icon="table" data-inactive-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>
+      <button data-icon="comment" data-inactive-title="Comment" data-active-title="Update comment"></button>
       <div class="treb-comment-box">
         <textarea></textarea>
         <div>

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

@@ -13,6 +13,23 @@ import type { ToolbarMessage } from '../toolbar-message';
 
 import { DOMContext } from 'treb-base-types';
 
+/** with a view towards i18n */
+const default_titles: Record<string, string> = {
+
+  close_dialog: 'Close dialog',
+  insert_function: 'Insert function...',
+  delete_sheet: 'Delete current sheet',
+  add_sheet: 'Add sheet',
+  document_modified: 'This document has been modified from the original version.',
+  recalculate: 'Recalculate',
+  toggle_toolbar: 'Toggle toolbar',
+  export: 'Export as XLSX',
+  revert: 'Revert to original version',
+  about: `What's this?`,
+  toggle_sidebar: 'Toggle sidebar',
+
+};
+
 /** @internal */
 export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
@@ -391,6 +408,7 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       'revert': !!sheet.options.revert_button,
       'toolbar': !!sheet.options.toolbar,
       'export': !!sheet.options.export,
+      'insert-function': !!sheet.options.insert_function_button,
 
       // the following won't work as expected in split, because this
       // code won't be run when the new view is created -- do something
@@ -545,6 +563,24 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
     }
 
+    // --- titles --------------------------------------------------------------
+
+    const elements = Array.from(this.layout_element.querySelectorAll('[data-title]'));
+    for (const element of elements) {
+      if (element instanceof HTMLElement) {
+
+        // temp workaround
+        if (element.dataset.activeTitle) {
+          continue;
+        }
+
+        if (element.dataset.title && default_titles[element.dataset.title]) {
+          element.title = default_titles[element.dataset.title];
+        }
+
+      }
+    }
+
     // --- animated ------------------------------------------------------------
 
     // requestAnimationFrame(() => {
@@ -580,8 +616,8 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       if (value) {
         // value.classList.remove('treb-active');
         value.removeAttribute('active');
-        if (value.dataset.title) {
-          value.title = value.dataset.title;
+        if (value.dataset.inactiveTitle) {
+          value.title = value.dataset.inactiveTitle;
         } 
       }
     }

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

@@ -723,8 +723,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     const grid_options: GridOptions = {
       // expand: false,
-
-      insert_function_button: false, // do we have this?
+      // insert_function_button: false, // do we have this?
       in_cell_editor: true, // if this is always true, why is it an option?
       repaint_on_cell_change: false,
       scrollbars: this.options.scrollbars,
@@ -2078,6 +2077,14 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       for (const format of sheet.conditional_formats) {
         format.internal = undefined;
       }
+      for (const annotation of sheet.annotations) {
+        if (annotation.view && annotation.data.type === 'textbox') {
+          const view: AnnotationViewData = annotation.view[this.grid.view_index] || {};
+          if (view.update_callback) {
+            view.update_callback();
+          }
+        }
+      }
     }
 
     this.calculator.UpdateConditionals();
@@ -5349,6 +5356,63 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
         }
 
       }
+      else if (annotation.data.type === 'textbox') {
+
+        if (annotation.data.data) {
+          const container = document.createElement('div');
+          container.classList.add('treb-annotation-textbox');
+
+          for (const paragraph of annotation.data.data.paragraphs) {
+            const p = document.createElement('p');
+            if (paragraph.style) {
+              if (paragraph.style.horizontal_align === 'right' || 
+                  paragraph.style.horizontal_align === 'center') {
+                p.style.textAlign = paragraph.style.horizontal_align;
+              }
+            }
+
+            for (const entry of paragraph.content) {
+              const span = document.createElement('span');
+              span.textContent = entry.text || '';
+              if (entry.style?.bold) {
+                span.style.fontWeight = '600';
+              }
+              if (entry.style?.italic) {
+                span.style.fontStyle = 'italic';
+              }
+              p.appendChild(span);
+            }
+            container.append(p);
+          }
+
+          view.content_node.append(container);
+
+          if (annotation.data.data.style) {
+
+            const style = annotation.data.data.style;
+            const update_textbox = () => {
+
+              if (style.fill) {
+                const color = ThemeColor2(this.grid.theme, style.fill);
+                container.style.background = color;
+              }
+
+            };
+
+            view.update_callback = () => {
+              if (!this.grid.headless) {
+                update_textbox();
+              }
+            };
+
+            update_textbox();
+
+          }
+
+        }
+
+      }
+
     }
   }
 

package/treb-embed/src/options.ts

@@ -311,6 +311,11 @@ export interface EmbeddedSpreadsheetOptions {
    */
   recalculate_on_f9?: boolean;
 
+  /**
+   * @internal
+   */
+  insert_function_button?: boolean;
+
 }
 
 /**

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

@@ -25,11 +25,10 @@
 
       grid-area: 1/1/2/2;
       
-      // min-height: 3em; // FIXME
-
       display: flex;
       flex-direction: row;
       text-align: left;
+      gap: .5em;
 
       &[hidden] {
         display: none;
@@ -39,7 +38,6 @@
 
       max-width: 100%;
       overflow-x: hidden;
-      /* last ditch for IE11 */
 
       /** label for selection address */
       .treb-address-label {
@@ -56,7 +54,7 @@
         justify-content: center;
         padding-left: 3px;
 
-        margin-right: 6px;
+        // margin-right: 6px;
 
         &>div {
           outline: none;
@@ -66,6 +64,20 @@
         }
       }
 
+      .treb-insert-function-button {
+        min-height: 1.5em;
+        height: 1.75em;
+        border: 1px solid var(--treb-formula-bar-border-color, var(--treb-ui-border-color, #ccc));
+        border-radius: 2px;
+        background: transparent;
+
+        &[hidden] {
+          display: none;
+        }
+
+      }
+
+      /** expand formula box -- caret/arrow */
       .expand-button {
         background: transparent;
         border: 0;
@@ -160,7 +172,7 @@
 
       }
 
-      /** f(x) button, optional */
+      /* * f(x) button, optional * /
       .formula-button {
         border: 1px solid #ccc;
         border-radius: 2px;
@@ -188,8 +200,9 @@
         }
 
       }
-    }
+      */
+
 
-  
+    }
 
 }

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

@@ -519,4 +519,24 @@ $text-reference-color-5: rgb(254, 47, 1);
     font-family: var(--treb-grid-font-family-osx, var(--treb-grid-font-family, inherit));
   }
 
+  /**
+   *
+   */
+  .treb-annotation-textbox {
+    background: Canvas;
+    position: relative;
+    top: 0px;
+    left: 0px;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: .5em; // ?
+
+    p {
+      margin-block-start: 0;
+      margin-block-end: 0;
+    }
+
+  }
+
 }

package/treb-export/src/export2.ts

@@ -224,9 +224,10 @@ export class Exporter {
         },
       };
 
-      if (xf.horizontal_alignment || xf.vertical_alignment || xf.wrap_text) {
+      if (xf.horizontal_alignment || xf.vertical_alignment || xf.wrap_text || xf.indent) {
         // block.a$.applyAlignment = 1;
         block.alignment = { a$: {}};
+
         if (xf.horizontal_alignment) {
           block.alignment.a$.horizontal = xf.horizontal_alignment;
         }
@@ -236,6 +237,10 @@ export class Exporter {
         if (xf.wrap_text) {
           block.alignment.a$.wrapText = 1;
         }
+        if (xf.indent && xf.horizontal_alignment !== 'center') {
+          block.alignment.a$.indent = xf.indent;
+        }
+
       }
 
       return block;

package/treb-export/src/import2.ts

@@ -24,7 +24,7 @@
 import UZip from 'uzip';
 import Base64JS from 'base64-js';
 
-import type { AnchoredChartDescription, AnchoredImageDescription} from './workbook2';
+import type { AnchoredChartDescription, AnchoredImageDescription, AnchoredTextBoxDescription} from './workbook2';
 import { ChartType, ConditionalFormatOperators, Workbook } from './workbook2';
 import type { ParseResult } from 'treb-parser';
 import { Parser } from 'treb-parser';
@@ -93,7 +93,7 @@ export class Importer {
           ref?: string;
         },
       };
-    }, // ElementTree.Element,
+    },
     shared_formulae: SharedFormulaMap,
     arrays: RangeType[],
     merges: RangeType[],
@@ -117,11 +117,9 @@ export class Importer {
     // console.info(element);
 
     let value: undefined | number | boolean | string;
-    // let type: ValueType = ValueType.undefined;
     let type: SerializedValueType = 'undefined';
 
     let calculated_value: undefined | number | boolean | string;
-    // let calculated_type: ValueType = ValueType.undefined;
     let calculated_type: SerializedValueType = 'undefined';
     
     // QUESTIONS:
@@ -170,8 +168,13 @@ export class Importer {
           const parse_result = this.parser.Parse(formula); // l10n?
           if (parse_result.expression) {
             this.parser.Walk(parse_result.expression, (unit) => {
-              if (unit.type === 'call' && /^_xll\./.test(unit.name)) {
-                unit.name = unit.name.substr(5);
+              if (unit.type === 'call') {
+                if (/^_xll\./.test(unit.name)) {
+                  unit.name = unit.name.substring(5);
+                }
+                else if (/^_xlfn\./.test(unit.name)) {
+                  unit.name = unit.name.substring(6);
+                }
               }
               return true;
             });
@@ -390,6 +393,23 @@ export class Importer {
 
       case 'expression':
         if (rule.formula) {
+
+          if (typeof rule.formula !== 'string') {
+            if (rule.formula.t$) {
+
+              // the only case (to date) we've seen here is that the attribute 
+              // is "xml:space=preserve", which we can ignore (are you sure?)
+              // (should we check that?)
+
+              rule.formula = rule.formula.t$;
+
+            }
+            else {
+              console.info("unexpected conditional expression", {rule});
+
+            }
+          }
+
           let style = {};
           
           if (rule.a$.dxfId) {
@@ -498,16 +518,25 @@ export class Importer {
     const conditional_formatting = FindAll('worksheet/conditionalFormatting');
     for (const element of conditional_formatting) {
       if (element.a$?.sqref ){
-        const area = sheet.TranslateAddress(element.a$.sqref);
-        if (element.cfRule) {
-          const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
-          for (const rule of rules) {
-            const format = this.ParseConditionalFormat(area, rule);
-            if (format) {
-              conditional_formats.push(format);
+
+        // FIXME: this attribute might include multiple ranges? e.g.:
+        //
+        // <conditionalFormatting sqref="B31:I31 B10:E30 G10:I30 F14:F15">
+
+        const parts = element.a$.sqref.split(/\s+/);
+        for (const part of parts) {
+          const area = sheet.TranslateAddress(part);
+          if (element.cfRule) {
+            const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
+            for (const rule of rules) {
+              const format = this.ParseConditionalFormat(area, rule);
+              if (format) {
+                conditional_formats.push(format);
+              }
             }
           }
         }
+
       }
     }
     
@@ -808,6 +837,7 @@ export class Importer {
     const drawings = FindAll('worksheet/drawing');
     const chart_descriptors: AnchoredChartDescription[] = [];
     const image_descriptors: AnchoredImageDescription[] = [];
+    const textbox_descriptors: AnchoredTextBoxDescription[] = [];
 
     for (const child of drawings) {
       
@@ -832,6 +862,9 @@ export class Importer {
                 case 'image':
                   image_descriptors.push(entry);
                   break;
+                case 'textbox':
+                  textbox_descriptors.push(entry);
+                  break;
               }
             }
           }
@@ -873,6 +906,26 @@ export class Importer {
 
     };
 
+    for (const descriptor of textbox_descriptors) {
+
+      const layout: AnnotationLayout = {
+        tl: AnchorToCorner(descriptor.anchor.from),
+        br: AnchorToCorner(descriptor.anchor.to),
+      };
+
+      // console.info({descriptor});
+
+      annotations.push({
+        layout, 
+        type: 'textbox',
+        data: {
+          style: descriptor.style,
+          paragraphs: descriptor.paragraphs,
+        }
+      });
+      
+    }
+
     for (const descriptor of image_descriptors) {
       if (descriptor && descriptor.image) {
 

package/treb-export/src/shared-strings2.ts

@@ -44,7 +44,7 @@ export class SharedStrings {
       //   <t>text here!</t>
       // </si>
 
-      if (si.t) {
+      if (si.t !== undefined) {
 
         // seen recently in the wild, text with leading (or trailing) spaces
         // has an attribute xml:space=preserve (which makes sense, but was not