Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing (Read 11486 times)
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Jun 2nd, 2016 at 5:11am
Print Post  
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
  

MindFusionSampleProject.zip (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #1 - Jun 2nd, 2016 at 9:05am
Print Post  
Hi,

It's been a long time since we added handling for touch events and they were mobile-Safari only back then. Our developer will try this on Android in next few days.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #2 - Jun 2nd, 2016 at 12:10pm
Print Post  
Hi,

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

Code
Select All
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
  
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #3 - Jun 3rd, 2016 at 10:59am
Print Post  
Hi Slavcho,

Thanks for the Reply. I have tried the below fix with my example, but still i can replicate the issue i.e node clicked event is not getting fired when i scroll left to right and tap on the Node.

Code (Java)
Select All
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;
};  



can u please suggest me some other thing.

Thanks
Ranadheer Reddy
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #4 - Jun 3rd, 2016 at 11:15am
Print Post  
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
  
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #5 - Jun 3rd, 2016 at 11:27am
Print Post  
Hi,

Please Find the Attached Issue Demo zip file which has a issue demonstrated video.
I have replicated issue on the chrome browser of Android Mobile Device.

Thanks
Ranadheer Reddy
  

Issue_Demo.zip (Attachment deleted)
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #6 - Jun 3rd, 2016 at 11:44am
Print Post  
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
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #7 - Jun 6th, 2016 at 8:00am
Print Post  
Hi,

Yes, we were able to reproduce it too on phone device, our developer will investigate.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #8 - Jun 6th, 2016 at 2:24pm
Print Post  
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 -

Code
Select All
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
  
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #9 - Jun 7th, 2016 at 4:43am
Print Post  
Hi Slavcho,

Thanks for the reply and the fix.  Smiley

I have applied the below suggested fix in my sample example and it seems to work in the Samsung Android Device.

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



Can u please confirm whether the fix works in all the devices and would not effect any other areas.

Thanks
Ranadheer
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #10 - Jun 7th, 2016 at 10:27am
Print Post  
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
  
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #11 - Jun 7th, 2016 at 1:11pm
Print Post  
Hi Slavcho,

I have tried the actual suggested fix in my tutorial example on the Samsung Mobile Device and i am still able to replicate the issue.  Sad

But i have made some changes to my html, so can u please get the attached file "MindFusionSampleProject (2).zip" where u need to scroll to the left to the right side of the canvas diagram and click on the nodes. In this way the issue is still replicating.

So, can u please have a look at it and let me know the update.

Thanks
Ranadheer
  

MindFusionSampleProject__2_.zip (Attachment deleted)
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #12 - Jun 7th, 2016 at 1:38pm
Print Post  
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 -

Code
Select All
<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
  
Back to top
 
IP Logged
 
Ranadheer Reddy
YaBB Newbies
*
Offline


I Love MindFusion!

Posts: 9
Joined: Jun 2nd, 2016
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #13 - Jun 8th, 2016 at 12:33pm
Print Post  
Hi,

We are using 2.1 Version diagram, does switching to JQuery mode will work as expected...??

Thanks
Ranadheer Reddy
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Online


tech.support

Posts: 3378
Joined: Oct 19th, 2005
Re: MindFusion JS diagram version 2.1 “Node Clicked Event” on the mobile devices not firing
Reply #14 - Jun 8th, 2016 at 1:52pm
Print Post  
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
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint