[editor] Fix ID handling in Table elements

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

@@ -66,8 +66,8 @@ import { PositionedUIElement, UIElementType } from 'common/interfaces';
               <ng-container *ngIf="editorMode">
                 {{$any($any(elementGrid[i][j]).constructor).title}}
               </ng-container>
-              <ng-container *ngIf="editorMode && $any(elementGrid[i][j]).id !== 'id-placeholder'">
-                - {{$any(elementGrid[i][j]).id}}
+              <ng-container *ngIf="editorMode && $any(elementGrid[i][j]).alias !== 'alias-placeholder'">
+                - {{$any(elementGrid[i][j]).alias}}
               </ng-container>
             </div>
             <aspect-table-child-overlay [element]="$any(elementGrid[i][j])"

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

@@ -76,8 +76,12 @@ export class TableElement extends CompoundElement implements TableProperties {
   }
 
   setProperty(property: string, value: UIElementValue): void {
-    // Don't preserve original array, so Component gets updated
-    this[property] = value;
+    if (property === 'gridColumnSizes' || property === 'gridRowSizes') {
+      // Don't preserve original array, so Component gets updated
+      this[property] = value as { value: number; unit: string }[];
+    } else {
+      super.setProperty(property, value);
+    }
   }
 
   getElementComponent(): Type<ElementComponent> {

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

@@ -11,6 +11,7 @@ import { AudioProperties } from 'common/models/elements/media-elements/audio';
 import { ImageProperties } from 'common/models/elements/media-elements/image';
 import { DropListProperties } from 'common/models/elements/input-elements/drop-list';
 import { UIElementProperties, UIElementType } from 'common/interfaces';
+import { IDService } from 'editor/src/app/services/id.service';
 
 @Component({
   selector: 'aspect-editor-table-edit-dialog',
@@ -46,8 +47,8 @@ export class TableEditDialogComponent {
   @ViewChild(TableComponent) tableComp!: TableComponent;
   newTable: TableElement;
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { table: TableElement }) {
-    this.newTable = new TableElement(data.table);
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { table: TableElement }, private idService: IDService) {
+    this.newTable = data.table;
   }
 
   async addElement(el: { elementType: UIElementType, row: number, col: number }): Promise<void> {
@@ -80,7 +81,7 @@ export class TableEditDialogComponent {
     const newEle = ElementFactory.createElement({
       type: el.elementType,
       ...extraProps
-    });
+    }, this.idService);
     delete newEle.position;
     delete newEle.dimensions;
     newEle.gridRow = el.row + 1;
@@ -95,6 +96,7 @@ export class TableEditDialogComponent {
   removeElement(coords: { row: number, col: number }): void {
     const index = this.newTable.elements
       .findIndex(el => el.gridRow === (coords.row + 1) && el.gridColumn === (coords.col + 1));
+    this.newTable.elements[index].unregisterIDs();
     this.newTable.elements.splice(index, 1);
   }
 }

projects/editor/src/app/services/unit-services/element.service.ts

@@ -330,9 +330,6 @@ export class ElementService {
         this.dialogService.showTableEditDialog(element as TableElement)
           .subscribe((result: UIElement[]) => {
             if (result) {
-              result.forEach(el => {
-                if (el.id === 'id-placeholder') Object.assign(el, this.idService.getAndRegisterNewIDs(el.type));
-              });
               this.updateElementsProperty([element], 'elements', result);
             }
           });