0

I am working with Angular2 within Electron seeded from https://github.com/maximegris/angular-electron

I have installed Mermaid and got it working nearly exactly as I need it. My flowchart does display correctly as intended.

The only problem that I am having is with the click event.

(See interaction section of this page https://mermaidjs.github.io/flowchart.html)

Where I need to define within my mermaid markup click A callback and A will be passed to the call back.

The problem that I have is that 'callback' must be a native javascript function not a typescript function. I am targeting a "BoxClick" function with in my ProjectManagementPageConnectionsComponent. And I can see that in main.bundle.js it is compiled to something similar to: ProjectManagementPageConnectionsComponent.prototype.BoxClick = function () {

And when debugging in the console I try to execute ProjectManagementPageConnectionComponent.BoxClick(); but it says that ProjectManagementPageConnectionComponent is not defined. but in main.bundle.js it looks like it is defined. So is there a parent namespace above it that I am missing? Because I am pretty sure if I can get this function to work in the console, then I can call that function in my mermaid markup too.

In the end I want a navigation to happen from there. Now according to the mermaid docs documentation I can define a URL. And I have done that and it does work; however, it opens in a new window. I want it to navigate within the same window and it appears the only way to do that is by using a function. But the namespace of the function seems unreachable.

Sean W.
  • 863
  • 5
  • 14
  • `ProjectManagementPageConnectionsComponent.prototype.BoxClick` is an instance method, so you would have to do `new ProjectManagementPageConnectionComponent().BoxClick();`. Not saying that is your only issue here, just that would be one of them. – Daniel W Strimpel Apr 18 '18 at 04:10
  • I like it but ya in the console `new ProjectManagementPageConnectionComponent().BoxClick();` still says `Uncaught ReferenceError: ProjectManagementPageConnectionComponent is not defined` which reading what i can of the main.bundle.js file just doesn't make any sense why it would say that it is not defined, because it looks clearly defined to me. – Sean W. Apr 18 '18 at 04:16
  • It probably is scoped within an IIFE or something and thus isn't in the global scope (aka as a property on the window object). – Daniel W Strimpel Apr 18 '18 at 04:18
  • You'll probably have to create a global scoped function in your TS class like `window.handleBoxClick = function () {};`. – Daniel W Strimpel Apr 18 '18 at 04:26
  • Yep I kinda did something like that. I went ahead and to the assets folder added a new javascript file. Then in the index.html I src'd it in. The function now accepts the argument and just does a dirty window.location.href to the route that i want and it works just fine. back buttons work too. So I feel good about it. I didn't know that I could create a function within the window namespace in a TS class I may try that too. Thanks for everything. – Sean W. Apr 18 '18 at 04:35
  • I am facing the similar issue. Did someone get this working? I tried with window.CustomFunction = function() {}; in TS class, but it give me compile error like "error TS1005: ';' expected. 69 window.CustomFunction = function () {};" – user2030613 Jan 13 '21 at 09:11

0 Answers0