@trebco/treb 27.5.3 → 27.9.0

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

@@ -127,6 +127,8 @@
         overflow-y: hidden;
         overflow-x: hidden;
 
+        white-space: pre-wrap;
+
         /** 
          * 1.35 is better on safari, seems like a wash on windows.
          * can we browser-limit this? (...)

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

@@ -31,27 +31,43 @@
 $primary-selection-color: #4caaf1;
 $primary-selection-color-unfocused: #acc0cf;
 
-
+/*
 $alternate-selection-color-1: rgb(251, 177, 60);
-//$alternate-selection-color-2: rgb(87, 184, 255);
 $alternate-selection-color-2: rgb(64, 192, 64);
 $alternate-selection-color-3: rgb(182, 109, 13);
 $alternate-selection-color-4: rgb(33, 118, 174);
 $alternate-selection-color-5: rgb(254, 104, 71);
 
-/**
+/ * *
  * slightly darkening colors for text highlighting
  * algo: convert to HSL; if L > .5, regenerate with L = .5; back to RGB (why?)
- */
+ * /
 $text-reference-color-1: rgb(250, 155, 5);
-//$text-reference-color-2: rgb(0, 147, 255);
 $text-reference-color-2: rgb(58, 173, 58);
 $text-reference-color-3: rgb(182, 109, 13);
 $text-reference-color-4: rgb(33, 118, 174);
 $text-reference-color-5: rgb(254, 47, 1);
+*/
 
 .treb-main.treb-main {
 
+  --alternate-selection-color-1: rgb(251, 177, 60);
+  --alternate-selection-color-2: rgb(64, 192, 64);
+  --alternate-selection-color-3: rgb(182, 109, 13);
+  --alternate-selection-color-4: rgb(33, 118, 174);
+  --alternate-selection-color-5: rgb(254, 104, 71);
+  
+  /**
+   * slightly darkening colors for text highlighting
+   * algo: convert to HSL; if L > .5, regenerate with L = .5; back to RGB (why?)
+   */
+  --text-reference-color-1: rgb(224, 138, 0);
+  --text-reference-color-2: rgb(58, 173, 58);
+  --text-reference-color-3: rgb(182, 109, 13);
+  --text-reference-color-4: rgb(33, 118, 174);
+  --text-reference-color-5: rgb(254, 47, 1);
+  
+
   /** 
    * move primary selection focus color to focus-within on the top-level 
    * node, and use a (new) unfocused selection color. name?
@@ -284,29 +300,39 @@ $text-reference-color-5: rgb(254, 47, 1);
   .treb-editor-container>div,
   .treb-overlay-editor {
 
+    [data-highlight-index="1"] { color: var(--text-reference-color-1); }
+    [data-highlight-index="2"] { color: var(--text-reference-color-2); }
+    [data-highlight-index="3"] { color: var(--text-reference-color-3); }
+    [data-highlight-index="4"] { color: var(--text-reference-color-4); }
+    [data-highlight-index="5"] { color: var(--text-reference-color-5); }
+
     /* span:nth-of-type(1n) { */
     span.highlight-1 {
-      color: $text-reference-color-1;
+      color: var(--text-reference-color-1);
     }
 
     /* span:nth-of-type(2n) { */
     span.highlight-2 {
-      color: $text-reference-color-2;
+      // color: $text-reference-color-2;
+      color: var(--text-reference-color-2);
     }
 
     /* span:nth-of-type(3n) { */
     span.highlight-3 {
-      color: $text-reference-color-3;
+      // color: $text-reference-color-3;
+      color: var(--text-reference-color-3);
     }
 
     /* span:nth-of-type(4n) { */
     span.highlight-4 {
-      color: $text-reference-color-4;
+      // color: $text-reference-color-4;
+      color: var(--text-reference-color-4);
     }
 
     /* span:nth-of-type(5n) { */
     span.highlight-5 {
-      color: $text-reference-color-5;
+      // color: $text-reference-color-5;
+      color: var(--text-reference-color-5);
     }
 
   }
@@ -339,23 +365,28 @@ $text-reference-color-5: rgb(254, 47, 1);
     }
 
     .alternate-selection:nth-of-type(1n) {
-      color: $alternate-selection-color-1;
+      // color: $alternate-selection-color-1;
+      color: var(--alternate-selection-color-1);
     }
 
     .alternate-selection:nth-of-type(2n) {
-      color: $alternate-selection-color-2;
+      // color: $alternate-selection-color-2;
+      color: var(--alternate-selection-color-2);
     }
 
     .alternate-selection:nth-of-type(3n) {
-      color: $alternate-selection-color-3;
+      // color: $alternate-selection-color-3;
+      color: var(--alternate-selection-color-3);
     }
 
     .alternate-selection:nth-of-type(4n) {
-      color: $alternate-selection-color-4;
+      // color: $alternate-selection-color-4;
+      color: var(--alternate-selection-color-4);
     }
 
     .alternate-selection:nth-of-type(5n) {
-      color: $alternate-selection-color-5;
+      // color: $alternate-selection-color-5;
+      color: var(--alternate-selection-color-5);
     }
 
     /** 

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
     
     // ------------
@@ -1981,6 +2037,129 @@ 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];
+        }
+        
+      }
+
       // --- merges ------------------------------------------------------------
 
       if (merges.length) {
@@ -2152,6 +2331,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;
 
@@ -1197,9 +1198,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 +1235,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 +1279,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});
+
   }
 
 }