@trebco/treb 31.3.2 → 31.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "31.3.2",
+  "version": "31.3.3",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {

package/treb-embed/style/formula-bar.scss

@@ -121,6 +121,10 @@
         flex-direction: column;
         justify-content: center;
 
+        & > .treb-editor-shadow {
+          opacity: .4;
+        }
+
       }
 
       &[expanded] {

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

@@ -67,6 +67,26 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
   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;
@@ -244,6 +264,12 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
       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;
@@ -555,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/types/grid.ts

@@ -6692,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;
@@ -6699,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 = '';
       }
     }
@@ -6708,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; }
         }
       }
 
@@ -6752,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();
         }
 
       }