@trebco/treb 30.15.0 → 31.0.2

package/treb-data-model/src/sheet.ts

@@ -33,7 +33,10 @@ import { Measurement, ValidateURI } from 'treb-utils';
 
 import type { TextPart ,
   Cell, ICellAddress, CellSerializationOptions, CellValue, ImportedSheetData, Complex, 
-  DimensionedQuantity, IArea, Table, TableTheme, HorizontalAlign, VerticalAlign} from 'treb-base-types';
+  DimensionedQuantity, IArea, Table, TableTheme, HorizontalAlign, VerticalAlign,
+  Theme} from 'treb-base-types';
+
+import { Get as GetFonrMetrics } from 'treb-grid/src/util/fontmetrics';
 
 // --- local imports ----------------------------------------------------------
 
@@ -299,7 +302,8 @@ export class Sheet {
 
     this.default_column_width = DEFAULT_COLUMN_WIDTH;
     this.row_header_width = DEFAULT_ROW_HEADER_WIDTH;
-    this.UpdateDefaultRowHeight();
+
+    // this.UpdateDefaultRowHeight();
 
     this.id_ = Sheet.base_id++;
 
@@ -314,10 +318,14 @@ export class Sheet {
   /**
    * factory method creates a new sheet
    */
-  public static Blank(style_defaults: CellStyle, name?: string, rows = 30, columns = 20): Sheet {
+  public static Blank(style_defaults: CellStyle, name?: string, rows = 30, columns = 20, theme?: Theme): Sheet {
 
     const sheet = new Sheet(style_defaults);
 
+    if (theme) {
+      sheet.UpdateDefaultRowHeight(theme);
+    }
+
     if (name) {
       sheet.name = name;
     }
@@ -905,71 +913,45 @@ export class Sheet {
 
   }
 
-  /**
-   * FIXME: measure the font.
-   * 
-   * Can we use the same metrics as renderer? That uses a canvas. Obviously
-   * canvas won't work if there's no DOM but it's OK if this method fails in
-   * that case; the only question is will it break if it's running headless?
-   */
-  public StyleFontSize(style: CellStyle, default_properties: CellStyle = {}): number {
-
-    let font_height = (style.font_size?.value || 0);
-
-    let scale = 0;
-
-    switch (style.font_size?.unit) {
-      case 'px':
-        font_height *= (75 / 100);
-        break;
-
-      case 'em':
-        scale = style.font_size.value || 1;
-        break;
-
-      case '%':
-        scale = (style.font_size.value || 100) / 100;
-        break;
-    }
-
-    if (scale) {
-      font_height = scale * (default_properties.font_size?.value || 10);
-      if (default_properties.font_size?.unit === 'px') {
-        font_height *= (75 / 100);
-      }
-    }
-
-    return font_height || 10;
-
-  }
-
   /**
    * FIXME: this is called in the ctor, which made sense when sheets
    * were more ephemeral. now that we update a single instance, rather
    * than create new instances, we lose this behavior. we should call
    * this when we change sheet style.
    * 
-   * removing parameter, event
+   * actually this should just move to theme, no? as long as sheet has
+   * a reference to theme. for headless instances that would just use 
+   * theme defaults, which should be appropriate.
+   * 
+   * I guess the original idea was that sheet style might be used to
+   * base row height on sheet font size? not sure if that's how it actually
+   * plays out, since this is only called in the ctor (or equivalent) or when
+   * theme is updated (but not when sheet style is updated). might need some
+   * thought.
+   * 
    */
-  public UpdateDefaultRowHeight(): void {
+  public UpdateDefaultRowHeight(theme: Theme, scale = 1): void {
 
-    const composite = Style.Composite([this.default_style_properties, this.sheet_style]);
+    // this guard is here because this is called by sheet directly, so maybe
+    // in headless context? would make more sense to just not call it
 
     if (typeof window !== 'undefined') {
 
-      const measurement = Measurement.MeasureText(Style.Font(composite), 'M');
-      const height = Math.round(measurement.height * 1.4);
+      const composite = Style.Composite([this.default_style_properties, this.sheet_style]);
+      const font_info = Style.CompositeFont(theme.grid_cell_font_size, composite, scale, theme);
+      const metrics = GetFonrMetrics(font_info.font, font_info.variants);
+      const height = metrics.height * 1.25; // ??
+
+      // const measurement = Measurement.MeasureText(Style.Font2(composite, 1, theme).font, 'M');
+      // const height = Math.round(measurement.height * 1.4);
+
+      // console.info({height, default: this.default_row_height});
 
       if (this.default_row_height < height) {
         this.default_row_height = height;
       }
 
     }
-    /*
-    else {
-      // console.info('worker?');
-    }
-    */
 
   }
 
@@ -1658,14 +1640,14 @@ export class Sheet {
     this.column_header_height = column_header_height;
   }
 
-  /**
+  /* *
    * resize row to match character hight, taking into
    * account multi-line values.
    * 
    * UPDATE: since the only caller calls with inline = true, removing 
    * parameter, test, and extra behavior.
-   */
-  public AutoSizeRow(row: number, default_properties: CellStyle = {}, allow_shrink = true): void {
+   * /
+  public AutoSizeRow(row: number, theme?: Theme, allow_shrink = true, scale = 1): void {
 
     let height = this.default_row_height;
     const padding = 9; // 9?
@@ -1673,7 +1655,7 @@ export class Sheet {
     for (let column = 0; column < this.cells.columns; column++) {
 
       const cell = this.CellData({ row, column });
-      const style = cell.style;
+      const style = JSON.parse(JSON.stringify(cell.style));
       let text = cell.formatted || '';
 
       if (typeof text !== 'string') {
@@ -1682,7 +1664,25 @@ export class Sheet {
 
       if (style && text && text.length) {
         const lines = text.split(/\n/);
-        const font_height = Math.round(this.StyleFontSize(style, default_properties) * 1.5); // it's a start, we still need to measure properly
+
+        if (style.font_size) {
+          if (style.font_size.unit === 'em') {
+            const base = theme?.grid_cell_font_size || { unit: 'pt', value: 10 };
+            style.font_size.unit = base.unit;
+            style.font_size.value *= base.value;
+          }
+        }
+        else {
+          style.font_size = theme?.grid_cell_font_size || { unit: 'pt', value: 10 };
+        }
+
+        let target = style.font_size.value;
+        if (style.font_size.unit === 'px') {
+          target = Math.round((style.font_size.value||16) * 300 / 4) / 100;
+        }
+
+        const font_height = // Math.round(this.StyleFontSize(style, default_properties) * 1.5); // it's a start, we still need to measure properly
+          Math.round(target * 1.5 * scale);
         height = Math.max(height, ((font_height || 10) + padding) * lines.length);
       }
     }
@@ -1695,6 +1695,7 @@ export class Sheet {
     this.SetRowHeight(row, height);
 
   }
+  */
 
   /** returns the style properties for a given style index */
   public GetStyle(index: number): CellStyle {

package/treb-embed/markup/toolbar.html

@@ -130,13 +130,27 @@
         <button data-command="font-scale" data-scale="0.9">0.90</button>
         <button data-command="font-scale" data-scale="1.0">1.00</button>
         <button data-command="font-scale" data-scale="1.1">1.10</button>
-        <button data-command="font-scale" data-scale="1.2">1.20</button>
+        <button data-command="font-scale" data-scale="1.25">1.25</button>
         <button data-command="font-scale" data-scale="1.5">1.50</button>
         <button data-command="font-scale" data-scale="2.0">2.00</button>
       </div>
     </div>
   </div>
 
+  <div composite font-stack>
+    <button class="treb-font-stack" data-command="font-stack" data-font-stack="" title="Font stack"></button>
+    <div class="treb-menu">
+      <button dropdown title="Font stack options"></button>
+      <div>
+        <button data-command="font-stack" data-font-stack="default"></button>
+        <button data-command="font-stack" data-font-stack="transitional"></button>
+        <button data-command="font-stack" data-font-stack="monospace"></button>
+        <button data-command="font-stack" data-font-stack="handwritten"></button>
+        <button data-command="font-stack" data-font-stack="ui"></button>
+      </div>
+    </div>
+  </div>
+
   <div composite>
     <input class="treb-number-format" title="Number format">
     <div class="treb-menu">

package/treb-embed/src/custom-element/spreadsheet-constructor.ts

@@ -12,6 +12,7 @@ import { Measurement } from 'treb-utils';
 import type { ToolbarMessage } from '../toolbar-message';
 
 import { DOMContext } from 'treb-base-types';
+import { font_stack_labels, type FontStackType } from 'treb-base-types/src/font-stack';
 
 /** with a view towards i18n */
 const default_titles: Record<string, string> = {
@@ -668,6 +669,24 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
       }
     }
 
+    if (this.toolbar_controls.stack) {
+      if (state.style?.font_face) {
+        if (state.style.font_face.startsWith('stack:')) {
+          const stack_name = state.style.font_face.substring(6) as FontStackType;
+          this.toolbar_controls.stack.textContent = font_stack_labels[stack_name] || '';
+          this.toolbar_controls.stack.dataset.fontStack = stack_name;
+        }
+        else {
+          this.toolbar_controls.stack.textContent = '';
+          this.toolbar_controls.stack.dataset.fontStack = '';
+        }
+      }
+      else { // } if (!state.empty) {
+        this.toolbar_controls.stack.textContent = font_stack_labels.default || '';
+        this.toolbar_controls.stack.dataset.fontStack = 'default';
+      }
+    }
+    
     const format = this.toolbar_controls.format as HTMLInputElement;
     if (format) {
       if (state.style?.number_format) {
@@ -914,6 +933,19 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
     if (!sheet.options.font_scale) {
       remove.push(toolbar.querySelector('[font-scale]'));
     }
+    if (!sheet.options.font_stack) {
+      remove.push(toolbar.querySelector('[font-stack]'));
+    }
+    else {
+      const buttons = toolbar.querySelectorAll(`[font-stack] button[data-font-stack]`) as NodeListOf<HTMLElement>;
+      for (const button of buttons) {
+        if (button.dataset.fontStack) {
+          const label = font_stack_labels[button.dataset.fontStack as FontStackType];
+          button.textContent = label || '';
+        }
+      }
+    }
+
     if (!sheet.options.chart_menu) {
       remove.push(toolbar.querySelector('[chart-menu]'));
     }
@@ -967,6 +999,8 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
         'format': 'input.treb-number-format',
         'scale': 'input.treb-font-scale',
 
+        'stack': 'button.treb-font-stack',
+
       })) {
 
       const element = toolbar.querySelector(value) as HTMLElement;
@@ -1029,9 +1063,11 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
         color?: Color;
         format?: string;
         scale?: string;
+        font_stack?: string;
       } = {
         format: target.dataset.format,
         scale: target.dataset.scale,
+        font_stack: target.dataset.fontStack,
       };
 
       let command = target?.dataset.command;
@@ -1376,9 +1412,11 @@ export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
             this.UpdateSelectionStyle(sheet, toolbar, comment_box);
             break;
 
+          case 'annotation-selection':
           case 'selection':
             this.UpdateSelectionStyle(sheet, toolbar, comment_box);
             break;
+
         }
       });
 

package/treb-embed/src/embedded-spreadsheet.ts

@@ -759,6 +759,8 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       // delete_tab: this.options.delete_tab,
       expand: this.options.expand,
 
+      support_font_stacks: !!this.options.font_stack,
+
     };
 
     if (this.options.scale) {
@@ -838,7 +840,12 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     // if we don't have a container. that's distinct (at the moment)
     // from headless, which is a state that can change.
 
-    this.grid = new Grid(grid_options, this.model, undefined, !!container, this.DOM);
+    this.grid = new Grid(
+        grid_options, 
+        this.model, 
+        undefined, 
+        !!container, 
+        this.DOM);
 
     if (this.options.headless) {
       this.grid.headless = true; // FIXME: move into grid options
@@ -1003,7 +1010,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
           case 'scale':
             this.RebuildAllAnnotations();
-            this.events.Publish({ type: 'view-change' });
+            this.Publish({ type: 'view-change' });
             break;
 
           case 'annotation':
@@ -1013,32 +1020,48 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
             if (event.annotation) {
               const view: AnnotationViewData = event.annotation.view[this.grid.view_index] || {};
 
-              this.DocumentChange();
-              switch (event.event) {
-                case 'create':
-                  this.InflateAnnotation(event.annotation);
-                  this.calculator.UpdateAnnotations(event.annotation, this.grid.active_sheet);
-                  this.grid.AnnotationUpdated(event.annotation);
-                  break;
-                case 'delete':
-                  this.calculator.RemoveAnnotation(event.annotation); // clean up vertex
-                  break;
-                case 'update':
-                  if (view.update_callback) {
-                    view.update_callback();
-                    this.grid.AnnotationUpdated(event.annotation);
-                  }
-                  else {
-                    console.info('annotation update event without update callback');
-                  }
-                  this.calculator.UpdateAnnotations(event.annotation, this.grid.active_sheet);
-                  break;
-                case 'resize':
-                  if (view.resize_callback) {
-                    view.resize_callback();
+              let update_toolbar = false;
+
+              if (event.event === 'select') {
+                update_toolbar = true;
+              }
+              else {
+                this.DocumentChange();
+                switch (event.event) {
+                  case 'create':
+                    this.InflateAnnotation(event.annotation);
+                    this.calculator.UpdateAnnotations(event.annotation, this.grid.active_sheet);
                     this.grid.AnnotationUpdated(event.annotation);
-                  }
-                  break;
+                    update_toolbar = (event.annotation === this.grid.selected_annotation);
+                    break;
+                  case 'delete':
+                    this.calculator.RemoveAnnotation(event.annotation); // clean up vertex
+                    break;
+                  case 'update':
+                    if (view.update_callback) {
+                      view.update_callback();
+                      this.grid.AnnotationUpdated(event.annotation);
+                    }
+                    else {
+                      console.info('annotation update event without update callback');
+                    }
+                    this.calculator.UpdateAnnotations(event.annotation, this.grid.active_sheet);
+                    update_toolbar = (event.annotation === this.grid.selected_annotation);
+                    break;
+                  case 'resize':
+                    if (view.resize_callback) {
+                      view.resize_callback();
+                      this.grid.AnnotationUpdated(event.annotation);
+                    }
+                    break;
+                }
+
+              }
+
+              if (update_toolbar) {
+                this.UpdateSelectionStyleAnnotation(event.annotation);
+                this.Publish({ type: 'annotation-selection' });
+                break;
               }
 
             }
@@ -1557,6 +1580,34 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     let updated_style: CellStyle = {};
 
+    if (this.grid.AnnotationSelected()) {
+
+      // only handle a limited set of commands, then
+
+      switch (event.command) {
+        case 'font-scale':
+          {
+            const scale = Number(event.scale || 1);
+            if (scale && !isNaN(scale)) {
+              updated_style.font_size = { unit: 'em', value: scale };
+              this.grid.ApplyAnnotationStyle(updated_style);
+            }
+          }
+          break;
+
+        case 'font-stack':
+          if (event.font_stack) {
+            updated_style.font_face = 'stack:' + event.font_stack;
+          }
+          this.grid.ApplyAnnotationStyle(updated_style);
+          break;
+      }
+      
+      this.Focus();
+      return;
+
+    }
+
     const insert_annotation = (func: string) => {
       const selection = this.grid.GetSelection();
       if (selection && !selection.empty) {
@@ -1608,6 +1659,12 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
           updated_style.number_format = event.format || 'General';
           break;
 
+        case 'font-stack':
+          if (event.font_stack) {
+            updated_style.font_face = 'stack:' + event.font_stack;
+          }
+          break;
+
         case 'font-scale':
 
           // above we handle 'font-size' events; this comes from a dropdown,
@@ -1615,6 +1672,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
           // FIXME: break out
 
           {
+
             const selection = this.grid.GetSelection();
             const area = this.grid.active_sheet.RealArea(selection.area);
             const scale = Number(event.scale || 1);
@@ -1899,7 +1957,7 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     if (Object.keys(updated_style).length) {
       this.grid.ApplyStyle(undefined, updated_style, true);
     }
-
+    
     this.Focus();
 
   }
@@ -5813,6 +5871,26 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
     this.Publish({ type: 'selection' });
   }
 
+  /** update selection style for the toolbar, when an annotation is selected. */
+  protected UpdateSelectionStyleAnnotation(annotation: Annotation) {
+
+    const state: SelectionState = {
+      style: JSON.parse(JSON.stringify(annotation.data.style || {})),
+    };
+
+    if (state.style) {
+      if (!state.style.font_face) {
+        state.style.font_face = 'stack:ui';
+      }
+      if (!state.style.font_size) {
+        state.style.font_size = { unit: 'em', value: 1 };
+      }
+    }
+
+    state.relative_font_size = Style.RelativeFontSize(state.style || {}, this.grid.theme.grid_cell || {});
+    this.selection_state = state;
+
+  }
 
   /** update selection style for the toolbar */
   protected UpdateSelectionStyle(selection?: GridSelection): void {
@@ -5845,10 +5923,22 @@ export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
       state.style = data.style ? { ...data.style } : undefined;
       state.relative_font_size = Style.RelativeFontSize(state.style || {}, this.grid.theme.grid_cell || {});
 
+      state.empty = typeof data.value === 'undefined' && !data.style?.font_face;
+
+      // let's not do this
+      /*
+      if (state.empty && state.style) {
+        state.style.font_face = this.selection_state.style?.font_face || undefined;
+      }
+      */
+
+    }
+
+    if (this.grid?.edit_state) {
+      this.grid.edit_state.font_face = state.style?.font_face || undefined;
     }
 
     this.selection_state = state;
-    // this.toolbar?.UpdateState(state);
 
   }
 

package/treb-embed/src/options.ts

@@ -187,6 +187,9 @@ export interface EmbeddedSpreadsheetOptions {
   /** include the font scale control in the toolbar */
   font_scale?: boolean;
 
+  /** include the font stack control in the toolbar */
+  font_stack?: boolean;
+
   /** include the insert/remove table button in the toolbar */
   table_button?: boolean;
 

package/treb-embed/src/selection-state.ts

@@ -10,6 +10,7 @@ export interface SelectionState {
   merge?: boolean;
   table?: boolean;
   frozen?: boolean;
+  empty?: boolean;
   comment?: string;
   selection?: GridSelection;
   relative_font_size?: number;

package/treb-embed/src/toolbar-message.ts

@@ -55,6 +55,11 @@ export interface FontScaleToolbarMessage {
   scale?: number;
 }
 
+export interface FontStackToolbarMessage {
+  command: 'font-stack';
+  font_stack?: string;
+}
+
 export interface NumberFormatToolbarMessage {
   command: 'number-format';
   format?: string;
@@ -103,4 +108,5 @@ export type ToolbarMessage
   | IndentMessage
   | NumberFormatToolbarMessage
   | FontScaleToolbarMessage
+  | FontStackToolbarMessage
   ;

package/treb-embed/src/types.ts

@@ -198,6 +198,14 @@ export interface SelectionEvent {
   type: 'selection';
 }
 
+/**
+ * this event is used when an annotation is selected. we're not changing
+ * the original selection event, because I don't want to break anything.
+ */
+export interface AnnotationSelectionEvent {
+  type: 'annotation-selection';
+}
+
 /**
  * This event is sent when the focused view changes, if you have more
  * than one view.
@@ -220,6 +228,7 @@ export type EmbeddedSheetEvent
   | FocusViewEvent
   | SelectionEvent
   | ResizeEvent
+  | AnnotationSelectionEvent
   ;
 
 /**

package/treb-embed/style/defaults.scss

@@ -25,8 +25,19 @@ $default-box-shadow: 0px 1px 4px 2px rgba(109,109,109,0.2);
 
 $tooltip-arrow-size: 4px;
 
+//
+// -apple-system came out because it would break safari when rendering 
+// certain characters. if you render an acute angle character ("⦟", U+299F)
+// in a canvas in safari with -apple-system, javascript will stop. no
+// exception, no error, it just stops. 
+// 
+// that was ca 2023? haven't tested this lately so it may be resolved by now.
+//
+
+// "BlinkMacSystemFont" magically turns into "system-ui"? that's incredibly annoying. 
+
 $font-stack: // "-apple-system",
-  "BlinkMacSystemFont",
+  "BlinkMacSystemFont", // this turns into "system-ui"? wuwt? is that a sass thing?
   "Segoe UI",
   "Roboto",
   "Oxygen-Sans",