francis
/
amber
forked from amber/amber


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
							<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CodeMirror: B-Tree visualization</title>
    <link rel="stylesheet" href="../lib/codemirror.css">
    <script src="../lib/codemirror.js"></script>
    <link rel="stylesheet" href="../doc/docs.css">

    <style type="text/css">
      .lineblock { display: inline-block; margin: 1px; height: 5px; }
      .CodeMirror {border: 1px solid #aaa; height: 400px}
    </style>
  </head>
  <body>
    <h1>CodeMirror: B-Tree visualization</h1>

    <p>Shows a visual representation of the b-tree that CodeMirror
    uses to store its document. See
    the <a href="http://marijnhaverbeke.nl/blog/codemirror-line-tree.html">corresponding
    blog post</a> for a description of this format. The gray blocks
    under each leaf show the lines it holds (with their width
    representing the line height). Add and remove content to see how
    the nodes are split and merged to keep the tree balanced.</p>

    <div style="position: relative">
      <div style="width: 60%; display: inline-block; vertical-align: top">
        <form><textarea id="code" name="code">type here, see a summary of the document b-tree to the right</textarea></form>
      </div>
      <div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
    </div>

    <script id="me">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  lineWrapping: true
});
var updateTimeout;
editor.on("change", function(cm) {
  clearTimeout(updateTimeout);
  updateTimeout = setTimeout(updateVisual, 200);
});
updateVisual();

function updateVisual() {
  var out = document.getElementById("output");
  out.innerHTML = "";

  function drawTree(out, node) {
    if (node.lines) {
      out.appendChild(document.createElement("div")).innerHTML =
        "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
      var lines = out.appendChild(document.createElement("div"));
      lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
      for (var i = 0; i < node.lines.length; ++i) {
        var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
        lineElt.className = "lineblock";
        var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
        if (col.length == 1) col = "0" + col;
        lineElt.style.background = "#" + col + col + col;
                          console.log(line.height, line);
        lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
      }
    } else {
      out.appendChild(document.createElement("div")).innerHTML =
        "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
      var sub = out.appendChild(document.createElement("div"));
      sub.style.paddingLeft = "20px";
      for (var i = 0; i < node.children.length; ++i)
        drawTree(sub, node.children[i]);
    }
  }
  drawTree(out, editor.getDoc());
}

function fillEditor() {
  var sc = document.getElementById("me");
  var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
  doc += doc; doc += doc; doc += doc; doc += doc; doc += doc; doc += doc;
  editor.setValue(doc);
}
    </script>

<p><button onclick="fillEditor()">Add a lot of content</button></p>

  </body>
</html>