Merge branch 'master' into fix/conflict-export-customer

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/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html

@@ -39,12 +39,12 @@
   <div [fxShow]="propertyRows?.length || appearanceProperties.children.length" class="tb-form-panel" formGroupName="properties">
     <div class="tb-form-panel-title" translate>widget-config.appearance</div>
     <div #appearanceProperties><ng-content select=".tb-scada-symbol-appearance-properties"></ng-content></div>
-    <div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between" [class]="propertyRow.rowClass">
+    <div *ngFor="let propertyRow of propertyRows" class="tb-form-row space-between flex-wrap overflow-auto" [class]="propertyRow.rowClass">
       <mat-slide-toggle *ngIf="propertyRow.switch" class="mat-slide fixed-title-width margin" formControlName="{{ propertyRow.switch.id }}">
         {{ propertyRow.label | customTranslate }}
       </mat-slide-toggle>
-      <div *ngIf="!propertyRow.switch" class="fixed-title-width">{{ propertyRow.label | customTranslate }}</div>
+      <div *ngIf="!propertyRow.switch" class="fixed-title-width fixed-title-height">{{ propertyRow.label | customTranslate }}</div>
-      <div fxLayout="row" fxFlex fxLayoutAlign="end center" fxLayoutGap="8px">
+      <div *ngIf="propertyRow.properties.length" class="tb-flex row flex-end align-center">
         <ng-container *ngFor="let property of propertyRow.properties">
           <div *ngIf="property.subLabel" class="tb-small-label">{{ property.subLabel | customTranslate }}</div>
           <mat-form-field  *ngIf="property.type === ScadaSymbolPropertyType.text" [class]="property.fieldClass" appearance="outline" subscriptSizing="dynamic">
@@ -98,10 +98,10 @@
 
 <ng-template #behaviorTpl let-behavior="behavior">
   <ng-container [formGroup]="scadaSymbolObjectSettingsFormGroup">
-    <div class="tb-form-row" formGroupName="behavior">
+    <div class="tb-form-row flex-wrap overflow-auto" formGroupName="behavior">
-      <div class="fixed-title-width" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
+      <div class="fixed-title-width fixed-title-height" tb-hint-tooltip-icon="{{ behavior.hint | customTranslate }}">{{ behavior.name | customTranslate }}</div>
       <tb-get-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.value"
-                                    fxFlex
+                                    class="tb-flex"
                                     panelTitle="{{ behavior.name | customTranslate }}"
                                     [valueType]="behavior.valueType"
                                     [trueLabel]="behavior.trueLabel | customTranslate"
@@ -113,7 +113,7 @@
                                     formControlName="{{ behavior.id }}">
       </tb-get-value-action-settings>
       <tb-set-value-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.action"
-                                    fxFlex
+                                    class="tb-flex"
                                     panelTitle="{{ behavior.name | customTranslate }}"
                                     [valueType]="behavior.valueType"
                                     [aliasController]="aliasController"
@@ -122,7 +122,7 @@
                                     formControlName="{{ behavior.id }}">
       </tb-set-value-action-settings>
       <tb-widget-action-settings *ngIf="behavior.type === ScadaSymbolBehaviorType.widgetAction"
-                                 fxFlex
+                                 class="tb-flex"
                                  panelTitle="{{ behavior.name | customTranslate }}"
                                  [callbacks]="callbacks"
                                  [widgetType]="widgetType"

ui-ngx/src/app/modules/home/components/widget/widget-container.component.ts

@@ -286,6 +286,14 @@ export class WidgetContainerComponent extends PageComponent implements OnInit, O
           position.coord.left = clientRect.right - position.size.width - container.left;
           position.coord.top = position.coord.top - container.top;
           position.target = clientRect.right;
+          const rightOverflow = container.right - (position.coord.left + position.size.width);
+          if (rightOverflow < 0) {
+            position.coord.left += rightOverflow;
+          }
+          const leftOverflow = container.left - position.coord.left;
+          if (leftOverflow > 0) {
+            position.coord.left += leftOverflow;
+          }
           return position;
         },
         functionReady: (_instance, helper) => {

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

@@ -205,6 +205,12 @@
     &.space-between {
       justify-content: space-between;
     }
+    &.flex-wrap {
+      flex-wrap: wrap;
+    }
+    &.overflow-auto {
+      overflow: auto;
+    }
     .mat-divider-vertical {
       height: 56px;
       margin-top: -7px;
@@ -395,13 +401,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,