@trebco/treb 27.12.1 → 28.0.5

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

@@ -20,7 +20,7 @@
  */
 
 import type { Theme, ICellAddress } from 'treb-base-types';
-import { DOMUtilities, Rectangle } from 'treb-base-types';
+import { DOMContext, 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';
@@ -289,7 +289,7 @@ export class SelectionRenderer {
 
     let selection_block: SVGSelectionBlock = node_set[index];
     if (!selection_block) {
-      selection_block = new SVGSelectionBlock(!index, this.theme);
+      selection_block = new SVGSelectionBlock(!index, this.theme, undefined, node);
       node_set[index] = selection_block;
 
       if (index) { 
@@ -302,7 +302,7 @@ export class SelectionRenderer {
 
         let group: SVGElement = node.querySelector('.alternate-selections') as SVGElement;
         if (!group) {
-          group = DOMUtilities.SVG('g', 'alternate-selections');
+          group = this.layout.DOM.SVG('g', 'alternate-selections');
           node.appendChild(group);
         }
         group?.appendChild(selection_block.g);

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities, type Theme } from 'treb-base-types';
+import { DOMContext, type Theme } from 'treb-base-types';
 
 export enum Orientation {
   Horizontal,
@@ -37,9 +37,11 @@ export class HeaderOverlay {
       private container: SVGElement,
       private orientation: Orientation) {
 
-    this.g = DOMUtilities.SVG('g', 'treb-header-overlay');
-    this.overlay = DOMUtilities.SVG('rect', 'treb-overlay');
-    this.highlight = DOMUtilities.SVG('rect', 'treb-highlight');
+    const DOM = DOMContext.GetInstance(container.ownerDocument);
+
+    this.g = DOM.SVG('g', 'treb-header-overlay');
+    this.overlay = DOM.SVG('rect', 'treb-overlay');
+    this.highlight = DOM.SVG('rect', 'treb-highlight');
 
     this.g.style.display = 'none';
     this.g.appendChild(this.highlight);

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import { type Theme, type Rectangle, DOMUtilities } from 'treb-base-types';
+import { type Theme, type Rectangle, DOMContext } from 'treb-base-types';
 
 /**
  * the original selections -- a canvas overlaid over the tile canvases --
@@ -44,12 +44,15 @@ export class SVGSelectionBlock {
 
   constructor( primary: boolean,
                private theme: Theme,
-               private offset: SelectionOffset = {x: 0, y: 0}) {
+               private offset: SelectionOffset = {x: 0, y: 0},
+               node: SVGElement) {
 
-    this.g = DOMUtilities.SVG('g');
+    const DOM = DOMContext.GetInstance(node.ownerDocument);
+
+    this.g = DOM.SVG('g');
     this.g.setAttribute('transform', `translate(${offset.x}, ${offset.y})`);
     
-    this.outline = DOMUtilities.SVG('rect', 'outline');
+    this.outline = DOM.SVG('rect', 'outline');
 
     if (primary) {
 
@@ -58,8 +61,8 @@ export class SVGSelectionBlock {
       // primary selections have a separate fill, plus the nub. separate
       // fill because the "target" is unfilled.
 
-      this.fill = DOMUtilities.SVG('path', 'fill');
-      this.nub = DOMUtilities.SVG('rect', 'nub');
+      this.fill = DOM.SVG('path', 'fill');
+      this.nub = DOM.SVG('rect', 'nub');
 
       this.g.appendChild(this.fill);
       this.g.appendChild(this.outline);
@@ -75,7 +78,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 = DOMUtilities.SVG('rect', 'fill');
+      this.fill = DOM.SVG('rect', 'fill');
 
       // this.SetThemeColor(0);
       // if (theme.additional_selection_line_dash_array) {

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

@@ -58,7 +58,7 @@ import {
   MDParser,
 } from 'treb-parser';
 
-import { Yield, SerializeHTML } from 'treb-utils';
+import { SerializeHTML } from 'treb-utils';
 import type { ParseResult as ParseResult2 } from 'treb-format';
 import { NumberFormatCache, LotusDate, ValueParser, type Hints, NumberFormat } from 'treb-format';
 import { SelectionRenderer } from '../render/selection-renderer';
@@ -111,7 +111,7 @@ import { CommandKey
 
 import type { DataModel, SerializedModel } from './data_model';
 
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 import { GridBase } from './grid_base';
 import type { SetRangeOptions } from './set_range_options';
 import type { ClipboardCellData } from './clipboard_data';
@@ -360,6 +360,8 @@ export class Grid extends GridBase {
 
   private tab_bar?: TabBar;
 
+  private DOM = DOMContext.GetInstance();
+
   // --- constructor -----------------------------------------------------------
 
   /**
@@ -369,7 +371,8 @@ export class Grid extends GridBase {
     options: GridOptions = {}, 
     model: DataModel,
     theme: Theme = DefaultTheme,
-    initialze_dom = true ) {
+    initialze_dom = true,
+    DOM: DOMContext ) {
 
     super(options, model);  
 
@@ -385,7 +388,8 @@ export class Grid extends GridBase {
       return;
     }
 
-    this.layout = new GridLayout(this.model, this.view);
+    this.DOM = DOM;
+    this.layout = new GridLayout(this.model, this.view, DOM);
 
     if (options.initial_scale) {
       if (typeof options.initial_scale === 'string') {
@@ -571,84 +575,83 @@ export class Grid extends GridBase {
 
       // FIXME: why is this not in layout? it is layout.
 
-      view.node = DOMUtilities.Div();
-      view.node.dataset.scale = this.layout.scale.toString();
-      view.node.style.fontSize = `${10 * this.layout.scale}pt`;
-
-      view.content_node = DOMUtilities.Div('annotation-content', view.node);
-      const move_target = DOMUtilities.Div('annotation-move-target', view.node);
-      const resize_target = DOMUtilities.Div('annotation-resize-target', view.node);
-
-      if (view.node) {
-        const node = view.node;
-
-        // support focus
-        node.setAttribute('tabindex', '-1');
+      const node = this.DOM.Div('annotation', undefined, {
+        data: { scale: this.layout.scale.toString() },
+        style: { fontSize: `${10 * this.layout.scale}pt` },
+        attrs: { tabindex: '-1', },
+        events: {
 
-        node.addEventListener('mousedown', (event) => {
-
-          if (event.button !== 0) {
-            return;
-          }
+          mousedown: (event) => {
 
-          // this.AnnotationMouseDown(annotation, event, move_target, resize_target);
-          this.layout.AnnotationMouseDown(annotation, node, event, move_target, resize_target).then(event => {
-            // console.info('resolved', event);
-            if (event) {
-              this.grid_events.Publish(event);
+            if (event.button !== 0) {
+              return;
             }
+  
+            this.layout.AnnotationMouseDown(annotation, node, event, move_target, resize_target).then(event => {
+              // console.info('resolved', event);
+              if (event) {
+                this.grid_events.Publish(event);
+              }
+  
+              if (annotation.data.layout) {
+                this.EnsureAddress(annotation.data.layout.br.address, 1);
+              }
+  
+            });
+          },
 
-            if (annotation.data.layout) {
-              this.EnsureAddress(annotation.data.layout.br.address, 1);
+          focusin: () => {
+  
+            for (const element of this.layout.GetFrozenAnnotations(annotation)) {
+              element.classList.add('clone-focus');
             }
+  
+            this.selected_annotation = annotation;
+            this.primary_selection.empty = true; // FIXME: not using method? (...)
+  
+            // this is done for the side-effect when we start editing, we
+            // capture the sheet of the primary selection. if you switch
+            // sheets while editing, the selection won't be set so it persists.
+            // we need that to switch back to the correct sheet when an edit ends.
+  
+            this.primary_selection.target = { row: -1, column: -1, sheet_id: this.active_sheet.id };
+            this.HideGridSelection();
 
-          });
-        });
-
-        node.addEventListener('focusin', () => {
-
-          // console.info('annotation focusin', annotation);
-
-          for (const element of this.layout.GetFrozenAnnotations(annotation)) {
-            element.classList.add('clone-focus');
-          }
-
-          this.selected_annotation = annotation;
-          this.primary_selection.empty = true; // FIXME: not using method? (...)
+          },
 
-          // this is done for the side-effect when we start editing, we
-          // capture the sheet of the primary selection. if you switch
-          // sheets while editing, the selection won't be set so it persists.
-          // we need that to switch back to the correct sheet when an edit ends.
+          focusout: (event) => {
 
-          this.primary_selection.target = { row: -1, column: -1, sheet_id: this.active_sheet.id };
-          this.HideGridSelection();
-        });
+            // console.info('annotation focusout', annotation);
+  
+            for (const element of this.layout.GetFrozenAnnotations(annotation)) {
+              element.classList.remove('clone-focus');
+            }
+            
+            if (this.formula_bar && this.formula_bar.IsElement((event as FocusEvent).relatedTarget as HTMLElement)) {
+              // console.info('editing...');
+              this.primary_selection.empty = true;
+              this.RenderSelections();
+              this.editing_annotation = annotation;
+              this.layout.ShowSelections(true);
+            }
+            else {
+              if (this.selected_annotation === annotation) {
+                this.selected_annotation = undefined;
+              }
+              this.ShowGridSelection();
+            }
+          },
 
-        node.addEventListener('focusout', (event) => {
+        }
+      });
 
-          // console.info('annotation focusout', annotation);
+      view.node = node;
 
-          for (const element of this.layout.GetFrozenAnnotations(annotation)) {
-            element.classList.remove('clone-focus');
-          }
-          
-          if (this.formula_bar && this.formula_bar.IsElement((event as FocusEvent).relatedTarget as HTMLElement)) {
-            // console.info('editing...');
-            this.primary_selection.empty = true;
-            this.RenderSelections();
-            this.editing_annotation = annotation;
-            this.layout.ShowSelections(true);
-          }
-          else {
-            if (this.selected_annotation === annotation) {
-              this.selected_annotation = undefined;
-            }
-            this.ShowGridSelection();
-          }
-        });
+      view.content_node = this.DOM.Div('annotation-content', node);
+      const move_target = this.DOM.Div('annotation-move-target', node);
+      const resize_target = this.DOM.Div('annotation-resize-target', node);
 
-        node.addEventListener('keydown', (event) => {
+      node.addEventListener('keydown', (event) => {
       
           const rect = annotation.scaled_rect;
           if (!rect) {
@@ -748,14 +751,8 @@ export class Grid extends GridBase {
           }
 
         });
-      }
-    }
 
-    view.node.classList.add('annotation');
-    
-    // if (annotation.class_name) {
-    //   annotation.node.classList.add(annotation.class_name);
-    // }
+    }
 
     if (add_to_layout) {
       this.layout.AddAnnotation(annotation);
@@ -2413,7 +2410,7 @@ export class Grid extends GridBase {
    */
   private ActivateSheetTasks() {
 
-    this.active_sheet.Activate();
+    this.active_sheet.Activate(this.DOM);
     
     if (this.active_sheet.image && !this.active_sheet.image.complete) {
 
@@ -2785,7 +2782,7 @@ export class Grid extends GridBase {
 
     if (!this.render_token) {
       this.render_token = 1;
-      Yield().then(() => {
+      Promise.resolve().then(() => {
         this.render_token = 0;
         this.Repaint(force, full_tile);
       });
@@ -3846,7 +3843,7 @@ export class Grid extends GridBase {
       if (cell.hyperlink) {
         if (this.PointInTextPart(address, offset_point, cell)) {
           const link = cell.hyperlink;
-           Yield().then(() => {
+           Promise.resolve().then(() => {
             this.grid_events.Publish({
               type: 'cell-event',
               data: {
@@ -4678,7 +4675,9 @@ export class Grid extends GridBase {
           // console.info('ek', event.key);
 
           if (!selection.empty) {
-            this.OverlayEditCell(selection, true, event);
+            if (event.key !== 'Escape') {
+              this.OverlayEditCell(selection, true, event);
+            }
           }
 
           return;

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

@@ -19,14 +19,13 @@
  * 
  */
 
-import { DOMUtilities as DOM } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 import { NumberFormat, NumberFormatCache, ValueParser } from 'treb-format';
 import { ValueType } from 'treb-base-types';
 import { EventSource } from 'treb-utils';
 
 export interface ScaleEvent {
   type: 'scale';
-  // action: 'increase'|'decrease'|number;
   value: number;
   keep_focus?: boolean;
 }
@@ -50,106 +49,98 @@ export class ScaleControl extends EventSource<ScaleEvent> {
 
     this.format = NumberFormatCache.Get('0.0');
 
-    // not sure what this extra div was for, we don't need it
-    // const div = DOM.CreateDiv('treb-scale-control-2', container);
+    const DOM = DOMContext.GetInstance(container.ownerDocument);
 
-    this.input = DOM.Create('input', 'treb-scale-input', /* div */ container);
-    const popup = DOM.Div('treb-slider-container', /* div */ container);
+    this.input = DOM.Create('input', 'treb-scale-input', container, {
+      events: {
 
-    /*
-    this.input.addEventListener('keyup', (event) => {
-      switch (event.key) {
-        case 'ArrowUp':
-        case 'ArrowDown':
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-      }
-    });
-    */
-
-    // is this for some x-browser issue? or did we just not 
-    // know which event to use and this is old junk?
+        // is this for some x-browser issue? or did we just not 
+        // know which event to use and this is old junk?
 
-    this.input.addEventListener('keypress', (event) => {
-      switch (event.key) {
-        case 'ArrowUp':
-        case 'ArrowDown':
-          event.stopPropagation();
-          event.preventDefault();
-          console.info('mark?');
-          break;
-      }
-    })
+        keypress: (event) => {
+          switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowDown':
+              event.stopPropagation();
+              event.preventDefault();
+              console.info('mark?');
+              break;
+          }
+        },
 
-    // this is the one we want
+        keydown: (event) => {
 
-    this.input.addEventListener('keydown', (event) => {
-      switch (event.key) {
-        case 'Enter':
-          this.input.blur();
-          break;
+          switch (event.key) {
+            case 'Enter':
+              this.input.blur();
+              break;
 
-        case 'ArrowUp':
-          this.Tick(-1);
-          break;
+            case 'ArrowUp':
+              this.Tick(-1);
+              break;
 
-        case 'ArrowDown':
-          this.Tick(1);
-          break;
+            case 'ArrowDown':
+              this.Tick(1);
+              break;
 
-        case 'Escape':
-          this.input.value = this.format.Format(this.scale) + '%';
-          this.input.blur();
-          break;
+            case 'Escape':
+              this.input.value = this.format.Format(this.scale) + '%';
+              this.input.blur();
+              break;
 
-        default:
-          return;
+            default:
+              return;
 
-      }
+          }
 
-      event.stopPropagation();
-      event.preventDefault();
+          event.stopPropagation();
+          event.preventDefault();
 
-    });
+        },
 
-    // select text on click
-    this.input.addEventListener('focusin', () => this.input.select());
+        // select text on click
+        focusin: () => this.input.select(),
 
-    this.input.addEventListener('change', () => {
+        change: () => {
 
-      // what we're doing here is a little unusual. we always treat
-      // the value as a percent, even if there's no percent sign.
+          // what we're doing here is a little unusual. we always treat
+          // the value as a percent, even if there's no percent sign.
 
-      // for that to work, if there is a percent sign, we need to remove
-      // it before we continue. then try to parse as a number.
+          // for that to work, if there is a percent sign, we need to remove
+          // it before we continue. then try to parse as a number.
 
-      let text = this.input.value;
-      text = text.replace(/%/g, '');
+          let text = this.input.value;
+          text = text.replace(/%/g, '');
 
-      const value = ValueParser.TryParse(text);
-      if (value.type === ValueType.number) {
-        this.UpdateScale(Number(value.value), true);
-      }
-      else {
-        this.input.value = this.format.Format(this.scale) + '%';
-      }
+          const value = ValueParser.TryParse(text);
+          if (value.type === ValueType.number) {
+            this.UpdateScale(Number(value.value), true);
+          }
+          else {
+            this.input.value = this.format.Format(this.scale) + '%';
+          }
 
-    });
+        },
 
-    this.slider = DOM.Create('input', undefined, popup, undefined, {
-      type: 'range',
-      min: '50',
-      max: '200',
-      value: '100',
-      step: '2.5',
+      }
     });
 
-    this.slider.addEventListener('input', () => {
-      this.UpdateScale(Number(this.slider.value), true);
+    const popup = DOM.Div('treb-slider-container', container);
+
+    this.slider = DOM.Create('input', undefined, popup, {
+      attrs: {
+        type: 'range',
+        min: '50',
+        max: '200',
+        value: '100',
+        step: '2.5',
+      },
+      events: {
+        input: () => this.UpdateScale(Number(this.slider.value), true),
+      }
     });
 
-    /* div */ container.addEventListener('wheel', (event: WheelEvent) => {
+    container.addEventListener('wheel', (event: WheelEvent) => {
       event.stopPropagation();
       event.preventDefault();
       this.Tick(event.deltaY)
@@ -159,9 +150,6 @@ export class ScaleControl extends EventSource<ScaleEvent> {
 
   public Tick(value: number): void {
 
-    // not sure what alternate case I am worried about here,
-    // sideways wheel? shift key?
-
     // normalize
 
     const scale = Math.round(this.scale / 2.5) * 2.5;

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

@@ -26,7 +26,7 @@ import { ValueType, Cells, Style,
   type PropertyKeys,
   type Color,
   Area, IsFlatDataArray, 
-  IsNestedRowArray, IsCellAddress, DOMUtilities
+  IsNestedRowArray, IsCellAddress, DOMContext
 } from 'treb-base-types';
 import { NumberFormatCache } from 'treb-format';
 import { Measurement, ValidateURI } from 'treb-utils';
@@ -741,14 +741,14 @@ export class Sheet {
   }
 
 
-  public Activate() {
+  public Activate(DOM: DOMContext) {
 
     // load background image, if set
 
     if (this.background_image) {
       const resource = ValidateURI(this.background_image);
       if (resource) {
-        this._image = DOMUtilities.Create('img');
+        this._image = DOM.Create('img');
         this._image.src = resource;
       }
 
@@ -1592,55 +1592,6 @@ export class Sheet {
 
   }
 
-  /* *
-   * auto-sizes the column, but if the allow_shrink parameter is not set
-   * it will only enlarge, never shrink the column.
-   *
-   * UPDATE: since the only caller calls with inline = true, removing 
-   * parameter, test, and extra behavior.
-   * 
-   * UPDATE: moving to grid, for reasons of canvas...
-   * /
-  public AutoSizeColumn(column: number, allow_shrink = true): void {
-
-    if (!Sheet.measurement_canvas) {
-      Sheet.measurement_canvas = document.createElement('canvas');
-    }
-    Sheet.measurement_canvas.style.font = Style.Font(this.default_style_properties);
-    console.info("SMC", Sheet.measurement_canvas.style.font);
-    (self as any).SMC = Sheet.measurement_canvas;
-
-    document
-
-    const context = Sheet.measurement_canvas.getContext('2d');
-    if (!context) return;
-
-    let width = 12;
-    const padding = 4 * 2; // FIXME: parameterize
-
-    if (!allow_shrink) width = this.GetColumnWidth(column);
-
-    for (let row = 0; row < this.cells.rows; row++) {
-      const cell = this.CellData({ row, column });
-      let text = cell.formatted || '';
-      if (typeof text !== 'string') {
-        text = text.map((part) => part.text).join('');
-      }
-
-      if (text && text.length) {
-        context.font = Style.Font(cell.style || {});
-
-        console.info({text, style: Style.Font(cell.style||{}), cf: context.font});
-
-        width = Math.max(width, Math.ceil(context.measureText(text).width) + padding);
-      }
-    }
-
-    this.SetColumnWidth(column, width);
-
-  }
-  */
-
   /** returns the style properties for a given style index */
   public GetStyle(index: number): CellStyle {
     return this.style_map[index];