UI: Dashboard widget copy/paste and scada symbol animation for chrome fixes.

ui-ngx/src/app/core/services/dashboard-utils.service.ts

@@ -636,7 +636,7 @@ export class DashboardUtilsService {
                            targetLayout: DashboardLayoutId,
                            widget: Widget,
                            originalColumns?: number,
-                           originalSize?: {sizeX: number; sizeY: number},
+                           originalSize?: WidgetSize,
                            row?: number,
                            column?: number,
                            breakpoint = 'default'): void {
@@ -661,8 +661,8 @@ export class DashboardUtilsService {
       mobileHeight: widget.config.mobileHeight,
       mobileHide: widget.config.mobileHide,
       desktopHide: widget.config.desktopHide,
-      preserveAspectRatio: widget.config.preserveAspectRatio,
+      preserveAspectRatio: originalSize ? originalSize.preserveAspectRatio : widget.config.preserveAspectRatio,
-      resizable: widget.config.resizable
+      resizable: originalSize ? originalSize.resizable : widget.config.resizable
     };
     if (isUndefined(originalColumns)) {
       originalColumns = 24;
@@ -1065,7 +1065,9 @@ export class DashboardUtilsService {
     const widgetLayout = layout.widgets[widget.id];
     return {
       sizeX: widgetLayout.sizeX,
-      sizeY: widgetLayout.sizeY
+      sizeY: widgetLayout.sizeY,
+      preserveAspectRatio: widgetLayout.preserveAspectRatio,
+      resizable: widgetLayout.resizable
     };
   }
 

ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.ts

@@ -39,6 +39,7 @@ import { map } from 'rxjs/operators';
 import { displayGrids } from 'angular-gridster2/lib/gridsterConfig.interface';
 import { BreakpointId, LayoutType, ViewFormatType } from '@shared/models/dashboard.models';
 import { isNotEmptyStr } from '@core/utils';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 @Component({
   selector: 'tb-dashboard-layout',
@@ -319,12 +320,12 @@ export class DashboardLayoutComponent extends PageComponent implements ILayoutCo
     this.layoutCtx.dashboardCtrl.copyWidgetReference($event, this.layoutCtx, widget);
   }
 
-  pasteWidget($event: Event) {
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidget($event, this.layoutCtx, pos);
   }
 
-  pasteWidgetReference($event: Event) {
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent) {
     const pos = this.dashboard.getEventGridPosition($event);
     this.layoutCtx.dashboardCtrl.pasteWidgetReference($event, this.layoutCtx, pos);
   }

ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts

@@ -14,13 +14,15 @@
 /// limitations under the License.
 ///
 
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
+
 export interface ILayoutController {
   reload();
   resetHighlight();
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
-  pasteWidget($event: MouseEvent);
+  pasteWidget($event: TbContextMenuEvent | KeyboardEvent);
-  pasteWidgetReference($event: MouseEvent);
+  pasteWidgetReference($event: TbContextMenuEvent | KeyboardEvent);
 }
 
 export enum LayoutWidthType {

ui-ngx/src/app/modules/home/components/dashboard/dashboard.component.ts

@@ -529,7 +529,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     return dashboardWidget ? dashboardWidget.widget : null;
   }
 
-  getEventGridPosition(event: Event): WidgetPosition {
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition {
     const pos: WidgetPosition = {
       row: 0,
       column: 0
@@ -537,7 +537,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
     const parentElement = $(this.gridster.el);
     let pageX = 0;
     let pageY = 0;
-    if (event instanceof MouseEvent) {
+    if ('pageX' in event && 'pageY' in event) {
       pageX = event.pageX;
       pageY = event.pageY;
     }

ui-ngx/src/app/modules/home/components/widget/lib/scada/scada-symbol.models.ts

@@ -1168,13 +1168,13 @@ class CssScadaSymbolAnimation implements ScadaSymbolAnimation {
               private element: Element,
               duration = 1000)  {
     this._duration = duration;
-    this.fixPatternAnimationForChromeBelow128();
+    this.fixPatternAnimationForChrome();
   }
 
-  private fixPatternAnimationForChromeBelow128(): void {
+  private fixPatternAnimationForChrome(): void {
     try {
       const userAgent = window.navigator.userAgent;
-      if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) <= 127) {
+      if (+(/Chrome\/(\d+)/i.exec(userAgent)[1]) > 0) {
         if (this.svgShape.defs().findOne('pattern')  && !this.svgShape.defs().findOne('pattern.empty-animation')) {
           this.svgShape.defs().add(SVG('<pattern class="empty-animation"></pattern>'));
           this.svgShape.style()

ui-ngx/src/app/modules/home/models/dashboard-component.models.ts

@@ -42,6 +42,7 @@ import { enumerable } from '@shared/decorators/enumerable';
 import { UtilsService } from '@core/services/utils.service';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ComponentStyle, iconStyle, textStyle } from '@shared/models/widget-settings.models';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 
 export interface WidgetsData {
   widgets: Array<Widget>;
@@ -56,11 +57,11 @@ export interface ContextMenuItem {
 }
 
 export interface DashboardContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent) => void;
+  action: (contextMenuEvent: TbContextMenuEvent) => void;
 }
 
 export interface WidgetContextMenuItem extends ContextMenuItem {
-  action: (contextMenuEvent: MouseEvent, widget: Widget) => void;
+  action: (contextMenuEvent: TbContextMenuEvent, widget: Widget) => void;
 }
 
 export interface DashboardCallbacks {
@@ -94,7 +95,7 @@ export interface IDashboardComponent {
   highlightWidget(widgetId: string, delay?: number);
   selectWidget(widgetId: string, delay?: number);
   getSelectedWidget(): Widget;
-  getEventGridPosition(event: Event): WidgetPosition;
+  getEventGridPosition(event: TbContextMenuEvent | KeyboardEvent): WidgetPosition;
   notifyGridsterOptionsChanged();
   pauseChangeNotifications();
   resumeChangeNotifications();

ui-ngx/src/app/shared/models/jquery-event.models.ts

@@ -19,6 +19,8 @@ import Timeout = NodeJS.Timeout;
 export interface TbContextMenuEvent extends Event {
   clientX: number;
   clientY: number;
+  pageX: number;
+  pageY: number;
   ctrlKey: boolean;
   metaKey: boolean;
 }
@@ -41,6 +43,8 @@ export const initCustomJQueryEvents = () => {
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
               clientY: touch.clientY,
+              pageX: touch.pageX,
+              pageY: touch.pageY,
               ctrlKey: false,
               metaKey: false,
               originalEvent: e
@@ -59,6 +63,8 @@ export const initCustomJQueryEvents = () => {
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
             clientY: e.originalEvent.clientY,
+            pageX: e.originalEvent.pageX,
+            pageY: e.originalEvent.pageY,
             ctrlKey: e.originalEvent.ctrlKey,
             metaKey: e.originalEvent.metaKey,
             originalEvent: e

ui-ngx/src/app/shared/models/widget.models.ts

@@ -836,6 +836,8 @@ export interface WidgetPosition {
 export interface WidgetSize {
   sizeX: number;
   sizeY: number;
+  preserveAspectRatio: boolean;
+  resizable: boolean;
 }
 
 export interface IWidgetSettingsComponent {