JSFiddle - React, Tailwind, and code Playground

by areuohm

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<canvas id="canvasWorkspaceFamiliogram" width="500" height="470" style="border:1px solid #ccc"></canvas>

JavaScript

(function(){
var canvas = new fabric.Canvas('canvasWorkspaceFamiliogram', { selection: false });
 		fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';
    
var itemM = new fabric.Rect({width: 30,height: 30,fill: 'white',stroke: 'black',strokeWidth: 1, left:50,top:50});   
var itemF = new fabric.Circle({radius: 15,fill: 'white',stroke: 'black',strokeWidth: 1,left: 400,top: 200});

 itemF.relations = [];
 itemM.relations = [];
 
 canvas.add(itemM);
 canvas.add(itemF);
 createSVGPath(itemF,itemM,canvas);
 canvas.renderAll();

}());
function createSVGPath(startObj, endObj, context){                
  var svgCommands = [
    [ 'L', startObj.left, startObj.top],
    [ 'V',  startObj.top + 50],
    [ 'H', endObj.left, endObj.top + 50],
    [ 'V', endObj.top]
  ];

  var line = new fabric.Path(svgCommands, {
    fill: '', stroke: 'black', objectCaching: false, dirty: false,  
    perPixelTargetFind: true, selectable: true, hasControls: false
  });               
        
  context.add(line);         
  let mi = svgCommands.length - 1;

  startObj.relations.push({relation: line, maxIndex: mi, type:'M'});
  endObj.relations.push({relation: line, maxIndex: mi, type:'Z'});

  startObj.on('moving', function (e) {               
    this.relations.forEach((T,index) => {                        
      if(T.type === 'M'){                    
        T.relation.path[0][1] = e.target.left;
        T.relation.path[0][2] = e.target.top;                    
      }
    });
    context.requestRenderAll();
  });

  endObj.on('moving', function (e) {
    this.relations.forEach((T,index) => {                
      if(T.type === 'Z'){                    
        T.relation.path[T.maxIndex - 1][1] = e.target.left;                    
        T.relation.path[T.maxIndex ][1] = e.target.top;                    
      }                
    });
    context.requestRenderAll();
  });
}