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

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