- Welcome, Guest. Please Login or Register
MindFusion  
  Now beta testing first versions of our Scheduler and Virtual Keyboard components for HTML & JavaScript.  
  HomeHelpSearchLoginRegister   
     
     
   
 
Pages: 1 2  Send Topic Print  
Facing problem regarding tooltip
Read 366 times

Shafi   Offline
Junior Member
**
Posts: 56
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: 119
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
Junior Member
**
Posts: 56
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/
 
 
« Last Edit: Nov 2nd, 2017 at 8:55am by Shafi »

library.zip (200 KB | 5 )
 
IP Logged    
 
     

Lyubo   Offline
Full Member
***
Posts: 119
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
Junior Member
**
Posts: 56
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: 119
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
Junior Member
**
Posts: 56
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: 119
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
Junior Member
**
Posts: 56
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: 119
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: 119
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    
 
     

Shafi   Offline
Junior Member
**
Posts: 56
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #11 - Oct 25th, 2017 at 10:26am
 
Hi Lyubo

We are now using setLicenseLocation API for licencing purpose. Please have a look at the below code in diagram-component's dataSource setter

Code (Javascript):
    this.diagram.setLicenseLocation('http://localhost:10001/api/Authentication/getKey');
 



On server side we have an API which return diagram_lic.txt file. I have checked this API in browser it work fine.

Code (C++):
        [HttpGet]
        [Microsoft.AspNetCore.Cors.EnableCors("MyPolicy")]
        public FileResult getKey()
        {
            byte[] fileBytes = System.IO.File.ReadAllBytes("./diagram_lic.txt");
            string fileName = "diagram_lic.txt";
            return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
        }
 



But we have problem over here is that. Some time API get called and some it did not get called. Can you please let me know what should I do so that it get called each and every time?
 
 
 
IP Logged    
 
     

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


   
     
 
Re: Facing problem regarding tooltip
Reply #12 - Oct 25th, 2017 at 11:34am
 
Hi,

I tested setLicenseLocation(path) with your example application and didn't find any problems with it. Are you calling it directly after Diagram.create? If you call it after the initial timeout has expired, it won't try to read the license again.

Also, the license check is done only after the first page load or after an actual page reload. It won't trigger while routing within your application.

Can you confirm that you see "MindFusion.Diagramming licensed to ..." in the browser's console window after loading the page, waiting for 10 seconds and clicking on a diagram link (to trigger repaint)?

Regards,
Lyubo
 
 
 
IP Logged    
 
     

Shafi   Offline
Junior Member
**
Posts: 56
Gender: male
I Love MindFusion!


   
     
 
Re: Facing problem regarding tooltip
Reply #13 - Oct 26th, 2017 at 10:07am
 
Hello,

I have created a video for you to see the license issue. Check it out:

Regards
 
 
« Last Edit: Oct 26th, 2017 at 2:54pm by Forum Admin »
 
IP Logged    
 
     

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


   
     
 
Re: Facing problem regarding tooltip
Reply #14 - Oct 26th, 2017 at 2:52pm
 
Hi,

What happens in this case is that when recreating the diagram after routing, the license location value may reset and the license check to occur before your call to setLicenseLocation. We will provide a fix for this in the next release.

As a workaround until then, call the setLicenseKey method on a new Canvas instance during your initial startup. For example in AppComponent.ts in your sample:
Code (Javascript):
ngOnInit() {
    new MindFusion.Drawing.Canvas().setLicenseKey("...");
} 



Regards,
Lyubo
 
 
 
IP Logged    
 
     
Pages: 1 2  Send Topic Print