Is it possible to use in Angular ?

[tgupta09]

Hey @jerosoler ,This library is great, but it is limited to Vue only, is it possible to use it in angular? If it is, how to use a component as a node in drawflow library?

[jerosoler]

Hello @tgupta09,

The library is vanilla javascript.

So it could work in angular without any problem.

There is an adaptation to work with Vue components. I suppose it would be easy to modify the two functions that take care of it, to adapt it to Angular.

But I can't help you on that, since I haven't played with Angular.

The functions to modify would be: addNode And addNodeImport.

The functions could be overwritten like this: https://github.com/jerosoler/Drawflow/issues/159#issuecomment-823018513

Jero

[jerosoler]

Maybe i can help you https://stackoverflow.com/questions/66267792/drawflow-library-on-typescript

[tgupta09]

Thank you for quick response @jerosoler , i setup the library in my project and it worked properly, but i am facing a problem that how to use a component as a node, can you help me with this problem in Vue, so that i can try to translate it in angular.

[jerosoler]

What is the problem?

[tgupta09]

just explain how to use a component as a node in Vue and which functions i need to overwrite.

[tgupta09]

in which file i can find addNode and addNodeImport function definition?

[jerosoler]

The functions are in the file: https://github.com/jerosoler/Drawflow/blob/master/src/drawflow.js

Example vue: Load library and render

import Vue from 'vue'

// Pass render Vue
this.editor = new Drawflow(id, Vue);

Add node:

// For vue
import component from '~/components/testcomponent.vue'
editor.registerNode('name', component, props, options);
// Use for vue
editor.addNode('github', 0, 1, 150, 300, 'github', data, 'name', 'vue');

[tgupta09]

Thank you @jerosoler . I hope it will work.

[AnirudhWT]

how can we detect connectionCreated or any other events if we are using angular. Thanks in Advance.

[jerosoler]

In the same way that the start function is called.

editor.start();

The events are of the same class.

editor.on('nodeCreated', function(id) {
  console.log("Node created " + id);
})

[Faizi9321]

any example link related to draw flow....?

[jerosoler]

View https://github.com/jerosoler/Drawflow/issues/340#issuecomment-1062036448