@trebco/treb 27.7.6 → 27.11.1

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

@@ -1,25 +1,25 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the 
- * terms of the GNU General Public License as published by the Free Software 
- * Foundation, either version 3 of the License, or (at your option) any 
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
- * details.
- *
- * You should have received a copy of the GNU General Public License along 
- * with TREB. If not, see <https://www.gnu.org/licenses/>. 
- *
- * Copyright 2022-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
-import { DOMUtilities } from '../util/dom_utilities';
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import { DOMUtilities } from 'treb-base-types';
 import type { Theme, Rectangle } from 'treb-base-types';
 import type { AutocompleteExecResult, DescriptorType } from './autocomplete_matcher';
 
@@ -76,7 +76,7 @@ export class Autocomplete {
 
     // this.scope = 'AC' + Math.round(Math.random() * Math.pow(10, 10)).toString(16);
 
-    this.completion_list = DOMUtilities.CreateDiv(
+    this.completion_list = DOMUtilities.Div(
       'treb-cell-editor-ac-list treb-autocomplete',
       options.container || document.body,
       ); // this.scope);
@@ -87,7 +87,7 @@ export class Autocomplete {
 
     this.completion_list.addEventListener('mousemove', (event) => this.ListMouseMove(event));
 
-    this.tooltip = DOMUtilities.CreateDiv('treb-cell-editor-ac-tooltip treb-autocomplete-tooltip',
+    this.tooltip = DOMUtilities.Div('treb-cell-editor-ac-tooltip treb-autocomplete-tooltip',
       options.container || document.body,
       ); // this.scope);
 
@@ -173,6 +173,10 @@ export class Autocomplete {
     this.active_element = undefined;
   }
 
+  public SetBlock(): void {
+    this.block = true;
+  }
+
   public ResetBlock(): void {
     this.block = false;
   }

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

@@ -34,7 +34,7 @@
  * 
  */
 
-import { Area, type IArea, type ICellAddress, IsCellAddress, Localization, type Theme, Rectangle, type Cell } from 'treb-base-types';
+import { Area, type IArea, type ICellAddress, IsCellAddress, Localization, type Theme, Rectangle, type Cell, DOMUtilities } from 'treb-base-types';
 import type { ExpressionUnit, ParseResult, UnitAddress, UnitRange } from 'treb-parser';
 import { Parser, QuotedSheetNameRegex } from 'treb-parser';
 import type { DataModel, ViewModel } from '../types/data_model';
@@ -291,7 +291,6 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
     super();
 
     this.parser = model.parser;
-    // this.measurement_node = document.createElement('div');
 
   }
 
@@ -866,13 +865,13 @@ export class Editor<E = FormulaEditorEvent> extends EventSource<E|FormulaEditorE
 
           if (type !== 'text') {
 
-            const span = document.createElement('span');
+            const span = DOMUtilities.Create('span', type);
 
             if (reference) {
               span.dataset.reference = reference;
             }
 
-            span.className = type;
+            // span.className = type;
             span.appendChild(text_node);
             fragment.appendChild(span);
 

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

@@ -25,7 +25,7 @@ import { Parser } from 'treb-parser';
 import type { DataModel, ViewModel } from '../types/data_model';
 import type { GridOptions } from '../types/grid_options';
 import { Autocomplete } from './autocomplete';
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 
 // --- from formula_bar ---
 

package/treb-grid/src/index.ts

@@ -39,4 +39,5 @@ export type { FunctionDescriptor, ArgumentDescriptor } from './editors/autocompl
 export { UA } from './util/ua';
 export type { SetRangeOptions } from './types/set_range_options';
 export type { AnnotationData, AnnotationType } from './types/annotation';
-export type { ExternalEditorConfig, DependencyList, ExternalEditorCallback } from './types/external_editor_config';
+export type { ExternalEditorConfig, DependencyList, ExternalEditorCallback } from './types/external_editor_config';
+export * from './types/conditional_format';

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

@@ -19,11 +19,11 @@
  * 
  */
 
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
 import type { Tile } from '../types/tile';
-import type { Theme, Point, Extent, Size, Position, ICellAddress, Table } from 'treb-base-types';
+import type { Theme, Point, Extent, Size, Position, ICellAddress, Table, IArea } from 'treb-base-types';
 import { Style, Area, Rectangle, ThemeColor } from 'treb-base-types';
 
 import { MouseDrag } from '../types/drag_mask';
@@ -46,8 +46,6 @@ import type { Annotation } from '../types/annotation';
 
 export { Area as TileRange } from 'treb-base-types';
 
-const SVGNS = 'http://www.w3.org/2000/svg';
-
 export interface TooltipOptions {
   up?: true;
   left?: true;
@@ -203,19 +201,16 @@ export abstract class BaseLayout {
     // contexts; the mask will be under the next sheet. so either
     // global in body, or instance local.
 
-    this.mask = // document.querySelector('.treb-mouse-mask'); // ||
-      DOMUtilities.CreateDiv('treb-mouse-mask');
-    this.tooltip = // document.querySelector('.treb-tooltip'); // ||
-      DOMUtilities.CreateDiv('treb-tooltip');
+    this.mask = DOMUtilities.Div('treb-mouse-mask');
+    this.tooltip = DOMUtilities.Div('treb-tooltip');
 
     // this.error_highlight = DOMUtilities.CreateDiv('treb-error-highlight');
 
-    this.dropdown_caret = document.createElementNS(SVGNS, 'svg') as SVGSVGElement;
-    this.dropdown_caret.setAttribute('class', 'treb-dropdown-caret');
+    this.dropdown_caret = DOMUtilities.SVG('svg', 'treb-dropdown-caret');
     this.dropdown_caret.setAttribute('viewBox', '0 0 24 24');
     this.dropdown_caret.tabIndex = -1;
 
-    const caret = document.createElementNS(SVGNS, 'path');
+    const caret =DOMUtilities.SVG('path');
     caret.setAttribute('d', 'M5,7 L12,17 L19,7');
     this.dropdown_caret.appendChild(caret);
 
@@ -252,7 +247,7 @@ export abstract class BaseLayout {
     });
     */
 
-    this.dropdown_list = DOMUtilities.CreateDiv('treb-dropdown-list');
+    this.dropdown_list = DOMUtilities.Div('treb-dropdown-list');
     this.dropdown_list.setAttribute('tabindex', '-1'); // focusable
 
     // this.dropdown_caret.addEventListener('keydown', (event) => {
@@ -351,11 +346,11 @@ export abstract class BaseLayout {
       this.dropdown_selected = target as HTMLElement;
     });
 
-    this.mock_selection = DOMUtilities.CreateDiv('mock-selection-node');
+    this.mock_selection = DOMUtilities.Div('mock-selection-node');
     this.mock_selection.innerHTML = ' ';
 
-    this.note_node = DOMUtilities.CreateDiv('treb-note');
-    this.title_node = DOMUtilities.CreateDiv('treb-hover-title');
+    this.note_node = DOMUtilities.Div('treb-note');
+    this.title_node = DOMUtilities.Div('treb-hover-title');
 
     this.sort_button = DOMUtilities.Create(
       'button', 
@@ -1199,7 +1194,7 @@ export abstract class BaseLayout {
     parent: HTMLElement,
     mark_dirty = true): Tile {
 
-    const tile = document.createElement('canvas') as Tile;
+    const tile = DOMUtilities.Create('canvas') as Tile;
     tile.setAttribute('class', classes);
     tile.logical_size = size;
     tile.width = size.width * this.dpr;
@@ -1408,7 +1403,7 @@ export abstract class BaseLayout {
 
     this.dropdown_list.textContent = '';
     for (const value of list) {
-      const entry = DOMUtilities.CreateDiv(undefined, this.dropdown_list);
+      const entry = DOMUtilities.Div(undefined, this.dropdown_list);
       if (current === value) {
         this.dropdown_selected = entry;
         entry.classList.add('selected');
@@ -2160,25 +2155,33 @@ export abstract class BaseLayout {
     }
   }
 
-  public DirtyArea(area: Area): void {
+  public DirtyArea(areas: IArea|IArea[]): void {
 
     if (!this.initialized) return;
 
-    const start = { row: 0, column: 0 };
-    const end = { row: this.grid_tiles[0].length - 1, column: this.grid_tiles.length - 1 };
-
-    if (area.start.column !== Infinity) {
-      start.column = end.column = this.TileIndexForColumn(area.start.column);
-      if (area.end.column !== area.start.column) end.column = this.TileIndexForColumn(area.end.column);
+    if (!Array.isArray(areas)) {
+      areas = [areas];
     }
-    if (area.start.row !== Infinity) {
-      start.row = end.row = this.TileIndexForRow(area.start.row);
-      if (area.end.row !== area.start.row) end.row = this.TileIndexForRow(area.end.row);
-    }
-    for (let column = start.column; column <= end.column; column++) {
-      for (let row = start.row; row <= end.row; row++) {
-        this.grid_tiles[column][row].dirty = true;
+
+    for (const area of areas) {
+
+      const start = { row: 0, column: 0 };
+      const end = { row: this.grid_tiles[0].length - 1, column: this.grid_tiles.length - 1 };
+
+      if (area.start.column !== Infinity) {
+        start.column = end.column = this.TileIndexForColumn(area.start.column);
+        if (area.end.column !== area.start.column) end.column = this.TileIndexForColumn(area.end.column);
+      }
+      if (area.start.row !== Infinity) {
+        start.row = end.row = this.TileIndexForRow(area.start.row);
+        if (area.end.row !== area.start.row) end.row = this.TileIndexForRow(area.end.row);
       }
+      for (let column = start.column; column <= end.column; column++) {
+        for (let row = start.row; row <= end.row; row++) {
+          this.grid_tiles[column][row].dirty = true;
+        }
+      }
+
     }
 
   }

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

@@ -21,10 +21,9 @@
 
 import { BaseLayout } from './base_layout';
 import type { Tile } from '../types/tile';
-import { DOMUtilities } from '../util/dom_utilities';
+import { DOMUtilities } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
-const SVGNS = 'http://www.w3.org/2000/svg';
 
 /**
  * we used to have two layouts, this one and a legacy layout for IE11.
@@ -42,47 +41,37 @@ export class GridLayout extends BaseLayout {
     // mask needs to get attached to a container, when it's
     // available
 
-    this.column_header = DOMUtilities.CreateDiv('treb-top-header');
-    this.row_header = DOMUtilities.CreateDiv('treb-left-header');
+    this.column_header = DOMUtilities.Div('treb-top-header');
+    this.row_header = DOMUtilities.Div('treb-left-header');
     
-    this.corner = DOMUtilities.CreateDiv('treb-corner');
-    this.corner_canvas = document.createElement('canvas');
+    this.corner = DOMUtilities.Div('treb-corner');
+    this.corner_canvas = DOMUtilities.Create('canvas');
     this.corner.appendChild(this.corner_canvas);
 
-    this.contents = DOMUtilities.CreateDiv('treb-contents');
+    this.contents = DOMUtilities.Div('treb-contents');
     this.buffer_canvas = DOMUtilities.Create('canvas', 'treb-buffer-canvas', this.contents);
 
     // selection node attached to contents
-    this.grid_selection = document.createElementNS(SVGNS, 'svg');
-    this.grid_selection.classList.add('treb-grid-selection');
-    this.contents.appendChild(this.grid_selection);
+    this.grid_selection = DOMUtilities.SVG('svg', 'treb-grid-selection', this.contents);
 
     // selection node for frozen rows
-    this.row_header_selection = document.createElementNS(SVGNS, 'svg');
-    this.row_header_selection.classList.add('frozen-selection');
-    this.row_header_selection.classList.add('frozen-selection-rows');
-    this.column_header.appendChild(this.row_header_selection);
-    this.row_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
+    this.row_header_selection = DOMUtilities.SVG('svg', ['frozen-selection', 'frozen-selection-rows'], this.column_header);
+    this.row_header_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
 
     // ...columns
-    this.column_header_selection = document.createElementNS(SVGNS, 'svg');
-    this.column_header_selection.classList.add('frozen-selection');
-    this.column_header_selection.classList.add('frozen-selection-columns');
-    this.row_header.appendChild(this.column_header_selection);
-    this.column_header_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
+    this.column_header_selection = DOMUtilities.SVG('svg', ['frozen-selection', 'frozen-selection-columns'], this.row_header);
+    this.column_header_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
 
     // ...corner
-    this.corner_selection = document.createElementNS(SVGNS, 'svg');
-    this.corner_selection.classList.add('frozen-selection');
-    this.corner.appendChild(this.corner_selection);
-    this.corner_annotations = DOMUtilities.CreateDiv('frozen-annotation-container frozen-annotation-container-corner', this.corner);
+    this.corner_selection = DOMUtilities.SVG('svg', 'frozen-selection', this.corner);
+    this.corner_annotations = DOMUtilities.Div('frozen-annotation-container frozen-annotation-container-corner', this.corner);
 
 
-    this.annotation_container = DOMUtilities.CreateDiv('treb-annotation-container');
+    this.annotation_container = DOMUtilities.Div('treb-annotation-container');
 
-    this.grid_cover = DOMUtilities.CreateDiv('tile-cover grid-cover');
-    this.column_header_cover = DOMUtilities.CreateDiv('tile-cover column-header-cover');
-    this.row_header_cover = DOMUtilities.CreateDiv('tile-cover row-header-cover');
+    this.grid_cover = DOMUtilities.Div('tile-cover grid-cover');
+    this.column_header_cover = DOMUtilities.Div('tile-cover column-header-cover');
+    this.row_header_cover = DOMUtilities.Div('tile-cover row-header-cover');
 
   }
 

package/treb-grid/src/render/selection-renderer.ts

@@ -20,7 +20,7 @@
  */
 
 import type { Theme, ICellAddress } from 'treb-base-types';
-import { Rectangle } from 'treb-base-types';
+import { DOMUtilities, Rectangle } from 'treb-base-types';
 import type { BaseLayout } from '../layout/base_layout';
 import type { SelectionOffset } from './svg_selection_block';
 import { SVGSelectionBlock } from './svg_selection_block';
@@ -302,8 +302,7 @@ export class SelectionRenderer {
 
         let group: SVGElement = node.querySelector('.alternate-selections') as SVGElement;
         if (!group) {
-          group = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-          group.setAttribute('class', 'alternate-selections');
+          group = DOMUtilities.SVG('g', 'alternate-selections');
           node.appendChild(group);
         }
         group?.appendChild(selection_block.g);

package/treb-grid/src/render/svg_header_overlay.ts

@@ -19,9 +19,7 @@
  * 
  */
 
-import type { Theme } from 'treb-base-types';
-
-const SVGNS = 'http://www.w3.org/2000/svg';
+import { DOMUtilities, type Theme } from 'treb-base-types';
 
 export enum Orientation {
   Horizontal,
@@ -39,14 +37,9 @@ export class HeaderOverlay {
       private container: SVGElement,
       private orientation: Orientation) {
 
-    this.g = document.createElementNS(SVGNS, 'g');
-    this.g.setAttribute('class', 'treb-header-overlay');
-
-    this.overlay = document.createElementNS(SVGNS, 'rect');
-    this.overlay.setAttribute('class', 'treb-overlay');
-
-    this.highlight = document.createElementNS(SVGNS, 'rect');
-    this.highlight.setAttribute('class', 'treb-highlight');
+    this.g = DOMUtilities.SVG('g', 'treb-header-overlay');
+    this.overlay = DOMUtilities.SVG('rect', 'treb-overlay');
+    this.highlight = DOMUtilities.SVG('rect', 'treb-highlight');
 
     this.g.style.display = 'none';
     this.g.appendChild(this.highlight);

package/treb-grid/src/render/svg_selection_block.ts

@@ -1,25 +1,25 @@
-/*
- * This file is part of TREB.
- *
- * TREB is free software: you can redistribute it and/or modify it under the 
- * terms of the GNU General Public License as published by the Free Software 
- * Foundation, either version 3 of the License, or (at your option) any 
- * later version.
- *
- * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
- * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
- * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
- * details.
- *
- * You should have received a copy of the GNU General Public License along 
- * with TREB. If not, see <https://www.gnu.org/licenses/>. 
- *
- * Copyright 2022-2023 trebco, llc. 
- * info@treb.app
- * 
- */
-
-import type { Theme, Rectangle } from 'treb-base-types';
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2023 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+import { type Theme, type Rectangle, DOMUtilities } from 'treb-base-types';
 
 /**
  * the original selections -- a canvas overlaid over the tile canvases --
@@ -30,8 +30,6 @@ import type { Theme, Rectangle } from 'treb-base-types';
  * attributes.
  */
 
-const SVGNS = 'http://www.w3.org/2000/svg';
-
 export interface SelectionOffset {
   x: number;
   y: number;
@@ -48,11 +46,10 @@ export class SVGSelectionBlock {
                private theme: Theme,
                private offset: SelectionOffset = {x: 0, y: 0}) {
 
-    this.g = document.createElementNS(SVGNS, 'g');
+    this.g = DOMUtilities.SVG('g');
     this.g.setAttribute('transform', `translate(${offset.x}, ${offset.y})`);
     
-    this.outline = document.createElementNS(SVGNS, 'rect');
-    this.outline.setAttribute('class', 'outline');
+    this.outline = DOMUtilities.SVG('rect', 'outline');
 
     if (primary) {
 
@@ -61,11 +58,8 @@ export class SVGSelectionBlock {
       // primary selections have a separate fill, plus the nub. separate
       // fill because the "target" is unfilled.
 
-      this.fill = document.createElementNS(SVGNS, 'path');
-      this.fill.setAttribute('class', 'fill');
-
-      this.nub = document.createElementNS(SVGNS, 'rect');
-      this.nub.setAttribute('class', 'nub');
+      this.fill = DOMUtilities.SVG('path', 'fill');
+      this.nub = DOMUtilities.SVG('rect', 'nub');
 
       this.g.appendChild(this.fill);
       this.g.appendChild(this.outline);
@@ -81,8 +75,7 @@ export class SVGSelectionBlock {
       // and use currentColor, but we can't set opacity separately so we
       // need another node. which is a waste, but ergonomics ftw!
 
-      this.fill = document.createElementNS(SVGNS, 'rect');
-      this.fill.setAttribute('class', 'fill');
+      this.fill = DOMUtilities.SVG('rect', 'fill');
 
       // this.SetThemeColor(0);
       // if (theme.additional_selection_line_dash_array) {

package/treb-grid/src/render/tile_renderer.ts

@@ -99,10 +99,7 @@ export class TileRenderer {
     protected view: ViewModel,
     protected options: GridOptions, ) {
 
-    // this.buffer_canvas = document.createElement('canvas');
-
     this.buffer_canvas = layout.buffer_canvas;
-
     this.buffer_canvas.width = this.buffer_canvas_size.width;
     this.buffer_canvas.height = this.buffer_canvas_size.height;
     
@@ -239,7 +236,7 @@ export class TileRenderer {
    */
   public OverflowDirty(full_tile = false): void {
 
-    const mutated = [];
+    const mutated: OverflowRecord[] = [];
 
     for (const overflow of this.overflow_areas) {
       const row = overflow.area.start.row;
@@ -912,6 +909,8 @@ export class TileRenderer {
               line_width = test;
               words.shift();
 
+              max_width = Math.max(max_width, line_width);
+
             }
 
             // trim the last word, then insert a row (we're relying on the 
@@ -920,6 +919,8 @@ export class TileRenderer {
             last.text = last.text.trim();
             last.width = last.trimmed;
 
+            max_width = Math.max(max_width, last.width);
+
             strings.push(line2.map((metric) => {
               return {
                 ...metric.part,
@@ -928,11 +929,11 @@ export class TileRenderer {
                 text: metric.text, 
               };
             }));
-            
+
           }
 
         }
-
+        
       }
       else {
 
@@ -1341,6 +1342,7 @@ export class TileRenderer {
     else {
 
       const fill = ThemeColor2(this.theme, style.fill);
+
       if (fill) {
         context.fillStyle = fill;
         context.fillRect(0, 0, width - 1, height - 1);