UI: Fix SCADA symbol editor tooltips.

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

@@ -20,7 +20,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
-  Input,
+  Input, NgZone,
   OnChanges,
   OnDestroy,
   OnInit,
@@ -102,7 +102,8 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
     this.updateEditorMode(value);
   }
 
-  constructor(private cd: ChangeDetectorRef) {
+  constructor(private cd: ChangeDetectorRef,
+              private zone: NgZone) {
   }
 
   ngOnInit(): void {
@@ -128,7 +129,7 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI
     };
     this.scadaSymbolEditObject = new ScadaSymbolEditObject(this.scadaSymbolShape.nativeElement,
       this.tooltipsContainer.nativeElement,
-      this.tooltipsContainerComponent.viewContainerRef, this.editObjectCallbacks, this.readonly);
+      this.tooltipsContainerComponent.viewContainerRef, this.zone, this.editObjectCallbacks, this.readonly);
     if (this.data) {
       this.updateContent(this.data.scadaSymbolContent);
     }

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

@@ -17,7 +17,7 @@
 import { ImageResourceInfo } from '@shared/models/resource.models';
 import * as svgjs from '@svgdotjs/svg.js';
 import { Box, Element, Rect, Style, SVG, Svg, Timeline } from '@svgdotjs/svg.js';
-import { ViewContainerRef } from '@angular/core';
+import { NgZone, ViewContainerRef } from '@angular/core';
 import { forkJoin, from } from 'rxjs';
 import {
   setupAddTagPanelTooltip,
@@ -79,6 +79,7 @@ export class ScadaSymbolEditObject {
   constructor(private rootElement: HTMLElement,
               public tooltipsContainer: HTMLElement,
               public viewContainerRef: ViewContainerRef,
+              public zone: NgZone,
               private callbacks: ScadaSymbolEditObjectCallbacks,
               public readonly: boolean) {
     this.shapeResize$ = new ResizeObserver(() => {
@@ -758,7 +759,9 @@ export class ScadaSymbolElement {
   }
 
   private setupTagPanel() {
-    setupTagPanelTooltip(this, this.editObject.viewContainerRef);
+    this.editObject.zone.run(() => {
+      setupTagPanelTooltip(this, this.editObject.viewContainerRef);
+    });
   }
 
   private createAddTagTooltip() {
@@ -806,7 +809,9 @@ export class ScadaSymbolElement {
   }
 
   private setupAddTagPanel() {
-    setupAddTagPanelTooltip(this, this.editObject.viewContainerRef);
+    this.editObject.zone.run(() => {
+      setupAddTagPanelTooltip(this, this.editObject.viewContainerRef);
+    });
   }
 
   private innerTagTooltipPosition(_instance: ITooltipsterInstance, helper: ITooltipsterHelper,
@@ -826,6 +831,7 @@ export class ScadaSymbolElement {
   private innerAddTagTooltipPosition(_instance: ITooltipsterInstance,
                                      _helper: ITooltipsterHelper, position: ITooltipPosition): ITooltipPosition {
     const distance = 10;
+    const parentRect = this.tooltipContainer[0].getBoundingClientRect();
     switch (position.side) {
       case 'right':
         position.coord.top = this.tooltipMouseY - position.size.height / 2;
@@ -851,6 +857,14 @@ export class ScadaSymbolElement {
         position.target = this.tooltipMouseX;
         break;
     }
+    const rightOverflow = parentRect.right - (position.coord.left + position.size.width);
+    if (rightOverflow < 0) {
+      position.coord.left += rightOverflow;
+    }
+    const leftOverflow = parentRect.left - position.coord.left;
+    if (leftOverflow > 0) {
+      position.coord.left += leftOverflow;
+    }
     return position;
   }