CODEWITHSUNDEEP
fabricjs
jchancel
jchancel

Reputation: 37

FabricJS - Set zorder on adding item / group

I'm trying to add a group of items to the canvas, but want the group to be set at the bottom of the zorder stack when it gets added. Heres the code I'm trying to do:

    //Reload the SVG now
    var site_url =  "/components/<?=$designObj->svg_filename?>";
    fabric.loadSVGFromURL(site_url, function(objects, options) {
        let componentObj = fabric.util.groupSVGElements(objects, options);
        componentObj.setControlVisible(false);
        componentObj.sendToBack();   //THIS DOESNT WORK - THROWS TYPE ERROR
        componentObj.selectable = false;
        componentObj.jdeation_comp_id = "base";
        componentObj.jdeation_base_svg = "<?=$designObj->svg_filename?>";
        canvas.add(componentObj).renderAll();
    });

I get the following error when I call sendToBack():

TypeError: Cannot read property 'sendToBack' of undefined

Not sure I totally understand whats happening here, appears that sendToBack expects the type to be something other than group or something. Is there a better way to do this?

Upvotes: 0

Views: 134

Answers (1)

melchiar
melchiar

Reputation: 2862

You can't .sendToBack() on an object that hasn't been added to the canvas yet. Use canvas.insertAt(componentObj, 0) instead of canvas.add(componentObj) to specify that the object should be added to the bottom of the stack.

Upvotes: 1

Related Questions