From d3f074be538243c15adee391ca5b53bd72bc0681 Mon Sep 17 00:00:00 2001 From: Igor Kulikov Date: Tue, 24 Sep 2024 11:30:54 +0300 Subject: [PATCH] UI: Fix dashboard widgets positioning -> allow decimal values for gridster item x/y position. Other minor fixes. --- ui-ngx/patches/angular-gridster2+15.0.4.patch | 49 ++++--------------- .../layout/dashboard-layout.component.html | 1 - .../layout/dashboard-layout.component.ts | 4 -- .../dashboard/dashboard.component.ts | 11 ----- .../lib/rpc/power-button-widget.component.ts | 11 +++-- .../widget/lib/scada/scada-symbol.models.ts | 6 ++- 6 files changed, 22 insertions(+), 60 deletions(-) diff --git a/ui-ngx/patches/angular-gridster2+15.0.4.patch b/ui-ngx/patches/angular-gridster2+15.0.4.patch index a6642928c3..df511350c5 100644 --- a/ui-ngx/patches/angular-gridster2+15.0.4.patch +++ b/ui-ngx/patches/angular-gridster2+15.0.4.patch @@ -1,44 +1,15 @@ diff --git a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs -index cf4e220..4275d11 100644 +index cf4e220..df51c91 100644 --- a/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs +++ b/node_modules/angular-gridster2/fesm2020/angular-gridster2.mjs -@@ -208,6 +208,7 @@ const GridsterConfigService = { - useTransformPositioning: true, - scrollSensitivity: 10, - scrollSpeed: 20, -+ colWidthUpdateCallback: undefined, - initCallback: undefined, - destroyCallback: undefined, - gridSizeChangedCallback: undefined, -@@ -1243,6 +1244,9 @@ class GridsterComponent { - this.renderer.setStyle(this.el, 'padding-right', this.$options.margin + 'px'); - } - this.curColWidth = (this.curWidth - marginWidth) / this.columns; -+ if (this.options.colWidthUpdateCallback) { -+ this.curColWidth = this.options.colWidthUpdateCallback(this.curColWidth); -+ } - let marginHeight = -this.$options.margin; - if (this.$options.outerMarginTop !== null) { - marginHeight += this.$options.outerMarginTop; -@@ -1266,6 +1270,9 @@ class GridsterComponent { +@@ -666,8 +666,8 @@ class GridsterRenderer { + renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', ''); } else { - this.curColWidth = (this.curWidth + this.$options.margin) / this.columns; -+ if (this.options.colWidthUpdateCallback) { -+ this.curColWidth = this.options.colWidthUpdateCallback(this.curColWidth); -+ } - this.curRowHeight = - ((this.curHeight + this.$options.margin) / this.rows) * - this.$options.rowHeightRatio; -diff --git a/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts b/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts -index 1d7cdf0..a712b35 100644 ---- a/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts -+++ b/node_modules/angular-gridster2/lib/gridsterConfig.interface.d.ts -@@ -73,6 +73,7 @@ export interface GridsterConfig { - useTransformPositioning?: boolean; - scrollSensitivity?: number | null; - scrollSpeed?: number; -+ colWidthUpdateCallback?: (colWidth: number) => number; - initCallback?: (gridster: GridsterComponentInterface) => void; - destroyCallback?: (gridster: GridsterComponentInterface) => void; - gridSizeChangedCallback?: (gridster: GridsterComponentInterface) => void; +- const x = Math.round(this.gridster.curColWidth * item.x); +- const y = Math.round(this.gridster.curRowHeight * item.y); ++ const x = this.gridster.curColWidth * item.x; ++ const y = this.gridster.curRowHeight * item.y; + const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin; + const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin; + // set the cell style diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html index 0b35de5d9a..0442061e99 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html @@ -43,7 +43,6 @@ [widgetLayouts]="layoutCtx.widgetLayouts" [columns]="columns" [displayGrid]="displayGrid" - [colWidthInteger]="colWidthInteger" [outerMargin]="outerMargin" [margin]="margin" [aliasController]="dashboardCtx.aliasController" diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts index 9646152eba..c04a2af3df 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts @@ -109,10 +109,6 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo return this.layoutCtx.gridSettings.mobileRowHeight; } - get colWidthInteger(): boolean { - return this.isScada; - } - get columns(): number { return this.layoutCtx.gridSettings.minColumns || this.layoutCtx.gridSettings.columns || 24; } diff --git a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts index 180b4da3e3..b99c89377a 100644 --- a/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts +++ b/ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts @@ -87,10 +87,6 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo @Input() columns: number; - @Input() - @coerceBoolean() - colWidthInteger = false; - @Input() @coerceBoolean() setGridSize = false; @@ -260,13 +256,6 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo itemChangeCallback: () => this.dashboardWidgets.sortWidgets(), itemInitCallback: (_, itemComponent) => { (itemComponent.item as DashboardWidget).gridsterItemComponent = itemComponent; - }, - colWidthUpdateCallback: (colWidth) => { - if (this.colWidthInteger) { - return Math.floor(colWidth); - } else { - return colWidth; - } } }; diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts index abf97356dd..6c9072e915 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/power-button-widget.component.ts @@ -18,7 +18,7 @@ import { AfterViewInit, ChangeDetectorRef, Component, - ElementRef, + ElementRef, NgZone, OnDestroy, OnInit, Renderer2, @@ -72,7 +72,8 @@ export class PowerButtonWidgetComponent extends constructor(protected imagePipe: ImagePipe, protected sanitizer: DomSanitizer, private renderer: Renderer2, - protected cd: ChangeDetectorRef) { + protected cd: ChangeDetectorRef, + protected zone: NgZone) { super(cd); } @@ -178,8 +179,10 @@ export class PowerButtonWidgetComponent extends this.renderer.setStyle(this.svgShape.node, 'overflow', 'visible'); this.renderer.setStyle(this.svgShape.node, 'user-select', 'none'); - this.powerButtonSvgShape = PowerButtonShape.fromSettings(this.ctx, this.svgShape, - this.settings, this.value, this.disabledState, () => this.onClick()); + this.zone.run(() => { + this.powerButtonSvgShape = PowerButtonShape.fromSettings(this.ctx, this.svgShape, + this.settings, this.value, this.disabledState, () => this.onClick()); + }); this.shapeResize$ = new ResizeObserver(() => { this.onResize(); 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 e9f55843fd..a7f96262c7 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 @@ -1515,7 +1515,11 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation { const transform = this._initialTransform; for (const key of Object.keys(this._transform)) { if (this._relative) { - transformed[key] = this.normFloat(transform[key] + this._transform[key]); + if (['scaleX', 'scaleY'].includes(key)) { + transformed[key] = this.normFloat(transform[key] * this._transform[key]); + } else { + transformed[key] = this.normFloat(transform[key] + this._transform[key]); + } } else { transformed[key] = this.normFloat(this._transform[key]); }