Merge pull request #8 from ggorlen/improve-colors

Improve colors
ggorlen · Jun 9, 2023 · 01dffaa · 01dffaa
2 parents 9a050ed + 78da7bc
commit 01dffaa
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -23,8 +23,7 @@ document.body.appendChild(canvas);
 var tree = {val: 1, left: {val: 2}, right: {val: 3}};
 // or: var tree = PrettyBT.treeFromString("[a,b,c,,d]");
 
-var size = 15;
-PrettyBT.drawBinaryTree(canvas, tree, size);
+PrettyBT.drawBinaryTree(canvas, tree, {size: 17});
 
 </script>
 </body>
@@ -36,7 +35,7 @@ PrettyBT.drawBinaryTree(canvas, tree, size);
 <body>
 
 <script src="https://cdn.jsdelivr.net/gh/gliffy/canvas2svg@eaab317/canvas2svg.js"></script>
-<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@8ad0935/js/pbt.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/ggorlen/prettybt@4c885c6/js/pbt.js"></script>
 <script>
 
 var tree = PrettyBT.randomTree();
@@ -68,6 +67,6 @@ const PrettyBT = require("prettybt");
 const canvas = createCanvas();
 const tree = PrettyBT.randomTree();
 PrettyBT.drawBinaryTree(canvas, tree);
