From cbd867e5f415ff9f94510915714a4db05e6bb0e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A8=8B=E5=BA=8F=E5=91=98=E5=B0=8F=E5=A2=A8?=
<2291200076@qq.com>
Date: Tue, 17 May 2022 14:43:21 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=86=92=E6=B3=A1=E6=8E=92?=
=?UTF-8?q?=E5=BA=8F=E5=8A=A8=E7=94=BB=EF=BC=9B=E6=B7=BB=E5=8A=A0.gitignor?=
=?UTF-8?q?e?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.gitignore | 1 +
.../assets/js/algorithm/sort.js | 29 +++++++++++-
algorithm-visualization/assets/js/class.js | 45 +++++++++++++++++--
algorithm-visualization/assets/js/index.js | 14 ++++--
algorithm-visualization/index.html | 8 +++-
5 files changed, 88 insertions(+), 9 deletions(-)
create mode 100644 .gitignore
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..357e014
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.VSCodeCounter
\ No newline at end of file
diff --git a/algorithm-visualization/assets/js/algorithm/sort.js b/algorithm-visualization/assets/js/algorithm/sort.js
index 43604ae..4ae2dab 100644
--- a/algorithm-visualization/assets/js/algorithm/sort.js
+++ b/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
+ }
}
diff --git a/algorithm-visualization/assets/js/class.js b/algorithm-visualization/assets/js/class.js
index 5b4d735..70e53a3 100644
--- a/algorithm-visualization/assets/js/class.js
+++ b/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(",", ", "))
+ updateConsole("当前数组为：" + customAttr.nodes.toString().replaceAll(",", ", "))
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)
+ }
}
\ No newline at end of file
diff --git a/algorithm-visualization/assets/js/index.js b/algorithm-visualization/assets/js/index.js
index e07c3e7..359a80d 100644
--- a/algorithm-visualization/assets/js/index.js
+++ b/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")
\ No newline at end of file
diff --git a/algorithm-visualization/index.html b/algorithm-visualization/index.html
index 7e6108f..3308705 100644
--- a/algorithm-visualization/index.html
+++ b/algorithm-visualization/index.html
@@ -27,7 +27,13 @@
正在加载中，请稍候...
-
+