JointJS Demo

by g30rg3

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.4/joint.css" />
  </head>

  <body>
    <!-- content -->
    <div id="myholder"></div>

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.1/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.4/joint.js"></script>


  </body>

</html>

JavaScript

var namespace = joint.shapes;

  var graph = new joint.dia.Graph({}, {
    cellNamespace: namespace
  });

  var paper = new joint.dia.Paper({
    el: document.getElementById('myholder'),
    model: graph,
    width: 600,
    height: 300, // height had to be increased
    gridSize: 10,
    drawGrid: true,
    background: {
      color: 'rgba(0, 255, 0, 0.3)'
    },
    cellViewNamespace: namespace
  });
 
 joint.dia.Element.define('ganttChart.Milestone', {
        attrs: {
            body: {
                width: 'calc(w)',
                height: 'calc(h)',
                strokeWidth: 2,
                stroke: '#000000',
                fill: '#FFFFFF'
            },
            label: {
                textVerticalAnchor: 'middle',
                textAnchor: 'middle',
                x: 'calc(0.5*w)',
                y: 'calc(0.5*h)',
                fontSize: 14,
                fill: '#333333'
            }
        }
    }, {
        markup: [{
            tagName: 'rect',
            selector: 'body',
        }, {
            tagName: 'text',
            selector: 'label'
        }]
    });
 
 
  function createRect(position, size, color){
    var rect = new joint.shapes.standard.Rectangle();
    rect.position(position.x, position.y);
    rect.resize(size.w, size.h);
    rect.attr({
      body: {
        fill: color,
        rx: 5,
      	ry: 5,
      	strokeWidth: 2
      }
      });
    
    return rect;
  }

  var rect = createRect({x:100,y:30},{w:100,h:40},'blue');
  rect.addTo(graph);
  var rect2 = createRect({x:400,y:30},{w:100,h:40},'#2C3E50');
  rect2.addTo(graph);


  var link = new joint.shapes.standard.Link();
  link.source(rect);
  link.target(rect2);
  link.addTo(graph);
  

  var rect3 = new joint.shapes.standard.Rectangle();
  rect3.position(100, 130);
  rect3.resize(100, 40);
  rect3.attr({
    body: {
      fill: '#E74C3C',
      rx: 20,
      ry: 20,
      strokeWidth: 0
    },
    label: {
      text: 'Hello',
      fill: '#ECF0F1',
 ...