@trebco/treb 27.12.2 → 28.2.0

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];

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

@@ -26,7 +26,7 @@ import type { BaseLayout } from '../layout/base_layout';
 import { MouseDrag } from './drag_mask';
 import type { GridOptions } from './grid_options';
 import { type ScaleEvent, ScaleControl } from './scale-control';
-import { DOMUtilities } from 'treb-base-types';
+import { DOMContext } from 'treb-base-types';
 
 export interface ActivateSheetEvent {
   type: 'activate-sheet';
@@ -113,17 +113,22 @@ export class TabBar extends EventSource<TabEvent> {
       this.stats_panel.innerText = ''; // clear
       for (const entry of value) {
 
-        const label = DOMUtilities.Create('span', 'treb-stats-label', this.stats_panel);
-        label.textContent = entry.label;
+        this.DOM.Create('span', 'treb-stats-label', this.stats_panel, {
+          text: entry.label
+        });
+
+        this.DOM.Create('span', 'treb-stats-value', this.stats_panel, {
+          text: entry.value,
+        });
 
-        const figure = DOMUtilities.Create('span', 'treb-stats-value', this.stats_panel);
-        figure.textContent = entry.value;
       }
     }
   }
 
   private container: HTMLElement;
 
+  private DOM: DOMContext;
+
   constructor(
       private layout: BaseLayout,
       private model: DataModel,
@@ -135,6 +140,8 @@ export class TabBar extends EventSource<TabEvent> {
 
     super();
 
+    this.DOM = DOMContext.GetInstance(view_node.ownerDocument);
+
     this.container = view_node.querySelector('.treb-spreadsheet-footer') as HTMLElement;
     if (!this.container) {
       throw new Error('missing container for tab bar');
@@ -195,6 +202,10 @@ export class TabBar extends EventSource<TabEvent> {
       clearTimeout(this.double_click_data.timeout);
     }
     this.double_click_data.index = index;
+
+    // I don't think the window instance matters for this,
+    // but perhaps it's worth using DOM just for consistency
+
     this.double_click_data.timeout = window.setTimeout(() => {
       this.double_click_data.index = undefined;
       this.double_click_data.timeout = undefined;
@@ -242,14 +253,17 @@ export class TabBar extends EventSource<TabEvent> {
 
     tab.contentEditable = 'true';
 
-    // OK for shadow, seems to work as expected in all browsers
-    const selection = window.getSelection(); // OK for shadow
+    if (this.DOM.doc) {
+
+      const selection = this.DOM.GetSelection(); 
+
+      if (selection) {
+        selection.removeAllRanges();
+        const range = this.DOM.doc.createRange();
+        range.selectNodeContents(tab);
+        selection.addRange(range);
+      }
 
-    if (selection) {
-      selection.removeAllRanges();
-      const range = document.createRange();
-      range.selectNodeContents(tab);
-      selection.addRange(range);
     }
 
     tab.addEventListener('keydown', (inner_event: KeyboardEvent) => {
@@ -448,7 +462,7 @@ export class TabBar extends EventSource<TabEvent> {
       if (!sheet.visible) { continue; }
 
       const index = tabs.length;
-      const tab = DOMUtilities.Create('li');
+      const tab = this.DOM.Create('li');
       tab.setAttribute('tabindex', '0');
 
       // tab.classList.add('tab');

package/treb-grid/src/util/fontmetrics2.ts

@@ -1,24 +1,24 @@
-/*
- * 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
- * 
- */
-
+/*
+ * 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
+ * 
+ */
+
 export interface FontMetrics2 {
   ascender: number;
   descender: number;
@@ -63,6 +63,9 @@ export class FontMetricsFactory {
     // what we're doing now is calculating -- we get the base size
     // from theme and if we see em or % we scale manually.
 
+    // based on the above, we don't need to worry about which
+    // document we're using. but we probably should just to be consistent.
+
   }
 
   /* *

package/treb-utils/src/event_source.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 { Yield } from './dispatch';
+/*
+ * 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 { Yield } from './dispatch';
 // import { IEventSource } from './ievent_source';
 
 let subscription_token_generator = 1000;
@@ -90,7 +90,7 @@ export class EventSource<T> { // implements IEventSource<T> {
     if (!this.dispatched) {
       this.dispatched = true;
 
-      Yield().then(() => {
+      Promise.resolve().then(() => {
 
         const events = this.queue.slice(0);
         this.dispatched = false;

package/treb-utils/src/index.ts

@@ -19,10 +19,10 @@
  * 
  */
 
-export * from './dispatch';
+// export * from './dispatch';
 export * from './event_source';
 export * from './ievent_source';
-export * from './resizable';
+// export * from './resizable';
 export * from './measurement';
 // export * from './color';
 export * from './serialize_html';

package/treb-utils/src/measurement.ts

@@ -1,24 +1,24 @@
-/*
- * 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
- * 
- */
-
+/*
+ * 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
+ * 
+ */
+
 /** size, really */
 export interface Metrics {
   width: number;
@@ -120,7 +120,7 @@ export class Measurement {
 
   }
 
-  /**
+  /* *
    * check if font is loaded, based on the theory that the alternatives
    * will be different sizes. note that this probably doesn't test weights
    * or italics properly, as those can be emulated without the specific face.
@@ -131,7 +131,7 @@ export class Measurement {
    * @param font_face
    * @param italic
    * @param bold
-   */
+   * /
   public static FontLoaded(font_face: string, italic = false, weight = 400): boolean {
     const face = `${italic ? 'italic' : ''} ${weight} 20pt ${font_face}`;
     const m1 = this.MeasureText(`${face}, sans-serif`, `check font`);
@@ -139,6 +139,7 @@ export class Measurement {
     const m3 = this.MeasureText(`${face}, monospace`, `check font`);
     return (m1.width === m2.width && m2.width === m3.width);
   }
+  */
 
   /**
    * measure width, height of text, accounting for rotation
@@ -169,6 +170,5 @@ export class Measurement {
     
   }
 
-
 }
 

package/treb-utils/src/serialize_html.ts

@@ -1,24 +1,24 @@
-/*
- * 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
- * 
- */
-
+/*
+ * 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
+ * 
+ */
+
 interface StringMap {
   [index: string]: string;
 }
@@ -95,6 +95,10 @@ export const SerializeHTML = (node: Element) => {
 
     const defaults: StringMap = {};
 
+    // regarding document, in this case we're creating an iframe 
+    // specifically for isolation, and adding it to "document". 
+    // there's no reason to require the context document here (I think).
+
     const iframe = document.createElement('iframe');
     iframe.style.width = '10px';
     iframe.style.height = '10px';