@trebco/treb 27.12.2 → 28.2.0

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
 import type { Tile } from '../types/tile';
@@ -185,12 +185,16 @@ export abstract class BaseLayout {
   private initialized = false;
 
 
-  constructor(protected model: DataModel, protected view: ViewModel, mock = false) {
+  constructor(protected model: DataModel, protected view: ViewModel, mock = false, public DOM = DOMContext.GetInstance()) {
 
     if (mock) {
       return;
     }
 
+    if (!DOM) {
+      throw new Error('missing DOM context');
+    }
+
     this.dpr = Math.max(1, self.devicePixelRatio || 1);
 
     // now attaching to node... no longer global
@@ -201,16 +205,14 @@ export abstract class BaseLayout {
     // contexts; the mask will be under the next sheet. so either
     // global in body, or instance local.
 
-    this.mask = DOMUtilities.Div('treb-mouse-mask');
-    this.tooltip = DOMUtilities.Div('treb-tooltip');
+    this.mask = DOM.Div('treb-mouse-mask');
+    this.tooltip = DOM.Div('treb-tooltip');
 
-    // this.error_highlight = DOMUtilities.CreateDiv('treb-error-highlight');
-
-    this.dropdown_caret = DOMUtilities.SVG('svg', 'treb-dropdown-caret');
+    this.dropdown_caret = DOM.SVG('svg', 'treb-dropdown-caret');
     this.dropdown_caret.setAttribute('viewBox', '0 0 24 24');
     this.dropdown_caret.tabIndex = -1;
 
-    const caret =DOMUtilities.SVG('path');
+    const caret = DOM.SVG('path');
     caret.setAttribute('d', 'M5,7 L12,17 L19,7');
     this.dropdown_caret.appendChild(caret);
 
@@ -247,8 +249,10 @@ export abstract class BaseLayout {
     });
     */
 
-    this.dropdown_list = DOMUtilities.Div('treb-dropdown-list');
-    this.dropdown_list.setAttribute('tabindex', '-1'); // focusable
+    this.dropdown_list = DOM.Div('treb-dropdown-list', undefined, {
+      attrs: { tabindex: '-1' },
+    });
+    // this.dropdown_list.setAttribute('tabindex', '-1'); // focusable
 
     // this.dropdown_caret.addEventListener('keydown', (event) => {
     this.dropdown_list.addEventListener('keydown', (event) => {
@@ -346,15 +350,17 @@ export abstract class BaseLayout {
       this.dropdown_selected = target as HTMLElement;
     });
 
-    this.mock_selection = DOMUtilities.Div('mock-selection-node');
-    this.mock_selection.innerHTML = ' ';
+    this.mock_selection = DOM.Div('mock-selection-node', undefined, {
+      html: ' ',
+    });
+    // this.mock_selection.innerHTML = ' ';
 
-    this.note_node = DOMUtilities.Div('treb-note');
-    this.title_node = DOMUtilities.Div('treb-hover-title');
+    this.note_node = DOM.Div('treb-note');
+    this.title_node = DOM.Div('treb-hover-title');
 
-    this.sort_button = DOMUtilities.Create(
+    this.sort_button = DOM.Create(
       'button', 
-      'treb-sort-button', undefined, undefined, { title: 'Sort table', tabindex: '-1'});
+      'treb-sort-button', undefined, { attrs: { title: 'Sort table', tabindex: '-1' }});
 
     this.HideNote();
 
@@ -1167,15 +1173,18 @@ export abstract class BaseLayout {
 
     // FIXME: limit to edge (causing problems in chrome? ...)
 
-    const selection = window.getSelection();
+    if (this.DOM.doc) {
+
+      const selection = this.DOM.GetSelection();
 
-    if (selection) {
-      const range = document.createRange();
-      range.selectNodeContents(this.mock_selection);
-      selection.removeAllRanges();
-      selection.addRange(range);
+      if (selection) {
+        const range = this.DOM.doc.createRange();
+        range.selectNodeContents(this.mock_selection);
+        selection.removeAllRanges();
+        selection.addRange(range);
+
+      }
 
-      // selection.collapseToEnd();
     }
 
   }
@@ -1194,7 +1203,7 @@ export abstract class BaseLayout {
     parent: HTMLElement,
     mark_dirty = true): Tile {
 
-    const tile = DOMUtilities.Create('canvas') as Tile;
+    const tile = this.DOM.Create('canvas') as Tile;
     tile.setAttribute('class', classes);
     tile.logical_size = size;
     tile.width = size.width * this.dpr;
@@ -1403,7 +1412,7 @@ export abstract class BaseLayout {
 
     this.dropdown_list.textContent = '';
     for (const value of list) {
-      const entry = DOMUtilities.Div(undefined, this.dropdown_list);
+      const entry = this.DOM.Div(undefined, this.dropdown_list);
       if (current === value) {
         this.dropdown_selected = entry;
         entry.classList.add('selected');

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

@@ -21,7 +21,7 @@
 
 import { BaseLayout } from './base_layout';
 import type { Tile } from '../types/tile';
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 import type { DataModel, ViewModel } from '../types/data_model';
 
 
@@ -32,8 +32,8 @@ import type { DataModel, ViewModel } from '../types/data_model';
  */
 export class GridLayout extends BaseLayout {
 
-  constructor(model: DataModel, view: ViewModel){
-    super(model, view);
+  constructor(model: DataModel, view: ViewModel, DOM: DOMContext){
+    super(model, view, false, DOM);
 
     // nodes always exist
 
@@ -41,37 +41,37 @@ export class GridLayout extends BaseLayout {
     // mask needs to get attached to a container, when it's
     // available
 
-    this.column_header = DOMUtilities.Div('treb-top-header');
-    this.row_header = DOMUtilities.Div('treb-left-header');
+    this.column_header = DOM.Div('treb-top-header');
+    this.row_header = DOM.Div('treb-left-header');
     
-    this.corner = DOMUtilities.Div('treb-corner');
-    this.corner_canvas = DOMUtilities.Create('canvas');
+    this.corner = DOM.Div('treb-corner');
+    this.corner_canvas = DOM.Create('canvas');
     this.corner.appendChild(this.corner_canvas);
 
-    this.contents = DOMUtilities.Div('treb-contents');
-    this.buffer_canvas = DOMUtilities.Create('canvas', 'treb-buffer-canvas', this.contents);
+    this.contents = DOM.Div('treb-contents');
+    this.buffer_canvas = DOM.Create('canvas', 'treb-buffer-canvas', this.contents);
 
     // selection node attached to contents
-    this.grid_selection = DOMUtilities.SVG('svg', 'treb-grid-selection', this.contents);
+    this.grid_selection = DOM.SVG('svg', 'treb-grid-selection', this.contents);
 
     // selection node for frozen rows
-    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);
+    this.row_header_selection = DOM.SVG('svg', ['frozen-selection', 'frozen-selection-rows'], this.column_header);
+    this.row_header_annotations = DOM.Div('frozen-annotation-container frozen-annotation-container-rows', this.column_header);
 
     // ...columns
-    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);
+    this.column_header_selection = DOM.SVG('svg', ['frozen-selection', 'frozen-selection-columns'], this.row_header);
+    this.column_header_annotations = DOM.Div('frozen-annotation-container frozen-annotation-container-columns', this.row_header);
 
     // ...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.corner_selection = DOM.SVG('svg', 'frozen-selection', this.corner);
+    this.corner_annotations = DOM.Div('frozen-annotation-container frozen-annotation-container-corner', this.corner);
 
 
-    this.annotation_container = DOMUtilities.Div('treb-annotation-container');
+    this.annotation_container = DOM.Div('treb-annotation-container');
 
-    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');
+    this.grid_cover = DOM.Div('tile-cover grid-cover');
+    this.column_header_cover = DOM.Div('tile-cover column-header-cover');
+    this.row_header_cover = DOM.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 { 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/annotation.ts

@@ -91,9 +91,9 @@ export interface ImageAnnotationData {
    * @privateRemarks
    * why is this a string?
    */
-  scale: string; 
+  scale?: string; 
   
-  original_size: ImageSize;
+  original_size?: ImageSize;
   
 }
 

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;