@trebco/treb 31.1.3 → 31.3.3

package/treb-grid/src/editors/formula_bar.ts

@@ -46,10 +46,16 @@ export interface AddressLabelEvent {
   text?: string;
 }
 
+export interface TollEvent {
+  type: 'toll';
+  value?: string;
+}
+
 export type FormulaBar2Event
   = FormulaButtonEvent
   // | FormulaBarResizeEvent
   | AddressLabelEvent
+  | TollEvent
   ;
 
 // ---
@@ -59,6 +65,28 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
   public committed = false;
 
+  public tolled?: { text: string, substring: string };
+
+  /** 
+   * if we're showing a spill array and it's not the first cell, show
+   * the formula using a shadow style (and it's not editable).
+   */
+  public shadow_ = false;
+
+  public get shadow() { return this.shadow_; }
+
+  public set shadow(shadow: boolean) { 
+    this.shadow_ = shadow;
+    if (this.active_editor?.node) {
+      if (shadow) {
+        this.active_editor.node.classList.add('treb-editor-shadow');
+      }
+      else {
+        this.active_editor.node.classList.remove('treb-editor-shadow');
+     }
+    }
+  }
+
   /** is the _editor_ currently focused */
   // tslint:disable-next-line:variable-name
   public focused_ = false;
@@ -221,16 +249,27 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     this.active_editor.node.spellcheck = false; // change the default back
 
     this.RegisterListener(descriptor, 'focusin', () => {
-     
+
+      const restore = this.tolled !== undefined;
+      this.tolled = undefined;
+
       // this.editor_node.addEventListener('focusin', () => {
 
       // can't happen
-      if (!this.active_editor) { return; }
+      if (!this.active_editor) { 
+        return; 
+      }
 
       // console.info('focus in');
 
       let text = this.active_editor.node.textContent || '';
 
+      if (this.shadow) {
+        this.shadow = false;
+        text = '';
+        this.active_editor.node.textContent = text;
+        this.active_editor.formatted_text = undefined; // why do we clear this here? 
+      }
       if (text[0] === '{' && text[text.length - 1] === '}') {
         text = text.substring(1, text.length - 1);
         this.active_editor.node.textContent = text;
@@ -243,6 +282,18 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
       this.UpdateText(this.active_editor);
       this.UpdateColors(undefined, true); // toll update event -- we will send in order, below
 
+      if (restore) {
+
+        // FIXME: we probably want to hold the caret so we can restore
+        // to a particular place. or set the caret explicitly.
+
+        const node = this.NodeAtIndex(text.length - 1);
+        // console.info({text, node});
+        if (node) {
+          this.SetCaret({node: node as ChildNode, offset: (node.textContent || '').length});
+        }
+      }
+
       this.committed = false;
 
       this.Publish([
@@ -254,7 +305,14 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
     });
 
-    this.RegisterListener(descriptor, 'focusout', () => {
+    this.RegisterListener(descriptor, 'focusout', (event: FocusEvent) => {
+
+      // this is new, to support an external "insert function" dialog.
+      // still working out the semantics, but essentially we won't commit
+      // and we'll keep pending text. we need some sort of flag to indicate
+      // that we're in the editing state.
+
+      const toll = (event.relatedTarget instanceof HTMLElement && event.relatedTarget.dataset.tollEditor);
 
       if (this.selecting) {
         console.info('focusout, but selecting...');
@@ -265,7 +323,27 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
       const text = (this.active_editor ? 
         this.GetTextContent(this.active_editor.node).join('') : '').trim();
 
-      if (this.committed) {
+      if (toll) {
+
+        let substring = text;
+        if (this.active_editor?.node) {
+          const s2c = this.SubstringToCaret2(this.active_editor.node, true);
+          substring = s2c[0];
+        }
+
+        this.committed = true;
+        this.tolled = {
+          text,
+          substring,
+        };
+        
+        this.Publish({
+          type: 'toll',
+          value: text,
+        });
+
+      }
+      else if (this.committed) {
         this.Publish([
           { type: 'stop-editing' },
         ]);
@@ -278,14 +356,10 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
         });
       }
 
+      // huh? we're publishing this twice?
+
       this.Publish([
         { type: 'stop-editing' },
-        /*
-        {
-          type: 'commit',
-          value: text,
-        }
-          */
       ]);
 
       this.focused_ = false;
@@ -336,6 +410,31 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
   }
 
+  /**
+   * we might be overthinking this, we don't necessarily need to restore.
+   * 
+   * this method will focus the editor and set the caret (to the end, atm)
+   * in case of a tolled editor. the idea is you call Restore() after your 
+   * dialog is complete and it's like you are back where you started.
+   * 
+   * alternatively, call `Release()` to clean up any saved state.
+   */
+  public Restore() {
+    const target = this.container_node?.firstElementChild as HTMLDivElement;
+    if (target) {
+      target.focus();
+    }
+  }
+
+  /**
+   * release anything that's been tolled. call this if you toll the editor
+   * but don't want to restore it when you are done. I think this will be
+   * the default.
+   */
+  public Release() {
+    this.tolled = undefined;
+  }
+
   public IsElement(element: HTMLElement): boolean {
     return element === this.active_editor?.node;
   }
@@ -482,6 +581,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     case 'Escape':
     case 'Esc':
       // this.selecting_ = false;
+      this.committed = true;
       this.Publish({ type: 'discard' });
       // this.FlushReference();
       break;

package/treb-grid/src/editors/overlay_editor.ts

@@ -400,6 +400,17 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
 
   }
 
+  public GetEditState() {
+    const text = this.active_editor?.node?.textContent || '';
+
+    let substring = '';
+    if (this.active_editor?.node) {
+      substring = this.SubstringToCaret2(this.active_editor.node, true)[0];
+    }
+
+    return { text, substring };
+  }
+
   /**
    * check if we want to handle this key. we have some special cases (tab, 
    * enter, escape) where we do take some action but we also let the 

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

@@ -219,6 +219,9 @@ export class Grid extends GridBase {
   /** */
   private editing_annotation?: Annotation;
 
+  /** */
+  private pending_reset_selection = false;
+
   /** */
   private view_node?: HTMLElement;
 
@@ -1742,8 +1745,15 @@ export class Grid extends GridBase {
     if (this.selected_annotation) {
 
       if (click) {
-        this.selected_annotation = undefined;
-        this.ShowGridSelection();
+
+        if (this.editing_annotation === this.selected_annotation) {
+          this.pending_reset_selection = true;
+        }
+        else {
+          this.selected_annotation = undefined;
+          this.ShowGridSelection();
+        }
+
       }
       else {
         // console.info("reselect annotation...", this.selected_annotation);
@@ -2964,6 +2974,10 @@ export class Grid extends GridBase {
 
         case 'stop-editing':
 
+          if (this.pending_reset_selection) {
+            this.ShowGridSelection();
+          }
+          this.pending_reset_selection = false;
           this.editing_state = EditingState.NotEditing;
           break;
 
@@ -2986,6 +3000,19 @@ export class Grid extends GridBase {
           this.editing_selection = { ...this.primary_selection };
           break;
 
+        case 'toll':
+
+          // this is basically "stop editing", with some special
+          // semantics to capture the editing state. it's intended
+          // for external clients, specifically for an "insert function"
+          // dialog.
+
+          this.editing_state = EditingState.NotEditing;
+          this.ClearAdditionalSelections();
+          this.ClearSelection(this.active_selection);
+          this.DelayedRender();
+          break;
+
         case 'discard':
 
           this.editing_state = EditingState.NotEditing;
@@ -3037,10 +3064,14 @@ export class Grid extends GridBase {
             this.ClearAdditionalSelections();
             this.ClearSelection(this.active_selection);
             annotation.data.formula = event.value ? this.FixFormula(event.value) : '';
-            const node = this.editing_annotation.view[this.view_index]?.node;
-            if (node) {
-              node.focus();
+
+            if (!this.pending_reset_selection) {
+              const node = this.editing_annotation.view[this.view_index]?.node;
+              if (node) {
+                node.focus();
+              }
             }
+
             this.grid_events.Publish({ type: 'annotation', event: 'update', annotation });
             this.editing_annotation = undefined;
             this.DelayedRender();
@@ -4774,6 +4805,26 @@ export class Grid extends GridBase {
       // || (this.select_argument);
   }
 
+  /**
+   * for external clients. the expected pattern is 
+   *  - start overlay editor
+   *  - click on "insert function"
+   *  - do something
+   *  - release editor (this function)
+   */
+  public ReleaseOverlayEditor() {
+    this.editing_state = EditingState.NotEditing;
+    this.DismissEditor();
+    this.DelayedRender();
+  }
+
+  public RestoreOverlayEditor() {
+
+    // ?
+    this.overlay_editor?.FocusEditor();
+  
+  }
+
   /**
    * consolidated event handler for overlay, which both handles grid keys
    * and acts as the ICE, depending on state. going to be a little tricky
@@ -6641,6 +6692,7 @@ export class Grid extends GridBase {
 
     if (override) {
       if (this.formula_bar) {
+        this.formula_bar.shadow = false;
         this.formula_bar.formula = override;
       }
       return;
@@ -6648,6 +6700,7 @@ export class Grid extends GridBase {
 
     if (this.primary_selection.empty) {
       if (this.formula_bar) {
+        this.formula_bar.shadow = false;
         this.formula_bar.formula = '';
       }
     }
@@ -6657,11 +6710,14 @@ export class Grid extends GridBase {
       // optimally we would do this check prior to this call, but
       // it's the uncommon case... not sure how important that is
 
-      const head = data.merge_area || data.area;
+      const head = data.merge_area || data.area || data.spill;
+      let shadow = false;
+      
       if (head) {
         if (head.start.column !== this.primary_selection.target.column
           || head.start.row !== this.primary_selection.target.row) {
           data = this.active_sheet.CellData(head.start);
+          if (data.spill) { shadow = true; }
         }
       }
 
@@ -6701,12 +6757,13 @@ export class Grid extends GridBase {
 
       if (this.formula_bar) {
 
-        // add braces for area
+        this.formula_bar.shadow = shadow;
+
         if (data.area) {
           this.formula_bar.formula = '{' + (value || '') + '}';
         }
         else {
-          this.formula_bar.formula = (typeof value !== 'undefined') ? value.toString() : ''; // value || ''; // what about zero?
+          this.formula_bar.formula = (value ?? '').toString();
         }
 
       }

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

@@ -161,6 +161,10 @@ export interface UnitCall extends BaseUnit {
   name: string;
   position: number;
   args: ExpressionUnit[];
+
+  /** testing */
+  end?: number;
+
 }
 
 /**

package/treb-parser/src/parser.ts

@@ -36,6 +36,7 @@ import type {
   RenderOptions,
   BaseExpressionUnit,
 } from './parser-types';
+
 import {
   ArgumentSeparatorType,
   DecimalMarkType,
@@ -1137,7 +1138,6 @@ export class Parser {
 
       }
 
-
       // so we're moving complex handling to post-reordering, to support
       // precedence properly. there's still one thing we have to do here,
       // though: handle those cases of naked imaginary values "i". these
@@ -1233,7 +1233,13 @@ export class Parser {
 
     // return this.BinaryToRange(this.ArrangeUnits(stream));
     // return this.ArrangeUnits(stream);
+
+    // const arranged = this.ArrangeUnits(stream);
+    // const result = this.BinaryToComplex(arranged);
+    // return result;
+
     return this.BinaryToComplex(this.ArrangeUnits(stream));
+
   }
 
   /**
@@ -1808,6 +1814,7 @@ export class Parser {
    * reorders operations for precendence
    */
   protected ArrangeUnits(stream: ExpressionUnit[]): ExpressionUnit {
+
     // probably should not happen
     if (stream.length === 0) return { type: 'missing', id: this.id_counter++ };
 
@@ -1908,7 +1915,41 @@ export class Parser {
         }
       }
 
-      if (stack.length < 2) {
+      //
+      // why is this 2? are we thinking about combining complex numbers?
+      // or ranges? (those would be binary). or was this for dimensioned
+      // quantities? [actually that makes sense] [A: no, it wasn't that]
+      //
+      // actually what's the case where this is triggered and it's _not_
+      // an error? can we find that?
+      // 
+
+      if (stack.length < 2) { 
+
+        // we know that `element` is not an operator, because we 
+        // would have consumed it
+
+        if (stack.length === 1) {
+          const a = stack[0].type;
+
+          if (a !== 'operator') {
+
+            // console.warn("unexpected element", stack[0], element);
+
+            this.error = `unexpected element [3]: ${element.type}`;
+            this.error_position = (element.type === 'missing' || element.type === 'group' || element.type === 'dimensioned') ? -1 : element.position;
+            this.valid = false;
+            return {
+              type: 'group',
+              id: this.id_counter++,
+              elements: stream,
+              explicit: false,
+            };
+
+          }
+
+        }
+        
         stack.push(element);
       }
       else if (stack[stack.length - 1].type === 'operator') {
@@ -2353,6 +2394,7 @@ export class Parser {
         name: str,
         args,
         position,
+        end: this.index, // testing
       };
     }