UI: Update tags list on save SCADA symbol in XML mode. Fix SCADA symbol editor layout. Revert input field form style.

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts

@@ -234,6 +234,8 @@ const svgPartsRegex = /(<svg.*?>)(.*)<\/svg>/gms;
 
 const tbNamespaceRegex = /<svg.*(xmlns:tb="https:\/\/thingsboard.io\/svg").*>/gms;
 
+const tbTagRegex = /tb:tag="([^"]*)"/gms;
+
 const generateElementId = () => {
   const id = guid();
   const firstChar = id.charAt(0);
@@ -279,6 +281,17 @@ export const parseScadaSymbolMetadataFromContent = (svgContent: string): ScadaSy
   }
 };
 
+export const parseScadaSymbolsTagsFromContent = (svgContent: string): string[] => {
+  const tags: string[] = [];
+  tbTagRegex.lastIndex = 0;
+  let tagsMatch = tbTagRegex.exec(svgContent);
+  while (tagsMatch !== null) {
+    tags.push(tagsMatch[1]);
+    tagsMatch = tbTagRegex.exec(svgContent);
+  }
+  return tags.filter((v, i, arr) => arr.indexOf(v) === i);
+};
+
 const parseScadaSymbolMetadataFromDom = (svgDoc: Document): ScadaSymbolMetadata => {
   try {
     const elements = svgDoc.getElementsByTagName('tb:metadata');

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts

@@ -35,7 +35,10 @@ import {
 } from '@home/pages/scada-symbol/scada-symbol-editor.models';
 import { TbAnchorComponent } from '@shared/components/tb-anchor.component';
 import { FormControl } from '@angular/forms';
-import { removeScadaSymbolMetadata } from '@home/components/widget/lib/scada/scada-symbol.models';
+import {
+  parseScadaSymbolsTagsFromContent,
+  removeScadaSymbolMetadata
+} from '@home/components/widget/lib/scada/scada-symbol.models';
 
 export interface ScadaSymbolEditorData {
   scadaSymbolContent: string;
@@ -167,6 +170,14 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
     }
   }
 
+  getTags(): string[] {
+    if (this.editorMode === 'svg') {
+      return this.scadaSymbolEditObject?.getTags();
+    } else {
+      return parseScadaSymbolsTagsFromContent(this.svgContent);
+    }
+  }
+
   zoomIn() {
     this.scadaSymbolEditObject.zoomIn();
   }

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts

@@ -411,6 +411,10 @@ export class ScadaSymbolEditObject {
     this.callbacks.tagsUpdated(this.tags);
   }
 
+  public getTags(): string[] {
+    return this.tags;
+  }
+
   public tagHasStateRenderFunction(tag: string): boolean {
     return this.callbacks.tagHasStateRenderFunction(tag);
   }

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss

@@ -61,6 +61,7 @@
     flex: 1;
     min-width: 0;
     min-height: 0;
+    width: 50%;
     max-width: 50%;
     background: #fff;
     &.preview {

ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts

@@ -211,6 +211,10 @@ export class ScadaSymbolComponent extends PageComponent
 
   onApplyScadaSymbolConfig() {
     if (this.scadaSymbolFormGroup.valid) {
+      if (this.symbolEditor.editorMode === 'xml') {
+        const tags = this.symbolEditor.getTags();
+        this.editObjectCallbacks.tagsUpdated(tags);
+      }
       const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value;
       const scadaSymbolContent = this.prepareScadaSymbolContent(metadata);
       const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName,

ui-ngx/src/form.scss

@@ -395,13 +395,11 @@
           padding-top: 8px;
           padding-bottom: 8px;
           min-height: 40px;
-          height: 40px;
           width: auto;
           .mdc-text-field__input, .mat-mdc-select {
             font-weight: 400;
             font-size: 14px;
             line-height: 20px;
-            vertical-align: middle;
           }
         }
         .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix,