Access 'touchstart' event

[SilasNiewierra]

Hi @jerosoler ,

is it possible to access the 'touchstart' event on the editor? I would like to be able to move the flowdiagram around by using two fingers touch without having to click and drag the diagram around. I wasn't able to do so with the following snippet:

  editor.value.on('touchstart', (event: any) => {
    console.log('in touch event', event)
    if (event.targetTouches.length == 2) {
      // move the diagram around ?
    }
  })

But I don't get the log statement, nor do I know how to move the entire diagram according to the input (if it gets recognized). Is that even possible with your library? 😄

[jerosoler]

Hi! @SilasNiewierra

This should work.

editor.on('click', (e) => {
if(e.type === "touchstart") {
 //you code
 }
})

You can see in the start function how the events are set. https://github.com/jerosoler/Drawflow/blob/523a2f7cc551dd4b366d71694eef046c7f72d93b/src/drawflow.js#L53

[SilasNiewierra]

Hi @jerosoler , click is only fired if I click on the editor. But I want an event that reacts when I touch the editor (touch the trackpad on my laptop) instead of clicking it? 🤔

[jerosoler]

Have you tried it?

The library has a touchstart event:

 this.container.addEventListener('touchstart', this.click.bind(this));

Which triggers the function click

And the click function:

 click(e) {
    this.dispatch('click', e);
    ...

So I should be listening to the event.

[SilasNiewierra]

Yes I tried it. Only when I click the editor surface, I get a reaction (the console log). If I just touch the trackpad, nothing happens. But zooming in and out by pinching my fingers on the trackpad works (without printing a console log though). My code:

editor.value.on('click', (e: Event) => {
    console.log('in here with event: ', e)
})

[jerosoler]

Try the native event to see if it shows you information. In other div o in div drawflow.

...addEventListener('touchstart', function(){
console.log("test");
});

[SilasNiewierra]

I tried, but nothing gets fired. 🤔 not only in the library. Seems like a bigger issue, which has nothing to do with Drawflow 😄 thanks again