From 66bf460aa85f8b2828aab0d2daf5967980320195 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Fri, 20 Sep 2024 19:35:51 +0300 Subject: [PATCH 1/2] UI: Update tags list on save SCADA symbol in XML mode. Fix SCADA symbol editor layout. Revert input field form style. --- .../widget/lib/scada/scada-symbol.models.ts | 13 +++++++++++++ .../scada-symbol/scada-symbol-editor.component.ts | 13 ++++++++++++- .../scada-symbol/scada-symbol-editor.models.ts | 4 ++++ .../pages/scada-symbol/scada-symbol.component.scss | 1 + .../pages/scada-symbol/scada-symbol.component.ts | 4 ++++ ui-ngx/src/form.scss | 2 -- 6 files changed, 34 insertions(+), 3 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts index 545c9eec10..e9f55843fd 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts @@ -234,6 +234,8 @@ const svgPartsRegex = /()(.*)<\/svg>/gms; const tbNamespaceRegex = //gms; +const tbTagRegex = /tb:tag="([^"]*)"/gms; + const generateElementId = () => { const id = guid(); const firstChar = id.charAt(0); @@ -279,6 +281,17 @@ export const parseScadaSymbolMetadataFromContent = (svgContent: string): ScadaSy } }; +export const parseScadaSymbolsTagsFromContent = (svgContent: string): string[] => { + const tags: string[] = []; + tbTagRegex.lastIndex = 0; + let tagsMatch = tbTagRegex.exec(svgContent); + while (tagsMatch !== null) { + tags.push(tagsMatch[1]); + tagsMatch = tbTagRegex.exec(svgContent); + } + return tags.filter((v, i, arr) => arr.indexOf(v) === i); +}; + const parseScadaSymbolMetadataFromDom = (svgDoc: Document): ScadaSymbolMetadata => { try { const elements = svgDoc.getElementsByTagName('tb:metadata'); 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 869f68c8c7..8d0e3c86bd 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 @@ -35,7 +35,10 @@ import { } from '@home/pages/scada-symbol/scada-symbol-editor.models'; import { TbAnchorComponent } from '@shared/components/tb-anchor.component'; import { FormControl } from '@angular/forms'; -import { removeScadaSymbolMetadata } from '@home/components/widget/lib/scada/scada-symbol.models'; +import { + parseScadaSymbolsTagsFromContent, + removeScadaSymbolMetadata +} from '@home/components/widget/lib/scada/scada-symbol.models'; export interface ScadaSymbolEditorData { scadaSymbolContent: string; @@ -167,6 +170,14 @@ export class ScadaSymbolEditorComponent implements OnInit, OnDestroy, AfterViewI } } + getTags(): string[] { + if (this.editorMode === 'svg') { + return this.scadaSymbolEditObject?.getTags(); + } else { + return parseScadaSymbolsTagsFromContent(this.svgContent); + } + } + zoomIn() { this.scadaSymbolEditObject.zoomIn(); } 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 eed1c7dde0..f6be48a08c 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 @@ -411,6 +411,10 @@ export class ScadaSymbolEditObject { this.callbacks.tagsUpdated(this.tags); } + public getTags(): string[] { + return this.tags; + } + public tagHasStateRenderFunction(tag: string): boolean { return this.callbacks.tagHasStateRenderFunction(tag); } diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss index cbfe6e6846..06f1c48c2a 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.scss @@ -61,6 +61,7 @@ flex: 1; min-width: 0; min-height: 0; + width: 50%; max-width: 50%; background: #fff; &.preview { diff --git a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts index e4566712e7..755bc99bbc 100644 --- a/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts +++ b/ui-ngx/src/app/modules/home/pages/scada-symbol/scada-symbol.component.ts @@ -211,6 +211,10 @@ export class ScadaSymbolComponent extends PageComponent onApplyScadaSymbolConfig() { if (this.scadaSymbolFormGroup.valid) { + if (this.symbolEditor.editorMode === 'xml') { + const tags = this.symbolEditor.getTags(); + this.editObjectCallbacks.tagsUpdated(tags); + } const metadata: ScadaSymbolMetadata = this.scadaSymbolFormGroup.get('metadata').value; const scadaSymbolContent = this.prepareScadaSymbolContent(metadata); const file = createFileFromContent(scadaSymbolContent, this.symbolData.imageResource.fileName, diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index c842a592b7..83c773cbbb 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -395,13 +395,11 @@ padding-top: 8px; padding-bottom: 8px; min-height: 40px; - height: 40px; width: auto; .mdc-text-field__input, .mat-mdc-select { font-weight: 400; font-size: 14px; line-height: 20px; - vertical-align: middle; } } .mat-mdc-form-field-icon-prefix, .mat-mdc-form-field-icon-suffix, From 4f581e9bfe63089560ec5160eff9959a82932c06 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Mon, 23 Sep 2024 12:09:48 +0300 Subject: [PATCH 2/2] UI: Improve SCADA symbol appearance form layout. Improve widget edit tooltip position. --- .../scada-symbol-object-settings.component.html | 16 ++++++++-------- .../widget/widget-container.component.ts | 8 ++++++++ ui-ngx/src/form.scss | 6 ++++++ 3 files changed, 22 insertions(+), 8 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html index 1a4d5eb77b..eb056bd056 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/scada/scada-symbol-object-settings.component.html @@ -39,12 +39,12 @@
widget-config.appearance
-
+
{{ propertyRow.label | customTranslate }} -
{{ propertyRow.label | customTranslate }}
-
+
{{ propertyRow.label | customTranslate }}
+
{{ property.subLabel | customTranslate }}
@@ -98,10 +98,10 @@ -
-
{{ behavior.name | customTranslate }}
+
+
{{ behavior.name | customTranslate }}
0) { + position.coord.left += leftOverflow; + } return position; }, functionReady: (_instance, helper) => { diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss index 83c773cbbb..2a7ee6e7eb 100644 --- a/ui-ngx/src/form.scss +++ b/ui-ngx/src/form.scss @@ -205,6 +205,12 @@ &.space-between { justify-content: space-between; } + &.flex-wrap { + flex-wrap: wrap; + } + &.overflow-auto { + overflow: auto; + } .mat-divider-vertical { height: 56px; margin-top: -7px;