[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

---

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

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/

---

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

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?

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

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);

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

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"

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

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

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?

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

Hello,

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

Regards

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

Can you please let me when is your next release with above issue fixed?

Next week.

Can you please if it get released or not ?

We released v3.2 yesterday.