@trebco/treb 30.15.0 → 31.0.2

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
 

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

@@ -99,6 +99,13 @@ export class GridLayout extends BaseLayout {
 
   }
 
+  public FocusInLayout(target?: EventTarget): boolean {
+    if (target && target instanceof Element && this.container?.contains(target)) {
+      return true;
+    }
+    return false;
+  }
+
   public ResizeCursor(resize?: 'row'|'column'): void {
     switch (resize) {
     case 'row':