Hi,

We are using MindFusion JS diagram version 2.1 and facing issue regarding “Node Clicked Event” on the mobile devices.

Issue:
When diagram with multiple sharp nodes is browsed on an android mobile device and scrolled horizontal to the right side of the diagram and tapped on the node then the node clicked event is not getting fired.

Replication of Issue:
Please find the attached project which include the sample project with source code.
Browse the sample tutorial1.html on the android mobile device
Once page is loaded, tap on the node
An alert “Node Clicked” message will be displayed
Now move to the right side of the page and tap on the Nodes, a blink will be appeared but no alert message is displayed. This has been the issue where Node Clicked Event is not getting fired, where we have a more no of nodes.

Note:
Same html is working fine on the desktop browser with all the scenarios covered.

Cause:
After debugging some time, this what happening when node is tapped after scrolling to the right side of the page on the Android Mobile Chrome browser.
1.      When we tap on the node in the Android Mobile Chrome browser first the “onTouchStart “ Event of MindFusion.Diagramming.js is Fired and internally it calls the “emulateMouse” function where it returns the Client X,Y positions.
2.      Then after “OnMouseDown” is called internally with the client position value, where based on the values passed the “leftButtonDownPos” value is set in “onMouseDown” function.
3.      Next the “OnMouseUp” Event is Fired where it internally goes to “handleClick” function. In “handleClick” function based on the “leftButtonDownPos” value it tries to get the node item at that position and null value is returned over there.
4.      Then the “raiseClicked” function is called where it checks where the object value with node is null or not and if it is null then the Clicked event is raised which is happening in my case or else if it has value again another “raiseClicked” function is called where “NodeClicked” Event is raise.

More Info:
If the node tapped with default position i.e. without horizontal scrolling then the node is found at that X,Y position and “NodeClicked” Event is raised, but when its scrolled then the X,Y Values of the Nodes getting changed and the item is not getting find.
Whereas the same scenario in Desktop Chrome Browser, directly “OnMouseDown” Event is fired and the item is getting find and everything working fine.

We are expecting that the “NodeClicked” event is fired all the time irrespective of the device or the position of the node.

Thanks/Regards,
Ranadheer Reddy P

Hi,

This seems to fix it in your example (where only the page scrolls and not the parent div) -

Diagram.prototype.emulateMouse = function (e)
{
    var bounds = mflayer.getBounds(this.get_element());

    var touches = e.touches;
    var mouseEvent =
    {
        button: 0,
        clientX: touches[0].pageX - bounds.x,
        clientY: touches[0].pageY - bounds.y
    };
    return mouseEvent;
}; 

Let me know if you need div scrolling too.

Regards,
Slavcho
Mindfusion

Hi,

I've tried the work-around on Nexus tablet from this link, please verify if it works for you -
http://mindfusion.eu/_samples/testtouch/Tutorial1.html

Regards,
Slavcho
Mindfusion

Hi,

I've tried the below link on the Samsung Galaxy S5 Mobile device but still i am able to replicate the issue.
http://mindfusion.eu/_samples/testtouch/Tutorial1.html

Regards,
Ranadheer

This seems to work, but you must also switch to jQuery mode, because element-bounds access functions from MS Ajax (used to convert mouse position to local for the canvas) give us some offset on the phone device -

Diagram.prototype.emulateMouse = function (e)
{
    var touches = e.touches;
    var mouseEvent =
    {
        button: 0,
        clientX: touches[0].clientX,
        clientY: touches[0].clientY
    };
    return mouseEvent;
}; 

The test script here now loads jQuery and works fine on Samsung phone -
http://mindfusion.eu/_samples/testtouch/Tutorial1.html

We'll try it on more devices tomorrow.

Regards,
Slavcho
Mindfusion

Hi Ranadheer,

So far it works fine on several Android tablets and phones we tried. We'll check it on iOS devices later today.

Regards,
Slavcho
Mindfusion

Hi,

It seems you are still using MS Ajax. As I said above it gives us incorrect element coordinates on the phone and you will have to switch to jQuery mode. Our test above uses diagram's latest 2.6 version where jQuery is default mode. With older versions you will have to enable it explicitly before loading mindfusion.* scripts -

<script type="text/javascript">
    MindFusionImpl = "JQuery";
</script>

<script src="Scripts/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/MindFusion.Diagramming.js" type="text/javascript"></script> 

Regards,
Slavcho
Mindfusion

Hi,

jQuery mode was added in v2.1 exactly so you should have it available -
http://www.mindfusion.eu/onlinehelp/jsdiagram/index.htm?Version_History_1.htm

Your company has an active upgrade subscription so you could as well move to latest version 2.6.

Regards,
Slavcho
Mindfusion