From a90d2db71c6ce736ca5b149f06679fb82495fb98 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:05:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E5=BF=AB=E9=80=9F=E6=8E=92?=
=?UTF-8?q?=E5=BA=8F=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../assets/js/algorithm/sort.js | 65 ++++++++++++-------
.../assets/js/algorithm/test.js | 6 +-
algorithm-visualization/assets/js/class.js | 13 ++--
algorithm-visualization/assets/js/index.js | 13 ++--
algorithm-visualization/index.html | 4 +-
5 files changed, 62 insertions(+), 39 deletions(-)
diff --git a/algorithm-visualization/assets/js/algorithm/sort.js b/algorithm-visualization/assets/js/algorithm/sort.js
index 6d02b16..43604ae 100644
--- a/algorithm-visualization/assets/js/algorithm/sort.js
+++ b/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
+ }
}
diff --git a/algorithm-visualization/assets/js/algorithm/test.js b/algorithm-visualization/assets/js/algorithm/test.js
index 5692c73..ddf1968 100644
--- a/algorithm-visualization/assets/js/algorithm/test.js
+++ b/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),
}
// 遍历每一种算法
diff --git a/algorithm-visualization/assets/js/class.js b/algorithm-visualization/assets/js/class.js
index bc8f8ae..5b4d735 100644
--- a/algorithm-visualization/assets/js/class.js
+++ b/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(",",", "))
+ updateConsole(customAttr.nodes.toString().replaceAll(",", ", "))
console.log("done")
}
@@ -317,10 +321,5 @@ class VectorAnimation {
])
customAttr.gsapTimeline.add(timeline)
-
- // // 首先元素的文字，为了保证用户看起来不闪烁，同时用transform临时交换元素的位置（用户看起来就像是没有交换一样，但是此时已经交换过了）
- // // 最后再把 transform 恢复即可
- // this.swapElementInnerHTML(from, to)
-
}
}
\ No newline at end of file
diff --git a/algorithm-visualization/assets/js/index.js b/algorithm-visualization/assets/js/index.js
index 5730a36..e07c3e7 100644
--- a/algorithm-visualization/assets/js/index.js
+++ b/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)])
-}
\ No newline at end of file
+// 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")
\ No newline at end of file
diff --git a/algorithm-visualization/index.html b/algorithm-visualization/index.html
index 5351b32..7e6108f 100644
--- a/algorithm-visualization/index.html
+++ b/algorithm-visualization/index.html
@@ -73,10 +73,10 @@
-
-
+
+