Using Drawflow, @types/drawflow, and Angular

Davyraitt commented 2 years ago

Hey!

I am using the solution in this post: https://stackoverflow.com/questions/66267792/drawflow-library-on-typescript , but unfortunately when I add <div appNgDrawFlow></div>to my .html component it doesn't show anything. Does anybody know what might be going wrong?

this is my .html file in which i try to show the component:

<div class="containercanvas" >
  <app-drawflow></app-drawflow>
</div>

And this is my drawflow.component.ts

import { Component, Directive, ElementRef, OnInit } from '@angular/core';
import Drawflow from 'drawflow';

@Component({
  selector: 'app-drawflow',
  templateUrl: './drawflow.component.html',
  styleUrls: ['./drawflow.component.css']
})
export class DrawflowComponent implements OnInit {
  editor: Drawflow;

  constructor(private hostElRef: ElementRef) { }

  ngOnInit() {
    if (!!this.hostElRef?.nativeElement) {
      const { nativeElement } = this.hostElRef;
      this.initDrawFlow(nativeElement);
    }
  }

  private initDrawFlow(el: HTMLElement): void {
    try {
      if (!!el) {
        this.editor = new Drawflow(el);
        this.editor.reroute = true;
        this.editor.editor_mode = 'edit';
        // this.editor.drawflow = {}
        this.editor.start();
      } else {
        console.error('Drawflow host element does not exist');
      }

    } catch (exception) {
      console.error('Unable to start Drawflow', exception);
    }
  }

}

This is my editor object: https://gyazo.com/59a5d4910f93706757840118aee29034

jerosoler commented 2 years ago

I have no knowledge of angular. But the console shows an error?

Have you set a height and width to the container?

Davyraitt commented 2 years ago

I have no knowledge of angular. But the console shows an error?

Have you set a height and width to the container?

Hey! Thanks a lot for the reply , greatly appreciated. No errors in console! I have manually set height and width to the container. I dont see anything appearing. What should I see? A white canvas?

jerosoler commented 2 years ago

Yes is a white canvas.

I see that you do not add any node.

I give you a simple example with html. So you can see how to add a node.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
  <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();    
    editor.addNode('aaa', 1, 3, 300, 200, 'aaa', {}, `aaa` );
    editor.addNode('bbb', 1, 0, 850, 200, 'bbb', {}, `bbb` );
    editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc`);
    editor.addConnection(1, 2, 'output_1', 'input_1');
</script>
</body>
</html>

Davyraitt commented 2 years ago

Thanks for the example! I tried it out and this is what I got: https://gyazo.com/2f551d67d6e0c5760d92458800d29a83

It draws the outline in red but wont show me a white canvas or the nodes Thanks a lot for the help by the way. Appreciate it

Davyraitt commented 2 years ago

I just found this link also: https://github.com/RoyaghRamo/angular-drawflow-example

Will try and look for help in there too!

RaviGuggilam commented 2 years ago

@Davyraitt , just asking you have any idea how to add custom function for click event for below pencil image ?

Davyraitt commented 2 years ago

Yes is a white canvas.

I see that you do not add any node.

I give you a simple example with html. So you can see how to add a node.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
  <script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();    
    editor.addNode('aaa', 1, 3, 300, 200, 'aaa', {}, `aaa` );
    editor.addNode('bbb', 1, 0, 850, 200, 'bbb', {}, `bbb` );
    editor.addNode('ccc', 1, 1, 850, 370, 'ccc', {}, `ccc`);
    editor.addConnection(1, 2, 'output_1', 'input_1');
</script>
</body>
</html>

Hey! Update: I seem to got it working, only now the nodes have no layout and are not draggable on the canvas ( I can add new ones to the canvas though) : https://gyazo.com/1220c8185380487a9a3e493006d0ea76

Thanks for all the help! :)

Davyraitt commented 2 years ago

@Davyraitt , just asking you have any idea how to add custom function for click event for below pencil image ?

Hey! I havent gotten that far yet, I will update you when everything works for me.

jerosoler / Drawflow

Using Drawflow, @types/drawflow, and Angular #420