PolyLine with FabricJS

Creating connectors

by vmachan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<body>
  <div class="canvas-container" style="width: 600px; height: 200px; position: relative; -webkit-user-select: none;">
    <canvas id="canvas" class="canvas" width="600" height="200" style="position: absolute; width: 600px; height: 200px; left: 0px; top: 0px; -webkit-user-select: none;">
    </canvas>
    <input id="txtCursor" type="text" name="txtCursor" value=""/>
    <input id="startPolyline" type="button" name="btnStartPolyLine" value="Start Polyline"/>
    <input id="selectAll" type="button" name="btnSelectAll" value="Select All"/>
    <input id="showShape" type="button" name="btnShowShape" value="Show Shape"/><br/>
    Double-click to end creating polyline
  </div>
</body>

CSS

canvas {
      border: 1px solid #999;
    }
    img {
      display: none;
    }

JavaScript

$(document).ready(function()
{
    var roof = null;
    var roofPoints = [];
    var lines = [];
    var lineCounter = 0;
    var drawingObject = {};
    drawingObject.type = "";
    drawingObject.background = "";
    drawingObject.border = "";
    var vertexFocus = null;
    var vertexDrag = false;
    var selectedPolyLine = null;
    var selectedPointInPolyLine = null;
    var setPos = null;

    // canvas Drawing
    var canvas = new fabric.Canvas('canvas', { isDrawingMode: false, skipTargetFind: false });
    var x = 0;
    var y = 0;

    function Point(x, y) {
        this.x = x;
        this.y = y;
    }

    fabric.util.addListener(window, 'dblclick', function(e)
    { 
        if (drawingObject.type == "roof")
        {
            drawingObject.type = "";
            canvas.remove(lines[lineCounter - 1]);
            lines.forEach(function(i) { canvas.remove(i);});
            
            roof = makeRoof(roofPoints);
            canvas.add(roof);
            canvas.renderAll();
        } 
    });

    fabric.util.addListener(window, 'keyup', function (e) 
    {
        var pos = canvas.getPointer(e);

        if (e.keyCode === 27) // ESCAPE key
        {
            if (drawingObject.type == "roof")
            {
                drawingObject.type = "";
                canvas.remove(lines[lineCounter - 1]);
                lines.forEach(function(i) { canvas.remove(i);});
                
                roof = makeRoof(roofPoints);
                canvas.add(roof);
                canvas.renderAll();
            } 
        }
    });

    $("#startPolyline").click(function()
    {
        if (drawingObject.type == "roof") {
            drawingObject.type = "";
            canvas.remove(lines[lineCounter - 1]);
            lines.forEach(function(i) { canvas.remove(i);});
            
            roof = makeRoof(roofPoints);
            canvas.add(roof);
            canvas.renderAll();
        } else {
            drawingObject.type = "roof"; // roof...