npm 基于Typescript的绘图流库

f0ofjuux 于 2023-01-31 发布在 TypeScript

关注(0)|答案(3)|浏览(168)

我目前正在尝试实现由@Jerosoler制作的令人敬畏的库Drawflow（可以在这里找到：https://github.com/jerosoler/Drawflow）在我的PrimeNg项目中。
很棒的用户@BobBDE在这里为这个库定义了类型脚本：https://www.npmjs.com/package/@types/drawflow
我的项目使用PrimeNg与Angular 11和 typescript 4。
我已经使用2 npm命令安装了库和定义。一切看起来都很好。我可以明确地找到JS库和定义，并在Typescript中使用它们。
然而，我有一个未定义的错误，我正在努力找出我做错了什么...
在我的组件html中，我有以下内容：

<div #drawflowDiv></div>

检索组件类型脚本中的div：

@ViewChild('drawflowDiv', {static: true}) 
drawflowDiv: HTMLElement;

然后在我的ngOnInit中，我有以下内容：

ngOnInit(): void {
    console.log(this.drawflowDiv);
    const editor = new drawflow(this.drawflowDiv);
    editor.reroute = true;
    editor.editor_mode = 'edit';
    editor.drawflow = {.....}; // Default example json for the library
    editor.start();
  }

代码中没有任何错误，drawflow库链接正确。console.log给予了我div html元素的所有细节，所以它不是未定义的。你可以在这篇文章中找到控制台的截图。
先谢谢你，希望这里有人能想出解决办法。
先谢了！
enter image description here

npm

来源：https://stackoverflow.com/questions/66267792/drawflow-library-on-typescript

3条答案

按热度按时间

b1payxdu1#

为了使代码可重用，你也可以将所有内容封装在一个指令中：
指令文件：ng-draw-flow.directive.ts

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

@Directive({
  selector: '[appNgDrawFlow]'
})
export class NgDrawFlowDirective 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);
    }
  }
}

记住将NgDrawFlowDirective作为声明添加到正在使用它的父特征模块中。
如何使用它的模板示例：

<div appNgDrawFlow></div>

如果运行时遇到问题，请仔细检查模块声明项。例如（部分应用模块）：

@NgModule(
  {declarations: [NgDrawFlowDirective]}
)
export class AppModule { }

赞(0）回复(0）举报 2023-01-31

kkih6yb82#

在创建编辑器时，您可能需要传递nativeElement：

const editor = new drawflow(this.drawflowDiv.nativeElement);

赞(0）回复(0）举报 2023-01-31

pbpqsu0x3#

您可以在html组件中执行以下操作：

<div id="drawflowDiv"></div>

在ngOnInit中：

this.flowchart = new Drawflow(document.getElementById('drawflowDiv'));
this.flowchart.start();
...

赞(0）回复(0）举报 2023-01-31

我来回答

npm 基于Typescript的绘图流库

3条答案

相关问题

热门标签

最新问答