├── .babelrc
├── .editorconfig
├── .gitignore
├── .postcssrc.js
├── Dockerfile
├── LICENSE
├── README.md
├── build
    ├── build.js
    ├── check-versions.js
    ├── logo.png
    ├── utils.js
    ├── vue-loader.conf.js
    ├── webpack.base.conf.js
    ├── webpack.dev.conf.js
    └── webpack.prod.conf.js
├── config
    ├── dev.env.js
    ├── index.js
    └── prod.env.js
├── index.html
├── package-lock.json
├── package.json
├── src
    ├── App.vue
    ├── components
    │   ├── Algorithm.vue
    │   ├── Data.vue
    │   └── MyCanvas.vue
    ├── js
    │   ├── Algorithm.js
    │   ├── AlgorithmInfo.js
    │   ├── BubbleSort.js
    │   ├── CocktailShakerSort.js
    │   ├── EventBus.js
    │   ├── HeapSort.js
    │   ├── InsertionSort.js
    │   ├── MergeSortInPlace.js
    │   ├── QuickSort.js
    │   ├── SelectionSort.js
    │   ├── ShellSort.js
    │   └── scrappedAlgorithms.js
    └── main.js
└── static
    └── .gitkeep


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     ["env", {
 4 |       "modules": false,
 5 |       "targets": {
 6 |         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 7 |       }
 8 |     }],
 9 |     "stage-2"
10 |   ],
11 |   "plugins": ["transform-vue-jsx", "transform-runtime"]
12 | }
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Dependency directories
33 | node_modules/
34 | jspm_packages/
35 | 
36 | # TypeScript v1 declaration files
37 | typings/
38 | 
39 | # Optional npm cache directory
40 | .npm
41 | 
42 | # Optional eslint cache
43 | .eslintcache
44 | 
45 | # Optional REPL history
46 | .node_repl_history
47 | 
48 | # Output of 'npm pack'
49 | *.tgz
50 | 
51 | # Yarn Integrity file
52 | .yarn-integrity
53 | 
54 | # dotenv environment variables file
55 | .env
56 | 
57 | # next.js build output
58 | .next
59 | 
60 | dist/


--------------------------------------------------------------------------------
/.postcssrc.js:
--------------------------------------------------------------------------------
 1 | // https://github.com/michael-ciniawsky/postcss-load-config
 2 | 
 3 | module.exports = {
 4 |   "plugins": {
 5 |     "postcss-import": {},
 6 |     "postcss-url": {},
 7 |     // to edit target browsers: use "browserslist" field in package.json
 8 |     "autoprefixer": {}
 9 |   }
10 | }
11 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:13.8
2 | COPY package.json /package.json
3 | COPY package-lock.json /package-lock.json
4 | RUN npm install
5 | COPY . /
6 | RUN npm run build
7 | RUN npm install -g serve
8 | CMD ["serve", "dist"]
9 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Hecheng(Chris) Li
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Sorting Animations
 2 | 
 3 | > A Vue.js project shows the progress of different sorting algorithms<br/>
 4 | > This is meant to show how each algorithm sorts, the timing may be inaccurate due to imprefection in the algorithm I wrote
 5 | 
 6 | > Sorting Algorithms:<br/>
 7 | >   Implemented:<br/>
 8 | >     SelectionSort<br/>
 9 | >     InsertionSort<br/>
10 | >     BubbleSort<br/>
11 | >     CocktailShakerSort<br/>
12 | >     MergeSort<br/>
13 | >     QuickSort<br/>
14 | >     HeapSort<br/>
15 | >     ShellSort<br/>
16 | 
17 | >   Need Implementation:<br/>
18 | >     IntroSort<br/>
19 | >     Odd-EventSort<br/>
20 | >     Merge-InsertionSort<br/>
21 | >     SmoothSort<br/>
22 | >     TimSort<br/>
23 | >     Show runtime for all algorithms<br/>
24 | 


--------------------------------------------------------------------------------
/build/build.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | require('./check-versions')()
 3 | 
 4 | process.env.NODE_ENV = 'production'
 5 | 
 6 | const ora = require('ora')
 7 | const rm = require('rimraf')
 8 | const path = require('path')
 9 | const chalk = require('chalk')
10 | const webpack = require('webpack')
11 | const config = require('../config')
12 | const webpackConfig = require('./webpack.prod.conf')
13 | 
14 | const spinner = ora('building for production...')
15 | spinner.start()
16 | 
17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
18 |   if (err) throw err
19 |   webpack(webpackConfig, (err, stats) => {
20 |     spinner.stop()
21 |     if (err) throw err
22 |     process.stdout.write(stats.toString({
23 |       colors: true,
24 |       modules: false,
25 |       children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
26 |       chunks: false,
27 |       chunkModules: false
28 |     }) + '\n\n')
29 | 
30 |     if (stats.hasErrors()) {
31 |       console.log(chalk.red('  Build failed with errors.\n'))
32 |       process.exit(1)
33 |     }
34 | 
35 |     console.log(chalk.cyan('  Build complete.\n'))
36 |     console.log(chalk.yellow(
37 |       '  Tip: built files are meant to be served over an HTTP server.\n' +
38 |       '  Opening index.html over file:// won\'t work.\n'
39 |     ))
40 |   })
41 | })
42 | 


--------------------------------------------------------------------------------
/build/check-versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const chalk = require('chalk')
 3 | const semver = require('semver')
 4 | const packageConfig = require('../package.json')
 5 | const shell = require('shelljs')
 6 | 
 7 | function exec (cmd) {
 8 |   return require('child_process').execSync(cmd).toString().trim()
 9 | }
