jsplumb change edge paintstyles for diffrent node types












0















I am using jsPlumb in my Angular app to connect several things.
I am having 3 node types: subservice, entryAssets, exitAssets. Thing is that i want to have other connecting styles for subservices nodes and other for entryAssets&exitAssets (note: entryAssets will connect with exitAssets, there won't be a case that entryAsset connect to another entryAsset instance, only cross connections allowed).



So here i have default paint styles provieded in view.edges that is passed to jsplumb-surface component as docs require:



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.
},
...


I searched docs at https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges, but can't find any info what can i do.



Somebody? pls










share|improve this question



























    0















    I am using jsPlumb in my Angular app to connect several things.
    I am having 3 node types: subservice, entryAssets, exitAssets. Thing is that i want to have other connecting styles for subservices nodes and other for entryAssets&exitAssets (note: entryAssets will connect with exitAssets, there won't be a case that entryAsset connect to another entryAsset instance, only cross connections allowed).



    So here i have default paint styles provieded in view.edges that is passed to jsplumb-surface component as docs require:



    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.
    },
    ...


    I searched docs at https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges, but can't find any info what can i do.



    Somebody? pls










    share|improve this question

























      0












      0








      0








      I am using jsPlumb in my Angular app to connect several things.
      I am having 3 node types: subservice, entryAssets, exitAssets. Thing is that i want to have other connecting styles for subservices nodes and other for entryAssets&exitAssets (note: entryAssets will connect with exitAssets, there won't be a case that entryAsset connect to another entryAsset instance, only cross connections allowed).



      So here i have default paint styles provieded in view.edges that is passed to jsplumb-surface component as docs require:



      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.
      },
      ...


      I searched docs at https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges, but can't find any info what can i do.



      Somebody? pls










      share|improve this question














      I am using jsPlumb in my Angular app to connect several things.
      I am having 3 node types: subservice, entryAssets, exitAssets. Thing is that i want to have other connecting styles for subservices nodes and other for entryAssets&exitAssets (note: entryAssets will connect with exitAssets, there won't be a case that entryAsset connect to another entryAsset instance, only cross connections allowed).



      So here i have default paint styles provieded in view.edges that is passed to jsplumb-surface component as docs require:



      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.
      },
      ...


      I searched docs at https://jsplumbtoolkit.com/docs/toolkit/views.html#render-edges, but can't find any info what can i do.



      Somebody? pls







      angular jsplumb






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 26 '18 at 1:42









      Jake11Jake11

      145114




      145114
























          1 Answer
          1






          active

          oldest

          votes


















          0














          came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:



              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.
          },
          },
          ...


          and adding edges should look like this:



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





          share|improve this answer























            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473766%2fjsplumb-change-edge-paintstyles-for-diffrent-node-types%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            1 Answer
            1






            active

            oldest

            votes








            1 Answer
            1






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            0














            came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:



                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.
            },
            },
            ...


            and adding edges should look like this:



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





            share|improve this answer




























              0














              came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:



                  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.
              },
              },
              ...


              and adding edges should look like this:



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





              share|improve this answer


























                0












                0








                0







                came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:



                    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.
                },
                },
                ...


                and adding edges should look like this:



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





                share|improve this answer













                came up with solution, on adding edge you need to specify type in data obj, than add this type to edges prop so you can add specifing paintStyle for edge type:



                    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.
                },
                },
                ...


                and adding edges should look like this:



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






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 26 '18 at 10:25









                Jake11Jake11

                145114




                145114
































                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53473766%2fjsplumb-change-edge-paintstyles-for-diffrent-node-types%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Wiesbaden

                    Marschland

                    Dieringhausen