@trebco/treb 31.4.0 → 31.7.2

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

@@ -104,7 +104,9 @@ import type {
   InsertRowsCommand, InsertColumnsCommand, SetNameCommand,
   ActivateSheetCommand, DataValidationCommand, 
   ResizeRowsCommand, ResizeColumnsCommand, 
-  SelectCommand
+  SelectCommand,
+  CreateAnnotationCommand,
+  RemoveAnnotationCommand
 } from './grid_command';
 import { CommandKey
 } from './grid_command';
@@ -705,6 +707,26 @@ export class Grid extends GridBase {
     return undefined;
   }
   
+  public CreateAnnotation(
+        properties: Partial<AnnotationData> = {}, 
+        sheet: Sheet = this.active_sheet,
+        add_to_sheet = true, 
+        offset = false, 
+        target?: IArea|IRectangle,
+        focus?: boolean ) {
+
+    this.ExecCommand({
+      key: CommandKey.CreateAnnotation,
+      properties,
+      add_to_sheet,
+      offset,
+      target,
+      focus,
+      sheet,
+    });
+
+  }
+
   /**
    * create an annotation, with properties, without an original object.
    * optionally (and by default) add to sheet.
@@ -716,10 +738,11 @@ export class Grid extends GridBase {
    * @param target new parameter allows setting annotation as rect or as
    * cell range
    */
