排序方法抽象为class；考虑数组为空；添加字体样式；合并样式到单一文件中

src/assets/js/index.js

@@ -46,7 +46,7 @@ var settings = {
         }
     },
     console: {
-        maxLine: 30,
+        maxLine: -1,
         consoleList: [], // 输出列表的数组，不要修改
     }
 }
@@ -58,147 +58,29 @@ settings.innerSize.height = settings.outerSize.height - settings.margin.top - se
 settings.oneUnit.transverse = settings.innerSize.width / 100;
 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("")
-
-    // 添加水印 居中
-    var watermarkWidth = settings.outerSize.height * 0.65
-    shape.addWatermark(elementId, {
-        imageSrc: "./assets/image/logo-small.svg",
-    })
-        .attr('id', 'watermark-c-c')
-        .attr('x', settings.outerSize.width / 2)
-        .attr('y', settings.outerSize.height / 2)
-        .style('width', watermarkWidth + 'px')
-        .style('height', watermarkWidth + 'px')
-        .style('transform', `translate(-${watermarkWidth / 2}px, -${watermarkWidth / 2}px)`)
-        .style('opacity', '0.015')
-        .style('transition', '0.2s')
-
-    // 添加水印 右下角
-    var watermarkWidth = 60
-    shape.addWatermark(elementId, {
-        imageSrc: "./assets/image/logo-small.svg",
-    })
-        .attr('id', 'watermark-r-b')
-        .attr('x', settings.outerSize.width)
-        .attr('y', settings.outerSize.height)
-        .style('width', watermarkWidth + 'px')
-        .style('height', watermarkWidth + 'px')
-        .style('transform', 'translate(-80px, -80px)')
-
-    workSpace.primaryCanvas.node().appendChild(fragment)
-    document.getElementById(elementId).customAttr = fragment.customAttr
-}
 
 // 初始化
 var workSpace = new WorkSpace(settings)
+var arrayVi = new ArrayVi(workSpace)
 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("，")
+var elementId = "array-sort-algorithm"
+arrayVi.initialize({ elementId: elementId })
+
+document.getElementById("array-input").oninput = function () {
+    arrayVi.updateListDataArray('array-sort-algorithm', { doNotAlert: true })
 }
-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
+document.getElementById("getRandomBtn").onclick = function () {
+    arrayVi.randomListDataArray(elementId)
 }
-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 = "array-sort-algorithm"
-
-    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()
-
-        // 跳过未完成的算法
-        if (!sortClassInfo['available'])
-            continue
-
-        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) {
         consoleList.push(data)
-        if (consoleList.length > settings.console.maxLine + 1) {
+        if (settings.console.maxLine != -1 && consoleList.length > settings.console.maxLine + 1) {
             consoleList.shift()
             consoleList[0] = "<small>更早的记录已经被丢掉啦</small>"
         }
@@ -211,6 +93,7 @@ function consoleClear() {
     settings.console.consoleList = []
     consoleLog()
 }
+
 // 展示当前数组
 function displayCurrentArray(array) {
     let dom = []