@trebco/treb 23.6.5 → 25.0.0-rc2

package/treb-utils/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "treb-utils",
+  "version": "16.0.0",
+  "main": "src/index.ts"
+}

package/treb-utils/src/dispatch.ts

@@ -0,0 +1,57 @@
+/*
+ * 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/event_source.ts

@@ -0,0 +1,147 @@
+/*
+ * 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;
+
+interface EventSubscription<T> {
+  subscriber: (event: T) => any;
+  token: number;
+}
+
+/**
+ * relatively simple event publish/subscribe mechanism.
+ * not as simple as it used to be.
+ * 
+ * UPDATE removing unecessary interface (not sure what that
+ * was for, but no one else is using it).
+ */
+export class EventSource<T> { // implements IEventSource<T> {
+
+  /** pending events */
+  private queue: T[] = [];
+
+  /** flag indicating whether we have already triggered a callback */
+  private dispatched = false;
+
+  /** regular subscriptions */
+  private subscribers: Array<EventSubscription<T>> = [];
+
+  /* * pass-through modules: these are peers * /
+  private pass_through: Array<EventSource<T>> = [];
+  */
+
+  constructor(private verbose = false, private log_id?: string) {
+
+  }
+
+  /**
+   * FIXME: does anybody call this with an array? it's no longer
+   * necessary for multiple messages to prevent extra callbacks...
+   */
+  public Publish(event: T | T[]) {
+
+    if (this.verbose) {
+      console.info(`es publish (${this.log_id})`, event);
+    }
+
+    // here's our updated synchronous mechanism, passing through
+    // FIXME: no one uses this (I think). drop it.
+
+    // this.pass_through.forEach((source) => source.Publish(event));
+
+    // don't bother if there are no subscribers (implies you must
+    // subscribe before first event... not sure if that's reasonable)
+
+    /*
+    if (!this.subscribers.length) {
+      return; // ...
+    }
+    */
+
+    // queue event or events
+
+    if (Array.isArray(event)) { this.queue.push(...event); }
+    else { this.queue.push(event); }
+
+    // then call the dispatch function. gate this in case we get
+    // this call multiple times before a callback.
+
+    if (!this.dispatched) {
+      this.dispatched = true;
+
+      Yield().then(() => {
+
+        const events = this.queue.slice(0);
+        this.dispatched = false;
+        this.queue = [];
+
+        // FIXME: should we cache subscribers as well? (...)
+
+        for (const queued_event of events) {
+          for (const subscription of this.subscribers) {
+            subscription.subscriber(queued_event);
+          }
+        }
+
+      });
+
+    }
+
+  }
+
+  /**
+   * subscription returns a token which can be used to cancel subscription.
+   * this token is a number, guaranteed to be !0 so you can test for falsy.
+   */
+  public Subscribe(subscriber: (event: T) => void): number {
+    const token = subscription_token_generator++;
+    this.subscribers.push({ subscriber, token });
+    return token;
+  }
+
+  /** cancel a single subscription */
+  public Cancel(token: number) {
+    this.subscribers = this.subscribers.filter((subscription) => subscription.token !== token);
+  }
+
+  /**
+   * cancel all subscriptions AND ALL PASS-THROUGH SOURCES.
+   */
+  public CancelAll() {
+    this.subscribers = [];
+    // this.pass_through = [];
+  }
+
+  /* *
+   * pass-through (redirected) subscription, synchronous on this end. does
+   * not support unsubscribe atm (FIXME)
+   * /
+  public PassThrough(source: EventSource<T>) {
+    this.pass_through.push(source);
+  }
+  */
+
+}
+
+

package/treb-utils/src/ievent_source.ts

@@ -0,0 +1,33 @@
+/*
+ * 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
+ * 
+ */
+
+/**
+ * async event source
+ */
+export interface IEventSource<T> {
+
+  /** subscribe. returns a token (number) used to manage the subscription. */
+  Subscribe(subscriber: (event: T) => void): number;
+
+  /** cancel a single subscription */
+  Cancel(token: number): void;
+
+}

package/treb-utils/src/index.ts

