My fabric polybrushxx

Ben A. Hilleli - Why won't these ungroup

by bhilleli

HTML

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<!--Fabric.js based polygon 'selector' - Ben A. Hilleli, Apr 2015-->
<!--todo: capture 'point select mode' (psm), in 'psm' - the groups are NOT selectable, as if/when they are, an entire rectangle around them becomes reserved for their selection and is thus NOT selectable; when one is trying to draw rectangular areas it makes it all but impossible... Also - change opacity/color and see if this will work with heatmap lib at all... fact that both are canvas based makes it challenging... Orig thought to use vector/svg (like D3) but fabric so intuitive... so why note (canvas far more powerful a medium/ fairness: it's also much harder to work with) -->
<div>X2
    <p>Click in the box to create polygons, you can then move the created polygons... to close a polygon, go back to first point and dbl click.</p>
    <p>to reopen a 'closed' polygon (turn group back to individual movable modes), <strong>double click it</strong>... BUT THAT PART AINT WORKING YET - DOH!</div>
<canvas id="c" width="500" height="500" style="display: block; width: 500px; height: 500px; border: 1px solid rgb(204, 204, 204);" class="lower-canvas"></canvas>

JavaScript

//dblclick support http://stackoverflow.com/questions/23418055/fabricjs-double-click-on-objects
//code for the polyselector starts below
fabric = (function (f) {
    var nativeOn = f.on;
    var dblClickSubscribers = [];
    var nativeCanvas = f.Canvas;
    f.Canvas = (function (domId, options) {
        var canvasDomElement = document.getElementById(domId);
        var c = new nativeCanvas(domId, options);
        c.dblclick = function (handler) {
            dblClickSubscribers.push(handler)
        };
        canvasDomElement.nextSibling.ondblclick = function (ev) {
            for (var i = 0; i < dblClickSubscribers.length; i++) {
                console.log(ev);
                dblClickSubscribers[i]({
                    e: ev
                });
            }
        };
        return c;
    });
    return f;
}(fabric));

//--------------
//Ben A. Hilleli (2015 - CVI)
//--------------
(function () {
    var canvas = this.__canvas = new fabric.Canvas('c', {
        selection: false
    }),
        group;
    fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

    function makeCircle(left, top, line1, line2, line3, line4) {
        var c = new fabric.Circle({
            z_index: 999,
            left: left,
            top: top,
            strokeWidth: 2,
            radius: 3,
            fill: '#fff',
            stroke: '#666'
        });
        c.hasControls = c.hasBorders = false;

        c.line1 = line1;
        c.line2 = line2;
        c.line3 = line3;
        c.line4 = line4;
        return c;
    }

    function makeLine(coords) {
        return new fabric.Line(coords, {
            fill: 'red',
            stroke: 'blue',
            strokeWidth: 5,
            selectable: false
        });
    }

    var firsttime = true,
        liner = [],
        circler = [],
        group = [];

    canvas.on('mouse:up', function (e) {
        console.log(e);
        var p = e.e,
            prevLine;
        /*todo start from...