Need Help!

[aminshuzo]

Hey thanks for this wonderful piece of work,
I am using 2d bin package as dashboard, i want to make it drill down, would you please help me out, how could i add click event on every boxes?

Thanks.

[rmkane]

You would have to store the x, y, width, and height of every box and use a collision detection algorithm.

[aminshuzo]

I have that values stored and a key which is unique identifier is also there, I am having issues with collision detection algorithm!!

I want to identify uniquely each rectangles.
If you can help me i will be thankful.

Thanks

[rmkane]

@aminshuzo If you add the following code to the demo, you can listen for click events and check which box was clicked on.

demo.js

Demo = {
  // ...

  run: function() {
    // ...

    $(Demo.el.canvas).click(function(e) {
      var x = e.offsetX;
      var y = e.offsetY;

      for (var i = 0; i < blocks.length; i++) {
        var b = blocks[i];

        if (Demo.inBounds(b, x, y)) {
          alert('Found block at: (' + b.fit.x + ',' + b.fit.y + ') - ' + b.w + 'x' + b.h);
          break;
        }
      }
    });
  },

  inBounds: function(block, x, y) {
    var x1 = block.fit.x;
    var y1 = block.fit.y;
    var x2 = x1 + block.w;
    var y2 = y1 + block.h;

    return x >= x1 && x <= x2 && y >= y1 && y <= y2;
  },

  // ...
};

[aminshuzo]

Ryankane, I am still facing the same issue please help me out to find some way out.

According to your code, few of the boxes are clickable and few of them are not.
What i have done so far is below have a look on the code.

run: function () {
var blocks = Demo.blocks.deserialize(Demo.el.blocks.val());
var packer = Demo.packer();

    Demo.sort.now(blocks);

    packer.fit(blocks);

    Demo.canvas.reset(packer.root.w, packer.root.h);
    Demo.canvas.blocks(blocks);
    Demo.canvas.boundary(packer.root);
    Demo.report(blocks, packer.root.w, packer.root.h);
    console.log(blocks);
    $(Demo.el.canvas).click(function (e) {
        console.log(e);
        var x = e.offsetX;
        var y = e.offsetY;
        console.log(blocks);
        for (var i = 0; i < blocks.length; i++) {
            var block = blocks[i];
            if (Demo.inBounds(block, x, y)) {
                alert(block.k); // block.k contains unique identifier of box.
                break;
            }

        }
    });
},

inBounds: function (block, x, y) {
    var x1 = block.fit.x;
    var y1 = block.fit.y;
    var x2 = x1 + block.w;
    var y2 = y1 + block.h;
    //console.log(x >= x1 && x <= x2 && y >= y1 && y <= y2);
    return x >= x1 && x <= x2 && y >= y1 && y <= y2;
},