@trebco/treb 28.13.2 → 28.15.0

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';
@@ -170,8 +170,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 +395,20 @@ export class Importer {
 
       case 'expression':
         if (rule.formula) {
+
+          if (typeof rule.formula !== 'string') {
+            console.info("conditional expression", {rule});
+            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$;
+
+            }
+          }
+
           let style = {};
           
           if (rule.a$.dxfId) {
@@ -498,6 +517,26 @@ export class Importer {
     const conditional_formatting = FindAll('worksheet/conditionalFormatting');
     for (const element of conditional_formatting) {
       if (element.a$?.sqref ){
+
+        // 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);
+              }
+            }
+          }
+        }
+
+        /*
         const area = sheet.TranslateAddress(element.a$.sqref);
         if (element.cfRule) {
           const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
@@ -508,6 +547,7 @@ export class Importer {
             }
           }
         }
+        */
       }
     }
     
@@ -808,6 +848,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 +873,9 @@ export class Importer {
                 case 'image':
                   image_descriptors.push(entry);
                   break;
+                case 'textbox':
+                  textbox_descriptors.push(entry);
+                  break;
               }
             }
           }
@@ -873,6 +917,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

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

@@ -76,6 +76,7 @@ export interface CellXf {
   horizontal_alignment?: string;
   vertical_alignment?: string;
   xfid?: number;
+  indent?: number;
 
   // FIXME // apply_font?: boolean;
   // FIXME // apply_border?: boolean;
@@ -157,6 +158,7 @@ export interface StyleOptions {
   vertical_alignment?: string;
   wrap?: boolean;
   fill?: Fill;
+  indent?: number;
 }
 
 
@@ -434,6 +436,8 @@ export class StyleCache {
         break;
     }
 
+    options.indent = composite.indent;
+
     if (composite.fill) {
       fill.pattern_type = 'solid';
       if (composite.fill.text) {
@@ -663,6 +667,10 @@ export class StyleCache {
         break;
     }
 
+    // indent
+
+    props.indent = xf.indent;
+
     // wrap
 
     if (xf.wrap_text) {
@@ -1091,6 +1099,7 @@ export class StyleCache {
           xf.border === border_index &&
           xf.number_format === number_format_index &&
           !!xf.wrap_text === !!options.wrap &&
+          xf.indent === options.indent &&
           ((!options.horizontal_alignment && !xf.horizontal_alignment) || options.horizontal_alignment === xf.horizontal_alignment) &&
           ((!options.vertical_alignment && !xf.vertical_alignment) || options.vertical_alignment === xf.vertical_alignment)) {
           
@@ -1106,6 +1115,7 @@ export class StyleCache {
       fill: fill_index,
       border: border_index,
       number_format: number_format_index,
+      indent: options.indent,
     };
 
     if (options.horizontal_alignment) {
@@ -1120,44 +1130,6 @@ export class StyleCache {
 
     this.cell_xfs.push(new_xf);
 
-    /*
-
-    // add the node structure
-
-    if (!this.dom) throw new Error('missing dom');
-    const xfs = this.dom.find('./cellXfs');
-
-    if (!xfs) throw new Error('xfs not found');
-    xfs.attrib.count = (Number(xfs.attrib.count || 0) + 1).toString();
-
-    const new_element = Element('xf', {
-      borderId: new_xf.border.toString(),
-      fillId: new_xf.fill.toString(),
-      fontId: new_xf.font.toString(),
-      numFmtId: new_xf.number_format.toString(),
-    });
-
-    if (new_xf.horizontal_alignment || new_xf.vertical_alignment) {
-      const attrs: {[index: string]: string} = {};
-      if (new_xf.horizontal_alignment) {
-        attrs.horizontal = new_xf.horizontal_alignment;
-      }
-      if (new_xf.vertical_alignment) {
-        attrs.vertical = new_xf.vertical_alignment;
-      }
-      if (new_xf.wrap_text) {
-        attrs.wrapText = '1';
-      }
-      new_element.append(Element('alignment', attrs));
-    }
-
-    if (typeof new_xf.xfid !== 'undefined') {
-      new_element.attrib.xfId = new_xf.xfid.toString();
-    }
-
-    xfs.append(new_element);
-    */
-
     return this.cell_xfs.length - 1;
 
   }
@@ -1255,6 +1227,7 @@ export class StyleCache {
         xf.horizontal_alignment = element.alignment.a$.horizontal;
         xf.vertical_alignment = element.alignment.a$.vertical;
         xf.wrap_text = !!element.alignment.a$.wrapText;
+        xf.indent = element.alignment.a$.indent || undefined;
       }
 
       return xf;

package/treb-export/src/workbook2.ts

@@ -44,6 +44,7 @@ import { Theme } from './workbook-theme2';
 import { Sheet, VisibleState } from './workbook-sheet2';
 import type { RelationshipMap } from './relationship';
 import { ZipWrapper } from './zip-wrapper';
+import type { CellStyle } from 'treb-base-types';
 
 
 /*
@@ -98,7 +99,23 @@ export interface AnchoredChartDescription {
   anchor: TwoCellAnchor,
 }
 
-export type AnchoredDrawingPart = AnchoredChartDescription|AnchoredImageDescription;
+export interface AnchoredTextBoxDescription {
+  type: 'textbox';
+  style?: CellStyle;
+  paragraphs: { 
+    style?: CellStyle,
+    content: {
+      text: string, 
+      style?: CellStyle 
+    }[],
+  }[];
+  anchor: TwoCellAnchor,
+}
+
+export type AnchoredDrawingPart = 
+    AnchoredChartDescription | 
+    AnchoredTextBoxDescription |
+    AnchoredImageDescription ;
 
 export interface TableFooterType {
   type: 'label'|'formula';
@@ -363,6 +380,107 @@ export class Workbook {
           }
 
         }
+        else {
+
+          let style: CellStyle|undefined;
+
+          const sppr = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:spPr')[0];
+          if (sppr) {
+            style = {};
+            const fill = sppr['a:solidFill'];
+            if (fill) {
+              if (fill['a:schemeClr']?.a$?.val) {
+                let m = (fill['a:schemeClr'].a$.val).match(/accent(\d+)/);
+                if (m) {
+                  style.fill = { theme: Number(m[1]) + 3 }
+                  if (fill['a:schemeClr']['a:lumOff']?.a$?.val) {
+                    const num = Number(fill['a:schemeClr']['a:lumOff'].a$.val);
+                    if (!isNaN(num)) {
+                      style.fill.tint = num / 1e5;
+                    }
+                  }
+                }
+
+              }
+            }
+          }
+
+          const tx = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:txBody')[0];
+          if (tx) {
+
+            const paragraphs: { 
+              style?: CellStyle,
+              content: {
+                text: string, 
+                style?: CellStyle 
+              }[],
+            }[] = [];
+
+            /*
+            const content: {
+              text: string,
+              style?: CellStyle,
+            }[][] = [];
+            */
+
+            const p_list = XMLUtils.FindAll(tx, 'a:p');
+            for (const paragraph of p_list) {
+              const para: { text: string, style?: CellStyle }[] = [];
+              let style: CellStyle|undefined;
+
+              let appr = paragraph['a:pPr'];
+              if (appr) {
+                style = {};
+                if (appr.a$?.algn === 'r') {
+                  style.horizontal_align = 'right';
+                }
+                else if (appr.a$?.algn === 'ctr') {
+                  style.horizontal_align = 'center';
+                }
+              }
+
+              let ar = paragraph['a:r'];
+              if (ar) {
+                if (!Array.isArray(ar)) {
+                  ar = [ar];
+                }
+                for (const line of ar) {
+
+                  const entry: { text: string, style?: CellStyle } = { 
+                    text: line['a:t'] || '',
+                  };
+
+                  // format
+                  const fmt = line['a:rPr'];
+                  if (fmt) {
+                    entry.style = {};
+                    if (fmt.a$?.b === '1') {
+                      entry.style.bold = true;
+                    }
+                    if (fmt.a$?.i === '1') {
+                      entry.style.italic = true;
+                    }
+                  }
+
+                  para.push(entry);
+
+                }
+              }
+
+              paragraphs.push({ content: para, style });
+
+            }
+            
+            results.push({
+              type: 'textbox', 
+              style,
+              paragraphs,
+              anchor,
+            });
+
+          }
+
+        }
 
 
       }