Custom delete buttom - Githubissues

adrielov commented 10 months ago

How to make the node's delete button appear above when hovered and not in the contextmenu.

The connections continue the way they are, I only want to change the delete of the node.

jerosoler commented 10 months ago

The option more simple is add delete button in node.

Complet 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>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }

    .parent-node .drawflow-delete {
        display: none;
    }
    .drawflow-delete-button {
        display: none;
        position:absolute;
        background: black;
        color: white;
        width: 100px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        left: calc(50% - 50px);
        top: -40px;
        border-radius: 4px;
        cursor:pointer
    }

    .drawflow-node:hover .drawflow-delete-button {
        display: block;
    }
    .drawflow-delete-button:before {
        display: block;
        content: ' ';
        position: absolute;
        background: transparent;
        width: 100px;
        text-align: center;
        line-height: 30px;
        height: 40px;
        z-index: -1;
    }
</style>
<script>
    var id = document.getElementById("drawflow");
    const editor = new Drawflow(id);

    editor.start();

    editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, '<div class="drawflow-delete-button">Delete</div>aaa' );
    editor.addNode('bbb', 1, 0, 400, 400, 'bbb', {}, '<div class="drawflow-delete-button">Delete</div>bbb' );
    editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, '<div class="drawflow-delete-button">Delete</div>ccc' );
    editor.addConnection(1, 2, 'output_1', 'input_1');

    editor.on("clickEnd", (e) => {
        if(e.target.classList[0] === 'drawflow-delete-button') {
            const node = e.target.closest(".drawflow_content_node").parentElement;
            editor.removeNodeId(node.id);
        }
    });
</script>
</body>
</html>

Other option is creating on events mouseover, examples:

<!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>
<body>
<div id="drawflow"></div>
  <style>
    #drawflow { 
      position: relative;
      text-align:initial;
      width: 100%;
      height: 800px;
      border: 1px solid red;
    }

    .parent-node .drawflow-delete {
        display: none;
    }
    .drawflow-delete-button {
        display: block;
        position:absolute;
        background: black;
        color: white;
        width: 100px;
        text-align: center;
        line-height: 30px;
        height: 30px;
        left: calc(50% - 50px);
        top: -40px;
        border-radius: 4px;
    }
    .drawflow-delete-button:before {
        display: block;
        content: ' ';
        position: absolute;
        background: transparent;
        width: 100px;
        text-align: center;
        line-height: 30px;
        height: 40px;
        z-index: -1;
    }

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

    editor.start();

    editor.addNode('aaa', 0, 1, 100, 300, 'aaa', {}, '<input type="text">' );
    editor.addNode('bbb', 1, 0, 400, 400, 'bbb', {}, 'bbb' );
    editor.addNode('ccc', 1, 0, 500, 500, 'ccc', {}, 'ccc' );
    editor.addConnection(1, 2, 'output_1', 'input_1');

    document.addEventListener("mouseover", hoverNode);
    function hoverNode(e) {
        if(e.target.classList[0] === 'parent-drawflow' || e.target.classList[0] === 'drawflow') {
            if(editor.precanvas.getElementsByClassName("drawflow-delete-button").length) {
                editor.precanvas.getElementsByClassName("drawflow-delete-button")[0].remove()
            };
        }
        if(e.target.closest(".drawflow_content_node") != null) {
            const node = e.target.closest(".drawflow_content_node").parentElement;
            var deletebox = document.createElement('div');
            deletebox.classList.add("drawflow-delete-button");
            deletebox.onclick = () => {
                editor.removeNodeId(node.id);
            }
            deletebox.innerHTML = "Delete";
            node.appendChild(deletebox);
        }
    }
</script>
</body>
</html>

This is a small test that may contain bugs.

adrielov commented 10 months ago

:'(

jerosoler commented 10 months ago

This is a small test that may contain bugs.

adrielov commented 9 months ago

Thanks :D

jerosoler / Drawflow

Custom delete buttom #763