I have painstakingly converted the RadialLayout function in TypeScript and it seems that I cannot create a RadialLayout Component.
The Code is here on PasteBin (for the sake of brewity)
I have compared the working of Typescript with the Angular2-minimal code that is of GitHub and made things as similar as possible.
How do I get the RadialLayout JS module to work in the Angular2 App?
Is there a reason to get the this.div.nativeElement.nativeElement?
How are you importing the RadialLayout.js file?
Hi walter,
I added
<script src="node_modules/gojs/extenstions/RadialLayout.js"></script> in my index.html file
and as for the div.nativeElement I was merely following the example on the GitHub Repo
I am really not sure if this was the right way to go through hence I have been hacking things around
As for the div.nativeElement.nativeElement I stand corrected. I have found the mistake and I have corrected it with just the simple this.div.nativeElement in the $() call
You have to make sure RadialLayout.js is loaded after go.js (or go-debug.js) is loaded.
You mean in the systemjs.config.js file?
Here is the snap of the systemjs.config.js code:
map: { 'app': 'app', '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', '@ng-bootstrap/ng-bootstrap': 'npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js', 'ng2-cookies': 'npm:ng2-cookies/cookie.js', 'gojs': 'npm:gojs/release/go-debug.js', 'RadialLayout': 'npm:gojs/extensions/RadialLayout.js' },
and in the component.ts file should I do the following:
import {RadialLayout} from 'gojs/extensions/'
and remove go.RadialLayout?
I’m sorry, but I’m not familiar enough with Angular to know what would be best.
Alright let me get to the bottom of this and maybe it might be helpful for future error purposes.
After a lot of tackling I finally get an error like this.
Diagram.layout value is not an instance of Layout: RadialLayout()
I have just copied and pasted the code on the Webpage (in Javascript) as it is. I have put a console.log(RadialLayout) which on clicking in dev tools leads me to the right RadialLayout.js file. I cannot wrap my head around this particular error.
I have also tried creating an instance for the RadialLayout by
rdLayout = new RadialLayout();
and passed in into the $() call but then there are problems again.
any help or tip?
Are you using the unmodified RadialLayout.js file? That calls:
go.Diagram.inherit(RadialLayout, go.Layout) in order to make sure the RadialLayout class extends the go.Layout class.
Perhaps at the time that you load that JS file the value of go is not bound to GoJS namespace.
I wrote this TypeScript test many years ago:
class CustomTreeLayout extends go.TreeLayout {
constructor() {
super();
this.extraProp = 3;
}
extraProp: number;
// override various methods
cloneProtected(copy: CustomTreeLayout): void {
super.cloneProtected(copy);
copy.extraProp = this.extraProp;
}
createNetwork(): CustomTreeNetwork {
return new CustomTreeNetwork();
}
assignTreeVertexValues(v: CustomTreeVertex): void {
super.assignTreeVertexValues(v);
v.someProp = Math.random() * 100;
}
commitNodes(): void {
super.commitNodes();
// ...
}
commitLinks(): void {
super.commitLinks();
this.network.edges.each(e => { e.link.path.strokeWidth = (<CustomTreeEdge>(e)).anotherProp; });
}
}
class CustomTreeNetwork extends go.TreeNetwork {
createVertex(): CustomTreeVertex {
return new CustomTreeVertex();
}
createEdge(): CustomTreeEdge {
return new CustomTreeEdge();
}
}
class CustomTreeVertex extends go.TreeVertex {
someProp: number = 17;
}
class CustomTreeEdge extends go.TreeEdge {
anotherProp: number = 1;
}
That proved that TypeScript applications can compile and use classes inheriting from the JavaScript classes defined in go.js.
We’re planning this summer on rewriting all of the extensions in TypeScript. Hopefully that would mean you could more easily import any extension into your TypeScript app. However I know that Angular modules are not the same as JavaScript modules, so I’m not sure if that will help you with your Angular app. But I could translate that one file right now, if you’d like.
OK, I’ve translated extensions/RadialLayout.js and samples/Radial.html into TypeScript. You can get the files at Page Not Found -- Northwoods Software. It includes the resulting compiled *.js files so that you can just open the Radial.html file to run the app without explicitly compiling the TS files.
I hope this satisfies your needs. Please pardon any errors or non-ideal TypeScript code I may have introduced in my haste.
Thanks walter this does let me use the RadialLayout in the Angular app. There is a very small correction to the file for the Layout.ts file
for public doLayout() part the last line states layerverts.push(v) the right line is layerverts.push(vv)
(Just for the sake of reference and future corrections)
Thanks a lot for your help and the awesome library.
Shan
Whoa! How did that work at all? Thanks for the bug fix.
Was there anything you had to do besides the import { RadialLayout } from "./RadialLayout";?
How’s about by the end of this week I am make a GitHub repo of the code and share it with you? Maybe you might also have a clear idea about the things you might want to change in the typescript libraries.
Thanks again, Walter.
That might become useful to many people.
As it so happens we are in the midst of rewriting the whole GoJS library in TypeScript. Any suggestions for improvements would be greatly appreciated.
Hi walter
Here is a simple repo I created for future references:
GitHub Repo for the RadialLayout
The end result renders both:
You are most welcome to make any changes for the same. Pardon my bad angular / typescript skills if any within the Repo, as I learned (and still learning) Angular in just 2 weeks.
Shan
Thank you very much for setting that up. I will look at it when I get some free time, but other people can benefit at any time.