@trebco/treb 27.5.3 → 27.7.6

package/treb-grid/src/index.ts

@@ -39,4 +39,4 @@ export type { FunctionDescriptor, ArgumentDescriptor } from './editors/autocompl
 export { UA } from './util/ua';
 export type { SetRangeOptions } from './types/set_range_options';
 export type { AnnotationData, AnnotationType } from './types/annotation';
-export type { ExternalEditorType, DependencyList, ExternalEditorCallback } from './types/external_editor';
+export type { ExternalEditorConfig, DependencyList, ExternalEditorCallback } from './types/external_editor_config';

package/treb-grid/src/layout/base_layout.ts

@@ -357,7 +357,7 @@ export abstract class BaseLayout {
     this.note_node = DOMUtilities.CreateDiv('treb-note');
     this.title_node = DOMUtilities.CreateDiv('treb-hover-title');
 
-    this.sort_button = DOMUtilities.Create<HTMLButtonElement>(
+    this.sort_button = DOMUtilities.Create(
       'button', 
       'treb-sort-button', undefined, undefined, { title: 'Sort table', tabindex: '-1'});
 

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

@@ -23,8 +23,8 @@ import type { Sheet } from './sheet';
 import type { IArea, ICellAddress, Table, CellStyle } from 'treb-base-types';
 import type { SerializedSheet } from './sheet_types';
 import { NamedRangeCollection } from './named_range';
-import type { ExpressionUnit, UnitAddress, UnitStructuredReference, UnitRange } from 'treb-parser';
-import { Style } from 'treb-base-types';
+import { type ExpressionUnit, type UnitAddress, type UnitStructuredReference, type UnitRange, Parser, QuotedSheetNameRegex } from 'treb-parser';
+import { Area, IsCellAddress, Style } from 'treb-base-types';
 
 export interface SerializedMacroFunction {
   name: string;
@@ -159,6 +159,8 @@ export class SheetCollection {
  */
 export class DataModel {
 
+  public readonly parser: Parser = new Parser();
+
   /** document metadata */
   public document_name?: string;
 
@@ -317,7 +319,132 @@ export class DataModel {
     
     return undefined;
   }
-  
+
+  /**
+   * return an address label for this address (single cell or range)
+   * 
+   * @param address 
+   * @param active_sheet 
+   */
+  public AddressToLabel(address: ICellAddress|IArea, active_sheet?: Sheet) {
+
+    const start = IsCellAddress(address) ? address : address.start;
+    const parts = IsCellAddress(address) ? 
+      [Area.CellAddressToLabel(address)] : 
+      [Area.CellAddressToLabel(address.start), Area.CellAddressToLabel(address.end)];
+
+    const sheet = this.sheets.Find(start.sheet_id || 0);
+    const name = (sheet?.name) ? 
+        (QuotedSheetNameRegex.test(sheet.name) ? `'${sheet.name}'` : sheet.name) : '';
+    
+    return name + (name ? '!' : '') + (parts[0] === parts[1] ? parts[0] : parts.join(':'));
+    
+  }
+
+  // --- resolution api, moved from calculator ---------------------------------
+
+  /**
+   * returns false if the sheet cannot be resolved, which probably
+   * means the name changed (that's the case we are working on with
+   * this fix).
+   */
+  public ResolveSheetID(expr: UnitAddress|UnitRange, context?: ICellAddress, active_sheet?: Sheet): boolean {
+
+    const target = expr.type === 'address' ? expr : expr.start;
+
+    if (target.sheet_id) {
+      return true;
+    }
+
+    if (target.sheet) {
+      const sheet = this.sheets.Find(target.sheet);
+      if (sheet) {
+        target.sheet_id = sheet.id;
+        return true;
+      }
+
+      /*
+      const lc = target.sheet.toLowerCase();
+      for (const sheet of this.model.sheets.list) {
+        if (sheet.name.toLowerCase() === lc) {
+          target.sheet_id = sheet.id;
+          return true;
+        }
+      }
+      */
+    }
+    else if (context?.sheet_id) {
+      target.sheet_id = context.sheet_id;
+      return true;
+    }
+    else if (active_sheet?.id) {
+      target.sheet_id = active_sheet.id;
+      return true;
+    }
+
+    return false; // the error
+
+  }
+
+  /** wrapper method ensures it always returns an Area (instance, not interface) */
+  public ResolveArea(address: string|ICellAddress|IArea, active_sheet: Sheet): Area {
+    const resolved = this.ResolveAddress(address, active_sheet);
+    return IsCellAddress(resolved) ? new Area(resolved) : new Area(resolved.start, resolved.end);
+  }
+
+  /** 
+   * moved from embedded sheet. also modified to preserve ranges, so it
+   * might return a range (area). if you are expecting the old behavior
+   * you need to check (perhaps we could have a wrapper, or make it optional?)
+   * 
+   * Q: why does this not go in grid? or model? (...)
+   * Q: why are we not preserving absoute/relative? (...)
+   * 
+   */
+  public ResolveAddress(address: string|ICellAddress|IArea, active_sheet: Sheet): ICellAddress|IArea {
+    
+    if (typeof address === 'string') {
+      const parse_result = this.parser.Parse(address);
+      if (parse_result.expression && parse_result.expression.type === 'address') {
+        this.ResolveSheetID(parse_result.expression, undefined, active_sheet);
+        return {
+          row: parse_result.expression.row,
+          column: parse_result.expression.column,
+          sheet_id: parse_result.expression.sheet_id,
+        };
+      }
+      else if (parse_result.expression && parse_result.expression.type === 'range') {
+        this.ResolveSheetID(parse_result.expression, undefined, active_sheet);
+        return {
+          start: {
+            row: parse_result.expression.start.row,
+            column: parse_result.expression.start.column,
+            sheet_id: parse_result.expression.start.sheet_id,
+          },
+          end: {
+            row: parse_result.expression.end.row,
+            column: parse_result.expression.end.column,
+          }
+        };
+      }
+      else if (parse_result.expression && parse_result.expression.type === 'identifier') {
+
+        // is named range guaranteed to have a sheet ID? (I think yes...)
+
+        const named_range = this.named_ranges.Get(parse_result.expression.name);
+        if (named_range) {
+          return named_range;
+        }
+      }
+
+      return { row: 0, column: 0 }; // default for string types -- broken
+
+    }
+
+    return address; // already range or address
+
+  }
+
 }
 
 export interface ViewModel {

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

@@ -0,0 +1,47 @@
+
+import type { IArea, ICellAddress } from 'treb-base-types';
+
+export type DependencyList = Array<IArea|ICellAddress|undefined>;
+export type ExternalEditorCallback = (selection?: string) => DependencyList|undefined;
+
+// FIXME: if you want to keep the old interface, split into to separate types
+
+export interface ExternalEditorConfig {
+
+  // --- old interface ---------------------------------------------------------
+
+  /**
+   * list of dependencies to highlight. we support undefined entries in
+   * this list so you can use the result of `EmbeddedSpreadsheet.Resolve`,
+   * which may return undefined.
+   */
+  dependencies: DependencyList;
+
+  /**
+   * this callback will be called when the selection changes in the 
+   * spreadsheet and this external editor is active. return an updated
+   * list of dependencies to highlight. 
+   * 
+   * NOTE: this is currently synchronous, but don't rely on that. it
+   * might switch to async in the future depending on how it works in 
+   * practice.
+   */
+  update: ExternalEditorCallback;
+
+  // --- new interface ---------------------------------------------------------
+
+  /**  
+   * a list of nodes that will serve as editors. when you attach, we will do
+   * an initial pass of context highlighting. we highlight on text changes 
+   * and insert references if you make a selection in the spreadsheet while
+   * an editor is focused.
+   */
+  nodes: HTMLElement[];
+
+  /** 
+   * assume that we're editing a formula. does not require leading `=`.
+   * defaults to `true` for historical reasons.
+   */
+  assume_formula?: boolean;
+
+}

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

@@ -80,13 +80,15 @@ import { TileRange } from '../layout/base_layout';
 import { GridLayout } from '../layout/grid_layout';
 
 import type { GridSelection } from './grid_selection';
-import { OverlayEditor, OverlayEditorResult } from '../editors/overlay_editor';
+import { OverlayEditor } from '../editors/overlay_editor';
 
 import { TileRenderer } from '../render/tile_renderer';
 import type { GridEvent } from './grid_events';
 import { ErrorCode } from './grid_events';
 import type { LegacySerializedSheet } from './sheet_types';
+// import { FormulaBar } from '../editors/formula_bar';
 import { FormulaBar } from '../editors/formula_bar';
+
 import type { GridOptions } from './grid_options';
 import { BorderConstants } from './border_constants';
 import type { SerializeOptions } from './serialize_options';
@@ -114,7 +116,8 @@ import { GridBase } from './grid_base';
 import type { SetRangeOptions } from './set_range_options';
 import type { ClipboardCellData } from './clipboard_data';
 
-import type { ExternalEditorType } from './external_editor';
+import type { ExternalEditorConfig } from './external_editor_config';
+import { ExternalEditor } from '../editors/external_editor';
 
 interface DoubleClickData {
   timeout?: number;
@@ -148,7 +151,7 @@ export class Grid extends GridBase {
       this.UpdateAnnotationLayout();
       this.layout.UpdateAnnotation(this.active_sheet.annotations);
       this.layout.ApplyTheme(this.theme);
-      this.overlay_editor?.UpdateTheme(value);
+      this.overlay_editor?.UpdateScale(value);
       this.tab_bar?.UpdateScale(value);
   
       this.grid_events.Publish({
@@ -264,14 +267,18 @@ export class Grid extends GridBase {
 
   private RESIZE_PIXEL_BUFFER = 5;
 
-  private select_argument = false; // temp, WIP
+  /**
+   * formalizing the concept of external selection to support outside tooling.
+   * 
+   * FIXME: stop testing on this field. we need a better way to figure out
+   * if the external editor is active.
+   */
+  private external_editor_config?: Partial<ExternalEditorConfig>;
 
   /**
-   * not sure what select_argument was for (possibly outside client), but
-   * we're formalizing the concept of external selection to support outside
-   * tooling.
+   * support for external editor. created on demand.
    */
-  private external_editor: Partial<ExternalEditorType> | undefined;
+  private external_editor?: ExternalEditor;
 
   /**
    * flag indicating we're resizing, or hovering over a resize.
@@ -357,12 +364,11 @@ export class Grid extends GridBase {
    */
   constructor(
     options: GridOptions = {}, 
-    parser: Parser,
     model: DataModel,
     theme: Theme = DefaultTheme,
     initialze_dom = true ) {
 
-    super(options, parser, model);  
+    super(options, model);  
 
     this.decimal_separator_code = Localization.decimal_separator.charCodeAt(0);
 
@@ -1234,7 +1240,7 @@ export class Grid extends GridBase {
       this.UpdateLayout(); // in case we have changed font size
       // this.selection_renderer.Flush();
 
-      this.overlay_editor?.UpdateTheme(this.layout.scale);
+      this.overlay_editor?.UpdateScale(this.layout.scale);
 
       // if (this.formula_bar) this.formula_bar.UpdateTheme();
 
@@ -1659,21 +1665,48 @@ export class Grid extends GridBase {
    * want to have to use a duplicate internal field, it's clumsy and this
    * class isn't public-facing so it's not super important.
    */
-  public ExternalEditor(external_editor: Partial<ExternalEditorType>|undefined) {
+  public ExternalEditor(config: Partial<ExternalEditorConfig>|undefined) {
+
+    this.external_editor_config = config;
 
-    this.external_editor = external_editor;
+    if (config) {
 
-    if (external_editor) {
-      if (external_editor.dependencies) {
+      const areas: Area[] = (config.dependencies || []).filter(
+        <T>(test: T|undefined): test is T => !!test).map(reference => 
+          IsCellAddress(reference) ? new Area(reference) : new Area(reference.start, reference.end));
 
-        // FIXME: this is getting messy and we're doing it twice, consolidate
+      if (config.nodes?.length) {
+
+        if (!this.external_editor) {
+          const editor = new ExternalEditor(this.model, this.view);
+          this.external_editor = editor;
+
+          // should this persist, or should we only subscribe when we're active? (...)
+          // in theory, at least, it won't send any events unless something changes
+
+          editor.Subscribe(event => this.HighlightDependencies(editor.dependencies));
+        }
 
-        this.HighlightDependencies(external_editor.dependencies.filter(
-          <T>(entry: T|undefined): entry is T => !!entry).map(reference => 
-            IsCellAddress(reference) ? new Area(reference) : new Area(reference.start, reference.end)));
+        this.external_editor.AttachNodes(config.nodes, config.assume_formula ?? true);
+ 
       }
+      else {
+        if (this.external_editor) {
+          this.external_editor.Reset();
+        }
+      }
+
+      if (config.dependencies) {
+        this.HighlightDependencies(areas);
+      }
+
     }
     else {
+
+      if (this.external_editor) {
+        this.external_editor.Reset();
+      }
+
       this.ClearAdditionalSelections();
       this.RenderSelections(true);
     }
@@ -2534,8 +2567,8 @@ export class Grid extends GridBase {
 
     this.formula_bar = new FormulaBar(
       grid_container,
-      this.parser,
-      this.theme,
+      // this.parser,
+      // this.theme,
       this.model,
       this.view,
       this.options, autocomplete);
@@ -2711,13 +2744,12 @@ export class Grid extends GridBase {
 
     this.overlay_editor = new OverlayEditor(
         this.container,
-        this.parser,
         this.theme,
         this.model,
         this.view,
         autocomplete);
 
-    this.overlay_editor.UpdateTheme(this.layout.scale);
+    this.overlay_editor.UpdateScale(this.layout.scale);
     this.overlay_editor.autocomplete_matcher = this.autocomplete_matcher;
 
     this.overlay_editor.Subscribe(event => {
@@ -2745,7 +2777,11 @@ export class Grid extends GridBase {
           break;
 
         case 'end-selection':
+        case 'reset-selection':
           this.ClearSelection(this.active_selection);
+          if (this.overlay_editor?.target_address?.sheet_id && this.active_sheet.id !== this.overlay_editor.target_address.sheet_id) {
+            this.ActivateSheetID(this.overlay_editor.target_address.sheet_id);
+          }
           this.DelayedRender();
           break;
 
@@ -3732,7 +3768,7 @@ export class Grid extends GridBase {
       this.ClearAdditionalSelections();
     }
 
-    if (!selecting_argument || !this.formula_bar?.selecting) {
+    if (!selecting_argument || (!this.formula_bar?.selecting && !this.external_editor?.selecting)) {
 
       // not sure why this breaks the formula bar handler
 
@@ -4021,11 +4057,19 @@ export class Grid extends GridBase {
         if (this.overlay_editor?.editing) {
           // ...
         }
-        else if (this.external_editor) {
-          // ...
-        }
-        else if (this.select_argument) {
-          // ...
+        else if (this.external_editor_config) {
+
+          // there are two possible cases: either an update function
+          // or a full-on editor. we should probably test for both?
+
+          if (this.external_editor?.active) {
+            this.external_editor.FocusEditor();
+          }
+          if (this.external_editor_config.update) {
+            // not necessary?
+            // console.info('call update?');
+          }
+
         }
         else if (this.formula_bar) {
           this.formula_bar.FocusEditor();
@@ -4289,7 +4333,7 @@ export class Grid extends GridBase {
         label = Area.CellAddressToLabel(data.merge_area.start);
       }
 
-      if (this.external_editor || this.active_sheet.id !== this.editing_cell.sheet_id) {
+      if (this.external_editor_config || this.active_sheet.id !== this.editing_cell.sheet_id) {
         const name = this.active_sheet.name;
 
         if (QuotedSheetNameRegex.test(name)) {
@@ -4311,9 +4355,15 @@ export class Grid extends GridBase {
     else if (this.formula_bar && this.formula_bar.selecting) {
       this.formula_bar.InsertReference(label, 0);
     }
-    else if (this.external_editor) {
-      if (this.external_editor.update) {
-        const result = this.external_editor.update.call(0, label);
+    else if (this.external_editor_config) {
+
+      if (this.external_editor?.active) {
+        this.external_editor.FocusEditor();
+        this.external_editor.InsertReference(label, 0);
+      }
+
+      if (this.external_editor_config.update) {
+        const result = this.external_editor_config.update.call(0, label);
         if (result && Array.isArray(result)) {
           this.HighlightDependencies(
             result.filter(<T>(entry: T|undefined): entry is T => !!entry).map(reference => 
@@ -4321,12 +4371,14 @@ export class Grid extends GridBase {
         }
       }
     }
+    /*
     else if (this.select_argument) {
       this.grid_events.Publish({
         type: 'alternate-selection',
         selection: this.active_selection,
       });
     }
+    */
   }
 
   /**
@@ -4335,11 +4387,11 @@ export class Grid extends GridBase {
    *
    * FIXME: why is this not an accessor?
    */
-  private SelectingArgument() {
+  private SelectingArgument(): boolean {
     return (this.overlay_editor?.editing && this.overlay_editor?.selecting)
       || (this.formula_bar && this.formula_bar.selecting)
-      || (this.external_editor)
-      || (this.select_argument);
+      || (!!this.external_editor_config);
+      // || (this.select_argument);
   }
 
   /**
@@ -4371,16 +4423,16 @@ export class Grid extends GridBase {
       editor_open = true;
       const result = this.overlay_editor.HandleKeyDown(event);
       switch (result) {
-        case OverlayEditorResult.handled:
+        case 'handled':
           return;
 
-        case OverlayEditorResult.discard:
+        case 'discard':
           this.editing_state = EditingState.NotEditing;
           this.DismissEditor();
           this.DelayedRender();
           return;
 
-        case OverlayEditorResult.commit:
+        case 'commit':
 
           // FIXME: unify this (to the extent possible) w/ the other editor
 

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

@@ -132,7 +132,6 @@ export class GridBase {
 
   constructor(
     options: GridOptions = {},
-    parser: Parser,
     model: DataModel) {
 
     this.model = model;
@@ -144,7 +143,7 @@ export class GridBase {
 
     // shared parser
 
-    this.parser = parser;
+    this.parser = model.parser;
 
     // apply default options, meaning that you need to explicitly set/unset
     // in order to change behavior. FIXME: this is ok for flat structure, but

package/treb-grid/src/types/scale-control.ts

@@ -137,7 +137,7 @@ export class ScaleControl extends EventSource<ScaleEvent> {
 
     });
 
-    this.slider = DOM.Create<HTMLInputElement>('input', undefined, popup, undefined, {
+    this.slider = DOM.Create('input', undefined, popup, undefined, {
       type: 'range',
       min: '50',
       max: '200',

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

@@ -1,33 +1,65 @@
-/*
- * 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 class DOMUtilities {
 
   /** creates a div and assigns class name/names */
-  public static CreateDiv(classes = '', parent?: HTMLElement, scope?: string){
-    return this.Create<HTMLDivElement>('div', classes, parent, scope);
+  public static CreateDiv(classes = '', parent?: HTMLElement, scope?: string): HTMLDivElement {
+    return this.Create('div', classes, parent, scope);
+  }
+
+  /** better typing */
+  public static Create<K extends keyof HTMLElementTagNameMap>(
+      tag: K, 
+      class_name = '', 
+      parent?: HTMLElement, 
+      scope?: string, 
+      attrs?: Record<string, string>): HTMLElementTagNameMap[K] {
+ 
+    const element = document.createElement(tag);
+
+    if (class_name) {
+      element.className = class_name;
+    }
+
+    if (scope) {
+      element.setAttribute(scope, ''); // scope?
+    }
+
+    if (attrs) {
+      const keys = Object.keys(attrs);
+      for (const key of keys) {
+        element.setAttribute(key, attrs[key]);
+      }
+    }
+
+    if (parent) {
+      parent.appendChild(element);
+    }
+    
+    return element;
   }
 
-  /** generic element constructor. shame we need the tag AND the type. */
-  public static Create<E extends HTMLElement>(tag = '', classes = '', parent?: HTMLElement, scope?: string, attrs?: Record<string, string>){
+  /* * generic element constructor. shame we need the tag AND the type. * /
+  public static Create1<E extends HTMLElement>(tag = '', classes = '', parent?: HTMLElement, scope?: string, attrs?: Record<string, string>){
     const element = document.createElement(tag) as E;
     if (classes) element.setAttribute('class', classes);
     if (scope) element.setAttribute(scope, '');
@@ -40,5 +72,6 @@ export class DOMUtilities {
     if (parent) parent.appendChild(element);
     return element;
   }
+  */
 
 }