- Welcome, Guest. Please Login or Register
MindFusion  
  Version 2 of our Xamarin Calendar component adds Resource view and support for Universal Windows Platform. Now beta testing UWP version of Xamarin Diagram.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Page Index Toggle Pages: 1 Send Topic Print  
Facing problem regarding tooltip
Read 152 times

Shafi   Offline
YaBB Newbies
*
Posts: 39
Gender: male
I Love MindFusion!


   
     
 
Facing problem regarding tooltip
Aug 18th, 2017 at 7:16am
 
[ftp][/ftp]Hi

It regarding my last post https://mindfusion.eu/Forum/YaBB.pl?num=1500460403. We have to use drag and drop as well handle mouse click event in our diagram.

As you said in reply that if we comment out diagram.setEnabled(false) it will work. It works fine for me too. But my problem is that we cannot afford to comment out that code because we have use that code for enabling dragging and dropping. Please suggest some other way so that we use both functionallity.

Please have look at code over here
Code (Javascript):
 onDiagramMouseDown(event) {
        const node = this.getNodeUnderCursor(event);
        if (node) {
            const localPoint = this.getLocalPoint(event);
            const manipulator = node.hitTestManipulators(localPoint);
            this.nodeClick.emit(node.data);
            if (manipulator !== null) {
                this.diagram.setEnabled(true);
            } else {
                this.diagram.setEnabled(false);
            }
            
        } else {
            this.diagram.setEnabled(true);
        }
       
    }

    onDiagramMouseUp(event) {
        this.diagram.setEnabled(true);
    }
 



please have look at this line in code
this.nodeClick.emit(node.data);
. We can hear the event but when ever are redirecting to another page tooltip remain over the next page also.

Can you please give us good solution which support both click as well as drag and drop?

Please have a look at the code.
As i am able to upload whole project because over here maximum size file is 300 KB only.
To run this attached project
1. You need to extract all three zip.
2. Run npm install in Angular2_mindfusion_example folder
3. Copy the files from folder name "extract_it_in_assets_mindfusion"  and paste it in "Angular2_Mindfusion_example\src\assets\mindfusion"
4. As i am using attached diagram library please copy and paste it in node_modules
5. Now try  run by npm start
6. You can see the result here  http://localhost:4200/

Thanks
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #1 - Aug 18th, 2017 at 9:04am
 
Hi,

Did you try the solution provided here: https://mindfusion.eu/Forum/YaBB.pl?num=1500460403/15 ?

It shows how to raise the node click event yourself, so you can leave your diagram.setEnabled(false) logic in place.

Let me know if that helps.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Shafi   Offline
YaBB Newbies
*
Posts: 39
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #2 - Oct 11th, 2017 at 6:33am
 
I have tried this but not useful for me. Please have look at snapshot for tool tip issue. I am attaching the example project. In this example project if you click on any node it will redirect to other page where as tool tip remains at that place. Please have look at snapshot. Please suggest how can we resolve this issue.

As i am able to upload whole project because over here maximum size file is 300 KB only. Please increase this to at least 5 MB
To run this attached project
1. You need to extract all three zip.
2. Run npm install in example_11-10-2017 folder
3. Copy the files from folder name "library"  and paste it in "example_11-10-2017\src\assets\mindfusion"
4. As i am using attached diagram library please copy and paste it in node_modules
5. Now try  run by npm start
6. You can see the result here  http://localhost:4200/
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #3 - Oct 11th, 2017 at 9:50am
 
Hi,

It appears that the tooltip div remains on the page after you reload your angular view. You can remove it from your click handler, before the reload occurs. Something like:
Code (Javascript):
var tooltip = document.querySelector("div#diagram_tooltip");
if (tooltip)
   tooltip.parentElement.removeChild(tooltip);

var focusable = document.querySelector("div#diagram_focusable");
if (focusable)
   focusable.parentElement.removeChild(focusable); 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Shafi   Offline
YaBB Newbies
*
Posts: 39
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #4 - Oct 12th, 2017 at 12:33pm
 
Hi lyubo,

Thanks It works but due to this I am facing another issue. If I removed tool tip on click of event and Node which I clicked is not routing any other pages and I remain on same page. It stop showing tool tip. 
As i am creating a reusable Angular2 component in which we don't if on click event we need route or not we don't know about that. It only emits the click event to user who is using our component.
Is there any other better solution for this?
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #5 - Oct 12th, 2017 at 1:39pm
 
Hi,

You could achieve this behavior by implementing the OnDestroy interface and call the clean-up code there. The following code was successful in the sample you provided above:

Code (Javascript):
export class DiagramComponent implements OnInit, OnDestroy {
//...
	ngOnDestroy() {
		var tooltip = document.querySelector("div#diagram_tooltip");
		if (tooltip)
			tooltip.parentElement.removeChild(tooltip);

		var focusable = document.querySelector("div#diagram_focusable");
		if (focusable)
			focusable.parentElement.removeChild(focusable);
	}
//...
} 



Regards,
Lyubo
 
 
 
IP Logged    
 
     

Shafi   Offline
YaBB Newbies
*
Posts: 39
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #6 - Oct 16th, 2017 at 7:48am
 
Thanks this solve my issue.

I have more problem, Its related to mindfusion licence issue
In the above project if set the valid licence  using below API. License key works it does not show "Mindfusion Diagramming for Java Script, trail version" but after some operation like routing through node and then comming back to original node again it shows "Mindfusion Diagramming for Java Script, trail version". Can you please let me know where i am going wrong or Why this happening?

this.diagram.setLicenseKey(License.Key);
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #7 - Oct 16th, 2017 at 8:45am
 
Hi,

I could not reproduce the issue in your test project. On your account page you should see two keys, one for diagramming pack and one for js diagram. JavaScript diagram keys are in a different format, make sure the one you are using is from the js diagram row in keys table. If you are using the correct key, you can send it via private message, so that I can check it.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Shafi   Offline
YaBB Newbies
*
Posts: 39
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #8 - Oct 16th, 2017 at 9:45am
 
Hi Lyubo,

I can reproduce this  by following steps

1) if you click on node and it will route about page
2) Now click on any node in about page it will route to home page.
3) Perform this steps 10 times or more. you will get see the "Mindfusion Diagramming for Java Script, trail version"
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #9 - Oct 16th, 2017 at 10:03am
 
Hi,

The trial message is not displayed immediately on the diagram and is shown after a certain time period - this is by design. Check the key you're using, as suggested above, and if you're sure it's the correct one, please send me the key string with a PM to check if there is some problem with the key itself.

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 101
Gender: male
MindFusion team


   
     
 
Re: Facing problem regarding tooltip
Reply #10 - Oct 16th, 2017 at 1:00pm
 
Hi again,

The key you sent seems ok. I tried it in your test application and again could not reproduce the issue you're describing. Where are you calling the setLicenseKey method? In my tests I call it in diagram-component's dataSource setter, just after the diagram constructor.

If the key is accepted, you should see a "MindFusion.Diagramming licensed to ..." in the browser's console window. Can you verify that you see this message and there are no related errors there?

Regards,
Lyubo
 
 
 
IP Logged    
 
     
Page Index Toggle Pages: 1 Send Topic Print