@trebco/treb 23.6.2 → 25.0.0-rc1

package/treb-embed/src/index.ts

@@ -0,0 +1,16 @@
+/**
+ * this is our main file for building and generating API types.
+ * 
+ * because we're using a custom element, we have a class that inherits from 
+ * HTMLElement. that's fine, but it means the build output can't be used in 
+ * a node environment (for testing, for example) without a shim.
+ * 
+ * we may add some separate build targets that exclude the html 
+ * element for that purpose in the future.
+ */
+
+export { TREB, TREBGlobal } from './custom-element/treb-global';
+
+// import for side effects
+import './custom-element/treb-spreadsheet-element';
+

package/treb-embed/src/language-model.ts

@@ -0,0 +1,41 @@
+/*
+ * 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 type { FunctionDescriptor } from 'treb-grid';
+
+/**
+ * this is similar to a function descriptor, but we need a lot less
+ * information. not sure if we should composite them.
+ */
+export interface TranslatedFunctionDescriptor extends FunctionDescriptor {
+
+  /** original name (name in english), so we know what to replace. */
+  base: string;
+
+}
+
+export interface LanguageModel {
+  name: string;
+  version?: string;
+  locale?: string;
+  functions?: TranslatedFunctionDescriptor[];
+}
+

package/treb-embed/src/options.ts

