javascript - 角度上的 jsplumbtoolkit 未正确应用锚点

Question

我正在尝试使用 angular 11 开发连接工具，但我的锚点有问题。似乎每次我尝试以编程方式加载图表时，我的端口锚点都会被完全忽略。话虽如此，当我使用鼠标创建连接时，这似乎不是问题。我的“视图”配置如下（这些被传递给 jsplumb-surface 组件的 [renderParams]）

view = {
    nodes: {
      //removed for this example
    },
    edges: {
      "default": {
         anchor: [ "Left", "Right", "Bottom" ],
        connector: ["EditableFlowchart", { cornerRadius: 5 }],
        paintStyle: { strokeWidth: 2, stroke: "rgb(56, 104, 106)", outlineWidth: 3, outlineStroke: "transparent" }, //  paint style for this edge type.
        events: {

        },
        overlays: [
          ["Arrow", { location: 0.5, width: 15, length: 15 }],
          ["Label", {
            cssClass: "delete-relationship",
            label: "<i class='fa fa-times'></i>",
            events: {
              "tap": (params: any) => {
                console.log('delete edge', params);
                this.toolkit.removeEdge(params.edge);
              }
            }, location: 0.9, width: 15, length: 15
          }]
        ]
      },
    },
    ports: {
      "source": {
        endpoint: "Blank",
        paintStyle: { fill: "#84acb3" },
        anchor: ["Right", "Left"], //these are ignored when data is loaded programmatically 
        maxConnections: 1,
        edgeType: "default",
        isSource: true,
        isTarget: false
      },
      "last-source": {
        endpoint: "Blank",
        paintStyle: { fill: "#84acb3" },
        anchor: ["Bottom"], //these are ignored when data is loaded programmatically 
        maxConnections: 1,
        edgeType: "default",
        isSource: true,
        isTarget: false
      },
      "target": {
        maxConnections: 1,
        endpoint: "Blank",
         anchor: 'Top', //these are ignored when data is loaded programmatically 
        paintStyle: { fill: "#84acb3" },
        isTarget: true,
        isSource: false,
        edgeType: "default",

      }
    }
  };

我的节点组件在下面

<div [style.left]="obj.left + 'px'" [style.top]="obj.top + 'px'" class="mat-elevation-z2">

    <div class="node">
      <mat-icon *ngIf="enableDeletion" class="node-delete node-action delete" fontSet="fas" fontIcon="fa-times-circle" (click)="removeNode()"></mat-icon>
      <div *ngIf="enableIncomingPort" class="input-port-container">
        <span class="empty-space"></span>
        <span class="input-port">
          <jtk-target  port-type="target" port-id="input"  ></jtk-target> 
        </span>
      </div>
      <div class="header">
        <span class="mat-title"> Node </span>
      </div>
      <div class="sub-header">
        <span class="mat-caption">{{caption}}</span>
      </div>
      <mat-divider *ngIf="enablePortsSection || enableDescriptionSection"></mat-divider>
  
      <div *ngIf="enableDescriptionSection" class="body mat-small">
       <p class="mat-caption">...</p>
      </div>
      <div *ngIf="enablePortsSection" class="ports">
        <app-port *ngFor="let port of obj.ports;last as isLast" [isLast]="isLast" [parent]="this" [obj]="port"></app-port>
      </div>
    </div>
  </div>

端口组件

<div  [class]="'port ' + 'port-'+ obj.type + ' mat-small' + ' mat-elevation-z2'">
    <jtk-source *ngIf="!isLast && obj.id !== 'input'" port-type="source"   attr.port-id="{{obj.id}}"  filter="" filter-exclude="true"></jtk-source>
    <jtk-source *ngIf="isLast !== 'input'" port-type="last-source"   attr.port-id="{{obj.id}}"  filter="" filter-exclude="true"></jtk-source>

    <div class="port-line">
        <mat-icon *ngIf="obj.helptext" class="help-icon" [matTooltip]="obj.helptext" matTooltipPosition="right" fontSet="fas" fontIcon="fa-info-circle"></mat-icon>

        <!-- {{obj.heading}} -->
        output
    </div>
    <div class="port-line">
        {{obj.subheading}}
    </div>
</div>

我正在使用以下代码加载我的图表

            toolkit.load({
                data: {
                    nodes: flow.configuration.nodes,
                    ports: flow.configuration.ports,
                    edges: flow.configuration.edges
                }
            });

我还附上了一个 gif，显示了我遇到的问题 data-loaded-via-load() 查看 gif，您可以看到端口锚点被忽略，而是使用边缘端口。它没有遵循我在视图对象中定义的内容。

我所追求的行为是这样的。在此示例中，所有边都正确连接。 通过鼠标创建图形

我本质上希望来源使用动态锚点 [Left, Right, Bottom] 并以静态 [Top] 为目标。我还想修复最顶层的连接，因为它没有连接到节点，但我不确定如何。

难道我做错了什么？还是我应该重新考虑我的方法？提前致谢

标签： javascripthtmlangularjsplumb