Create and configure a JointJS graph element

by Roman Bruckner

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF‑8">
    <title>JointJS Element Tools</title>
    <!-- Include JointJS library -->
    <script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.js"></script>
  </head>
  <body>
    <div id="paper-holder" style="width: 800px; height: 400px; border: 1px solid #ccc;"></div>
    <script>
      // Basic setup: graph and paper
      const graph = new joint.dia.Graph({}, { cellNamespace: joint.shapes });
      const paper = new joint.dia.Paper({
        el: document.getElementById('paper-holder'),
        model: graph,
        width: 800, height: 400,
        gridSize: 10,
        drawGrid: true,
        cellViewNamespace: joint.shapes
      });

      // Create an element (rectangle)
      const rect = new joint.shapes.standard.Rectangle();
      rect.position(100, 50);
      rect.resize(100, 40);
      rect.attr({
        body: { fill: 'lightblue' },
        label: { text: 'Hover me', fill: 'black' }
      });
      rect.addTo(graph);

      // Create element tools (Boundary + Remove)
      const boundaryTool = new joint.elementTools.Boundary({ useModelGeometry: true });
      const removeButton = new joint.elementTools.Remove({ useModelGeometry: true });
      // <<< set layout: null
      const toolsView = new joint.dia.ToolsView({ layer: null, tools: [boundaryTool, removeButton] });

      // Attach tools to element view and show/hide on hover
      const elementView = rect.findView(paper);
      elementView.addTools(toolsView);
      elementView.showTools();
    </script>
  </body>
</html>