@trebco/treb 30.16.0 → 31.0.2

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",

package/treb-embed/style/font-stacks.scss

@@ -0,0 +1,105 @@
+/*
+ * This file is part of TREB.
+ *
+ * TREB is free software: you can redistribute it and/or modify it under the 
+ * terms of the GNU General Public License as published by the Free Software 
+ * Foundation, either version 3 of the License, or (at your option) any 
+ * later version.
+ *
+ * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
+ * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
+ * details.
+ *
+ * You should have received a copy of the GNU General Public License along 
+ * with TREB. If not, see <https://www.gnu.org/licenses/>. 
+ *
+ * Copyright 2022-2024 trebco, llc. 
+ * info@treb.app
+ * 
+ */
+
+//
+// thanks to 
+// https://modernfontstacks.com/
+// 
+// for the stacks. we make some minor changes, mostly because of browser issues.
+//
+
+.treb-main.treb-main {
+
+  /* default size for fonts in grid cells */
+  --treb-font-stack-default-size: 14px;
+
+  /* size adjustment for some fonts */
+  --treb-font-stack-calibri-size: 16px;
+  --treb-font-stack-tscu-comic-size: 16px;
+  --treb-font-stack-helvetica-neue-size: 13px;
+  --treb-font-stack-cambria-size: 16px;
+
+  /* flag that we need to use font variants (chrome only) */
+  --treb-font-stack-sitka-text-variant: lining-nums tabular-nums;
+
+  /* 
+   * os-specific size adjustment. it's not that important but for consistency
+   * with the old layout this should be 10pt, ~13.33px. I notice that the 
+   * editor is slightly off from the canvas rendering, I assume that's related
+   * to the subpixel size? maybe we should break from the old version. (or 
+   * maybe we can fix the editor?)
+   */
+  &.treb-ua-osx {
+    --treb-font-stack-system-ui-size: 10pt;
+  }
+
+  /**
+   * this is the default font. it's also used for other font stacks 
+   * if stacks are turned off (the default, for now).
+   */ 
+  .treb-font-stack-default {
+
+    // I love avenir but the bold is too bold. can we adjust it?
+
+    // font-family: calibri, avenir, $font-stack;
+    font-family: calibri, $font-stack;
+    
+  }
+  
+  .treb-font-stack-transitional {
+
+    // we drop sitka text because the bounding box isn't calculating properly
+    // for some reason -- variants? also, firefox does not support numeric 
+    // variants in canvas and the sitka default is old-style non-tabular nums. 
+
+    // font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif; 
+    font-family: Charter, 'Bitstream Charter', Cambria, serif; 
+
+  }
+
+  /* not using this atm, we just have one serif (the transitional) */
+  .treb-font-stack-old-style {
+    font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
+  }
+
+  .treb-font-stack-handwritten {
+
+    // not sure I believe that that tscu comic font is widely installed... 
+    // there might be a better alternative.
+
+    font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; 
+  }
+
+  /* not using this atm */
+  .treb-font-stack-industrial {
+    font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif; 
+  }
+
+  /* not a slab */
+  .treb-font-stack-monospace {
+    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; 
+  }
+
+  .treb-font-stack-ui {
+    font-family: system-ui, sans-serif;
+  }
+
+}

package/treb-embed/style/layout.scss

@@ -7,6 +7,7 @@
 @import './spinner.scss';
 @import './treb-icons.scss';
 @import './toolbar.scss';
