@trebco/treb 29.8.4 → 30.1.0

package/treb-export/src/workbook2.ts

@@ -49,7 +49,7 @@ export const ConditionalFormatOperators: Record<string, string> = {
 };
 
 export enum ChartType {
-  Unknown = 0, Column, Bar, Line, Scatter, Donut, Pie, Bubble
+  Unknown = 0, Column, Bar, Line, Scatter, Donut, Pie, Bubble, Box
 }
 
 export interface ChartSeries {
@@ -345,7 +345,14 @@ export class Workbook {
         to: ParseAnchor(anchor_node['xdr:to']),
       };
 
-      const chart_reference = XMLUtils.FindAll(anchor_node, `xdr:graphicFrame/a:graphic/a:graphicData/c:chart`)[0];
+      let chart_reference = XMLUtils.FindAll(anchor_node, `xdr:graphicFrame/a:graphic/a:graphicData/c:chart`)[0];
+
+      // check for an "alternate content" chart/chartex (wtf ms). we're 
+      // supporting this for box charts only (atm) 
+
+      if (!chart_reference) {
+        chart_reference = XMLUtils.FindAll(anchor_node, `mc:AlternateContent/mc:Choice/xdr:graphicFrame/a:graphic/a:graphicData/cx:chart`)[0];
+      }
 
       if (chart_reference && chart_reference.a$ && chart_reference.a$['r:id']) {
         const result: AnchoredChartDescription = { type: 'chart', anchor };
@@ -659,7 +666,64 @@ export class Workbook {
       if (node) {
         result.type = ChartType.Bubble;
         result.series = ParseSeries(node, ChartType.Bubble);
-        console.info("Bubble series?", result.series);
+        // console.info("Bubble series?", result.series);
+      }
+    }
+
+    if (!node) {
+
+      // box plot uses "extended chart" which is totally different... but we 
+      // might need it again later? for the time being it's just inlined
+
+      const ex_series = XMLUtils.FindAll(xml, 'cx:chartSpace/cx:chart/cx:plotArea/cx:plotAreaRegion/cx:series');
+      if (ex_series?.length) {
+        if (ex_series.every(test => test.__layoutId === 'boxWhisker')) {
+          result.type = ChartType.Box;
+          result.series = [];
+          const data = XMLUtils.FindAll(xml, 'cx:chartSpace/cx:chartData/cx:data'); // /cx:data/cx:numDim/cx:f');
+
+          // console.info({ex_series, data})
+
+          for (const entry of ex_series) {
+
+            const series: ChartSeries = {};
+
+            const id = Number(entry['cx:dataId']?.['__val']);
+            for (const data_series of data) {
+              if (Number(data_series.__id) === id) {
+                series.values = data_series['cx:numDim']?.['cx:f'] || '';
+                break;
+              }
+            }
+
+            const label = XMLUtils.FindAll(entry, 'cx:tx/cx:txData');
+            if (label) {
+              if (label[0]?.['cx:f']) {
+                series.title = label[0]['cx:f'];
+              }
+              else if (label[0]?.['cx:v']) {
+                series.title = '"' + label[0]['cx:v'] + '"';
+              }
+            }
+
+            const title = XMLUtils.FindAll(xml, 'cx:chartSpace/cx:chart/cx:title/cx:tx/cx:txData');
+            if (title) {
+              if (title[0]?.['cx:f']) {
+                result.title = title[0]['cx:f'];
+              }
+              else if (title[0]?.['cx:v']) {
+                result.title = '"' + title[0]['cx:v'] + '"';
+              }
+            }
+
+            result.series.push(series);
+
+          }          
+
+          // console.info({result});
+          return result; 
+
+        }
       }
     }
 

package/treb-grid/src/editors/editor.ts

@@ -726,7 +726,8 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
     const list: Set<string> = new Set();
 
     // for the result, map of reference to normalized address label
-    const map: Map<ExpressionUnit, string> = new Map();
+    // const map: Map<ExpressionUnit, string> = new Map();
+    const map: Map<string, string> = new Map();
 
     for (const entry of reference_list) {
 
@@ -743,12 +744,14 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
       }
 
       // but keep a map
-      map.set(entry, label);
+      map.set(entry.label, label);
 
     }
 
     this.UpdateReferences(descriptor, references);
 
+    // console.info({map});
+
     return map;
     
   }
