Delete connection [x] button is displayed out of place on a smartphone

[gpack]

I've updated the script so that the "drawflow-delete" icon shows up on a "click" event. On a desktop (Chrome or Firefox) this is working well, and shows the "x" button on (or close by) the connection line once you click on the line, but on a smartphone (iPhone 13) when you tap the connection line, the button is being placed in weird places, very far away from the connection line.

I've attached a screenshot for reference of what it looks like on a smartphone (see below).

Is this an issue with the "touch" event or something else? Any guidance is appreciated.

thanks.

[jerosoler]

Does it happen on android too? It may be a Safari issue.

To rule out it being a safari issue.

First try to leave-normal and see if it shows normal. (CSS, and Javascript)

If it shows ok! It is a problem of its implementation, if not safari or create a demo that we could check.

[27pchrisl]

Yes this is an issue with the touch event, Safari doesn't have Touch.client[XY] (https://developer.mozilla.org/en-US/docs/Web/API/Touch/clientX#browser_compatibility) so that value is undefined at https://github.com/jerosoler/Drawflow/blob/abb241b98f77abab0b7c6c66d6791db15eee85be/src/drawflow.js#L535

Changing this to

deletebox.style.top = (e.clientY || e.pageY) * ( this.precanvas.clientHeight ......

appears to resolve the issue. There may be other issues on Safari touch devices where e.clientXY are used in the code.

[gpack]

@jerosoler I've only tested on Safari (iPhone) and Chrome (iPhone) and has that bug, but not tested on Android as I don't have an Android phone. I will try source one and test it.

@27pchrisl Thanks for the feedback. It seems like it is a Safari bug (touch event).

I'm running the "drawflow.min.js" and I can't see that line of code you've referenced so I can change it. Am I running the wrong drawflow.js script (even though everything works fine with "drawflow.min.js" ?

[jerosoler]

@27pchrisl

Please try:

    const editor = new Drawflow(id);

    editor.contextmenu = function(e) {
        this.dispatch('contextmenu', e);
        if (e.type === "touchmove") {
            var e_pos_x = e.touches[0].clientX;
            var e_pos_y = e.touches[0].clientY;
        } else {
            var e_pos_x = e.clientX;
            var e_pos_y = e.clientY;
        }
        e.preventDefault();
        if(this.editor_mode === 'fixed' || this.editor_mode === 'view') {
        return false;
        }
        if(this.precanvas.getElementsByClassName("drawflow-delete").length) {
        this.precanvas.getElementsByClassName("drawflow-delete")[0].remove()
        };
        if(this.node_selected || this.connection_selected) {
        var deletebox = document.createElement('div');
        deletebox.classList.add("drawflow-delete");
        deletebox.innerHTML = "x";
        if(this.node_selected) {
            this.node_selected.appendChild(deletebox);

        }
            if(this.connection_selected) {
                deletebox.style.top = e_pos_y * ( this.precanvas.clientHeight / (this.precanvas.clientHeight * this.zoom)) - (this.precanvas.getBoundingClientRect().y *  ( this.precanvas.clientHeight / (this.precanvas.clientHeight * this.zoom)) ) + "px";
                deletebox.style.left = e_pos_x * ( this.precanvas.clientWidth / (this.precanvas.clientWidth * this.zoom)) - (this.precanvas.getBoundingClientRect().x *  ( this.precanvas.clientWidth / (this.precanvas.clientWidth * this.zoom)) ) + "px";
                this.precanvas.appendChild(deletebox);
            }
        }
    }

    editor.start();

Add function between new Drawflow.. and editor.start()

And test in Iphone.

[27pchrisl]

This did not work as is - the event comes through as a touchstart. If I change touchmove to touchstart then it works.

[jerosoler]

Perfect! I'll upload it tomorrow! ;)

[gpack]

I can confirm the above function solved the issue on Safari/smartphone and it now shows the delete icon next to the line.

However there is another strange behaviour I noticed on the phone which could be related to the touch event: So when you tap on a connection and then try move/pan the canvas around slightly, it throws the canvas way off to the side and out of view of the nodes or to some random coordinate (not smooth panning). This happens on the live demo too (using smartphone).

How to replicate issue: Load drawflow on the phone and try touch a connection line (or tap close to the connection line), and then try slightly move the canvas area a little bit, the canvas does a big jump to some random/weird coordinate (not smooth).

[ArG97]

hi, different length of connection line have different position for X

how to make it fixed even the length changes?