diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts index 97e9305470..869f68c8c7 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.component.ts +++ b/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); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts index b4069856b6..e38f52d0d1 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol-editor.models.ts +++ b/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; }