bunch of changes related to rendering changes to template docs; trying to make it so docs don't need to rerender every time, and so that all attributes are accounted for.

1 files changed, 49 insertions, 41 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index 99edce34e..4f1186320 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -20,6 +20,14 @@ export class TemplateLayouts {
         return Object.values(TemplateLayouts);
     }
 
+    public static BasicSettings: FieldSettings = {
+        title: 'template_framework',
+        tl: [0, 0],
+        br: [400, 700],
+        viewType: ViewType.FREEFORM,
+        opts: {}
+    }
+
     public static FourField001: FieldSettings = {
         title: 'fourfield001',
         tl: [0, 0],
@@ -27,7 +35,7 @@ export class TemplateLayouts {
         viewType: ViewType.FREEFORM,
         opts: {
             backgroundColor: '#C0B887',
-            cornerRounding: .05,
+            _layout_borderRounding: .05,
             //borderColor: '#6B461F',
             //borderWidth: '12',
         },
@@ -41,9 +49,9 @@ export class TemplateLayouts {
                 description: 'A title field for very short text that contextualizes the content.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#F1F0E9',
-                    contentXCentering: 'h-center',
-                    fontBold: true,
+                    text_fontColor: '#F1F0E9',
+                    hCentering: 'h-center',
+                    contentBold: true,
                 },
             },
             {
@@ -54,7 +62,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'The main focus of the template; could be an image, long text, etc.',
                 opts: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: .05,
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
@@ -69,8 +77,8 @@ export class TemplateLayouts {
                 description: 'A caption for field #2, very short text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
-                    color: '#F1F0E9',
+                    hCentering: 'h-center',
+                    text_fontColor: '#F1F0E9',
                 },
             },
             {
@@ -81,7 +89,7 @@ export class TemplateLayouts {
                 sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                 description: 'A medium-sized field for medium/long text.',
                 opts: {
-                    cornerRounding: .05,
+                    _layout_borderRounding: .05,
                     borderColor: '#8F5B25',
                     borderWidth: '6',
                     backgroundColor: '#CECAB9',
@@ -110,7 +118,7 @@ export class TemplateLayouts {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
                     backgroundColor: '#242425',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -122,9 +130,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    textTransform: 'uppercase',
                 },
             },
             {
@@ -136,9 +144,9 @@ export class TemplateLayouts {
                 description: 'A tiny field for just a word or two of plain text.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
-                    contentXCentering: 'h-center',
-                    fontTransform: 'uppercase',
+                    text_fontColor: 'white',
+                    hCentering: 'h-center',
+                    textTransform: 'uppercase',
                 },
             },
             {
@@ -151,7 +159,7 @@ export class TemplateLayouts {
                 opts: {
                     borderWidth: '8',
                     borderColor: '#F8E71C',
-                    color: 'white',
+                    text_fontColor: 'white',
                     backgroundColor: '#242425',
                 },
             },
@@ -161,7 +169,7 @@ export class TemplateLayouts {
                 br: [-0.525, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -170,7 +178,7 @@ export class TemplateLayouts {
                 br: [-0.2175, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -179,7 +187,7 @@ export class TemplateLayouts {
                 br: [0.045, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -188,7 +196,7 @@ export class TemplateLayouts {
                 br: [0.3075, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
             {
@@ -197,7 +205,7 @@ export class TemplateLayouts {
                 br: [0.8, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    rotation: 45,
+                    _rotation: 45,
                 },
             },
         ],
@@ -285,7 +293,7 @@ export class TemplateLayouts {
                     backgroundColor: '#E2B4F5',
                     borderWidth: '9',
                     borderColor: '#9222F1',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -299,7 +307,7 @@ export class TemplateLayouts {
                     backgroundColor: '#F5B4DD',
                     borderWidth: '9',
                     borderColor: '#E260F3',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -359,7 +367,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -373,7 +381,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -410,7 +418,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: '#3B4A2C',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: '#B8DC90',
                 },
             },
@@ -496,7 +504,7 @@ export class TemplateLayouts {
                 opts: {
                     borderColor: 'yellow',
                     borderWidth: '8',
-                    contentXCentering: "h-center",
+                    hCentering: "h-center",
                     backgroundColor: 'transparent',
                 },
             },
@@ -569,7 +577,7 @@ export class TemplateLayouts {
                     borderColor: 'yellow',
                     borderWidth: '8',
                     backgroundColor: '#DDD3A9',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -580,7 +588,7 @@ export class TemplateLayouts {
                     sizes: [TemplateFieldSize.MEDIUM, TemplateFieldSize.LARGE, TemplateFieldSize.HUGE],
                     description: 'A medium to large field for visual content that is the central focus.',
                     opts: {
-                        rotation: -45,
+                        _rotation: -45,
                     },
                 },
             ]
@@ -594,7 +602,7 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. A good caption for the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    contentXCentering: 'h-center',
+                    hCentering: 'h-center',
                 },
             },
             {
@@ -606,7 +614,7 @@ export class TemplateLayouts {
                 description: 'A medium to large text field for a thorough description of the image. ',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'white',
+                    text_fontColor: 'white',
                 },
             },
             {
@@ -615,7 +623,7 @@ export class TemplateLayouts {
                 br: [1.8, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -634,7 +642,7 @@ export class TemplateLayouts {
                 br: [-0.2, -0.66],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
@@ -653,7 +661,7 @@ export class TemplateLayouts {
                 br: [1.66, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 135,
+                    _rotation: 135,
                 },
                 subfields: [
                     {
@@ -672,7 +680,7 @@ export class TemplateLayouts {
                 br: [-0.33, 1.25],
                 opts: {
                     backgroundColor: '#CEB155',
-                    rotation: 45,
+                    _rotation: 45,
                 },
                 subfields: [
                     {
@@ -718,10 +726,10 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should represent a general categorization of the image.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: '#AF0D0D',
-                    fontTransform: 'uppercase',
-                    fontBold: true,
-                    contentXCentering: 'h-left',
+                    text_fontColor: '#AF0D0D',
+                    textTransform: 'uppercase',
+                    contentBold: true,
+                    hCentering: 'h-left',
                 },
             },
             {
@@ -733,8 +741,8 @@ export class TemplateLayouts {
                 description: 'A very small text field for one to a few words. The content should contextualize field 2.',
                 opts: {
                     backgroundColor: 'transparent',
-                    color: 'black',
-                    contentXCentering: 'h-right',
+                    text_fontColor: 'black',
+                    hCentering: 'h-right',
                 },
             },
             {