mirror of
https://gitee.com/coder-xiaomo/algorithm-visualization
synced 2025-01-10 19:58:18 +08:00
新增输出；样式微调
This commit is contained in:
parent
e4cacb22a6
commit
1d0c253db4
@ -18,3 +18,19 @@ body,
|
||||
/* width: 700px; */
|
||||
/* height: 350px; */
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
#console-logs {
|
||||
margin: 0 auto;
|
||||
padding: 0 15px;
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
background-color: #cccccc;
|
||||
overflow-y: overlay;
|
||||
border-radius: 12px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -4,6 +4,14 @@
|
||||
* @author coder-xiaomo
|
||||
* @date 2022-05-16
|
||||
*/
|
||||
|
||||
function getSortClassList() {
|
||||
return [
|
||||
QuickSort,
|
||||
BubbleSort
|
||||
]
|
||||
}
|
||||
|
||||
class Sort {
|
||||
static animation = null
|
||||
constructor(animation) {
|
||||
|
||||
@ -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")
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ var settings = {
|
||||
"stroke": "#e02433", // 边框颜色
|
||||
"fill": "#ffa4ab", // 填充颜色
|
||||
"fill_focus": "#ee737d", // 填充颜色
|
||||
"text": "blue", // 文本颜色
|
||||
"text": "#8a0f19", // 文本颜色
|
||||
"text_focus": "white", // 文本颜色
|
||||
|
||||
"red": "#f00",
|
||||
@ -37,6 +37,10 @@ var settings = {
|
||||
animation: {
|
||||
duration: 2000, // 不带单位，单位是毫秒
|
||||
easing: "ease-in-out"
|
||||
},
|
||||
console: {
|
||||
maxLine: 30,
|
||||
consoleList: [], // 输出列表的数组，不要修改
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,23 +60,53 @@ 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)
|
||||
})
|
||||
|
||||
let controlDiv = document.getElementById("control-div")
|
||||
var sortClassList = getSortClassList();
|
||||
console.log(sortClassList);
|
||||
var DOMFragment = document.createDocumentFragment()
|
||||
for (let i = 0; i < sortClassList.length; i++) {
|
||||
const sortClass = new sortClassList[i](animation)
|
||||
const sortClassInfo = sortClass.info()
|
||||
|
||||
let ctrlBtn = document.createElement("button")
|
||||
ctrlBtn.innerHTML = sortClassInfo['name']
|
||||
ctrlBtn.onclick = function () {
|
||||
controlDiv.style.display = 'none'
|
||||
d3.select("#console-div").style("display", "")
|
||||
sortClass.doSortWithAnimation(elementId)
|
||||
}
|
||||
DOMFragment.appendChild(ctrlBtn)
|
||||
}
|
||||
controlDiv.appendChild(DOMFragment)
|
||||
|
||||
// 显示 siderbar
|
||||
d3.select("#sidebar").style("display", "")
|
||||
}
|
||||
|
||||
initialize()
|
||||
|
||||
// 临时输出
|
||||
function updateConsole(data) {
|
||||
document.getElementById("console-div").innerHTML = data
|
||||
function consoleLog(data) {
|
||||
console.log(data)
|
||||
let consoleList = settings.console.consoleList
|
||||
consoleList.push(data)
|
||||
if (consoleList.length > settings.console.maxLine + 1) {
|
||||
consoleList.shift()
|
||||
consoleList[0] = "<small>更早的记录已经被丢掉啦</small>"
|
||||
}
|
||||
let container = document.getElementById("console-logs")
|
||||
container.innerHTML = consoleList.join("<br>")
|
||||
container.scrollTop = container.scrollHeight
|
||||
}
|
||||
|
||||
function displayCurrentArray(array) {
|
||||
let dom = []
|
||||
for (let index = 0; index < array.length; index++) {
|
||||
const element = array[index];
|
||||
dom.push(`<span style="margin: 0 4px;">${element.toString()}</span>`)
|
||||
}
|
||||
document.getElementById("console-current-array").innerHTML = "当前数组：" + dom.join(" ")
|
||||
}
|
||||
|
||||
// 测试
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<title>小墨 | 算法可视化 | Algorithm Visualization</title>
|
||||
|
||||
<!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
|
||||
<!-- <link rel="stylesheet" href="./assets/css/index.css"> -->
|
||||
<!-- <link rel="stylesheet" href="./assets/css/svg.css"> -->
|
||||
<link rel="stylesheet" href="./assets/css/index.css">
|
||||
<link rel="stylesheet" href="./assets/css/svg.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -17,12 +17,14 @@
|
||||
<div id="container" class="container">
|
||||
正在加载中，请稍候...
|
||||
</div>
|
||||
<div style="display: grid; place-items: center;">
|
||||
<div id="sidebar" style="display: none;">
|
||||
<div id="control-div">
|
||||
<button id="btn_qucikSort">快速排序</button>
|
||||
<button id="btn_bubbleSort">冒泡排序</button>
|
||||
<!-- <button id="btn_qucikSort">排序算法按钮</button> -->
|
||||
</div>
|
||||
<div id="console-div" style="display: none;">
|
||||
<div id="console-current-array"></div>
|
||||
<div id="console-logs"></div>
|
||||
</div>
|
||||
<div id="console-div"></div>
|
||||
</div>
|
||||
<!-- <div class="header">
|
||||
<h1>小墨 | 算法可视化</h1>
|
||||
@ -76,7 +78,7 @@
|
||||
<script src="./assets/js/index.js"></script>
|
||||
|
||||
<!-- 算法测试 -->
|
||||
<script src="./assets/js/algorithm/test.js"></script>
|
||||
<!-- <script src="./assets/js/algorithm/test.js"></script> -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user