WIP: 树的可视化

Author: lucifer

package-lock.json

@@ -9,9 +9,11 @@ import ProblemDetail from "./Detail";
 import TagOrLink from "./TagOrLink";
 import tempaltes from "./codeTemplates/index";
 import Codes from "./codes";
-
+import { bfs } from "./utils";
+import drawTree from "canvas-binary-tree";
 import "antd/dist/antd.css";
 import "./App.css";
+import { data as a } from "./db/binary-tree";
 
 const { problems } = db;
 const { TabPane } = Tabs;
@@ -64,8 +66,6 @@ const columns = [
   },
 ];
 
-const pages = ["allSolutions", "templates", "detail"];
-
 function App() {
   // eslint-disable-next-line
   chrome.tabs &&
@@ -89,8 +89,33 @@ function App() {
 
   if (!inLeetCode) return window.open(LEETCODE_CN_URL + "/problemset/all/");
 
+  // setTimeout(() => {
+  //   const canvas = document.querySelector("#canvas");
+
+  //   drawTree(canvas, bfs([1, 2, 2, 3, 1, 2, 2, 323213213232329]));
+  // }, 1000);
+  console.log(a);
+
   return (
     <div className="container">
+      <div
+        className="tree-vis"
+        style={{
+          position: "fixed",
+          zIndex: 99,
+          top: 0,
+          bottom: 0,
+          left: 0,
+          right: 0,
+          backgroundColor: "rgba(0,0,0,.4)",
+        }}
+      >
+        <div>
+          <pre>{a}</pre>
+        </div>
+        <canvas width="1000" height="1000" id="canvas"></canvas>
+      </div>
+
       <div>
         <div className="guide">
           {page !== "" ? (

src/App.js

@@ -1,7 +1,6 @@
 import React, { Fragment } from "react";
-import { Button, Tabs, Collapse, message } from "antd";
-import marked from "marked";
-import hljs from "highlight.js";
+import { Button, Tabs, Collapse } from "antd";
+
 import "highlight.js/styles/github.css";
 
 import {
@@ -10,15 +9,13 @@ import {
   CONTRIBUTE_COMPANY_URL,
 } from "./constant/index";
 import db from "./db/db";
-import { copy } from "./utils";
+
 import Codes from "./codes";
 import TagOrLink from "./TagOrLink";
 
 const { TabPane } = Tabs;
 const { Panel } = Collapse;
 
-const formatCodeToMarkDown = (code, lang) => `\`\`\`${lang}\n${code}\`\`\`\n`;
-
 const { problems, company } = db;
 
 export default function Detail({ problemId }) {

src/Detail.jsx

@@ -0,0 +1,110 @@
+const minHeapCode = `
+class MinHeap {
+
+    constructor () {
+        /* Initialing the array heap and adding a dummy element at index 0 */
+        this.heap = [null]
+    }
+
+    getMin () {
+        /* Accessing the min element at index 1 in the heap array */
+        return this.heap[1]
+    }
+    
+    insert (node) {
+
+        /* Inserting the new node at the end of the heap array */
+        this.heap.push(node)
+
+        /* Finding the correct position for the new node */
+
+        if (this.heap.length > 1) {
+            let current = this.heap.length - 1
+
+            /* Traversing up the parent node until the current node (current) is greater than the parent (current/2)*/
+            while (current > 1 && this.heap[Math.floor(current/2)] > this.heap[current]) {
+
+                /* Swapping the two nodes by using the ES6 destructuring syntax*/
+                [this.heap[Math.floor(current/2)], this.heap[current]] = [this.heap[current], this.heap[Math.floor(current/2)]]
+                current = Math.floor(current/2)
+            }
+        }
+    }
+    
+    remove() {
+        /* Smallest element is at the index 1 in the heap array */
+        let smallest = this.heap[1]
+
+        /* When there are more than two elements in the array, we put the right most element at the first position
+            and start comparing nodes with the child nodes
+        */
+        if (this.heap.length > 2) {
+            this.heap[1] = this.heap[this.heap.length-1]
+            this.heap.splice(this.heap.length - 1)
+
+            if (this.heap.length === 3) {
+                if (this.heap[1] > this.heap[2]) {
+                    [this.heap[1], this.heap[2]] = [this.heap[2], this.heap[1]]
+                }
+                return smallest
+            }
+
+            let current = 1
+            let leftChildIndex = current * 2
+            let rightChildIndex = current * 2 + 1
+
+            while (this.heap[leftChildIndex] &&
+                    this.heap[rightChildIndex] &&
+                    (this.heap[current] > this.heap[leftChildIndex] ||
+                        this.heap[current] > this.heap[rightChildIndex])) {
+                if (this.heap[leftChildIndex] < this.heap[rightChildIndex]) {
+                    [this.heap[current], this.heap[leftChildIndex]] = [this.heap[leftChildIndex], this.heap[current]]
+                    current = leftChildIndex
+                } else {
+                    [this.heap[current], this.heap[rightChildIndex]] = [this.heap[rightChildIndex], this.heap[current]]
+                    current = rightChildIndex
+                }
+
+                leftChildIndex = current * 2
+                rightChildIndex = current * 2 + 1
+            }
+        }
+
+        /* If there are only two elements in the array, we directly splice out the first element */
+
+        else if (this.heap.length === 2) {
+            this.heap.splice(1, 1)
+        } else {
+            return null
+        }
+
+        return smallest
+    }
+    /**
+     * Your MinHeap object will be instantiated and called as such:
+     * var obj = new MinHeap()
+     * obj.insert(1)
+     * obj.insert(2)
+     * obj.getMin() // will return 1
+     * obj.remove() // remove 1
+     * obj.getMin() // will return 2
+     */ 
+}
+`;
+
+module.exports = {
+  title: "堆",
+  list: [
+    {
+      text: "标准堆",
+      problems: [],
+      codes: [
+        {
+          language: "js",
+          text: minHeapCode,
+        },
+      ],
+    },
+  ],
+  link: "",
+};

src/codeTemplates/heap.js

@@ -4,5 +4,6 @@ import uf from "./uf";
 import bfs from "./bfs";
 import trie from "./trie";
 import slidingWindow from "./sliding-window";
+// import heap from "./heap";
 // bfs , sliding window, trie， uf
 export default [binarySearch, bfs, slidingWindow, backtrack, trie, uf];

src/codeTemplates/index.js

@@ -0,0 +1,41 @@
+module.exports = {
+  data: String.raw`  
+                     3
+                    / \
+                   9  20
+                      / \
+                     /   \
+                    /     \
+                   /       \
+                  /         \
+                 /           \
+                /             \
+               /               \
+              /                 \
+             /                   \
+            15                    7
+           / \                   /
+          /   \                 20
+         /     \               / \
+        3       9             /   \
+         \     / \           9    20
+         15   /   \         /       \
+             /     \       20       15
+            /       \     / \       /
+           /         \   3   9     20
+          /           \
+         /             \
+        7               3
+       / \             / \
+      /   \           3   9
+     /     \             / \
+    15      7           /   \
+   / \     / \         /     \
+  /   \   9  20       /       \
+ /     \             /         \
+7       3   153232312323123213  7
+ \     /
+ 15   7
+
+    `,
+};

src/db/binary-tree.js

@@ -1,3 +1,42 @@
+function TreeNode(value) {
+  return {
+    left: null,
+    right: null,
+    value,
+  };
+}
+
+export function bfs(nodes) {
+  if (nodes.length === 0 || nodes[0] === "null") return null;
+  const root = TreeNode(nodes[0]);
+  const q = [root];
+  let i = 0;
+
+  while (q.length > 0 && i < nodes.length - 1) {
+    const cur = q.shift();
+
+    const l = TreeNode(nodes[i + 1]);
+    if (l.value !== "null") {
+      q.push(l);
+      cur.left = l;
+    }
+
+    if (i < nodes.length - 2) {
+      const r = TreeNode(nodes[i + 2]);
+
+      if (r.value !== "null") {
+        q.push(r);
+        cur.right = r;
+      }
+    }
+
+    i += 2;
+  }
+  console.log(root);
+  return {
+    root,
+  };
+}
 export function copy(text, cb) {
   //Create a textbox field where we can insert text to.
   var copyFrom = document.createElement("textarea");