add press gesture in messages itens to perfom message options such as delete message

src/app/pages/chat/messages/messages.page.ts

@@ -1,6 +1,6 @@
 import { AfterViewChecked, AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router'
-import { ModalController, NavParams, PopoverController } from '@ionic/angular';
+import { GestureController, Gesture, ModalController, NavParams, PopoverController } from '@ionic/angular';
 import { map } from 'rxjs/operators';
 import { EventPerson } from 'src/app/models/eventperson.model';
 import { ContactsPage } from 'src/app/pages/chat/messages/contacts/contacts.page';
@@ -17,6 +17,7 @@ import { ChatMessageStore } from 'src/app/store/chat/chat-message.service';
 import { ChatUserStorage } from 'src/app/store/chat/chat-user.service';
 import { environment } from 'src/environments/environment';
 
+
 @Component({
   selector: 'app-messages',
   templateUrl: './messages.page.html',
@@ -26,6 +27,8 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   showLoader: boolean;
 
   @ViewChild('scrollMe') private myScrollContainer: ElementRef;
+/*   @ViewChild('messageContainer') messageContainer: ElementRef; */
+  @ViewChild('rectangle') private rectangle: ElementRef;
 
   loggedUser: any;
 
@@ -47,6 +50,14 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
   startPosition: number;
   scrollToBottomBtn = false;
   attendees: EventPerson[] = [];
+  longPressActive = false;
+
+
+  private backgrounds: string[] = ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0.5)', 'rgba(255, 0, 0, 0.5)', 'rgba(255, 255, 0, 0.5)', 'rgba(255, 0, 255, 0.5)', 'rgba(0, 255, 255, 0.5)'];
+private currentColor: string = 'rgba(0, 0, 255, 0.5)';
+private lastOnStart: number = 0;
+private DOUBLE_CLICK_THRESHOLD: number = 500;
+showMessageOptions = false;
 
   constructor(
     public popoverController: PopoverController,
@@ -59,6 +70,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     private route: Router,
     private activatedRoute: ActivatedRoute,
     private fileService: FileService,
+    private gestureController: GestureController,
   ) {
     /* this.activatedRoute.paramMap.subscribe(params => {
       if(params["params"].SerialNumber) {
@@ -84,6 +96,96 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     this.el.scrollTop = this.el.scrollHeight - this.el.scrollTop; */
 
     this.setStatus('online');
+    //this.onPressingMessage();
+
+    /* setInterval(()=>{
+      const gesture = this.gestureController.create({
+        el: this.rectangle.nativeElement,
+        gestureName:'my-gesture',
+        onMove: (detail) => { this.onMove(detail); }
+      })
+
+      gesture.enable();
+     }, 9000); */
+
+
+  }
+
+  ngAfterViewInit() {
+    this.scrollChangeCallback = () => this.onContentScrolled(event);
+    window.addEventListener('scroll', this.scrollChangeCallback, true);
+
+    const gesture = this.gestureController.create({
+      el: this.rectangle.nativeElement,
+      gestureName:'long-press',
+      onStart: () => { alert('OP') },
+      /* onMove () => {
+        console.log('Move');
+      }, */
+      onEnd: () => {
+        console.log('ENNNNNDS');
+      },
+    })
+
+    gesture.enable();
+  }
+
+  handlePress(){
+    this.showMessageOptions = true;
+    /* if(!this.showMessageOptions){
+      this.showMessageOptions = true;
+    }
+    else{
+      this.showMessageOptions = false;
+    } */
+  }
+
+  handleClick(){
+    this.showMessageOptions = false;
+  }
+
+  private onStart() {
+    alert('OP');
+    const now = Date.now();
+
+    if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) {
+      this.rectangle.nativeElement.style.setProperty('background', this.getRandomBackground());
+      this.lastOnStart = 0;
+    } else {
+      this.lastOnStart = now;
+    }
+  }
+
+  private getRandomBackground() {
+    const options = this.backgrounds.filter(bg => bg !== this.currentColor);
+    this.currentColor = options[Math.floor(Math.random() * options.length)];
+
+    return this.currentColor;
+  }
+
+  /* onPressingMessage(){
+    const gesture = this.gestureController.create({
+      el: this.messageContainer.nativeElement,
+      gestureName: 'long-press',
+      onStart: ev =>{
+        this.longPressActive = true;
+        console.log('Pressing');
+      },
+      onEnd: ev => {
+        this.longPressActive = false;
+        console.log('Stop pressing');
+      }
+    });
+    gesture.enable(true);
+  } */
+
+  deleteMessage(msgId:string){
+    let body = {
+      "roomId": this.roomId,
+      "msgId": msgId,
+      "asUser": false,
+    }
+    this.alertService.confirmDeleteMessage(body);
   }
 
   setStatus(status:string){
@@ -129,10 +231,7 @@ export class MessagesPage implements OnInit, AfterViewInit, OnDestroy {
     } catch(err) { }
   }
 
-  ngAfterViewInit() {
-    this.scrollChangeCallback = () => this.onContentScrolled(event);
-    window.addEventListener('scroll', this.scrollChangeCallback, true);
-  }
+
 
   onContentScrolled(e) {
     this.startPosition = e.srcElement.scrollTop;