FabricJs：グループ化を1レベルに制限する - グループ化する前にすべてのオブジェクトをグループ解除する

Question

グループ化されたアイテムを別のグループにグループ化できないようにしたい。これを達成するための私の解決策は、基本的にユーザーが[グループ]ボタンをクリックしたときに、すべてのグループを解除してから選択を再度グループ化するときです。

私の問題は、これが起こると、グループ化されていないアイテムが重複してしまうことです。キャンバスに1セット、新しいグループに1セット。ここで

は、私が何を意味するかのビデオです... https://screencast-o-matic.com/watch/cbXQfa2lJg

ここに私のコードです...

export function groupSelectedItems() { 

    canvas = document.getElementById("c").fabric; 
    var activegroup = canvas.getActiveGroup(); 
    var objectsInGroup = activegroup.getObjects(); 

    //Ungroup all items first. This will limit grouping to only one level deep. 
    objectsInGroup.forEach(function(o) { 

     if(o.type=="group"){ 

     //ungroup items within this group 
     var items = o.getObjects(); 

     o.destroy(); 
     canvas.remove(o); 

     items.forEach(function(i) { 
      canvas.add(i); 
      activegroup.addWithUpdate(i) 
      canvas.renderAll(); 
     }); 
     } 
    }); 

    //Create the group 
    activegroup.clone(function(newgroup) { 

    canvas.discardActiveGroup(); 
    objectsInGroup.forEach(function(object) { 
     canvas.remove(object); 
    }); 

    canvas.add(newgroup); 
    newgroup.setControlsVisibility({'tl': false, 'tr': false, 'bl': false, 'br': false, 'ml': false, 'mr': false, 'mb': false, 'mt': false}); 

    }, ['id', 'componentType', 'shape']); 

    canvas.renderAll(); 

} 

Answer 1

function groupSelectedItems() { 
    canvas = document.getElementById("c").fabric; 
    var activegroup = canvas.getActiveGroup(); 

    activegroup.clone(function(newgroup) { 
    canvas.discardActiveGroup(); 
    activegroup.forEachObject(function(object) { 
     canvas.remove(object); 
    }); 
    newgroup.forEachObject(function(object) { 
     if (object.type == 'group') { 
     object.destroy(); 
     newgroup.removeWithUpdate(object); 
     object.forEachObject(function(obj) { 
      newgroup.addWithUpdate(obj); 
     }) 
     } 
    }); 
    canvas.add(newgroup); 
    }, ['id', 'componentType', 'shape']); 
} 

任意のグループオブジェクトがある場合、グループ内のすべてのオブジェクトをチェックすべてのオブジェクトをグループ化してキャンバスに追加します。