@@ -0,0 +1,31 @@
+/*
+ * 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 * from './dispatch';
+export * from './event_source';
+export * from './ievent_source';
+export * from './resizable';
+export * from './measurement';
+// export * from './color';
+export * from './serialize_html';
+export * from './validate_uri';
+export * from './scale';
+export * from './template';

package/treb-utils/src/measurement.ts

@@ -0,0 +1,174 @@
+/*
+ * 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;
+  height: number;
+}
+
+export class Measurement {
+
+  /** canvas used for color measurement */
+  private static color_measurement_canvas: HTMLCanvasElement;
+
+  /**
+   * node used for text metrics. this has to be added to
+   * the DOM, so it's fixed and shifted off screen.
+   */
+  private static text_measurement_node: HTMLElement;
+
+  /** cache for color lookups */
+  private static color_cache: {[index: string]: Uint8ClampedArray} = {};
+
+  public static MeasureColorARGB(color: string): string {
+    const bytes = this.MeasureColor(color);
+    let argb = 'FF'; // always 100%
+    for (let i = 0; i < 3; i++) {
+      const hex = bytes[i].toString(16);
+      if (hex.length === 0) argb += '00';
+      else if (hex.length === 1) argb += `0${hex}`;
+      else argb += hex;
+    }
+    return argb.toUpperCase();
+  }
+
+  /**
+   * measure a color. turns symbolic or rgb colors into rgb values.
+   * 
+   * UPDATE: prefill with #fff. that prevents it from randomly returning
+   * the last value, if the color doesn't work for some reason.
+   */
+  public static MeasureColor(color: string): Uint8ClampedArray {
+
+    let cached = this.color_cache[color];
+    if (cached) {
+      return cached;
+    }
+
+    if (!this.color_measurement_canvas) {
+      this.color_measurement_canvas = document.createElement('canvas');
+      this.color_measurement_canvas.width = 1;
+      this.color_measurement_canvas.height = 1;
+    }
+
+    const context = this.color_measurement_canvas.getContext('2d', {
+      willReadFrequently: true,
+    });
+
+    if (context) {
+      context.fillStyle = '#fff';
+      context.fillRect(0, 0, 1, 1);
+
+      context.fillStyle = color;
+      context.fillRect(0, 0, 1, 1);
+
+      // cached = context.getImageData(0, 0, 1, 1).data; // FIXME: should clone this
+      cached = new Uint8ClampedArray(context.getImageData(0, 0, 1, 1).data);
+
+      this.color_cache[color] = cached;
+      return cached;
+    }
+
+    return new Uint8ClampedArray(3);
+
+  }
+
+  public static EnsureMeasurementNode(): void {
+
+    if (!this.text_measurement_node) {
+      const node = document.querySelector('.treb-chart-measurement-node');
+      if (node) {
+        this.text_measurement_node = node as HTMLElement;
+      }
+      else {
+        this.text_measurement_node = document.createElement('div');
+        this.text_measurement_node.classList.add('treb-chart-measurement-node');
+        this.text_measurement_node.style.margin = '0px';
+        this.text_measurement_node.style.padding = '0px';
+        this.text_measurement_node.style.height = 'initial';
+        this.text_measurement_node.style.width = 'initial';
+        
+        this.text_measurement_node.style.whiteSpace = 'nowrap';
+        this.text_measurement_node.style.position = 'fixed';
+        this.text_measurement_node.style.border = '0px';
+        this.text_measurement_node.style.border = '1px solid red';
+        this.text_measurement_node.style.boxSizing = 'content-box';
+        this.text_measurement_node.style.top =
+          this.text_measurement_node.style.left = '-1000px';
+        document.body.appendChild(this.text_measurement_node);
+      }
+    }
+
+  }
+
+  /**
+   * 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.
+   *
+   * I guess the thing to do in that case would be to load the alternate faces
+   * first, and assume they are loaded serially (they're not).
+   *
+   * @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`);
+    const m2 = this.MeasureText(`${face}, serif`, `check font`);
+    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
+   */
+  public static MeasureText(font: string, text: string, angle = 0): Metrics {
+
+    this.EnsureMeasurementNode();
+    this.text_measurement_node.style.font = font;
+    if (/\n/.test(text)) {
+      text = text.replace(/\n/g, '<BR/>');
+      this.text_measurement_node.innerHTML = text;
+    }
+    else {
+      this.text_measurement_node.textContent = text;
+    }
+    this.text_measurement_node.style.lineHeight = '1em';
+    if (angle) {
+      this.text_measurement_node.style.transform = `rotate(${angle}deg)`;
+    }
+    else this.text_measurement_node.style.transform = '';
+
+    const rect = this.text_measurement_node.getBoundingClientRect();
+
+    return {
+      width: rect.width,
+      height: rect.height,
+    };
+    
+  }
+
+
+}
+

package/treb-utils/src/resizable.ts

@@ -0,0 +1,160 @@
+/*
+ * 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
+ * 
+ */
+
+/**
+ * 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 = document.createElement('div');
+    resize_handle.classList.add('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 = document.createElement('div');
+        mask.classList.add('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 = document.createElement('div');
+        rect.classList.add('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);
+
+    });
+
+  }
+
+}