dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Fix SCADA symbol editor tooltips.

Browse Source
This commit is contained in:
Igor Kulikov 2024-09-19 18:57:26 +03:00
parent 9039607780
commit 7cb785bc78
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}

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

@ -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() {
this.editObject.zone.run(() => {
setupTagPanelTooltip(this, this.editObject.viewContainerRef);
});
}
private createAddTagTooltip() {
@ -806,7 +809,9 @@ export class ScadaSymbolElement {
}
private setupAddTagPanel() {
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;
}