JointJS: Link Growing Animation

by Roman Bruckner

HTML

<html>

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

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

    <!-- dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.4.0/backbone.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/3.7.5/joint.js"></script>

  </body>

</html>

JavaScript

const { dia, util, elementTools, shapes } = joint;
joint.dia.attributes.connection = {
    qualify: function() {
        return this.model.isLink();
    },
    set: function(ratio = 1) {
        let d;
        if (ratio < 1) {
            const path = this.getConnection();
            const segmentSubdivisions = this.getConnectionSubdivisions();
            const sourceParts = path.divideAt(ratio, { segmentSubdivisions });
            if (sourceParts) {
                d = `${sourceParts[0].serialize()}`;
            }
        }
        return { d: d || this.getSerializedConnection() };
    }
};

const graph = new dia.Graph({}, {
  cellNamespace: shapes
});

const paper = new dia.Paper({
  el: document.getElementById('paper'),
  width: 800,
  height: 900,
  model: graph,
  cellViewNamespace: shapes,
  gridSize: 10,
  async: true,
  sorting: dia.Paper.sorting.APPROX,
  defaultLink: () => new shapes.standard.Link()
});

// Example

const el1 = new shapes.standard.Rectangle({
  position: {
    x: 10,
    y: 10
  },
  size: {
    width: 100,
    height: 150
  }
});


const l1 = new shapes.standard.Link({
   source: { id: el1.id },
   target: { x: 400, y: 200 },
   vertices: [{ x: 400, y: 85 }],
   attrs: {
       line: {
          connection: 0.03
       }
   }
});

graph.resetCells([el1, l1]);

paper.unfreeze();

l1.transition('attrs/line/connection', 1, { duration: 1000, delay: 1000 });