Question

Here is a working jsFiddle example.

Basically you enter a number and hit “Add”. A row containing that number of boxes will be generated using Raphael and the viewbox will resize to fit the rows. Add more rows and the viewbox will resize again. This works fine.

My issue is that after I create the boxes, I add a delete object at the end of the row. Clicking this should simply remove the row. This looks like it works fine, except that once I remove a row trying to add a new one will result in the viewbox shrinking with the console message

Unexpected value 10 0 NaN NaN parsing viewBox attribute.

I know the error is coming from the following two lines of code:

var sectionSize = section.getBBox();
paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

where sectionSize.width and .height are NaN, but I don’t know why. Am I not removing the row correctly?

Complete code:

$(window).load(function() {

    var paper = Raphael("container", 600, 500);
    var section = paper.set();
    var rowCount = 0;
    var boxSize = 15;
    var boxPadding = 5;
    var pathString = " m0,0 h" + boxSize + ", v" + boxSize + " h-" + boxSize + " v-" + boxSize + " z";

    $("#add-row").click(function() {
        var row = paper.set();

        for (var i = 0; i < $("#count").val(); i++) {
            var x = ((boxSize + boxPadding) * i) + (boxPadding * 2);
            var y = ((boxSize + boxPadding) * rowCount);

            var transformString = "t" + x + "," + y + ", s1,1,0,0 r0,0,0";

            var box = paper.path(pathString).transform(transformString);
            box.attr({
                fill: "red",
                stroke: "black",
                cursor: "pointer"
            });
            row.push(box);

            if (i == $("#count").val() - 1) {
                var del = paper.text(((box.getBBox().width + x) + boxPadding), ((box.getBBox().height / 2) + y), "x");
                del.click(function() {
                    row.remove();
                });

                row.push(del);
            }
        }

        rowCount++;
        section.push(row);

        // Resize ViewBox
        var sectionSize = section.getBBox();
        paper.setViewBox(sectionSize.x, sectionSize.y, sectionSize.width, sectionSize.height, true);

    });
});

HTML

<input type="text" id="count" value="3" />
<button id="add-row">Add</button>

<div id="container" style="border: 1px solid black;">
</div>

Answer 1

Apparently I wasn’t removing the element properly. I had to remove it from the section set before I removed the element itself, otherwise any call to getBBox would result in the width and height being NaN.

del.click(function() {
  section.splice($.inArray(row, section), 1);
  row.remove();
});