@@ -851,7 +854,7 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
       if (parse_result.expression) {
 
         const normalized_labels = this.UpdateDependencies(descriptor, parse_result);
-        
+
         // the parser will drop a leading = character, so be
         // sure to add that back if necessary
 
@@ -925,8 +928,12 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
 
           switch (unit.type) {
             case 'identifier':
-            case 'call':
+              // FIXME: canonicalize (optionally)
+              label = text.substring(pos, pos + unit.name.length);
+              reference = normalized_labels.get(unit.name) || '';
+              break;
 
+            case 'call':
               // FIXME: canonicalize (optionally)
               label = text.substring(pos, pos + unit.name.length);
               break;
@@ -944,7 +951,7 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
             case 'address':
             case 'range':
             case 'structured-reference':
-              reference = normalized_labels.get(unit) || '???';
+              reference = normalized_labels.get(unit.label) || '???';
 
               /*
               {

package/treb-grid/src/layout/base_layout.ts

@@ -149,6 +149,7 @@ export abstract class BaseLayout {
   }
 
   protected dropdown_caret!: SVGSVGElement;
+  protected spill_border!: SVGSVGElement;
 
   /** we have to disable mock selection for IE or it breaks key handling */
   private trident = ((typeof navigator !== 'undefined') &&
@@ -207,6 +208,9 @@ export abstract class BaseLayout {
     this.mask = DOM.Div('treb-mouse-mask');
     this.tooltip = DOM.Div('treb-tooltip');
 
+    this.spill_border = DOM.SVG('svg', 'treb-spill-border');
+    this.spill_border.tabIndex = -1;
+
     this.dropdown_caret = DOM.SVG('svg', 'treb-dropdown-caret');
     this.dropdown_caret.setAttribute('viewBox', '0 0 24 24');
     this.dropdown_caret.tabIndex = -1;
@@ -1099,6 +1103,10 @@ export abstract class BaseLayout {
 
     // FIXME: -> instance specific, b/c trident
 
+    if (!this.spill_border.parentElement) {
+      container.appendChild(this.spill_border);
+    }
+
     if (!this.dropdown_caret.parentElement) {
       container.appendChild(this.dropdown_caret);
     }
@@ -1431,6 +1439,39 @@ export abstract class BaseLayout {
     this.dropdown_caret_visible = true;
   }
 
+  public ShowSpillBorder(area?: IArea) {
+    this.spill_border.textContent = '';
+    if (area) {
+      const resolved = new Area(area.start, area.end);  
+      
+      let target_rect = this.OffsetCellAddressToRectangle(resolved.start);
+
+      if (resolved.count > 1) {
+        target_rect = target_rect.Combine(this.OffsetCellAddressToRectangle(resolved.end));
+      }
+  
+      target_rect = target_rect.Shift(
+        this.header_size.width, this.header_size.height);
+
+      this.spill_border.style.display = 'block';
+      this.spill_border.style.top = (target_rect.top - 5).toString();
+      this.spill_border.style.left = (target_rect.left - 5).toString();
+      this.spill_border.style.width = (target_rect.width + 10).toString();
+      this.spill_border.style.height = (target_rect.height + 10).toString();
+  
+      const rect = this.DOM.SVG('rect', undefined, this.spill_border);
+      rect.setAttribute('x', '4.5');
+      rect.setAttribute('y', '4.5');
+      rect.setAttribute('width', (target_rect.width + 1).toString());
+      rect.setAttribute('height', (target_rect.height + 1).toString());
+      
+    }
+    else {
+      this.spill_border.style.display = 'none';
+    }
+
+  }
+
   public HideDropdownCaret(): void {
     if (this.dropdown_caret_visible) {
       // this.dropdown_caret.classList.remove('active');

package/treb-grid/src/types/grid.ts

@@ -311,6 +311,13 @@ export class Grid extends GridBase {
     empty: true,
   };
 
+  /** reusing type. FIXME? we don't need a target */
+  private readonly spill_selection: GridSelection = {
+    target: { row: 0, column: 0 },
+    area: new Area({ row: 0, column: 0 }),
+    empty: true,
+  };
+
   /**
    * active selection when selecting arguments (while editing)
    */
@@ -1353,6 +1360,7 @@ export class Grid extends GridBase {
    */
   public UpdateLayout(): void {
     this.layout.UpdateTiles();
+    this.layout.UpdateContentsSize();
     this.render_tiles = this.layout.VisibleTiles();
     this.Repaint(true);
   }
@@ -5099,13 +5107,16 @@ export class Grid extends GridBase {
 
     const cell = this.active_sheet.CellData(this.primary_selection.target);
 
-    if (!cell || (!cell.area && !cell.table)) {
+    if (!cell || (!cell.area && !cell.table && !cell.spill)) {
       return;
     }
 
     if (cell.area) {
       this.Select(this.primary_selection, cell.area, cell.area.start);
     }
+    if (cell.spill) {
+      this.Select(this.primary_selection, cell.spill, cell.spill.start);
+    }
     if (cell.table) {
       const area = new Area(cell.table.area.start, cell.table.area.end);
       this.Select(this.primary_selection, area, area.start);
@@ -5123,7 +5134,12 @@ export class Grid extends GridBase {
 
     const show_primary_selection = this.hide_selection ? false :
       (!this.editing_state) || (this.editing_cell.sheet_id === this.active_sheet.id);
-  
+
+    const data = this.primary_selection.empty ? undefined :
+      this.active_sheet.CellData(this.primary_selection.target);
+ 
+    this.layout.ShowSpillBorder(data?.spill);
+
     this.selection_renderer?.RenderSelections(show_primary_selection, rerender);
   }
 
@@ -5172,7 +5188,7 @@ export class Grid extends GridBase {
     const cells = this.active_sheet.cells;
 
     let cell = cells.GetCell(selection.target, false);
-    if (!cell || (cell.type === ValueType.undefined && !cell.area)) {
+    if (!cell || (cell.type === ValueType.undefined && !cell.area && !cell.spill)) {
       return false;
     }
 
@@ -5206,20 +5222,20 @@ export class Grid extends GridBase {
       if (rows) {
         for (let column = selection.area.start.column; !has_value && column <= selection.area.end.column; column++) {
           cell = cells.GetCell({ row: test.row, column }, false);
-          has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area));
+          has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area || !!cell.spill));
           if (!has_value && cell && cell.merge_area) {
             cell = cells.GetCell(cell.merge_area.start, false);
-            has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area));
+            has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area || !!cell.spill));
           }
         }
       }
       else {
         for (let row = selection.area.start.row; !has_value && row <= selection.area.end.row; row++) {
           cell = cells.GetCell({ row, column: test.column }, false);
-          has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area));
+          has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area || !!cell.spill));
           if (!has_value && cell && cell.merge_area) {
             cell = cells.GetCell(cell.merge_area.start, false);
-            has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area));
+            has_value = has_value || (!!cell && (cell.type !== ValueType.undefined || !!cell.area || !!cell.spill));
           }
         }
       }
