@trebco/treb 27.12.2 → 28.0.5

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

package/treb-utils/src/dispatch.ts

@@ -1,57 +0,0 @@
-/*
- * 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
- * 
- */
-
-/**
- * UPDATE: dropping dispatch altogether. there were really very few 
- * cases where queue length > 1, so it seems like unecessary overhead.
- * 
- * it's still somewhat useful to have an interface, in the event we 
- * change this again, so keep using the Yield() function.
- * 
- * TODO: is anyone using the callback version? could drop...
- * 
- * I'm guessing no one uses it, because it's broken amd we never noticed
- */
-
-/* *
- * yield and then call the passed function
- * /
-export function Yield(fn: () => void): void;
-
-/ * *
- * returns a promise that resolves after yield
- * /
-export function Yield(): Promise<void>;
-
-/ * * implementation * /
-export function Yield(fn?: () => void) {
-  return fn ? Promise.resolve().then(fn) : Promise.resolve();
-}
-*/
-
-/* for perf testing, we don't need this anymore
-(self as any).__dispatcher_instance = {
-  Call: Yield
-}
-*/
-
-export const Yield = () => Promise.resolve();
-

package/treb-utils/src/resizable.ts

@@ -1,159 +0,0 @@
-/*
- * 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';
-
-/**
- * support for resizable node, drag handle, drag rect, mask
- * FIXME: make this composable (decorator?)
- * FIXME: make this generic, we can use it for some other stuff (charts?)
- */
-export class Resizable {
-
-  private static resize_mask: HTMLElement;
-  private static resize_rect: HTMLElement;
-
-  /**
-   * adding layout_reference to move the handle. to keep this backwards
-   * compatible, we add it as a last, optional parameter. at some point
-   * we can create a replacement class and migrate.
-   * 
-   * this is a weird pattern, we don't need an instance of this class...
-   * goint to refactor
-   * 
-   */
-  constructor(container: HTMLElement, node: HTMLElement, resize_callback: () => void,
-      layout_reference: HTMLElement = container) {
-
-    Resizable.Create({
-      container, 
-      node, 
-      resize_callback, 
-      layout_reference});
-
-  }
-
-  public static Create(options: {
-      container: HTMLElement; 
-      node: HTMLElement;
-      resize_callback?: () => void;
-      layout_reference?: HTMLElement;
-   }): void {
-
-    const resize_handle = DOMUtilities.Div('treb-embed-resize-handle');
-
-    (options.layout_reference || options.container).appendChild(resize_handle);
-
-    if (!Resizable.resize_mask) {
-      let mask = document.querySelector('.treb-embed-mouse-mask');
-      if (!mask) {
-        mask = DOMUtilities.Div('treb-embed-mouse-mask');
-        document.body.appendChild(mask);
-      }
-      Resizable.resize_mask = mask as HTMLElement;
-    }
-
-    if (!Resizable.resize_rect) {
-      let rect = document.querySelector('.treb-embed-resize-rect');
-      if (!rect) {
-        rect = DOMUtilities.Div('treb-embed-resize-rect');
-        Resizable.resize_mask.appendChild(rect);
-      }
-      Resizable.resize_rect = rect as HTMLElement;
-    }
-
-    // eslint-disable-next-line prefer-const
-    let mouseup: () => void;
-    
-    // eslint-disable-next-line prefer-const
-    let mousemove: (event: MouseEvent) => void;
-
-    let container_rect = { width: 0, height: 0 };
-    let offset = { x: 0, y: 0 };
-    let delta = { x: 0, y: 0 };
-
-    const cleanup = () => {
-
-      Resizable.resize_mask.removeEventListener('mousemove', mousemove);
-      Resizable.resize_mask.removeEventListener('mouseup', mouseup);
-      Resizable.resize_mask.style.display = 'none';
-
-      if (delta.x || delta.y) {
-        const bounding_rect = options.container.getBoundingClientRect();
-        const width = bounding_rect.width + delta.x;
-        const height = bounding_rect.height + delta.y;
-        options.container.style.width = `${width}px`;
-        options.container.style.height = `${height}px`;
-        if (options.resize_callback) {
-          options.resize_callback();
-        }
-      }
-
-    };
-
-    mousemove = (event: MouseEvent) => {
-
-      if (!event.buttons) {
-        cleanup();
-        return;
-      }
-
-      if (delta.x !== event.clientX - offset.x) {
-        delta.x = event.clientX - offset.x;
-        Resizable.resize_rect.style.width = `${container_rect.width + delta.x + 4}px`;
-      }
-      if (delta.y !== event.clientY - offset.y) {
-        delta.y = event.clientY - offset.y;
-        Resizable.resize_rect.style.height = `${container_rect.height + delta.y + 4}px`;
-      }
-    };
-
-    mouseup = () => {
-      cleanup();
-    };
-
-    resize_handle.addEventListener('mousedown', (event) => {
-
-      event.stopPropagation();
-      event.preventDefault();
-
-      const bounding_rect = options.node.getBoundingClientRect();
-      container_rect = { width: bounding_rect.width, height: bounding_rect.height };
-
-      if (Resizable.resize_rect) {
-        Resizable.resize_rect.style.top = `${bounding_rect.top - 2}px`;
-        Resizable.resize_rect.style.left = `${bounding_rect.left - 2}px`;
-        Resizable.resize_rect.style.width = `${bounding_rect.width + 4}px`;
-        Resizable.resize_rect.style.height = `${bounding_rect.height + 4}px`;
-      }
-
-      offset = { x: event.clientX, y: event.clientY };
-      delta = { x: 0, y: 0 };
-
-      Resizable.resize_mask.style.display = 'block';
-      Resizable.resize_mask.addEventListener('mousemove', mousemove);
-      Resizable.resize_mask.addEventListener('mouseup', mouseup);
-
-    });
-
-  }
-
-}