Question

我在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搜索了文档，但是找不到任何信息。

有人吗？请

Answer 1

提出解决方案，添加边缘时，您需要在数据obj中指定类型，而不是将此类型添加到edge属性中，以便您可以为边缘类型添加指定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 change edge paintstyles

1 个答案: