CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
Chris Spittles
Chris Spittles

Reputation: 15359

Issue cloning a group using FabricJS (Copy and Paste)

I'm trying to copy and paste objects onto canvas using FabricJS:

I can get it working perfectly when the copied item is an object. But when the item is a group it messes up.

I've put together this fiddle (its a mess I know) but its a few disparate parts of a larger, more organised script (just enough to replicate the problem).

https://jsfiddle.net/chrissp26/xxd6h80t/

With the circle selected hit the paste button and it will copy and paste a clone of the object with a 5px offset. Perfect.

Now that you have two, select them both and try the same thing. The original circles vanish and the cloned ones disappear or move after deselecting???

Here is the paste function:

var _paste = function() {

  var activeObject = _canvas.getActiveObject(),
    activeGroup = _canvas.getActiveGroup();

  if (_clipboard.objects) {

    var group = new fabric.Group();

    for (var i in _clipboard.objects) {

      var object = fabric.util.object.clone(_clipboard.objects[i]);

      group.addWithUpdate(object);

    }

    group
      .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
      .setCoords();

    _canvas
      .setActiveGroup(group)
      .add(group);

  } else {

    var object = fabric.util.object.clone(_clipboard);

    object
      .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
      .setCoords();

    _canvas
      .add(object)
      .setActiveObject(object)
      .renderAll();
  }
}

Upvotes: 3

Views: 2477

Answers (1)

John M
John M

Reputation: 2600

The behaviour of the clone() function has undergone a few changes recently, the following code works for me, using Fabric.js 1.7.0 (I note that you're using 1.5.0 in your fiddle):

  if (_clipboard.objects) {

    var group = new fabric.Group();

    for (var i in _clipboard.objects) {
        _clipboard.objects[i].clone(function (clonedObj) {
        group.addWithUpdate(clonedObj);
        if (group.size() == _clipboard.objects.length) {
            group
       .set("top", _clipboard.top + 5)
      .set("left", _clipboard.left + 5)
       .setCoords();

    _canvas
       .setActiveGroup(group)
       .add(group);
    }
  });


}

EDIT: I've had another go and it seems to be working properly now, it seems that with groups it's best to clone the group, and then in the callback go through and add each object to the canvas, and set it as active, as shown below

Fiddle

    _clipboard.clone(function (clonedObj) {
        _canvas.discardActiveGroup();
        clonedObj.set({
            left: clonedObj.left+10,
            top: clonedObj.top+10,
            evented: true
        });

        clonedObj.forEachObject(function(obj){
            obj.set('active', true);
            _canvas.add(obj);
        });

        _canvas.setActiveGroup(clonedObj).renderAll();
    });

Upvotes: 3

Related Questions