-  public CreateAnnotation(properties: Partial<AnnotationData> = {}, add_to_sheet = true, offset = false, target?: Partial<Area>|IRectangle): Annotation {
-    const annotation = new Annotation(properties);
+  protected CreateAnnotationInternal(command: CreateAnnotationCommand) {
 
-    if (offset) {
+    const annotation = new Annotation(command.properties);
+
+    if (command.offset) {
 
       // to offset, we have to have layout (or at least scaled rect)
       if (!annotation.data.layout && annotation.scaled_rect) {
@@ -734,7 +757,7 @@ export class Grid extends GridBase {
         let recheck = true;
         while (recheck) {
           recheck = false;
-          for (const test of this.active_sheet.annotations) {
+          for (const test of command.sheet.annotations) {
             if (test === annotation) { continue; }
             if (test.scaled_rect && test.scaled_rect.top === target_rect.top && test.scaled_rect.left === target_rect.left) {
               target_rect = target_rect.Shift(20, 20);
@@ -747,28 +770,44 @@ export class Grid extends GridBase {
       }
     }
 
-    if (target) {
-      if (Rectangle.IsRectangle(target)) {
+    if (command.target) {
+      if (Rectangle.IsRectangle(command.target)) {
         // console.info('creating from rectangle,', target);
         annotation.data.layout = undefined;
-        annotation.rect = Rectangle.Create(target);
+        annotation.rect = Rectangle.Create(command.target);
       }
-      else if (target.start) {
+      else if (command.target.start) {
         annotation.rect = undefined;
-        annotation.data.layout = this.layout.AddressToAnnotationLayout(target.start, target.end||target.start);
+        annotation.data.layout = this.layout.AddressToAnnotationLayout(command.target.start, command.target.end||command.target.start);
       }
     }
     
-    if (add_to_sheet) {
+    if (command.add_to_sheet) {
 
       // ensure we haven't already added this
-      if (!this.active_sheet.annotations.some((test) => test === annotation)) {
-        this.active_sheet.annotations.push(annotation);
+      if (!command.sheet.annotations.some((test) => test === annotation)) {
+        command.sheet.annotations.push(annotation);
       }
 
       this.AddAnnotation(annotation);
     }
-    return annotation;
+
+    if (command.focus) {
+
+      // pending... we need to know which view it was pasted in. maybe this
+      // should be the index?
+
+      const view = annotation.view[this.view_index];
+      if (view && view.node) {
+        const node = view.node;
+        setTimeout(() => {
+          node.focus();
+        }, 1);
+      }
+
+    }
+
+    // return annotation;
   }
 
   /** placeholder */
@@ -1060,21 +1099,17 @@ export class Grid extends GridBase {
    * the parent (although the node still exists in the annotation, if
    * it existed before).
    */
-  public RemoveAnnotation(annotation: Annotation): void {
-    for (let i = 0; i < this.active_sheet.annotations.length; i++) {
-      if (annotation === this.active_sheet.annotations[i]) {
-        this.active_sheet.annotations.splice(i, 1);
-
-        this.layout.RemoveAnnotation(annotation);
+  public RemoveAnnotation(annotation: Annotation, sheet = this.active_sheet): void {
+    this.ExecCommand({
+      key: CommandKey.RemoveAnnotation,
+      annotation,
+      sheet,
+    });
+  }
 
-        this.grid_events.Publish({
-          type: 'annotation',
-          annotation,
-          event: 'delete',
-        });
-        return;
-      }
-    }
+  protected RemoveAnnotationInternal(command: RemoveAnnotationCommand) {
+    super.RemoveAnnotationInternal(command);
+    this.layout.RemoveAnnotation(command.annotation);
   }
 
   /**
@@ -2442,6 +2477,15 @@ export class Grid extends GridBase {
     this.DelayedRender(force, area);
   }
 
+  /**
+   * update annotation layouts (not content)
+   */
+  public UpdateAnnotations() {
+    if (this.active_sheet.annotations.length) {
+      this.layout.UpdateAnnotation(this.active_sheet.annotations, this.theme);
+    }
+  }
+
   /* *
    * API method
    *
@@ -2688,6 +2732,18 @@ export class Grid extends GridBase {
     
   }
 
+  /**
+   * this is intended to synchronize views when annotations are added/removed.
+   * there should be no need to call it if there's only one view.
+   */
+  public RefreshAnnotations() {
+
+    this.RemoveAnnotationNodes();
+    for (const element of this.active_sheet.annotations) {
+      this.AddAnnotation(element, true, true);
+    }
+
+  }
 
   /**
    * specialization for grid. note that we don't call superclass,
@@ -3946,7 +4002,14 @@ export class Grid extends GridBase {
     if (cell?.note) {
 
       // optional MD formatting
-      const md = this.options.markdown ? MDParser.instance.HTML(MDParser.instance.Parse(cell.note)) : undefined;
+
+      // UPDATE: we should allow MD in notes irrespective of the cell 
+      // markdown setting. or maybe split the two settings? it makes
+      // a lot of sense in comments, even if you don't want it in cells.
+
+      const parsed = MDParser.instance.Parse(cell.note);
+
+      const md = this.options.comment_markdown ? MDParser.instance.HTML(parsed, { br: false }) : undefined;
       this.layout.ShowNote(cell.note, address, event, md);
 
       this.hover_data.note = true;
@@ -7297,6 +7360,9 @@ export class Grid extends GridBase {
             }
           }
         }
+
+        this.CreateAnnotation(composite.data, undefined, true, true, undefined, true);
+        /*
         const annotation = this.CreateAnnotation(composite.data, true, true);
         const view = annotation.view[this.view_index];
         if (view && view.node) {
@@ -7305,6 +7371,7 @@ export class Grid extends GridBase {
             node.focus();
           }, 1);
         }
+        */
       }
       catch (e) {
         console.error(e);

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

@@ -43,7 +43,7 @@ import type { DataModel, ConditionalFormat, // MacroFunction, SerializedModel, S
 import type { Parser, UnitAddress} from 'treb-parser';
 import { type ExpressionUnit, IllegalSheetNameRegex, ParseCSV, DecimalMarkType } from 'treb-parser';
 import { Area, IsCellAddress, ValueType, DefaultTableSortOptions } from 'treb-base-types';
-import type { ICellAddress, IArea, Cell, CellValue, CellStyle, Table, TableSortOptions, TableTheme, Complex, PatchOptions as PatchAreaOptions } from 'treb-base-types';
+import type { ICellAddress, IArea, Cell, CellValue, CellStyle, Table, TableSortOptions, TableTheme, Complex, PatchOptions as PatchAreaOptions, Color } from 'treb-base-types';
 
 import { Sheet, type SerializeOptions, type Annotation } from 'treb-data-model';
 
@@ -51,9 +51,9 @@ import type { FunctionDescriptor} from '../editors/autocomplete_matcher';
 import { AutocompleteMatcher } from '../editors/autocomplete_matcher';
 import { NumberFormat, ValueParser } from 'treb-format';
 
-import type { GridEvent } from './grid_events';
+import type { DataEvent, GridEvent, StyleEvent } from './grid_events';
 import { ErrorCode } from './grid_events';
-import type { CommandRecord, DataValidationCommand, DuplicateSheetCommand, FreezeCommand, InsertColumnsCommand, InsertRowsCommand, ResizeColumnsCommand, ResizeRowsCommand, SelectCommand, SetRangeCommand, ShowSheetCommand, SortTableCommand } from './grid_command';
+import type { CommandRecord, CreateAnnotationCommand, DataValidationCommand, DuplicateSheetCommand, FreezeCommand, InsertColumnsCommand, InsertRowsCommand, RemoveAnnotationCommand, ResizeColumnsCommand, ResizeRowsCommand, SelectCommand, SetRangeCommand, ShowSheetCommand, SortTableCommand } from './grid_command';
 import { DefaultGridOptions, type GridOptions } from './grid_options';
 
 import { BorderConstants } from './border_constants';
@@ -813,6 +813,34 @@ export class GridBase {
 
   }
 
+  protected RemoveAnnotationInternal(command: RemoveAnnotationCommand) {
+
+    for (let i = 0; i < command.sheet.annotations.length; i++) {
+      if (command.annotation === command.sheet.annotations[i]) {
+        command.sheet.annotations.splice(i, 1);
+
+        // subclass only // this.layout.RemoveAnnotation(annotation);
+
+        // do we still need this message? not sure
+
+        this.grid_events.Publish({
+          type: 'annotation',
+          annotation: command.annotation,
+          event: 'delete',
+        });
+
+        return;
+      }
+    }
+    
+  }
+
+  /** placeholder */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected CreateAnnotationInternal(command: CreateAnnotationCommand) {
+    
+  }
+
   /**
    * resize rows. this supports auto size, but that will fail in !ui grid,
    * because it uses HTML. also non-ui doesn't really need to worry about 
@@ -1904,6 +1932,7 @@ export class GridBase {
         
         // nothing
         case CommandKey.Null:
+        case CommandKey.TabColor:
         case CommandKey.ShowHeaders:
         case CommandKey.ShowSheet:
         case CommandKey.AddSheet:
@@ -1913,6 +1942,8 @@ export class GridBase {
         case CommandKey.RenameSheet:
         case CommandKey.ReorderSheet:
         case CommandKey.Reset:
+        case CommandKey.CreateAnnotation:
+        case CommandKey.RemoveAnnotation:
           break;
 
         /*
@@ -2009,6 +2040,14 @@ export class GridBase {
 
   }
 
+  public TabColor(sheet: Sheet, color?: Color) {
+    this.ExecCommand({
+      key: CommandKey.TabColor,
+      sheet,
+      color,
+    });
+  }
+
   /**
    * add sheet. data only.
    */
@@ -4183,6 +4222,20 @@ export class GridBase {
           flags.structure_event = true;
           break;
 
+        case CommandKey.TabColor:
+          command.sheet.tab_color = command.color;
+
+          // NOTE: the flag.sheets originally did not update tab colors,
+          // which were cached. we could create a new flag for that, or 
+          // we could just refresh the colors. since there aren't that
+          // many of them, it's probably OK to just refresh the colors any
+          // time this flag is set. if that becomes a perf issue in the 
+          // future we could add a new flag.
+
+          flags.sheets = true; // repaint tab bar
+          flags.structure_event = true;
+          break;
+
         case CommandKey.ReorderSheet:
           {
             // COEDITING: seems OK, irrespective of active sheet
@@ -4225,6 +4278,20 @@ export class GridBase {
           }
           break;
 
+        case CommandKey.RemoveAnnotation:
+          this.RemoveAnnotationInternal(command);
+          flags.structure_event = true;
+          flags.structure_rebuild_required = true;
+          flags.annotation_event = true;
+          break;          
+
+        case CommandKey.CreateAnnotation:
+          this.CreateAnnotationInternal(command);
+          flags.structure_event = true;
+          flags.structure_rebuild_required = true;
+          flags.annotation_event = true;
+          break;
+
         case CommandKey.ResizeRows:
 
           // moving this to a method so we can specialize: non-UI grid
@@ -4458,24 +4525,47 @@ export class GridBase {
 
     // consolidate events and merge areas
 
+    let data_event: DataEvent|undefined;
+    let style_event: StyleEvent|undefined;
+
     if (flags.data_area) {
       if (!flags.data_area.start.sheet_id) {
         flags.data_area.SetSheetID(this.active_sheet.id);
       }
-      events.push({ type: 'data', area: flags.data_area });
+      // events.push({ type: 'data', area: flags.data_area });
+      data_event = { type: 'data', area: flags.data_area };
     }
     else if (flags.data_event) {
-      events.push({ type: 'data' });
+      // events.push({ type: 'data' });
+      data_event = { type: 'data' };
     }
 
     if (flags.style_area) {
       if (!flags.style_area.start.sheet_id) {
         flags.style_area.SetSheetID(this.active_sheet.id);
       }
-      events.push({ type: 'style', area: flags.style_area });
+      // events.push({ type: 'style', area: flags.style_area });
+      style_event = { type: 'style', area: flags.style_area };
     }
     else if (flags.style_event) {
-      events.push({ type: 'style' });
+      // events.push({ type: 'style' });
+      style_event = { type: 'style' };
+    }
+
+    if (data_event && style_event) {
+      events.push({
+        type: 'composite',
+        data_area: data_event.area,
+        style_area: style_event.area,
+      });
+    }
+    else {
+      if (data_event) {
+        events.push(data_event);
+      } 
+      if (style_event) {
+        events.push(style_event);
+      }
     }
 
     if (flags.structure_event) {
@@ -4483,6 +4573,7 @@ export class GridBase {
         type: 'structure',
         rebuild_required: flags.structure_rebuild_required,
         conditional_format: flags.conditional_formatting_event,
+        update_annotations: flags.annotation_event,
       });
     }
 

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

@@ -19,10 +19,10 @@
  * 
  */
 
-import type { ICellAddress, IArea, CellStyle, Color, CellValue, Table, TableSortType, TableTheme } from 'treb-base-types';
+import type { ICellAddress, IArea, CellStyle, Color, CellValue, Table, TableSortType, TableTheme, IRectangle } from 'treb-base-types';
 import type { ExpressionUnit } from 'treb-parser';
 import type { BorderConstants } from './border_constants';
-import type { ConditionalFormat } from 'treb-data-model';
+import type { Annotation, AnnotationData, ConditionalFormat, Sheet } from 'treb-data-model';
 
 /**
  * switching to an exec-command based model, so we can serialize
@@ -78,6 +78,27 @@ export enum CommandKey {
   AddConditionalFormat,
   RemoveConditionalFormat,
 
+  TabColor,
+  CreateAnnotation,
+  RemoveAnnotation,
+
+}
+
+export interface RemoveAnnotationCommand {
+  key: CommandKey.RemoveAnnotation;
+  sheet: Sheet;
+  annotation: Annotation;
+}
+
+export interface CreateAnnotationCommand {
+  key: CommandKey.CreateAnnotation;
+  sheet: Sheet;
+  properties: Partial<AnnotationData>;
+  add_to_sheet?: boolean;
+  offset?: boolean;
+  target?: IArea|IRectangle;
+  focus?: boolean;
+
 }
 
 /** base type for sheet commands -- can select sheet by name, id or index */
@@ -439,6 +460,12 @@ export interface AddConditionalFormatCommand {
   format: ConditionalFormat;
 }
 
+export interface TabColorCommand {
+  key: CommandKey.TabColor;
+  sheet: Sheet;
+  color?: Color;
+}
+
 /**
  * remove conditional format, either as an object or from a target 
  * area. as an object, we'll match using object equivalence and not 
@@ -480,6 +507,7 @@ export type Command =
   | SetNameCommand
   | AddSheetCommand
   | SetRangeCommand
+  | TabColorCommand
   | SortTableCommand
   | ShowSheetCommand
   | MergeCellsCommand
@@ -499,6 +527,8 @@ export type Command =
   | ActivateSheetCommand
   | DataValidationCommand
   | DuplicateSheetCommand
+  | CreateAnnotationCommand
+  | RemoveAnnotationCommand
   | AddConditionalFormatCommand
   | RemoveConditionalFormatCommand
   ) ; // & Ephemeral;

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

@@ -83,7 +83,13 @@ export interface StructureEvent {
    * we can use this when conditional formats are modified/added/removed 
    */
   conditional_format?: boolean;
-  
+
+  /**
+   * this flag should be set if annotations have been added or removed,
+   * so parent/child views can update as necessary
+   */
+  update_annotations?: boolean;
+
 }
 
 export interface AnnotationEvent {
@@ -106,6 +112,15 @@ export interface CellEvent {
   data?: HyperlinkCellEventData;
 }
 
+/**
+ * data + style. temporary while I figure out a better solution.
+ */
+export interface CompositeEvent {
+  type: 'composite';
+  data_area?: Area;
+  style_area?: Area;
+}
+
 export interface DataEvent {
   type: 'data';
   area?: Area;
@@ -131,6 +146,7 @@ export type GridEvent
   | StyleEvent
   | FlushEvent
   | ScaleEvent
+  | CompositeEvent
   | GridErrorEvent
   | StructureEvent
   | AnnotationEvent

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

@@ -90,6 +90,9 @@ export interface GridOptions {
   /** support MD formatting in text */
   markdown?: boolean;
 
+  /** support MD formatting in comments */
+  comment_markdown?: boolean;
+
   /** support font stacks */
   support_font_stacks?: boolean;
 
@@ -104,6 +107,7 @@ export const DefaultGridOptions: GridOptions = {
   // insert_function_button: false,
   expand_formula_button: false,
   expand: true,
+  comment_markdown: true,
   repaint_on_cell_change: true,
   grid_over_background: false, // true,
 };

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

@@ -443,6 +443,8 @@ export class TabBar extends EventSource<TabEvent> {
    */
   public Update(): void {
 
+    this.tab_color_cache.clear(); // we're setting tab color but it's not getting updated otherwise
+
     // this is a hack to normalize behavior if you try to re-order
     // a tab that's not the active tab. what ordinarily happens is
     // we start the drag, but then Update is called again which rebuilds

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

@@ -68,6 +68,12 @@ export interface UpdateFlags {
   structure_event?: boolean;
   structure_rebuild_required?: boolean;
 
+  /** 
+   * new, an indication to split views that we might need to update/reinflate
+   * annotations.
+  */
+  annotation_event?: boolean;
+
   render_area?: Area;
   data_area?: Area;
   style_area?: Area;

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

@@ -103,8 +103,16 @@ export class MDParser {
    * 
    * also the way this works adds extra tags if you have nested styles. not
    * an issue if it's just for testing though.
+   * 
+   * update to optionally not add breaking spaces (<br/>). we need this for
+   * containers that are set to white-space: pre-line, where we will already
+   * get a linebreak.
+   * 
    */
-  public HTML(formatted: FormattedString[][]): string {
+  public HTML(formatted: FormattedString[][], options: { br?: boolean } = {}): string {
+
+    // default options
+    options = { br: true, ...options };
 
     const lines: string[] = [];
 
@@ -128,7 +136,7 @@ export class MDParser {
       lines.push(text.join(''));
     }
 
-    return lines.join('<br/>\n');
+    return lines.join(options.br ? '<br/>\n' : '\n');
     
   }
 
@@ -454,7 +462,12 @@ export class MDParser {
           tokens.push({ type: 'text', text: current_token });
         }
 
-        let tmp = char;
+        tokens.push({
+          type: 'newline',
+          text: char,
+        })
+
+        let tmp = '';
         for (;;) { // while (true) {
           const next_char = text[index+1];
           if (this.IsNewline(next_char)) {
@@ -465,10 +478,13 @@ export class MDParser {
             break;
           }
         }
-        tokens.push({
-          type: 'newline',
-          text: tmp,
-        })
+
+        if (tmp.length) {
+          tokens.push({
+            type: 'newline',
+            text: tmp,
+          });
+        }
         escape = false;
         current_token = '';
 

package/test/parser.ts

@@ -1,13 +0,0 @@
-
-import { Parser } from '../treb-parser/src/parser.js';
-
-const parser = new Parser();
-
-let text = "=NORMDIST((LN(S/K)+(r+s^2/2)*T)/(s*SQRT(T)), 0, 1, TRUE)*S - NORMDIST((LN(S/K)+(r-s^2/2)*T)/(s*SQRT(T)), 0, 1, TRUE)*K*EXP(-r*T)";
-let result = parser.Parse(text);
-// console.info('valid?', result.valid, result.expression);
-
-text = "=s*SQRT(T)";
-result = parser.Parse(text);
-console.info('valid?', result.valid, result.expression);
-