Page Index Toggle Pages: [1] 2  Send TopicPrint
Hot Topic (More than 10 Replies) Facing problem regarding tooltip (Read 7562 times)
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Facing problem regarding tooltip
Aug 18th, 2017 at 6:16am
Print Post  
[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)
Select All
 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
  

Angular2_Mindfusion_example_001.zip ( 164 KB | 232 Downloads )
diagram-library_001.zip ( 265 KB | 193 Downloads )
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #1 - Aug 18th, 2017 at 8:04am
Print Post  
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #2 - Oct 11th, 2017 at 5:33am
Print Post  
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 https://localhost:4200/
« Last Edit: Nov 2nd, 2017 at 7:55am by Shafi »  

example_11-10-2017.zip ( 161 KB | 209 Downloads )
library.zip ( 200 KB | 217 Downloads )
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #3 - Oct 11th, 2017 at 8:50am
Print Post  
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)
Select All
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #4 - Oct 12th, 2017 at 11:33am
Print Post  
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?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #5 - Oct 12th, 2017 at 12:39pm
Print Post  
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)
Select All
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #6 - Oct 16th, 2017 at 6:48am
Print Post  
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);
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #7 - Oct 16th, 2017 at 7:45am
Print Post  
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #8 - Oct 16th, 2017 at 8:45am
Print Post  
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"
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #9 - Oct 16th, 2017 at 9:03am
Print Post  
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
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #10 - Oct 16th, 2017 at 12:00pm
Print Post  
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #11 - Oct 25th, 2017 at 9:26am
Print Post  
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)
Select All
    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++)
Select All
        [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?
  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #12 - Oct 25th, 2017 at 10:34am
Print Post  
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
  
Back to top
 
IP Logged
 
Shafi
Full Member
***
Offline


I Love MindFusion!

Posts: 109
Joined: Nov 8th, 2016
Re: Facing problem regarding tooltip
Reply #13 - Oct 26th, 2017 at 9:07am
Print Post  
Hello,

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

Regards
« Last Edit: Oct 26th, 2017 at 1:54pm by Forum Admin »  
Back to top
 
IP Logged
 
Lyubo
God Member
*****
Offline


MindFusion team

Posts: 511
Joined: Jun 17th, 2010
Re: Facing problem regarding tooltip
Reply #14 - Oct 26th, 2017 at 1:52pm
Print Post  
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)
Select All
ngOnInit() {
    new MindFusion.Drawing.Canvas().setLicenseKey("...");
} 



Regards,
Lyubo
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: [1] 2 
Send TopicPrint