starting to integrate refactor with docreatormenu functionality

1 files changed, 62 insertions, 72 deletions

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
index 43b0b1572..00eb8fab4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/TemplateBackend.tsx
@@ -1,4 +1,4 @@
-import { FieldOpts, FieldSettings } from "./FieldTypes/Field";
+import { FieldOpts, FieldSettings, ViewType } from "./FieldTypes/Field";
 import { } from "./FieldTypes/StaticField";
 
 export enum TemplateFieldType {
@@ -15,53 +15,24 @@ export enum TemplateFieldSize {
     HUGE = 'huge',
 }
 
-export interface TemplateDocInfos {
-    title: string;
-    height: number;
-    width: number;
-    opts: FieldOpts;
-    fields: FieldSettings[];
-    decorations: FieldSettings[];
-}
-
 export class TemplateLayouts {
-    public static get allTemplates(): TemplateDocInfos[] {
-        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as TemplateDocInfos[];
+    public static get allTemplates(): FieldSettings[] {
+        return Object.values(TemplateLayouts).filter(value => typeof value === 'object' && value !== null && 'title' in value) as FieldSettings[];
     }
 
-    public static getTemplateByTitle = (title: string): TemplateDocInfos | undefined => {
-        switch (title) {
-            case 'fourfield1':
-                return TemplateLayouts.FourField001;
-            case 'fourfield2':
-                return TemplateLayouts.FourField002;
-            // case 'fourfield3':
-            //     return TemplateLayouts.FourField003;
-            case 'fourfield4':
-                return TemplateLayouts.FourField004;
-            case 'threefield1':
-                return TemplateLayouts.ThreeField001;
-            case 'threefield2':
-                return TemplateLayouts.ThreeField002;
-            default:
-                break;
-        }
-
-        return undefined;
-    };
-
-    public static FourField001: TemplateDocInfos = {
-        title: 'fourfield1',
-        width: 416,
-        height: 700,
+    public static FourField001: FieldSettings = {
+        tl: [0, 0],
+        br: [416, 700],
+        viewType: ViewType.FREEFORM,
         opts: {
             backgroundColor: '#C0B887',
             cornerRounding: 20,
             borderColor: '#6B461F',
             borderWidth: '12',
         },
-        fields: [
+        subfields: [
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.95, -1],
                 br: [0.95, -0.85],
                 types: [TemplateFieldType.TEXT],
@@ -75,6 +46,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.87, -0.83],
                 br: [0.87, 0.2],
                 types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
@@ -88,6 +60,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.8, 0.2],
                 br: [0.8, 0.3],
                 types: [TemplateFieldType.TEXT],
@@ -100,6 +73,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.87, 0.37],
                 br: [0.87, 0.96],
                 types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
@@ -113,18 +87,18 @@ export class TemplateLayouts {
                 },
             },
         ],
-        decorations: [],
     };
 
-    public static FourField002: TemplateDocInfos = {
-        title: 'fourfield2',
-        width: 425,
-        height: 778,
+    public static FourField002: FieldSettings = {
+        viewType: ViewType.FREEFORM,
+        tl: [0,0],
+        br: [425, 778],
         opts: {
             backgroundColor: '#242425',
         },
-        fields: [
+        subfields: [
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.83, -0.95],
                 br: [0.83, -0.2],
                 types: [TemplateFieldType.VISUAL, TemplateFieldType.TEXT],
@@ -136,6 +110,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.65, -0.2],
                 br: [0.65, -0.02],
                 types: [TemplateFieldType.TEXT],
@@ -149,6 +124,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.65, 0],
                 br: [0.65, 0.18],
                 types: [TemplateFieldType.TEXT],
@@ -162,6 +138,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.83, 0.2],
                 br: [0.83, 0.95],
                 types: [TemplateFieldType.TEXT, TemplateFieldType.VISUAL],
@@ -174,46 +151,49 @@ export class TemplateLayouts {
                     backgroundColor: '#242425',
                 },
             },
