@trebco/treb 25.6.1 → 25.6.4

package/dist/treb.d.ts

@@ -603,14 +603,21 @@ export declare class EmbeddedSpreadsheet {
     ExportDelimited(options?: ExportOptions): string;
 
     /**
-     * Save the current document to a desktop file.
+     * @deprecated - use SaveToDesktop
      *
-     * @param filename Filename or extension to use the document name.
-     *
-     * @public
+     * @param filename
+     * @param additional_options
      */
     SaveLocalFile(filename?: string, additional_options?: SaveOptions): void;
 
+    /**
+     * Save the current document to a desktop file. This is the new version
+     * of the method, renamed from SaveLocalFile.
+     *
+     * @param filename Filename or extension to use the document name.
+     */
+    SaveToDesktop(filename?: string, additional_options?: SaveOptions): void;
+
     /**
      * Load CSV from string. This is used internally when loading network
      * documents and local files, but you can call it directly if you have

package/package.json

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

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

@@ -1513,11 +1513,11 @@ export class EmbeddedSpreadsheet {
           break;
 
         case 'save-json':
-          this.SaveLocalFile();
+          this.SaveToDesktop();
           break;
 
         case 'save-csv': // FIXME: should be export
-          this.SaveLocalFile(SaveFileType.csv);
+          this.SaveToDesktop(SaveFileType.csv);
           break;
 
         case 'export-xlsx':
@@ -2723,14 +2723,25 @@ export class EmbeddedSpreadsheet {
 
   }
 
+  /**
+   * @deprecated - use SaveToDesktop
+   * 
+   * @param filename 
+   * @param additional_options 
+   */
+  public SaveLocalFile(
+      filename: string = SaveFileType.trebjson,
+      additional_options: SaveOptions = {}): void {
+    this.SaveToDesktop(filename, additional_options);
+  }
+
   /** 
-   * Save the current document to a desktop file. 
+   * Save the current document to a desktop file. This is the new version
+   * of the method, renamed from SaveLocalFile.
    * 
    * @param filename Filename or extension to use the document name.
-   * 
-   * @public
    */
-  public SaveLocalFile(
+  public SaveToDesktop(
     filename: string = SaveFileType.trebjson,
     additional_options: SaveOptions = {}): void {
 

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

@@ -24,83 +24,74 @@
  */
 
 @mixin dark {
-
   --treb-autocomplete-background: #333;
-	--treb-autocomplete-border-color: #fff;
-	--treb-autocomplete-entry-color: #fff;
-	--treb-autocomplete-selected-entry-background: darkred;
-	--treb-autocomplete-tooltip-background: darkred;
-	--treb-autocomplete-tooltip-border-color: #fff;
-	--treb-autocomplete-tooltip-color: #fff;
-	--treb-chart-background: #000;
-	--treb-chart-grid-color: #976;
-	--treb-chart-text-color: #fff;
-	--treb-dialog-background: #000;
-	--treb-dialog-border-color: #fff;
-	--treb-dialog-color: #fff;
-	--treb-dropdown-background: #000;
-	--treb-dropdown-border-color: #fff;
-	--treb-dropdown-caret-active-background: darkred;
-	--treb-dropdown-caret-background: #444;
-	--treb-dropdown-caret-border-color: #fff;
-	--treb-dropdown-caret-color: #fff;
-	--treb-dropdown-color: #fff;
-	--treb-dropdown-selected-background: darkred;
-	--treb-grid-background: #000;
-	--treb-grid-default-color: #fff;
-	--treb-grid-grid-color: #444;
-	--treb-grid-header-background: #444;
-	--treb-grid-header-grid-color: #000;
-	--treb-note-background: #333;
-	--treb-note-border-color: #fff;
-	--treb-note-color: #fff;
-	--treb-note-marker-color: pink;
-	--treb-resize-tooltip-background: #fff;
-	--treb-resize-tooltip-color: #000;
-	--treb-scale-slider-accent-color: #fff;
-	--treb-scale-slider-background: #333;
-	--treb-scale-slider-border-color: #fff;
-	--treb-selection-color: yellow;
-	--treb-selection-fill-opacity: .2;
-	--treb-sidebar-button-background: #000;
-	--treb-sidebar-button-border-color: #888;
-	--treb-stats-value-background: #223;
-	--treb-tab-bar-active-tab-background: #444;
-	--treb-tab-bar-tab-background: #000;
-	--treb-tab-bar-tab-color: #fff;
+  --treb-autocomplete-border-color: #fff;
+  --treb-autocomplete-entry-color: #fff;
+  --treb-autocomplete-selected-entry-background: darkred;
+  --treb-autocomplete-tooltip-background: darkred;
+  --treb-autocomplete-tooltip-border-color: #fff;
+  --treb-autocomplete-tooltip-color: #fff;
+  --treb-chart-background: #000;
+  --treb-chart-grid-color: #976;
+  --treb-chart-text-color: #fff;
+  --treb-dialog-background: #000;
+  --treb-dialog-border-color: #fff;
+  --treb-dialog-color: #fff;
+  --treb-dropdown-background: #000;
+  --treb-dropdown-border-color: #fff;
+  --treb-dropdown-caret-active-background: darkred;
+  --treb-dropdown-caret-background: #444;
+  --treb-dropdown-caret-border-color: #fff;
+  --treb-dropdown-caret-color: #fff;
+  --treb-dropdown-color: #fff;
+  --treb-dropdown-selected-background: darkred;
+  --treb-grid-background: #000;
+  --treb-grid-default-color: #fff;
+  --treb-grid-grid-color: #444;
+  --treb-grid-header-background: #444;
+  --treb-grid-header-grid-color: #000;
+  --treb-note-background: #333;
+  --treb-note-border-color: #fff;
+  --treb-note-color: #fff;
+  --treb-note-marker-color: pink;
+  --treb-resize-tooltip-background: #fff;
+  --treb-resize-tooltip-color: #000;
+  --treb-scale-slider-accent-color: #fff;
+  --treb-scale-slider-background: #333;
+  --treb-scale-slider-border-color: #fff;
+  --treb-selection-color: yellow;
+  --treb-selection-fill-opacity: .2;
+  --treb-sidebar-button-background: #000;
+  --treb-sidebar-button-border-color: #888;
+  --treb-stats-value-background: #223;
+  --treb-tab-bar-active-tab-background: #444;
+  --treb-tab-bar-tab-background: #000;
+  --treb-tab-bar-tab-color: #fff;
   --treb-theme-color-1: #222;
   --treb-theme-color-2: #ddd;
-	--treb-toolbar-active-button-background: #555;
-	--treb-toolbar-button-background: #000;
-	--treb-toolbar-hover-button-background: #444;
-	--treb-ui-border-color: #666;
-	--treb-ui-color: #fff;
-
-	--treb-table-header-background: #334; // DarkSlateGray;
-	--treb-table-odd-background: #122;
-	--treb-table-header-font-weight: 700;
-
-	--treb-table-header-border-top: #889;
-	--treb-table-header-border-bottom: #889;
-	--treb-table-footer-border-bottom: #889;
-	--treb-table-odd-border-top: #889;
-	--treb-table-odd-border-bottom: #889;
-	--treb-table-even-border-top: #889;
-	--treb-table-even-border-bottom: #889;
-
-	--treb-table-total-border-top: #889;
-	--treb-table-total-border-bottom: #889;
-	
-	--treb-table-total-background: #334;
-	--treb-table-total-font-weight: 700;
-
-	// ---
-
-	--treb-color-scheme: dark;
-	--treb-resize-handle-color: lightblue;
-	--treb-resize-frame-color: lightblue;
-	--treb-formula-bar-locked-background: #234;
-
+  --treb-toolbar-active-button-background: #555;
+  --treb-toolbar-button-background: #000;
+  --treb-toolbar-hover-button-background: #444;
+  --treb-ui-border-color: #666;
+  --treb-ui-color: #fff;
+  --treb-table-header-background: #334; // DarkSlateGray;
+  --treb-table-odd-background: #122;
+  --treb-table-header-font-weight: 700;
+  --treb-table-header-border-top: #889;
+  --treb-table-header-border-bottom: #889;
+  --treb-table-footer-border-bottom: #889;
+  --treb-table-odd-border-top: #889;
+  --treb-table-odd-border-bottom: #889;
+  --treb-table-even-border-top: #889;
+  --treb-table-even-border-bottom: #889;
+  --treb-table-total-border-top: #889;
+  --treb-table-total-border-bottom: #889;
+  --treb-table-total-background: #334;
+  --treb-table-total-font-weight: 700;
+  --treb-color-scheme: dark;
+  --treb-resize-handle-color: lightblue;
+  --treb-resize-frame-color: lightblue;
+  --treb-formula-bar-locked-background: #234;
 }
 
 .treb-dark-theme {
@@ -108,7 +99,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  .treb-light-dark-theme { 
+  .treb-light-dark-theme {
     @include dark;
   }
-}
+}

package/treb-embed/style/layout.scss

@@ -47,6 +47,12 @@
   all: revert;
   box-sizing: border-box;
 
+  // text-align does not revert? it should be covered by all...
+  // or is the problem that there's no initial value? (although 
+  // unset does not work either)
+  
+  text-align: start;
+
   div, button, input, ul, ol, li, a, textarea {
 
     // maybe this is being too aggressive. we could be a little 

package/treb-embed/style/tab-bar.scss

@@ -21,6 +21,10 @@
 
 .treb-main {
 
+  .treb-mouse-mask .ghost-tab {
+    position: fixed;
+  }
+
   .treb-spreadsheet-footer {
 
     grid-area: 3/1/4/2;

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

@@ -1069,8 +1069,11 @@ export abstract class BaseLayout {
     // focus_callback: () => void,
     scroll = true): void {
 
+    // this is getting stuck under the toolbar... we need better z-stacking
+    // and this needs to be higher up in the node list
+
     if (!this.mask.parentElement) {
-      container.appendChild(this.mask);
+      container.parentElement?.parentElement?.appendChild(this.mask);
     }
 
     //if (!this.error_highlight.parentElement) {

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

@@ -155,6 +155,15 @@ export interface AnnotationDataBase {
 
 }
 
+const default_annotation_data: Partial<AnnotationDataBase> = {
+  move_with_cells: true,
+  resize_with_cells: true,
+  movable: true,
+  resizable: true,
+  removable: true,
+  selectable: true,
+};
+
 export interface AnnotationImageData extends AnnotationDataBase {
   type: 'image';
   data: ImageAnnotationData;
@@ -177,7 +186,9 @@ export type AnnotationData = AnnotationChartData | AnnotationImageData | Annotat
  */
 export class Annotation {
 
-  public data: Partial<AnnotationData> = {};
+  public data: Partial<AnnotationData> = {
+    ...default_annotation_data
+  };
 
   /** 
    * the key field is used to identify and coordinate annotations when we 
@@ -212,7 +223,10 @@ export class Annotation {
    * constructor takes persisted data
    */
   constructor(opts: Partial<AnnotationData> = {}) {
-    this.data = JSON.parse(JSON.stringify(opts)); // why clone?
+    this.data = {
+      ...default_annotation_data,
+      ...JSON.parse(JSON.stringify(opts))
+    }; // why clone?
     if (opts.rect) {
       this.rect = Rectangle.Create(opts.rect);
     }

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

@@ -326,9 +326,27 @@ export class TabBar extends EventSource<TabEvent> {
 
     this.dragging = true;
 
+    // ghost is a good idea but we need to delay it, because 
+    // it starts to flicker if you just click a tab to select
+    // it (or double click to rename)
+
+    /*
+    const ghost = document.createElement('div');
+    ghost.classList.add('ghost-tab');
+    ghost.appendChild(tab.cloneNode(true));
+    ghost.style.top = '-1000px';
+    this.layout.mask.appendChild(ghost);
+    */
+
     MouseDrag(this.layout.mask, [], (move_event) => {
 
       const [x, y] = [move_event.clientX, move_event.clientY];
+
+      /*
+      ghost.style.top = `${y}px`;
+      ghost.style.left = `${x}px`;
+      */
+
       if (y > top && y < bottom) {
         let new_order = order;
         if (x < left) { new_order = min; }
@@ -360,6 +378,10 @@ export class TabBar extends EventSource<TabEvent> {
       let current = index;
       let move_before = (order + 1) / 2;
 
+      /*
+      this.layout.mask.removeChild(ghost);
+      */
+
       // console.info('set false')
       this.dragging = false;