@trebco/treb 25.5.0 → 25.6.1

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

@@ -79,74 +79,66 @@ export interface ViewData {
 
 }
 
-/**
- * why is this a class? it doesn't do anything.
- * FIXME: -> interface
- */
-export class Annotation {
-
-  /** 
-   * the key field is used to identify and coordinate annotations when we 
-   * have freeze panes. when an annotation crosses a freeze pane, we need
-   * two copies of the rendered node so that we can scroll. we use the key
-   * to match the frozen/unfrozen instances.
-   */
-  public get key(): number { return this.key_; }
-
-  /** coordinates, in sheet space */
-  public rect?: Rectangle;
+export interface ImageAnnotationData {
+  src: string;
+  scale: string;
+  original_size: { 
+    width: number; 
+    height: number;
+  };
+}
 
-  // public get rect(): Rectangle|undefined { return this.rect_; }
+export type AnnotationType = 'treb-chart'|'image'|'external';
 
-  /** display coordinates, possibly scaled. not persisted. */
-  public scaled_rect?: Rectangle;
+/**
+ * splitting persisted data from the annotation class. that class might
+ * disappear in the future in favor of just a type. this interface should
+ * fully match the old Partial<Annotation> we used before. note that we 
+ * used to define values for all members, but they may now be undefined
+ * because the Annotation class as a Partial instance of this data.
+ * 
+ * conceptually annotation was originally intended to support types other
+ * than our own charts and images, but no one ever used it. so we could 
+ * lock down the `type` field if we wanted to. or perhaps have an `external`
+ * type with opaque data. TODO.
+ * 
+ */
+export interface AnnotationDataBase {
 
   /** the new layout, persisted and takes preference over the old one */
-  public layout?: AnnotationLayout;
+  layout?: AnnotationLayout;
 
-  /** opaque data. this is serialized, so it's persistent data */
-  public data: any = {};
-
-  // opaque string which will be added to the class of any containing node 
-  // public class_name?: string;
-
-  /** type, for filtering. ensure a value */
-  public type = '';
-
-  /** also opaque data, but not serialized. */
-  public temp: any = {};
+  /** 
+   * the old layout used rectangles, and we need to keep support for
+   * that. this is not the layout rectangle. this rectangle is just
+   * for serialization/deserialization. the actual rectangle is maintained
+   * in the Annotation class.
+   */
+  rect?: Partial<Rectangle>;
 
   /** annotation can be resized. this is advisory, for UI */
-  public resizable = true;
+  resizable: boolean;
 
   /** annotation can be moved. this is advisory, for UI */
-  public movable = true;
+  movable: boolean;
 
   /** annotation can be removed/deleted. this is advisory, for UI */
-  public removable = true;
+  removable: boolean;
 
   /** annotation can be selected. this is advisory, for UI */
-  public selectable = true;
+  selectable: boolean;
 
   /** move when resizing/inserting rows/columns */
-  public move_with_cells = true;
+  move_with_cells: boolean;
 
   /** resize when resizing/inserting rows/columns */
-  public resize_with_cells = true;
-
-  public view: ViewData[] = [];
-
-  /**
-   * advisory, meaning we probably need an update if there's an opportunity.
-   * only advisory and not persisted.
-   */
-  public dirty?: boolean;
+  resize_with_cells: boolean;
 
   /**
    * optional formula. the formula will be updated on structure events
    * (insert/delete row/column).
    */
-  public formula = '';
+  formula: string;
 
   /** 
    * extent, useful for exporting. we could probably serialize this,
@@ -159,54 +151,90 @@ export class Annotation {
    * dynamically but since it won't change all that often, we might 
    * as well precalculate.
    */
-  public extent?: ICellAddress;
+  extent: ICellAddress;
 
-  private key_ = (key_generator++);
+}
+
+export interface AnnotationImageData extends AnnotationDataBase {
+  type: 'image';
+  data: ImageAnnotationData;
+}
+
+export interface AnnotationChartData extends AnnotationDataBase {
+  type: 'treb-chart';
+}
+
+export interface AnnotationExternalData extends AnnotationDataBase {
+  type: 'external';
+  data: Record<string, string>;
+}
+
+export type AnnotationData = AnnotationChartData | AnnotationImageData | AnnotationExternalData;
+
+/**
+ * why is this a class? it doesn't do anything.
+ * FIXME: -> interface
+ */
+export class Annotation {
+
+  public data: Partial<AnnotationData> = {};
+
+  /** 
+   * the key field is used to identify and coordinate annotations when we 
+   * have freeze panes. when an annotation crosses a freeze pane, we need
+   * two copies of the rendered node so that we can scroll. we use the key
+   * to match the frozen/unfrozen instances.
+   */
+  public get key(): number { return this.key_; }
+
+  /** coordinates, in sheet space */
+  public rect?: Rectangle;
+
+  // public get rect(): Rectangle|undefined { return this.rect_; }
+
+  /** display coordinates, possibly scaled. not persisted. */
+  public scaled_rect?: Rectangle;
+
+  /** also opaque data, but not serialized. */
+  public temp: any = {};
+
+  public view: ViewData[] = [];
 
   /**
-   * constructor takes a property bag (from json, generally). note that
-   * if you are iterating keys on `this`, there has to be an initial value
-   * or the key won't exist.
+   * advisory, meaning we probably need an update if there's an opportunity.
+   * only advisory and not persisted.
    */
-  constructor(opts: Partial<Annotation>&{rect?: Partial<Rectangle>} = {}) {
-    for (const key of Object.keys(this) as Array<keyof Annotation>){
-      if (key !== 'layout' // && key !== 'rect' 
-          && opts[key]) { // key !== 'cell_address' && opts[key]) {
-        (this as any)[key] = opts[key];
-      }
-    }
+  public dirty?: boolean;
 
-    if (opts.layout) {
-      this.layout = JSON.parse(JSON.stringify(opts.layout));
-    }
+  private key_ = (key_generator++);
+
+  /**
+   * constructor takes persisted data
+   */
+  constructor(opts: Partial<AnnotationData> = {}) {
+    this.data = JSON.parse(JSON.stringify(opts)); // why clone?
     if (opts.rect) {
       this.rect = Rectangle.Create(opts.rect);
     }
   }
 
   /**
-   * serialization method drops node and trims
+   * serialization just returns persisted data, plus we update the 
+   * rectangle. 
+   * 
+   * anyone serializing annotations should just be fetching the data
+   * object, but we're leaving this in place because we can't trace 
+   * it back using tooling. that's a real drawback of toJSON, we 
+   * should stop using it.
+   * 
+   * although as long as we need to support `rect` here, it's not bad
+   * that we do it this way. perhaps change the function name, and 
+   * call it directly?
+   * 
    */
-  public toJSON(): Partial<Annotation> {
-    const result: Partial<Annotation> = {}; // { rect: this.rect };
-
-    if (this.data) result.data = this.data;
-    if (this.formula) result.formula = this.formula;
-    if (this.type) result.type = this.type;
-    // if (this.class_name) result.class_name = this.class_name;
-
-    if (!this.resizable) result.resizable = this.resizable;
-    if (!this.movable) result.movable = this.movable;
-    if (!this.removable) result.removable = this.removable;
-    if (!this.selectable) result.selectable = this.selectable;
-
-    if (!this.move_with_cells) result.move_with_cells = this.move_with_cells;
-    if (!this.resize_with_cells) result.resize_with_cells = this.resize_with_cells;
-
-    if (this.layout) result.layout = this.layout;
-    if (this.extent) result.extent = this.extent;
-
-    return result;
+  public toJSON(): Partial<AnnotationData> {
+    return {
+      ...this.data, rect: this.rect };
   }
 
 }

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

@@ -88,7 +88,7 @@ import type { GridOptions } from './grid_options';
 import { BorderConstants } from './border_constants';
 import type { SerializeOptions } from './serialize_options';
 import { UA } from '../util/ua';
-import { Annotation } from './annotation';
+import { Annotation, type AnnotationData } from './annotation';
 import { Autocomplete } from '../editors/autocomplete';
 
 import { MouseDrag } from './drag_mask';
@@ -468,21 +468,21 @@ export class Grid extends GridBase {
    * @param target new parameter allows setting annotation as rect or as
    * cell range
    */
-  public CreateAnnotation(properties: Partial<Annotation> = {}, add_to_sheet = true, offset = false, target?: Partial<Area>|IRectangle): Annotation {
-    const annotation = new Annotation(properties as Partial<Annotation>);
+  public CreateAnnotation(properties: Partial<AnnotationData> = {}, add_to_sheet = true, offset = false, target?: Partial<Area>|IRectangle): Annotation {
+    const annotation = new Annotation(properties);
 
     if (offset) {
 
       // to offset, we have to have layout (or at least scaled rect)
-      if (!annotation.layout && annotation.scaled_rect) {
-        annotation.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
+      if (!annotation.data.layout && annotation.scaled_rect) {
+        annotation.data.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
       }
 
-      if (!annotation.layout) {
+      if (!annotation.data.layout) {
         console.warn(`can't offset annotation without layout`);
       }
       else {
-        let target_rect = this.layout.AnnotationLayoutToRect(annotation.layout).Shift(20, 20);
+        let target_rect = this.layout.AnnotationLayoutToRect(annotation.data.layout).Shift(20, 20);
         let recheck = true;
         while (recheck) {
           recheck = false;
@@ -495,19 +495,19 @@ export class Grid extends GridBase {
             }
           }
         }
-        annotation.layout = this.layout.RectToAnnotationLayout(target_rect);
+        annotation.data.layout = this.layout.RectToAnnotationLayout(target_rect);
       }
     }
 
     if (target) {
       if (Rectangle.IsRectangle(target)) {
         // console.info('creating from rectangle,', target);
-        annotation.layout = undefined;
+        annotation.data.layout = undefined;
         annotation.rect = Rectangle.Create(target);
       }
       else if (target.start) {
         annotation.rect = undefined;
-        annotation.layout = this.layout.AddressToAnnotationLayout(target.start, target.end||target.start);
+        annotation.data.layout = this.layout.AddressToAnnotationLayout(target.start, target.end||target.start);
       }
     }
     
@@ -569,8 +569,8 @@ export class Grid extends GridBase {
               this.grid_events.Publish(event);
             }
 
-            if (annotation.layout) {
-              this.EnsureAddress(annotation.layout.br.address, 1);
+            if (annotation.data.layout) {
+              this.EnsureAddress(annotation.data.layout.br.address, 1);
             }
 
           });
@@ -710,11 +710,11 @@ export class Grid extends GridBase {
               element.style.left = (rect.left) + 'px';
             }
 
-            annotation.extent = undefined; // reset
+            annotation.data.extent = undefined; // reset
             this.grid_events.Publish({ type: 'annotation', event: 'move', annotation });
 
             // annotation.rect = rect.Scale(1/this.layout.scale);
-            annotation.layout = this.layout.RectToAnnotationLayout(rect);
+            annotation.data.layout = this.layout.RectToAnnotationLayout(rect);
 
           }
 
@@ -730,8 +730,8 @@ export class Grid extends GridBase {
 
     if (add_to_layout) {
       this.layout.AddAnnotation(annotation);
-      if (annotation.layout) {
-        this.EnsureAddress(annotation.layout.br.address, 1);
+      if (annotation.data.layout) {
+        this.EnsureAddress(annotation.data.layout.br.address, 1);
       }
     }
     else {
@@ -2560,7 +2560,7 @@ export class Grid extends GridBase {
             const annotation = this.editing_annotation;
             this.ClearAdditionalSelections();
             this.ClearSelection(this.active_selection);
-            annotation.formula = event.value ? this.FixFormula(event.value) : '';
+            annotation.data.formula = event.value ? this.FixFormula(event.value) : '';
             const node = this.editing_annotation.view[this.view_index]?.node;
             if (node) {
               node.focus();
@@ -2784,10 +2784,10 @@ export class Grid extends GridBase {
     const start = this.render_tiles.start;
     const end = this.render_tiles.end;
 
-    const row_list = [];
+    const row_list: number[] = [];
     for (let row = start.row; row <= end.row; row++) row_list.push(row);
 
-    const column_list = [];
+    const column_list: number[] = [];
     for (let column = start.column; column <= end.column; column++) column_list.push(column);
 
     // FIXME: multiple tiles
@@ -2959,11 +2959,11 @@ export class Grid extends GridBase {
         const node = annotation.view[this.view_index]?.node;
         if (node) { nodes.push(node); }
 
-        if (y <= annotation.scaled_rect.top && annotation.move_with_cells) {
+        if (y <= annotation.scaled_rect.top && annotation.data.move_with_cells) {
           move_annotation_list.push({ annotation, y: annotation.scaled_rect.top, nodes });
         }
 
-        else if (y > annotation.scaled_rect.top && annotation.resize_with_cells) {
+        else if (y > annotation.scaled_rect.top && annotation.data.resize_with_cells) {
           size_annotation_list.push({ annotation, height: annotation.scaled_rect.height, nodes });
         }
 
@@ -3081,13 +3081,13 @@ export class Grid extends GridBase {
 
           for (const { annotation } of move_annotation_list) {
             if (annotation.scaled_rect) {
-              annotation.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
+              annotation.data.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
             }
           }
 
           for (const { annotation } of size_annotation_list) {
             if (annotation.scaled_rect) {
-              annotation.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
+              annotation.data.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
             }
             const view = annotation.view[this.view_index];
             if (view && view.resize_callback) {
@@ -3233,10 +3233,10 @@ export class Grid extends GridBase {
         const node = annotation.view[this.view_index]?.node;
         if (node) { nodes.push(node); }
 
-        if (x <= annotation.scaled_rect.left && annotation.move_with_cells) {
+        if (x <= annotation.scaled_rect.left && annotation.data.move_with_cells) {
           move_annotation_list.push({ annotation, x: annotation.scaled_rect.left, nodes });
         }
-        else if (x > annotation.scaled_rect.left && annotation.resize_with_cells) {
+        else if (x > annotation.scaled_rect.left && annotation.data.resize_with_cells) {
           size_annotation_list.push({ annotation, width: annotation.scaled_rect.width, nodes });
         }
       }
@@ -3345,13 +3345,13 @@ export class Grid extends GridBase {
 
           for (const { annotation } of move_annotation_list) {
             if (annotation.scaled_rect) {
-              annotation.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
+              annotation.data.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
             }
           }
 
           for (const { annotation } of size_annotation_list) {
             if (annotation.scaled_rect) {
-              annotation.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
+              annotation.data.layout = this.layout.RectToAnnotationLayout(annotation.scaled_rect);
             }
             const view = annotation.view[this.view_index];
             if (view && view.resize_callback) {
@@ -5868,8 +5868,8 @@ export class Grid extends GridBase {
   private HideGridSelection() {
     this.UpdateAddressLabel(undefined, '');
 
-    const formula = (this.selected_annotation && this.selected_annotation.formula) ?
-      this.selected_annotation.formula : '';
+    const formula = (this.selected_annotation && this.selected_annotation.data.formula) ?
+      this.selected_annotation.data.formula : '';
 
     this.UpdateFormulaBarFormula(formula);
     this.layout.ShowSelections(false);

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

@@ -2188,9 +2188,9 @@ export class GridBase {
 
       // annotations
       for (const annotation of sheet.annotations) {
-        if (annotation.formula) {
+        if (annotation.data.formula) {
           let modified = false;
-          const parsed = this.parser.Parse(annotation.formula || '');
+          const parsed = this.parser.Parse(annotation.data.formula || '');
           if (parsed.expression) {
             this.parser.Walk(parsed.expression, (element: ExpressionUnit) => {
               if (element.type === 'address') {
@@ -2202,7 +2202,7 @@ export class GridBase {
               return true; // continue walk
             });
             if (modified) {
-              annotation.formula = '=' + this.parser.Render(parsed.expression, { missing: '' });
+              annotation.data.formula = '=' + this.parser.Render(parsed.expression, { missing: '' });
               changes++;
             }
           }
@@ -2770,12 +2770,12 @@ export class GridBase {
       });
 
       for (const annotation of sheet.annotations) {
-        if (annotation.formula) {
-          const modified = this.PatchFormulasInternal(annotation.formula || '',
+        if (annotation.data.formula) {
+          const modified = this.PatchFormulasInternal(annotation.data.formula || '',
             command.before_row, command.count, 0, 0,
             target_sheet_name, is_target);
           if (modified) {
-            annotation.formula = modified;
+            annotation.data.formula = modified;
           }
         }
       }
@@ -2794,11 +2794,11 @@ export class GridBase {
       const first = command.before_row;
 
       for (const annotation of target_sheet.annotations) {
-        if (annotation.layout) {
+        if (annotation.data.layout) {
           const [start, end, endy] = [
-            annotation.layout.tl.address.row, 
-            annotation.layout.br.address.row,
-            annotation.layout.br.offset.y,
+            annotation.data.layout.tl.address.row, 
+            annotation.data.layout.br.address.row,
+            annotation.data.layout.br.offset.y,
           ];
 
           if (first <= start ) { 
@@ -2806,15 +2806,15 @@ export class GridBase {
             // start case 1: starts above the annotation (including exactly at the top)
 
             // shift
-            annotation.layout.tl.address.row += command.count;
-            annotation.layout.br.address.row += command.count;
+            annotation.data.layout.tl.address.row += command.count;
+            annotation.data.layout.br.address.row += command.count;
 
           }
           else if (first < end || first === end && endy > 0) { 
             
             // start case 2: starts in the annotation, omitting the first row
 
-            annotation.layout.br.address.row += command.count;
+            annotation.data.layout.br.address.row += command.count;
 
             // size changing
             resize_annotations_list.push(annotation);
@@ -2839,16 +2839,16 @@ export class GridBase {
       const last = command.before_row - command.count - 1;
 
       for (const annotation of target_sheet.annotations) {
-        if (annotation.layout) {
+        if (annotation.data.layout) {
           
           // start and end row of the annotation. recall that in
           // this layout, the annotation may extend into the (first,last) 
           // row but not beyond it. the offset is _within_ the row.
 
           const [start, end, endy] = [
-            annotation.layout.tl.address.row, 
-            annotation.layout.br.address.row,
-            annotation.layout.br.offset.y,
+            annotation.data.layout.tl.address.row, 
+            annotation.data.layout.br.address.row,
+            annotation.data.layout.br.offset.y,
           ];
 
           if (first <= start ) { 
@@ -2860,8 +2860,8 @@ export class GridBase {
               // end case 1: ends before the annotation
 
               // shift
-              annotation.layout.tl.address.row += command.count;
-              annotation.layout.br.address.row += command.count;
+              annotation.data.layout.tl.address.row += command.count;
+              annotation.data.layout.br.address.row += command.count;
 
             }
             else if (last < end - 1 || (last === end -1 && endy > 0)) { 
@@ -2869,9 +2869,9 @@ export class GridBase {
               // end case 2: ends before the end of the annotation
 
               // shift + cut
-              annotation.layout.tl.address.row = first;
-              annotation.layout.tl.offset.y = 0;
-              annotation.layout.br.address.row += command.count;
+              annotation.data.layout.tl.address.row = first;
+              annotation.data.layout.tl.offset.y = 0;
+              annotation.data.layout.br.address.row += command.count;
 
               // size changing
               resize_annotations_list.push(annotation);
@@ -2897,7 +2897,7 @@ export class GridBase {
               // end case 2: ends before the end of the annotation
 
               // shorten
-              annotation.layout.br.address.row += command.count;
+              annotation.data.layout.br.address.row += command.count;
 
               // size changing
               resize_annotations_list.push(annotation);
@@ -2908,8 +2908,8 @@ export class GridBase {
               // end case 3: ends after the annotation
 
               // clip
-              annotation.layout.br.address.row = first;
-              annotation.layout.br.offset.y = 0;
+              annotation.data.layout.br.address.row = first;
+              annotation.data.layout.br.offset.y = 0;
 
               // size changing
               resize_annotations_list.push(annotation);
@@ -3096,12 +3096,12 @@ export class GridBase {
       });
 
       for (const annotation of sheet.annotations) {
-        if (annotation.formula) {
-          const modified = this.PatchFormulasInternal(annotation.formula,
+        if (annotation.data.formula) {
+          const modified = this.PatchFormulasInternal(annotation.data.formula,
             0, 0, command.before_column, command.count,
             target_sheet_name, is_target);
           if (modified) {
-            annotation.formula = modified;
+            annotation.data.formula = modified;
           }
         }
       }
@@ -3119,11 +3119,11 @@ export class GridBase {
       const first = command.before_column;
 
       for (const annotation of target_sheet.annotations) {
-        if (annotation.layout) {
+        if (annotation.data.layout) {
           const [start, end, endx] = [
-            annotation.layout.tl.address.column, 
-            annotation.layout.br.address.column,
-            annotation.layout.br.offset.x,
+            annotation.data.layout.tl.address.column, 
+            annotation.data.layout.br.address.column,
+            annotation.data.layout.br.offset.x,
           ];
 
           if (first <= start ) { 
@@ -3131,15 +3131,15 @@ export class GridBase {
             // start case 1: starts to the left of the annotation (including exactly at the left)
 
             // shift
-            annotation.layout.tl.address.column += command.count;
-            annotation.layout.br.address.column += command.count;
+            annotation.data.layout.tl.address.column += command.count;
+            annotation.data.layout.br.address.column += command.count;
 
           }
           else if (first < end || first === end && endx > 0) { 
             
             // start case 2: starts in the annotation, omitting the first column
 
-            annotation.layout.br.address.column += command.count;
+            annotation.data.layout.br.address.column += command.count;
 
             // size changing
             resize_annotations_list.push(annotation);
@@ -3164,16 +3164,16 @@ export class GridBase {
       const last = command.before_column - command.count - 1;
 
       for (const annotation of target_sheet.annotations) {
-        if (annotation.layout) {
+        if (annotation.data.layout) {
           
           // start and end column of the annotation. recall that in
           // this layout, the annotation may extend into the (first,last) 
           // column but not beyond it. the offset is _within_ the column.
 
           const [start, end, endx] = [
-            annotation.layout.tl.address.column, 
-            annotation.layout.br.address.column,
-            annotation.layout.br.offset.x,
+            annotation.data.layout.tl.address.column, 
+            annotation.data.layout.br.address.column,
+            annotation.data.layout.br.offset.x,
           ];
 
           if (first <= start ) { 
@@ -3185,8 +3185,8 @@ export class GridBase {
               // end case 1: ends before the annotation
 
               // shift
-              annotation.layout.tl.address.column += command.count;
-              annotation.layout.br.address.column += command.count;
+              annotation.data.layout.tl.address.column += command.count;
+              annotation.data.layout.br.address.column += command.count;
 
             }
             else if (last < end - 1 || (last === end -1 && endx > 0)) { 
@@ -3194,9 +3194,9 @@ export class GridBase {
               // end case 2: ends before the end of the annotation
 
               // shift + cut
-              annotation.layout.tl.address.column = first;
-              annotation.layout.tl.offset.x = 0;
-              annotation.layout.br.address.column += command.count;
+              annotation.data.layout.tl.address.column = first;
+              annotation.data.layout.tl.offset.x = 0;
+              annotation.data.layout.br.address.column += command.count;
 
               // size changing
               resize_annotations_list.push(annotation);
@@ -3222,7 +3222,7 @@ export class GridBase {
               // end case 2: ends before the end of the annotation
 
               // shorten
-              annotation.layout.br.address.column += command.count;
+              annotation.data.layout.br.address.column += command.count;
 
               // size changing
               resize_annotations_list.push(annotation);
@@ -3233,8 +3233,8 @@ export class GridBase {
               // end case 3: ends after the annotation
 
               // clip
-              annotation.layout.br.address.column = first;
-              annotation.layout.br.offset.x = 0;
+              annotation.data.layout.br.address.column = first;
+              annotation.data.layout.br.offset.x = 0;
 
               // size changing
               resize_annotations_list.push(annotation);