How to Change the Input-Output Line Color

AbhayUpadhyay96 commented 7 months ago

Hi @jerosoler I am using this library in my Project So My requirement is I need to change the Input-output wire Color when we Hover the Mouse on Nodes. Is it Possible ??

Thanks in Advance Any support will be highly appreciated.

jerosoler commented 7 months ago

Yes with css

      .drawflow-node:hover .input {
        background: red;
      }
      .drawflow-node:hover .output {
        background: green;
      }

jerosoler commented 7 months ago

Example with hover node change connections colors:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <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>
  <style>
    #drawflow {
      position: relative;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }

    .drawflow .connection .main-path.green {
      stroke: green;
    }
  </style>
</head>
<body>
  <div>
    <div id="drawflow"></div>
  </div>
  <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();
    const nodeA = editor.addNode('aaa', 1, 1, 100, 300, 'aaa', {}, 'aaa' );
    const nodeB = editor.addNode('bbb', 1, 1, 800, 300, 'bbb', {}, 'bbb' );
    const nodeC =  editor.addNode('ccc', 1, 1, 300, 200, 'ccc', {}, 'ccc' );
    const nodeD =  editor.addNode('ddd', 1, 1, 500, 500, 'ddd', {}, 'ddd' );
    const nodeE =  editor.addNode('eee', 1, 1, 800, 500, 'eee', {}, 'eee' );
    editor.addConnection(nodeA, nodeB, 'output_1', 'input_1');
    editor.addConnection(nodeD, nodeE, 'output_1', 'input_1');

    editor.container.addEventListener('mouseover', (e) => {
      const ele = e.target.closest(".drawflow-node");
      if(ele !== null) {
        const node = ele;
        const nodeId = node.id; 
        const connectionsIn = editor.container.querySelectorAll('.node_in_'+nodeId);
        const connectionsOut = editor.container.querySelectorAll('.node_out_'+nodeId);
        const allConnections = [...connectionsIn, ...connectionsOut];
        allConnections.forEach(el => {
          el.childNodes[0].classList.add("green");
        });
      }
    })

    editor.container.addEventListener('mouseout', (e) => {
      const connections = editor.container.querySelectorAll('.main-path.green');
      connections.forEach(el => {
        el.classList.remove("green");
      })
    })
  </script>
</body>
</html>

AbhayUpadhyay96 commented 7 months ago

Thanks @jerosoler My issue is resolved now.

jerosoler / Drawflow

How to Change the Input-Output Line Color #793