+@import './font-stacks.scss';
 
 /*
  * switching to a double-selector to increase specificity. the particular

package/treb-embed/style/theme-defaults.scss

@@ -192,7 +192,16 @@ $text-reference-color-5: rgb(254, 47, 1);
    */
   .grid-cells {
     font-family: var(--treb-grid-font-family, inherit);
+    
+    // it seems like the old default was 14px / 16px for calibri on windows? 
+    // we should get back to that, then we can adjust calibri (in the stacks)
+    // to scale.
+
+    // font-size: var(--treb-grid-font-size, 10px);
+    // font-size: var(--treb-grid-font-size, 10pt);
+
     font-size: var(--treb-grid-font-size, 14px);
+
     color: var(--treb-grid-default-color, inherit);
     stroke: var(--treb-grid-grid-color, rgb(204, 204, 212));
     background: var(--treb-grid-background, #fff);
@@ -520,11 +529,11 @@ $text-reference-color-5: rgb(254, 47, 1);
 
 
 
-  /**
+  /* *
    * special override for windows, using calibri (which is too small).
    * you should still be able to override with a regular theme style,
    * or (potentially) also override for windows specifically. fancy!
-   */
+   * /
   &.treb-ua-windows .grid-cells {
     font-size: var(--treb-grid-font-size-windows, var(--treb-grid-font-size, 12pt));
     font-family: var(--treb-grid-font-family-windows, var(--treb-grid-font-family, "Calibri", $font-stack)); // does this actually work? is this included? (...)
@@ -534,6 +543,7 @@ $text-reference-color-5: rgb(254, 47, 1);
     font-size: var(--treb-grid-font-size-osx, var(--treb-grid-font-size, 10pt)); // slightly smaller default
     font-family: var(--treb-grid-font-family-osx, var(--treb-grid-font-family, inherit));
   }
+  */
 
   /**
    *

package/treb-embed/style/toolbar.scss

@@ -157,6 +157,13 @@ $swatch-size: 18px;
           mask-size: var(--icon-size, 16px 16px);
           -webkit-mask-size: var(--icon-size, 16px 16px);
         }
+
+        &.treb-font-stack {
+          &::before {
+            display: none;
+          }
+        }
+
       }
 
     }
@@ -193,6 +200,15 @@ $swatch-size: 18px;
 
     }
 
+    .treb-font-stack {
+      width: 8em;
+      align-items: flex-start;
+      overflow: hidden;
+      &::before {
+        display: none;
+      }
+    }
+
     .treb-menu {
 
       // on Safari, we need to make these menus focus targets, so we can 

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

@@ -67,6 +67,9 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
 
   // ---------------------------------------------------------------------------
 
+  /** possibly carrying over a font face (+size?) */
+  public edit_style?: CellStyle;
+
   /**
    * this is a flag used to indicate when we need to reset the selection.
    * the issue has to do with selecting cells via arrow keys; if you do
@@ -273,7 +276,7 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
    * 
    * something to do with keyboard selection? (which needs to be fixed)?
    */
-  public Edit(gridselection: GridSelection, rect: Rectangle, cell: Cell, value?: CellValue, event?: Event): void {
+  public Edit(gridselection: GridSelection, rect: Rectangle, cell: Cell, value?: CellValue, event?: Event, edit_style?: CellStyle): void {
 
     this.Publish({ 
       type: 'start-editing', 
@@ -284,9 +287,33 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
     this.target_address = {...gridselection.target};
     this.reset_selection = false;
 
-    const style: CellStyle = cell.style || {};
+    const style: CellStyle = JSON.parse(JSON.stringify(cell.style || {})); // clone
+
+    //
+    // CURRENT ISSUE: this works, but the style is not actually applied to
+    // the cell. we need to modify the commit routine to apply the style.
+    // I think?
+    //
+    // WAIT, that might not be right... might have something to do with 
+    // default?
+    // 
+
+    this.edit_style = edit_style; // set (or unset)
+    
+    if (edit_style?.font_face) {
+      style.font_face = edit_style.font_face;
+    }
+
+    const font_info = Style.CompositeFont(this.theme.grid_cell_font_size, style, this.scale, this.theme);
+
+    this.edit_node.style.font = font_info.font;
+    if (font_info.variants) {
+      this.edit_node.style.fontVariant = font_info.variants;
+    }
+    else {
+      this.edit_node.style.fontVariant = '';
+    }
 
-    this.edit_node.style.font = Style.Font(style, this.scale);
     this.edit_node.style.color = ResolveThemeColor(this.theme, style.text, 1);
     this.edit_inset.style.backgroundColor = ResolveThemeColor(this.theme, style.fill, 0);
 
@@ -332,6 +359,12 @@ export class OverlayEditor extends Editor<ResetSelectionEvent> {
 
     rect.ApplyStyle(this.container_node);
 
+    // trial and error. still a little wonky at scales, but reasonable.
+    
+    const offset = UA.is_mac ? 0 : 0.5;
+
+    this.edit_node.style.bottom = offset.toFixed(2) + 'px'; // does this need to scale for dpr? not sure
+
     this.autocomplete?.ResetBlock();
     this.selection = gridselection;
 

package/treb-grid/src/layout/base_layout.ts

@@ -377,6 +377,11 @@ export abstract class BaseLayout {
 
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  public FocusInLayout(target?: EventTarget): boolean {
+    return false;
+  }
+
   /**
    * if the DPR has changed, update it and return true. otherwise return
    * false. this is used on resize events: if the scale has changed, we 
@@ -672,7 +677,7 @@ export abstract class BaseLayout {
 
   }
 
-  public UpdateAnnotation(elements: Annotation | Annotation[]): void {
+  public UpdateAnnotation(elements: Annotation | Annotation[], theme: Theme): void {
     if (!Array.isArray(elements)) elements = [elements];
     for (const annotation of elements) {
       const view = annotation.view[this.view.view_index] || {};
@@ -684,8 +689,48 @@ export abstract class BaseLayout {
         }
         */
 
+        let font_size_pt = 10 * this.scale;
+
+        // console.info(annotation.data.style);
+
+        if (annotation.data.style?.font_size?.unit === 'em') {
+
+          font_size_pt *= annotation.data.style.font_size.value;
+
+          // console.info("scaling up...", font_size_pt)
+
+        }
+
         view.node.dataset.scale = this.scale.toString();
-        view.node.style.fontSize = `${10 * this.scale}pt`;
+
+        // maybe we should just reset and then apply?
+
+        if (annotation.data.style?.font_face && annotation.data.style.font_face.startsWith('stack:')) { 
+          const name = annotation.data.style.font_face.substring(6);
+          const stack = theme.font_stacks[name];
+          if(stack) {
+            view.node.classList.add('treb-inherit-font');
+            view.node.style.fontFamily = stack.font || '';
+
+            // font_size_pt *= stack.scale;
+            
+            if (stack.variants) {
+              view.node.style.fontVariant = stack.variants;
+            }
+          }
+          else {
+            view.node.classList.remove('treb-inherit-font');
+            view.node.style.fontFamily = '';
+            view.node.style.fontVariant = '';
+          }
+        }
+        else {
+          view.node.classList.remove('treb-inherit-font');
+          view.node.style.fontFamily = '';
+          view.node.style.fontVariant = '';
+        }
+
+        view.node.style.fontSize = `${font_size_pt}pt`;
 
         // update the layout here if necessary. after that it should
         // be persisted (assuming it's saved). eventually this should
@@ -848,13 +893,13 @@ export abstract class BaseLayout {
 
   }
 
-  public AddAnnotation(annotation: Annotation): void {
+  public AddAnnotation(annotation: Annotation, theme: Theme): void {
     const view = annotation.view[this.view.view_index] || {};
     if (!view.node) {
       throw new Error('annotation view/node missing');
     }
     this.annotation_container.appendChild(view.node);
-    this.UpdateAnnotation(annotation);
+    this.UpdateAnnotation(annotation, theme);
   }
 
   // testing moving this here...
@@ -1246,38 +1291,6 @@ export abstract class BaseLayout {
 
     parent.appendChild(tile);
 
-    // NOTE re: text rendering. you can't use baseline = top, because that's
-    // inconsistent among browsers. in fact of all baselines, the only ones that
-    // are even close are alphabetic and bottom -- bottom is slightly different
-    // in ffx compared to chrome and edge, but that could be because of different
-    // font rendering schemes. alphabetic is the closest, but requires offset for
-    // ascender (or descender).
-
-    // actually it looks like there's a 1px difference in bottom baseline...
-    // alphabetic is the only one that's consistent.
-
-    // FIXME: why not just offset on a per-browser basis? it might be ugly
-    // but it's simpler.
-
-    // for the time being we will use bottom.
-
-    // why were we prepainting (because firefox, below?) and why was this so
-    // slow? do we need to preset the context text parameters? 
-
-    /*
-    const context = tile.getContext('2d', {alpha: false});
-
-    if (context) {
-      context.textAlign = 'left';
-      context.textBaseline = 'alphabetic';
-
-      // prepaint -- firefox is a little slow so flashes empty tiles sometimes
-
-      // context.fillStyle = '#fff'; // FIXME: use theme color
-      // context.fillRect(0, 0, tile.width, tile.height);
-    }
-    */
-
     return tile;
 
   }
@@ -1319,7 +1332,9 @@ export abstract class BaseLayout {
 
     // TODO: dropdown caret
 
-    this.dropdown_list.style.font = Style.Font(theme.grid_cell || {});
+    this.dropdown_list.style.font = Style.CompositeFont(theme.grid_cell_font_size, {
+      font_face: 'stack:default',
+    }, this.scale, theme).font;
 
     // testing