@trebco/treb 31.7.8 → 31.9.1

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v31.7. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v31.9. Copyright 2018-2024 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "31.7.8",
+  "version": "31.9.1",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -16,7 +16,7 @@
     "@types/uzip": "^0.20201231.0",
     "base64-js": "^1.5.1",
     "cssnano": "^7.0.4",
-    "esbuild": "^0.23.1",
+    "esbuild": "^0.24.0",
     "eslint": "^9.9.1",
     "fast-xml-parser": "^4.0.7",
     "html-minifier-terser": "^7.2.0",

package/treb-data-model/src/annotation.ts

@@ -201,7 +201,7 @@ export interface AnnotationTextBoxData extends AnnotationDataBase {
       style?: CellStyle,
       content: {
         text: string, 
-        style?: CellStyle 
+        style?: CellStyle ,
       }[],
     }[];
   };

package/treb-embed/markup/toolbar.html

@@ -98,6 +98,11 @@
       <div class="treb-color-chooser">
         <div class="treb-caption">Theme colors</div>
         <div class="treb-swatches"></div>
+        <div class="treb-caption">No color</div>
+        <div class="treb-default-swatch">
+          <button class="treb-default-color" data-command="set-color" data-color="{}"></button>
+          <span class="treb-default-color-label" data-command="set-color" data-color="{}">...</span>
+        </div>
         <div class="treb-caption">Other colors</div>
         <div class="treb-swatches"></div>
         <div>

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

@@ -778,12 +778,15 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       this.swatch_lists.theme?.replaceChildren(fragment);
 
       fragment = this.DOM.Fragment();
+
+      /*
       this.DOM.Create('button', 'treb-default-color', fragment, {
         attrs: { title: 'Default color' },
         data: { command: 'set-color', color: JSON.stringify({}) },
       });
+      */
 
