jsplumb 改变不同节点类型的边缘绘制样式

Question

我在我的 Angular 应用程序中使用 jsPlumb 来连接几个东西。我有 3 种节点类型：subservice、entryAssets、exitAssets。问题是我想为子服务节点和 entryAssets&exitAssets 设置其他连接样式（注意：entryAssets 将与 exitAssets 连接，不会出现 entryAsset 连接到另一个 entryAsset 实例的情况，只允许交叉连接）。

所以这里我有 view.edges 中提供的默认绘画样式，按照文档要求传递给 jsplumb-surface 组件：

view = {
    nodes: {
        subService: {
            component: NodeComponent,
        },
        entryAsset: {
            component: EntryAssetNodeComponent,
        },
        exitAsset: {
            component: ExitAssetNodeComponent,
        },
        initialView: {
            component: InitialViewComponent,
        },
    },
    edges: {
        default: {
            anchor: 'AutoDefault',
            endpoint: 'Blank',
            connector: ['Flowchart', {cornerRadius: 0}],
            paintStyle: {
                strokeWidth: 2,
                stroke: '#2c2e33',
                outlineWidth: 3,
                outlineStroke: 'transparent',
            }, //   default paint style 
            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.
        },
         ...

我在 https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges 搜索了文档，但找不到任何信息我该怎么办。

有人吗？请

Answer 1

提出解决方案，在添加边缘时，您需要在数据对象中指定类型，然后将此类型添加到 edges prop，以便您可以为边缘类型添加指定的 paintStyle：

    edges: {
        default: {
            anchor: 'AutoDefault',
            endpoint: 'Blank',
            connector: ['Flowchart', {cornerRadius: 0}],
            paintStyle: {
                strokeWidth: 2,
                stroke: '#2c2e33',
                outlineWidth: 3,
                outlineStroke: 'transparent',
            }, //   paint style for this edge type.
            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.
        },
        assetEdge: {
            anchor: 'AutoDefault',
            endpoint: 'Blank',
            connector: 'Bezier',
            paintStyle: {
                strokeWidth: 6,
                stroke: '#ccccaa',
                outlineWidth: 3,
                outlineStroke: 'transparent',
            }, //   paint style for this edge type.
            hoverPaintStyle: {strokeWidth: 2, stroke: '#2c2e33'}, // hover paint style for this edge type.
        },
    },
    ...

添加边应如下所示：

    this.toolkit.addEdge
      source: entryAsset.id,
      target: newAssetNode.id,
      data: {
        type: 'assetEdge',
      },
    });

jsplumb 改变不同节点类型的边缘绘制样式

jsplumb change edge paintstyles for diffrent node types

jsplumb

angular