HTMLGraph | Tutorials | Edges with Remove Button

Edges with Remove Button

In nocode editor user interfaces it’s common to have some way of removing edges.

Removing an edge itself is an easy task, that can be done using the removeEdge method.

    
canvas.removeEdge(&#34;edge-1&#34;);

The challenge is to add some interactive element in the center of an edge to handle click events that trigger edge removal.

This can be done using midpointElement parameter. As a basis for a remove button, you can use this implementation:

    
const createRemoveEdgeButton = () =&gt; {
  const group = document.createElementNS(&#34;http://www.w3.org/2000/svg&#34;, &#34;g&#34;);

  group.classList.add(&#34;remove-button&#34;);

  const circle = document.createElementNS(
    &#34;http://www.w3.org/2000/svg&#34;,
    &#34;circle&#34;,
  );

  circle.setAttribute(&#34;cx&#34;, &#34;0&#34;);
  circle.setAttribute(&#34;cy&#34;, &#34;0&#34;);
  circle.setAttribute(&#34;r&#34;, &#34;7&#34;);
  circle.setAttribute(&#34;fill&#34;, &#34;var(--remove-background)&#34;);
  circle.setAttribute(&#34;stroke&#34;, &#34;var(--remove-color)&#34;);

  const path = document.createElementNS(&#34;http://www.w3.org/2000/svg&#34;, &#34;path&#34;);

  path.setAttribute(&#34;d&#34;, &#34;M -3 -3 L 3 3 M 3 -3 L -3 3&#34;);
  path.setAttribute(&#34;stroke&#34;, &#34;var(--remove-color)&#34;);

  group.appendChild(circle);
  group.appendChild(path);

  return group;
};

And the corresponding CSS:

    
.remove-button {
  pointer-events: auto;
  cursor: pointer;
  --remove-color: #e88b74;
  --remove-background: white;
}

.remove-button:hover {
  --remove-color: #f93707;
}

This is how the element appears:

Now that the button element is ready, we can attach it to an edge using midpointElement parameter and add event listeners. The element will be positioned at the point of an edge that’s equidistant from both ends.

    
import { CanvasBuilder, BezierEdgeShape } from &#34;@html-graph/html-graph&#34;;

const canvas = new CanvasBuilder(canvasElement)
  .setDefaults({
    edges: {
      shapeFactory: (edgeId) =&gt; {
        const midpointElement = createRemoveEdgeButton();

        midpointElement.addEventListener(&#34;click&#34;, (event) =&gt; {
          canvas.removeEdge(edgeId);
        });

        const shape = new BezierEdgeShape({
          hasTargetArrow: true,
          midpointElement,
        });

        return shape;
      },
    },
  }).build();

The final result is presented below.

When combined with connectable ports, this functionality becomes particularly useful for nocode editor interfaces.

Related Pages