Size of all elements

Since I was tired of waiting for a reply. I coded it by myself. 

Open assets/js/FancyProductDesigner.js (run in debug mode)

 Call a function in this.addView.on("elementAdd"), .on('elementSelect'), .on('elementChange'), .on('elementModify'),  .on('elementRemove')

do your stuff you need in that function and than call: 

var allElements = new Array();

function calcPriceBox(){
        var TL = {x:9999, y:9999}; //not fancy, but works
        var LR = {x:0, y:0};

        allElements.forEach(function(e){
            TL.x = TL.x < e.oCoords.tl.x ? TL.x : e.oCoords.tl.x;
            TL.y = TL.y < e.oCoords.tl.y ? TL.y : e.oCoords.tl.y;
            
            TL.x = TL.x < e.oCoords.tr.x ? TL.x : e.oCoords.tr.x;
            TL.y = TL.y < e.oCoords.tr.y ? TL.y : e.oCoords.tr.y;
            
            TL.x = TL.x < e.oCoords.br.x ? TL.x : e.oCoords.br.x;
            TL.y = TL.y < e.oCoords.br.y ? TL.y : e.oCoords.br.y;
            
            TL.x = TL.x < e.oCoords.bl.x ? TL.x : e.oCoords.bl.x;
            TL.y = TL.y < e.oCoords.bl.y ? TL.y : e.oCoords.bl.y;
            
            
            LR.x = LR.x > e.oCoords.tl.x ? LR.x : e.oCoords.tl.x;
            LR.y = LR.y > e.oCoords.tl.y ? LR.y : e.oCoords.tl.y;
            
            LR.x = LR.x > e.oCoords.tr.x ? LR.x : e.oCoords.tr.x;
            LR.y = LR.y > e.oCoords.tr.y ? LR.y : e.oCoords.tr.y;
            
            LR.x = LR.x > e.oCoords.br.x ? LR.x : e.oCoords.br.x;
            LR.y = LR.y > e.oCoords.br.y ? LR.y : e.oCoords.br.y;
            
            LR.x = LR.x > e.oCoords.bl.x ? LR.x : e.oCoords.bl.x;
            LR.y = LR.y > e.oCoords.bl.y ? LR.y : e.oCoords.bl.y;
        });
        var foilbox = {width:0, height:0, aspect:0} 
        //get this box that contains every element
        foilbox.width = LR.x - TL.x;
        foilbox.height = LR.y - TL.y;
        foilbox.aspect = foilbox.width / foilbox.height;
        return foilbox;
}

  with this function you will get box (in pixels) I made in the post before with my awesome drawing skills.

Of course you need to add every element in an array you can access... I made it dirty and made my own.. IDGAS..

if(action === "elementAdd")
            allElements.push(element);
        else if(action === "elementRemove"){
            allElements.indexOf(element);
            allElements.splice(myFuckingElements.indexOf(element), 1);
        }

I use it like this: (shortened)

 if(allElements.length > 0){
            var priceBox = calcPriceBox();
            foilSize.width = $(".decal .size .length").val(); //real length of the ding you design e.g. 20cm (val: 20)
            foilSize.height = round(foilSize.width / priceBox.aspect,2); //calc the real height of it
            var area = foilSize.width * foilSize.height;
            //calculate a price. maybe with the area, maybe with a crazy mathematical workarounds
}
return price;