@@ -0,0 +1,320 @@
+/*
+ * 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 type { ICellAddress } from 'treb-base-types';
+
+/**
+ * options for exporting CSV/TSV
+ */
+export interface ExportOptions {
+
+  /** comma or tab */
+  delimiter?: ',' | '\t';
+
+  /** optionally choose a sheet to export (defaults to active sheet) */
+  sheet?: string|number;
+
+  /** export formulas not values */
+  formulas?: boolean;
+  
+  /** use number formats when exporting numbers */
+  formatted?: boolean;
+}
+
+/** 
+ * options for creating spreadsheet 
+ */
+export interface EmbeddedSpreadsheetOptions {
+
+  /** containing HTML element */
+  container?: string|HTMLElement;
+
+  /** allow drag-and-drop files */
+  dnd?: boolean;
+
+  /** expandable grid */
+  expand?: boolean;
+
+  /** 
+   * key in localStorage for persisting document. it's possible
+   * to set this to boolean `true`, in which case we will generate
+   * a storage key based on the page URI. 
+   * 
+   * this can be convenient for quickly setting up a document, but don't 
+   * use it if the page URI might change (the storage will get lost)
+   * or if there are multiple spreadsheets on the same page (they will
+   * overwrite each other).
+   */
+  storage_key?: string|boolean;
+
+  /** don't load immediately (?) */
+  toll_initial_load?: boolean;
+
+  /** show formula bar. default true. */
+  formula_bar?: boolean;
+
+  /** expand formula bar */
+  expand_formula_button?: boolean;
+
+  /** scroll to cell on load */
+  scroll?: string | ICellAddress;
+
+  /** sheet to show on load, overrides anything in the model */
+  sheet?: string;
+
+  /** add resizable wrapper */
+  resizable?: boolean;
+
+  /** export to xlsx, now optional */
+  export?: boolean;
+
+  /** fill container */
+  auto_size?: boolean;
+
+  /* * 
+   * popout icon 
+   * removed as of version 25
+   */
+  // popout?: boolean;
+
+  /* * the old "fork and edit" button */
+  // fork?: boolean;
+
+  /** fetch network document (URI) */
+  network_document?: string;
+
+  /* * 
+   * load this document if the storage document isn't found (fallback) 
+   * 
+   * @deprecated - this is superfluous, using network_document with 
+   * storage_key is sufficient for this pattern.
+   * 
+   * removed as of version 25
+   */
+  // alternate_document?: string;
+
+  /** freeze rows */
+  freeze_rows?: number;
+
+  /** freeze columns */
+  freeze_columns?: number;
+
+  /** row/column headers */
+  headers?: boolean;
+
+  /** recalculate on load */
+  recalculate?: boolean;
+
+  /** show scrollbars */
+  scrollbars?: boolean;
+
+  /** show tab bar (multi sheet) */
+  tab_bar?: boolean|'auto';
+
+  /** allow add tab */
+  add_tab?: boolean;
+
+  /** show delete tab */
+  delete_tab?: boolean;
+
+  /** set a reference in global (self) */
+  global_name?: string;
+
+  /** support undo */
+  undo?: boolean;
+
+  /** support in-cell editor */
+  in_cell_editor?: boolean;
+
+  /** prompt "you have unsaved changes" */
+  prompt_save?: boolean;
+
+  /**
+   * toolbar display option
+   */
+  toolbar?: boolean | 'show' | 'narrow' | 'show-narrow';
+
+  /** file options in the toolbar */
+  file_menu?: boolean;
+
+  /** font size in the toolbar */
+  font_scale?: boolean;
+
+  /** show insert/remove table button in toolbar */
+  table_button?: boolean;
+
+  /** show freeze button in toolbar */
+  freeze_button?: boolean;
+
+  /** chart menu in the toolbar */
+  chart_menu?: boolean;
+
+  /** recalculate button in the toolbar */
+  toolbar_recalculate_button?: boolean;
+
+  /** new option, better support for headless operations (default false) */
+  headless?: boolean;
+
+  /** max size for image, in bytes */
+  max_file_size?: number;
+
+  /** initial scale */
+  scale?: number;
+
+  /** show scale buttons */
+  scale_control?: boolean;
+
+  /** show stats panel */
+  stats?: boolean;
+
+  /** save/load scale. this can optionally have a string key to disambiguate */
+  persist_scale?: boolean|string;
+
+  /** target window for hyperlinks (default _blank); set false to disable hyperlinks altogether */
+  hyperlinks?: string|false;
+
+  /**
+   * enable handling complex numbers in function calculation. turning this
+   * off doesn't actually disable complex numbers. it means that functions 
+   * will not return complex numbers unless one of the arguments is complex.
+   * 
+   * for example, if complex numbers are off, `=SQRT(-1)` will return `#VALUE`.
+   * if complex numbers are on, `=SQRT(-1)` will return `i`.
+   * 
+   * even if complex numbers are off, however, `=SQRT(-1 + 0i)` will return 
+   * `i` because the argument is complex.
+   * 
+   * currently this behavior applies to `SQRT`, `POWER` and the exponentiation 
+   * operator `^`.
+   * 
+   * in version 22, this defaults to `off`.
+   */
+  complex?: 'on'|'off';
+
+  /* * 
+   * support complex numbers. the meaning of this flag is changing -- the 
+   * parser is going to always support complex numbers, but we might load 
+   * a different set of functions if they're not expected to be used.
+   * ...
+   * no, we're not doing that. atm complex support is always baked in.
+   * @deprecated
+   * @internal
+   */
+  // complex?: boolean;
+
+  /** 
+   * for rendering the imaginary number. this is intended to support 
+   * switching to a different character for rendering, or adding a leading
+   * space/half-space/hair-space.
+   */
+  imaginary_value?: string;
+
+  /** support MD formatting for text */
+  markdown?: boolean;
+
+  /** 
+   * show tinted colors in toolbar color dropdowns. as of version 25
+   * this defaults to true (used to be false).
+   */
+  tint_theme_colors?: boolean;
+
+  /** show a spinner for long-running operations */
+  spinner?: boolean;
+
+  /** collapsed: start sidebar closed */
+  collapsed?: boolean;
+  
+  /**
+   * show the revert button. see the Revert method. this was renamed
+   * from `revert` to avoid any ambiguity.
+   */
+  revert_button?: boolean;
+
+}
+
+/**
+ * default options. some of these are unecessary but we're being
+ * explicit here just to be clear that these are intentional.
+ * 
+ * @internal
+ */
+export const DefaultOptions: EmbeddedSpreadsheetOptions = {
+  formula_bar: true,
+  in_cell_editor: true,
+  undo: true,
+  scrollbars: true,
+  headers: true,
+  export: true,
+  tab_bar: 'auto',
+  resizable: true,
+  hyperlinks: '_blank',
+  max_file_size: 1024 * 92,
+
+  // popout: false,
+  // imaginary_value: 'i',
+
+  tint_theme_colors: true,
+
+  // I don't think false options need to be in default?
+  // although it's nice to have a clear reference about defaults...
+  
+  dnd: false,
+  add_tab: false,
+  expand_formula_button: false,
+  delete_tab: false,
+
+  // changing default value for expand -> false, it might be
+  // useful to disable it but the common expectation is that 
+  // spreadsheets can grow.
+
+  expand: true,
+  markdown: false,
+  spinner: false,
+  complex: 'off',
+
+};
+
+/* *
+ * actual options requires the container node
+ * /
+export interface EmbeddedSpreadsheetOptions extends BaseOptions {
+  container?: string|HTMLElement;
+}
+*/
+
+/**
+ * embed creation adds option for icons
+ */
+export interface CreateSheetOptions extends EmbeddedSpreadsheetOptions {
+
+  /** icons */
+  decorated?: boolean;
+
+
+  /** 
+   * optional callback function on create. we're not using this anymore, but
+   * leaving it in for backwards compatibility.
+   * 
+   * @internal
+   */
+  load?: string;
+
+}

