dynamic text size and styles

4 files changed, 74 insertions, 14 deletions

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 09106dd00..2d96796a2 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -244,6 +244,8 @@ export class DocumentOptions {
     text_fontColor?: STRt = new StrInfo('Color of text', false);
     text_align?: STRt = new StrInfo('alignment');
     hCentering?: 'h-left' | 'h-center' | 'h-right';
+    isDefaultTemplateDoc?: BOOLt = new BoolInfo('');
+    contentBold?: BOOLt = new BoolInfo('');
 
     layout?: string | Doc; // default layout string or template document
     layout_isSvg?: BOOLt = new BoolInfo('whether document decorations and other selections should handle pointerEvents for svg content or use doc bounding box');
diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
index fa721517b..fc29531d1 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu.tsx
@@ -1242,7 +1242,7 @@ export interface FieldOpts {
     rotation?: number;
     //animation?: boolean;
     fontBold?: boolean;
-    fontTransform?: 'toUpper' | 'toLower';
+    fontTransform?: 'uppercase' | 'lowercase';
 }
 
 interface TemplateOpts extends FieldOpts {
@@ -1251,6 +1251,51 @@ interface TemplateOpts extends FieldOpts {
 
 export class FieldFuncs {
 
+    private static calculateFontSize = (contWidth: number, contHeight: number, text: string, uppercase: boolean): number => {
+        const words: string[] = text.split(/\s+/).filter(Boolean);
+
+        let currFontSize = 1; 
+        let rowsCount = 1;
+        let currTextHeight = currFontSize * rowsCount * (uppercase ? 1.25 : 1);
+    
+        while (currTextHeight <= contHeight) {
+            let wordIndex = 0;
+            let currentRowWidth = 0;
+            let wordsInCurrRow = 0;
+            rowsCount = 1;
+    
+            while (wordIndex < words.length) {
+                const word = words[wordIndex];
+                const wordWidth = word.length * currFontSize;
+    
+                if (currentRowWidth + wordWidth <= contWidth) {
+                    currentRowWidth += wordWidth;
+                    ++wordsInCurrRow;
+                } else {
+                    if (words.length !== 1 && words.length > wordsInCurrRow){ 
+                        rowsCount++;
+                        currentRowWidth = wordWidth; 
+                        wordsInCurrRow = 1;
+                    } else {
+                        break;
+                    }
+                }
+    
+                wordIndex++;
+            }
+    
+            currTextHeight = rowsCount * currFontSize * (uppercase ? 1.25 : 1);
+            console.log(rowsCount, currTextHeight)
+    
+            currFontSize += 1;
+        }
+        
+        return currFontSize - 1;
+    };
+    
+    
+    
+
     private static getDimensions = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number): {width: number, height: number, coord: {x: number, y: number}} => {
         const l = coords.tl[0] * parentHeight / 2; const t = coords.tl[1] * parentWidth / 2; //prettier-ignore
         const r = coords.br[0] * parentHeight / 2; const b = coords.br[1] * parentWidth / 2; //prettier-ignore
@@ -1263,15 +1308,14 @@ export class FieldFuncs {
     public static FreeformField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {   
+        const docWithBasicOpts = (Docs.Create.FreeformDocument)([], {  
+            isDefaultTemplateDoc: true, 
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${height/2}` ,
             backgroundColor: opts.backgroundColor ?? '',
-            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
@@ -1288,15 +1332,18 @@ export class FieldFuncs {
 
         const bool = true;
 
-        const docWithBasicOpts = (Docs.Create.TextDocument)('hi', {   
+        const docWithBasicOpts = (Docs.Create.TextDocument)('Fluorite is a very', {   
+            isDefaultTemplateDoc: true,
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
             y: coord.y, 
-            _text_fontSize: `${height/2}` ,
+            _text_fontSize: `${FieldFuncs.calculateFontSize(width, height, 'Fluorite is a very', true)}` ,
             backgroundColor: opts.backgroundColor ?? '',
             text_fontColor: opts.color,
+            contentBold: opts.fontBold,
+            textTransform: opts.fontTransform,
             color: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
@@ -1314,20 +1361,18 @@ export class FieldFuncs {
     public static ImageField = (coords: {tl: [number, number], br: [number, number]}, parentWidth: number, parentHeight: number, title: string, content: string, opts: FieldOpts) => {
         const {width, height, coord} = FieldFuncs.getDimensions(coords, parentWidth, parentHeight);
 
-        const doc = Docs.Create.ImageDocument(content, {   
+        const doc = Docs.Create.ImageDocument(content, {  
+            isDefaultTemplateDoc: true, 
             _height: height, 
             _width: width, 
             title: title, 
             x: coord.x, 
-            y: coord.y, 
-            _text_fontSize: `${height/2}` ,
+            y: coord.y,
             backgroundColor: opts.backgroundColor ?? '',
-            text_fontColor: opts.color,
             _layout_borderRounding: `${opts.cornerRounding}px` ?? '0px',
             borderColor: opts.borderColor,
             borderWidth: opts.borderWidth,
             opacity: opts.opacity,
-            hCentering: opts.contentXCentering,
             _rotation: opts.rotation,
         });
 
@@ -1424,8 +1469,8 @@ export class TemplateLayouts {
 
     public static FourField002: TemplateDocInfos = {
         title: 'fourfield2',
-        width: 475, 
-        height: 870, 
+        width: 425, 
+        height: 778, 
         opts: {
             backgroundColor: '#242425'
         },
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index 15ce9ec8f..d6fd81f83 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -22,13 +22,23 @@
 
     &.h-left * {
         display: flex;
-        justify-content: flex-start;
+        justify-content: flex-start; 
     }
 
     &.h-right * {
         display: flex;
         justify-content: flex-end;
     }
+
+    &.template * {
+        ::-webkit-scrollbar-track {
+            background: none; 
+        }
+    }
+
+    &.bold * {
+        font-weight: bold;
+    }
 }
 
 .ProseMirror:focus {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 2f36a2379..54e6c0add 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -65,6 +65,7 @@ import { removeMarkWithAttrs } from './prosemirrorPatches';
 import { RichTextMenu, RichTextMenuPlugin } from './RichTextMenu';
 import { RichTextRules } from './RichTextRules';
 import { schema } from './schema_rts';
+import { Property } from 'csstype';
 // import * as applyDevTools from 'prosemirror-dev-tools';
 
 export interface FormattedTextBoxProps extends FieldViewProps {
@@ -2113,6 +2114,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                                 paddingTop: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 paddingBottom: StrCast(this.layoutDoc._textBoxPaddingY, `${paddingY}px`),
                                 color: StrCast(this.layoutDoc.text_fontColor),
+                                fontWeight: `${this.layoutDoc.contentBold ? 'bold' : ''}`,
+                                textTransform: `${this.layoutDoc.textTransform}` as Property.TextTransform,
                             }}
                         />
                     </div>