完成快速排序动画

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

@@ -5,7 +5,10 @@
  * @date    2022-05-16
  */
 class Sort {
-    constructor() {
+    static animation = null
+    constructor(animation) {
+        this.animation = animation
+        console.log("animation", animation)
     }
 
     info() {
@@ -19,6 +22,18 @@ class Sort {
         return array
     }
 
+    doSortWithAnimation(elementId) {
+        let customAttr = document.getElementById(elementId).customAttr
+        let array = JSON.parse(JSON.stringify(customAttr.nodes)) // 深拷贝一个数组
+        console.log(customAttr, array)
+        this.sortWithAnimation(customAttr, array)
+    }
+
+    sortWithAnimation(array) {
+        console.log("this method was not implement.")
+        return array
+    }
+
     /**
      * 交换数组中的两个元素
      * @param {*} array  数组
@@ -27,9 +42,9 @@ class Sort {
      */
     swap(array, index1, index2) {
         if (index1 < 0 || index1 >= array.length)
-            console.log("index1索引超限")
+            throw new Error("index1索引超限")
         if (index2 < 0 || index2 >= array.length)
-            console.log("index2索引超限")
+            throw new Error("index2索引超限")
         if (index1 == index2)
             return
 
@@ -60,25 +75,6 @@ class QuickSort extends Sort {
      * 4. 完成排序
      */
 
-    // sort(array) {
-    //     if (array.length <= 1)
-    //         return array
-
-    //     const num = array[0]
-    //     let left = [], right = []
-
-    //     for (let i = 1; i < array.length; i++) {
-    //         const element = array[i]
-    //         if (element <= num)
-    //             left.push(element)
-    //         else
-    //             right.push(element)
-    //     }
-
-    //     console.log(num, left, right)
-    //     return this.sort(left).concat(num, this.sort(right))
-    // }
-
     info() {
         return {
             name: "快速排序算法"
@@ -116,6 +112,31 @@ class QuickSort extends Sort {
         this.sort(array, p, right)
         return array
     }
+
+    sortWithAnimation(customAttr, array, left, right) {
+        if (typeof (left) === "undefined") left = 0
+        if (typeof (right) === "undefined") right = array.length - 1
+
+        if (right <= left)
+            return array // 递归出口
+
+        const pivot = left // 第一个元素的索引
+        let p = left + 1
+        for (let i = left + 1; i <= right; i++) {
+            if (array[i] < array[pivot]) {
+                this.swap(array, i, p)
+                animation.swapLinkedListItems(customAttr.id, [i, p])
+                p++
+            }
+        }
+        this.swap(array, pivot, p - 1)
+        animation.swapLinkedListItems(customAttr.id, [pivot, p - 1])
+
+        // 左、右分别排序（索引超限在 sort 内部进行处理，此处无需判断）
+        this.sortWithAnimation(customAttr, array, pivot, p - 2)
+        this.sortWithAnimation(customAttr, array, p, right)
+        return array
+    }
 }
 
 

algorithm-visualization/assets/js/algorithm/test.js

@@ -37,9 +37,9 @@ var check = [
 ]
 
 var sortAlgorithm = {
-    quicksort: new QuickSort(),
-    bubblesort: new BubbleSort(),
-    selectionSort: new SelectionSort(),
+    quicksort: new QuickSort(animation),
+    bubblesort: new BubbleSort(animation),
+    selectionSort: new SelectionSort(animation),
 }
 
 // 遍历每一种算法

algorithm-visualization/assets/js/class.js

@@ -157,6 +157,7 @@ class Shape {
 
         let fragment = document.createDocumentFragment()
         fragment.customAttr = {
+            id: id,
             nodes: nodes,
             type: "linkedList",
             oneUnit: oneUnit,
@@ -249,7 +250,10 @@ class VectorAnimation {
         }
     }
 
-    swapLinkedListItems(id, [fromIndex, toIndex]) {
+    async swapLinkedListItems(id, [fromIndex, toIndex]) {
+        if (fromIndex < toIndex)
+            [fromIndex, toIndex] = [toIndex, fromIndex]
+
         var settings = this.workSpace.settings
         let linkedList = document.getElementById(id)
         let customAttr = linkedList.customAttr
@@ -289,7 +293,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")
             }
@@ -317,10 +321,5 @@ class VectorAnimation {
         ])
 
         customAttr.gsapTimeline.add(timeline)
-
-        // // 首先元素的文字，为了保证用户看起来不闪烁，同时用transform临时交换元素的位置（用户看起来就像是没有交换一样，但是此时已经交换过了）
-        // // 最后再把 transform 恢复即可
-        // this.swapElementInnerHTML(from, to)
-
     }
 }

algorithm-visualization/assets/js/index.js

@@ -133,7 +133,7 @@ function updateConsole(data) {
 
 // shape.addNode("ele7", 300, 200, "20px", "20px", "文本")
 
-var listData = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
+var listData = [47, 11, 50, 13, 16, 49, 8, 9, 38, 27, 20] // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
 let fragment = shape.getLinkedListFragment("ele8", listData, {
     x: 100,
     y: 100,
@@ -149,7 +149,10 @@ function getRandom(length) {
     return Math.floor(Math.random() * length);    // 可均衡获取 0 到 length-1 的随机整数。
 }
 
-for (let i = 0; i < 10; i++) {
-    var id = "ele8"
-    animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
-}
+// for (let i = 0; i < 10; i++) {
+//     var id = "ele8"
+//     animation.swapLinkedListItems(id, [getRandom(listData.length), getRandom(listData.length)])
+// }
+
+var sortAlgorithm = new QuickSort(animation)
+sortAlgorithm.doSortWithAnimation("ele8")

algorithm-visualization/index.html

@@ -73,10 +73,10 @@
     <!-- class -->
     <script src="./assets/js/class.js"></script>
 
-    <script src="./assets/js/index.js"></script>
-
     <!-- 排序算法 -->
     <script src="./assets/js/algorithm/sort.js"></script>
+
+    <script src="./assets/js/index.js"></script>
     <!-- 算法测试 -->
     <!-- <script src="./assets/js/algorithm/test.js"></script> -->
 </body>