Finish SplayTree.

Author: hwc0919

README.md

@@ -14,15 +14,27 @@ No compatibility testing. Functions are only guaranteed in Chrome.
 [@B5DX](https://github.com/B5DX),
 [@lijingwei233](https://github.com/lijingwei233),
 [@baijiangying](https://github.com/baijiangying),
-等同学对调试的帮助的建议
+等同学对调试的帮助和建议
 
 ## Objective
-I create this project for the purpose of helping those who are learning BBST in Data Structure course.
-My plan is to build a playground for various kind of trees, including ordinary BinTree, BST, AVLTree, SplayTree, BTree, RedBlackTree...
-In this playground, user can build trees freely as they wish, and see the changes in structure simultaneously as they operate on them.
-In order to achieve this, I will fulfill most of the ADT interface of those trees.
+本项目旨在帮助学习数据结构课程搜索树相关章节的同学(在此强烈推荐清华大学邓俊辉老师的数据结构课, 可在[学堂在线](https://next.xuetangx.com/)免费学习).
+
+项目计划建造一个"树游乐场", 包括一般二叉树, BST, AVL, Splay, RedBlack等等...
+
+在此用户可以随意的构建树形结构, 动态的插入、删除、搜索节点，以及进行节点的遍历.
+
+所有操作都是动态的、实时视觉反馈的.
+
 
 ## Some detail
-This project is designed for user to run locally. It is written in html5, typescript and vue.js.
-Since I'm just an rookie in these things, my work may seem like a rag to you. I will try hard to improve this.
-If you want to help, tell me!
+本项目使用html5, typescript, vue.js实现, 并用webpack打包. 项目入口为一个html文件, 可直接在本地运行.
+
+为实现动态性, 使用了很多异步代码, 代码的可读性收到一些影响.
+
+本人为前端新手, 对浏览器兼容性束手无策, 优化移动端界面也尚未提上日程, 应该在所有功能性代码完成之后考虑. 
+
+如果你发现了bug, 请在Issue里提出, 十分感谢.
+
+如果你想帮助我提升前端兼容性, 欢迎随时联系我!
+
+别忘了给Star哟

dist/TreePlayground.html

@@ -21,8 +21,8 @@
             <button class="btn btn-primary top-toolbar-item" type="button" @click="traversal(2)">后序遍历</button>
             <button class="btn btn-primary top-toolbar-item" type="button" @click="traversal(3)">层次遍历</button>
             <div id="trav-intrvl-ranger" class="top-toolbar-item">
-                <h4 style="margin: 5px">遍历间隔: <label v-text="trvlParams.interval + 'ms'">500ms</label></h4>
-                <input type="range" min="100" max="1500" value="500" step="100" v-model.number="trvlParams.interval">
+                <h4 style="margin: 5px">遍历间隔: <label v-text="commonParams.interval + 'ms'">500ms</label></h4>
+                <input type="range" min="100" max="1500" value="500" step="100" v-model.number="commonParams.interval">
             </div>
         </div>
         <!-- Left Toolbar -->
@@ -52,8 +52,8 @@ <h4>Scale: <label v-text="commonParams.treeScale + '%'"></h4>
                 @remove-one="onRemoveOne" @intr-update="onIntrUpdate">
             </binnode>
             <!-- External Tree Nodes -->
-            <extr-binnode v-for="(node, ind) in structInfo.extrNodes" :node="node" :key="'extNode' + ind"
-                @extr-insert="onExtrInsert">
+            <extr-binnode v-show="showExtr" v-for="(node, ind) in structInfo.extrNodes" :node="node"
+                :key="'extNode' + ind" @extr-insert="onExtrInsert">
             </extr-binnode>
             <!-- Internal Tree Edges -->
             <div class="left-edge" v-for="e in structInfo.edges[0]"
@@ -62,9 +62,9 @@ <h4>Scale: <label v-text="commonParams.treeScale + '%'"></h4>
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
 
             <!-- External Tree Edges -->
-            <div class="left-edge extr-edge" v-for="e in structInfo.extrEdges[0]"
+            <div v-show="showExtr" class="left-edge extr-edge" v-for="e in structInfo.extrEdges[0]"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
-            <div class="right-edge extr-edge" v-for="e in structInfo.extrEdges[1]"
+            <div v-show="showExtr" class="right-edge extr-edge" v-for="e in structInfo.extrEdges[1]"
                 :style="{'left': e[0]+'px', 'top': e[1]+'px', 'width': e[2]+'px', 'height': e[3]+'px'}"></div>
         </div>
     </div>