-console.log('<img src="' + canvas.toDataURL() + '" />');
+console.log(`<img src="${canvas.toDataURL()}" />`);
 ```
 
diff --git a/css/style.css b/css/style.css
@@ -1,16 +1,31 @@
+:root {
+  --color-bg: #f5f5f5;
+  --color-fg: #252525;
+}
+:root.dark {
+  --color-bg: #252525;
+  --color-fg: #f5f5f5;
+}
+
 * {
   font-family: monospace;
 }
 
 body {
-  margin: 0;
   display: flex;
   flex-direction: column;
-  padding: 1em;
+  align-items: center;
+  padding: 2em;
+  background-color: var(--color-bg);
+  color: var(--color-fg);
 }
 
-div {
-  margin: 0.6em auto;
+a,
+a:link,
+a:visited,
+a:hover,
+a:active {
+  color: var(--color-fg);
 }
 
 canvas {
@@ -28,7 +43,37 @@ canvas {
 input {
   transition: all 0.05s;
   border: 0px;
-  border-bottom: 1px solid black;
+  border-bottom: 1px solid var(--color-fg);;
   outline: 0;
   font-size: 1.1em;
+  background-color: var(--color-bg);
+  accent-color: var(--color-bg);
+  color: var(--color-fg);
+}
+
+.input-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.input-wrapper > * {
+  padding: 0.5em;
+  margin: 0.5em;
+}
+
+@media (max-width: 600px) {
+  body {
+    display: block;
+  }
+
+  .input-wrapper {
+    display: block;
+  }
+  .input-wrapper > * {
+    padding: 0em;
+    margin: 0em;
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
 }
diff --git a/index.html b/index.html
@@ -8,55 +8,79 @@
     <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
-
-    <div>
-      [<a href="https://www.github.com/ggorlen/prettybt">prettybt</a>]
+    <h4><a href="https://www.github.com/ggorlen/prettybt">prettybt</a></h4>
+    <p>
       Enter binary tree as comma-delimited array with<br> `<code>null</code>` for absent
       nodes or <a id="random-tree" href="javascript:void(0);">make a random tree</a>:
-    </div>
-    <div>
-      [<input id="entry">] &nbsp; 
-      size: <input size=2 id="size" value="15"> &nbsp;
-      night: <input id="night" type="checkbox">
+    </p>
+    <div class="input-wrapper">
+      <div><label>[<input id="entry">]</label></div>
+      <div><label>size: <input size="2" id="size" value="17"></label></div>
+      <div><label>night: <input id="night" type="checkbox"></label></div>
     </div>
     <canvas id="tree"></canvas>
 
     <script src="js/pbt.js"></script>
     <script>
-
-(function () { 
+
+(function () {
+  const light = "#f5f5f5";
+  const dark = "#252525";
+
   const clamp = (n, lo=7, hi=40) => Math.min(hi, Math.max(n, lo));
+
+  const drawTree = () => {
+    PrettyBT.drawBinaryTree(treeElem, root, {
+      size: clamp(+sizeElem.value),
+      background: night ? dark : light,
+      nodeColor: night ? dark : light,
+      textColor: night ? light : dark,
+      strokeColor: "#777",
+    });
+  };
+
+  const toggleNight = () =>  {
+    document.documentElement.classList.toggle("dark");
+  };
+
   const sizeElem = document.querySelector("#size");
   const entryElem = document.querySelector("#entry");
   const treeElem = document.querySelector("#tree");
+  const nightElem = document.querySelector("#night");
+  let night = nightElem.checked;
+
+  if (night) {
+    toggleNight();
+  }
+
+  let root = entryElem.value
+    ? PrettyBT.treeFromString(entryElem.value)
+    : PrettyBT.randomTree();
+  entryElem.value =
+    entryElem.value || PrettyBT.arrayFromTree(root).toString();
+  drawTree();
 
-  let root = PrettyBT.randomTree();
-  entryElem.value = PrettyBT.arrayFromTree(root).toString();
-  PrettyBT.drawBinaryTree(treeElem, root);
-
   document.querySelector("#random-tree").addEventListener("click", e => {
     root = PrettyBT.randomTree();
     entryElem.value = PrettyBT.arrayFromTree(root).toString();
-    PrettyBT.drawBinaryTree(treeElem, root, clamp(+sizeElem.value));
+    drawTree();
   });
 
   entryElem.addEventListener("keyup", e => {
     e.target.style.width = Math.max(e.target.value.length, 20) + "ch";
     root = PrettyBT.treeFromString(e.target.value);
-    PrettyBT.drawBinaryTree(treeElem, root, clamp(+sizeElem.value));
+    drawTree();
   });
 
   sizeElem.addEventListener("keyup", e => {
     e.target.style.width = Math.max(e.target.value.length, 2) + "ch";
-    PrettyBT.drawBinaryTree(treeElem, root, clamp(+sizeElem.value));
+    drawTree();
   });
 
-  document.querySelector("#night").addEventListener("click", () => {
-    document.body.style.cssText = document.body.style.cssText ? "" : `
-      -webkit-filter: invert(100%);
-      filter: invert(100%);
-      background-color: black;
-    `;
+  nightElem.addEventListener("click", e => {
+    night = e.target.checked;
+    toggleNight();
+    drawTree();
   });
 })();
 

diff --git a/js/pbt.js b/js/pbt.js
@@ -6,7 +6,7 @@
     this.left = left;
     this.right = right;
   }
-  
+
   function treeHeight(root, height=0) {
     return root ? 1 + Math.max(
       treeHeight(root.left, height), 
@@ -22,28 +22,29 @@
     };
   }
 
-  function drawBinaryTree(
-    canvas, 
-    root, 
-    size=15, 
-    background="rgba(0, 0, 0, 0)"
-  ) {
+  function drawBinaryTree(canvas, root, opts) {
+    var size = opts.size || 15;
+    var background = opts.background || "rgba(0, 0, 0, 0)";
+    var nodeColor = opts.nodeColor || "#fff";
+    var textColor = opts.textColor || "#000";
+    var strokeColor = opts.strokeColor || "#777";
+
     var ctx = canvas.getContext("2d");
     var depth = treeHeight(root);
     var level = [];
     var x = size;
     var y = size * 2;
     var q = [[root, depth, null]];
-  
+
     canvas.width = 2 ** depth * size + size * 2;
     canvas.height = depth * size * 4;
     ctx.fillStyle = background;
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
-    ctx.strokeStyle = "#666";
+    ctx.strokeStyle = strokeColor;
     ctx.lineWidth = 2;
-    
+
     while (depth >= 0) {
       var node = q.shift();
       var currNode = node[0];
@@ -81,13 +82,11 @@
             ctx.beginPath();
             ctx.arc(x + 1, y + 1, size - 2, 0, 2 * Math.PI);
             ctx.stroke();
-            ctx.fillStyle = "#fff";
+            ctx.fillStyle = nodeColor;
             ctx.fill();
-            ctx.fillStyle = "#000";
-            ctx.font = "bold " + 
-              (size - ("" + node.val).length) + 
-              "px Courier New"
-            ;
+            ctx.fillStyle = textColor;
+            var px = size - ("" + node.val).length;
+            ctx.font = "bold " + px + "px monospace";
             ctx.fillText(node.val, x + 1, y + 1);
           }
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "prettybt",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Simple binary tree visualizer",
   "main": "js/pbt.js",
   "scripts": {