tree generator completed

lnogueir · lnogueir · commit 68f74df6c251 · 2020-03-15T15:55:49.000-04:00
diff --git a/app.css b/app.css
@@ -0,0 +1,32 @@
+body{
+    margin:0;
+}
+
+.input-container{
+    display: flex;
+    justify-content: flex-start;
+    margin: 10px;
+}
+
+.input-container > *{
+    margin-right: 10px;
+}
+
+button{
+    cursor: pointer;
+}
+
+input{
+    padding: 10px;
+    height: 35px;
+    width: 200px;
+}
+
+#canvas-container{
+    height: 100vh;
+    width: 100%;
+}
+
+canvas{
+    border: 1px solid lightgray;
+}
diff --git a/canvas.js b/canvas.js
@@ -0,0 +1,26 @@
+var canvas = document.querySelector('canvas')
+
+canvas.height = document.getElementById('canvas-container').offsetHeight;
+canvas.width = document.getElementById('canvas-container').offsetWidth;
+
+var c = canvas.getContext('2d')
+
+$('#generate-tree').click(() => {
+    var expression = $('#expression-input').val()
+    if (typeof expression !== 'undefined' && null != expression) {
+        expression = expression.replace(/\s+/g, '')
+        expression = expression.toLowerCase()
+        var postfix = infixToPostfix(expression);
+        if (null !== postfix) {
+            var root = constructTree(postfix)
+            setCoordinates(root)
+            c.clearRect(0, 0, canvas.width, canvas.height);
+            drawTree(root, c)
+        } else {
+            alert('Enter valid expression')
+        }
+
+    } else {
+        alert('Enter valid expression')
+    }
+})
diff --git a/index.html b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Canvas</title>
+    <link rel="stylesheet" href="app.css">
+</head>
+
+<body>
+    <div class="input-container">
+        <input id="expression-input" type="text" />
+        <button id="generate-tree">Generate Tree</button>
+    </div>
+    <div id="canvas-container">
+        <canvas></canvas>
+    </div>
+</body>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/6.6.1/math.min.js"></script>
+<script src="tree.js"></script>
+<script src="infixToPostfix.js"></script>
+<script src="canvas.js"></script>
+
+</html>
diff --git a/infixToPostfix.js b/infixToPostfix.js
@@ -0,0 +1,78 @@
+function isBracketed(expr) {
+  var stack = []
+  for (var i = 0; i < expr.length; i++) {
+    if ('(' === expr[i]) {
+      stack.push('(')
+    } else if (')' === expr[i]) {
+      stack.pop()
+      if (stack.length === 0) {
+        if (i !== expr.length - 1) {
+          return false
+        } else {
+          return true
+        }
+      }
+    }
+  }
+  return false;
+}
+
+function isValidExpression(expr) {
+  if (expr.length < 3) {
+    return false;
+  }
+  for (var i = 0; i < expr.length; i++) {
+    if ('abcdefghijklmnopqrstuvwxyz*()/+-'.indexOf(expr[i]) === -1) {
+      return false;
+    }
+  }
+  try {
+    while ("(" === expr[0] && ")" === expr[expr.length - 1]) {
+      if (isBracketed(expr)) {
+        expr = expr.substring(1, expr.length - 1);
+      } else break;
+    }
+    var res = math.parse(expr);
+    if ((typeof res.implicit === 'undefined') || res.fn.indexOf('unary') !== -1) {
+      return false;
+    }
+    return true;
+  }
+  catch (ex) {
+    return false;
+  }
+}
+
+function infixToPostfix(expression) {
+  if (!isValidExpression(expression)) {
+    return null;
+  }
+  const prec = { "*": 3, "/": 3, "-": 2, "+": 2, "(": 1 }
+  op_stack = []
+  postfixList = []
+  tokens = expression.split('')
+  for (const token of tokens) {
+    if ("abcdefghijklmnopqrstuvwxyz".indexOf(token) !== -1) {
+      postfixList.push(token)
+    } else if ("(" === token) {
+      op_stack.push(token)
+    } else if (")" === token) {
+      var top_op_token = op_stack.pop()
+      while (top_op_token !== '(') {
+        postfixList.push(top_op_token)
+        top_op_token = op_stack.pop()
+      }
+    } else {
+      var peek_elem = op_stack.slice(-1)[0];
+      while (op_stack.length > 0 && (prec[peek_elem] >= prec[token])) {
+        postfixList.push(op_stack.pop())
+        peek_elem = op_stack.slice(-1)[0];
+      }
+      op_stack.push(token)
+    }
+  }
+  while (op_stack.length > 0) {
+    postfixList.push(op_stack.pop())
+  }
+  return postfixList
+}
diff --git a/tree.js b/tree.js
@@ -0,0 +1,123 @@
+function Node(value) {
+    const radius = 32.5
+    this.value = value;
+    this.x = null;
+    this.y = null;
+    this.right = null;
+    this.left = null;
+
+    this.isLeaf = () => this.right == null && this.left == null;
+
+    this.drawEdge = function (context, x, y, left_way) {
+        context.strokeStyle = 'gray';
+        context.beginPath()
+        const x_y_ratio = Math.abs(this.y - y) / Math.abs(this.x - x)
+        const w = radius * Math.sqrt(1 / (1 + Math.pow(x_y_ratio, 2)))
+        const d = x_y_ratio * w
+        if (left_way) {
+            context.moveTo(this.x - w, this.y + d)
+            context.lineTo(x + w, y - d)
+        } else {
+            context.moveTo(this.x + w, this.y + d)
+            context.lineTo(x - w, y - d)
+        }
+
+        context.stroke()
+    }
+
+    this.draw = function (context) {
+        context.beginPath()
+        context.arc(this.x, this.y, radius, 0, Math.PI * 2, false)
+        context.fillStyle = 'rgba(255, 255, 255, 0.5)'
+        context.fill()
+        context.strokeStyle = 'black'
+        context.stroke()
+        context.font = '25px Times New Roman'
+        context.textAlign = 'center'
+        context.textBaseline = 'middle'
+        context.fillStyle = "black";
+        context.fillText(this.value, this.x, this.y);
+    }
+}
+
+function constructTree(postfix) {
+    const OPERATORS = ['*', '/', '-', '+']
+    var stack = []
+    var root = null;
+    var current;
+    var shift = false;
+    for (var i = postfix.length - 1; i >= 0; i--) {
+        if (null === root) {
+            current = new Node(postfix[i]);
+            root = current;
+        } else {
+            if (shift) {
+                current.left = new Node(postfix[i])
+                current = current.left
+                shift = false
+            } else {
+                current.right = new Node(postfix[i])
+                current = current.right
+            }
+        }
+        if (OPERATORS.includes(postfix[i])) {
+            stack.push(current);
+        } else {
+            current = stack.pop();
+            shift = true
+        }
+    }
+    return root;
+}
+
+function getSize(root) {
+    var size = 0
+    function countSize(root) {
+        if (null != root) {
+            size++;
+            countSize(root.left)
+            countSize(root.right)
+        }
+    }
+    countSize(root);
+    return size;
+}
+
+function print_coords(root) {
+    if (null != root) {
+        print_coords(root.left)
+        console.log(root.value, root.x, root.y)
+        print_coords(root.right)
+    }
+}
+
+function setCoordinates(root) {
+    var i = 0
+    const OFFSET = 50
+    const size = getSize(root)
+    const canvas_mid_point = window.innerWidth / 2;
+    function setCoordinates(subt, depth) {
+        if (null != subt) {
+            setCoordinates(subt.left, depth + 1)
+            subt.x = canvas_mid_point + (OFFSET * (i - size / 2))
+            subt.y = OFFSET + (depth * 1.5 * OFFSET)
+            i++
+            setCoordinates(subt.right, depth + 1)
+        }
+    }
+    setCoordinates(root, 0)
+}
+
+function drawTree(root, context) {
+    if (null != root) {
+        root.draw(context)
+        if (null != root.left) {
+            root.drawEdge(context, root.left.x, root.left.y, true);
+        }
+        drawTree(root.left, context)
+        if (null != root.right) {
+            root.drawEdge(context, root.right.x, root.right.y, false)
+        }
+        drawTree(root.right, context)
+    }
+}
