UI: Improve SCADA synbol tags functions.

ui-ngx/src/app/modules/home/components/widget/lib/svg/iot-svg.models.ts

@@ -67,7 +67,7 @@ export type IotSvgTagStateRenderFunction = (ctx: IotSvgContext, element: Element
 
 export type IotSvgActionTrigger = 'click';
 
-export type IotSvgActionFunction = (ctx: IotSvgContext, event: Event) => void;
+export type IotSvgActionFunction = (ctx: IotSvgContext, element: Element, event: Event) => void;
 export interface IotSvgAction {
   actionFunction?: string;
   action?: IotSvgActionFunction;
@@ -427,7 +427,7 @@ export class IotSvgObject {
       if (tag.actions) {
         for (const trigger of Object.keys(tag.actions)) {
           const action = tag.actions[trigger];
-          action.action = parseFunction(action.actionFunction, ['ctx', 'event']) || (() => {});
+          action.action = parseFunction(action.actionFunction, ['ctx', 'element', 'event']) || (() => {});
         }
       }
     }
@@ -483,7 +483,7 @@ export class IotSvgObject {
           elements.forEach(element => {
             element.attr('cursor', 'pointer');
             element.on(trigger, (event) => {
-              action.action(this.context, event);
+              action.action(this.context, element, event);
             });
           });
         }

ui-ngx/src/app/modules/home/pages/scada-symbol/metadata-components/scada-symbol-metadata-tag.component.html

@@ -71,7 +71,7 @@
                         [objectHighlightRules]="scadaSymbolClickActionHighlightRules"
                         [propertyHighlightRules]="scadaSymbolClickActionPropertiesHighlightRules"
                         [editorCompleter]="clickActionFunctionCompleter"
-                        [functionArgs]="['ctx', 'event']"
+                        [functionArgs]="['ctx', 'element', 'event']"
                         helpId="widget/lib/timeseries/cell_style_fn">
             </tb-js-func>
           </ng-template>

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

@@ -15,7 +15,6 @@
 ///
 
 import {
-  ChangeDetectorRef,
   Component,
   EventEmitter,
   forwardRef,
@@ -29,9 +28,12 @@ import {
 } from '@angular/core';
 import {
   ControlValueAccessor,
+  NG_VALIDATORS,
   NG_VALUE_ACCESSOR,
   UntypedFormBuilder,
+  UntypedFormControl,
   UntypedFormGroup,
+  Validator,
   Validators
 } from '@angular/forms';
 import { IotSvgTag } from '@home/components/widget/lib/svg/iot-svg.models';
@@ -55,11 +57,16 @@ import {
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent),
       multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => ScadaSymbolMetadataTagComponent),
+      multi: true
     }
   ],
   encapsulation: ViewEncapsulation.None
 })
