@trebco/treb 32.4.1 → 32.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "32.4.1",
+  "version": "32.5.0",
   "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.24.0",
+    "esbuild": "^0.25.0",
     "eslint": "^9.9.1",
     "fast-xml-parser": "^4.0.7",
     "html-minifier-terser": "^7.2.0",

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

@@ -1532,9 +1532,9 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
   }
 
   /**
-   * @internal
+   * 
    */
-  public ConditionalFormatDataBar(range: RangeReference|undefined, options?: ConditionalFormatDataBarOptions): ConditionalFormat {
+  public ConditionalFormatDataBars(range: RangeReference|undefined, options?: ConditionalFormatDataBarOptions): ConditionalFormat {
 
     const area = this.RangeOrSelection(range, 'invalid range (no selection)');
 

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

@@ -68,6 +68,7 @@
     & .treb-spreadsheet-tabs>li {
       display: inline-block;
       position: relative;
+      margin: 0;
     }
 
     & .treb-spreadsheet-tabs>li,

package/treb-export/src/{drawing2/drawing2.ts → drawing/drawing.ts}

@@ -21,8 +21,8 @@
 
 import type { ImageOptions } from './embedded-image';
 import { EmbeddedImage } from './embedded-image';
-import type { ChartOptions} from './chart2';
-import { Chart} from './chart2';
+import type { ChartOptions} from './chart';
+import { Chart} from './chart';
 import type { RelationshipMap} from '../relationship';
 import { AddRel } from '../relationship';
 import type { DOMContent } from '../xml-utils';

package/treb-export/src/export.ts

@@ -44,10 +44,10 @@ import { Area, Cells, ValueType, Style, IsHTMLColor, IsThemeColor, ThemeColorInd
 import type { XmlBuilderOptions} from 'fast-xml-parser';
 import { XMLParser } from 'fast-xml-parser';
 
-import { SharedStrings } from './shared-strings2';
-import type { XlColor, BorderEdge } from './workbook-style2';
-import { StyleCache } from './workbook-style2';
-import { Theme } from './workbook-theme2';
+import { SharedStrings } from './shared-strings';
+import type { XlColor, BorderEdge } from './workbook-style';
+import { StyleCache } from './workbook-style';
+import { Theme } from './workbook-theme';
 
 import type { RelationshipMap} from './relationship';
 import { AddRel } from './relationship';
@@ -57,12 +57,12 @@ import type { UnitAddress, UnitRange, ExpressionUnit} from 'treb-parser';
 import { Parser } from 'treb-parser';
 
 // FIXME: move
-import type { ChartOptions } from './drawing2/chart2';
-import { Chart } from './drawing2/chart2';
-import type { ImageOptions } from './drawing2/embedded-image';
-import type { TwoCellAnchor } from './drawing2/drawing2';
-import { Drawing } from './drawing2/drawing2';
-import { ConditionalFormatOperators, type TableDescription, type TableFooterType } from './workbook2';
+import type { ChartOptions } from './drawing/chart';
+import { Chart } from './drawing/chart';
+import type { ImageOptions } from './drawing/embedded-image';
+import type { TwoCellAnchor } from './drawing/drawing';
+import { Drawing } from './drawing/drawing';
+import { ConditionalFormatOperators, type TableDescription, type TableFooterType } from './workbook';
 import type { AnnotationData } from 'treb-data-model/src/annotation';
 import { ZipWrapper } from './zip-wrapper';
 
@@ -179,7 +179,7 @@ export class Exporter {
     }
 
     const parsed = Base64JS.toByteArray(template);
-    this.zip = new ZipWrapper(parsed);
+    this.zip = new ZipWrapper(parsed.buffer as ArrayBuffer);
 
   }
 

package/treb-export/src/import.ts

@@ -24,17 +24,17 @@
 // import UZip from 'uzip';
 import Base64JS from 'base64-js';
 
-import type { AnchoredChartDescription, AnchoredImageDescription, AnchoredTextBoxDescription} from './workbook2';
-import { ChartType, ConditionalFormatOperators, Workbook } from './workbook2';
+import type { AnchoredChartDescription, AnchoredImageDescription, AnchoredTextBoxDescription} from './workbook';
+import { ChartType, ConditionalFormatOperators, Workbook } from './workbook';
 import type { ParseResult } from 'treb-parser';
 import { DecimalMarkType, 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, type AnchoredAnnotation, type CellParseResult, type AnnotationLayout, type Corner as LayoutCorner, type IArea, type GradientStop, type Color, type HTMLColor, type ThemeColor, Area } from 'treb-base-types';
 import type { SerializedValueType } from 'treb-base-types';
-import type { Sheet} from './workbook-sheet2';
-import { VisibleState } from './workbook-sheet2';
-import type { CellAnchor } from './drawing2/drawing2';
+import type { Sheet} from './workbook-sheet';
+import { VisibleState } from './workbook-sheet';
+import type { CellAnchor } from './drawing/drawing';
 import { type GenericDOMElement, XMLUtils } from './xml-utils';
 
 // import { one_hundred_pixels } from './constants';
@@ -79,7 +79,26 @@ interface ConditionalFormatRule {
     priority?: string;
     operator?: string;
   };
+
   formula?: string|[number,number]|{t$: string};
+
+  dataBar?: {
+    a$?: {
+      showValue?: string;
+    },
+    color?: {
+      a$: {
+        rgb?: string;
+      }
+    }
+  }
+  
+  extLst?: {
+    ext?: {
+      'x14:id'?: string;
+    }
+  }
+
   colorScale?: {
     cfvo?: {
       a$: {
@@ -383,7 +402,7 @@ export class Importer {
 
   }
 
-  public ParseConditionalFormat(address: RangeType|AddressType, rule: ConditionalFormatRule): ConditionalFormat|ConditionalFormat[]|undefined {
+  public ParseConditionalFormat(address: RangeType|AddressType, rule: ConditionalFormatRule, extensions?: any[]): ConditionalFormat|ConditionalFormat[]|undefined {
 
     const area = this.AddressToArea(address);
     const operators = ConditionalFormatOperators;
@@ -543,6 +562,44 @@ export class Importer {
         }
         break;
 
+      case 'dataBar':
+        {
+          const hide_values = (rule.dataBar?.a$?.showValue === '0');
+          let extension: any = undefined;
+
+          if (rule.extLst?.ext?.['x14:id']) {
+            for (const test of (extensions || [])) {
+              if (test['x14:cfRule']?.a$?.id === rule.extLst.ext['x14:id']) {
+                extension = test;
+                break;
+              }
+            }
+            if (!extension) {
+              console.info("conditional format extension not found");
+            }
+          }
+
+          if (rule.dataBar?.color?.a$?.rgb) {
+
+            let negative: Color|undefined = undefined;
+
+            if (extension?.['x14:cfRule']?.['x14:dataBar']?.['x14:negativeFillColor']?.a$?.rgb) {
+              const rgb = extension['x14:cfRule']['x14:dataBar']['x14:negativeFillColor'].a$.rgb;
+              negative = { text: '#' + rgb.toString().substring(2) };
+            }
+
+            const fill: Color = { text: '#' + rule.dataBar.color.a$.rgb.substring(2) };
+            return {
+              type: 'data-bar',
+              area,
+              fill,
+              hide_values,
+              negative,
+            };
+          }
+        }
+        break;
+
       case 'colorScale':
         if (rule.colorScale && Array.isArray(rule.colorScale.cfvo) && Array.isArray(rule.colorScale.color)) {
 
@@ -665,6 +722,11 @@ export class Importer {
     // conditionals 
 
     const conditional_formatting = FindAll('worksheet/conditionalFormatting');
+
+    // we might need extensions as well? TODO
+
+    const conditional_formattings = FindAll('worksheet/extLst/ext/x14:conditionalFormattings/x14:conditionalFormatting');
+
     for (const element of conditional_formatting) {
       if (element.a$?.sqref ){
 
@@ -678,7 +740,7 @@ export class Importer {
           if (element.cfRule) {
             const rules = Array.isArray(element.cfRule) ? element.cfRule : [element.cfRule];
             for (const rule of rules) {
-              const format = this.ParseConditionalFormat(area, rule as unknown as ConditionalFormatRule);
+              const format = this.ParseConditionalFormat(area, rule as unknown as ConditionalFormatRule, conditional_formattings);
               if (format) {
                 if (Array.isArray(format)) {
                   conditional_formats.push(...format);

package/treb-export/src/{workbook-sheet2.ts → workbook-sheet.ts}

@@ -43,8 +43,8 @@
 
 import type { AddressType, RangeType} from './address-type';
 import { is_range } from './address-type';
-import type { SharedStrings } from './shared-strings2';
-import type { Drawing } from './drawing2/drawing2';
+import type { SharedStrings } from './shared-strings';
+import type { Drawing } from './drawing/drawing';
 import type { RelationshipMap } from './relationship';
 
 export interface SheetOptions {

package/treb-export/src/{workbook-style2.ts → workbook-style.ts}

@@ -23,7 +23,7 @@
 // import { Element, ElementTree as Tree } from 'elementtree';
 
 import { type CompositeBorderEdge, Style, type CellStyle, type PropertyKeys, type Color, IsHTMLColor, IsThemeColor, type ThemeColor, type HTMLColor, ThemeColorIndex } from 'treb-base-types';
-import { Theme } from './workbook-theme2';
+import { Theme } from './workbook-theme';
 import { NumberFormatCache } from 'treb-format';
 import { XMLUtils } from './xml-utils';
 

package/treb-export/src/{workbook-theme2.ts → workbook-theme.ts}

@@ -19,8 +19,6 @@
  * 
  */
 
-import { XMLUtils } from './xml-utils';
-
 export interface ColorSchemeElement {
   name?: string;
   value?: string;

package/treb-export/src/{workbook2.ts → workbook.ts}

@@ -28,15 +28,15 @@ const xmlparser2 = new XMLParser(XMLOptions2);
 
 // import * as he from 'he';
 
-import type { TwoCellAnchor, CellAnchor } from './drawing2/drawing2';
+import type { TwoCellAnchor, CellAnchor } from './drawing/drawing';
 
-import { SharedStrings } from './shared-strings2';
-import { StyleCache } from './workbook-style2';
-import { Theme } from './workbook-theme2';
-import { Sheet, VisibleState } from './workbook-sheet2';
+import { SharedStrings } from './shared-strings';
+import { StyleCache } from './workbook-style';
+import { Theme } from './workbook-theme';
+import { Sheet, VisibleState } from './workbook-sheet';
 import type { RelationshipMap } from './relationship';
 import { ZipWrapper } from './zip-wrapper';
-import type { CellStyle, ICellAddress, ThemeColor } from 'treb-base-types';
+import type { CellStyle, ThemeColor } from 'treb-base-types';
 import type { SerializedNamed } from 'treb-data-model';
 
 /**

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

@@ -1311,7 +1311,7 @@ export class Grid extends GridBase {
     }
 
     if (this.tab_bar) {
-      this.tab_bar.Update();
+      this.tab_bar.Update(false); // !user
     }
 
   }
@@ -1320,7 +1320,7 @@ export class Grid extends GridBase {
    * This function is called via Shift+PageUp/PageDown. We need
    * to update to account for hidden sheets, which can't be activated.
    */
-  public NextSheet(step = 1): void {
+  public NextSheet(step = 1, user = false): void {
 
     if (this.model.sheets.length === 1) {
       return;
@@ -1344,7 +1344,7 @@ export class Grid extends GridBase {
       if (visible[i].sheet === this.active_sheet) {
         let index = (i + step) % visible.length;
         while (index < 0) { index += visible.length; }
-        this.ActivateSheet(visible[index].index);
+        this.ActivateSheet(visible[index].index, user);
         return;
       }
     }
@@ -1430,7 +1430,7 @@ export class Grid extends GridBase {
     }
 
     if (this.tab_bar) {
-      this.tab_bar.Update();
+      this.tab_bar.Update(false); // !user
     }
 
   }
@@ -1453,7 +1453,7 @@ export class Grid extends GridBase {
    */
   public UpdateTabBar(): void {
     if (this.tab_bar) {
-      this.tab_bar.Update();
+      this.tab_bar.Update(true); // user? ...
     }
   }
 
@@ -1730,7 +1730,7 @@ export class Grid extends GridBase {
       //  this.tab_bar.Update(); 
       //}
 
-      this.tab_bar?.Update();
+      this.tab_bar?.Update(false);
 
       this.Repaint(true);
     }
@@ -2673,7 +2673,7 @@ export class Grid extends GridBase {
 
   protected RenameSheetInternal(target: Sheet, name: string) {
     super.RenameSheetInternal(target, name);
-    this.tab_bar?.Update();
+    this.tab_bar?.Update(false);
 
   }
 
@@ -2898,7 +2898,7 @@ export class Grid extends GridBase {
       activate: this.active_sheet,
     });
 
-    if (this.tab_bar) { this.tab_bar.Update(); }
+    if (this.tab_bar) { this.tab_bar.Update(!!command.user); }
 
     this.layout.scroll_offset = this.active_sheet.scroll_offset;
 
@@ -5237,7 +5237,7 @@ export class Grid extends GridBase {
         case 'PageUp':
         case 'PageDown':
           if (event.shiftKey) {
-            this.NextSheet(event.key === 'PageUp' ? -1 : 1);
+            this.NextSheet(event.key === 'PageUp' ? -1 : 1, true);
             break;
           }
 

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

@@ -254,7 +254,7 @@ export class GridBase {
    * activate sheet, by name or index number
    * @param sheet number (index into the array) or string (name)
    */
-  public ActivateSheet(sheet: number | string): void {
+  public ActivateSheet(sheet: number | string, user?: boolean): void {
 
     const index = (typeof sheet === 'number') ? sheet : undefined;
     const name = (typeof sheet === 'string') ? sheet : undefined;
@@ -263,6 +263,7 @@ export class GridBase {
       key: CommandKey.ActivateSheet,
       index,
       name,
+      user,
     });
 
   }

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

@@ -431,6 +431,9 @@ export interface ActivateSheetCommand extends SheetSelection {
   tab_bar_event?: boolean;
 
   force?: boolean;
+
+  /** user action; use smooth scrolling */
+  user?: boolean;
 }
 
 /**

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

@@ -235,7 +235,8 @@ export class TabBar extends EventSource<TabEvent> {
 
   }
 
-  public SetActive(tab: HTMLElement, active: boolean): void {
+  public SetActive(tab: HTMLElement, active: boolean, user = false): void {
+
     if (active) {
       // tab.classList.add('treb-selected');
       tab.setAttribute('selected', '');
@@ -245,8 +246,33 @@ export class TabBar extends EventSource<TabEvent> {
         tab.style.color = '';
       }
 
+      // this is forcing the page to scroll if the sheet is below
+      // the fold. this is not useful behavior. at the same time, 
+      // we do need this to work... we probably have to do it manually
+      // instead of using scrollIntoView. would be nice if we could
+      // toggle this on manual/auto, so user clicks would still be 
+      // smooth. call that a TODO
+
       requestAnimationFrame(() => {
-        tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest'});
+        if (user) {
+          tab.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest'});
+        }
+        else {
+          if (tab.parentElement) {
+            const left = tab.offsetLeft;
+            const width = tab.offsetWidth;
+            const container_width = tab.parentElement.clientWidth || 0;
+            const scroll_left = tab.parentElement.scrollLeft || 0;
+
+            if (left > container_width) {
+              tab.parentElement.scrollLeft = left - width;
+            }
+            else if (scroll_left > left) {
+              tab.parentElement.scrollLeft = left;
+            }
+
+          }
+        }
       });
 
     }
@@ -298,7 +324,7 @@ export class TabBar extends EventSource<TabEvent> {
         case 'Escape':
           tab.innerText = sheet.name;
           this.Publish({ type: 'cancel' });
-          this.Update();
+          this.Update(true);
           break;
 
         default:
@@ -314,7 +340,7 @@ export class TabBar extends EventSource<TabEvent> {
         this.Publish({ type: 'rename-sheet', name, sheet });
       }
       else {
-        this.Update();
+        this.Update(true);
       }
     });
 
@@ -350,7 +376,7 @@ export class TabBar extends EventSource<TabEvent> {
     // then the classes won't change.
 
     for (const candidate of tabs) {
-      this.SetActive(candidate, candidate === tab);
+      this.SetActive(candidate, candidate === tab, true);
     }
 
     this.dragging = true;
@@ -445,8 +471,11 @@ export class TabBar extends EventSource<TabEvent> {
 
   /**
    * update tabs from model.
+   * 
+   * @param user - this is a user action, so use smooth scrolling
+   * when activating the tab. otherwise it's automatic so jump.
    */
-  public Update(): void {
+  public Update(user = false): void {
 
     this.tab_color_cache.clear(); // we're setting tab color but it's not getting updated otherwise
 
@@ -512,7 +541,7 @@ export class TabBar extends EventSource<TabEvent> {
       tab.style.order = (index * 2).toString();
       tab.role = 'tab';
 
-      this.SetActive(tab, sheet === this.view.active_sheet);
+      this.SetActive(tab, sheet === this.view.active_sheet, user);
 
       const mousedown = (event: MouseEvent) => this.MouseDownTab(event, tab, sheet, index, tabs);