@@ -6565,15 +6581,24 @@ export class Grid extends GridBase {
    */
   private UpdateFormulaBarFormula(override?: string) {
 
-    if (!this.formula_bar) { return; }
+    this.layout.HideDropdownCaret();
+
+    // NOTE: this means we won't set validation carets... that needs
+    // to be handled separately (FIXME)
+
+    // if (!this.formula_bar) { return; }
 
     if (override) {
-      this.formula_bar.formula = override;
+      if (this.formula_bar) {
+        this.formula_bar.formula = override;
+      }
       return;
     }
 
     if (this.primary_selection.empty) {
-      this.formula_bar.formula = '';
+      if (this.formula_bar) {
+        this.formula_bar.formula = '';
+      }
     }
     else {
       let data = this.active_sheet.CellData(this.primary_selection.target);
@@ -6589,7 +6614,10 @@ export class Grid extends GridBase {
         }
       }
 
-      this.formula_bar.editable = !data.style?.locked;
+      if (this.formula_bar) {
+        this.formula_bar.editable = !data.style?.locked;
+      }
+
       const value = this.NormalizeCellValue(data);
 
       // this isn't necessarily the best place for this, except that
@@ -6619,17 +6647,19 @@ export class Grid extends GridBase {
         }
 
       }
-      else {
-        this.layout.HideDropdownCaret();
-      }
 
-      // add braces for area
-      if (data.area) {
-        this.formula_bar.formula = '{' + (value || '') + '}';
-      }
-      else {
-        this.formula_bar.formula = (typeof value !== 'undefined') ? value.toString() : ''; // value || ''; // what about zero?
+      if (this.formula_bar) {
+
+        // add braces for area
+        if (data.area) {
+          this.formula_bar.formula = '{' + (value || '') + '}';
+        }
+        else {
+          this.formula_bar.formula = (typeof value !== 'undefined') ? value.toString() : ''; // value || ''; // what about zero?
+        }
+
       }
+
     }
 
   }
