新增输出；样式微调

src/assets/css/index.css

@@ -18,3 +18,19 @@ body,
   /* width: 700px; */
   /* height: 350px; */
 }
+
+#sidebar {
+  display: grid;
+  place-items: center;
+}
+
+#console-logs {
+  margin: 0 auto;
+  padding: 0 15px;
+  height: 100px;
+  width: 300px;
+  background-color: #cccccc;
+  overflow-y: overlay;
+  border-radius: 12px;
+  user-select: none;
+}

src/assets/js/algorithm/sort.js

@@ -4,6 +4,14 @@
  * @author  coder-xiaomo
  * @date    2022-05-16
  */
+
+function getSortClassList() {
+    return [
+        QuickSort,
+        BubbleSort
+    ]
+}
+
 class Sort {
     static animation = null
     constructor(animation) {

src/assets/js/class.js

@@ -163,6 +163,7 @@ class Shape {
             oneUnit: oneUnit,
             gsapTimeline: gsap.timeline({
                 onComplete: function () {
+                    consoleLog(`排序完成`)
                     console.log("all done")
                     // this.seek(0)
                 }
@@ -283,6 +284,11 @@ class VectorAnimation {
 
         var that = this
         let timeline = gsap.timeline({
+            onStart: function () {
+                displayCurrentArray(customAttr.nodes)
+
+                consoleLog(`交换索引为 ${fromIndex} 和 ${toIndex} 的两个元素`)
+            },
             onComplete: function () {
                 // 交换DOM元素中的值
                 that.swapElementInnerHTML(from.childNodes[1], to.childNodes[1])
@@ -294,9 +300,9 @@ class VectorAnimation {
                 customAttr.nodes[toIndex] = tmp
 
                 // console.log(customAttr.nodes)
-                updateConsole("当前数组为：" + customAttr.nodes.toString().replaceAll(",", ",   "))
+                displayCurrentArray(customAttr.nodes)
 
-                console.log("done")
+                console.log("animation done (swap)")
             }
         }).add([
             gsap.to(from.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
@@ -324,8 +330,15 @@ class VectorAnimation {
         customAttr.gsapTimeline.add(timeline)
     }
 
+    // 比较数组元素
+    compareLinkedListItems(id, index1, index2) {
+        highlightLinkedListItems(id, [index1, index2], function () {
+            consoleLog(`比较索引为 ${index1} 和 ${index2} 的两个元素`)
+        })
+    }
+
     // 高亮数组元素
-    highlightLinkedListItems(id, indexList) {
+    highlightLinkedListItems(id, indexList, onStartCallback) {
         let linkedList = document.getElementById(id)
         let customAttr = linkedList.customAttr
         var gList = linkedList.childNodes
@@ -348,6 +361,12 @@ class VectorAnimation {
         }
 
         let timeline = gsap.timeline({
+            onStart: function () {
+                displayCurrentArray(customAttr.nodes)
+
+                if (onStartCallback)
+                    onStartCallback()
+            },
             onComplete: function () {
                 console.log("hightlight done")
             }

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 () {
+
-        // 快速排序算法
+    let controlDiv = document.getElementById("control-div")
-        var sortAlgorithm = new QuickSort(animation)
+    var sortClassList = getSortClassList();
-        sortAlgorithm.doSortWithAnimation(elementId)
+    console.log(sortClassList);
-    })
+    var DOMFragment = document.createDocumentFragment()
-    d3.select("#btn_bubbleSort").on("click", function () {
+    for (let i = 0; i < sortClassList.length; i++) {
-        // 冒泡排序算法
+        const sortClass = new sortClassList[i](animation)
-        var sortAlgorithm = new BubbleSort(animation)
+        const sortClassInfo = sortClass.info()
-        sortAlgorithm.doSortWithAnimation(elementId)
+
-    })
+        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) {
+function consoleLog(data) {
-    document.getElementById("console-div").innerHTML = 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;")
 }
 
 // 测试

src/index.html

@@ -8,8 +8,8 @@
     <title>小墨 | 算法可视化 | Algorithm Visualization</title>
 
     <!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
-    <!-- <link rel="stylesheet" href="./assets/css/index.css"> -->
+    <link rel="stylesheet" href="./assets/css/index.css">
-    <!-- <link rel="stylesheet" href="./assets/css/svg.css"> -->
+    <link rel="stylesheet" href="./assets/css/svg.css">
 </head>
 
 <body>
@@ -17,12 +17,14 @@
         <div id="container" class="container">
             正在加载中，请稍候...
         </div>
-        <div style="display: grid; place-items: center;">
+        <div id="sidebar" style="display: none;">
             <div id="control-div">
-                <button id="btn_qucikSort">快速排序</button>
+                <!-- <button id="btn_qucikSort">排序算法按钮</button> -->
-                <button id="btn_bubbleSort">冒泡排序</button>
+            </div>
+            <div id="console-div" style="display: none;">
+                <div id="console-current-array"></div>
+                <div id="console-logs"></div>
             </div>
-            <div id="console-div"></div>
         </div>
         <!-- <div class="header">
             <h1>小墨 | 算法可视化</h1>
@@ -76,7 +78,7 @@
     <script src="./assets/js/index.js"></script>
 
     <!-- 算法测试 -->
-    <script src="./assets/js/algorithm/test.js"></script>
+    <!-- <script src="./assets/js/algorithm/test.js"></script> -->
 </body>
 
 </html>