Fabric.js - Grouped iText not editable

Question

The title says all. When a fabric.ITextis part of a fabric.Group, it no longer reacts like a editable text.

Here is a use-case: http://jsfiddle.net/vAjYd/

Is there a way to solve this problem? Otherwise I have to write my on group.

Btw: A fabric.Group has many advantages, but the disabled eventing makes it impossible to use for UI-Elements (i.e. this use-case or groups of buttons as groups of texts and rects).

Answer 1

I might be too late to answer this, but surely many of you like me searching for this answer shall meet the solution. You can find a perfectly working solution of iText where user can edit the text of iText which is a part of a fabric.group Working solution

Approach followed here is:

1. When user double clicks the desired group, we ungroup all the elements
2. set focus on iText element
3. Enters the editing mode of iText & select all text so that user can directly start editing..

4. Once user exits edit mode, the elements are again grouped together.

   // ungroup objects in group
   var items
   var ungroup = function (group) {
       items = group._objects;
       group._restoreObjectsState();
       canvas.remove(group);
       for (var i = 0; i < items.length; i++) {
           canvas.add(items[i]);
       }
       // if you have disabled render on addition
       canvas.renderAll();
   };
   
   // Re-group when text editing finishes
   var dimensionText = new fabric.IText("Dimension Text", {
       fontFamily: 'Comic Sans',
       fontSize: 14,
       stroke: '#000',
       strokeWidth: 1,
       fill: "#000",
       left: 170,
       top: 60
   });
   dimensionText.on('editing:exited', function () {
       var items = [];
       canvas.forEachObject(function (obj) {
           items.push(obj);
           canvas.remove(obj);
       });
       var grp = new fabric.Group(items.reverse(), {});
       canvas.add(grp);
       grp.on('mousedown', fabricDblClick(grp, function (obj) {
           ungroup(grp);
           canvas.setActiveObject(dimensionText);
           dimensionText.enterEditing();
           dimensionText.selectAll();
       }));
   });
   

Answer 2

I know is too late, but here is a working code for your problem: http://jsfiddle.net/fd4yrxq6/2/

I just made some little changes using the anwares above:

...
// ungroup objects in group
var items;
var ungroup = function (group) {
    items = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);
    canvas.renderAll();
    for (var i = 0; i < items.length; i++) {
        canvas.add(items[i]);
    }
    // if you have disabled render on addition
    canvas.renderAll();
};
...
dimensionText.on('editing:exited', function () {
        for (var i = 0; i < items.length; i++) {
        canvas.remove(items[i]);
    }
    var grp = new fabric.Group(items, {});
    canvas.add(grp);
    grp.on('mousedown', fabricDblClick(grp, function (obj) {
        ungroup(grp);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
    }));
});
...

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(300);
canvas.setHeight(300);

// Double-click event handler
var fabricDblClick = function (obj, handler) {
    return function () {
        if (obj.clicked) handler(obj);
        else {
            obj.clicked = true;
            setTimeout(function () {
                obj.clicked = false;
            }, 500);
        }
    };
};

// ungroup objects in group
var items;
var ungroup = function (group) {
    items = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);
    canvas.renderAll();
    for (var i = 0; i < items.length; i++) {
        canvas.add(items[i]);
    }
    // if you have disabled render on addition
    canvas.renderAll();
};

// Re-group when text editing finishes
var dimensionText = new fabric.IText("Dimension Text", {
    fontFamily: 'Comic Sans',
    fontSize: 14,
    stroke: '#000',
    strokeWidth: 1,
    fill: "#000",
    left: 170,
    top: 60
});
dimensionText.on('editing:exited', function () {
        for (var i = 0; i < items.length; i++) {
        canvas.remove(items[i]);
    }
    var grp = new fabric.Group(items, {});
    canvas.add(grp);
    grp.on('mousedown', fabricDblClick(grp, function (obj) {
        ungroup(grp);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
    }));
});

function addRuler() {
    var dimension_mark = new fabric.Path('M0,0L0,-5L0,5L0,0L150,0L150,-5L150,5L150,0z');
    dimension_mark.set({
        left: 150,
        top: 70,
        stroke: '#333333',
        strokeWidth: 2,
        scaleY: 1
    });
    var dimension_group = new fabric.Group([dimension_mark, dimensionText], {
        left: 50,
        top: 50
    });
    canvas.add(dimension_group);
    dimension_group.on('mousedown', fabricDblClick(dimension_group, function (obj) {
        ungroup(dimension_group);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
        canvas.renderAll();
    }));
}
addRuler();

style = {
        left: 100,
        top: 100,
        width: 20,
        height: 20,
        fill: "green",
        lockRotation: true
    };
    var rectangle = new fabric.Polygon([
        { x: 20, y: 0 },
        { x: 0, y: 20 },
        { x: 20, y: 40 },
        { x: 40, y: 20 },
    ], style);
    canvas.add(rectangle);

.canvas {
    border: 1px solid Black;
    width: 300px;
    height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.2.0/fabric.min.js"></script>
<p id="addObj">Fabric.js - iText editing from Group</p>
<canvas id="canvas" class="canvas" ></canvas>

Answer 3

Thanks for the answer, However it doesn't make sure only the items in the group are regrouped, we must change 'canvas.forEachObject' to 'groupItems' as it will try to put back all items in the canvas only those belonged to the group. See the following code

// ungroup objects in group
var groupItems = []
var ungroup = function (group) {
    groupItems = group._objects;
    group._restoreObjectsState();
    canvas.remove(group);
    for (var i = 0; i < groupItems.length; i++) {
        canvas.add(groupItems[i]);
    }
    // if you have disabled render on addition
    canvas.renderAll();
};

// Re-group when text editing finishes
var dimensionText = new fabric.IText("Dimension Text", {
    fontFamily: 'Comic Sans',
    fontSize: 14,
    stroke: '#000',
    strokeWidth: 1,
    fill: "#000",
    left: 170,
    top: 60
});
dimensionText.on('editing:exited', function () {
    var items = [];
    groupItems.forEach(function (obj) {
        items.push(obj);
        canvas.remove(obj);
    });
    var grp = new fabric.Group(items.reverse(), {});
    canvas.add(grp);
    grp.on('mousedown', fabricDblClick(grp, function (obj) {
        ungroup(grp);
        canvas.setActiveObject(dimensionText);
        dimensionText.enterEditing();
        dimensionText.selectAll();
    }));
});