添加冒泡排序动画；添加.gitignore

.gitignore

@@ -0,0 +1 @@
+.VSCodeCounter

algorithm-visualization/assets/js/algorithm/sort.js

@@ -56,6 +56,11 @@ class Sort {
         // console.log(Object.keys(array))
         // console.log(array, index1, index2)
     }
+    swapAnimation(id, index1, index2) {
+        if (index1 == index2)
+            return
+        animation.swapLinkedListItems(id, [index1, index2])
+    }
 }
 
 
@@ -123,14 +128,15 @@ class QuickSort extends Sort {
         const pivot = left // 第一个元素的索引
         let p = left + 1
         for (let i = left + 1; i <= right; i++) {
+            animation.highlightLinkedListItems(customAttr.id, [i, pivot])
             if (array[i] < array[pivot]) {
                 this.swap(array, i, p)
-                animation.swapLinkedListItems(customAttr.id, [i, p])
+                this.swapAnimation(customAttr.id, i, p)
                 p++
             }
         }
         this.swap(array, pivot, p - 1)
-        animation.swapLinkedListItems(customAttr.id, [pivot, p - 1])
+        this.swapAnimation(customAttr.id, pivot, p - 1)
 
         // 左、右分别排序（索引超限在 sort 内部进行处理，此处无需判断）
         this.sortWithAnimation(customAttr, array, pivot, p - 2)
@@ -179,6 +185,25 @@ class BubbleSort extends Sort {
 
         return array
     }
+
+    sortWithAnimation(customAttr, array) {
+        let sortTime = 0
+        let swapped
+        do {
+            swapped = false
+            for (let i = 1; i < array.length - sortTime; i++) {
+                animation.highlightLinkedListItems(customAttr.id, [i - 1, i])
+                if (array[i - 1] > array[i]) {
+                    this.swap(array, i - 1, i)
+                    this.swapAnimation(customAttr.id, i - 1, i)
+                    swapped = true
+                }
+            }
+            sortTime++
+        } while (swapped)
+
+        return array
+    }
 }
 
 

algorithm-visualization/assets/js/class.js

@@ -250,7 +250,8 @@ class VectorAnimation {
         }
     }
 
-    async swapLinkedListItems(id, [fromIndex, toIndex]) {
+    // 交换数组元素
+    swapLinkedListItems(id, [fromIndex, toIndex]) {
         if (fromIndex < toIndex)
             [fromIndex, toIndex] = [toIndex, fromIndex]
 
@@ -268,7 +269,7 @@ class VectorAnimation {
         var deltaY = customAttr.oneUnit * 1.08
 
         var animateSettings = {
-            duration: 0.3,
+            duration: 0.2,
             ease: "sine.inOut",
             delay: 0,
             yoyo: true,
@@ -293,7 +294,7 @@ class VectorAnimation {
                 customAttr.nodes[toIndex] = tmp
 
                 // console.log(customAttr.nodes)
-                updateConsole(customAttr.nodes.toString().replaceAll(",", ",&nbsp;&nbsp;&nbsp;"))
+                updateConsole("当前数组为：" + customAttr.nodes.toString().replaceAll(",", ",&nbsp;&nbsp;&nbsp;"))
 
                 console.log("done")
             }
@@ -322,4 +323,42 @@ class VectorAnimation {
 
         customAttr.gsapTimeline.add(timeline)
     }
+
+    // 高亮数组元素
+    highlightLinkedListItems(id, indexList) {
+        let linkedList = document.getElementById(id)
+        let customAttr = linkedList.customAttr
+        var gList = linkedList.childNodes
+
+        if (typeof (indexList) === "number")
+            indexList = [indexList]
+
+        var hightlightElementList_fill = []
+        var hightlightElementList_text = []
+        for (let i = 0; i < indexList.length; i++) {
+            const index = indexList[i];
+            hightlightElementList_fill.push(gList[index].childNodes[0])
+            hightlightElementList_text.push(gList[index].childNodes[1])
+        }
+        var animateSettings = {
+            duration: 0.2,
+            ease: "sine.inOut",
+            delay: 0,
+            yoyo: true,
+        }
+
+        let timeline = gsap.timeline({
+            onComplete: function () {
+                console.log("hightlight done")
+            }
+        }).add([
+            gsap.to(hightlightElementList_fill, { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
+            gsap.to(hightlightElementList_text, { ...animateSettings, fill: settings.colorMap["text_focus"] }),
+        ]).add([
+            gsap.to(hightlightElementList_fill, { ...animateSettings, fill: settings.colorMap["fill"] }),
+            gsap.to(hightlightElementList_text, { ...animateSettings, fill: settings.colorMap["text"] }),
+        ])
+
+        customAttr.gsapTimeline.add(timeline)
+    }
 }

algorithm-visualization/assets/js/index.js

@@ -55,7 +55,17 @@ var shape = new Shape(workSpace)
 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)
+    })
 }
 
 initialize()
@@ -154,5 +164,3 @@ function getRandom(length) {
 //     animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
 // }
 
-var sortAlgorithm = new QuickSort(animation)
-sortAlgorithm.doSortWithAnimation("ele8")

algorithm-visualization/index.html

@@ -27,7 +27,13 @@
         <div id="container" class="container">
             正在加载中，请稍候...
         </div>
-        <div id="console-div"></div>
+        <div style="display: grid; place-items: center;">
+            <div id="control-div">
+                <button id="btn_qucikSort">快速排序</button>
+                <button id="btn_bubbleSort">冒泡排序</button>
+            </div>
+            <div id="console-div"></div>
+        </div>
         <!-- <div class="header">
             <h1>小墨 | 算法可视化</h1>
         </div>