Custom css for different lines

[usama4850]

hi
is it possible to have custom styles for different lines like 1 line color is blue other is yellow when I export the diagram and import it to another canvas it retains its lines color?
Please help

[jerosoler]

Hello @usama4850

There are not many options.

It would be this option by css with the color by type of output_1 output_2 ....

Witch css:

.drawflow .connection.output_2 .main-path {
    stroke: red;
}
.drawflow .connection.output_3 .main-path {
    stroke: #ff9900;
}

Another option is to look at this PR #122

Jero

[usama4850]

My other question is that can we put the custom classes on connection and saved in json so next time when i import that json the connection lines have those classes.

…

On Thu, 3 Jun 2021, 11:59 am Jero Soler, ***@***.***> wrote: Hello @usama4850 <https://github.com/usama4850> There are not many options. It would be this option by css with the color by type of output_1 output_2 .... [image: image] <https://user-images.githubusercontent.com/30957047/120600954-a41db880-c449-11eb-9740-ff9d6bda99e4.png> Witch css: .drawflow .connection.output_2 .main-path { stroke: red; } .drawflow .connection.output_3 .main-path { stroke: #ff9900; } Another option is to look at this PR #122 <#122> Jero — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO6VOZKYVFY7JHY5FXODZ33TQ4R5XANCNFSM457KOKWA> .

[usama4850]

Hello @usama4850

There are not many options.

It would be this option by css with the color by type of output_1 output_2 ....

Witch css:

.drawflow .connection.output_2 .main-path {
    stroke: red;
}
.drawflow .connection.output_3 .main-path {
    stroke: #ff9900;
}

Another option is to look at this PR #122

Jero

I want different lines from one output on the basics of classes
like I make a click function on output it appears options to choose the connection color I need to save this styles in JSON so next time when I import my JSON on another editor it retains the colors of connection

[jerosoler]

That is a bit tricky.
I would have to overwrite some functions

[usama4850]

Waiting for your response and thanks in advance

…

On Sun, 6 Jun 2021, 5:03 pm Jero Soler, ***@***.***> wrote: That is a bit tricky. I would have to overwrite some functions — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#180 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AO6VOZJO4NIHEYQTIYV7SL3TRNP2LANCNFSM457KOKWA> .

[jerosoler]

The most reasonable way I can find would be this:

Detect the changes in the dom and add the class of the exit node.

This works on importing and creating new entries.

Adding between editor and editor.start

const editor = new Drawflow(id);

  const config = { attributes: true, childList: true, subtree: true };

    const callback = function(mutationsList, observer) {
      // Use traditional 'for loops' for IE 11
      for(const mutation of mutationsList) {
          if (mutation.type === 'childList') {
              if(mutation.addedNodes[0]) {
                if(mutation.addedNodes[0].nodeName === "svg" && mutation.addedNodes[0].classList[0] === "connection") {
                  if(mutation.addedNodes[0].classList.length > 4) {
                  console.log('A child node has been added or removed.');
                    const node_id = parseInt(mutation.addedNodes[0].classList[2].slice(14));
                    const info_node = editor.getNodeFromId(node_id);
                    mutation.addedNodes[0].classList.add(info_node.class);
                   //console.log(mutation);
                  }
                }

              }
          }
          else if (mutation.type === 'attributes') {
              if(mutation.attributeName === "class") {
                if(mutation.target.nodeName === "svg" && mutation.target.classList[0] === "connection") {
                  if(mutation.target.classList.length > 4 && mutation.target.classList.length < 6) {
                      //console.log("add class");
                      const node_id = parseInt(mutation.target.classList[2].slice(14));
                      const info_node = editor.getNodeFromId(node_id);
                      console.log(info_node);
                      mutation.target.classList.add(info_node.class);
                }
              }
          }
      }
    }
  };
  const observer = new MutationObserver(callback);
  observer.observe(id, config);

  editor.reroute = true;
  editor.reroute_fix_curvature = true;

  editor.start();

and css

<style>
.connection.CLASS_NODE_NAME.output_1 path {
  stroke: red;
}

.connection.CLASS_NODE_NAME.output_2 path {
  stroke: green;
}
</style>