新增输出；样式微调

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")
             }