FABRIC JS ungroup a group without removing objects

Question

In my canvas fabric, I've got several groups with 3 objects: a Rect, an IText and an image

As it’s a group it’s not possible:

• To modify the IText,

• To attribute an event to one object of the group.

My idea is : on the event “object:selected”, the objects are ungrouped in order to :

• Be able to modify the IText directly on the canvas,

• Attribute an event to the cross.

My question is: how can I remove the group without removing my objects from the canvas. I only found these 2 methods: remove() and removeWithUpdate(), but it removes the objects from the canvas and the group is still here….I want the objects but not the group…any idea ??

Here is an exemple : on the "object:selected" i would like the "hello world" stay on the canvas but not in the group :

var canvas_Planning;

$(document).ready(function() {
  canvas_Planning = new fabric.Canvas('canvas');
  var text = new fabric.IText('hello world', {
    fontSize: 30
  });
  var circle = new fabric.Circle({
    radius: 100,
    fill: '#eef',
    scaleY: 0.5
  });
  var group = new fabric.Group([ circle, text], {
    left: 150,
    top: 100,
    angle: -10
  });
  canvas_Planning.add(group);

  canvas_Planning.on('object:selected', function(oCurseur){
    if (oCurseur.target.type == 'group') {
      canvas_Planning.forEachObject(function(o){
        oCurseur.target.remove(oCurseur.target.item(1)); 
      });
    }
  })
});

Answer 1

Thank you for your link, this was the solution :) but i never succed to use the restoreObjectsState() function.... Actually i wanted users to be able to change IText of a group directly on the canvas and not programatically.

After a click on a group (on mouse:up) i ungroup the group then the user can change the IText when the user want to move the group or do somthing else with aonther group i regroup the group

here i tried to give a quite simple example of what i did :

gbbUngroup = false;
gbbOnMove = false;
gbbIsDown = false;
var iGaucheGroupe;
var iHautGroupe;

canvas.on('mouse:up', function(oCursor){
    gbbIsDown = false;
    if ((oCurseur.target.type == 'group') && (gbbOnMove == false)){
        //ungroup the group to modify the IText
        ungroup();
        gbbUngroup = true;
    } else {
        gbbOnMove = false;
    }

});
canvas.on('mouse:down', function(oCursor){
    gbbIsDown = true;
});

canvas.on('mouse:move', function(oCursor){
    if ((gbbUngroup == true) && (gbbIsDown)) {  //(you can add other conditions)
        //group the objects
        group();
        gbbOnMove = true;
    }
});   

function ungroup(){
    var fabGroupeSelectionne = canvas.getActiveObject();
    var i=0;
    var lItems = fabGroupeSelectionne._objects;

    //I keep the coordinates of my group (my objects are at the top anf left of the group)
    iGaucheGroupe = fabGroupeSelectionne.getLeft();
    iHautGroupe = fabGroupeSelectionne.getTop();

    //I delete the group
    canvas.remove(fabGroupeSelectionne);
    while (i < fabGroupeSelectionne.size()) {

        //I create separatly the objects of the group
        lItems[i].set({left : iGaucheGroupe, top : iHautGroupe, selectable : true});
        canvas.add(lItems[i]);
        i++;
    }
    canvas.renderAll();
}
function group(){
    var fabReGroup = new fabric.Group([
    canvas.item(canvas.size()-2).clone(),
    canvas.item(canvas.size()-1).clone()
    ]);
    fabReGroup.set({left: iGaucheGroupe, top : iHautGroupe});
    canvas.item(canvas.size()-2).remove();
    canvas.item(canvas.size()-1).remove();
    canvas.add(fabReGroup); 
}   

Answer 2

it is possible to change the text within a group. We faced the same problem and came up with the following solution. We are programmatically setting the active object to the desired object of the group. Then you can modify it as you wish. For you this should work assuming canvas._object[0] is the group and canvas._object[0]._objects[1] is the iText.

canvas_Planning.setActiveObject(canvas._objects[0]._objects[1]); 
var activeObj = canvas_Planning.getActiveObject();
//Change Text or do other stuff with it
activeObj.setText('your text');
canvas_Planning.renderAll();

If you would like to ungroup the items there is a good solution by msievers on github: https://gist.github.com/msievers/6069778 Hope this helps. regards, Benick