How to change the color of the Node in the canvas according to the left pane Node definition?

[Aravinda93]

I am using the Drawflow library to build the application similar to the example you have provided here: https://jerosoler.github.io/drawflow-vue3-example/

I have a different set of Nodes on the left pane that users can drag and drop into the canvas. As of now all the Nodes when dragged onto the Canvas it takes single color (in your example all are taking Black color). Is there a way to make them take the color as per what's defined on the left pane?

For example: In your case when Get/Post is dragged and placed then Black, If Script is dragged then it should be Blue in Drawflow, and if Console.log is dragged and placed then it should be Orange?

I tried some things but nothing worked for me. As we have multiple Styles coming in and Element-ui and some draw flow default styles I am unable to follow up and make it work as per my wish so thought of posting here and getting some help in achieving this.

@jerosoler Looking forward to your suggestion. Thanks in advance.

[jerosoler]

Hi Hello,

You can use the classes that are added to the nodes, to paint the nodes the color.

Explain: editor.addNode(name, inputs, outputs, posx, posy, class, data, html);

 editor.addNode('github', 3, 3, 150, 300, 'github', {}, '');
 editor.addNode('other', 2, 3, 400, 300, 'other', {}, ' ');

        .drawflow-node.github {
            background: orange;
        }
        .drawflow-node.other {
            background: fuchsia;
        }

[jerosoler]

You can also see in the demo https://jerosoler.github.io/Drawflow/ the "personalized" node.

[Aravinda93]

@jerosoler Hello, Thanks a lot for such a quick response.

As you mentioned I added the class something like this in my case:

this.$df.addNode( name, nodeSelected.input, nodeSelected.output, posX, posY, nodeSelected.name, { ID: this.nodeCount, nodeId: nodeCount, eventType: this.dragEventType, }, name, "vue" );

Then in my Styles, I added the styles based on the name, something like this:

.drawflow-node.Identifiers1 {
  background: orange;
}

.drawflow-node.Identifiers2 {
  background: green;
}

But still, the provided colors are not kicking-in and I am getting the same color for all the Nodes.

I have added my Code sample in CodeSandBox: https://codesandbox.io/s/blissful-wozniak-6voii?file=/components/DrawflowSample.vue:9599-9706

If you get a chance can you please have a look and let me know what I am missing?

[jerosoler]

Try "