jsplumb изменить края стилей краски для разных типов узлов - PullRequest
Новая
       7

jsplumb изменить края стилей краски для разных типов узлов

0 голосов
/ 26 ноября 2018

Я использую jsPlumb в своем приложении Angular для соединения нескольких вещей.У меня есть 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,, но не могунайти любую информацию, что я могу сделать.

Кто-нибудь?пожалуйста

1 Ответ

0 голосов
/ 26 ноября 2018

придумали решение, при добавлении ребра вам нужно указать тип данных 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',
      },
    });
...