third-party/codemirror-3.15/demo/btree.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <meta charset="utf-8">
   5     <title>CodeMirror: B-Tree visualization</title>
   6     <link rel="stylesheet" href="../lib/codemirror.css">
   7     <script src="../lib/codemirror.js"></script>
   8     <link rel="stylesheet" href="../doc/docs.css">
   9
  10     <style type="text/css">
  11       .lineblock { display: inline-block; margin: 1px; height: 5px; }
  12       .CodeMirror {border: 1px solid #aaa; height: 400px}
  13     </style>
  14   </head>
  15   <body>
  16     <h1>CodeMirror: B-Tree visualization</h1>
  17
  18     <p>Shows a visual representation of the b-tree that CodeMirror
  19     uses to store its document. See
  20     the <a href="http://marijnhaverbeke.nl/blog/codemirror-line-tree.html">corresponding
  21     blog post</a> for a description of this format. The gray blocks
  22     under each leaf show the lines it holds (with their width
  23     representing the line height). Add and remove content to see how
  24     the nodes are split and merged to keep the tree balanced.</p>
  25
  26     <div style="position: relative">
  27       <div style="width: 60%; display: inline-block; vertical-align: top">
  28         <form><textarea id="code" name="code">type here, see a summary of the document b-tree to the right</textarea></form>
  29       </div>
  30       <div style="display: inline-block; height: 402px; overflow-y: auto" id="output"></div>
  31     </div>
  32
  33     <script id="me">
  34 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  35   lineNumbers: true,
  36   lineWrapping: true
  37 });
  38 var updateTimeout;
  39 editor.on("change", function(cm) {
  40   clearTimeout(updateTimeout);
  41   updateTimeout = setTimeout(updateVisual, 200);
  42 });
  43 updateVisual();
  44
  45 function updateVisual() {
  46   var out = document.getElementById("output");
  47   out.innerHTML = "";
  48
  49   function drawTree(out, node) {
  50     if (node.lines) {
  51       out.appendChild(document.createElement("div")).innerHTML =
  52         "<b>leaf</b>: " + node.lines.length + " lines, " + Math.round(node.height) + " px";
  53       var lines = out.appendChild(document.createElement("div"));
  54       lines.style.lineHeight = "6px"; lines.style.marginLeft = "10px";
  55       for (var i = 0; i < node.lines.length; ++i) {
  56         var line = node.lines[i], lineElt = lines.appendChild(document.createElement("div"));
  57         lineElt.className = "lineblock";
  58         var gray = Math.min(line.text.length * 3, 230), col = gray.toString(16);
  59         if (col.length == 1) col = "0" + col;
  60         lineElt.style.background = "#" + col + col + col;
  61                           console.log(line.height, line);
  62         lineElt.style.width = Math.max(Math.round(line.height / 3), 1) + "px";
  63       }
  64     } else {
  65       out.appendChild(document.createElement("div")).innerHTML =
  66         "<b>node</b>: " + node.size + " lines, " + Math.round(node.height) + " px";
  67       var sub = out.appendChild(document.createElement("div"));
  68       sub.style.paddingLeft = "20px";
  69       for (var i = 0; i < node.children.length; ++i)
  70         drawTree(sub, node.children[i]);
  71     }
  72   }
  73   drawTree(out, editor.getDoc());
  74 }
  75
  76 function fillEditor() {
  77   var sc = document.getElementById("me");
  78   var doc = (sc.textContent || sc.innerText || sc.innerHTML).replace(/^\s*/, "") + "\n";
  79   doc += doc; doc += doc; doc += doc; doc += doc; doc += doc; doc += doc;
  80   editor.setValue(doc);
  81 }
  82     </script>
  83
  84 <p><button onclick="fillEditor()">Add a lot of content</button></p>
  85
  86   </body>
  87 </html>