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

src/assets/css/index.css

@@ -19,20 +19,45 @@ a:hover {
   place-items: center;
 }
 
+/* 字体 */
+/* refer: https://www.bilibili.com/video/BV1b54y1Z7pu */
+@font-face {
+  font-family: Emoji;
+  src: local("Apple Color Emojiji"), local("Segoe UI Emoji"),
+    local("Segoe UI Symbol"), local("Noto Color Emoji");
+  unicode-range: U+1F000-1F644, U+203C-3299;
+}
+body {
+  font-family: system-ui, —apple-system, Segoe UI, Rototo, Emoji, Helvetica,
+    Arial, sans-serif;
+}
+/* 衬线字体 */
+.font-serif {
+  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+}
+/* 等宽字体 */
+.font-mono {
+  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+}
+
 /* 深色模式 */
 :root {
   --color-mode: "light";
   --color-dark: #141414;
   --color-dark-alpha: rgba(0, 0, 0, 0.1);
+  --color-dark-filter: brightness(0.5);
 
   --color-light: #efefef;
   --color-light-alpha: rgba(255, 255, 255, 0.9);
+  --color-light-filter: none;
 
   --background: #efefef;
   --text-color: #141414;
   --button-background: var(--color-dark);
   --button-color: var(--color-light);
   --border-color: var(--color-dark-alpha);
+  --filter: var(--color-light-filter);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -46,6 +71,7 @@ a:hover {
     --button-background: var(--color-light);
     --button-color: var(--color-dark);
     --border-color: var(--color-light-alpha);
+    --filter: var(--color-dark-filter);
   }
 }
 
@@ -55,6 +81,7 @@ a:hover {
   --button-background: var(--color-light-alpha);
   --button-color: var(--color-dark);
   --border-color: var(--color-light-alpha);
+  --filter: var(--color-dark-filter);
 }
 
 body {
@@ -73,6 +100,7 @@ body {
   background-color: var(--background);
   box-shadow: 0 0 5px #888;
   overflow-y: hidden;
+  -webkit-user-select: none;
   user-select: none;
 }
 
@@ -86,6 +114,7 @@ body {
 .header-logo-image {
   height: 48px;
   margin: auto 0;
+  -webkit-user-drag: none;
 }
 
 .header-logo-links a {
@@ -113,7 +142,6 @@ body {
   background-color: #cccccc;
   overflow-y: overlay;
   border-radius: 10px;
-  /* user-select: none; */
 }
 
 /* 滚动条样式 refer: https://www.changchenghao.cn/n/679637.html */
@@ -130,3 +158,30 @@ body {
   border: 2px solid white;
   background-color: rgba(0, 0, 0, 0.5);
 }
+
+/* SVG */
+/* 调整 SVG 中文本定位点到文本中央 */
+svg text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}
+
+svg {
+  -webkit-user-select: none;
+  user-select: none;
+  filter: var(--filter);
+}
+
+/* 元素鼠标悬浮样式 */
+svg g:hover > rect {
+  fill: #ffafb6;
+}
+
+/* 右下角水印样式 */
+svg #watermark-r-b {
+  opacity: 0.2;
+  transition: 0.2s;
+}
+svg #watermark-r-b:hover {
+  opacity: 0.8;
+}

src/assets/css/svg.css

@@ -1,23 +0,0 @@
-/* 调整 SVG 中文本定位点到文本中央 */
-text {
-  text-anchor: middle;
-  dominant-baseline: middle;
-}
-
-svg {
-  user-select: none;
-}
-
-/* 元素鼠标悬浮样式 */
-svg g:hover > rect {
-  fill: #ffafb6;
-}
-
-/* 右下角水印样式 */
-svg #watermark-r-b{
-  opacity: 0.2;
-  transition: 0.2s;
-}
-svg #watermark-r-b:hover{
-  opacity: 0.8;
-}

src/assets/js/class.js