-export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges {
+export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, OnInit, OnChanges, Validator {
 
   @ViewChild('tagSelect')
   tagSelect: MatSelect;
@@ -108,8 +115,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On
 
   private propagateChange = (_val: any) => {};
 
-  constructor(private fb: UntypedFormBuilder,
+  constructor(private fb: UntypedFormBuilder) {
-              private cd: ChangeDetectorRef) {
   }
 
   ngOnInit() {
@@ -143,7 +149,7 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -170,6 +176,15 @@ export class ScadaSymbolMetadataTagComponent implements ControlValueAccessor, On
     );
   }
 
+  public validate(_c: UntypedFormControl) {
+    const valid = this.tagFormGroup.valid;
+    return valid ? null : {
+      tag: {
+        valid: false,
+      },
+    };
+  }
+
   editTagStateRenderFunction(): void {
     this.openPanelWithCallback(this.expansionPanel, () => {
       this.openPanelWithCallback(this.renderFunctionExpansionPanel, () => {

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

@@ -131,7 +131,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O
     this.propagateChange = fn;
   }
 
-  registerOnTouched(fn: any): void {
+  registerOnTouched(_fn: any): void {
   }
 
   setDisabledState(isDisabled: boolean): void {
@@ -148,7 +148,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O
     this.tagsFormGroup.setControl('tags', this.prepareTagsFormArray(tags), {emitEvent: false});
   }
 
-  public validate(c: UntypedFormControl) {
+  public validate(_c: UntypedFormControl) {
     const valid = this.tagsFormGroup.valid;
     return valid ? null : {
       tags: {
@@ -161,7 +161,7 @@ export class ScadaSymbolMetadataTagsComponent implements ControlValueAccessor, O
     return this.tagsFormGroup.get('tags') as UntypedFormArray;
   }
 
-  trackByTag(index: number, tagControl: AbstractControl): any {
+  trackByTag(_index: number, tagControl: AbstractControl): any {
     return tagControl;
   }
 

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

@@ -73,6 +73,9 @@
       }
     }
   }
+}
+
+.tb-js-func {
   .ace_tb {
     &.ace_scada-symbol {
       &-ctx {

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

@@ -762,26 +762,26 @@ export class ScadaSymbolElement {
 const scadaSymbolCtxObjectHighlightRules: TbHighlightRule[] = [
   {
     class: 'scada-symbol-ctx',
-    regex: /(?<=\W|^)(ctx)(?=\.)\b/
+    regex: /(?<=\W|^)(ctx)(?=\W|$)\b/
   }
 ];
 
 export const scadaSymbolGeneralStateRenderHighlightRules: TbHighlightRule[] =
   scadaSymbolCtxObjectHighlightRules.concat({
     class: 'scada-symbol-svg',
-    regex: /(?<=\W|^)(svg)(?=\.)\b/
+    regex: /(?<=\W|^)(svg)(?=\W|$)\b/
   });
 
 export const scadaSymbolElementStateRenderHighlightRules: TbHighlightRule[] =
   scadaSymbolCtxObjectHighlightRules.concat({
     class: 'scada-symbol-element',
-    regex: /(?<=\W|^)(element)(?=\.)\b/
+    regex: /(?<=\W|^)(element)(?=\W|$)\b/
   });
 
 export const scadaSymbolClickActionHighlightRules: TbHighlightRule[] =
-  scadaSymbolCtxObjectHighlightRules.concat({
+  scadaSymbolElementStateRenderHighlightRules.concat({
     class: 'scada-symbol-event',
-    regex: /(?<=\W|^)(event)(?=\.)\b/
+    regex: /(?<=\W|^)(event)(?=\W|$)\b/
   });
 
 const scadaSymbolCtxPropertyHighlightRules: TbHighlightRule[] = [
@@ -832,7 +832,7 @@ export const scadaSymbolElementStateRenderPropertiesHighlightRules: TbHighlightR
   });
 
 export const scadaSymbolClickActionPropertiesHighlightRules: TbHighlightRule[] =
-  scadaSymbolCtxPropertyHighlightRules.concat({
+  scadaSymbolElementStateRenderPropertiesHighlightRules.concat({
     class: 'scada-symbol-event-properties',
     regex: /(?<=event\.)([a-zA-Z\$_\u00a1-\uffff][a-zA-Z\d\$_\u00a1-\uffff]*)\b/
   });
@@ -860,14 +860,13 @@ export const elementStateRenderFunctionCompletions = (ctxCompletion: TbEditorCom
 };
 
 export const clickActionFunctionCompletions = (ctxCompletion: TbEditorCompletion): TbEditorCompletions => {
-  return {
+  const completions = elementStateRenderFunctionCompletions(ctxCompletion);
-    ctx: ctxCompletion,
+  completions.event = {
-    event: {
+    meta: 'argument',
-      meta: 'argument',
+    type: 'Event',
-      type: 'Event',
+    description: 'DOM event.'
-      description: 'DOM event.'
-    },
   };
+  return completions;
 };
 
 export const iotSvgContextCompletion = (metadata: IotSvgMetadata, tags: string[],