@trebco/treb 27.7.6 → 27.11.1

package/treb-embed/src/spinner.ts

@@ -19,16 +19,16 @@
  * 
  */
 
+import { DOMUtilities } from 'treb-base-types';
+
 export class Spinner {
 
   private node: HTMLDivElement;
   private visible = false;
 
   constructor(public container: HTMLElement) {
-    this.node = document.createElement('div');
-    this.node.classList.add('treb-spinner');
+    this.node = DOMUtilities.Div('treb-spinner', container);
     this.node.innerHTML = `<div><div></div><div></div><div></div><div></div></div>`;
-    container.appendChild(this.node);
   }
 
   public Show(): void {

package/treb-embed/style/layout.scss

@@ -228,7 +228,7 @@
         justify-self: end;
         align-self: end;
 
-        border: .5rem solid var(--treb-resize-handle-color, blue);
+        border: .5rem solid var(--treb-resize-handle-color, #0059B9);
         border-top-color: transparent;
         border-left-color: transparent;
 

package/treb-export/src/drawing2/chart2.ts

@@ -169,7 +169,11 @@ export class Chart {
         }
       }
 
-      series['c:spPr']['a:ln']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+      // "accent7" will break 
+
+      if (i < 6) {
+        series['c:spPr']['a:ln']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+      }
 
       series['c:yVal']['c:numRef']['c:f'] = this.options.data[i]?.label;
 
@@ -255,7 +259,12 @@ export class Chart {
 
         series['c:idx'] = { a$: { val: i.toString() }};
         series['c:order'] = { a$: { val: i.toString() }};
-        series['c:spPr']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+
+        // "accent7" will break 
+
+        if (i < 6) {
+          series['c:spPr']['a:solidFill']['a:schemeClr'].a$['val'] = `accent${i+1}`;
+        }
 
         if (!i && this.options.labels) {
           series['c:cat'] = {

package/treb-export/src/export-worker/export-worker.ts

@@ -40,19 +40,6 @@ const ExportSheets = async (data: any) => {
     ctx.postMessage({ status: 'complete', blob: corrected });
   }
 
-  /*
-  if (data.sheet) {
-    await exporter.Init();
-    await exporter.ExportSheets(data.sheet);
-    const blob = await exporter.AsBlob(1);
-
-    // correct the mime type for firefox
-    const corrected = (blob as Blob).slice(0, (blob as Blob).size,
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
-
-    ctx.postMessage({ status: 'complete', blob: corrected });
-  }
-  */
 };
 
 const ImportSheet = async (data: any) => {

package/treb-export/src/export2.ts

@@ -60,7 +60,7 @@ import { Chart } from './drawing2/chart2';
 import type { ImageOptions } from './drawing2/embedded-image';
 import type { TwoCellAnchor } from './drawing2/drawing2';
 import { Drawing } from './drawing2/drawing2';
-import type { TableDescription, TableFooterType } from './workbook2';
+import { ConditionalFormatOperators, type TableDescription, type TableFooterType } from './workbook2';
 import type { AnnotationData } from 'treb-grid/src/types/annotation';
 
 export class Exporter {
@@ -433,11 +433,67 @@ export class Exporter {
       };
     }
 
+    if (style_cache.dxf_styles.length) {
+      const dxf: any[] = [];
+      for (const style of style_cache.dxf_styles) {
+        const entry: any = {};
+        if (style.text || style.bold || style.italic || style.underline) {
+          const font: any = {};
+          if (style.text) {
+            font.color = { a$: {}};
+            if (style.text.text) {
+              font.color.a$.rgb = `FF` + style.text.text.substring(1);
+            }
+            else if (style.text.theme) {
+              font.color.a$.theme = style.text.theme;
+              if (style.text.tint) {
+                font.color.a$.tint = style.text.tint;
+              }
+            }
+          }
+          if (style.bold) {
+            font.b = {};
+          }
+          if (style.italic) {
+            font.i = {};
+          }
+          if (style.underline) {
+            font.u = {};
+          }
+          if (style.strike) {
+            font.strike = {};
+          }
+          entry.font = font;
+        }
+        if (style.fill) {
+          const color: any = { a$: {}};
+          if (style.fill.text) {
+            color.a$.rgb = `FF` + style.fill.text.substring(1);
+          }
+          else if (style.fill.theme) {
+            color.a$.theme = style.fill.theme;
+            if (style.fill.tint) {
+              color.a$.tint = style.fill.tint;
+            }
+          }
+          entry.fill = { patternFill: { bgColor: color }};
+        }
+        dxf.push(entry);
+      }
+
+      if (dxf.length) {
+        dom.styleSheet.dxfs = {
+          a$: { count: dxf.length },
+          dxf,
+        };
+      }
+
+    }
+
     // not used:
     //
     //  cellStyleXfs
     //  cellStyles
-    //  dxfs
     //  tableStyles
     
     // ------------
@@ -586,6 +642,9 @@ export class Exporter {
     // is this backwards, vis a vis our rendering? I think it might be...
     // YES: should be row pattern -> row -> column -> cell [corrected]
 
+    // FIXME: can't we just ask the sheet? (A: no, because we don't have 
+    // an actual sheet, although we could?)
+
     // if (sheet.row_style && sheet.row_style[row]) {
     //  list.push(sheet.row_style[row]);
     // }
@@ -1214,6 +1273,7 @@ export class Exporter {
           },
           dataValidations: {},
           hyperlinks: {},
+          conditionalFormatting: {},
           pageMargins: {
             a$: {
               left: 0.7,
@@ -1981,6 +2041,135 @@ export class Exporter {
 
       }
 
+      // --- conditional formats -----------------------------------------------
+
+      if (sheet.conditional_formats?.length) {
+        const conditionalFormatting: any[] = [];
+        let priority_index = 1;
+
+        const reverse_operator_map: Record<string, string> = {};
+        const operator_list: string[] = Object.entries(ConditionalFormatOperators).map(entry => {
+          reverse_operator_map[entry[1]] = entry[0]; 
+          return entry[1];
+        });
+        
+        operator_list.sort((a, b) => b.length - a.length);
+
+        for (const format of sheet.conditional_formats) {
+
+          let dxf_index = 0;
+
+          if (format.type !== 'gradient') {
+
+            // these are zero-based? I thought everything in there 
+            // was 1-based. [A: yes, these are indexed from 0].
+
+            dxf_index = style_cache.dxf_styles.length;
+            style_cache.dxf_styles.push(format.style);
+
+          }
+
+          switch (format.type) {
+            case 'cell-match':
+              {
+                let operator = '';
+                let formula = '';
+
+                for (const test of operator_list) {
+                  if (new RegExp('^' + test + '\\s').test(format.expression)) {
+                    operator = reverse_operator_map[test];
+                    formula = format.expression.substring(test.length).trim();
+                    break;
+                  }
+                }
+                if (operator) {
+
+                  conditionalFormatting.push({
+                    a$: { sqref: new Area(format.area.start, format.area.end).spreadsheet_label },
+                    cfRule: {
+                      a$: { type: 'cellIs', dxfId: dxf_index, operator, priority: priority_index++ },
+                      formula,
+                    }
+                  });
+                }
+              }
+              break;
+
+            case 'expression':
+              conditionalFormatting.push({
+                a$: { sqref: new Area(format.area.start, format.area.end).spreadsheet_label },
+                cfRule: {
+                  a$: { type: 'expression', dxfId: dxf_index, priority: priority_index++ },
+                  formula: format.expression,
+                }
+              });
+              break;
+
+            case 'duplicate-values':
+              conditionalFormatting.push({
+                a$: { sqref: new Area(format.area.start, format.area.end).spreadsheet_label },
+                cfRule: {
+                  a$: { type: format.unique ? 'uniqueValues' : 'duplicateValues', dxfId: dxf_index, priority: priority_index++ },
+                }
+              });
+              break;
+
+            case 'gradient':
+              {
+                let cfvo: any[] = [];
+                let color: any[] = [];
+
+                for (const stop of format.stops) {
+                  if (stop.value === 0) {
+                    cfvo.push({ a$: { type: 'min' }}); 
+                  }
+                  else if (stop.value === 1) {
+                    cfvo.push({ a$: { type: 'max' }}); 
+                  }
+                  else {
+                    cfvo.push({ a$: { type: 'percentile', val: stop.value * 100 }}); 
+                  }
+                  const stop_color: any = { a$: {}};
+                  if (stop.color.text) {
+                    stop_color.a$.rgb = 'FF' + stop.color.text.substring(1);
+                  }
+                  else if (stop.color.theme) {
+                    stop_color.a$.theme = stop.color.theme;
+                    stop_color.a$.tint = stop.color.tint || undefined;
+                  }
+                  color.push(stop_color);
+                }
+
+                const generated = {
+                  a$: { sqref: new Area(format.area.start, format.area.end).spreadsheet_label },
+                  cfRule: {
+                    a$: { type: 'colorScale', priority: priority_index++ },
+                    colorScale: {
+                      cfvo,
+                      color,
+                    }
+                  } 
+                };
+
+                conditionalFormatting.push(generated);
+
+              }
+              break;
+          }
+        }
+
+        if (conditionalFormatting.length) {
+          dom.worksheet.conditionalFormatting = (conditionalFormatting.length > 1) ? conditionalFormatting : conditionalFormatting[0];
+        }
+        else {
+          delete dom.worksheet.conditionalFormatting;
+        }
+
+      }
+      else {
+        delete dom.worksheet.conditionalFormatting;
+      }
+
       // --- merges ------------------------------------------------------------
 
       if (merges.length) {
@@ -2152,6 +2341,12 @@ export class Exporter {
         delete dom.worksheet.drawing;
       }
 
+      // --- move page margins -------------------------------------------------
+
+      // const margins = dom.worksheet.pageMargins;
+      // delete dom.worksheet.pageMargins;
+      // dom.worksheet.pageMargins = margins;
+
       // --- end? --------------------------------------------------------------
 
       // it seems like chrome, at least, will maintain order. but this is 

package/treb-export/src/import2.ts

@@ -23,12 +23,12 @@
 import JSZip from 'jszip';
 
 import type { AnchoredChartDescription} from './workbook2';
-import { ChartType, Workbook } from './workbook2';
+import { ChartType, ConditionalFormatOperators, Workbook } from './workbook2';
 import type { ParseResult } from 'treb-parser';
 import { Parser } from 'treb-parser';
 import type { RangeType, AddressType, HyperlinkType } from './address-type';
 import { is_range, ShiftRange, InRange, is_address } from './address-type';
-import type { ImportedSheetData, AnchoredAnnotation, CellParseResult, AnnotationLayout, Corner as LayoutCorner, ICellAddress, DataValidation, IArea } from 'treb-base-types/src';
+import type { ImportedSheetData, AnchoredAnnotation, CellParseResult, AnnotationLayout, Corner as LayoutCorner, ICellAddress, DataValidation, IArea, GradientStop, Color } from 'treb-base-types/src';
 import { type ValueType, ValidationType, type SerializedValueType } from 'treb-base-types/src';
 import type { Sheet} from './workbook-sheet2';
 import { VisibleState } from './workbook-sheet2';
@@ -37,7 +37,7 @@ import { XMLUtils } from './xml-utils';
 
 // import { one_hundred_pixels } from './constants';
 import { ColumnWidthToPixels } from './column-width';
-import type { AnnotationType } from 'treb-grid';
+import type { AnnotationType, ConditionalFormat } from 'treb-grid';
 
 interface SharedFormula {
   row: number;
@@ -320,6 +320,151 @@ export class Importer {
 
   }
 
+  public AddressToArea(address: RangeType|AddressType): IArea {
+
+    const area: IArea = is_address(address) ? {
+      start: { row: address.row - 1, column: address.col - 1 },
+      end: { row: address.row - 1, column: address.col - 1 },
+    } : {
+      start: { row: address.from.row - 1, column: address.from.col - 1 },
+      end: { row: address.to.row - 1, column: address.to.col - 1 },
+    };
+
+    return area;
+
+  }
+
+  public ParseConditionalFormat(address: RangeType|AddressType, rule: any): ConditionalFormat|undefined {
+
+    const area = this.AddressToArea(address);
+    const operators = ConditionalFormatOperators;
+
+    switch (rule.a$.type) {
+      case 'duplicateValues':
+      case 'uniqueValues':
+
+        let style = {};
+
+        if (rule.a$.dxfId) {
+          const index = Number(rule.a$.dxfId);
+          if (!isNaN(index)) {
+            style = this.workbook?.style_cache.dxf_styles[index] || {};
+          }
+        }
+
+        return {
+          type: 'duplicate-values',
+          area,
+          style,
+          unique: (rule.a$.type === 'uniqueValues'),
+        };
+
+      case 'cellIs':
+        if (rule.a$.operator && rule.formula) {
+          let style = {};
+
+          if (rule.a$.dxfId) {
+            const index = Number(rule.a$.dxfId);
+            if (!isNaN(index)) {
+              style = this.workbook?.style_cache.dxf_styles[index] || {};
+            }
+          }
+
+          const operator = operators[rule.a$.operator || ''];
+
+          if (!operator) {
+            console.info('unhandled cellIs operator:', rule.a$.operator);
+          }
+          else {
+            return {
+              type: 'cell-match',
+              expression: operator + ' ' + rule.formula,
+              area,
+              style,
+            };
+          }
+
+        }
+        break;
+
+      case 'expression':
+        if (rule.formula) {
+          let style = {};
+          
+          if (rule.a$.dxfId) {
+            const index = Number(rule.a$.dxfId);
+            if (!isNaN(index)) {
+              style = this.workbook?.style_cache.dxf_styles[index] || {};
+            }
+          }
+
+          return {
+            type: 'expression',
+            expression: rule.formula,
+            area,
+            style,
+          };
+
+        }
+        break;
+
+      case 'colorScale':
+        if (rule.colorScale && Array.isArray(rule.colorScale.cfvo) && Array.isArray(rule.colorScale.color)) {
+
+          const stops: GradientStop[] = [];
+          for (const [index, entry] of rule.colorScale.cfvo.entries()) {
+            let value = 0;
+            let color: Color = {};
+
+            const color_element = rule.colorScale.color[index];
+            if (color_element.a$.rgb) {
+              color.text = '#' + color_element.a$.rgb.substring(2);
+            } 
+            else if (color_element.a$.theme) {
+              color.theme = Number(color_element.a$.theme) || 0;
+              if (color_element.a$.tint) {
+                color.tint = Math.round(color_element.a$.tint * 1000) / 1000;
+              }
+            }           
+
+            switch (entry.a$.type) {
+              case 'min':
+                value = 0;
+                break;
+
+              case 'max':
+                value = 1;
+                break;
+
+              case 'percentile':
+                value = (Number(entry.a$.val) || 0) / 100;
+                break;
+            }
+
+            stops.push({ color, value });
+
+          }
+
+          return {
+            type: 'gradient',
+            stops,
+            color_space: 'RGB',
+            area,
+          };
+
+        }
+        else {
+          console.info('unexpected colorScale', {rule});
+        }
+        break;
+
+      default:
+        console.info('unhandled cf type:', {rule});
+    }
+
+    return undefined;
+  }
+
   public async GetSheet(index = 0): Promise<ImportedSheetData> {
 
     if (!this.workbook) {
@@ -337,6 +482,7 @@ export class Importer {
     const shared_formulae: {[index: string]: SharedFormula} = {};
     const arrays: RangeType[] = [];
     const merges: RangeType[] = [];
+    const conditional_formats: ConditionalFormat[] = [];
     const links: HyperlinkType[] = [];
     const validations: Array<{
       address: ICellAddress,
@@ -344,8 +490,26 @@ export class Importer {
     }> = [];
     const annotations: AnchoredAnnotation[] = [];
 
-    const FindAll = XMLUtils.FindAll.bind(XMLUtils, sheet.sheet_data);
+    const FindAll: (path: string) => any[] = XMLUtils.FindAll.bind(XMLUtils, sheet.sheet_data);
+
+    // conditionals 
 
+    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);
+            }
+          }
+        }
+      }
+    }
+    
     // merges
 
     const merge_cells = FindAll('worksheet/mergeCells/mergeCell');
@@ -878,6 +1042,7 @@ export class Importer {
       column_widths,
       row_heights,
       annotations,
+      conditional_formats,
       styles: this.workbook?.style_cache?.CellXfToStyles() || [],
     };
 

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

@@ -22,7 +22,7 @@
 // import * as ElementTree from 'elementtree';
 // import { Element, ElementTree as Tree } from 'elementtree';
 
-import { type CompositeBorderEdge, Style, type CellStyle, type PropertyKeys } from 'treb-base-types';
+import { type CompositeBorderEdge, Style, type CellStyle, type PropertyKeys, type Color } from 'treb-base-types';
 import { Theme } from './workbook-theme2';
 import { NumberFormatCache } from 'treb-format';
 import { XMLUtils } from './xml-utils';
@@ -202,6 +202,7 @@ export class StyleCache {
   public fills: Fill[] = [];
   public number_formats: NumberFormat[] = [];
   public base_number_format_id = 200; // ?
+  public dxf_styles: CellStyle[] = [];
 
   // public dom?: Tree;
 
@@ -423,17 +424,18 @@ export class StyleCache {
       fill.pattern_type = 'solid';
       if (composite.fill.text) {
         fill.fg_color = { argb: composite.fill.text };  
+        options.fill = fill;
       }
       else if (typeof composite.fill.theme === 'number') {
         fill.fg_color = { theme: composite.fill.theme };
         if (composite.fill.tint) {
           fill.fg_color.tint = composite.fill.tint;
         }
+        options.fill = fill;
       }
       else {
-        fill.fg_color = { theme: 1 };
+        // fill.fg_color = { theme: 1 };
       }
-      options.fill = fill;
     }
 
     if (composite.wrap) {
@@ -1197,9 +1199,7 @@ export class StyleCache {
 
     // ---
 
-    composite = FindAll('styleSheet/fills/fill');
-
-    this.fills = composite.map(element => {
+    const ParseFill = (element: any) => {
 
       const fill: Fill = { pattern_type: 'none' };
       if (element.patternFill) {
@@ -1236,13 +1236,15 @@ export class StyleCache {
 
       return fill;
 
-    });
+    };
 
-    // ---
+    composite = FindAll('styleSheet/fills/fill');
 
-    composite = FindAll('styleSheet/fonts/font');
+    this.fills = composite.map(ParseFill);
 
-    this.fonts = composite.map(element => {
+    // ---
+
+    const ParseFont = (element: any) => {
 
       const font: Font = {};
 
@@ -1278,8 +1280,55 @@ export class StyleCache {
 
       return font;
 
+    };
+
+    composite = FindAll('styleSheet/fonts/font');
+    this.fonts = composite.map(ParseFont);
+
+    // dxfs (differential formats) are inline. because reasons? not sure
+    // what's allowed in there, atm we're just looking at font color and 
+    // background color.
+
+    const ParseDXFColor = (element: any) => {
+      const color: Color = {};
+      if (element.a$.rgb) {
+        color.text = '#' + element.a$.rgb.substring(2);
+      }
+      else if (element.a$.theme) {
+        color.theme = Number(element.a$.theme) || 0;
+        if (element.a$.tint) {
+          color.tint = Math.round(element.a$.tint * 1000) / 1000;
+        }
+      }
+      return color;
+    };
+
+    const dxfs = FindAll('styleSheet/dxfs/dxf');
+    this.dxf_styles = dxfs.map(dxf => {
+
+      const style: CellStyle = {};
+
+      // dxf fonts are different too? this is irritating
+
+      if (dxf.font) {
+        style.bold = !!dxf.font.b;
+        style.italic = !!dxf.font.i && dxf.font.i.a$.val !== '0';
+      }
+
+      // dxfs fills are different? anyway we can't reuse the above code for fill, just grab the color
+     
+      if (dxf.font?.color?.a$) {
+        style.text = ParseDXFColor(dxf.font.color);
+      }
+      if (dxf.fill?.patternFill?.bgColor?.a$) {
+        style.fill = ParseDXFColor(dxf.fill.patternFill.bgColor);
+      }
+
+      return style;
     });
 
+    // console.info({dxfs: this.dxf_styles});
+
   }
 
 }

package/treb-export/src/workbook2.ts

@@ -54,6 +54,15 @@ const XMLTypeMap = {
 };
 */
 
+export const ConditionalFormatOperators: Record<string, string> = {
+  greaterThan: '>',
+  greaterThanOrEquals: '>=',
+  lessThan: '<',
+  lessThanOrEquals: '<=',
+  equal: '=',
+  notEqual: '<>',
+};
+
 export enum ChartType {
   Unknown = 0, Column, Bar, Line, Scatter, Donut, Pie
 }
@@ -180,7 +189,7 @@ export class Workbook {
     xml = xmlparser2.parse(data);
     this.style_cache.FromXML(xml, this.theme);
 
-    console.info({c: this.style_cache});
+    // console.info({c: this.style_cache});
 
     // read workbook
     data = await this.zip.file('xl/workbook.xml')?.async('text') as string;