添加用户输入数组和随机生成数组功能

src/assets/css/index.css

@@ -15,8 +15,6 @@ body,
   border: 1px solid #999;
   border-radius: 5px;
   box-shadow: 0 0 5px #999;
-  /* width: 700px; */
-  /* height: 350px; */
 }
 
 #sidebar {

src/assets/js/algorithm/sort.js

@@ -18,7 +18,7 @@ class Sort {
     static animation = null
     constructor(animation) {
         this.animation = animation
-        console.log("animation", animation)
+        console.log(`初始化 ${this.info()['name']}`)
     }
 
     info() {

src/assets/js/class.js

@@ -172,7 +172,7 @@ class Shape {
                 }
             })
         }
-        console.log(fragment.customAttr)
+        // console.log(fragment.customAttr)
 
         // <g></g> 元素不能设置 width 和 height
 

src/assets/js/index.js

@@ -5,7 +5,7 @@ var settings = {
     debugMode: false,
     outerSize: {    // 不带单位
         width: 800,
-        height: 600
+        height: 450
     },
     innerSize: {    // 不带单位，通过 outerSize 和 margin 计算得到
         width: null,
@@ -60,13 +60,69 @@ settings.oneUnit.longitudinal = settings.innerSize.height / 100;
 
 console.log("settings", settings)
 
+
+// 绘制数组
+function initArray(elementId, listData) {
+    let fragment = shape.getLinkedListFragment(elementId, listData, {
+        x: 100,
+        y: 100,
+        width: "100px",
+        height: "100px",
+    })
+
+    console.log(fragment)
+    workSpace.primaryCanvas.html("")
+    workSpace.primaryCanvas.node().appendChild(fragment)
+    document.getElementById(elementId).customAttr = fragment.customAttr
+}
+
 // 初始化
 var workSpace = new WorkSpace(settings)
 var shape = new Shape(workSpace)
 var animation = new VectorAnimation(workSpace)
 
+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]
+function updateListDataInput() {
+    document.getElementById("array-input").value = listData.join("，")
+}
+function updateListDataArray(elementId, { doNotAlert = false }) {
+    var val = document.getElementById("array-input").value
+    try {
+        var preList = val.replaceAll("，", ",").split(",")
+        listData = []
+        preList.forEach(element => {
+            if (element.trim() === "" || isNaN(element))
+                return
+            listData.push(Number(element))
+        });
+        // console.log(preList, listData)
+        initArray(elementId, listData)
+    } catch (err) {
+        console.log(err)
+        if (!doNotAlert)
+            alert("输入不正确，请检查！")
+        return false
+    }
+    return true
+}
+function randomListDataArray(elementId) {
+    function getRandom(length) {
+        return Math.floor(Math.random() * length);    // 可均衡获取 0 到 length-1 的随机整数。
+    }
+    // 获取一个 6 - 12 以内的随机数
+    var len = 6 + getRandom(13 - 6)
+
+    listData = []
+    for (let i = 0; i < len; i++) {
+        listData.push(getRandom(51))
+    }
+    updateListDataInput()
+    updateListDataArray(elementId, { doNotAlert: false })
+}
+
+// 网页加载完毕初始化事件
 function initialize() {
-    var elementId = "ele8"
+    var elementId = "array-sort-algorithm"
 
     let controlDiv = document.getElementById("control-div")
     var sortClassList = getSortClassList();
@@ -79,25 +135,34 @@ function initialize() {
         let ctrlBtn = document.createElement("button")
         ctrlBtn.innerHTML = sortClassInfo['name']
         ctrlBtn.onclick = function () {
+            // 点击排序算法按钮
+            if (!updateListDataArray(elementId, { doNotAlert: false }))
+                return
+
+            // 隐藏一些东西，显示一些东西
             controlDiv.style.display = 'none'
             d3.select("#console-div")
                 .style("display", "")
             d3.select("#console-current-algorithm")
                 .style("text-align", "center")
                 .html(sortClassInfo['name'])
+
             sortClass.doSortWithAnimation(elementId)
         }
         DOMFragment.appendChild(ctrlBtn)
     }
     controlDiv.appendChild(DOMFragment)
 
+    // 生成一个随机数组
+    randomListDataArray(elementId)
+
     // 显示 siderbar
     d3.select("#sidebar").style("display", "")
 }
 
 initialize()
 
-// 临时输出
+// 输出
 function consoleLog(data) {
     let consoleList = settings.console.consoleList
     if (data) {
@@ -115,7 +180,7 @@ function consoleClear() {
     settings.console.consoleList = []
     consoleLog()
 }
-
+// 展示当前数组
 function displayCurrentArray(array) {
     let dom = []
     for (let index = 0; index < array.length; index++) {
@@ -193,24 +258,4 @@ function displayCurrentArray(array) {
 
 // shape.addNode("ele7", 300, 200, "20px", "20px", "文本")
 
-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,
-    width: "100px",
-    height: "100px",
-})
-
-console.log(fragment)
-workSpace.primaryCanvas.node().appendChild(fragment)
-document.getElementById("ele8").customAttr = fragment.customAttr
-
-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)])
-// }
 

src/index.html

@@ -19,7 +19,11 @@
         </div>
         <div id="sidebar" style="display: none;">
             <div id="control-div">
-                <!-- <button id="btn_qucikSort">排序算法按钮</button> -->
+                <div style="text-align: center;">
+                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" oninput="updateListDataArray('array-sort-algorithm', { doNotAlert: true })"/>
+                    <input type="button" value="随便来一个" onclick="randomListDataArray('array-sort-algorithm')"/>
+                </div>
+                <!-- 排序算法按钮 -->
             </div>
             <div id="console-div" style="display: none;">
                 <div id="console-current-algorithm"></div>