jerosoler
commented
1 year ago Complete example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.css"/>
<script src="https://cdn.jsdelivr.net/gh/jerosoler/Drawflow/dist/drawflow.min.js"></script>
</head>
<div id="drawflow"></div>
<style>
#drawflow {
position: relative;
text-align:initial;
width: 100%;
height: 800px;
border: 1px solid red;
}
.drawflow-node.complete {
background: green !important;
}
.drawflow-node.pending {
background: yellow !important;
}
</style>
<script>
var id = document.getElementById("drawflow");
const editor = new Drawflow(id);
editor.start();
editor.on("nodeDataChanged", (id) => {
const nodeInfo = editor.getNodeFromId(id);
const newClassAssigned = nodeInfo.data.status;
editor.drawflow.drawflow[editor.module].data[id].class = newClassAssigned;
document.querySelector(`#node-${id}`).classList.remove('pending');
document.querySelector(`#node-${id}`).classList.remove('complete');
document.querySelector(`#node-${id}`).classList.add(newClassAssigned);
});
editor.addNode('test1', 1, 1, 200, 300, 'pending', { status: 'pending'}, `
<div>
<select df-status>
<option value="pending">Pending</option>
<option value="complete">Complete</option>
</select>
</div>
`);
</script>
</body>
</html>
I want to provide a color for each of the nodes based on its status. For example, if status is 'completed', color of the node should be green. If it is 'pending' status should be blue and so on.