Fabric.js: Drawing and grouping vertical lines does not work as expected

[wearehappybits]

This is how I group and ungroup objects with canvas and fabricjs:

    $scope.groupObjects = function($event) {
        var activegroup = canvas.fabric.getActiveGroup();
        var objectsInGroup = activegroup.getObjects();

        activegroup.clone(function(newgroup) {

            console.log("newgroup", newgroup)
            canvas.fabric.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
                canvas.fabric.remove(object);
            });

        canvas.fabric.add(newgroup);

        });
    }


    $scope.ungroupObjects = function($event) {
        var activeObject = canvas.fabric.getActiveObject();
        if (activeObject.type == "group") {
            var items = activeObject._objects;

            activeObject._restoreObjectsState();
            canvas.fabric.remove(activeObject);
            for (var i = 0; i < items.length; i++) {
                console.log(items);
                canvas.fabric.add(items[i]);
                canvas.fabric.item(canvas.fabric.size() - 1).hasControls = true;
            }

            canvas.fabric.renderAll();
        }
    }

The problem is that after I group and ungroup I do not get an exactly same object.

I am missing some key information from the object (borderColor, cornerColor, name) after ungrouping.

How I could maintain this information?

[asturur]

clone use toObject and fromObject. why are you cloning?

please make a fiddle is easier to try and understand.

[wearehappybits]

If I am grouping like this it works as expected:

  $scope.groupObjects = function($event) {
        var activegroup = canvas.fabric.getActiveGroup();
        var objectsInGroup = activegroup.getObjects();

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

          canvas.fabric.discardActiveGroup();

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

        canvas.fabric.add(clone);
    }

Just the selection jumps around - https://www.screencast.com/t/FHu3mn3yGc

The problem with fiddle in this case is that it is too simple in the fiddle and it works in there. My app is much more complex which makes it hard to make a proper fiddle.

[asturur]

if in the fiddle works, is a problem you created in your app.
A failing fiddle is request in the issue template.

screencast.com requires flash player.

[ncou]

For the selection "jumping around" it's surely a missing call to 'setCoords()' function.
Why are you speaking of "custom properties" and you name some not custom properties like 'borderColor' ???
If you check the doc, when cloning you can pass as 2nd parameter, an array with the custom properties you want to keep/clone.

As asturur said, without a fiddle it's hard to help or debug, or keep the issue open.

[wearehappybits]

I actually were able to replicate: http://jsfiddle.net/NuE78/80/
Draw two symbols. With "shift" select them and press on "Group" and selection jumps.

[ncou]

This fiddle is very obsolete. you shouldn't use fabric.util.object.clone (who should be used for cloning html objects) but the .clone() function on the object.

http://jsfiddle.net/NuE78/83/

[wearehappybits]

Well, I actively changed the fiddle from using simple clone to fabric.util.object.clone(activegroup); in the first place.

The reason is that in my project when I clone with your provided solution the object is not completely cloned. I do not get an exactly same object. It is missing some key information. When I clone with fabric.util.object.clone(activegroup); it actually clones as expected, but afterwards I have the issue with "shifting" of selection.

[ncou]

which properties are missing ? i still can't understand your problem.
Can you use my previous jsfiddle and point out which properties are not cloned ?

[wearehappybits]

Really confused regarding this or maybe I am just short in knowledge.

This is one of the objects from selection (canvas.getActiveGroup()): http://imgur.com/a/8Gylo (which is fine)

And this is the same object from a group (from inside selection.clone):

[{
"type": "path",
"originX": "left",
"originY": "top",
"left": 1015.03,
"top": 465.03,
"width": 461.94,
"height": 461.94,
"fill": "rgba(0, 0, 0, 0)",
"stroke": {
"type": "colorpicker",
"current": "#444444",
"displayName": "Color"
},
"strokeWidth": 8,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 1,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"path": [
["M"],
["M", 145.67085809127246, -205.96988312782167],
["L", 280.9698831278217, -70.67085809127245],
["L", 280.9698831278217, 120.67085809127245],
["L", 145.67085809127246, 255.96988312782167],
["L", -45.670858091272436, 255.96988312782167],
["L", -180.96988312782167, 120.67085809127248],
["L", -180.96988312782173, -70.67085809127231],
["L", -45.67085809127238, -205.9698831278217],
["Z"]
],
"pathOffset": {
"x": 49.99999999999997,
"y": 24.99999999999997
}
}, {
"type": "rect",
"originX": "left",
"originY": "top",
"left": 1636,
"top": 605,
"width": 540,
"height": 540,
"fill": "#444444",
"stroke": null,
"strokeWidth": 8,
"strokeDashArray": null,
"strokeLineCap": "butt",
"strokeLineJoin": "miter",
"strokeMiterLimit": 10,
"scaleX": 1,
"scaleY": 0.67,
"angle": 0,
"flipX": false,
"flipY": false,
"opacity": 1,
"shadow": null,
"visible": true,
"clipTo": null,
"backgroundColor": "",
"fillRule": "nonzero",
"globalCompositeOperation": "source-over",
"rx": 0,
"ry": 0
}]

"name" property and more is missing. And this one is a different beast. After I ungroup my app does not understand anymore what kind of element it is.

[asturur]

http://jsfiddle.net/NuE78/84/

this is an updated fiddle. there is no need to clone a selection to make it a group.

Other than that, fabric.util.object.clone is to clone javascript objects, not class instances that contains functions. it will fail cloning elements and functions.

The proper .clone method, does not save all the controls informations, but just the information that are proper of the render. You have an optional arguments where you can pass an array of property you want to additionally save ['hascontrols', 'bordercolor']

[asturur]

i see that trying to draw and group vertical lines is failing hard

[wearehappybits]

With your help I was able to achieve what I wanted. I have upgraded fabric.js to the latest version and also passing an array to clone helped.

Thanks a lot to you! If you are not a millionaire right now, I know that you will be soon. Thanks once more! :)

[asturur]

oh well the bug was on fabricjs 1.3.0.
no reason to keep this open.

[uforiadev]

lol