@@ -12,6 +12,7 @@ class WorkSpace {
 
     constructor(settings) {
         this.settings = settings
+        settings.workSpace = this
 
         // 清除原有内容
         settings.container
@@ -33,6 +34,148 @@ class WorkSpace {
     }
 }
 
+class ViBase {
+    static workSpace = null;
+    constructor(workSpace) {
+        this.workSpace = workSpace
+    }
+}
+class ArrayVi extends ViBase {
+    // [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]
+    static listData
+
+    // 网页加载完毕初始化事件
+    initialize({ 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()
+
+            // 跳过未完成的算法
+            if (!sortClassInfo['available'])
+                continue
+
+            let ctrlBtn = document.createElement("button")
+            ctrlBtn.innerHTML = sortClassInfo['name']
+            ctrlBtn.onclick = function () {
+                // 点击排序算法按钮
+                // if (!updateListDataArray(elementId, { doNotAlert: false }))
+                //     return
+                if (!this.listData || this.listData.length == 0) {
+                    alert("数组为空")
+                    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)
+
+        // 生成一个随机数组
+        this.randomListDataArray(elementId)
+
+        // 显示 siderbar
+        d3.select("#sidebar").style("display", "")
+    }
+
+    // 将数组显示到输入框中
+    updateListDataInput() {
+        document.getElementById("array-input").value = this.listData.join("，")
+    }
+
+    // Array 内容改变时
+    updateListDataArray(elementId, { doNotAlert = false }) {
+        var val = document.getElementById("array-input").value
+        try {
+            var preList = val.replaceAll("，", ",").split(",")
+            this.listData = []
+            preList.forEach(element => {
+                if (element.trim() === "" || isNaN(element))
+                    return
+                this.listData.push(Number(element))
+            });
+            arrayVi.initArray(elementId, this.listData)
+        } catch (err) {
+            console.log(err)
+            if (!doNotAlert)
+                alert("输入不正确，请检查！")
+            return false
+        }
+        return true
+    }
+
+    // 随机 Array
+    randomListDataArray(elementId) {
+        function getRandom(length) {
+            return Math.floor(Math.random() * length);    // 可均衡获取 0 到 length-1 的随机整数。
+        }
+        // 获取一个 6 - 12 以内的随机数
+        var len = 6 + getRandom(13 - 6)
+
+        this.listData = []
+        for (let i = 0; i < len; i++) {
+            this.listData.push(getRandom(51))
+        }
+        this.updateListDataInput()
+        this.updateListDataArray(elementId, { doNotAlert: false })
+    }
+
+    // 绘制数组
+    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
+    }
+}
+
 /**
  * Shape class v0.1.0
  *

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]
+var elementId = "array-sort-algorithm"
-function updateListDataInput() {
+arrayVi.initialize({ elementId: elementId })
-    document.getElementById("array-input").value = listData.join("，")
+
+document.getElementById("array-input").oninput = function () {
+    arrayVi.updateListDataArray('array-sort-algorithm', { doNotAlert: true })
 }
-function updateListDataArray(elementId, { doNotAlert = false }) {
+document.getElementById("getRandomBtn").onclick = function () {
-    var val = document.getElementById("array-input").value
+    arrayVi.randomListDataArray(elementId)
-    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 = "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 = []

src/index.html

@@ -9,7 +9,6 @@
 
     <!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
     <link rel="stylesheet" href="./assets/css/index.css">
-    <link rel="stylesheet" href="./assets/css/svg.css">
 </head>
 
 <body>
@@ -21,9 +20,8 @@
         <div id="sidebar" style="display: none;">
             <div id="control-div">
                 <div style="text-align: center;">
-                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value=""
+                    <input id="array-input" style="width: 100%; text-align: center;" type="text" value="" />
-                        oninput="updateListDataArray('array-sort-algorithm', { doNotAlert: true })" />
+                    <input id="getRandomBtn" type="button" value="随便来一个" />
-                    <input type="button" value="随便来一个" onclick="randomListDataArray('array-sort-algorithm')" />
                 </div>
                 <!-- 排序算法按钮 -->
             </div>