新增输出；样式微调

src/assets/js/index.js

@@ -28,7 +28,7 @@ var settings = {
         "stroke": "#e02433",        // 边框颜色
         "fill": "#ffa4ab",          // 填充颜色
         "fill_focus": "#ee737d",    // 填充颜色
-        "text": "blue",             // 文本颜色
+        "text": "#8a0f19",          // 文本颜色
         "text_focus": "white",      // 文本颜色
 
         "red": "#f00",
@@ -37,6 +37,10 @@ var settings = {
     animation: {
         duration: 2000,  // 不带单位，单位是毫秒
         easing: "ease-in-out"
+    },
+    console: {
+        maxLine: 30,
+        consoleList: [], // 输出列表的数组，不要修改
     }
 }
 
@@ -56,23 +60,53 @@ var animation = new VectorAnimation(workSpace)
 
 function initialize() {
     var elementId = "ele8"
-    d3.select("#btn_qucikSort").on("click", function () {
-        // 快速排序算法
-        var sortAlgorithm = new QuickSort(animation)
-        sortAlgorithm.doSortWithAnimation(elementId)
-    })
-    d3.select("#btn_bubbleSort").on("click", function () {
-        // 冒泡排序算法
-        var sortAlgorithm = new BubbleSort(animation)
-        sortAlgorithm.doSortWithAnimation(elementId)
-    })
+
+    let controlDiv = document.getElementById("control-div")
+    var sortClassList = getSortClassList();
+    console.log(sortClassList);
+    var DOMFragment = document.createDocumentFragment()
+    for (let i = 0; i < sortClassList.length; i++) {
+        const sortClass = new sortClassList[i](animation)
+        const sortClassInfo = sortClass.info()
+
+        let ctrlBtn = document.createElement("button")
+        ctrlBtn.innerHTML = sortClassInfo['name']
+        ctrlBtn.onclick = function () {
+            controlDiv.style.display = 'none'
+            d3.select("#console-div").style("display", "")
+            sortClass.doSortWithAnimation(elementId)
+        }
+        DOMFragment.appendChild(ctrlBtn)
+    }
+    controlDiv.appendChild(DOMFragment)
+
+    // 显示 siderbar
+    d3.select("#sidebar").style("display", "")
 }
 
 initialize()
 
 // 临时输出
-function updateConsole(data) {
-    document.getElementById("console-div").innerHTML = data
+function consoleLog(data) {
+    console.log(data)
+    let consoleList = settings.console.consoleList
+    consoleList.push(data)
+    if (consoleList.length > settings.console.maxLine + 1) {
+        consoleList.shift()
+        consoleList[0] = "<small>更早的记录已经被丢掉啦</small>"
+    }
+    let container = document.getElementById("console-logs")
+    container.innerHTML = consoleList.join("<br>")
+    container.scrollTop = container.scrollHeight
+}
+
+function displayCurrentArray(array) {
+    let dom = []
+    for (let index = 0; index < array.length; index++) {
+        const element = array[index];
+        dom.push(`<span style="margin: 0 4px;">${element.toString()}</span>`)
+    }
+    document.getElementById("console-current-array").innerHTML = "当前数组：" + dom.join("&nbsp;")
 }
 
 // 测试