Sandor Rozsa
Sandor Rozsa

Reputation: 193

Fabric.js group/ungroup - individual objects disappear while ungrouping

I have this functions in my angularJS controller:

    function group(){
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();

    activegroup.clone(function(newgroup) {
        canvas.discardActiveGroup();
        objectsInGroup.forEach(function(object) {
            canvas.remove(object);  
        });
        canvas.add(newgroup);

    });
}

function ungroup(){
   var activeObject = canvas.getActiveObject();
    if(activeObject.type=="group"){
        var items = activeObject._objects;
        activeObject._restoreObjectsState();
        canvas.remove(activeObject);
        for(var i = 0; i < items.length; i++) {
          canvas.add(items[i]);
          canvas.item(canvas.size()-1).hasControls = true;
        }
    }
        canvas.renderAll();
}

Working almost perfectly - jus when I ungroup the objects are not rendered (they are still in the canvas, but not visible). I can select the objects individually even if they are invisible. Selectin multiple object will show them while they are selected – deselecting one will let the other disappear. In short: ungrouping objects will not show as individual objects again.

This applys only to primitives like, box, circle, triangle. Text an images are not affected.

Help is appreciated!

Upvotes: 0

Views: 1304

Answers (1)

Durga
Durga

Reputation: 15614

function ungroup(){
 var activeObject = canvas.getActiveObject();
if(activeObject.type=="group"){
    var items = activeObject._objects;
    alert(items);
    activeObject._restoreObjectsState();
    canvas.remove(activeObject);
    for(var i = 0; i < items.length; i++) {
      canvas.add(items[i]);
      items[i].dirty = true; //set object dirty true
      canvas.item(canvas.size()-1).hasControls = true;
    }

    canvas.renderAll();
 }
}

If you set object dirty true, it will render in renderAll() call and redraw again.

Upvotes: 1

Related Questions