From 6face3fa172e5b1dffd890fd3fbd5c74f4915938 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Wed, 25 Sep 2024 19:28:25 +0300
Subject: [PATCH] UI: Fix touch event handling in dashboard edit mode. Disable
 pointer events in edit mode for some widgets.

---
 .../home/components/dashboard/dashboard.component.ts       | 1 +
 .../widget/lib/button/toggle-button-widget.component.html  | 2 +-
 .../widget/lib/button/toggle-button-widget.component.scss  | 6 ++++++
 .../components/widget/lib/rpc/slider-widget.component.html | 2 +-
 .../components/widget/lib/rpc/slider-widget.component.scss | 7 +++++++
 ui-ngx/src/app/shared/models/jquery-event.models.ts        | 7 +++----
 6 files changed, 19 insertions(+), 6 deletions(-)

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 ed941e1bfe..fd031fa90f 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
@@ -252,6 +252,7 @@ export class DashboardComponent extends PageComponent implements IDashboardCompo
       },
       draggable: {
         enabled: this.isEdit && !this.isEditingWidget,
+        delayStart: 100,
         stop: (_, itemComponent) => {(itemComponent.item as DashboardWidget).updatePosition(itemComponent.$item.x, itemComponent.$item.y);}
       },
       itemChangeCallback: () => this.dashboardWidgets.sortWidgets(),
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
index 8fb2f5bf77..c6d1765b2c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-toggle-button-panel" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div class="tb-toggle-button-panel" [class.no-pointer-events]="ctx.isEdit" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-toggle-button-overlay" [style]="overlayStyle"></div>
   <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
   <div class="tb-toggle-button-container"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.scss
index 07cc8599e2..0696d79896 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/button/toggle-button-widget.component.scss
@@ -38,6 +38,12 @@
     padding: 0;
   }
 
+  &.no-pointer-events {
+    button {
+      pointer-events: none;
+    }
+  }
+
   .tb-toggle-button-container {
     flex: 1;
     min-width: 0;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
index 9fea4f7f07..cce88d124d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-slider-panel" [style.pointer-events]="ctx.isEdit ? 'none' : 'all'" [style.padding]="padding" [style]="backgroundStyle$ | async">
+<div class="tb-slider-panel" [class.no-pointer-events]="ctx.isEdit" [style.padding]="padding" [style]="backgroundStyle$ | async">
   <div class="tb-slider-overlay" [style]="overlayStyle"></div>
   <div *ngIf="showWidgetTitlePanel" class="tb-slider-title-panel">
     <ng-container *ngTemplateOutlet="widgetTitlePanel"></ng-container>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
index 0d7115fccb..c104ba1f55 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/slider-widget.component.scss
@@ -65,6 +65,13 @@ $backgroundColorDisabled: var(--tb-slider-background-color-disabled, #D5D7E5);
   div.tb-slider-title-panel {
     z-index: 2;
   }
+  &.no-pointer-events {
+    .mat-mdc-slider.tb-slider {
+      .mdc-slider__input {
+        pointer-events: none;
+      }
+    }
+  }
   .tb-slider-content {
     flex: 1;
     min-height: 0;
diff --git a/ui-ngx/src/app/shared/models/jquery-event.models.ts b/ui-ngx/src/app/shared/models/jquery-event.models.ts
index 5657beb60b..b893da758c 100644
--- a/ui-ngx/src/app/shared/models/jquery-event.models.ts
+++ b/ui-ngx/src/app/shared/models/jquery-event.models.ts
@@ -37,13 +37,13 @@ export const initCustomJQueryEvents = () => {
           e.stopPropagation();
           timeoutId = setTimeout(() => {
             timeoutId = null;
-            e.stopPropagation();
             const touch = e.originalEvent.changedTouches[0];
             const event = $.Event('tbcontextmenu', {
               clientX: touch.clientX,
               clientY: touch.clientY,
               ctrlKey: false,
-              metaKey: false
+              metaKey: false,
+              originalEvent: e
             });
             el.trigger(event, e);
           }, 500);
@@ -56,13 +56,12 @@ export const initCustomJQueryEvents = () => {
         });
       } else {
         el.on('contextmenu', (e) => {
-          e.preventDefault();
-          e.stopPropagation();
           const event = $.Event('tbcontextmenu', {
             clientX: e.originalEvent.clientX,
             clientY: e.originalEvent.clientY,
             ctrlKey: e.originalEvent.ctrlKey,
             metaKey: e.originalEvent.metaKey,
+            originalEvent: e
           });
           el.trigger(event, e);
         });