jsplumb 更改不同节点类型的边缘绘制样式答案

【问题标题】：jsplumb change edge paintstyles for diffrent node typesjsplumb 更改不同节点类型的边缘绘制样式
【发布时间】：2018-11-26 01:42:37
【问题描述】：

我在我的 Angular 应用程序中使用 jsPlumb 来连接几个东西。我有 3 种节点类型：子服务、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 搜索了文档，但找不到任何信息我能做什么。

有人吗？请

【问题讨论】：

标签： angular jsplumb

【解决方案1】：

想出了解决方案，在添加边缘时，您需要在数据 obj 中指定类型，而不是将此类型添加到边缘属性，这样您就可以为边缘类型添加指定的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',
      },
    });

【讨论】：