package/treb-embed/src/progress-dialog.ts

@@ -0,0 +1,228 @@
+/*
+ * 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 {tmpl, NodeModel} from 'treb-utils'; 
+// import '../style/icon.scss';
+
+export enum DialogType {
+  default = '', 
+  info = 'info',
+  error = 'error',
+  warning = 'warning',
+  success = 'success',
+  about = 'about',
+  initial = 'initial',
+}
+
+export interface MessageDialogOptions {
+  title?: string;
+  message?: string;
+  icon?: string|boolean;
+  close_box?: boolean;
+  timeout?: number;
+  type?: DialogType;
+}
+
+export type ResolutionFunction = () => void;
+
+/**
+ * rebuilding the dialog, like this:
+ * 
+ * +======================================================+
+ * |        |   TITLE                             |    [X]|
+ * | [icon] |   message                           |       |
+ * |        |   (progress bar?)                   |       |
+ * +------------------------------------------------------+
+ * 
+ */
+
+/**
+ * modal informational dialog that covers the embedded
+ * spreadsheet. not fancy.
+ */
+export class Dialog {
+
+  // private model: NodeModel;
+  private model: Record<string, HTMLElement> = {};
+
+  private layout_element: HTMLElement;
+
+  // tslint:disable-next-line:variable-name
+  private visible_ = false;
+
+  private timeout = 0;
+
+  private pending_dialog_resoltion: ResolutionFunction[] = [];
+
+  private options_: Partial<MessageDialogOptions> = {
+    type: DialogType.initial,
+  };
+
+  private set options(options: Partial<MessageDialogOptions>) {
+
+    if (options.type === DialogType.about) {
+      options.close_box = true;
+      options.icon = true;
+    }
+
+    if (this.options_.icon !== options.icon) {
+      this.model.left.style.display = options.icon ? 'block' : 'none';
+    }
+
+    if (this.options_.close_box !== options.close_box) {
+      this.model.close.style.display = options.close_box ? 'block' : 'none';
+    }
+
+    if (this.options_.message !== options.message) {
+      this.model.message.textContent = options.message || '';
+      this.model.message.style.display = options.message ? 'block' : 'none';
+    }
+
+    if (this.options_.title !== options.title) {
+      this.model.title.textContent = options.title || '';
+      this.model.title.style.display = options.title ? 'block' : 'none';
+    }
+
+    if (this.options_.type !== options.type) {
+      let classes = this.model.dialog.className.replace(/dialog-type-\S+/g, '').trim();
+      if (options.type) { classes += ` dialog-type-${options.type}`; }
+      this.model.dialog.className = classes;
+
+      if (options.type === 'about') {
+        this.model.about.style.display = 'block';
+      }
+      else {
+        this.model.about.style.display = 'none';
+      }
+
+    }
+
+    this.options_ = options;
+
+
+  }
+
+  private event_handler = (event: KeyboardEvent) => {
+    if (event.key === 'Escape' || event.key === 'Esc') {
+      event.stopPropagation();
+      event.preventDefault();
+      this.visible = false;
+    }
+  }
+
+  private get visible(){
+    return this.visible_;
+  }
+
+  private set visible(value: boolean){
+
+    if (value === this.visible_) { return; }
+    this.visible_ = value;
+
+    // we want to mask not just the spreadsheet but also the toolbar and 
+    // sidebar. unfortunately we built the node structure the other way.
+    // not a real problem though, just requires some reacharound
+
+    // actually check that we can do that with CSS -- siblings FTW
+
+    if (value) { 
+      this.layout_element?.setAttribute('dialog', '');
+      window.addEventListener('keydown', this.event_handler);
+    }
+    else { 
+      this.layout_element?.removeAttribute('dialog');
+      window.removeEventListener('keydown', this.event_handler);
+      const tmp = this.pending_dialog_resoltion.slice(0);
+      this.pending_dialog_resoltion = [];
+      Promise.resolve().then(() => {
+        for (const func of tmp) {
+          func();
+        }
+      });
+    }
+
+  }
+
+  constructor(parent_node: HTMLElement) { // }, options: MaskDialogOptions = {}) {
+
+    this.layout_element = parent_node.parentElement as HTMLElement;
+
+    const root = this.layout_element?.querySelector('.treb-dialog-mask') as HTMLElement;
+    if (root) {
+      const elements = root.querySelectorAll('[data-bind]') as NodeListOf<HTMLElement>;
+      for (const element of Array.from(elements)) {
+        const bind = element.dataset.bind;
+        if (bind) {
+          this.model[bind] = element;
+        }
+      }
+      // console.info({model: this.model});
+    }
+
+    if (this.model.about) {
+      const html: string[] = [`<div>TREB version ${process.env.BUILD_VERSION}`];
+      if (process.env.NODE_ENV !== 'production') {
+        html.push(`<small>(development build)</small>`);
+      }
+      html.push( `<small><a target=_blank href='https://treb.app'>http://treb.app</a></small>` )
+      this.model.about.innerHTML = html.join('\n');
+    }
+
+    this.model.close?.addEventListener('click', (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      this.HideDialog();
+    });
+ 
+
+  }
+
+  public Update(options: Partial<MessageDialogOptions>, delta = true): void {
+    if (delta) {
+      options = { ...this.options_, ... options};
+    }
+    this.options = options;
+  }
+
+  public HideDialog(): void {
+    this.visible = false;
+  }
+
+  public ShowDialog(options: Partial<MessageDialogOptions>): Promise<void> {
+    return new Promise((resolve) => {
+
+      this.pending_dialog_resoltion.push(resolve);
+      this.options = options;
+      this.visible = true;
+      
+      if (this.timeout) { 
+        window.clearTimeout(this.timeout); 
+        this.timeout = 0;
+      }
+      
+      if (options.timeout) {
+        this.timeout = window.setTimeout(() => this.HideDialog(), options.timeout);
+      }
+
+    });
+  }
+
+}

package/treb-embed/src/selection-state.ts

@@ -0,0 +1,16 @@
+
+import type { GridSelection } from 'treb-grid';
+import type { Style } from 'treb-base-types';
+
+/**
+ * state that should be reflected in toolbar buttons/selections
+ */
+export interface SelectionState {
+  style?: Style.Properties;
+  merge?: boolean;
+  table?: boolean;
+  frozen?: boolean;
+  comment?: string;
+  selection?: GridSelection;
+  relative_font_size?: number;
+}

package/treb-embed/src/spinner.ts

@@ -0,0 +1,42 @@
+/*
+ * 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 class Spinner {
+
+  private node: HTMLDivElement;
+  private visible = false;
+
+  constructor(public container: HTMLElement) {
+    this.node = document.createElement('div');
+    this.node.classList.add('treb-spinner');
+    this.node.innerHTML = `<div><div></div><div></div><div></div><div></div></div>`;
+    container.appendChild(this.node);
+  }
+
+  public Show(): void {
+    this.node.classList.add('visible');
+  }
+
+  public Hide() {
+    this.node.classList.remove('visible');
+  }
+
+}