实现 归并排序算法（不要合分支）；动画展示不好展示；弹出元素到新的数组部分代码未完成

src/assets/js/algorithm/sort.js

@@ -353,6 +353,7 @@ class MergeSort extends Sort {
         return {
             name: "归并排序算法",
             enName: "Merge Sort",
+            available: true
         }
     }
 
@@ -366,19 +367,69 @@ class MergeSort extends Sort {
         将元素拷贝进原来的数组中
     */
     sort(array) {
-        if (array.length == 0)
+        if (array.length <= 1)
             return array
-        // todo
-        console.log("尚未实现")
+        let middle = Math.floor(array.length / 2)
+        let left = this.sort(array.slice(0, middle))
+        let right = this.sort(array.slice(middle))
+        let result = []
+        let i = 0, j = 0
+        while (i < left.length && j < right.length) {
+            if (left[i] <= right[j]) {
+                result.push(left[i])
+                i++
+            } else {
+                result.push(right[j])
+                j++
+                // this.reverseCount++
+            }
+        }
+        while (i < left.length) {
+            result.push(left[i])
+            i++
+        }
+        while (j < right.length) {
+            result.push(right[j])
+            j++
+        }
+        array = result
         return array
     }
 
-    sortWithAnimation(customAttr, array) {
-        if (array.length == 0)
+    sortWithAnimation(customAttr, array, arrayFirstElementIndex = 0) {
+        if (array.length <= 1) {
             return array
-        // todo
-        console.log("尚未实现")
-        return array
+        }
+        console.log("array", array);
+
+        let middle = Math.floor(array.length / 2)
+        let left = this.sortWithAnimation(customAttr, array.slice(0, middle), arrayFirstElementIndex)
+        let right = this.sortWithAnimation(customAttr, array.slice(middle), arrayFirstElementIndex + middle)
+        let result = []
+        let i = 0, j = 0
+        while (i < left.length && j < right.length) {
+            if (left[i] <= right[j]) {
+                result.push(left[i])
+                animation.popupLinkedListItemToNewPosition(customAttr.id, arrayFirstElementIndex + i)
+                i++
+            } else {
+                result.push(right[j])
+                animation.popupLinkedListItemToNewPosition(customAttr.id, arrayFirstElementIndex + j)
+                j++
+                // this.reverseCount++
+            }
+        }
+        while (i < left.length) {
+            result.push(left[i])
+            animation.popupLinkedListItemToNewPosition(customAttr.id, arrayFirstElementIndex + i)
+            i++
+        }
+        while (j < right.length) {
+            result.push(right[j])
+            animation.popupLinkedListItemToNewPosition(customAttr.id, arrayFirstElementIndex + j)
+            j++
+        }
+        return result
     }
 }
 

src/assets/js/algorithm/test.js

@@ -41,6 +41,7 @@ var sortAlgorithm = {
     bubblesort: new BubbleSort(animation),
     selectionSort: new SelectionSort(animation),
     insertionSort: new InsertionSort(animation),
+    mergeSort: new MergeSort(animation),
 }
 
 // 遍历每一种算法

src/assets/js/class.js

@@ -644,4 +644,52 @@ class VectorAnimation {
 
         customAttr.gsapTimeline.add(timeline)
     }
+
+    // 弹出元素到新的数组
+    popupLinkedListItemToNewPosition(id, index) {
+        let linkedList = document.getElementById(id)
+        let customAttr = linkedList.customAttr
+        console.log("customAttr", customAttr);
+
+        var gList = linkedList.childNodes
+
+        let newIndex = 0;
+
+        var deltaX = customAttr.oneUnit * (newIndex - index);
+        var deltaY = customAttr.oneUnit * 1.08
+        var animateSettings = this.workSpace.settings.animation.getConf()
+
+        var that = this
+        let timeline = gsap.timeline({
+            onStart: function () {
+                consoleLog(`弹出索引为 ${index} 的元素到索引为 ${newIndex} 位置`)
+            },
+            onComplete: function () {
+                console.log("animation done (popup to new position)")
+            }
+        }).add([
+            gsap.to(from.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
+            gsap.to(to.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill_focus"] }),
+            gsap.to(from.childNodes[1], { ...animateSettings, fill: settings.colorMap["text_focus"] }),
+            gsap.to(to.childNodes[1], { ...animateSettings, fill: settings.colorMap["text_focus"] }),
+            gsap.to(from.childNodes, { ...animateSettings, y: -deltaY }),
+            gsap.to(to.childNodes, { ...animateSettings, y: deltaY }),
+        ]).add([
+            gsap.to(from.childNodes, { ...animateSettings, x: -deltaX }),
+            gsap.to(to.childNodes, { ...animateSettings, x: deltaX }),
+        ]).add([
+            gsap.to(from.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill"] }),
+            gsap.to(to.childNodes[0], { ...animateSettings, fill: settings.colorMap["fill"] }),
+            gsap.to(from.childNodes[1], { ...animateSettings, fill: settings.colorMap["text"] }),
+            gsap.to(to.childNodes[1], { ...animateSettings, fill: settings.colorMap["text"] }),
+            gsap.to(from.childNodes, { ...animateSettings, y: 0 }),
+            gsap.to(to.childNodes, { ...animateSettings, y: 0 }),
+        ]).add([
+            // 恢复到动画之前的状态
+            gsap.to(from.childNodes, { ...animateSettings, duration: 0, x: 0, y: 0 }),
+            gsap.to(to.childNodes, { ...animateSettings, duration: 0, x: 0, y: 0 }),
+        ])
+
+        customAttr.gsapTimeline.add(timeline)
+    }
 }

src/index.html

@@ -79,7 +79,7 @@
     <script defer src="./assets/js/index.js"></script>
 
     <!-- 算法测试 -->
-    <!-- <script src="./assets/js/algorithm/test.js"></script> -->
+    <!-- <script defer src="./assets/js/algorithm/test.js"></script> -->
 </body>
 
 </html>