Is there a way to make input/output ports ambiguous? Or just look like a port can do both in/out functionality?

DannyV14 commented 1 year ago

I want to have nodes with 4 ports.

I do not care if a port is an input or output. I need each port to function as both. Or at least look like they function as both.

When a node is selected, hiding all input ports on that node. Further, hiding all output ports on the other nodes in the map when the original output port is selected.

Could you do this by stacking input/output ports on top each other? In a shared div?

Too summarize, Is there a way to make the ports function as a simple line drawing tool. No input/output. Or at least look that way.

jerosoler commented 1 year ago

Here I have created a small example of how it could be created.

<!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-index: 1;
      }

      .drawflow-node.test .inputs, .drawflow-node.test .outputs {
        visibility: hidden;
      }

      .drawflow-node.test:hover .outputs, .drawflow-node.test:hover .inputs {
        visibility: visible;
      }

      .drawflow-node.test .inputs {
        z-index: var(--drawflow-index);
      }

      .drawflow-node.test .input_1, .drawflow-node.test .output_1 {
         position:absolute;
         top:  -12px;
         left: calc(50% - 12px);
      }
      .drawflow-node.test .input_2, .drawflow-node.test .output_2 {
         position:absolute;
         top:  calc(100% - 12px);
         left: calc(50% - 12px);
      }
      .drawflow-node.test .input_3, .drawflow-node.test .output_3 {
         position:absolute;
         top:  calc(50% - 12px);
         left: calc(0% - 12px);
      }

      .drawflow-node.test .input_4, .drawflow-node.test .output_4 {
         position:absolute;
         top:  calc(50% - 12px);
         left: calc(100% - 12px);
      }

      </style>
  </head>
  <body>
    <div>
        <div id="drawflow"></div>  
    </div>
    <script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);
    editor.start();

    editor.addNode('test', 4, 4, 150, 300, 'test', {}, "");
    editor.addNode('test', 4, 4, 600, 250, 'test', {}, "");

    editor.on("connectionStart", (name) => {
        id.style.setProperty('--drawflow-index', "3");
    })

    editor.on("connectionCreated", (name) => {
        id.style.setProperty('--drawflow-index', "1");
    })

    editor.on("connectionCancel", (name) => {
        id.style.setProperty('--drawflow-index', "1");
    })
</script> 
  </body>
</html>

DannyV14 commented 1 year ago

Works perfect! Thank you.

Saurabh280419 commented 11 months ago

HI Jersoler,

The above use case works perfectly in desktop, but in touch devices it doesn't work. instead of hover event, I attached active, focus, -webkit-touch-event, but the z-index doesn't change.

Kindly assist with the above case scenario considering touch devices.

DannyV14 commented 11 months ago

@jerosoler I don’t know about iPad implementation of above code.

Can you assist?

jerosoler / Drawflow

Is there a way to make input/output ports ambiguous? Or just look like a port can do both in/out functionality? #722