Create Typescript definition

[Benjamin]

Hello,

I'm currently working to add the typescript definition for the package :)

I created a PR in the DefinitelyTyped repository. To be merge, the PR need to be reviewed by another person.

Can someone do this review ? Here is the link to the PR : https://github.com/DefinitelyTyped/DefinitelyTyped/pull/51271/files

Also if someone want to be a co-owner of the PR (not sure how this really works) but it says that is a good idea because multiple person would be able to update the typing.

Thank you

[raph74]

Hello

Would that make this library usable while working on Angular2? I currently have a project running on PrimeNg and would like to include Drawflow as this look like the best library to do flowgraph.

If yes, what steps do I need to take in order to include and use your typescript definition in my project?

Also think that it would be great if this was included inside the library by default.

Thanks in advance!

[Jero Soler]

Hello @BobBDE

Good Job!!

I have played very little with typescript. I can't help on that. And I don't have much time. ( #9 )

You could create a fork with project typescript.

Let's see if an expert, I can review-it.

---

Hello @raph74

Even if it's not in typescript, it should work the same, since it's vanilla javascript.

Jero

[Benjamin]

@jerosoler
We won't need to do a fork, once the pull request is accepted by DefinitelyTyped repository, an npm package @types/drawflow will automatically be created and developer will be able to import it to have type for drawflow :)

Another option will be recode the library in typescript (which i recommend because it improves stability). This should not be too long because you can do it incrementally, and the lib is quite small. And once built the library would be plain vanilla so it would still be usable in pure js project (I think). But I would understand if you prefer to keep it in pure js.

[Benjamin]

Hello @raph74 ,

Yes you can use this lib in angular project (i'm doing it).
There are 2 options :

• wait for the PR i'm talking about to be accepted, then the @types/drawflow package will be available and you should be able to use drawflow easily :)
• if you want it now you can add the typings manually

Here are the steps :

• at the root of your angular project (in the same level a tsconfig.json) create a file decs.d.ts with this content : https://gist.github.com/BobBDE/e90a792f0be7af96f53b488f92263b29
• add "include": ["decs.d.ts"] to you config.json to make typescript aware of the new file
• that's it, you'll be able to use the lib with imports like this : import Drawflow, {ConnectionEvent, ConnectionStartEvent} from 'drawflow';

[raph74]

Thanks to both of you for quick answers and awesome plugins! I think I got the library installed and the definition ready to use in typescript.
However I am having a javascript error "ERROR TypeError: this.container.classList is undefined".

Here is what my html looks like (easy...):
`<div #drawflowDiv>

`

And here is how I retrieve the div inside typescript:
@ViewChild('drawflowDiv') drawflowDiv: HTMLElement;

And finaly how I setup my my ngOnInit() to instantiate the Drawflow:
ngOnInit(): void { const editor = new drawflow(this.drawflowDiv); editor.reroute = true; editor.drawflow = {"drawflow":{"Home":{.....}}}; editor.start(); }

I basically just copy/pasted the example given in doc folder.

If any of you have ideas on what am I doing wrong, I would be grateful!

[Benjamin]

Hi @raph74
I think you drawflow div is null on ngOnInit. Can you can on debug ? You might need to add the {static: true} to the view child.

Anyway, I don't think this is a place for this kind of talk. Stackoverflow would be more adapter, I could answer you there.

[Benjamin]

Hello @jerosoler ,

Good news ! 🍾🍾🍾

The typescript type package is available !!
https://www.npmjs.com/package/@types/drawflow

So if someone wants to use drawflow in a TS project he just need to add the @types/drawflow package in his dev dependencies !

npm install -D @types/drawflow

Is it possible to add it to the documentation ? Just the npm install command and it should work directly (TS developpers knows how it works ;) )

I tested it and it works ! It really simplify the use of drawflow in TS project.

[Jero Soler]

WoW!

Good Joob! @BobBDE

I will add it to the documentation.
🎉🎉

[raph74]

@BobBDE Good job! I did include the definitions using the npm install and removed my manual installation.

Still got the same issue but I think you're right, I did create a stackoverflow so it's easier to discuss about it.

Post is here: https://stackoverflow.com/questions/66267792/drawflow-library-on-typescript

[Jero Soler]

Added to doc: da5ad14

[Benjamin]

Great, thanks !

[GodSpeedXI]

Is this should return array of numbers not void ? @BobBDE

update: I have opened PR for this issue.

[Benjamin]

@GodSpeedXI Hi, thanks for the PR, I merged it ! :)

[Orlando Yero Cabrales]

Hey guys, I need help, someone know, how to export the data?... I couldn't find the export function in the typescript definition. I only see the export event.

Note: The removeModule function does not exist.

[Jan-Henrik Damaschke]

Hey @jerosoler, do you already know when you will rewrite it in TypeScript or add some tests with high coverage for stability?