-      const colors = ['Black', 'White', 'Gray', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Violet'];
+      const colors = ['Black', 'White', 'Gray', 'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet'];
 
       const lc = colors.map(color => color.toLowerCase());
       const additional_colors = sheet.document_styles.colors.filter(test => {
@@ -1320,6 +1323,10 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
         if (parent.dataset.colorCommand) {
           color_chooser.querySelector('.treb-default-color')?.setAttribute('title', parent.dataset.defaultColorText || 'Default color');
+          const label = color_chooser.querySelector('.treb-default-color-label');
+          if (label) {
+            label.textContent = parent.dataset.defaultColorText || 'Default color';
+          }
 
           parent.appendChild(color_chooser);
           color_chooser.dataset.colorCommand = parent.dataset.colorCommand;

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

@@ -76,7 +76,8 @@ import type {
 
 import {
   IsArea, ThemeColorTable, ComplexToString, Rectangle, IsComplex, type CellStyle,
-  Localization, Style, type Color, ResolveThemeColor, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, DOMContext 
+  Localization, Style, type Color, ResolveThemeColor, IsCellAddress, Area, IsFlatData, IsFlatDataArray, Gradient, DOMContext,
+  ValueType, 
 } from 'treb-base-types';
 
 import { EventSource, ValidateURI } from 'treb-utils';
@@ -5209,13 +5210,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     // now we have to inflate them on sheet change
 
     for (const annotation of event.activate.annotations) {
-      // if (annotation.update_callback) {
-      //   annotation.update_callback();
-      // }
-
       this.InflateAnnotation(annotation);
       this.calculator.UpdateAnnotations(annotation, event.activate);
-
     }
 
     // we also need to update annotations that are already inflated
@@ -5529,21 +5525,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             if (view) {
               view.dirty = true;
             }
-            // else {
-            //   console.info("empty view")
-            // }
 
           }
         }
-
-          /*
-          const view: AnnotationViewData = annotation.view[this.grid.view_index] || {};
-          if (view.update_callback) {
-            view.update_callback();
-          }
-
-          this.grid.AnnotationUpdated(annotation);
-          */
       }
 
       const view: AnnotationViewData = annotation.view[this.grid.view_index] || {};
@@ -5670,19 +5654,11 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
       if (annotation.data.type === 'treb-chart') {
 
-        // if (!(self as any).TREB || !(self as any).TREB.CreateChart2) {
-        //    console.warn('missing chart library');
-        // }
-        // else 
         {
 
           const chart = this.CreateChart();
           chart.Initialize(view.content_node);
 
-          //if (this.calculator.RegisterLibrary('treb-charts', ChartFunctions)) {
-          //  this.UpdateAC();
-          //}
-
           const update_chart = () => {
 
             if (annotation.data.formula) {
@@ -5766,11 +5742,21 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       else if (annotation.data.type === 'textbox') {
 
         if (annotation.data.data) {
+
+          let target: HTMLElement|undefined;
+
           const container = document.createElement('div');
           container.classList.add('treb-annotation-textbox');
 
           for (const paragraph of annotation.data.data.paragraphs) {
             const p = document.createElement('p');
+
+            // FIXME: styling should move (to layout?) so we can 
+            // update it. possibly content as well? although we 
+            // can leave the formula in here, I guess. 
+            // 
+            // how about we move styling to the update routine? 
+
             if (paragraph.style) {
               if (paragraph.style.horizontal_align === 'right' || 
                   paragraph.style.horizontal_align === 'center') {
@@ -5779,17 +5765,36 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             }
 
             for (const entry of paragraph.content) {
+              
               const span = document.createElement('span');
-              span.textContent = entry.text || '';
+              
+              if (!target) { target = span; }
+
+              if (!annotation.data.formula) {
+                span.textContent = entry.text || '';
+              }
+              
               if (entry.style?.bold) {
                 span.style.fontWeight = '600';
               }
+              
               if (entry.style?.italic) {
                 span.style.fontStyle = 'italic';
               }
+              
               p.appendChild(span);
+
+              if (annotation.data.formula) {
+                break; // only one text node allowed for formula (?)
+              }
+
             }
             container.append(p);
+
+            if (annotation.data.formula) {
+              break; // only one text node allowed for formula (?)
+            }
+
           }
 
           view.content_node.append(container);
@@ -5807,12 +5812,68 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             };
 
             view.update_callback = () => {
+
               if (!this.grid.headless) {
                 update_textbox();
               }
+
+              if (target && annotation.data.formula) {
+
+                const parse_result = this.parser.Parse(annotation.data.formula);
+                if (parse_result && parse_result.expression) {
+
+                  // FIXME: make a method for doing this
+
+                  this.parser.Walk(parse_result.expression, (unit) => {
+                    if (unit.type === 'address' || unit.type === 'range') {
+                      this.model.ResolveSheetID(unit, undefined, this.grid.active_sheet);
+                    }
+                    return true;
+                  });
+
+                  const result = this.calculator.CalculateExpression(parse_result.expression);
+
+                  let format = NumberFormatCache.Get('General');
+                  let source: ICellAddress|undefined;
+                  switch (parse_result.expression.type) {
+                    case 'address':
+                      source = parse_result.expression;
+                      break;
+                    case 'range':
+                      source = parse_result.expression.start;
+                      break;
+                  }
+
+                  if (source) {
+                    const sheet = source.sheet_id ? this.model.sheets.Find(source.sheet_id) : this.grid.active_sheet;
+                    const style = sheet?.CellStyleData(source);
+                    if (style?.number_format) {
+                      format = NumberFormatCache.Get(style.number_format);
+                    }
+                  }
+
+                  switch (result.type) {
+                    case ValueType.number:
+                    case ValueType.string:
+                    case ValueType.complex:
+                      target.textContent = format.Format(result.value);
+                      break;
+
+                    default:
+                      target.textContent = result.value?.toString() || '';
+                  }
+
+
+                  // TODO: use reference number format
+
+                }
+
+              }
+
             };
 
-            update_textbox();
+            // update_textbox();
+            view.update_callback();
 
           }
 

package/treb-embed/style/autocomplete.scss

@@ -19,6 +19,10 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
+
 /**
  * this is getting attached to the document (why? b/c fixed pos?)
  * so it inherits a lot. that's not good.

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

@@ -19,6 +19,9 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
 .treb-main.treb-main {
 
   .treb-dropdown-caret {

package/treb-embed/style/font-stacks.scss

@@ -19,6 +19,8 @@
  * 
  */
 
+@use './defaults.scss' as *;
+
 //
 // thanks to 
 // https://modernfontstacks.com/

package/treb-embed/style/grid.scss

@@ -21,20 +21,20 @@
 
 // sass vars only
 
-@import 'z-index.scss';
-@import 'defaults.scss';
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
 
 // clean, no imports (but use sass vars)
 
-@import 'mouse-mask.scss';
-@import 'note.scss';
-@import 'table.scss';
-@import 'tooltip.scss';
-@import 'dropdown-select.scss';
-@import 'autocomplete.scss';
-@import 'formula-bar.scss';
-@import 'tab-bar.scss';
-@import 'overlay-editor.scss';
+@use 'mouse-mask.scss';
+@use 'note.scss';
+@use 'table.scss';
+@use 'tooltip.scss';
+@use 'dropdown-select.scss';
+@use 'autocomplete.scss';
+@use 'formula-bar.scss';
+@use 'tab-bar.scss';
+@use 'overlay-editor.scss';
 
 .treb-main.treb-main {
 

package/treb-embed/style/layout.scss

@@ -1,13 +1,16 @@
 
-@import './grid.scss';
-@import './theme-defaults.scss';
-@import './dark-theme.scss';
-@import '../../treb-charts/style/charts.scss';
-@import './dialog.scss';
-@import './spinner.scss';
-@import './treb-icons.scss';
-@import './toolbar.scss';
-@import './font-stacks.scss';
+@use './defaults.scss' as *;
+@use './z-index.scss' as *;
+
+@use './grid.scss';
+@use './theme-defaults.scss';
+@use './dark-theme.scss';
+@use '../../treb-charts/style/charts.scss';
+@use './dialog.scss';
+@use './spinner.scss';
+@use './treb-icons.scss';
+@use './toolbar.scss';
+@use './font-stacks.scss';
 
 /*
  * switching to a double-selector to increase specificity. the particular

package/treb-embed/style/mouse-mask.scss

@@ -19,6 +19,9 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
 .treb-main.treb-main {
 
   /**

package/treb-embed/style/note.scss

@@ -19,6 +19,10 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
+
 .treb-main.treb-main {
 
   // are these exactly the same? clearly we copied-and-pasted

package/treb-embed/style/overlay-editor.scss

@@ -19,6 +19,9 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+
 .treb-main.treb-main {
 
   .treb-grid {

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

@@ -19,6 +19,10 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
+
 .treb-main.treb-main {
 
   .treb-mouse-mask .ghost-tab {

package/treb-embed/style/table.scss

@@ -19,6 +19,9 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+
 .treb-main.treb-main {
 
   .treb-sort-button {

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

@@ -19,6 +19,8 @@
  * 
  */
 
+@use './defaults.scss' as *;
+
 /**
  * we're using variables for selection colors because the colors are used
  * in more than one place; that's a drawback of using CSS, but I think overall
@@ -356,12 +358,12 @@ $text-reference-color-5: rgb(254, 47, 1);
     .selection {
       stroke-width: var(--treb-selection-stroke-width, 2px);
 
-      .outline {
+      .treb-selection-outline {
         stroke: currentColor;
         fill: none;
       }
 
-      .fill {
+      .treb-selection-fill {
         stroke: none;
         fill: currentColor;
         opacity: var(--treb-selection-fill-opacity, .1);
@@ -405,7 +407,7 @@ $text-reference-color-5: rgb(254, 47, 1);
     .primary-selection {
       color: var(--treb-selection-color-unfocused, var(--treb-selection-color, $primary-selection-color));
 
-      .nub {
+      .treb-selection-nub {
         stroke: #fff; // <-- ? maybe grid background color?
         fill: currentColor;
         stroke-width: 1px;

package/treb-embed/style/toolbar.scss

@@ -367,11 +367,7 @@ $swatch-size: 18px;
 
       }
 
-      .treb-swatches {
-
-        display: grid;
-        grid-template-columns: repeat(10, 1fr);
-        gap: .5rem;
+      .treb-swatches, .treb-default-swatch {
 
         button {
           width: $swatch-size;
@@ -399,6 +395,22 @@ $swatch-size: 18px;
           mask-size: 24px 24px;
           -webkit-mask-size: 24px 24px;
         }
+
+      }
+
+      .treb-default-swatch {
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: .5rem;
+        align-items: center;
+      }
+
+      .treb-swatches {
+
+        display: grid;
+        grid-template-columns: repeat(10, 1fr);
+        gap: .5rem;
+
       }
     }
 

package/treb-embed/style/tooltip.scss

@@ -19,6 +19,10 @@
  * 
  */
 
+@use 'z-index.scss' as *;
+@use 'defaults.scss' as *;
+ 
+
 .treb-main.treb-main {
 
   .treb-tooltip {

package/treb-embed/style/treb-spreadsheet-element.scss

@@ -1,5 +1,5 @@
 
-@import 'layout.scss';
+@use 'layout.scss';
 
 /**
  * default styles for custom element. we basically want 

package/treb-export/src/import.ts

@@ -1104,14 +1104,20 @@ export class Importer {
 
       // console.info({descriptor});
 
-      annotations.push({
+      const anchored_annotation: AnchoredAnnotation = {
         layout, 
         type: 'textbox',
         data: {
           style: descriptor.style,
           paragraphs: descriptor.paragraphs,
-        }
-      });
+        },
+      };
+
+      if (descriptor.reference) {
+        anchored_annotation.formula = `=` + descriptor.reference;
+      }
+
+      annotations.push(anchored_annotation);
       
     }
 

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

@@ -983,45 +983,6 @@ export class StyleCache {
     const new_fill: Fill = {...fill};
     this.fills.push(new_fill);
 
-    /*
-    // add the node structure
-
-    if (!this.dom) throw new Error('missing dom');
-    const fills = this.dom.find('./fills');
-
-    if (!fills) throw new Error('fills not found');
-    fills.attrib.count = (Number(fills.attrib.count || 0) + 1).toString();
-
-    const new_element = Element('fill');
-    const pattern_fill = Element('patternFill', { patternType: fill.pattern_type });
-
-    switch (fill.pattern_type) {
-      case 'none':
-        break;
-      case 'solid':
-        if (fill.fg_color) {
-          const attrs: Record<string, string> = {};
-
-          if (fill.fg_color.argb) { attrs.rgb = fill.fg_color.argb; }
-          if (fill.fg_color.indexed) { attrs.indexed = fill.fg_color.indexed.toString(); }
-          if (fill.fg_color.tint) { attrs.tint = fill.fg_color.tint.toString(); }
-          if (typeof fill.fg_color.theme !== 'undefined') { attrs.theme = fill.fg_color.theme.toString(); }
-
-          pattern_fill.append(Element('fgColor', attrs));
-        }
-        break;
-      case 'gray':
-
-        // ...
-
-        break;
-    }
-
-    new_element.append(pattern_fill);
-
-    fills.append(new_element);
-    */
-
     return this.fills.length - 1;
   }