10 | 
11 | const versionRequirements = [
12 |   {
13 |     name: 'node',
14 |     currentVersion: semver.clean(process.version),
15 |     versionRequirement: packageConfig.engines.node
16 |   }
17 | ]
18 | 
19 | if (shell.which('npm')) {
20 |   versionRequirements.push({
21 |     name: 'npm',
22 |     currentVersion: exec('npm --version'),
23 |     versionRequirement: packageConfig.engines.npm
24 |   })
25 | }
26 | 
27 | module.exports = function () {
28 |   const warnings = []
29 | 
30 |   for (let i = 0; i < versionRequirements.length; i++) {
31 |     const mod = versionRequirements[i]
32 | 
33 |     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
34 |       warnings.push(mod.name + ': ' +
35 |         chalk.red(mod.currentVersion) + ' should be ' +
36 |         chalk.green(mod.versionRequirement)
37 |       )
38 |     }
39 |   }
40 | 
41 |   if (warnings.length) {
42 |     console.log('')
43 |     console.log(chalk.yellow('To use this template, you must update following to modules:'))
44 |     console.log()
45 | 
46 |     for (let i = 0; i < warnings.length; i++) {
47 |       const warning = warnings[i]
48 |       console.log('  ' + warning)
49 |     }
50 | 
51 |     console.log()
52 |     process.exit(1)
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/build/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisli-03/SortingAnimation/47240a3ab247824d5a4889d50993fa49427c60a7/build/logo.png


--------------------------------------------------------------------------------
/build/utils.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const config = require('../config')
  4 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
  5 | const packageConfig = require('../package.json')
  6 | 
  7 | exports.assetsPath = function (_path) {
  8 |   const assetsSubDirectory = process.env.NODE_ENV === 'production'
  9 |     ? config.build.assetsSubDirectory
 10 |     : config.dev.assetsSubDirectory
 11 | 
 12 |   return path.posix.join(assetsSubDirectory, _path)
 13 | }
 14 | 
 15 | exports.cssLoaders = function (options) {
 16 |   options = options || {}
 17 | 
 18 |   const cssLoader = {
 19 |     loader: 'css-loader',
 20 |     options: {
 21 |       sourceMap: options.sourceMap
 22 |     }
 23 |   }
 24 | 
 25 |   const postcssLoader = {
 26 |     loader: 'postcss-loader',
 27 |     options: {
 28 |       sourceMap: options.sourceMap
 29 |     }
 30 |   }
 31 | 
 32 |   // generate loader string to be used with extract text plugin
 33 |   function generateLoaders (loader, loaderOptions) {
 34 |     const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
 35 | 
 36 |     if (loader) {
 37 |       loaders.push({
 38 |         loader: loader + '-loader',
 39 |         options: Object.assign({}, loaderOptions, {
 40 |           sourceMap: options.sourceMap
 41 |         })
 42 |       })
 43 |     }
 44 | 
 45 |     // Extract CSS when that option is specified
 46 |     // (which is the case during production build)
 47 |     if (options.extract) {
 48 |       return ExtractTextPlugin.extract({
 49 |         use: loaders,
 50 |         fallback: 'vue-style-loader'
 51 |       })
 52 |     } else {
 53 |       return ['vue-style-loader'].concat(loaders)
 54 |     }
 55 |   }
 56 | 
 57 |   // https://vue-loader.vuejs.org/en/configurations/extract-css.html
 58 |   return {
 59 |     css: generateLoaders(),
 60 |     postcss: generateLoaders(),
 61 |     less: generateLoaders('less'),
 62 |     sass: generateLoaders('sass', { indentedSyntax: true }),
 63 |     scss: generateLoaders('sass'),
 64 |     stylus: generateLoaders('stylus'),
 65 |     styl: generateLoaders('stylus')
 66 |   }
 67 | }
 68 | 
 69 | // Generate loaders for standalone style files (outside of .vue)
 70 | exports.styleLoaders = function (options) {
 71 |   const output = []
 72 |   const loaders = exports.cssLoaders(options)
 73 | 
 74 |   for (const extension in loaders) {
 75 |     const loader = loaders[extension]
 76 |     output.push({
 77 |       test: new RegExp('\\.' + extension + '$'),
 78 |       use: loader
 79 |     })
 80 |   }
 81 | 
 82 |   return output
 83 | }
 84 | 
 85 | exports.createNotifierCallback = () => {
 86 |   const notifier = require('node-notifier')
 87 | 
 88 |   return (severity, errors) => {
 89 |     if (severity !== 'error') return
 90 | 
 91 |     const error = errors[0]
 92 |     const filename = error.file && error.file.split('!').pop()
 93 | 
 94 |     notifier.notify({
 95 |       title: packageConfig.name,
 96 |       message: severity + ': ' + error.name,
 97 |       subtitle: filename || '',
 98 |       icon: path.join(__dirname, 'logo.png')
 99 |     })
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/build/vue-loader.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const config = require('../config')
 4 | const isProduction = process.env.NODE_ENV === 'production'
 5 | const sourceMapEnabled = isProduction
 6 |   ? config.build.productionSourceMap
 7 |   : config.dev.cssSourceMap
 8 | 
 9 | module.exports = {
10 |   loaders: utils.cssLoaders({
11 |     sourceMap: sourceMapEnabled,
12 |     extract: isProduction
13 |   }),
14 |   cssSourceMap: sourceMapEnabled,
15 |   cacheBusting: config.dev.cacheBusting,
16 |   transformToRequire: {
17 |     video: ['src', 'poster'],
18 |     source: 'src',
19 |     img: 'src',
20 |     image: 'xlink:href'
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/build/webpack.base.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const path = require('path')
 3 | const utils = require('./utils')
 4 | const config = require('../config')
 5 | const vueLoaderConfig = require('./vue-loader.conf')
 6 | 
 7 | function resolve (dir) {
 8 |   return path.join(__dirname, '..', dir)
 9 | }
10 | 
11 | 
12 | 
13 | module.exports = {
14 |   context: path.resolve(__dirname, '../'),
15 |   entry: {
16 |     app: './src/main.js'
17 |   },
18 |   output: {
19 |     path: config.build.assetsRoot,
20 |     filename: '[name].js',
21 |     publicPath: process.env.NODE_ENV === 'production'
22 |       ? config.build.assetsPublicPath
23 |       : config.dev.assetsPublicPath
24 |   },
25 |   resolve: {
26 |     extensions: ['.js', '.vue', '.json'],
27 |     alias: {
28 |       'vue$': 'vue/dist/vue.esm.js',
29 |       '@': path.resolve(__dirname, '../src'),
30 |     }
31 |   },
32 |   module: {
33 |     rules: [
34 |       {
35 |         test: /\.vue$/,
36 |         loader: 'vue-loader',
37 |         options: vueLoaderConfig
38 |       },
39 |       {
40 |         test: /\.js$/,
41 |         loader: 'babel-loader',
42 |         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
43 |       },
44 |       {
45 |         test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
46 |         loader: 'url-loader',
47 |         options: {
48 |           limit: 10000,
49 |           name: utils.assetsPath('img/[name].[hash:7].[ext]')
50 |         }
51 |       },
52 |       {
53 |         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
54 |         loader: 'url-loader',
55 |         options: {
56 |           limit: 10000,
57 |           name: utils.assetsPath('media/[name].[hash:7].[ext]')
58 |         }
59 |       },
60 |       {
61 |         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
62 |         loader: 'url-loader',
63 |         options: {
64 |           limit: 10000,
65 |           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
66 |         }
67 |       }
68 |     ]
69 |   },
70 |   node: {
71 |     // prevent webpack from injecting useless setImmediate polyfill because Vue
72 |     // source contains it (although only uses it if it's native).
73 |     setImmediate: false,
74 |     // prevent webpack from injecting mocks to Node native modules
75 |     // that does not make sense for the client
76 |     dgram: 'empty',
77 |     fs: 'empty',
78 |     net: 'empty',
79 |     tls: 'empty',
80 |     child_process: 'empty'
81 |   }
82 | }
83 | 


--------------------------------------------------------------------------------
/build/webpack.dev.conf.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | const utils = require('./utils')
 3 | const webpack = require('webpack')
 4 | const config = require('../config')
 5 | const merge = require('webpack-merge')
 6 | const path = require('path')
 7 | const baseWebpackConfig = require('./webpack.base.conf')
 8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
 9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
11 | const portfinder = require('portfinder')
12 | 
13 | const HOST = process.env.HOST
14 | const PORT = process.env.PORT && Number(process.env.PORT)
15 | 
16 | const devWebpackConfig = merge(baseWebpackConfig, {
17 |   module: {
18 |     rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
19 |   },
20 |   // cheap-module-eval-source-map is faster for development
21 |   devtool: config.dev.devtool,
22 | 
23 |   // these devServer options should be customized in /config/index.js
24 |   devServer: {
25 |     clientLogLevel: 'warning',
26 |     historyApiFallback: {
27 |       rewrites: [
28 |         { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
29 |       ],
30 |     },
31 |     hot: true,
32 |     contentBase: false, // since we use CopyWebpackPlugin.
33 |     compress: true,
34 |     host: HOST || config.dev.host,
35 |     port: PORT || config.dev.port,
36 |     open: config.dev.autoOpenBrowser,
37 |     overlay: config.dev.errorOverlay
38 |       ? { warnings: false, errors: true }
39 |       : false,
40 |     publicPath: config.dev.assetsPublicPath,
41 |     proxy: config.dev.proxyTable,
42 |     quiet: true, // necessary for FriendlyErrorsPlugin
43 |     watchOptions: {
44 |       poll: config.dev.poll,
45 |     }
46 |   },
47 |   plugins: [
48 |     new webpack.DefinePlugin({
49 |       'process.env': require('../config/dev.env')
50 |     }),
51 |     new webpack.HotModuleReplacementPlugin(),
52 |     new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
53 |     new webpack.NoEmitOnErrorsPlugin(),
54 |     // https://github.com/ampedandwired/html-webpack-plugin
55 |     new HtmlWebpackPlugin({
56 |       filename: 'index.html',
57 |       template: 'index.html',
58 |       inject: true
59 |     }),
60 |     // copy custom static assets
61 |     new CopyWebpackPlugin([
62 |       {
63 |         from: path.resolve(__dirname, '../static'),
64 |         to: config.dev.assetsSubDirectory,
65 |         ignore: ['.*']
66 |       }
67 |     ])
68 |   ]
69 | })
70 | 
71 | module.exports = new Promise((resolve, reject) => {
72 |   portfinder.basePort = process.env.PORT || config.dev.port
73 |   portfinder.getPort((err, port) => {
74 |     if (err) {
75 |       reject(err)
76 |     } else {
77 |       // publish the new Port, necessary for e2e tests
78 |       process.env.PORT = port
79 |       // add port to devServer config
80 |       devWebpackConfig.devServer.port = port
81 | 
82 |       // Add FriendlyErrorsPlugin
83 |       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
84 |         compilationSuccessInfo: {
85 |           messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
86 |         },
87 |         onErrors: config.dev.notifyOnErrors
88 |         ? utils.createNotifierCallback()
89 |         : undefined
90 |       }))
91 | 
92 |       resolve(devWebpackConfig)
93 |     }
94 |   })
95 | })
96 | 


--------------------------------------------------------------------------------
/build/webpack.prod.conf.js:
--------------------------------------------------------------------------------
  1 | 'use strict'
  2 | const path = require('path')
  3 | const utils = require('./utils')
  4 | const webpack = require('webpack')
  5 | const config = require('../config')
  6 | const merge = require('webpack-merge')
  7 | const baseWebpackConfig = require('./webpack.base.conf')
  8 | const CopyWebpackPlugin = require('copy-webpack-plugin')
  9 | const HtmlWebpackPlugin = require('html-webpack-plugin')
 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin')
 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 13 | 
 14 | const env = require('../config/prod.env')
 15 | 
 16 | const webpackConfig = merge(baseWebpackConfig, {
 17 |   module: {
 18 |     rules: utils.styleLoaders({
 19 |       sourceMap: config.build.productionSourceMap,
 20 |       extract: true,
 21 |       usePostCSS: true
 22 |     })
 23 |   },
 24 |   devtool: config.build.productionSourceMap ? config.build.devtool : false,
 25 |   output: {
 26 |     path: config.build.assetsRoot,
 27 |     filename: utils.assetsPath('js/[name].[chunkhash].js'),
 28 |     chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
 29 |   },
 30 |   plugins: [
 31 |     // http://vuejs.github.io/vue-loader/en/workflow/production.html
 32 |     new webpack.DefinePlugin({
 33 |       'process.env': env
 34 |     }),
 35 |     new UglifyJsPlugin({
 36 |       uglifyOptions: {
 37 |         compress: {
 38 |           warnings: false
 39 |         }
 40 |       },
 41 |       sourceMap: config.build.productionSourceMap,
 42 |       parallel: true
 43 |     }),
 44 |     // extract css into its own file
 45 |     new ExtractTextPlugin({
 46 |       filename: utils.assetsPath('css/[name].[contenthash].css'),
 47 |       // Setting the following option to `false` will not extract CSS from codesplit chunks.
 48 |       // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
 49 |       // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 
 50 |       // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
 51 |       allChunks: true,
 52 |     }),
 53 |     // Compress extracted CSS. We are using this plugin so that possible
 54 |     // duplicated CSS from different components can be deduped.
 55 |     new OptimizeCSSPlugin({
 56 |       cssProcessorOptions: config.build.productionSourceMap
 57 |         ? { safe: true, map: { inline: false } }
 58 |         : { safe: true }
 59 |     }),
 60 |     // generate dist index.html with correct asset hash for caching.
 61 |     // you can customize output by editing /index.html
 62 |     // see https://github.com/ampedandwired/html-webpack-plugin
 63 |     new HtmlWebpackPlugin({
 64 |       filename: config.build.index,
 65 |       template: 'index.html',
 66 |       inject: true,
 67 |       minify: {
 68 |         removeComments: true,
 69 |         collapseWhitespace: true,
 70 |         removeAttributeQuotes: true
 71 |         // more options:
 72 |         // https://github.com/kangax/html-minifier#options-quick-reference
 73 |       },
 74 |       // necessary to consistently work with multiple chunks via CommonsChunkPlugin
 75 |       chunksSortMode: 'dependency'
 76 |     }),
 77 |     // keep module.id stable when vendor modules does not change
 78 |     new webpack.HashedModuleIdsPlugin(),
 79 |     // enable scope hoisting
 80 |     new webpack.optimize.ModuleConcatenationPlugin(),
 81 |     // split vendor js into its own file
 82 |     new webpack.optimize.CommonsChunkPlugin({
 83 |       name: 'vendor',
 84 |       minChunks (module) {
 85 |         // any required modules inside node_modules are extracted to vendor
 86 |         return (
 87 |           module.resource &&
 88 |           /\.js$/.test(module.resource) &&
 89 |           module.resource.indexOf(
 90 |             path.join(__dirname, '../node_modules')
 91 |           ) === 0
 92 |         )
 93 |       }
 94 |     }),
 95 |     // extract webpack runtime and module manifest to its own file in order to
 96 |     // prevent vendor hash from being updated whenever app bundle is updated
 97 |     new webpack.optimize.CommonsChunkPlugin({
 98 |       name: 'manifest',
 99 |       minChunks: Infinity
100 |     }),
101 |     // This instance extracts shared chunks from code splitted chunks and bundles them
102 |     // in a separate chunk, similar to the vendor chunk
103 |     // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
104 |     new webpack.optimize.CommonsChunkPlugin({
105 |       name: 'app',
106 |       async: 'vendor-async',
107 |       children: true,
108 |       minChunks: 3
109 |     }),
110 | 
111 |     // copy custom static assets
112 |     new CopyWebpackPlugin([
113 |       {
114 |         from: path.resolve(__dirname, '../static'),
115 |         to: config.build.assetsSubDirectory,
116 |         ignore: ['.*']
117 |       }
118 |     ])
119 |   ]
120 | })
121 | 
122 | if (config.build.productionGzip) {
123 |   const CompressionWebpackPlugin = require('compression-webpack-plugin')
124 | 
125 |   webpackConfig.plugins.push(
126 |     new CompressionWebpackPlugin({
127 |       asset: '[path].gz[query]',
128 |       algorithm: 'gzip',
129 |       test: new RegExp(
130 |         '\\.(' +
131 |         config.build.productionGzipExtensions.join('|') +
132 |         ')$'
133 |       ),
134 |       threshold: 10240,
135 |       minRatio: 0.8
136 |     })
137 |   )
138 | }
139 | 
140 | if (config.build.bundleAnalyzerReport) {
141 |   const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
142 |   webpackConfig.plugins.push(new BundleAnalyzerPlugin())
143 | }
144 | 
145 | module.exports = webpackConfig
146 | 


--------------------------------------------------------------------------------
/config/dev.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | const merge = require('webpack-merge')
3 | const prodEnv = require('./prod.env')
4 | 
5 | module.exports = merge(prodEnv, {
6 |   NODE_ENV: '"development"'
7 | })
8 | 


--------------------------------------------------------------------------------
/config/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict'
 2 | // Template version: 1.3.1
 3 | // see http://vuejs-templates.github.io/webpack for documentation.
 4 | 
 5 | const path = require('path')
 6 | 
 7 | module.exports = {
 8 |   dev: {
 9 | 
10 |     // Paths
11 |     assetsSubDirectory: 'static',
12 |     assetsPublicPath: '/',
13 |     proxyTable: {},
14 | 
15 |     // Various Dev Server settings
16 |     host: 'localhost', // can be overwritten by process.env.HOST
17 |     port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 |     autoOpenBrowser: false,
19 |     errorOverlay: true,
20 |     notifyOnErrors: true,
21 |     poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
22 | 
23 | 
24 |     /**
25 |      * Source Maps
26 |      */
27 | 
28 |     // https://webpack.js.org/configuration/devtool/#development
29 |     devtool: 'cheap-module-eval-source-map',
30 | 
31 |     // If you have problems debugging vue-files in devtools,
32 |     // set this to false - it *may* help
33 |     // https://vue-loader.vuejs.org/en/options.html#cachebusting
34 |     cacheBusting: true,
35 | 
36 |     cssSourceMap: true
37 |   },
38 | 
39 |   build: {
40 |     // Template for index.html
41 |     index: path.resolve(__dirname, '../dist/index.html'),
42 | 
43 |     // Paths
44 |     assetsRoot: path.resolve(__dirname, '../dist'),
45 |     assetsSubDirectory: 'static',
46 |     assetsPublicPath: '',
47 | 
48 |     /**
49 |      * Source Maps
50 |      */
51 | 
52 |     productionSourceMap: true,
53 |     // https://webpack.js.org/configuration/devtool/#production
54 |     devtool: '#source-map',
55 | 
56 |     // Gzip off by default as many popular static hosts such as
57 |     // Surge or Netlify already gzip all static assets for you.
58 |     // Before setting to `true`, make sure to:
59 |     // npm install --save-dev compression-webpack-plugin
60 |     productionGzip: false,
61 |     productionGzipExtensions: ['js', 'css'],
62 | 
63 |     // Run the build command with an extra argument to
64 |     // View the bundle analyzer report after build finishes:
65 |     // `npm run build --report`
66 |     // Set to `true` or `false` to always turn it on or off
67 |     bundleAnalyzerReport: process.env.npm_config_report
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/config/prod.env.js:
--------------------------------------------------------------------------------
1 | 'use strict'
2 | module.exports = {
3 |   NODE_ENV: '"production"'
4 | }
5 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 6 |     <title>sagraph</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="app"></div>
10 |     <!-- built files will be auto injected -->
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sagraph",
 3 |   "version": "1.0.0",
 4 |   "description": "A Vue.js project",
 5 |   "author": "Hecheng Li <lihecheng93@gmail.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
 9 |     "start": "npm run dev",
10 |     "build": "node build/build.js"
11 |   },
12 |   "dependencies": {
13 |     "vue": "^2.5.2"
14 |   },
15 |   "devDependencies": {
16 |     "autoprefixer": "^7.1.2",
17 |     "babel-core": "^6.22.1",
18 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
19 |     "babel-loader": "^7.1.1",
20 |     "babel-plugin-syntax-jsx": "^6.18.0",
21 |     "babel-plugin-transform-runtime": "^6.22.0",
22 |     "babel-plugin-transform-vue-jsx": "^3.5.0",
23 |     "babel-preset-env": "^1.3.2",
24 |     "babel-preset-stage-2": "^6.22.0",
25 |     "chalk": "^2.0.1",
26 |     "copy-webpack-plugin": "^4.0.1",
27 |     "css-loader": "^0.28.0",
28 |     "extract-text-webpack-plugin": "^3.0.0",
29 |     "file-loader": "^1.1.4",
30 |     "friendly-errors-webpack-plugin": "^1.6.1",
31 |     "html-webpack-plugin": "^5.5.0",
32 |     "node-notifier": "^5.1.2",
33 |     "optimize-css-assets-webpack-plugin": "^3.2.0",
34 |     "ora": "^1.2.0",
35 |     "portfinder": "^1.0.13",
36 |     "postcss-import": "^11.0.0",
37 |     "postcss-loader": "^2.0.8",
38 |     "postcss-url": "^7.2.1",
39 |     "rimraf": "^2.6.0",
40 |     "semver": "^5.3.0",
41 |     "shelljs": "^0.7.6",
42 |     "uglifyjs-webpack-plugin": "^1.1.1",
43 |     "url-loader": "^0.5.8",
44 |     "vue-loader": "^13.3.0",
45 |     "vue-style-loader": "^3.0.1",
46 |     "vue-template-compiler": "^2.5.2",
47 |     "webpack": "^3.6.0",
48 |     "webpack-bundle-analyzer": "^2.9.0",
49 |     "webpack-dev-server": "^2.9.1",
50 |     "webpack-merge": "^4.1.0"
51 |   },
52 |   "engines": {
53 |     "node": ">= 6.0.0",
54 |     "npm": ">= 3.0.0"
55 |   },
56 |   "browserslist": [
57 |     "> 1%",
58 |     "last 2 versions",
59 |     "not ie <= 8"
60 |   ]
61 | }
62 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="app">
 3 | 		<div id="canvasPanel" class="panel">
 4 | 			<div class="holder"><my-canvas ref="MyCanvas"/></div>
 5 | 		</div>
 6 | 		<div id="algorithmPanel" class="panel">
 7 | 			<div class="holder" style="overflow: visible;"><algorithm ref="Algorithm"/></div>
 8 | 		</div>
 9 | 		<div id="dataPanel" class="panel">
10 | 			<div class="holder"><my-data ref="MyData"/></div>
11 | 		</div>
12 | 	</div>
13 | </template>
14 | 
15 | <script>
16 | import MyCanvas from '@/components/MyCanvas'
17 | import Algorithm from '@/components/Algorithm'
18 | import MyData from '@/components/Data'
19 | import eventBus from '@/js/EventBus'
20 | 
21 | export default {
22 | 	name: 'App',
23 | 	components: {
24 | 		MyCanvas,
25 | 		Algorithm,
26 | 		MyData
27 | 	},
28 | 	methods: {
29 | 		async sort() {
30 | 			let selected = this.$refs.Algorithm.getAlgorithm()
31 | 			let myCanvas = this.$refs.MyCanvas
32 | 			let beginTime = new Date().getTime()
33 | 			if (await selected(myCanvas.data, myCanvas.swap, myCanvas.peekAt, myCanvas.assignAt)) {
34 | 				let endTime = new Date().getTime()
35 | 				let diffTime = endTime - beginTime
36 | 				eventBus.$emit('sorted', { name: selected.name, time: diffTime })
37 | 				alert('done')
38 | 			}
39 | 		},
40 | 		async shuffle() {
41 | 			await this.$refs.MyCanvas.shuffleInst()
42 | 		}
43 | 	},
44 | 	created() {
45 | 		eventBus.$on('sort', id => {
46 | 			this.sort()
47 | 		})
48 | 		eventBus.$on('shuffle', id => {
49 | 			this.shuffle()
50 | 		})
51 | 	}
52 | }
53 | </script>
54 | 
55 | <style>
56 | html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
57 | #app {
58 | 	font-family: 'Avenir', Helvetica, Arial, sans-serif;
59 | 	-webkit-font-smoothing: antialiased;
60 | 	-moz-osx-font-smoothing: grayscale;
61 | 	text-align: center;
62 | 	color: #2c3e50;
63 | 	width: 100%;
64 | 	height: 100%;
65 | 	overflow: hidden;
66 | 	padding: 5px;
67 | 	box-sizing: border-box;
68 | 	background-color: rgb(235, 235, 235);
69 | }
70 | #canvasPanel {
71 | 	height: calc(100% - 200px);
72 | 	width: 100%;
73 | }
74 | #dataPanel {
75 | 	height: 200px;
76 | 	width: 30%;
77 | }
78 | #algorithmPanel {
79 | 	height: 200px;
80 | 	width: 70%;
81 | }
82 | .panel {
83 | 	float: left;
84 | 	box-sizing: border-box;
85 | 	padding: 5px;
86 | }
87 | .holder {
88 | 	width: 100%;
89 | 	height: 100%;
90 | 	border: 1px solid rgb(180, 180, 180);
91 | 	box-shadow: 1px 1px 3px 0 rgb(200, 200, 200);
92 | 	border-radius: 5px;
93 | 	overflow: hidden;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/src/components/Algorithm.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="algorithmPanel">
  3 | 		<div class="actionBar">
  4 | 			<div class="actionBar_btn" v-bind:class="{ selected: infoMode }" v-on:click="toggleInfo">Info</div>
  5 | 			<div class="actionBar_btn" v-on:click="initShuffle">Shuffle</div>
  6 | 			<div class="actionBar_btn" v-on:click="initSort">Sort</div>
  7 | 		</div>
  8 | 		<div class="algorithmBar">
  9 | 			<div class="algorithmBar_btn" v-for="(item, index) in data" v-bind:algname="item.algorithm"
 10 | 										v-bind:class="[{ selected: selected===item.algorithm }, { disabled: item.disabled }]"
 11 | 										v-on:mousemove="showDetail" v-on:mouseout="hideDetail" v-on:click="changeAlgorithm(item)">
 12 | 				<div class="algorithmBar_btn_title">{{item.name}}</div>
 13 | 				<div class="algorithmBar_btn_time" v-if="item.averageTime != ''">{{item.averageTime}}<span style="margin-left: 1px;"></span>ms</div>
 14 | 			</div>
 15 | 		</div>
 16 | 		<div class="algorithmInfo">
 17 | 			<b>{{info.name}}</b><br/>
 18 | 			Worst Case Performance: O({{info.worstCase}})<br/>
 19 | 			Best Case Performance: O({{info.bestCase}})<br/>
 20 | 			Average Performance: O({{info.average}})<br/>
 21 | 			Stable: {{info.stable}}
 22 | 		</div>
 23 | 	</div>
 24 | </template>
 25 | 
 26 | <script>
 27 | import algorithms from '@/js/Algorithm.js'
 28 | import algorithmInfo from '@/js/AlgorithmInfo.js'
 29 | import eventBus from '@/js/EventBus'
 30 | export default {
 31 | 	data () {
 32 |     return {
 33 | 			selected: '',
 34 | 			info: {},
 35 | 			sorting: false,
 36 | 			infoMode: false,
 37 | 			data: [{
 38 | 						name: 'SelectionSort',
 39 | 						algorithm: 'selectionSort',
 40 | 						averageTime: '',
 41 | 						disabled: false
 42 | 					},{
 43 | 						name: 'InsertionSort',
 44 | 						algorithm: 'insertionSort',
 45 | 						averageTime: '',
 46 | 						disabled: false
 47 | 					},{
 48 | 						name: 'BubbleSort',
 49 | 						algorithm: 'bubbleSort',
 50 | 						averageTime: '',
 51 | 						disabled: false
 52 | 					},{
 53 | 						name: 'CocktailShakerSort',
 54 | 						algorithm: 'cocktailShakerSort',
 55 | 						averageTime: '',
 56 | 						disabled: false
 57 | 					},{
 58 | 						name: 'QuickSort',
 59 | 						algorithm: 'quickSort',
 60 | 						averageTime: '',
 61 | 						disabled: false
 62 | 					},{
 63 | 						name: 'MergeSort(IP)',
 64 | 						algorithm: 'mergeSortIP',
 65 | 						averageTime: '',
 66 | 						disabled: false
 67 | 					},{
 68 | 						name: 'HeapSort',
 69 | 						algorithm: 'heapSort',
 70 | 						averageTime: '',
 71 | 						disabled: false
 72 | 					},{
 73 | 						name: 'ShellSort',
 74 | 						algorithm: 'shellSort',
 75 | 						averageTime: '',
 76 | 						disabled: false
 77 | 					},{
 78 | 						name: 'IntroSort',
 79 | 						algorithm: 'introSort',
 80 | 						averageTime: '',
 81 | 						disabled: true
 82 | 					},{
 83 | 						name: 'Odd-EvenSort',
 84 | 						algorithm: 'oddEvenSort',
 85 | 						averageTime: '',
 86 | 						disabled: true
 87 | 					},{
 88 | 						name: 'CycleSort',
 89 | 						algorithm: 'cycleSort',
 90 | 						averageTime: '',
 91 | 						disabled: true
 92 | 					},{
 93 | 						name: 'Merge-InsertionSort',
 94 | 						algorithm: 'mergeInsertionSort',
 95 | 						averageTime: '',
 96 | 						disabled: true
 97 | 					},{
 98 | 						name: 'SmoothSort',
 99 | 						algorithm: 'smoothSort',
100 | 						averageTime: '',
101 | 						disabled: true
102 | 					},{
103 | 						name: 'TimSort',
104 | 						algorithm: 'timSort',
105 | 						averageTime: '',
106 | 						disabled: true
107 | 					}]
108 | 		}
109 | 	},
110 | 	methods: {
111 | 		getAlgorithm() {
112 | 			return algorithms[this.selected]
113 | 		},
114 | 		changeAlgorithm(algorithm) {
115 | 			if (!algorithm.disabled) this.selected = algorithm.algorithm
116 | 		},
117 | 		initSort() {
118 | 			if (this.sorting) {
119 | 				alert('Already sorting')
120 | 				return
121 | 			}
122 | 			if (this.selected !== '') {
123 | 				this.sorting = true
124 | 				eventBus.$emit('sort', 0)
125 | 			}
126 | 			else alert('Please select an algorithm before sorting')
127 | 		},
128 | 		initShuffle() {
129 | 			eventBus.$emit('shuffle', 0)
130 | 		},
131 | 		toggleInfo() {
132 | 			this.infoMode = !this.infoMode
133 | 		},
134 | 		showDetail(event) {
135 | 			//if (!this.infoMode) return
136 | 			let element = event.currentTarget
137 | 			let algorithm = event.currentTarget.getAttribute('algname')
138 | 			let algorithmInfoPanel = document.querySelector('.algorithmInfo')
139 | 			algorithmInfoPanel.style.display = 'block'
140 | 			this.info = algorithmInfo[algorithm]
141 | 			algorithmInfoPanel.style.top = element.offsetTop - algorithmInfoPanel.clientHeight - 1 + 'px'
142 | 			algorithmInfoPanel.style.left = element.offsetLeft + 'px'
143 | 		},
144 | 		hideDetail(event) {
145 | 			let algorithmInfoPanel = document.querySelector('.algorithmInfo')
146 | 			algorithmInfoPanel.style.display = 'none'
147 | 			this.info = {}
148 | 		}
149 | 	},
150 | 	created() {
151 | 		eventBus.$on('sorted', time => {
152 | 			for (let algorithm in this.data) {
153 | 				if (this.data[algorithm].algorithm === time.name) this.data[algorithm].averageTime = time.time
154 | 			}
155 | 			this.sorting = false
156 | 		})
157 | 	}
158 | }
159 | </script>
160 | 
161 | <style scoped>
162 | 	#algorithmPanel {
163 | 		background-color: white;
164 | 		width: 100%;
165 | 		height: 100%;
166 | 		padding-top: 40px;
167 | 		position: relative;
168 | 		-webkit-box-sizing: border-box;
169 | 		box-sizing: border-box;
170 | 		user-select: none;
171 | 		overflow: visible;
172 | 	}
173 | 	.actionBar {
174 | 		width: 100%;
175 | 		height: 40px;
176 | 		line-height: 40px;
177 | 		position: absolute;
178 | 		top: 0;
179 | 		-webkit-box-sizing: border-box;
180 | 		box-sizing: border-box;
181 | 		border-bottom: 1px solid lightgray;
182 | 		text-align: right;
183 | 		padding: 6px;
184 | 	}
185 | 	.actionBar_btn {
186 | 		width: auto;
187 | 		height: 100%;
188 | 		display: inline-block;
189 | 		vertical-align: top;
190 | 		text-align: center;
191 | 		line-height: 28px;
192 | 		padding: 0 5px;
193 | 		border: 1px solid lightgray;
194 | 		box-shadow: 0 0 0 0 gold;
195 | 		color: gray;
196 | 		-webkit-box-sizing: border-box;
197 | 		box-sizing: border-box;
198 | 		cursor: pointer;
199 | 		transition-property: border-color, box-shadow, color;
200 | 		transition-duration: 0.4s, 0.4s, 0.4s;
201 | 		transition-timing-function: ease, ease, ease;
202 | 	}
203 | 	.actionBar_btn:hover {
204 | 		color: #FF9D00;
205 | 		border-color: gold;
206 | 		box-shadow: 0 0 2px 0 gold;
207 | 	}
208 | 	.algorithmBar {
209 | 		width: 100%;
210 | 		height: 100%;
211 | 		padding: 10px;
212 | 		padding-bottom: 0;
213 | 		-webkit-box-sizing: border-box;
214 | 		box-sizing: border-box;
215 | 		text-align: left;
216 | 	}
217 | 	.algorithmBar_btn {
218 | 		display: inline-block;
219 | 		height: 60px;
220 | 		cursor: pointer;
221 | 		-webkit-box-sizing: border-box;
222 | 		box-sizing: border-box;
223 | 		border: 1px solid lightgray;
224 | 		margin: 0 5px 10px 5px;
225 | 		padding: 5px;
226 | 		box-shadow: 0 0 0 0 gold;
227 | 		color: gray;
228 | 		transition-property: border-color, box-shadow, color;
229 | 		transition-duration: 0.4s, 0.4s, 0.4s;
230 | 		transition-timing-function: ease, ease, ease;
231 | 	}
232 | 	.algorithmBar_btn div {
233 | 		display: inline-block;
234 | 		height: 50px;
235 | 		line-height: 50px;
236 | 	}
237 | 	.algorithmBar_btn:not(.disabled):not(.selected):hover {
238 | 		border-color: #FFDE00;
239 | 		color: #FF9D00;
240 | 	}
241 | 	.algorithmBar_btn_title {
242 | 		margin-right: 5px;
243 | 	}
244 | 	.algorithmBar_btn_time {
245 | 		color: #00FF00;
246 | 		font-size: 14px;
247 | 	}
248 | 	.algorithmInfo {
249 | 		position: absolute;
250 | 		border: 1px solid gold;
251 | 		background-color: white;
252 | 		-webkit-box-sizing: border-box;
253 | 		box-sizing: border-box;
254 | 		z-index: 1000;
255 | 		white-space: nowrap;
256 | 		padding: 5px;
257 | 	}
258 | 	.selected {
259 | 		color: #FF7E00;
260 | 		border-color: gold;
261 | 		box-shadow: 0 0 2px 0 gold;
262 | 	}
263 | 	.disabled {
264 | 		background-color: rgb(233, 233, 233);
265 | 		cursor: default;
266 | 	}
267 | </style>
268 | 


