带有Angular 5+拖放连接的jsPlumb

Question

我正在努力使用 jsPlumb 社区版通过拖放将元素与鼠标连接起来。

我尝试创建一个由用户连接的元素流并导出到 Json。

看： https://stackblitz.com/edit/angular-jsplumb-test-rx8hdy

感谢您的帮助！！

Answer 1

这里的主要问题是您要为每个新节点创建一个新的 jsPlumb 实例。如果节点来自不同的 jsPlumb 实例，则无法相互连接。

所以解决方法是使用一个jsPlumb实例，比如我在NodeService中创建了一个实例：

@Injectable()
export class NodeService {

  jsPlumbInstance = jsPlumb.getInstance(); 
  ...

}

Stackblitz Example

为了将您的流程图导出为 json，我建议您为添加的每个端点设置 uuid：

this.jsPlumbInstance.addEndpoint(id, { anchor: 'Bottom', uuid: id + '_bottom' }, Endpoint1);
                                                          /\
                                                        this one

这样你就可以通过以下方法恢复你在chart中创建的所有连接：

jsPlumbInstance.connect({ uuids: connection.uuids });

您需要做的就是保存包含两部分的json：

• 节点
• 连接

nodes-container.component.ts

saveNodeJson(){
    //save element position on Canvas and node conections

    const container = this.viewContainerRef.element.nativeElement.parentNode;
    const nodes = Array.from(container.querySelectorAll('.node')).map((node: HTMLDivElement) => {
      return {
        id: node.id,
        top: node.offsetTop,
        left: node.offsetLeft, 
      }
    });

    const connections = (this.nodeService.jsPlumbInstance.getAllConnections() as any[])
        .map((conn) => ({ uuids: conn.getUuids() }));

    const json = JSON.stringify({ nodes, connections });

    console.log(json);
  }

保存 json 后，您可以恢复状态：

nodes-container.component.ts

this.nodes.forEach(node => {
  this.nodeService.addDynamicNode(node);
});

setTimeout(() => { // we need it to make sure all nodes have been rendered
  this.connections.forEach(connection => {
    this.nodeService.addConnection(connection);
  });
})

addConnection 方法在哪里：

node.service.ts

addConnection(connection) {
  this.jsPlumbInstance.connect({ uuids: connection.uuids });
}

Stackblitz Example