coder-xiaomo/algorithm-visualization
1
0
Fork 0
mirror of https://gitee.com/coder-xiaomo/algorithm-visualization synced 2025-01-10 19:58:18 +08:00
Code Issues Projects Releases Wiki Activity GitHub Gitee

bug fixed.

Browse Source
This commit is contained in:
程序员小墨 2022-05-18 16:47:17 +08:00
parent 065ef077c0
commit a4607a218a
6 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/svg.css Normal file
View File

@ -0,0 +1,9 @@
/* 调整 SVG 中文本定位点到文本中央 */
text {
text-anchor: middle;
dominant-baseline: middle;
}
svg {
user-select: none;
}

19
src/index.html
View File

@ -7,20 +7,9 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小墨 | 算法可视化 | Algorithm Visualization</title> <title>小墨 | 算法可视化 | Algorithm Visualization</title>
<!-- 通过 webpack 引入 --> <!-- 如果使用webpack，请注释掉下面两行，通过 webpack 引入 -->
<!-- <link rel="stylesheet" href="./assets/css/index.css"> --> <!-- <link rel="stylesheet" href="./assets/css/index.css"> -->
<!-- <link rel="stylesheet" href="./assets/css/svg.css"> -->
<style>
/* 调整 SVG 中文本定位点到文本中央 */
text {
text-anchor: middle;
dominant-baseline: middle;
}
svg {
user-select: none;
}
</style>
</head> </head>
<body> <body>
@ -83,9 +72,11 @@
<!-- 排序算法 --> <!-- 排序算法 -->
<script src="./assets/js/algorithm/sort.js"></script> <script src="./assets/js/algorithm/sort.js"></script>
<!-- 主script -->
<script src="./assets/js/index.js"></script> <script src="./assets/js/index.js"></script>
<!-- 算法测试 --> <!-- 算法测试 -->
<!-- <script src="./assets/js/algorithm/test.js"></script> --> <script src="./assets/js/algorithm/test.js"></script>
</body> </body>
</html> </html>

16
src/webpack-script.js Normal file
View File

@ -0,0 +1,16 @@
// // D3.js refer: https://d3js.org/
// import "./assets/lib/d3/7.4.4/d3.min.js"
// import * as d3 from "d3";
// // GSAP refer: https://greensock.com/docs/v3/Installation
// import "./assets/lib/gsap/3.10.4/gsap.min.js"
// // class
// import "./assets/js/class.js"
// 排序算法
import "./assets/js/algorithm/sort.js"
import "./assets/js/index.js"
// 算法测试
// import "./assets/js/algorithm/test.js"

3
src/webpack-style.js Normal file
View File

@ -0,0 +1,3 @@
// 引入样式资源
import './assets/css/index.css'
import './assets/css/svg.css'

8
src/webpack.js
View File

@ -1,8 +0,0 @@
// 引入html
import './index.html'
// 引入样式资源
import './assets/css/index.css'
//
// import "./assets/lib/d3/7.4.4/d3.min.js"

11
webpack.config.js
View File

@ -13,8 +13,11 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { module.exports = {
// 入口起点 // 入口起点
// entry: "./src/index.html", entry: {
entry: "./src/webpack.js", html: "./src/index.html",
style: "./src/webpack-style.js",
// script: "./src/webpack-script.js",
},
// 输出 // 输出
output: { output: {
// 输出文件名 // 输出文件名
@ -84,7 +87,9 @@ module.exports = {
plugins: [ plugins: [
// 创建一个html，自动引入打包的所有资源 // 创建一个html，自动引入打包的所有资源
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: './src/index.html' template: './src/index.html',
inject: 'body',
scriptLoading: 'blocking'
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: "assets/css/built.[contenthash:8].css" filename: "assets/css/built.[contenthash:8].css"