Table: Fix grid coordinates to not be PositionProps

This way the props do not show in the prop-panel.

projects/common/components/compound-elements/table/table.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { ElementComponent } from 'common/directives/element-component.directive';
 import { SharedModule } from 'common/shared.module';
-import { PositionedUIElement, UIElementType } from 'common/models/elements/element';
+import { PositionedUIElement, UIElement, UIElementType } from 'common/models/elements/element';
 import { TableChildOverlay } from 'common/components/compound-elements/table/table-child-overlay.component';
 import { MatMenuModule } from '@angular/material/menu';
 import { MeasurePipe } from 'common/pipes/measure.pipe';
@@ -98,7 +98,7 @@ export class TableComponent extends CompoundElementComponent implements OnInit {
   @Output() childElementSelected = new EventEmitter<TableChildOverlay>();
   @ViewChildren(TableChildOverlay) compoundChildren!: QueryList<TableChildOverlay>;
 
-  elementGrid: (PositionedUIElement | undefined)[][] = [];
+  elementGrid: (UIElement | undefined)[][] = [];
 
   ngOnInit(): void {
     this.initElementGrid();
@@ -108,7 +108,7 @@ export class TableComponent extends CompoundElementComponent implements OnInit {
     this.elementGrid = new Array(this.elementModel.gridRowSizes.length).fill(undefined)
       .map(() => new Array(this.elementModel.gridColumnSizes.length).fill(undefined));
     this.elementModel.elements.forEach(el => {
-      this.elementGrid[(el.position.gridRow as number) - 1][(el.position.gridColumn as number) - 1] = el;
+      this.elementGrid[(el.gridRow as number) - 1][(el.gridColumn as number) - 1] = el;
     });
   }
 

projects/common/models/elements/compound-elements/table/table.ts

@@ -17,7 +17,7 @@ export class TableElement extends CompoundElement implements PositionedUIElement
   type: UIElementType = 'table';
   gridColumnSizes: { value: number; unit: string }[] = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }];
   gridRowSizes: { value: number; unit: string }[] = [{ value: 1, unit: 'fr' }, { value: 1, unit: 'fr' }];
-  elements: PositionedUIElement[] = [];
+  elements: UIElement[] = [];
   tableEdgesEnabled: boolean = false;
   position: PositionProperties;
   styling: { backgroundColor: string } & BorderStyles;
@@ -31,7 +31,17 @@ export class TableElement extends CompoundElement implements PositionedUIElement
       this.gridColumnSizes = element.gridColumnSizes;
       this.gridRowSizes = element.gridRowSizes;
       this.elements = element.elements
-        .map(el => ElementFactory.createElement(el)) as PositionedUIElement[];
+        .map(el => {
+          const newElement = ElementFactory.createElement(el);
+          newElement.gridRow = el.gridRow; // add custom table element params
+          newElement.gridColumn = el.gridColumn;
+          if (el.type === 'text-field') {
+            delete newElement.label;
+            delete newElement.appearance;
+          }
+          return newElement;
+        }) as PositionedUIElement[];
+
       this.tableEdgesEnabled = element.tableEdgesEnabled;
       this.position = { ...element.position };
       this.styling = { ...element.styling };

projects/editor/src/app/components/dialogs/table-edit-dialog.component.ts

@@ -58,20 +58,26 @@ export class TableEditDialogComponent {
           showRestTime: false
         });
     }
-    this.newTable.elements.push(ElementFactory.createElement({
+    const newEle = ElementFactory.createElement({
       type: el.elementType,
-      position: {
-        gridRow: el.row + 1,
-        gridColumn: el.col + 1
-      } as PositionProperties,
       ...extraProps
-    }) as PositionedUIElement);
+    });
+    delete newEle.position;
+    // @ts-ignore
+    delete newEle.dimensions;
+    newEle.gridRow = el.row + 1;
+    newEle.gridColumn = el.col + 1;
+    if (newEle.type === 'text-field') {
+      delete newEle.label;
+      delete newEle.appearance;
+    }
+    this.newTable.elements.push(newEle);
     this.tableComp.refresh();
   }
 
   removeElement(coords: { row: number, col: number }): void {
     const index = this.newTable.elements
-      .findIndex(el => el.position.gridRow === (coords.row + 1) && el.position.gridColumn === (coords.col + 1));
+      .findIndex(el => el.gridRow === (coords.row + 1) && el.gridColumn === (coords.col + 1));
     this.newTable.elements.splice(index, 1);
   }
 }