@@ -6877,14 +6907,20 @@ export class Grid extends GridBase {
 
           if (view && view.node) {
             // this.selected_annotation.node.innerHTML;
-            const node = view.node.firstChild;
+            const node = view.node.firstChild?.firstChild;
+
             if (node) {
+
+              // trying to put svg on the clipboard here, which works, but
+              // is basically useless. the underlying method is good, though,
+              // clients could use it for better UX in saving images
+
               const html = (SerializeHTML(node as Element) as HTMLElement).outerHTML;
 
-              // no other format supported? (...)
-              const type = 'text/plain';
-              event.clipboardData.setData(type, html);
-              // console.info(html);
+              event.clipboardData.setData('text/uri-list', `data:image/svg+xml;base64,` + btoa(html)); // <-- does this work? seems no
+              event.clipboardData.setData('text/html', html); // <-- does this work? (also no)
+              event.clipboardData.setData('text/plain', html);
+              
             }
           }
         }

package/treb-parser/src/parser-types.ts

@@ -208,6 +208,9 @@ export interface UnitAddress extends BaseUnit {
   absolute_row?: boolean;
   absolute_column?: boolean;
 
+  /** spill flag (address ends with #) */
+  spill?: boolean;
+
   /** 
    * this means the row is a relative offset from the current row. this 
    * happens if you use R1C1 syntax with square brackets. 

package/treb-parser/src/parser.ts

@@ -970,7 +970,8 @@ export class Parser {
       (address.absolute_column ? '$' : '') +
       this.ColumnLabel(column) +
       (address.absolute_row ? '$' : '') +
-      (row + 1)
+      (row + 1) + 
+      (address.spill ? '#' : '')
     );
   }
 
@@ -2210,6 +2211,9 @@ export class Parser {
 
         || (char === QUESTION_MARK && square_bracket === 0)
 
+        // moving
+        // || (char === HASH) // FIXME: this should only be allowed at the end...
+
         /*
 
         || (this.flags.r1c1 && (
@@ -2243,6 +2247,11 @@ export class Parser {
       else break;
     }
 
+    // hash at end only
+    if (this.data[this.index] === HASH) {
+      token.push(this.data[this.index++]);
+    }
+
     const str = token.map((num) => String.fromCharCode(num)).join('');
 
     // special handling: unbalanced single quote (probably sheet name),
@@ -2523,6 +2532,7 @@ export class Parser {
     // as names. so this should be a token if r === 0.
 
     const r = this.ConsumeAddressRow(position);
+
     if (!r) return null; 
     position = r.position;
 
@@ -2544,6 +2554,7 @@ export class Parser {
       absolute_column: c.absolute,
       position: index,
       sheet,
+      spill: r.spill,
     };
 
     // if that's not the complete token, then it's invalid
@@ -2578,6 +2589,8 @@ export class Parser {
       absolute: boolean;
       row: number;
       position: number;
+      spill?: boolean; // spill reference
+
     }|false {
 
     const absolute = this.data[position] === DOLLAR_SIGN;
@@ -2607,7 +2620,13 @@ export class Parser {
       return false; 
     }
 
-    return { absolute, row: value - 1, position };
+    let spill = false;
+    if (this.data[position] === HASH) {
+      position++;
+      spill = true;
+    }
+
+    return { absolute, row: value - 1, position, spill };
   }
 
   /**

package/treb-utils/src/serialize_html.ts

@@ -19,25 +19,33 @@
  * 
  */
 
+/*
 interface StringMap {
   [index: string]: string;
 }
+*/
+
+type StringMap = Map<string, string>;
+
 
 /**
  * defaults are global, since we assume they never change. created on demand.
  */
 let default_properties: StringMap|undefined;
 
+/**
+ * convert CSSStyleDeclaration to map
+ */
 const PropertyMap = (source: CSSStyleDeclaration): StringMap => {
 
-  const map: StringMap = {};
+  const map: StringMap = new Map();
 
   // you can iterate this thing, although apparently ts won't allow
   // it because it's not in the spec? should probably play ball
 
   for (let i = 0; i < source.length; i++) {
     const key = source[i];
-    map[key] = source.getPropertyValue(key);
+    map.set(key, source.getPropertyValue(key));
   }
 
   return map;
@@ -49,16 +57,17 @@ const PropertyMap = (source: CSSStyleDeclaration): StringMap => {
  */
 const GetAppliedStyle = (node: Element, computed: CSSStyleDeclaration, defaults: StringMap) => {
 
-  const applied: StringMap = {};
+  const applied: StringMap = new Map();
   const computed_map = PropertyMap(computed);
   
-  for (const key of Object.keys(computed_map)) {
-    if (computed_map[key] !== defaults[key]) {
-      applied[key] = defaults[key];
+  for (const [key, value] of computed_map.entries()) {
+    if (value !== defaults.get(key)) {
+      applied.set(key, value);
     }
   }
 
-  return (Object.keys(applied).map((key) => `${key}: ${applied[key]}`).join('; ') +
+  const arr = Array.from(applied.entries());
+  return (arr.map(([key, value]) => `${key}: ${value}`).join('; ') +
     '; ' + (node.getAttribute('style') || '')).trim().replace(/"/g, '\'');
 
 };
@@ -118,7 +127,7 @@ export const SerializeHTML = (node: Element) => {
 
   if (!default_properties) {
 
-    const defaults: StringMap = {};
+    const defaults: StringMap = new Map();
 
     // regarding document, in this case we're creating an iframe 
     // specifically for isolation, and adding it to "document". 
@@ -137,7 +146,7 @@ export const SerializeHTML = (node: Element) => {
       const div = frame_document.createElement('div');
       frame_document.body.appendChild(div);
       const computed = getComputedStyle(div);
-      Array.prototype.forEach.call(computed, (key) => defaults[key] = computed[key]);
+      Array.prototype.forEach.call(computed, key => defaults.set(key, computed[key]));
     }
 
     document.body.removeChild(iframe);
@@ -145,7 +154,23 @@ export const SerializeHTML = (node: Element) => {
 
   }
 
-  return RenderNode(node, default_properties);
+  const rendered = RenderNode(node, default_properties);
+  if (rendered instanceof Element && rendered.tagName === 'svg') {
+    if (!rendered.hasAttribute('version')) {
+      rendered.setAttribute('version', '1.1');
+    }
+
+    if (!rendered.hasAttribute('xmlns')) {
+      rendered.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    }
+
+    if (!rendered.hasAttribute('xmlns:xlink')) {
+      rendered.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+    }
+
+  }
+
+  return rendered;
 
 };