Drawing and Setting Polygon Boundingbox properties

by B L Praveen

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<button id='poly'>Poly</button>

CSS

h1{
    text-align: center;
}

.svg-container{
    display: inline-block;
    position: relative;
    width: 100%;
    padding-bottom: 60%; /* depends on svg ratio, for my zebra height/width = 1.2 so padding-bottom = 50% * 1.2 = 60% */
    vertical-align: middle; /* top | middle | bottom ... do what you want */
}

.my-svg{ /* svg into : object, img or inline */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* only required for <img /> */
    z-index: 0;
}

svg {
    border: solid 1px rgba(221, 61, 16, 0.71);
}

.rectangle {
    fill: lightblue;
    stroke: blue;
    stroke-width: 2px;
    fill-opacity: 0.5;
}

.rectangle-bind{
    fill: none;
    stroke: #081c4e;
    stroke-width: 1px;
    stroke-dasharray: 5;
}

circle {
    fill: lightgreen;
    stroke: green;
    stroke-width: 2px;
    fill-opacity: 0.5;
}

.rect-active {
    fill: #1578db;
}

.pointC-active{
    fill: #FF8F00;
}

.circle-active{
    fill: #4CAF50;
}

path{
    fill: #ffb7b3;
    stroke: #ff4736;
    stroke-width: 5px;
}

polygon{
    fill: #b6eeff;
    fill-opacity: 0.5;
    stroke: #0067ff;
    stroke-width: 2px;
}

line{
    fill: none;
    stroke: #cd08ff;
    stroke-width: 2px;
}

polyline{
    fill: none;
    stroke: #563aff;
    stroke-width: 2px;
}

circle.handle{
    fill: yellow;
    stroke: #cb9c0f;
    stroke-width: 2px;
    cursor: pointer;
}

JavaScript

d3.select('#poly').on('click', function(){ new Polygon(); });

    var w = 600, h = 500;
    var svgCanvas = d3.select('body').append('svg').attr("width", w).attr("height", h);

    function Polygon(){

        var polyPoints = [];
        var gContainer = svgCanvas.append('g').classed("outline", true);
        var isDrawing = false;
        var isDragging = false;
        var linePoint1, linePoint2;
        var startPoint;
        var bbox;
        var boundingRect;
        var shape;
        var gPoly;

        var polyDraw = svgCanvas.on("mousedown", setPoints)
                                .on("mousemove", drawline)
                                .on("mouseup", decidePoly);

        var dragBehavior = d3.drag().on("drag", alterPolygon);
//        var dragPolygon = d3.drag().on("drag", movePolygon(bbox));

        //On mousedown - setting points for the polygon
        function setPoints(){

            if(isDragging) return;


            isDrawing = true;

            var plod = d3.mouse(this);
            linePoint1 = {x: plod[0], y: plod[1]};

            polyPoints.push(plod);

            var circlePoint = gContainer.append("circle")
                .attr("cx", linePoint1.x)
                .attr("cy", linePoint1.y)
                .attr("r", 4)
                .attr("start-point", true)
                .classed("handle", true)
                .style("cursor", "pointer");


            // on setting points if mousedown on a handle
            if(d3.event.target.hasAttribute("handle")){
                completePolygon()
            }

        }

        //on mousemove - appending SVG line elements to the points
        function drawline() {

            if(isDrawing){
                linePoint2 = d3.mouse(this);
                gContainer.select('line').remove();
                gContainer.append('line')
                    .attr("x1", linePoint1.x)
                    .attr("y1", linePoint1.y)
                    .attr("x2", linePoint2[0] - 2)...