--------------------------------------------------------------------------------
/src/components/Data.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | 	<div id="dataPanel">
 3 | 		<div class="dataPanel_row">Data Size <input type="text" v-model="dataSize" /></div>
 4 | 		<div class="dataPanel_row">Repeatition?</div>
 5 | 		<div style="margin-left: 15px;">
 6 | 			<div><input type="radio" name="Repeatition" checked value="0" v-model="repeatition" />No</div>
 7 | 			<div><input type="radio" name="Repeatition" value="1" v-model="repeatition" />Some</div>
 8 | 			<div><input type="radio" name="Repeatition" value="2" v-model="repeatition" />A Lot</div>
 9 | 		</div>
10 | 		<div class="dataPanel_row btn" v-on:click="generateData">Generate Data</div>
11 | 	</div>
12 | </template>
13 | 
14 | <script>
15 | import eventBus from '@/js/EventBus'
16 | export default {
17 | 	data () {
18 |     return {
19 | 			dataSize: 100,
20 | 			repeatition: '0'
21 | 		}
22 | 	},
23 | 	methods: {
24 | 		generateData() {
25 | 			if (this.dataSize > 1000) {
26 | 				if (confirm('Too much data can cause massive lag\nare you sure you want to continue?')) {
27 | 
28 | 				} else {
29 | 					return
30 | 				}
31 | 			}
32 | 			let data = []
33 | 			switch(this.repeatition) {
34 | 				case '0':
35 | 					for (let i = 1; i <= this.dataSize; i++) {
36 | 						data.push(i)
37 | 					}
38 | 					break;
39 | 				case '1':
40 | 					for (let i = 1; i <= this.dataSize; i++) {
41 | 						data.push((Math.random() * this.dataSize + 1)|0)
42 | 					}
43 | 					break;
44 | 				case '2':
45 | 					for (let i = 1; i <= this.dataSize; i++) {
46 | 						data.push((Math.random() * this.dataSize/10 + 1)|0)
47 | 					}
48 | 					break;
49 | 			}
50 | 			eventBus.$emit('generateData', data)
51 | 		}
52 | 	}
53 | }
54 | </script>
55 | 
56 | <style scoped>
57 | 	#dataPanel {
58 | 		width: 100%;
59 | 		height: 100%;
60 | 		background-color: #fff;
61 | 		padding: 6px 40px 36px 40px;
62 | 		user-select: none;
63 | 		text-align: left;
64 | 		-webkit-box-sizing: border-box;
65 | 		box-sizing: border-box;
66 | 		position: relative;
67 | 	}
68 | 	.dataPanel_row {
69 | 		height: 30px;
70 | 		line-height: 30px;
71 | 	}
72 | 	.btn {
73 | 		width: 120px;
74 | 		height: 30px;
75 | 		line-height: 30px;
76 | 		cursor: pointer;
77 | 		text-align: center;
78 | 		position: absolute;
79 | 		left: 0;
80 | 		bottom: 3px;
81 | 		left: 50%;
82 |     transform: translateX(-50%);
83 | 		border: 1px solid lightgray;
84 | 		-webkit-box-sizing: border-box;
85 | 		box-sizing: border-box;
86 | 		transition-property: border-color, color, bottom;
87 | 		transition-duration: 0.4s, 0.4s, 0.2s;
88 | 		transition-timing-function: ease, ease, ease;
89 | 	}
90 | 	.btn:hover {
91 | 		color: #0094FF;
92 | 		border-color: #00BDFF;
93 | 	}
94 | 	.btn:active {
95 | 		bottom: 2px;
96 | 	}
97 | </style>
98 | 


