Andreas Hocevar
108 lines
2.6 KiB
HTML
108 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
|
|
|
Use of this source code is governed by the Apache License, Version 2.0.
|
|
See the COPYING file for details.
|
|
-->
|
|
<head>
|
|
<title>QuadTree Demo</title>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.structs');
|
|
goog.require('goog.events');
|
|
goog.require('goog.structs.QuadTree');
|
|
</script>
|
|
<style>
|
|
.region {
|
|
position: absolute;
|
|
-moz-outline: 1px solid #CCC;
|
|
outline: 1px solid #CCC;
|
|
z-index: 500;
|
|
}
|
|
.point {
|
|
position: absolute;
|
|
background-color: red;
|
|
width: 4px;
|
|
height: 4px;
|
|
z-index: 1000;
|
|
}
|
|
#el {
|
|
width: 500px;
|
|
height: 500px;
|
|
background-color: #FCFCFC;
|
|
}
|
|
#values {
|
|
font-size: small;
|
|
}
|
|
#info {
|
|
position: absolute;
|
|
top: 5px;
|
|
left: 505px;
|
|
width: 200px;
|
|
font: normal 11px verdana;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="el"></div>
|
|
<div id="info">
|
|
<p>Click on the area to the left to add a point to the quadtree, clicking on
|
|
a point will remove it from the tree.</p>
|
|
<pre id="values"></pre>
|
|
</div>
|
|
<script>
|
|
|
|
function visualize(node) {
|
|
var div = document.createElement('div');
|
|
div.className = 'region';
|
|
div.style.top = node.y + 'px';
|
|
div.style.left = node.x + 'px';
|
|
div.style.width = node.w+ 'px';
|
|
div.style.height = node.h + 'px';
|
|
if (node.nodeType == goog.structs.QuadTree.NodeType.POINTER) {
|
|
visualize(node.nw, div);
|
|
visualize(node.ne, div);
|
|
visualize(node.sw, div);
|
|
visualize(node.se, div);
|
|
} else if (node.nodeType == goog.structs.QuadTree.NodeType.LEAF) {
|
|
var point = document.createElement('div');
|
|
point.className = 'point';
|
|
point.style.top = (node.point.y - 2) + 'px';
|
|
point.style.left = (node.point.x - 2) + 'px'
|
|
point.text = node.point.value;
|
|
point.point = node.point;
|
|
document.getElementById('el').appendChild(point);
|
|
}
|
|
document.getElementById('el').appendChild(div);
|
|
|
|
var values = ['Values:'];
|
|
qt.forEach(function(value, coord) {
|
|
values.push(coord + ' ' + value);
|
|
});
|
|
document.getElementById('values').innerHTML = values.join('\n');
|
|
}
|
|
|
|
var maxW = 500, maxH = 500;
|
|
|
|
var qt = new goog.structs.QuadTree(0, 0, maxW, maxH);
|
|
visualize(qt.getRootNode());
|
|
|
|
goog.events.listen(document.body, 'click', function(e) {
|
|
if (e.target.className == 'point') {
|
|
qt.remove(e.target.point.x, e.target.point.y);
|
|
} else {
|
|
var x = e.clientX;
|
|
var y = e.clientY;
|
|
if (x < maxW && y < maxH) qt.set(x, y, new Date().toLocaleString());
|
|
}
|
|
var el = document.getElementById('el');
|
|
el.innerHTML = '';
|
|
visualize(qt.getRootNode());
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|