Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

162 lines (145 sloc) 3.938 kB
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#wrapper {
position: absolute;
top: 30px;
left: 10px;
}
#pack div {
position: absolute;
}
#pack .pack {
border: 1px solid #9C52FF;
}
#pack .empty {
border: 1px solid rgb(220, 220, 220);
}
#pack .infinite {
border-bottom: none;
height: 100px;
}
</style>
</head>
<body>
<div id="stats">
<b>positive</b> <span id="positive">0</span> —
<b>negative</b> <span id="negative">1</span>
</div>
<div id="wrapper">
<div id="pack"></div>
</div>
<script>var module = {};</script>
<script src="boxpack.js"></script>
<script>
var positive = document.getElementById('positive');
var negative = document.getElementById('negative');
function Bin(opts) {
this.width = opts.width;
this.rects = [];
this.empty_rects = [
{x: 0, y: 0, width: this.width, height: Infinity}
];
this.draw();
}
/**
* @param {Rect} rect
* @return {Boolean}
*/
Bin.prototype.pack = function (rect) {
var pack = false;
/* Fit into an empty box */
this.empty_rects.some(function (fit) {
if (boxpack.rectFit(rect, fit)) {
pack = fit;
return true;
}
return false;
});
if (!pack) {
return false;
}
/* Pack new box */
var box = {x: pack.x, y: pack.y, width: rect.width, height: rect.height};
this.rects.push(box);
/* Divide up packed area */
var touched = [];
var untouched = this.empty_rects.filter(function (fit) {
if (!boxpack.intersect(box, fit)) {
return true;
}
touched = touched.concat(boxpack.subtract(box, fit));
return false;
});
var sorted = touched.concat(untouched).sort(boxpack.algo.left);
this.empty_rects = sorted.filter(function (a) {
return sorted.every(function (b) {
return a === b || !boxpack.boxFit(a, b)
});
});
this.draw();
};
Bin.prototype.draw = function () {
var html = '';
positive.innerHTML = this.rects.length;
this.rects.forEach(function (rect) {
html += (
'<div class="pack" style="' +
'left:' + rect.x + 'px;' +
'top:' + rect.y + 'px;' +
'width:' + (rect.width - 2) + 'px;' +
'height:' + (rect.height - 2) + 'px"></div>'
);
});
negative.innerHTML = this.empty_rects.length;
this.empty_rects.forEach(function (rect, index) {
// Remove 2 from width & height for border
if (rect.height === Infinity) {
return html += (
'<div class="empty infinite" style="' +
'left:' + rect.x + 'px;' +
'top:' + rect.y + 'px;' +
'width:' + (rect.width - 2) + 'px;" ' +
'data-sort="' + index + '"></div>'
);
}
html += (
'<div class="empty" style="' +
'left:' + rect.x + 'px;' +
'top:' + rect.y + 'px;' +
'width:' + (rect.width - 2) + 'px;' +
'height:' + (rect.height - 2) + 'px" ' +
'data-sort="' + index + '"></div>'
);
});
document.getElementById('pack').innerHTML = html;
};
var bin = new Bin({width: 640});
var counter = 0;
var boxes = [];
for (var i = 0; i < 100; i += 1) {
boxes.push({
width: 10 + Math.floor(Math.random() * 90),
height: 10 + Math.floor(Math.random() * 90)
});
}
boxes.sort(function (a, b) {
//return (b.width * b.height) - (a.width * a.height);
var sort = b.width - a.width;
if (sort !== 0) {
return sort;
}
return a.height - b.height;
});
(function next() {
counter += 1;
if (counter === boxes.length) {
return;
}
bin.pack(boxes[counter]);
setTimeout(next, 5);
}());
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.