@trebco/treb 31.7.8 → 31.9.1

package/treb-export/src/workbook2.ts

@@ -36,7 +36,7 @@ import { Theme } from './workbook-theme2';
 import { Sheet, VisibleState } from './workbook-sheet2';
 import type { RelationshipMap } from './relationship';
 import { ZipWrapper } from './zip-wrapper';
-import type { CellStyle, ThemeColor } from 'treb-base-types';
+import type { CellStyle, ICellAddress, ThemeColor } from 'treb-base-types';
 import type { SerializedNamed } from 'treb-data-model';
 
 /**
@@ -86,11 +86,13 @@ export interface AnchoredChartDescription {
 export interface AnchoredTextBoxDescription {
   type: 'textbox';
   style?: CellStyle;
+  reference?: string;
   paragraphs: { 
     style?: CellStyle,
     content: {
       text: string, 
       style?: CellStyle 
+      reference?: boolean,
     }[],
   }[];
   anchor: TwoCellAnchor,
@@ -397,100 +399,122 @@ export class Workbook {
 
           let style: CellStyle|undefined;
 
-          const sppr = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:spPr')[0];
-          if (sppr) {
-            style = {};
-            const fill = sppr['a:solidFill'];
-            if (fill) {
-              if (fill['a:schemeClr']?.a$?.val) {
-                const m = (fill['a:schemeClr'].a$.val).match(/accent(\d+)/);
-                if (m) {
-                  style.fill = { theme: Number(m[1]) + 3 }
-                  if (fill['a:schemeClr']['a:lumOff']?.a$?.val) {
-                    const num = Number(fill['a:schemeClr']['a:lumOff'].a$.val);
-                    if (!isNaN(num)) {
-                      (style.fill as ThemeColor).tint = num / 1e5;
+          const sp = XMLUtils.FindAll(anchor_node, 'xdr:sp')[0];
+          if (sp) {
+
+            const reference = sp.a$?.textlink || undefined;
+
+            const sppr = XMLUtils.FindAll(sp, 'xdr:spPr')[0];
+            if (sppr) {
+              style = {};
+              const fill = sppr['a:solidFill'];
+              if (fill) {
+                if (fill['a:schemeClr']?.a$?.val) {
+                  const m = (fill['a:schemeClr'].a$.val).match(/accent(\d+)/);
+                  if (m) {
+                    style.fill = { theme: Number(m[1]) + 3 }
+                    if (fill['a:schemeClr']['a:lumOff']?.a$?.val) {
+                      const num = Number(fill['a:schemeClr']['a:lumOff'].a$.val);
+                      if (!isNaN(num)) {
+                        (style.fill as ThemeColor).tint = num / 1e5;
+                      }
                     }
                   }
-                }
 
+                }
               }
             }
-          }
 
-          const tx = XMLUtils.FindAll(anchor_node, 'xdr:sp/xdr:txBody')[0];
-          if (tx) {
-
-            const paragraphs: { 
-              style?: CellStyle,
-              content: {
-                text: string, 
-                style?: CellStyle 
-              }[],
-            }[] = [];
-
-            /*
-            const content: {
-              text: string,
-              style?: CellStyle,
-            }[][] = [];
-            */
-
-            const p_list = XMLUtils.FindAll(tx, 'a:p');
-            for (const paragraph of p_list) {
-              const para: { text: string, style?: CellStyle }[] = [];
-              let style: CellStyle|undefined;
-
-              const appr = paragraph['a:pPr'];
-              if (appr) {
-                style = {};
-                if (appr.a$?.algn === 'r') {
-                  style.horizontal_align = 'right';
+            const tx = XMLUtils.FindAll(sp, 'xdr:txBody')[0];
+            if (tx) {
+
+              const paragraphs: { 
+                style?: CellStyle,
+                content: {
+                  text: string, 
+                  style?: CellStyle 
+                  reference?: boolean;
+                }[],
+              }[] = [];
+
+              const p_list = XMLUtils.FindAll(tx, 'a:p');
+              for (const paragraph of p_list) {
+                const para: { text: string, style?: CellStyle, reference?: boolean }[] = [];
+                let style: CellStyle|undefined;
+
+                const fld = paragraph['a:fld'];
+                if (fld) {
+                  if (fld.a$?.type === 'TxLink') {
+                    const entry: {text: string, reference?: boolean, style?: CellStyle } = { text: `{${reference}}`, reference: true };
+
+                    // format
+                    const fmt = fld['a:rPr'];
+                    if (fmt) {
+                      entry.style = {};
+                      if (fmt.a$?.b === '1') {
+                        entry.style.bold = true;
+                      }
+                      if (fmt.a$?.i === '1') {
+                        entry.style.italic = true;
+                      }
+                    }
+
+                    para.push(entry);
+                  }
                 }
-                else if (appr.a$?.algn === 'ctr') {
-                  style.horizontal_align = 'center';
+  
+                const appr = paragraph['a:pPr'];
+                if (appr) {
+                  style = {};
+                  if (appr.a$?.algn === 'r') {
+                    style.horizontal_align = 'right';
+                  }
+                  else if (appr.a$?.algn === 'ctr') {
+                    style.horizontal_align = 'center';
+                  }
                 }
-              }
 
-              let ar = paragraph['a:r'];
-              if (ar) {
-                if (!Array.isArray(ar)) {
-                  ar = [ar];
-                }
-                for (const line of ar) {
-
-                  const entry: { text: string, style?: CellStyle } = { 
-                    text: line['a:t'] || '',
-                  };
-
-                  // format
-                  const fmt = line['a:rPr'];
-                  if (fmt) {
-                    entry.style = {};
-                    if (fmt.a$?.b === '1') {
-                      entry.style.bold = true;
-                    }
-                    if (fmt.a$?.i === '1') {
-                      entry.style.italic = true;
-                    }
+                let ar = paragraph['a:r'];
+                if (ar) {
+                  if (!Array.isArray(ar)) {
+                    ar = [ar];
                   }
+                  for (const line of ar) {
+
+                    const entry: { text: string, style?: CellStyle } = { 
+                      text: line['a:t'] || '',
+                    };
+
+                    // format
+                    const fmt = line['a:rPr'];
+                    if (fmt) {
+                      entry.style = {};
+                      if (fmt.a$?.b === '1') {
+                        entry.style.bold = true;
+                      }
+                      if (fmt.a$?.i === '1') {
+                        entry.style.italic = true;
+                      }
+                    }
 
-                  para.push(entry);
+                    para.push(entry);
 
+                  }
                 }
-              }
 
-              paragraphs.push({ content: para, style });
+                paragraphs.push({ content: para, style });
 
-            }
-            
-            results.push({
-              type: 'textbox', 
-              style,
-              paragraphs,
-              anchor,
-            });
+              }
+              
+              results.push({
+                type: 'textbox', 
+                style,
+                paragraphs,
+                anchor,
+                reference,
+              });
 
+            }
           }
 
         }

package/treb-export/tsconfig.json

@@ -10,6 +10,7 @@
     "../treb-format/**/*.ts",
     "../treb-parser/**/*.ts",
     "../treb-calculator/**/*.ts",
+    "../treb-data-model/**/*.ts",
     "../treb-base-types/**/*.ts"
   ],
   "exclude": [

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

@@ -730,6 +730,27 @@ export abstract class BaseLayout {
           view.node.style.fontVariant = '';
         }
 
+        if (annotation.data.style?.bold) {
+          view.node.style.fontWeight = '600';
+        }
+        else {
+          view.node.style.fontWeight = '400';
+        }
+
+        if (annotation.data.style?.italic) {
+          view.node.style.fontStyle = 'italic';
+        }
+        else {
+          view.node.style.fontStyle = '';
+        }
+
+        if (annotation.data.style?.underline) {
+          view.node.style.textDecoration = 'underline';
+        }
+        else {
+          view.node.style.textDecoration = '';
+        }
+
         view.node.style.fontSize = `${font_size_pt}pt`;
 
         // update the layout here if necessary. after that it should

package/treb-grid/src/render/svg_selection_block.ts

@@ -52,7 +52,7 @@ export class SVGSelectionBlock {
     this.g = DOM.SVG('g');
     this.g.setAttribute('transform', `translate(${offset.x}, ${offset.y})`);
     
-    this.outline = DOM.SVG('rect', 'outline');
+    this.outline = DOM.SVG('rect', 'treb-selection-outline');
 
     if (primary) {
 
@@ -61,8 +61,8 @@ export class SVGSelectionBlock {
       // primary selections have a separate fill, plus the nub. separate
       // fill because the "target" is unfilled.
 
-      this.fill = DOM.SVG('path', 'fill');
-      this.nub = DOM.SVG('rect', 'nub');
+      this.fill = DOM.SVG('path', 'treb-selection-fill');
+      this.nub = DOM.SVG('rect', 'treb-selection-nub');
 
       this.g.appendChild(this.fill);
       this.g.appendChild(this.outline);
@@ -78,7 +78,7 @@ export class SVGSelectionBlock {
       // and use currentColor, but we can't set opacity separately so we
       // need another node. which is a waste, but ergonomics ftw!
 
-      this.fill = DOM.SVG('rect', 'fill');
+      this.fill = DOM.SVG('rect', 'treb-selection-fill');
 
       // this.SetThemeColor(0);
       // if (theme.additional_selection_line_dash_array) {
@@ -95,42 +95,6 @@ export class SVGSelectionBlock {
     this.g.setAttribute('transform', `translate(${offset.x}, ${offset.y})`);
   }
 
-  /*
-  public SetThemeColor(index = 0) {
-
-    if (Array.isArray(this.theme.additional_selection_color)) {
-      if (index >= this.theme.additional_selection_color.length) {
-        index = index % this.theme.additional_selection_color.length;
-      }
-    }
-
-    if (this.theme.additional_selection_overlay_color) {
-      if (typeof this.theme.additional_selection_overlay_color === 'string') {
-        this.outline.setAttribute('fill', this.theme.additional_selection_overlay_color);
-      }
-      else {
-        this.outline.setAttribute('fill', this.theme.additional_selection_overlay_color[index] || '');
-      }
-    }
-    else {
-      this.outline.setAttribute('fill', '');
-    }
-
-    if (this.theme.additional_selection_color) {
-      if (typeof this.theme.additional_selection_color === 'string') {
-        this.outline.setAttribute('stroke', this.theme.additional_selection_color);
-      }
-      else {
-        this.outline.setAttribute('stroke', this.theme.additional_selection_color[index] || '');
-      }
-    }
-    else {
-      this.outline.setAttribute('stroke', '');
-    }
-
-  }
-  */
-
   public Show(show = true) {
     this.g.style.display = show ? 'block' : 'none';
   }

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

@@ -956,6 +956,33 @@ export class Grid extends GridBase {
 
           const elements = [node, ...this.layout.GetFrozenAnnotations(annotation)];
 
+          if (event.ctrlKey || (UA.is_mac && event.metaKey)) {
+
+            const annotation_style = annotation.data.style ? { ...annotation.data.style } : {};
+            let handled = true;
+
+            switch (event.key) {
+              case 'b':
+                this.ApplyAnnotationStyle({bold: !annotation_style.bold});
+                break;
+              case 'i':
+                this.ApplyAnnotationStyle({italic: !annotation_style.italic});
+                break;
+              case 'u':
+                this.ApplyAnnotationStyle({underline: !annotation_style.underline});
+                break;
+              default: 
+                handled = false;
+            }
+
+            if (handled) {
+              event.stopPropagation();
+              event.preventDefault();
+              return;
+            }
+
+          }
+          
           const target = { x: rect.left, y: rect.top };
           switch (event.key) {
             case 'ArrowUp':
@@ -1773,9 +1800,17 @@ export class Grid extends GridBase {
     if (this.selected_annotation) {
 
       const annotation = this.selected_annotation;
+
+      // we need to adjust textbox paragraph styles so they don't 
+      // override the annotation style. OR, we need to apply this
+      // styling to the paragraphs. the former sounds better to me,
+      // but then if we allow you to edit the paragraphs we'll have
+      // to adjust the annotation style later. not sure which is 
+      // preferable.
+
       annotation.data.style = JSON.parse(JSON.stringify( 
-        delta ? Style.Composite([annotation.data.style || {}, style]) : style
-      ));
+        delta ? Style.Composite([annotation.data.style || {}, style]) : style));
+
       const node = annotation.view[this.view_index]?.node;
 
       this.layout.UpdateAnnotation(annotation, this.theme);