@trebco/treb 28.2.3 → 28.3.5

package/dist/treb.d.ts

@@ -1,4 +1,4 @@
-/*! API v28.2. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
+/*! API v28.3. Copyright 2018-2023 trebco, llc. All rights reserved. LGPL: https://treb.app/license */
 
 /**
  * add our tag to the map
@@ -26,7 +26,7 @@ export declare class TREBGlobal {
     /**
      * create a spreadsheet instance
      */
-    CreateSpreadsheet(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet;
+    CreateSpreadsheet<USER_DATA_TYPE = unknown>(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet<USER_DATA_TYPE>;
 }
 
 /** single instance of factory class */
@@ -276,7 +276,7 @@ export interface ICellAddress {
 /**
  * embedded spreadsheet
  */
-export declare class EmbeddedSpreadsheet {
+export declare class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> {
 
     /** document name (metadata) */
     get document_name(): string | undefined;
@@ -285,10 +285,10 @@ export declare class EmbeddedSpreadsheet {
     set document_name(name: string | undefined);
 
     /** opaque user data (metadata) */
-    get user_data(): unknown;
+    get user_data(): USER_DATA_TYPE | undefined;
 
     /** opaque user data (metadata) */
-    set user_data(data: unknown);
+    set user_data(data: USER_DATA_TYPE);
 
     /** current grid scale */
     get scale(): number;
@@ -333,6 +333,12 @@ export declare class EmbeddedSpreadsheet {
      */
     get dirty(): boolean;
 
+    /**
+     * explicitly set or clear the dirty flag. it's intended for use by clients
+     * that have their own save routine.
+     */
+    set dirty(value: boolean);
+
     /**
      * returns the names of all sheets in the current document
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trebco/treb",
-  "version": "28.2.3",
+  "version": "28.3.5",
   "license": "LGPL-3.0-or-later",
   "homepage": "https://treb.app",
   "repository": {

package/treb-embed/markup/toolbar.html

@@ -14,7 +14,7 @@
   <div composite narrow>
     <button data-command="justify-left" data-target="justify" title="Left-align text"></button>
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Text justify options"></button>
       <div class="treb-icon-buttons" data-replace="justify">
         <button data-command="justify-left" title="Left-align text"></button>
         <button data-command="justify-center" title="Center-align text"></button>
@@ -26,7 +26,7 @@
   <div composite narrow>
     <button data-command="align-top" data-target="align" title="Align to top"></button>
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Text align options"></button>
       <div class="treb-icon-buttons" data-replace="align">
         <button data-command="align-top" title="Align to top"></button>
         <button data-command="align-middle" title="Align to middle"></button>
@@ -68,7 +68,7 @@
   <div composite>
     <button data-command="fill-color" data-color-bar="fill" data-color="{}" title="Fill color"></button>
     <div class="treb-menu treb-color-menu" data-color-command="fill-color" data-replace-color="fill" data-default-color-text="No fill">
-      <button dropdown></button>
+      <button dropdown title="Color options"></button>
       <div class="treb-color-chooser">
         <div class="treb-caption">Theme colors</div>
         <div class="treb-swatches"></div>
@@ -90,14 +90,14 @@
   <div composite>
     <button data-command="text-color" data-color-bar="text" data-color="{}" title="Text color"></button>
     <div class="treb-menu treb-color-menu" data-color-command="text-color" data-replace-color="text" data-default-color-text="Default text color">
-      <button dropdown></button>
+      <button dropdown title="Color options"></button>
     </div>
   </div>
 
   <div composite>
     <button data-command="border-bottom" data-target="border" title="Bottom border"></button>
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Border options"></button>
       <div class="treb-icon-buttons" data-replace="border">
         <button data-command="border-top" title="Top border"></button>        
         <button data-command="border-left" title="Left border"></button>        
@@ -118,7 +118,7 @@
   <div composite font-scale>
     <input class="treb-font-scale" title="Font scale">
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Font scale options"></button>
       <div>
         <button data-command="font-scale" data-scale="0.8">0.80</button>
         <button data-command="font-scale" data-scale="0.9">0.90</button>
@@ -147,7 +147,7 @@
   <div composite>
     <input class="treb-number-format" title="Number format">
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Number formats"></button>
       <div class="treb-number-format-menu"></div>
     </div>
   </div>
@@ -160,7 +160,7 @@
   <div composite chart-menu>
     <button data-command="insert-column-chart" data-target="annotation" title="Insert column chart"></button>
     <div class="treb-menu">
-      <button dropdown></button>
+      <button dropdown title="Chart options"></button>
       <div class="treb-icon-buttons" data-replace="annotation">
         <button data-command="insert-column-chart" title="Insert column chart"></button>
         <button data-command="insert-donut-chart" title="Insert donut chart"></button>

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

@@ -14,13 +14,13 @@ import type { ToolbarMessage } from '../toolbar-message';
 import { DOMContext } from 'treb-base-types';
 
 /** @internal */
-export class SpreadsheetConstructor {
+export class SpreadsheetConstructor<USER_DATA_TYPE = unknown> {
 
   /** container, if any */
   public root?: HTMLElement;
 
   /** spreadsheet instance */
-  public sheet?: EmbeddedSpreadsheet
+  public sheet?: EmbeddedSpreadsheet<USER_DATA_TYPE>;
 
   /** current border color. will be applied to new borders. */
   protected border_color?: Color;
@@ -278,7 +278,7 @@ export class SpreadsheetConstructor {
 
     // set a local variable so we don't have to keep testing the member
 
-    this.sheet = new EmbeddedSpreadsheet(options);
+    this.sheet = new EmbeddedSpreadsheet<USER_DATA_TYPE>(options);
 
     if (this.root) {
       this.CreateLayout(this.sheet, this.root);

package/treb-embed/src/custom-element/treb-global.ts

@@ -27,9 +27,9 @@ export class TREBGlobal {
   /** 
    * create a spreadsheet instance
    */
-  public CreateSpreadsheet(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet {
+  public CreateSpreadsheet<USER_DATA_TYPE = unknown>(options: EmbeddedSpreadsheetOptions): EmbeddedSpreadsheet<USER_DATA_TYPE> {
     const container = options.container;
-    const instance = new SpreadsheetConstructor(container);
+    const instance = new SpreadsheetConstructor<USER_DATA_TYPE>(container);
     instance.AttachElement(options);
     if (!instance.sheet) {
       throw new Error('construction failed');

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

@@ -221,7 +221,7 @@ export type TableFilterFunction = (value: CellValue, calculated_value: CellValue
 /**
  * embedded spreadsheet
  */
-export class EmbeddedSpreadsheet { 
+export class EmbeddedSpreadsheet<USER_DATA_TYPE = unknown> { 
 
   /** @internal */
   public static treb_base_path = '';
@@ -475,12 +475,12 @@ export class EmbeddedSpreadsheet {
   }
 
   /** opaque user data (metadata) */
-  public get user_data(): unknown {
+  public get user_data(): USER_DATA_TYPE|undefined {
     return this.grid.model.user_data;
   }
 
   /** opaque user data (metadata) */
-  public set user_data(data: unknown) {
+  public set user_data(data: USER_DATA_TYPE) {
     this.grid.model.user_data = data;
     this.DocumentChange();
   }
@@ -574,6 +574,19 @@ export class EmbeddedSpreadsheet {
     return this.file_version !== this.last_save_version;
   }
 
+  /**
+   * explicitly set or clear the dirty flag. it's intended for use by clients 
+   * that have their own save routine.
+   */
+  public set dirty(value: boolean) {
+    if (value) {
+      this.file_version++;
+    }
+    else {
+      this.last_save_version = this.file_version;
+    }
+  }
+
   /**
    * returns the names of all sheets in the current document
    */
@@ -1172,7 +1185,7 @@ export class EmbeddedSpreadsheet {
    * create the correct type
    */
   protected CreateView(): EmbeddedSpreadsheet {
-    const child = new EmbeddedSpreadsheet({
+    const child = new EmbeddedSpreadsheet<USER_DATA_TYPE>({
       ...this.options,
       global_name: undefined, // don't overwrite
       model: this,

package/treb-grid/package.json

@@ -1,5 +1,5 @@
 {
   "name": "treb-grid",
-  "version": "16.1.0",
+  "version": "16.1.10",
   "main": "src/index.ts"
 }

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

@@ -652,7 +652,7 @@ export class Grid extends GridBase {
       const resize_target = this.DOM.Div('annotation-resize-target', node);
 
       node.addEventListener('keydown', (event) => {
-      
+    
           const rect = annotation.scaled_rect;
           if (!rect) {
             console.info('missing scaled rect!');
@@ -714,6 +714,13 @@ export class Grid extends GridBase {
               this.Focus();
               break;
 
+            case 'Backspace':
+              if (event.metaKey && UA.is_mac) {
+                this.Focus();
+                this.RemoveAnnotation(annotation);  
+              }
+              break;
+
             case 'Delete':
             case 'Del':
               this.Focus();
@@ -4468,6 +4475,8 @@ export class Grid extends GridBase {
 
     // handle some specific control-key combinations
 
+    console.info("K", event);
+
     if (event.ctrlKey || (UA.is_mac && event.metaKey)) {
 
       // handle ctrl+shift+arrow AND ctrl+arrow (we used to just handle
@@ -4494,6 +4503,14 @@ export class Grid extends GridBase {
           delta.columns++;
           break;
 
+        case 'Backspace':
+          if (event.metaKey && UA.is_mac) {
+            if (!selection.empty) {
+              this.DeleteSelection(selection);
+            }  
+          }
+          break;
+
         case 'Delete':
         case 'Del':
           // if (event.shiftKey) // ctrl+shift+delete seems to be "delete history" in all browsers...
@@ -5062,7 +5079,7 @@ export class Grid extends GridBase {
             if (found_number_format) {
 
               const style: CellStyle = {
-                number_format: found_number_format,
+                number_format: NumberFormatCache.SymbolicName(found_number_format) || found_number_format,
               };
 
               commands.push({