Currently, I am experimenting with incorporating the DrawFlow library into Angular 14.
Below is the component I am using:
drawing-board.component.ts
import { Component, OnInit } from '@angular/core';
import Drawflow from 'drawflow';
@Component({
selector: 'app-drawing-board',
templateUrl: './drawing-board.component.html',
styleUrls: ['./drawing-board.component.css']
})
export class DrawingBoardComponent implements OnInit {
constructor() { }
editor:Drawflow|null= null;
ngOnInit(): void {
let element = <HTMLElement> document.getElementById('drawflow');
console.log(element);
this.editor = new Drawflow(element);
this.editor.reroute = true;
this.editor.curvature = 0.5;
this.editor.reroute_fix_curvature = true;
this.editor.reroute_curvature = 0.5;
this.editor.force_first_input = false;
this.editor.line_path = 1;
this.editor.editor_mode = 'edit';
this.editor.start();
}
}
drawing-board.component.html
<div id="drawflow" class="">
</div>
And implement it in this manner:
<app-drawing-board></app-drawing-board>
However, it seems to be malfunctioning as only an empty HTML div is displayed.
https://i.sstatic.net/Yr1aK.png
Do I need to adjust more attributes? Or could this issue be due to a flawed implementation?