Reputation: 23
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
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