From 54e5f2014e90ab5d3dc888649a859f7e18f49e9e 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: Sun, 22 May 2022 17:44:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E5=BA=8F=E6=96=B9=E6=B3=95=E6=8A=BD?=
=?UTF-8?q?=E8=B1=A1=E4=B8=BAclass=EF=BC=9B=E8=80=83=E8=99=91=E6=95=B0?=
=?UTF-8?q?=E7=BB=84=E4=B8=BA=E7=A9=BA=EF=BC=9B=E6=B7=BB=E5=8A=A0=E5=AD=97?=
=?UTF-8?q?=E4=BD=93=E6=A0=B7=E5=BC=8F=EF=BC=9B=E5=90=88=E5=B9=B6=E6=A0=B7?=
=?UTF-8?q?=E5=BC=8F=E5=88=B0=E5=8D=95=E4=B8=80=E6=96=87=E4=BB=B6=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/assets/css/index.css | 57 +++++++++++++++-
src/assets/css/svg.css | 23 -------
src/assets/js/class.js | 143 +++++++++++++++++++++++++++++++++++++++
src/assets/js/index.js | 139 +++----------------------------------
src/index.html | 6 +-
5 files changed, 212 insertions(+), 156 deletions(-)
delete mode 100644 src/assets/css/svg.css
diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 28f476b..5955c32 100644
--- a/src/assets/css/index.css
+++ b/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;
+}
diff --git a/src/assets/css/svg.css b/src/assets/css/svg.css
deleted file mode 100644
index c19b088..0000000
--- a/src/assets/css/svg.css
+++ /dev/null
@@ -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;
-}
\ No newline at end of file
diff --git a/src/assets/js/class.js b/src/assets/js/class.js
index 3551bcc..e39e4b7 100644
--- a/src/assets/js/class.js
+++ b/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
*
diff --git a/src/assets/js/index.js b/src/assets/js/index.js
index b055038..f29f805 100644
--- a/src/assets/js/index.js
+++ b/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] = "更早的记录已经被丢掉啦"
}
@@ -211,6 +93,7 @@ function consoleClear() {
settings.console.consoleList = []
consoleLog()
}
+
// 展示当前数组
function displayCurrentArray(array) {
let dom = []
diff --git a/src/index.html b/src/index.html
index be660d0..5e9a43a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,6 @@
-
@@ -21,9 +20,8 @@