-        ],
-        decorations: [
             {
+                viewType: ViewType.DEC,
                 tl: [-0.8, -0.075],
                 br: [-0.525, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    //rotation: 45,
+                    rotation: 45,
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [-0.3075, -0.0245],
                 br: [-0.2175, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    //rotation: 45,
+                    rotation: 45,
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [-0.045, -0.0245],
                 br: [0.045, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    //rotation: 45,
+                    rotation: 45,
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [0.2175, -0.0245],
                 br: [0.3075, 0.0245],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    //rotation: 45,
+                    rotation: 45,
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [0.525, -0.075],
                 br: [0.8, 0.075],
                 opts: {
                     backgroundColor: '#F8E71C',
-                    //rotation: 45,
+                    rotation: 45,
                 },
             },
         ],
@@ -279,17 +259,18 @@ export class TemplateLayouts {
     //     }]
     // };
 
-    public static FourField004: TemplateDocInfos = {
-        title: 'fourfield4',
-        width: 414,
-        height: 583,
+    public static FourField004: FieldSettings = {
+        viewType: ViewType.FREEFORM,
+        tl: [0,0],
+        br: [414,583],
         opts: {
             backgroundColor: '#6CCAF0',
             borderColor: '#1088C3',
             borderWidth: '10',
         },
-        fields: [
+        subfields: [
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.86, -0.92],
                 br: [-0.075, -0.77],
                 types: [TemplateFieldType.TEXT],
@@ -303,6 +284,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [0.075, -0.92],
                 br: [0.86, -0.77],
                 types: [TemplateFieldType.TEXT],
@@ -316,6 +298,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.81, -0.64],
                 br: [0.81, 0.48],
                 types: [TemplateFieldType.VISUAL],
@@ -327,6 +310,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.86, 0.6],
                 br: [0.86, 0.92],
                 types: [TemplateFieldType.TEXT],
@@ -338,9 +322,8 @@ export class TemplateLayouts {
                     backgroundColor: '#F3F57D',
                 },
             },
-        ],
-        decorations: [
             {
+                viewType: ViewType.DEC,
                 tl: [-0.852, -0.67],
                 br: [0.852, 0.51],
                 opts: {
@@ -352,15 +335,16 @@ export class TemplateLayouts {
         ],
     };
 
-    public static ThreeField001: TemplateDocInfos = {
-        title: 'threefield1',
-        width: 575,
-        height: 770,
+    public static ThreeField001: FieldSettings = {
+        viewType: ViewType.FREEFORM,
+        tl: [0,0],
+        br: [575, 770],
         opts: {
             backgroundColor: '#DDD3A9',
         },
-        fields: [
+        subfields: [
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.66, -0.747],
                 br: [0.66, 0.247],
                 types: [TemplateFieldType.VISUAL],
@@ -373,6 +357,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.7, 0.2],
                 br: [0.7, 0.46],
                 types: [TemplateFieldType.TEXT],
@@ -384,6 +369,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.95, 0.5],
                 br: [0.95, 0.95],
                 types: [TemplateFieldType.TEXT],
@@ -394,9 +380,8 @@ export class TemplateLayouts {
                     color: 'white',
                 },
             },
-        ],
-        decorations: [
             {
+                viewType: ViewType.DEC,
                 tl: [0.2, -1.32],
                 br: [1.8, -0.66],
                 opts: {
@@ -405,6 +390,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [-1.8, -1.32],
                 br: [-0.2, -0.66],
                 opts: {
@@ -413,6 +399,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [0.33, 0.75],
                 br: [1.66, 1.25],
                 opts: {
@@ -421,6 +408,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.DEC,
                 tl: [-1.66, 0.75],
                 br: [-0.33, 1.25],
                 opts: {
@@ -431,15 +419,16 @@ export class TemplateLayouts {
         ],
     };
 
-    public static ThreeField002: TemplateDocInfos = {
-        title: 'threefield2',
-        width: 477,
-        height: 662,
+    public static ThreeField002: FieldSettings = {
+        viewType: ViewType.FREEFORM,
+        tl: [0,0],
+        br: [477, 662],
         opts: {
             backgroundColor: '#9E9C95',
         },
-        fields: [
+        subfields: [
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.875, -0.9],
                 br: [0.875, 0.7],
                 types: [TemplateFieldType.VISUAL],
@@ -451,6 +440,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [0.1, 0.775],
                 br: [0.95, 0.975],
                 types: [TemplateFieldType.TEXT],
@@ -465,6 +455,7 @@ export class TemplateLayouts {
                 },
             },
             {
+                viewType: ViewType.STATIC,
                 tl: [-0.95, 0.775],
                 br: [-0.1, 0.975],
                 types: [TemplateFieldType.TEXT],
@@ -476,9 +467,8 @@ export class TemplateLayouts {
                     contentXCentering: 'h-right',
                 },
             },
-        ],
-        decorations: [
             {
+                viewType: ViewType.DEC,
                 tl: [-0.025, 0.8],
                 br: [0.025, 0.95],
                 opts: {