@trebco/treb 27.12.1 → 28.0.5

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v27.12. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v28.0. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -86,6 +86,9 @@ export interface EmbeddedSpreadsheetOptions {
     /** add resizable wrapper */
     resizable?: boolean;
 
+    /** even if we allow resizing, constrain width. this is to support fixed width columns. */
+    constrain_width?: boolean;
+
     /** export to xlsx, now optional */
     export?: boolean;
 
@@ -247,6 +250,12 @@ export interface EmbeddedSpreadsheetOptions {
      * was renamed from `revert` to avoid any ambiguity.
      */
     revert_button?: boolean;
+
+    /**
+     * show the revert indicator. this is an indicator that shows on the
+     * top-left of the spreadsheet when a network document has local changes.
+     */
+    revert_indicator?: boolean;
 }
 
 /**
@@ -302,6 +311,22 @@ export declare class EmbeddedSpreadsheet {
      */
     get state(): number;
 
+    /**
+     * this flag indicates we can revert the document. what that means is
+     * we loaded a user-created version from localStorage, but there's a
+     * backing network or inline document. or we did load the original version
+     * but the user has made some document changes.
+     *
+     * it's like `dirty`, but that uses the load source as the ground truth,
+     * which means if you load a modified document from localStorage it's
+     * initially considered not-dirty (which is maybe just a bad design?)
+     *
+     * the intent of this field is to support enabling/disabling revert
+     * logic, or to add a visual indicator that you are not looking at the
+     * canonical version.
+     */
+    get can_revert(): boolean;
+
     /**
      * indicates the current revision of the document is not equal to the
      * last-saved revision of the document.
@@ -550,8 +575,11 @@ export declare class EmbeddedSpreadsheet {
     UnmergeCells(range?: RangeReference): void;
 
     /**
-     * revert to the network version of this document, if both `local_storage`
-     * and `network_document` are set.
+     * revert to the network version of this document, if `local_storage`
+     * is set and the create options had either `document` or `inline-document`
+     * set.
+     *
+     * FIXME: we should adjust for documents that fail to load.
      */
     Revert(): void;
 

package/esbuild-custom-element.mjs

@@ -3,6 +3,7 @@
 import * as esbuild from 'esbuild';
 
 import { SassPlugin, WorkerPlugin, NotifyPlugin, HTMLPlugin } from './esbuild-utils.mjs';
+import { promises as fs } from 'fs';
 
 import pkg from './package.json' assert { type: 'json' }; 
 
@@ -90,5 +91,6 @@ if (options.watch) {
   await context.watch();
 }
 else {
-  await esbuild.build(build_options);
+  const result = await esbuild.build(build_options);
+  await fs.writeFile('esbuild-metafile.json', JSON.stringify(result.metafile), { encoding: 'utf-8' });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "27.12.1",
+  "version": "28.0.5",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {
@@ -12,7 +12,7 @@
   "type": "module",
   "devDependencies": {
     "@types/html-minifier": "^4.0.2",
-    "@types/node": "^20.4.0",
+    "@types/node": "^20.8.5",
     "@typescript-eslint/eslint-plugin": "^6.1.0",
     "@typescript-eslint/parser": "^6.1.0",
     "archiver": "^6.0.1",
@@ -22,7 +22,7 @@
     "fast-xml-parser": "^4.0.7",
     "html-minifier": "^4.0.0",
     "jszip": "^3.6.0",
-    "sass": "^1.53.0",
+    "sass": "^1.69.3",
     "treb-base-types": "file:treb-base-types",
     "treb-calculator": "file:treb-calculator",
     "treb-charts": "file:treb-charts",
@@ -47,6 +47,6 @@
     "watch-tsc": "tsc -b treb-embed/modern.tsconfig.json -w",
     "watch-api": "ts-node-dev --respawn api-generator/api-generator.ts --config api-config.json",
     "generate-api": "ts-node-dev api-generator/api-generator.ts --config api-config.json",
-    "release": "npm run rebuild-tsc && npm run build && npm run generate-api"
+    "release": "npm run rebuild-tsc && npm run build && npm run generate-api && npm run build-light"
   }
 }

package/treb-base-types/src/dom-utilities.ts

@@ -21,24 +21,120 @@
 
 const SVGNS = 'http://www.w3.org/2000/svg';
 
-export class DOMUtilities {
+type EventHandlerMap = {
+  [key in keyof HTMLElementEventMap]: (event: HTMLElementEventMap[key]) => any;
+}
+
+type StyleMap = {
+  [key in keyof CSSStyleDeclaration]: string;
+}
+
+export interface CreateElementOptions {
+
+  /** 
+   * FIXME: can we lock this down a bit? 
+   * 
+   * actually that might not be wise since we sometimes use "scope" type 
+   * attributes that are not standard (maybe we should fix that, instead?)
+   */
+  attrs?: Record<string, string>;
+
+  /**
+   * optionally style as a map
+   */
+  style?: Partial<StyleMap>;
+
+  /** dataset or data-* attributes */
+  data?: Record<string, string>;
+
+  /** innerText */
+  text?: string;
+
+  /** innerHTML */
+  html?: string;
+
+  /** event handlers */
+  events?: Partial<EventHandlerMap>;
+
+}
+
+/**
+ * we still need a good way to represent the 'no-DOM' context,
+ * ideally without throwing exceptions.
+ * 
+ */
+export class DOMContext {
+
+  protected static instances: DOMContext[] = [];
+  
+  /** 
+   * FIXME: how about we default to document, so it won't break? 
+   * that will make it harder to debug though. 
+   */
+  public static GetInstance(doc?: Document) {
+    
+    for (const instance of this.instances) {
+      if (instance.doc === doc) {
+        return instance;
+      }
+    }
+
+    // not found, create
+    const instance = new DOMContext(doc);
+    this.instances.push(instance);
+    return instance;
+
+  }
+
+  /** ugh sloppy */
+  public doc?: Document; // placeholder temp
+
+  /** ugh sloppy */
+  public view?: (Window & typeof globalThis) | null;
+
+  /*
+  public get document(): Document {
+    return this.doc;
+  }
+
+  public get window(): (Window & typeof globalThis) {
+    return this.view;
+  }
+  */
+
+  /** class for `instanceof` comparison */
+  public get HTMLElement() {
+    return this.view?.HTMLElement;
+  }
+
+  protected constructor(doc?: Document) {
+    if (doc) {
+      this.doc = doc;
+      this.view = doc?.defaultView;
+    }
+  }
+
+  /** wrapper for window.getSelection */
+  public GetSelection() {
+    return this.view?.getSelection();
+  }
 
   /** creates a div and assigns class name/names */
-  public static Div(classes?: string|string[], parent?: HTMLElement, scope?: string): HTMLDivElement {
-    return this.Create('div', classes, parent, scope);
+  public Div(classes?: string|string[], parent?: HTMLElement, options?: CreateElementOptions): HTMLDivElement {
+    return this.Create('div', classes, parent, options);
   }
 
-  public static ClassNames(element: HTMLElement|SVGElement, classes: string|string[]) {
+  public ClassNames(element: HTMLElement|SVGElement, classes: string|string[]) {
     element.classList.add(...(Array.isArray(classes) ? classes : [classes]).reduce((arr: string[], entry) => [...arr, ...entry.split(/\s+/g)], []));
   }
 
-  public static SVG<K extends keyof SVGElementTagNameMap>(
+  public SVG<K extends keyof SVGElementTagNameMap>(
       tag: K, 
       classes?: string|string[],
-      parent?: HTMLElement|SVGElement
+      parent?: HTMLElement|SVGElement|DocumentFragment
     ): SVGElementTagNameMap[K] {
 
-    const element = document.createElementNS(SVGNS, tag);
+    const element = (this.doc as Document).createElementNS(SVGNS, tag);
 
     if (classes) {
       this.ClassNames(element, classes);
@@ -51,29 +147,71 @@ export class DOMUtilities {
     return element;
   }
 
+  /**
+   * this is a wrapper for createTextNode. but if we want to expose 
+   * the element/node classes (@see HTMLElement, above) then this 
+   * should properly be the Text class and not a method. So we should
+   * rename it. 
+   * 
+   * @param data 
+   * @returns 
+   */
+  public Text(data: string) {
+    return (this.doc as Document).createTextNode(data);
+  }
+
+  public Fragment() {
+    return (this.doc as Document).createDocumentFragment();
+  }
+
   /** better typing */
-  public static Create<K extends keyof HTMLElementTagNameMap>(
+  public Create<K extends keyof HTMLElementTagNameMap>(
       tag: K, 
       classes?: string|string[], 
-      parent?: HTMLElement, 
-      scope?: string, 
-      attrs?: Record<string, string>): HTMLElementTagNameMap[K] {
+      parent?: HTMLElement|DocumentFragment, 
+      options?: CreateElementOptions
+    ): HTMLElementTagNameMap[K] {
  
-    const element = document.createElement(tag);
+    const element = (this.doc as Document).createElement(tag);
 
     if (classes) {
       this.ClassNames(element, classes);
     }
 
-    if (scope) {
-      element.setAttribute(scope, ''); // scope?
-    }
+    if (options) {
+
+      if (options.attrs) {
+        for (const [key, value] of Object.entries(options.attrs)) {
+          element.setAttribute(key, value);
+        }
+      }
+
+      if (options.data) {
+        for (const [key, value] of Object.entries(options.data)) {
+          element.dataset[key] = value;
+        }
+      }
+
+      if (options.text) {
+        element.textContent = options.text;
+      }
+
+      if (options.html) {
+        element.innerHTML = options.html;
+      }
 
-    if (attrs) {
-      const keys = Object.keys(attrs);
-      for (const key of keys) {
-        element.setAttribute(key, attrs[key]);
+      if (options.events) {
+        for (const [key, value] of Object.entries(options.events)) {
+          element.addEventListener(key, value as any); // typing works well up until this point
+        }
       }
+
+      if (options.style) {
+        for (const [key, value] of Object.entries(options.style)) {
+          (element.style as any)[key] = value; // more sloppy typing
+        }
+      }
+
     }
 
     if (parent) {

package/treb-base-types/src/theme.ts

@@ -21,7 +21,7 @@
 
 import type { Color, CellStyle } from './style';
 import { ColorFunctions } from './color';
-import { DOMUtilities } from './dom-utilities';
+import { DOMContext } from './dom-utilities';
 
 /*
  * so this is a little strange. we use CSS to populate a theme object,
@@ -493,13 +493,14 @@ export const ThemeColorTable = (theme_color: number, tint = .7): TableTheme => {
 export const LoadThemeProperties = (container: HTMLElement): Theme => {
     
   const theme: Theme = JSON.parse(JSON.stringify(DefaultTheme));
+  const DOM = DOMContext.GetInstance(container.ownerDocument);
 
   const Append = (parent: HTMLElement, classes: string): HTMLDivElement => {
-    return DOMUtilities.Div(classes, parent);
+    return DOM.Div(classes, parent);
   }
 
   const ElementCSS = (parent: HTMLElement, classes: string): CSSStyleDeclaration => {
-    return window.getComputedStyle(Append(parent, classes));
+    return DOM.view?.getComputedStyle(Append(parent, classes)) as CSSStyleDeclaration;
   }
 
   const node = Append(container, '');
@@ -572,7 +573,7 @@ export const LoadThemeProperties = (container: HTMLElement): Theme => {
   // we could just parse, we know the returned css format is going
   // to be an rgb triple (I think?)
 
-  const canvas = DOMUtilities.Create('canvas');
+  const canvas = DOM.Create('canvas');
 
   canvas.width = 3;
   canvas.height = 3;

package/treb-charts/src/renderer.ts

@@ -33,33 +33,6 @@ export interface Metrics {
   y_offset: number;
 }
 
-// const trident = /trident/i.test(navigator?.userAgent || '');
-
-/*
-let dom_parser: DOMParser | undefined;
-const SetSVG = trident ? (node: SVGElement, svg: string) => {
-
-  if (!dom_parser) {
-    dom_parser = new DOMParser();
-    (dom_parser as any).async = false;
-  }
-
-  const element = dom_parser.parseFromString(
-    '<svg xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'>' + svg + '</svg>',
-    'text/xml').documentElement;
-
-  node.textContent = '';
-
-  let child = element.firstChild;
-
-  while (child) {
-    node.appendChild(document.importNode(child, true));
-    child = child.nextSibling;
-  }
-
-} : (node: SVGElement, svg: string) => node.innerHTML = svg;
-*/
-
 const SVGNode = (tag: string, attribute_map: {[index: string]: any} = {}, text?: string): SVGElement => {
   const node = document.createElementNS(SVGNS, tag);
   for (const key of Object.keys(attribute_map)) {
@@ -115,7 +88,6 @@ export class ChartRenderer {
     this.svg_node.style.width = '100%';
     this.svg_node.style.height = '100%';
 
-    // this.group = document.createElementNS(SVGNS, 'g');
     this.svg_node.appendChild(this.container_group);
 
     // FIXME: validate parent is relative/absolute
@@ -676,8 +648,6 @@ export class ChartRenderer {
     titles?: string[],
     classes?: string | string[]): void {
 
-
-    // const node = document.createElementNS(SVGNS, 'path');
     const group = SVGNode('g');
 
     const d1: string[] = [];
@@ -853,7 +823,7 @@ export class ChartRenderer {
     // circles...
 
     if (titles && circles.length) {
-      const circle_group = document.createElementNS(SVGNS, 'g');
+      const circle_group = SVGNode('g');
       for (const circle of circles) {
 
         const shape = SVGNode('circle', {cx: circle.x, cy: circle.y, r: step});
@@ -880,8 +850,7 @@ export class ChartRenderer {
     titles?: string[],
     classes?: string | string[]) {
 
-    // const node = document.createElementNS(SVGNS, 'path');
-    const group = document.createElementNS(SVGNS, 'g');
+    const group = SVGNode('g');
 
     const d1: string[] = [];
     const d2: string[] = [];
@@ -952,18 +921,11 @@ export class ChartRenderer {
     // circles...
 
     if (titles && circles.length) {
-      const circle_group = document.createElementNS(SVGNS, 'g');
+      const circle_group = SVGNode('g');
       for (const circle of circles) {
 
         const shape = SVGNode('circle', { cx: circle.x, cy: circle.y, r: step });
 
-        /*
-        const shape = document.createElementNS(SVGNS, 'circle');
-        shape.setAttribute('cx', circle.x.toString());
-        shape.setAttribute('cy', circle.y.toString());
-        shape.setAttribute('r', (step).toString());
-        */
-
         shape.addEventListener('mouseenter', (event) => {
           this.parent.setAttribute('title', titles[circle.i] || '');
         });
@@ -1255,15 +1217,6 @@ export class ChartRenderer {
     const d: string[] = [];
     const areas: string[] = [];
 
-    /*
-    const group = document.createElementNS(SVGNS, 'g');
-    if (typeof classes !== 'undefined') {
-      if (typeof classes === 'string') {
-        classes = [classes];
-      }
-      group.setAttribute('class', classes.join(' '));
-    }
-    */
     const group = SVGNode('g', {class: classes});
 
     // if (title) node.setAttribute('title', title);
@@ -1392,7 +1345,6 @@ export class ChartRenderer {
 
   public RenderPoints(area: Area, x: number[], y: number[], classes?: string | string[]) {
 
-    // const node = document.createElementNS(SVGNS, 'path');
     const d: string[] = [];
 
     for (let i = 0; i < x.length; i++) {
@@ -1693,12 +1645,6 @@ export class ChartRenderer {
         d.push(`M${PointOnCircle(center, inner_radius + (outer_radius - inner_radius) / 2, half_angle)}`);
         d.push(`L${anchor}`);
 
-        /*
-        const callout = document.createElementNS(SVGNS, 'path');
-        callout.setAttribute('d', d.join(' '));
-        callout.setAttribute('class', 'callout');
-        donut.appendChild(callout);
-        */
         donut.appendChild(SVGNode('path', { d, class: 'callout' }));
 
         const text_parts: string[] = [];
@@ -1793,7 +1739,7 @@ export class ChartRenderer {
 
           callout_label.textContent = '';
           for (const part of parts) {
-            const tspan = document.createElementNS(SVGNS, 'tspan');
+            const tspan = SVGNode('tspan');
             tspan.textContent = part.text;
 
             const part_x = (corrected > Math.PI) ?

package/treb-embed/markup/layout.html

@@ -121,6 +121,10 @@
 
         <div class="treb-layout-resize-handle" data-conditional="resize"></div>
         
+        <div class="treb-revert-indicator" 
+              data-command="revert-indicator"
+              title="This document has been modified from the original version."></div>
+
       </div> <!-- /treb-view -->
     </template>