--------------------------------------------------------------------------------
/src/components/MyCanvas.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<svg id="my-svg" v-bind:width="panelWidth" v-bind:height="panelHeight">
  3 | 		<g v-for="(item, index) in data" class="bar" shape-rendering="crispEdges"
  4 | 			v-bind:class="[{ hidden: index === m || index === n }, { peek: peeking === index }, { assign: assigning === index }]">
  5 | 			<rect v-bind="{ 'x':index*barWidth, 'y':panelHeight-item*heightRatio }" v-bind:width="barWidth" v-bind:height="item*heightRatio"/>
  6 |     	</g>
  7 | 		<g v-if="m >= 0" class="bar selected" shape-rendering="crispEdges">
  8 | 			<rect v-bind="{ 'x':(m+diff)*barWidth, 'y':panelHeight-data[m]*heightRatio }" v-bind:width="barWidth" v-bind:height="data[m]*heightRatio"/>
  9 |     	</g>
 10 | 		<g v-if="n >= 0" class="bar selected" shape-rendering="crispEdges">
 11 | 			<rect v-bind="{ 'x':(n-diff)*barWidth, 'y':panelHeight-data[n]*heightRatio }" v-bind:width="barWidth" v-bind:height="data[n]*heightRatio"/>
 12 |     	</g>
 13 | 	</svg>
 14 | </template>
 15 | 
 16 | <script>
 17 | import eventBus from '@/js/EventBus'
 18 | export default {
 19 | 	data () {
 20 | 	    return {
 21 | 			data: [],
 22 | 			panelWidth: 1,
 23 | 			panelHeight: 1,
 24 | 			maxHeight: 1,
 25 | 			m: -1,
 26 | 			n: -1,
 27 | 			peeking: -1,
 28 | 			assigning: -1,
 29 | 			diff: 0,
 30 | 			step: 1,
 31 | 			sorting: false,
 32 | 			speed: 1000
 33 | 		}
 34 | 	},
 35 | 	methods: {
 36 | 		onResize(event) {
 37 | 			let mySvg = document.querySelector('#my-svg')
 38 | 			this.panelWidth = mySvg.parentNode.clientWidth
 39 | 			this.panelHeight = mySvg.parentNode.clientHeight
 40 | 			this.maxHeight = Math.max(...this.data)
 41 | 		},
 42 | 		async shuffle() {
 43 | 			if (this.sorting) {
 44 | 				alert('Can\'t shuffle while sorting')
 45 | 				return
 46 | 			}
 47 | 			this.sorting = true
 48 | 			let array = this.data
 49 | 			let currentIndex = array.length-1, randomIndex
 50 | 			while (currentIndex > -1) {
 51 | 				randomIndex = (Math.random() * array.length)|0
 52 | 				await this.swap(randomIndex, currentIndex)
 53 | 				currentIndex -= 1
 54 | 			}
 55 | 			let _this = this
 56 | 			return new Promise((resolve) => {
 57 | 				_this.sorting = false
 58 | 				resolve(0)
 59 | 			})
 60 | 			this.data = array
 61 | 			this.m = -2 // change something in data to trigger vue to reload graph
 62 | 			this.m = -1
 63 | 			promise.then(() => { return })
 64 | 		},
 65 | 		shuffleInst() {
 66 | 			if (this.sorting) {
 67 | 				alert('Can\'t shuffle while sorting')
 68 | 				return
 69 | 			}
 70 | 			let array = this.data
 71 | 			let currentIndex = array.length-1, randomIndex
 72 | 			let promise = new Promise((resolve) => {
 73 | 				while (currentIndex > -1) {
 74 | 					randomIndex = (Math.random() * array.length)|0;
 75 | 					[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]
 76 | 					currentIndex -= 1
 77 | 				}
 78 | 				resolve(0)
 79 | 			})
 80 | 			this.data = array
 81 | 			this.m = -2 // change something in data to trigger vue to reload graph
 82 | 			this.m = -1
 83 | 			promise.then(() => { return })
 84 | 		},
 85 | 		swap(m, n) {
 86 | 			this.m = Math.min(m, n)
 87 | 			this.n = Math.max(m, n)
 88 | 			let _this = this
 89 | 			let done = Math.abs(_this.m - _this.n)
 90 | 			let step = done/_this.step
 91 | 			return new Promise((resolve) => {
 92 | 				if (_this.diff+step >= done) {
 93 | 					[_this.data[_this.m], _this.data[_this.n]] = [_this.data[_this.n], _this.data[_this.m]]
 94 | 					_this.m = -1
 95 | 					_this.n = -1
 96 | 					_this.diff = 0
 97 | 					setTimeout(() => {
 98 | 						resolve(0)
 99 | 					}, 1000/_this.speed)
100 | 				} else {
101 | 					let interval = setInterval(() => {
102 | 						if (_this.diff < done) _this.diff = Math.min(_this.diff+step, done)
103 | 						else {
104 | 							[_this.data[_this.m], _this.data[_this.n]] = [_this.data[_this.n], _this.data[_this.m]]
105 | 							_this.m = -1
106 | 							_this.n = -1
107 | 							_this.diff = 0
108 | 							clearInterval(interval)
109 | 							resolve(0)
110 | 						}
111 | 					}, 1000/_this.speed)
112 | 				}
113 | 			})
114 | 		},
115 | 		peekAt(n) {
116 | 			this.peeking = n
117 | 			let _this = this
118 | 			return new Promise(resolve => {
119 | 				setTimeout(() => {
120 | 					resolve(_this.data[_this.peeking])
121 | 				}, 1000/(_this.speed*2))
122 | 			})
123 | 		},
124 | 		assignAt(i, n) {
125 | 			this.data[i] = n
126 | 			this.assigning = i
127 | 			let _this = this
128 | 			return new Promise(resolve => {
129 | 				setTimeout(() => {
130 | 					resolve(0)
131 | 				}, 1000/(_this.speed*2))
132 | 			})
133 | 		}
134 | 	},
135 | 	computed: {
136 | 		barWidth() {
137 | 			return this.panelWidth/this.data.length
138 | 		},
139 | 		heightRatio() {
140 | 			return this.panelHeight/this.maxHeight
141 | 		}
142 | 	},
143 | 	mounted() {
144 | 		for (let i = 1; i <= 100; i++) {
145 | 			this.data.push(i)
146 | 		}
147 | 		window.addEventListener('resize', this.onResize)
148 | 		this.onResize() // call onResize to make the bars right size
149 | 	},
150 | 	created() {
151 | 		eventBus.$on('sort', id => {
152 | 			this.sorting = true
153 | 		})
154 | 		eventBus.$on('sorted', id => {
155 | 			this.sorting = false
156 | 			this.peeking = -1
157 | 			this.assigning = -1
158 | 		})
159 | 		eventBus.$on('generateData', data => {
160 | 			if (this.sorting) {
161 | 				alert('Can\'t change data while sorting')
162 | 				return
163 | 			}
164 | 			this.data = data
165 | 			this.onResize() // call onResize to make the bars right size
166 | 		})
167 | 	},
168 | 	beforeDestroy() {
169 | 		window.removeEventListener('resize', this.onResize)
170 | 	}
171 | }
172 | </script>
173 | 
174 | <style scoped>
175 | 	.bar { fill: gold }
176 | 	.selected { fill: lightskyblue }
177 | 	.hidden { fill: transparent }
178 | 	.peek { fill: tomato }
179 | 	.assign { fill: #39FF00 }
180 | 	#my-svg { background-color: white; }
181 | </style>
182 | 


--------------------------------------------------------------------------------
/src/js/Algorithm.js:
--------------------------------------------------------------------------------
 1 | import insertionSortHelper from './InsertionSort'
 2 | import selectionSortHelper from './SelectionSort'
 3 | import bubbleSortHelper from './BubbleSort'
 4 | import cocktailShakerSortHelper from './CocktailShakerSort'
 5 | import quickSortHelper from './QuickSort'
 6 | import mergeSortIPHelper from './MergeSortInPlace'
 7 | import heapSortHelper from './HeapSort'
 8 | import shellSortHelper from './ShellSort'
 9 | 
10 | const algorithms = {
11 | 	async insertionSort(arr, swapFn, peekAt, assignAt) {
12 | 		await insertionSortHelper(arr, swapFn, peekAt, assignAt)
13 | 		return true
14 | 	},
15 | 	async selectionSort(arr, swapFn, peekAt) {
16 | 		await selectionSortHelper(arr, swapFn, peekAt)
17 | 		return true
18 | 	},
19 | 	async bubbleSort(arr, swapFn, peekAt) {
20 | 		await bubbleSortHelper(arr, swapFn, peekAt)
21 | 		return true
22 | 	},
23 | 	async cocktailShakerSort(arr, swapFn, peekAt) {
24 | 		await cocktailShakerSortHelper(arr, swapFn, peekAt)
25 | 		return true
26 | 	},
27 | 	async quickSort(arr, swapFn, peekAt) {
28 | 		await quickSortHelper(arr, 0, arr.length-1, swapFn, peekAt)
29 | 		return true
30 | 	},
31 | 	async mergeSortIP(arr, swapFn, peekAt, assignAt) {
32 | 		await mergeSortIPHelper(arr, 0, arr.length-1, swapFn, peekAt, assignAt)
33 | 		return true
34 | 	},
35 | 	async heapSort(arr, swapFn, peekAt) {
36 | 		await heapSortHelper(arr, swapFn, peekAt)
37 | 		return true
38 | 	},
39 | 	async shellSort(arr, swapFn, peekAt, assignAt) {
40 | 		await shellSortHelper(arr, swapFn, peekAt, assignAt)
41 | 		return true
42 | 	}
43 | }
44 | 
45 | export default algorithms
46 | 


--------------------------------------------------------------------------------
/src/js/AlgorithmInfo.js:
--------------------------------------------------------------------------------
  1 | let algorithmInfo = {
  2 | 	selectionSort: {
  3 | 		name: 'Selectionsort',
  4 | 		worstCase: 'n^2',
  5 | 		bestCase: 'n^2',
  6 | 		average: 'n^2',
  7 | 		stable: 'No'
  8 | 	},
  9 | 	insertionSort: {
 10 | 		name: 'Insertionsort',
 11 | 		worstCase: 'n^2',
 12 | 		bestCase: 'n',
 13 | 		average: 'n^2',
 14 | 		stable: 'Yes'
 15 | 	},
 16 | 	bubbleSort: {
 17 | 		name: 'Bubblesort',
 18 | 		worstCase: 'n^2',
 19 | 		bestCase: 'n',
 20 | 		average: 'n^2',
 21 | 		stable: 'Yes'
 22 | 	},
 23 | 	cocktailShakerSort: {
 24 | 		name: 'CocktailShakerSort',
 25 | 		worstCase: 'n^2',
 26 | 		bestCase: 'n',
 27 | 		average: 'n^2',
 28 | 		stable: 'Yes'
 29 | 	},
 30 | 	quickSort: {
 31 | 		name: 'Quicksort',
 32 | 		worstCase: 'n^2',
 33 | 		bestCase: 'nlogn',
 34 | 		average: 'nlogn',
 35 | 		stable: 'No'
 36 | 	},
 37 | 	mergeSortIP: {
 38 | 		name: 'Mergesort(In-Place)',
 39 | 		worstCase: 'n^2',
 40 | 		bestCase: 'nlogn',
 41 | 		average: 'n^2',
 42 | 		stable: 'Yes'
 43 | 	},
 44 | 	heapSort: {
 45 | 		name: 'Heapsort',
 46 | 		worstCase: 'nlogn',
 47 | 		bestCase: 'nlogn',
 48 | 		average: 'nlogn',
 49 | 		stable: 'No'
 50 | 	},
 51 | 	shellSort: {
 52 | 		name: 'Shellsort',
 53 | 		worstCase: 'n^2',
 54 | 		bestCase: 'nlog^2n',
 55 | 		average: 'nlogn',
 56 | 		stable: 'No'
 57 | 	},
 58 | 	introSort: {
 59 | 		name: 'Introsort',
 60 | 		worstCase: '?',
 61 | 		bestCase: '?',
 62 | 		average: '?',
 63 | 		stable: '?'
 64 | 	},
 65 | 	oddEvenSort: {
 66 | 		name: 'Odd-Evensort',
 67 | 		worstCase: '?',
 68 | 		bestCase: '?',
 69 | 		average: '?',
 70 | 		stable: '?'
 71 | 	},
 72 | 	cycleSort: {
 73 | 		name: 'Cyclesort',
 74 | 		worstCase: '?',
 75 | 		bestCase: '?',
 76 | 		average: '?',
 77 | 		stable: '?'
 78 | 	},
 79 | 	mergeInsertionSort: {
 80 | 		name: 'Merge-Insertionsort',
 81 | 		worstCase: '?',
 82 | 		bestCase: '?',
 83 | 		average: '?',
 84 | 		stable: '?'
 85 | 	},
 86 | 	smoothSort: {
 87 | 		name: 'Smoothsort',
 88 | 		worstCase: '?',
 89 | 		bestCase: '?',
 90 | 		average: '?',
 91 | 		stable: '?'
 92 | 	},
 93 | 	timSort: {
 94 | 		name: 'Timsort',
 95 | 		worstCase: '?',
 96 | 		bestCase: '?',
 97 | 		average: '?',
 98 | 		stable: '?'
 99 | 	}
100 | }
101 | 
102 | export default algorithmInfo
103 | 


--------------------------------------------------------------------------------
/src/js/BubbleSort.js:
--------------------------------------------------------------------------------
 1 | async function bubbleSort(arr, swapFn, peekAt) {
 2 | 	let pivot = arr.length-1
 3 | 	let isSorted = false
 4 | 	while(!isSorted) {
 5 | 		isSorted = true
 6 | 		for (let i = 0; i < pivot; i++) {
 7 | 			if (await peekAt(i) > await peekAt(i+1)) {
 8 | 				await swapFn(i, i+1)
 9 | 				isSorted = false
10 | 			}
11 | 		}
12 | 		pivot--
13 | 	}
14 | }
15 | 
16 | export default bubbleSort
17 | 


--------------------------------------------------------------------------------
/src/js/CocktailShakerSort.js:
--------------------------------------------------------------------------------
 1 | async function cocktailShakerSort(arr, swapFn, peekAt) {
 2 | 	let left = -1, right = arr.length
 3 | 	while (++left < --right) { // pointers havent collide
 4 | 		for (let i = left; i < right; i++) { // move largest element to right
 5 | 			if (await peekAt(i) > await peekAt(i+1)) await swapFn(i, i+1)
 6 | 		}
 7 | 		for (let i = right; i > left; i--) { // move smallest element to left
 8 | 			if (await peekAt(i) < await peekAt(i-1)) await swapFn(i, i-1)
 9 | 		}
10 | 	}
11 | }
12 | 
13 | export default cocktailShakerSort
14 | 


--------------------------------------------------------------------------------
/src/js/EventBus.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | const EventBus = new Vue()
3 | export default EventBus
4 | 


--------------------------------------------------------------------------------
/src/js/HeapSort.js:
--------------------------------------------------------------------------------
 1 | function iParent(i) {
 2 | 	return Math.floor((i-1)/2)
 3 | }
 4 | function iLeftChild(i) {
 5 | 	return 2*i+1
 6 | }
 7 | function iRightChild(i) {
 8 | 	return 2*i+2
 9 | }
10 | async function heapify(arr, swapFn, peekAt) {
11 | 	let start = iParent(arr.length-1)
12 | 	while (start >= 0) {
13 | 		await siftDown(arr, start, arr.length-1, swapFn, peekAt)
14 | 		start--
15 | 	}
16 | }
17 | async function siftDown(arr, start, end, swapFn, peekAt) {
18 | 	let root = start
19 | 	while (iLeftChild(root) <= end) {
20 | 		let child = iLeftChild(root)
21 | 		let swap = root
22 | 		let val_swap = await peekAt(swap)
23 | 		let val_child = await peekAt(child)
24 | 		if (val_swap < val_child) {
25 | 			swap = child
26 | 			val_swap = val_child
27 | 		}
28 | 		if (child+1 <= end && val_swap < await peekAt(child+1)) {
29 | 			swap = child+1
30 | 		}
31 | 		if (swap === root) {
32 | 			return
33 | 		} else {
34 |       await swapFn(root, swap)
35 | 			root = swap
36 | 		}
37 | 	}
38 | }
39 | async function heapSort(arr, swapFn, peekAt) {
40 | 	await heapify(arr, swapFn, peekAt)
41 | 	let end = arr.length-1
42 | 	while (end > 0) {
43 |     await swapFn(end, 0)
44 | 		end--
45 | 		await siftDown(arr, 0, end, swapFn, peekAt)
46 | 	}
47 | }
48 | export default heapSort
49 | 


--------------------------------------------------------------------------------
/src/js/InsertionSort.js:
--------------------------------------------------------------------------------
 1 | async function insertionSort(arr, swapFn, peekAt, assignAt) {
 2 | 	for (let i = 1; i < arr.length; i++) {
 3 | 		let pivot = i
 4 | 		let temp = await peekAt(pivot)
 5 | 		let j = i-1
 6 | 		while (j >= 0) {
 7 | 			let n = await peekAt(j)
 8 | 			if (n > temp) {
 9 | 				await assignAt(j--+1, n)
10 | 			} else {
11 | 				break
12 | 			}
13 | 		}
14 | 		await assignAt(j+1, temp)
15 | 	}
16 | }
17 | 
18 | export default insertionSort
19 | 


--------------------------------------------------------------------------------
/src/js/MergeSortInPlace.js:
--------------------------------------------------------------------------------
 1 | async function merge(arr, left, mid, right, swapFn, peekAt, assignAt) {
 2 | 	let left1 = left,
 3 | 			right1 = mid,
 4 | 			left2 = mid+1,
 5 | 			right2 = right
 6 | 	while (left1 <= right1 && left2 <= right2) {
 7 | 		let val_left1 = await peekAt(left1)
 8 | 		let val_left2 = await peekAt(left2)
 9 | 		if (val_left1 <= val_left2) left1++ // arr[left1] is in sorted position
10 | 		else { // swap arr[left1] with first element in right array
11 | 			let temp = left2
12 | 			let i = temp-1
13 | 			while (i >= left1) {
14 | 				let val_i = await peekAt(i)
15 | 				if (val_i > val_left2) {
16 | 					await assignAt(i--+1, val_i)
17 | 				} else {
18 | 					break
19 | 				}
20 | 			}
21 | 			await assignAt(i+1, val_left2)
22 | 
23 | 			left1++ // shift left array 1 step right
24 | 			right1++
25 | 			left2++
26 | 		}
27 | 	}
28 | }
29 | 
30 | async function mergeSortIP(arr, left, right, swapFn, peekAt, assignAt) {
31 | 	if (left >= right) return
32 | 	let mid = (left + (right - left)/2)|0 //avoid overflow
33 | 	await mergeSortIP(arr, left, mid, swapFn, peekAt, assignAt)
34 | 	await mergeSortIP(arr, mid+1, right, swapFn, peekAt, assignAt)
35 | 	await merge(arr, left, mid, right, swapFn, peekAt, assignAt)
36 | }
37 | 
38 | export default mergeSortIP
39 | 


--------------------------------------------------------------------------------
/src/js/QuickSort.js:
--------------------------------------------------------------------------------
 1 | // Checks if subarray is sorted
 2 | // This is to escape the case when alot of repeating data
 3 | // such that the algorithm gets too slow
 4 | async function isSort(arr, left, right, peekAt) {
 5 | 	while (left < right) {
 6 | 		if (await peekAt(left) > await peekAt(++left)) return false
 7 | 	}
 8 | 	return true
 9 | }
10 | 
11 | async function partition(arr, pivot, left, right, swapFn, peekAt) {
12 | 	if (await isSort(arr, left, right, peekAt)) return -1
13 | 	let pivotVal = await peekAt(pivot)
14 | 	while (left < right) {
15 | 		// find value on left side greater or equal to pivot
16 | 		while (await peekAt(left) < pivotVal && left < right) {
17 | 			left++
18 | 		}
19 | 		// find value on right side less or equal to pivot
20 | 		while (await peekAt(right) > pivotVal && right > left) {
21 | 			right--
22 | 		}
23 | 		if (left < right) { // left and right hasnt collide
24 | 			await swapFn(left, right)
25 | 			// break infinite loop when swapping elements of same value
26 | 			if (await peekAt(left) === await peekAt(right)) right--
27 | 		}
28 | 	}
29 | 	return left
30 | }
31 | 
32 | async function quickSort(arr, left, right, swapFn, peekAt) {
33 | 	if (left >= right) return
34 | 	let len = arr.length,
35 | 			pivot = (left/2 + right/2)|0 //avoid overflow
36 | 	let partitionIndex = await partition(arr, pivot, left, right, swapFn, peekAt)
37 | 	if (partitionIndex > -1) {
38 | 		await quickSort(arr, left, partitionIndex, swapFn, peekAt)
39 | 		await quickSort(arr, partitionIndex + 1, right, swapFn, peekAt)
40 | 	}
41 | }
42 | 
43 | export default quickSort
44 | 


--------------------------------------------------------------------------------
/src/js/SelectionSort.js:
--------------------------------------------------------------------------------
 1 | async function selectionSort(arr, swapFn, peekAt) {
 2 | 	for (let i = 0; i < arr.length-1; i++) {
 3 | 		let min = i
 4 | 		for (let j = i; j < arr.length; j++) {
 5 | 			if (await peekAt(min) > await peekAt(j)) {
 6 | 				min = j
 7 | 			}
 8 | 		}
 9 | 		await swapFn(i, min)
10 | 	}
11 | }
12 | 
13 | export default selectionSort
14 | 


--------------------------------------------------------------------------------
/src/js/ShellSort.js:
--------------------------------------------------------------------------------
 1 | async function shellSort(arr, swapFn, peekAt, assignAt) {
 2 |   for (let gap = arr.length; gap > 0; gap = (gap/2)|0) {
 3 |     for (let i = gap; i < arr.length; i++) {
 4 |       let val_i = await peekAt(i)
 5 |       for (var j = i; j >= gap; j -= gap) {
 6 |         let val_gap = await peekAt(j-gap)
 7 |         if (val_i >= val_gap) break
 8 |         await assignAt(j, val_gap)
 9 |       }
10 |       await assignAt(j, val_i)
11 |     }
12 |   }
13 | }
14 | 
15 | export default shellSort
16 | 


--------------------------------------------------------------------------------
/src/js/scrappedAlgorithms.js:
--------------------------------------------------------------------------------
 1 | // quicksort
 2 | async function partition(arr, pivot, left, right, swapFn) {
 3 | 	let pivotValue = arr[pivot],
 4 | 		partitionIndex = left;
 5 | 
 6 | 	for (let i = left; i < right; i++) {
 7 | 		if (arr[i] < pivotValue) {
 8 | 			await swapFn(i, partitionIndex)
 9 | 			partitionIndex++
10 | 		}
11 | 	}
12 | 	await swapFn(right, partitionIndex)
13 | 	return partitionIndex
14 | }
15 | 
16 | async function quickSortHelper(arr, swapFn, left, right) {
17 | 	let len = arr.length,
18 | 		pivot,
19 | 		partitionIndex
20 | 	if (left < right) {
21 | 		pivot = right;
22 | 		partitionIndex = await partition(arr, pivot, left, right, swapFn)
23 | 		await quickSortHelper(arr, swapFn, left, partitionIndex - 1)
24 | 		await quickSortHelper(arr, swapFn, partitionIndex + 1, right)
25 | 	}
26 | }
27 | 
28 | // mergesort
29 | async function merge(arr, left, mid, right, swapFn) {
30 | 	let left1 = left,
31 | 			right1 = mid,
32 | 			left2 = mid+1,
33 | 			right2 = right
34 | 	while (left1 <= right1 && left2 <= right2) {
35 | 		if (arr[left1] <= arr[left2]) left1++ // arr[left1] is in sorted position
36 | 		else { // swap arr[left1] with first element in right array
37 | 			let temp = left2
38 | 			await swap(temp, left1)
39 | 			while (arr[temp] > arr[temp+1]) { // move element to sorted position
40 | 				await swapFn(temp, ++temp)
41 | 			}
42 | 		}
43 | 	}
44 | }
45 | 
46 | 
47 | //shellsort
48 | async function partition(arr, gap, swapFn, peekAt) {
49 |   for (let i = 0; i < gap; i++) {
50 |     let left = i, right = i + gap
51 |     while (right < arr.length) {
52 |       let left_val = await peekAt(left)
53 |       let right_val = await peekAt(right)
54 |       if (left_val > right_val) await swapFn(left, right)
55 |       left = right
56 |       right = right + gap
57 |     }
58 |   }
59 | }
60 | 
61 | async function insertionSort(arr, swapFn, peekAt, assignAt) {
62 | 	for (let i = 1; i < arr.length; i++) {
63 | 		let pivot = i
64 | 		let temp = await peekAt(pivot)
65 | 		let j = i-1
66 | 		while (j >= 0) {
67 | 			let n = await peekAt(j)
68 | 			if (n > temp) {
69 | 				await assignAt(j--+1, n)
70 | 			} else {
71 | 				break
72 | 			}
73 | 		}
74 | 		await assignAt(j+1, temp)
75 | 	}
76 | }
77 | 
78 | async function shellSort(arr, swapFn, peekAt, assignAt) {
79 |   let gap = (arr.length/2)|0
80 |   while (gap > 0) {
81 |     console.log(gap)
82 |     await partition(arr, gap, swapFn, peekAt)
83 |     gap = (gap/2)|0
84 |   }
85 |   await insertionSort(arr, swapFn, peekAt, assignAt)
86 | }
87 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | // The Vue build version to load with the `import` command
 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 3 | import Vue from 'vue'
 4 | import App from './App'
 5 | 
 6 | Vue.config.productionTip = false
 7 | 
 8 | /* eslint-disable no-new */
 9 | new Vue({
10 |   el: '#app',
11 |   components: { App },
12 |   template: '<App/>'
13 | })
14 | 


--------------------------------------------------------------------------------
/static/.gitkeep:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chrisli-03/SortingAnimation/47240a3ab247824d5a4889d50993fa49427c60a7/static/.gitkeep


--------------------------------------------------------------------------------