UI: Clear code; replace contextmenu event to tbcontextmenu

ui-ngx/src/app/core/utils.ts

@@ -25,7 +25,6 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { TranslateService } from '@ngx-translate/core';
 import { serverErrorCodesTranslations } from '@shared/models/constants';
 import { SubscriptionEntityInfo } from '@core/api/widget-api.models';
-import Timeout = NodeJS.Timeout;
 
 const varsRegex = /\${([^}]*)}/g;
 

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

@@ -22,7 +22,7 @@
   <mat-spinner color="warn" mode="indeterminate" diameter="100">
   </mat-spinner>
 </div>
-<div id="gridster-parent" #gridsterParent
+<div id="gridster-parent"
      fxFlex class="tb-dashboard-content" [class.autofill-height]="isAutofillHeight()"
                 [class.center-vertical]="centerVertical"
                 [class.center-horizontal]="centerHorizontal"

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

@@ -413,7 +413,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
 
   private openWidgetContextMenu($event: TbContextMenuEvent, widget: DashboardWidget) {
     if (this.callbacks && this.callbacks.prepareWidgetContextMenu) {
-      const items = this.callbacks.prepareWidgetContextMenu($event as any, widget.widget, widget.isReference);
+      const items = this.callbacks.prepareWidgetContextMenu($event, widget.widget, widget.isReference);
       if (items && items.length) {
         $event.preventDefault();
         $event.stopPropagation();

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.html

@@ -185,7 +185,7 @@
                   matTooltipPosition="above">
             <mat-icon>{{ isFullscreen ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
           </button>
-          <div class="tb-absolute-fill tb-rulechain-graph" (contextmenu)="openRuleChainContextMenu($event)">
+          <div class="tb-absolute-fill tb-rulechain-graph" (tbcontextmenu)="openRuleChainContextMenu($event)">
             <div #ruleChainMenuTrigger="matMenuTrigger" style="visibility: hidden; position: fixed"
                  [style.left]="ruleChainMenuPosition.x"
                  [style.top]="ruleChainMenuPosition.y"

ui-ngx/src/app/modules/home/pages/rulechain/rulechain-page.component.ts

@@ -94,6 +94,7 @@ import { VersionControlComponent } from '@home/components/vc/version-control.com
 import { ComponentClusteringMode } from '@shared/models/component-descriptor.models';
 import { MatDrawer } from '@angular/material/sidenav';
 import { HttpStatusCode } from '@angular/common/http';
+import { TbContextMenuEvent } from '@shared/models/jquery-event.models';
 import Timeout = NodeJS.Timeout;
 
 @Component({
@@ -131,7 +132,7 @@ export class RuleChainPageComponent extends PageComponent
 
   ruleChainMenuPosition = { x: '0px', y: '0px' };
 
-  contextMenuEvent: MouseEvent;
+  contextMenuEvent: TbContextMenuEvent;
 
   ruleNodeTypeDescriptorsMap = ruleNodeTypeDescriptors;
   ruleNodeTypesLibraryArray = ruleNodeTypesLibrary;
@@ -657,7 +658,7 @@ export class RuleChainPageComponent extends PageComponent
     this.validate();
   }
 
-  openRuleChainContextMenu($event: MouseEvent) {
+  openRuleChainContextMenu($event: TbContextMenuEvent) {
     if (this.ruleChainCanvas.modelService && !$event.ctrlKey && !$event.metaKey) {
       const x = $event.clientX;
       const y = $event.clientY;

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;
+  ctrlKey: boolean;
+  metaKey: boolean;
 }
 
 const isIOSDevice = (): boolean =>
@@ -39,7 +41,9 @@ export const initCustomJQueryEvents = () => {
             const touch = e.originalEvent.changedTouches[0];
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
-              clientY: touch.clientY
+              clientY: touch.clientY,
+              ctrlKey: false,
+              metaKey: false
             });
             el.trigger(event, e);
           }, 500);
@@ -56,7 +60,9 @@ export const initCustomJQueryEvents = () => {
           e.stopPropagation();
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
-            clientY: e.originalEvent.clientY
+            clientY: e.originalEvent.clientY,
+            ctrlKey: e.originalEvent.ctrlKey,
+            metaKey: e.originalEvent.metaKey,
           });
           el.trigger(event, e);
         });