Drawflow with Angular

[runrevben]

Hi, I'm looking into using this library in an Angular project. Has anyone wrapped it yet or in the process of doing that? If not, I would be up for taking that on.

Cheers,

B

[jerosoler]

Hello,

You can use with angular, as it is vanilla javascript. There is currently no wrapped.

You can see more information: https://github.com/jerosoler/Drawflow/issues/160

Jero

[RoyaghRamo]

I've tried doing it on Angular Check out my project here https://github.com/RoyaghRamo/angular-drawflow-example Maybe it can be of help

[HenrryJK]

Doesn't work for node 18.15.0

[jerosoler]

What error? The lib is for frotend.

[cdufrechou]

I'm using node 14.16.0 and the https://github.com/RoyaghRamo/angular-drawflow-example doesn't work for me. The npm install is ok if a choose Angular CLI 13.1.2 as specified but => the ng serve is KO

=> problem of missing component (draw-board/draw-board.component) => problem of bootstrap if i try to suppress link to draw-board.component in code: [Cannot find module '@ng-bootstrap/ng-bootstrap']

So I it's not easy to know the level of incompatibility with my node.js, I search a good example of use of drawflow as i has been attempted by RoyaghRamo :(

My goal is to be able to manage DrawFlow to :

• create dynamically some pages as "home" or "other module"
• to be able to define my own "blocks" with complex interfaces that can be defined in block itself

  for example a block with fields that define the number of input or output ports => so when set the block show different input/output ports numbers linked to the values set (as for "telegram bot" define a field to set)

• to be able to link the drawflow project, but to define my own block list => and to be able to define a "menu" in the left that could groups blocks and so to have a more complex block listing as I would define a lot of personalized blocks

So I think angular is needed to refer your project and to add a "layer" to be able to do all that complex things. But perhaps I have to derivate directly from the Drawflow project ....

So a good example can help to understand what solution to choose.

Regards

[Nagaraj172004]

Uncaught TypeError: Cannot read properties of null (reading 'clientWidth') at addNodeToDrawFlow ((index):137:41) at drop ((index):128:9) at HTMLDivElement.ondrop ((index):336:9)

Thank you for your draflow @jerosoler , its really helpfull, im facing issue drawflow using Angular , im using Angular , when i drag in and drag out the node im getting this error, can anyone tell me where i mistake , Thanks in advance , Pls check attached snap below , Thank you

[Faizi9321]

I've tried doing it on Angular Check out my project here https://github.com/RoyaghRamo/angular-drawflow-example Maybe it can be of help

when run project show nothing only show empty canvas

[digambardeshmukh12]

I've tried doing it on Angular Check out my project here https://github.com/RoyaghRamo/angular-drawflow-example Maybe it can be of help

I tried to run your project but they show errors like An unhandled exception occurred: Cannot find module 'node: util' Require stack:

• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\virtual-fs\host\buffer.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\virtual-fs\host\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\virtual-fs\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\workspace\host.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\workspace\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\core\src\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\architect\src\jobs\create-job-handler.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\architect\src\jobs\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\node_modules\@angular-devkit\architect\src\index.js- D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\build-angular\src\builders\dev-server\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\architect\node\node-modules-architect-host.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\architect\node\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular\cli\models\architect-command.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular\cli\commands\serve-impl.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\schematics\tools\export-ref.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular-devkit\schematics\tools\index.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular\cli\utilities\json-schema.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular\cli\models\command-runner.js
• D:\digambar\New folder (2)\angular-drawflow-example-master\node_modules\@angular\cli\lib\cli\index.js
• C:\Users\Assetrak\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js See "C:\Users\Assetrak\AppData\Local\Temp\ng-CjglKC\angular-errors.log" for further details.

I use angular 13 and node 14

[lucasguarasp]

I'm creating a project in Angular based on drawflow, to create conversation scripts on WhatsApp if you want to take a look, it's still public, maybe when it's ready I'll launch the repository

https://github.com/lucasguarasp/wflow-bot

[eugenedw]

@lucasguarasp, thank you!!! made just a few minor tweaks to make it a standalone component, works perfectly.

[corinaivn]

Hi! I was wondering if anyone managed to register Angular components as custom nodes. Thanks!