@trebco/treb 28.13.2 → 28.15.0

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

@@ -29,9 +29,11 @@ import { DOMContext } from 'treb-base-types';
 
 // --- from formula_bar ---
 
+/*
 export interface FormulaBarResizeEvent {
   type: 'formula-bar-resize';
 }
+*/
 
 export interface FormulaButtonEvent {
   type: 'formula-button';
@@ -46,7 +48,7 @@ export interface AddressLabelEvent {
 
 export type FormulaBar2Event
   = FormulaButtonEvent
-  | FormulaBarResizeEvent
+  // | FormulaBarResizeEvent
   | AddressLabelEvent
   ;
 
@@ -172,6 +174,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
 
     this.InitAddressLabel();
 
+    /*
     if (this.options.insert_function_button) {
       this.button = DOM.Create('button', 'formula-button', inner_node);
       this.button.addEventListener('click', () => {
@@ -179,6 +182,7 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
         this.Publish({ type: 'formula-button', formula });
       });
     }
+    */
 
     this.container_node = container.querySelector('.treb-editor-container') as HTMLDivElement;
     const target = this.container_node.firstElementChild as HTMLDivElement;
@@ -270,9 +274,18 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     this.RegisterListener(descriptor, 'keydown', this.FormulaKeyDown.bind(this));
     this.RegisterListener(descriptor, 'keyup', this.FormulaKeyUp.bind(this));
 
+    // why is this here, instead of in markup? just an oversight?
+
     if (this.options.expand_formula_button) {
+
+      let focus_related_target: HTMLElement|undefined;
+
       this.expand_button = DOM.Create('button', 'expand-button', inner_node, { 
         events: {
+          focus: (event: FocusEvent) => {
+            focus_related_target = event.relatedTarget instanceof HTMLElement ? event.relatedTarget : undefined;
+          },
+
           click: (event: MouseEvent) => {
             event.stopPropagation();
             event.preventDefault();
@@ -285,6 +298,11 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
             else {
               inner_node.setAttribute('expanded', '');
             }
+
+            if (focus_related_target) {
+              focus_related_target.focus();
+            }
+
           },
         },
       });
@@ -297,6 +315,10 @@ export class FormulaBar extends Editor<FormulaBar2Event|FormulaEditorEvent> {
     return element === this.active_editor?.node;
   }
 
+  public IsExpandButton(element: HTMLElement): boolean {
+    return this.expand_button && (element === this.expand_button);
+  }
+
   public InitAddressLabel() {
 
     this.address_label.contentEditable = 'true';

package/treb-grid/src/render/tile_renderer.ts

@@ -34,6 +34,7 @@ import type { BaseLayout, TileRange } from '../layout/base_layout';
 import type { DataModel, ViewModel } from '../types/data_model';
 import type { GridOptions } from '../types/grid_options';
 
+const DEFAULT_INDENT = '  '; // two spaces in the current font
 const BASELINE = 'bottom';
 const WK = /webkit/i.test(typeof navigator === 'undefined' ? '' : navigator?.userAgent || '') ? 1 : 0;
 
@@ -723,6 +724,15 @@ export class TileRenderer {
     let override_formatting: string | undefined;
     let formatted = cell.editing ? '' : cell.formatted; // <-- empty on editing, to remove overflows
 
+    // precalculate indent as string so we can use layout
+
+    let indent = '';
+    if (style.indent) {
+      for (let i = 0; i < style.indent; i++) {
+        indent += DEFAULT_INDENT;
+      }
+    }
+
     if (Array.isArray(formatted)) {
 
       // type 1 is a multi-part formatted string; used for number formats.
@@ -733,6 +743,15 @@ export class TileRenderer {
 
       // this is a single line, with number formatting
 
+      if (indent) {
+        if (style.horizontal_align === 'left') {
+          formatted.unshift({ text: indent });
+        }
+        else if (style.horizontal_align === 'right') {
+          formatted.push({ text: indent });
+        }
+      }
+
       for (const part of formatted) {
         if (part.flag === TextPartFlag.formatting) {
           override_formatting = part.text;
@@ -810,11 +829,14 @@ export class TileRenderer {
 
       // for wrapping
 
-      const bound = cell_width - (2 * this.cell_edge_buffer);
+      let bound = cell_width - (2 * this.cell_edge_buffer);
       const strings: RenderTextPart[][] = [];
 
       if (style.wrap) {
 
+        const indent_width = (indent && style.horizontal_align !== 'center') ? context.measureText(indent).width : 0;
+        bound -= indent_width;
+
         for (const line of md) {
 
           // we should probably normalize whitespace -- because formatting
@@ -921,14 +943,25 @@ export class TileRenderer {
 
             max_width = Math.max(max_width, last.width);
 
-            strings.push(line2.map((metric) => {
+            const line_string = line2.map((metric) => {
               return {
                 ...metric.part,
                 hidden: false, 
                 width: metric.width, 
                 text: metric.text, 
               };
-            }));
+            });
+
+            if (style.indent) {
+              if (style.horizontal_align === 'left') {
+                line_string.unshift({ text: indent, hidden: false, width: indent_width });
+              }
+              else if (style.horizontal_align === 'right') {
+                line_string.push({ text: indent, hidden: false, width: indent_width });
+              }
+            }
+
+            strings.push(line_string);
 
           }
 
@@ -939,9 +972,19 @@ export class TileRenderer {
 
         // simple case
 
+
         for (const line of md) {
           const parts: RenderTextPart[] = [];
 
+          if (style.indent) {
+            if (style.horizontal_align === 'left') {
+              line.unshift({ text: indent });
+            }
+            else if (style.horizontal_align === 'right') {
+              line.push({ text: indent });
+            }
+          }
+
           let line_width = 0;
 
           for (const element of line) {

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

@@ -19,7 +19,7 @@
  * 
  */
 
-import type { ICellAddress, AnnotationLayout, IRectangle } from 'treb-base-types';
+import type { ICellAddress, AnnotationLayout, IRectangle, CellStyle } from 'treb-base-types';
 import { Rectangle } from 'treb-base-types';
 
 /**
@@ -97,7 +97,7 @@ export interface ImageAnnotationData {
   
 }
 
-export type AnnotationType = 'treb-chart'|'image'|'external';
+export type AnnotationType = 'treb-chart'|'image'|'textbox'|'external';
 
 /**
  * splitting persisted data from the annotation class. that class might
@@ -182,12 +182,26 @@ export interface AnnotationChartData extends AnnotationDataBase {
   type: 'treb-chart';
 }
 
+export interface AnnotationTextBoxData extends AnnotationDataBase {
+  type: 'textbox';
+  data: {
+    style?: CellStyle;
+    paragraphs: { 
+      style?: CellStyle,
+      content: {
+        text: string, 
+        style?: CellStyle 
+      }[],
+    }[];
+  };
+};
+
 export interface AnnotationExternalData extends AnnotationDataBase {
   type: 'external';
   data: Record<string, string>;
 }
 
-export type AnnotationData = AnnotationChartData | AnnotationImageData | AnnotationExternalData;
+export type AnnotationData = AnnotationChartData | AnnotationImageData | AnnotationExternalData | AnnotationTextBoxData;
 
 /**
  * why is this a class? it doesn't do anything.

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

@@ -634,6 +634,14 @@ export class Grid extends GridBase {
               this.editing_annotation = annotation;
               this.layout.ShowSelections(true);
             }
+            else if (this.formula_bar?.IsExpandButton(event.relatedTarget as HTMLElement)) {
+
+              // for this particular case, do nothing. basically you are 
+              // expanding/contracting the formula bar. we want to preserve
+              // the selected annotation, if any. after the operation we'll
+              // restore focus.
+
+            }
             else {
               if (this.selected_annotation === annotation) {
                 this.selected_annotation = undefined;

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

@@ -68,8 +68,9 @@ export interface GridOptions {
   /* * show delete tab in the tab bar */
   // delete_tab?: boolean;
 
-  /** show the "insert function" button. requires formula bar. */
+  /* * show the "insert function" button. requires formula bar. * /
   insert_function_button?: boolean;
+  */
 
   /** button to increase/reduce size of formula editor */
   expand_formula_button?: boolean;
@@ -97,7 +98,7 @@ export const DefaultGridOptions: GridOptions = {
   formula_bar: true,
   add_tab: false,
   tab_bar: 'auto',
-  insert_function_button: false,
+  // insert_function_button: false,
   expand_formula_button: false,
   expand: true,
   repaint_on_cell_change: true,

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

@@ -92,10 +92,17 @@ export class NamedRangeCollection {
       console.warn('invalid name');
       return false;
     }
+
+    // why is this considered invalid here? I've seen it done. 
+    // maybe something we're doing with these ranges doesn't 
+    // collapse them? (...)
+
     if (range.entire_column || range.entire_row) {
-      console.warn('invalid range');
+      console.info({range});
+      console.warn(`invalid range`);
       return false;
     }
+
     this.forward[validated] = range;
     if (apply) {
       this.RebuildList();