CODEWITHSUNDEEP
javascriptfabricjs
WillemStaels
WillemStaels

Reputation: 23

Unable to ungroup with Fabric JS

Kind of new to FabricJS but looks like I'm either seriously messing things up or it's not possible to ungroup like I need it to do.

Created a Fiddle right here:

// Init canvas
var canvas = new fabric.Canvas('c');

// Create array of circles

var circlesCollection = [];

for (i = 0; i < 10; i++) {
  var circle = new fabric.Circle({
    radius: 10,
    fill: 'red',
    left: 25 * i,
    originX: "left"
  });
  circlesCollection.push(circle);
}

// Create group and add the group to the canvas
var circleGroup = new fabric.Group(circlesCollection, {
  left: 100,
  top: 100
});

canvas.add(circleGroup);

function unGroup() {
  //Ungroup and add back to canvas
  var items = circleGroup.getObjects();
  canvas.remove(circleGroup);

  var width = circleGroup.getWidth();
  var height = circleGroup.getHeight();

  for (var i = 0; i < items.length; i++) {
    var left = circleGroup.getLeft() + items[i].getLeft() + (width / 2);
    var top = circleGroup.getTop() + items[i].getTop() + (height / 2);
    items[i].setLeft(left);
    items[i].setTop(top);
    items[i].hasControls = true;
    canvas.add(items[i]);
  }

  canvas.renderAll();
}
canvas {
  border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<button onclick="unGroup()">Ungroup now</button>
<canvas id="c" width="600" height="600"></canvas>

External link: https://jsfiddle.net/WillemStaels/w9j3qwg0/3/

What the Fiddle does:

= actually a basic ungrouping function

Now what happens is that the objects after added back to the canvas without a group are not showing controls when selected AND after deselecting they become invisible on the canvas. After resizing (handles are there but not visible) it seems to fix the problem.

Been breaking my head over this over the last few hours so any feedback or help would be welcome!

Upvotes: 2

Views: 1541

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14741

You are missing just group.destroy Destroy is gonna reset the object to the natural canvas coordinates when you are about to remove a group.

This snippet also made evidence of a small bug, an object pulled out from a group needs a manual reset of the dirty property, while this should not happen. This needs a fix.

// Init canvas
var canvas = new fabric.Canvas('c');

// Create array of circles

var circlesCollection = [];

for (i = 0; i < 10; i++) {
  var circle = new fabric.Circle({
    radius: 10,
    fill: 'red',
    left: 25 * i,
    originX: "left"
  });
  circlesCollection.push(circle);
}

// Create group and add the group to the canvas
var circleGroup = new fabric.Group(circlesCollection, {
  left: 100,
  top: 100
});

canvas.add(circleGroup);

function unGroup() {
  //Ungroup and add back to canvas
  var items = circleGroup.getObjects();
  circleGroup.destroy();
  canvas.remove(circleGroup);
  items.forEach(function(item) {
    item.set('dirty', true);
  })
  canvas.add.apply(canvas, items);
  canvas.renderAll();
}
canvas {
  border: 1px solid #999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<button onclick="unGroup()">Ungroup now</button>
<canvas id="c" width="600" height="600"></canvas>

Upvotes: 4

Related Questions