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

@@ -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 = {
+@@ -666,8 +666,8 @@ class GridsterRenderer {
-     useTransformPositioning: true,
+             renderer.setStyle(el, DirTypes.LTR ? 'margin-right' : 'margin-left', '');
-     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 {
          }
          else {
-             this.curColWidth = (this.curWidth + this.$options.margin) / this.columns;
+-            const x = Math.round(this.gridster.curColWidth * item.x);
-+            if (this.options.colWidthUpdateCallback) {
+-            const y = Math.round(this.gridster.curRowHeight * item.y);
-+              this.curColWidth = this.options.colWidthUpdateCallback(this.curColWidth);
++            const x = this.gridster.curColWidth * item.x;
-+            }
++            const y = this.gridster.curRowHeight * item.y;
-             this.curRowHeight =
+             const width = this.gridster.curColWidth * item.cols - this.gridster.$options.margin;
-                 ((this.curHeight + this.$options.margin) / this.rows) *
+             const height = this.gridster.curRowHeight * item.rows - this.gridster.$options.margin;
-                     this.$options.rowHeightRatio;
+             // set the cell style
-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;

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"

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

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

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.zone.run(() => {
-      this.settings, this.value, this.disabledState, () => this.onClick());
+      this.powerButtonSvgShape = PowerButtonShape.fromSettings(this.ctx, this.svgShape,
+        this.settings, this.value, this.disabledState, () => this.onClick());
+    });
 
     this.shapeResize$ = new ResizeObserver(() => {
       this.onResize();

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