Gestures in Ionic 6

Ionic Framework Ionic Vue
1

from Gestures | Ionic App Utility for Custom Gestures and Interactions…#double-click-gesture

const rectangleRef = ref();
const gesture = createGesture({
  el: rectangleRef.value,
  threshold: 0,
  onStart: () => { onStart(); }
});

how does the ref() call connect to the rectangle element? I would have expected a parameter(id of element or name or …)

i am still confused about how to make this work… in prior Ionic version (2020)
I have a directive on each element that I want to provide long press, double click support for.

on long press I need to open a dialog to delete this element (row in DB)
on doubleclick I need to open dialog to edit this element(row in DB)
and somehow I need to invoke the edit mechanism to create a NEW element (row in the DB) (from a button in a different component)
template

 <ion-row
    v-for="(row, i) in data[info.Type + 's']"
    :key="row + '.Name'"

        :ref="info.Type + i"   // this is the ref I used to $emit on
        :id="info.Type + i"    // this is the id used in the gesture

        @press="deleteRow(i, info.Type)"
        v-dbltapd="info.Type"  // this connects to the gesture
        @dbltap="addeditClicked(2, i, info.Type, 'edit', $event)"
        @dbltap2="
          addeditClicked(
            1,
            getselectedRow(info.Type),
            info.Type,
            getselectedRow(info.Type) == -1 ? 'add' : 'edit',
            $event
          )
        "
      >

my directive

     directives: { 
         dbltapd:{
         mounted(el,binding, vnode){
              const onEnd =function(data){
              }
              const onStart = function(data){
                      // at some point trigger doubletap
                      // at some point trigger press
              }      
              const gesture =createGesture({
                   name:"DoubleTap",
                   el:el, // from mounted) 
                   threshold: 0, 
                   onStart: data => { onStart(data); },
                   onEnd:   data => { onEnd(data)l },
                   data: {id: el.id}
             }
             gesture.enable(true);
        }
        }

the gesture is enabled on each element

but when it decides to trigger the events…press and doubletap… HOW to I invoke the component methods that do the work?

in prior to Ionic 5, I used an emit off the ref created in the template to trigger invoking the method.
this fails in Ionic 6. with $emit is not a function.

the binding.instance.$refs() returns the list of refs at the component level.

i haven’t tried binding.instance.methodname(parms)

the examples all manipulate THE html element… (background color, or somesuch)
how do you invoke external function from the event?

2

ok,

 binding.instance.methodname(parms)

works to fire a component method . never tried this before… 4 years… weird.

and my extra lib to get header component button to fire function in content component works, and don’t need to use refs at all

so updated template

 <ion-row
    v-for="(row, i) in data[info.Type + 's']"
        :key="row + '.Name'"
        :id="info.Type +'_'+ i"    // this is the id used in the gesture
        v-dbltapd="info.Type"  // this connects to the gesture
      >

and directive

     directives: { 
         dbltapd:{
         mounted(el,binding, vnode){
              const onEnd =function(data){
              }
              const onStart = function(data){
                      // at some point trigger doubletap
                      binding.instance.doubletapHandler(el.id)  // id has type and row , underscore between make easy to split
                      // at some point trigger press
                      binding.instance.pressHandler(el.id)
              }      
              const gesture =createGesture({
                   name:"DoubleTap",
                   el:el, // from mounted) 
                   threshold: 0, 
                   onStart: data => { onStart(data); },
                   onEnd:   data => { onEnd(data)l }
                   //data: {id: el.id}  don't need data override, not used
             }
             gesture.enable(true);
        }
        }