提交 9fb67819 编写于 作者: K Kevin Nadro

Merge branch 'parkjs814/master'

[submodule "wiki"]
path = wiki
url = https://github.com/parkjs814/AlgorithmVisualizer.wiki.git
##This project has seen a high number of contributions from:
1. [Arka Prava Basu](https://github.com/archie94)
2. [Kevin Nadro](https://github.com/nadr0)
3. [Steven Syrek](https://github.com/sjsyrek)
4. [Jarett Gross](https://github.com/jarettgross)
If you too [want to be on this list](https://github.com/parkjs814/AlgorithmVisualizer/wiki/Contributing), all you need is creative ideas and a dozen Red Bulls!
......@@ -13,6 +13,9 @@ http://parkjs814.github.io/AlgorithmVisualizer
We encourage you to check out [**Wiki**](https://github.com/parkjs814/AlgorithmVisualizer/wiki) before you get started.
If in need of any help, join our [Gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=share-link&utm_medium=link&utm_campaign=share-link) chatroom!
Special thanks to our [Top Contributors](CONTRIBUTORS.md)!
### Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/algorithmvisualizer#backer)]
......
......@@ -43,11 +43,27 @@ class DirectedGraphTracer extends Tracer {
return this;
}
_setNodePositions(positions) {
this.manager.pushStep(this.capsule, {
type: 'setNodePositions',
positions: positions
});
return this;
}
processStep(step, options) {
switch (step.type) {
case 'setTreeData':
this.setTreeData.apply(this, step.arguments);
break;
case 'setNodePositions':
$.each(this.graph.nodes(), (i, node) => {
if (i >= step.positions.length) return false;
const position = step.positions[i];
node.x = position.x;
node.y = position.y;
});
break;
case 'visit':
case 'leave':
var visit = step.type == 'visit';
......@@ -116,7 +132,6 @@ class DirectedGraphTracer extends Tracer {
setData(G, undirected) {
if (super.setData.apply(this, arguments)) return true;
this.graph.clear();
const nodes = [];
const edges = [];
......
Subproject commit 45b509c969758ee20fc3a75eb96f3f62498e7377
**Array1DTracer** inherits **[Array2DTracer](Array2DTracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **Array1DTracer**((String) name) | create Array1DTracer and set its name |
| **attach**((ChartTracer) chartTracer)| automatically visualize array data to the bar chart |
| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setData**((Number[]) data)| set one-dimensional array data to visualize |
| **_notify**((Number) idx, (Number) v) | notify that the value of element _idx_ has been changed to _v_ |
| **_denotify**((Number) idx) | stop notifying that the value of element _idx_ has been changed |
| **_select**((Number) s, (Number) e) | select a range between elements _s_ and _e_ |
| **_select**((Number) idx) | select element _idx_ |
| **_deselect**((Number) s, (Number) e) | deselect a range between elements _s_ and _e_ |
| **_deselect**((Number) idx) | deselect element _idx_ |
| **_separate**((Number) idx) | put a divider between elements _idx_ and (_idx+1_) |
| **_deseparate**((Number) idx) | remove a divider between elements _idx_ and (_idx+1_) |
| **_clear**() | erase traces on the array |
| **_wait**() | wait for a certain amount of time |
## Usage
[Show examples](https://github.com/search?utf8=✓&q=Array1DTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
**Array2DTracer** inherits **[Tracer](Tracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **Array2DTracer**((String) name)| create Array2DTracer and set its name |
| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setData**((Number[][]) data)| set two-dimensional array data to visualize |
| **_notify**((Number) x, (Number) y, (Number) v) | notify that the value of (x, y) has been changed to _v_ |
| **_denotify**((Number) x, (Number) y) | stop notifying that the value of (x, y) has been changed |
| **_select**((Number) sx, (Number) sy, (Number) ex, (Number) ey) | select a rectangle formed by (sx, sy) and (ex, ey) |
| **_select**((Number) x, (Number) y) | select (x, y) |
| **_selectRow**((Number) x, (Number) sy, (Number) ey) | equivalent to **_select**(x, sy, x, ey) |
| **_selectCol**((Number) y, (Number) sx, (Number) ex) | equivalent to **_select**(sx, y, ex, y) |
| **_deselect**((Number) sx, (Number) sy, (Number) ex, (Number) ey) | deselect a rectangle formed by (sx, sy) and (ex, ey) |
| **_deselect**((Number) x, (Number) y) | deselect (x, y) |
| **_deselectRow**((Number) x, (Number) sy, (Number) ey) | equivalent to **_deselect**(x, sy, x, ey) |
| **_deselectCol**((Number) y, (Number) sx, (Number) ex) | equivalent to **_deselect**(sx, y, ex, y) |
| **_separate**((Number) x, (Number) y) | put dividers between _x_-th and (_x+1_)-th rows and between _y_-th and (_y+1_)-th columns |
| **_separateRow**((Number) x) | put a divider between _x_-th and (_x+1_)-th rows |
| **_separateCol**((Number) y) | put a divider between _y_-th and (_y+1_)-th columns |
| **_deseparate**((Number) x, (Number) y) | remove dividers between _x_-th and (_x+1_)-th rows and between _y_-th and (_y+1_)-th columns |
| **_deseparateRow**((Number) x) | remove a divider between _x_-th and (_x+1_)-th rows |
| **_deseparateCol**((Number) y) | remove a divider between _y_-th and (_y+1_)-th columns |
| **_clear**() | erase traces on the array |
| **_wait**() | wait for a certain amount of time |
## Child Modules
* [Array1DTracer](Array1DTracer)
## Usage
[Show examples](https://github.com/search?utf8=✓&q=Array2DTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
**ChartTracer** inherits **[Tracer](Tracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **ChartTracer**((String) name)| create ChartTracer and set its name |
| **palette**((Object) {selected, notified, default})| set colors (e.g., `{selected: 'green', notified: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setData**((Number[]) data)| set one-dimensional array data to visualize |
| **_notify**((Number) idx, (Number) v) | notify that the value of element _idx_ has been changed to _v_ |
| **_denotify**((Number) idx) | stop notifying that the value of element _idx_ has been changed |
| **_select**((Number) s, (Number) e) | select a range between elements _s_ and _e_ |
| **_select**((Number) idx) | select element _idx_ |
| **_deselect**((Number) s, (Number) e) | deselect a range between elements _s_ and _e_ |
| **_deselect**((Number) idx) | deselect element _idx_ |
| **_clear**() | erase traces on the chart |
| **_wait**() | wait for a certain amount of time |
## Usage
[Show examples](https://github.com/search?utf8=✓&q=ChartTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
**NOTE**: Check out [**Project Details**](Project-Details) before running it locally!
To add changes and improvements or resolve issues, these are the usual steps:
1. Fork the project on Github then clone it to your machine:
```bash
git clone https://github.com/<your-username>/AlgorithmVisualizer # clone your forked repo
cd AlgorithmVisualizer # navigate inside the created directory
git submodule init # initialize wiki submodule
git submodule update # setup wiki submodule updates
```
2. Your fork's remote repository should be named `origin` by default, so add the main repository as a remote as well and give it a name to distinguish it from your fork (something like `main` would work):
```bash
git remote add main https://github.com/parkjs814/AlgorithmVisualizer
```
3. Create a branch addressing the issue/improvement you'd like to tackle.
```bash
git checkout -b my-problem-fixer-branch
```
4. Make your changes and push to `my-problem-fixer-branch` on your repo
```bash
# write some awesome code and then ...
git add .
git commit -m "Explain my awesome changes"
git push origin my-problem-fixer-branch
```
5. Next create a pull request from `my-problem-fixer-branch` branch on `origin` to `master` branch on `main`.
6. Once approved, just delete `my-problem-fixer-branch` both locally and remotely because it's not needed anymore.
7. Finally, checkout `master` locally, pull the approved changes from the `main` repo, and push them to your `origin` repo:
```bash
git checkout master # checkout master locally
git pull main master # pull new changes from main repository
git push main master # push the changes to your fork
```
That's it, everything should be in sync now.
If you run into problems, feel free to [ask us for help on gitter](https://gitter.im/parkjs814/AlgorithmVisualizer?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
As mentioned, check out [**Project Details**](Project-Details) for more information on how to run the project.
\ No newline at end of file
**DirectedGraphTracer** inherits **[Tracer](Tracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **DirectedGraphTracer**((String) name)| create DirectedGraphTracer and set its name |
| **attach**((LogTracer) logTracer)| automatically print log when visiting or leaving nodes |
| **palette**((Object) {visited, left, default})| set colors (e.g., `{visited: 'green', left: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setTreeData**((Number[][]) tree, (Number) root) | set tree data to visualize |
| **_setData**((Number[][]) graph) | set graph data to visualize |
| **_visit**((Number) target, (Number) source) | visit _target_ node from _source_ node |
| **_leave**((Number) target, (Number) source) | leave _target_ node to _source_ node |
| **_clear**() | erase traces on the graph |
| **_wait**() | wait for a certain amount of time |
## Child Modules
* [UndirectedGraphTracer](UndirectedGraphTracer)
* [WeightedDirectedGraphTracer](WeightedDirectedGraphTracer)
## Usage
[Show examples](https://github.com/search?utf8=✓&q=DirectedGraphTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
Check out:
- [**Contributing**](Contributing) for details on how to contribute to our project and
- [**Project Details**](Project-Details) for details on how to build/run the project
## Hierarchy of `algorithm` Directory
| Path | Description |
|------|-------------|
| [/algorithm/category.json](https://github.com/parkjs814/AlgorithmVisualizer/tree/gh-pages/algorithm/category.json) | This file contains the list of categories and their algorithms. |
| [/algorithm/[category]/[algorithm]/desc.json](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/desc.json) | This file contains the description of the algorithm and the list of its examples. |
| [/algorithm/[category]/[algorithm]/[example]/data.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/tree/data.js) | This file predefines data variables that will be shown in a visualizing module. |
| [/algorithm/[category]/[algorithm]/[example]/code.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/gh-pages/algorithm/graph_search/dfs/tree/code.js) | This file actually implements and visualizes the algorithm. |
## Visualizing Modules
* [Tracer](Tracer)
* [LogTracer](LogTracer)
* [Array2DTracer](Array2DTracer)
* [Array1DTracer](Array1DTracer)
* [DirectedGraphTracer](DirectedGraphTracer)
* [UndirectedGraphTracer](UndirectedGraphTracer)
* [WeightedDirectedGraphTracer](WeightedDirectedGraphTracer)
* [WeightedUndirectedGraphTracer](WeightedUndirectedGraphTracer)
* [ChartTracer](ChartTracer)
## Creating Random Data
| Function | Description |
|----------|-------------|
| **Integer.random**((Number) min, (Number) max) | Create a random integer inclusively between _min_ and _max_. |
| **Array2D.random**((Number) N, (Number) M, (Number) min, (Number) max) | Create random _N_ * _M_ array data that elements have a random value between _min_ and _max_. |
| **Array2D.randomSorted**((Number) N, (Number) M, (Number) min, (Number) max) | Basically same as `Array2D.random` but elements in each row are sorted in increasing order. |
| **Array1D.random**((Number) N, (Number) min, (Number) max) | Create random one-dimensional array data of size _N_ that elements have a random value between _min_ and _max_. |
| **Array1D.randomSorted**((Number) N, (Number) min, (Number) max) | Basically same as `Array1D.random` but elements are sorted in increasing order. |
| **DirectedGraph.random**((Number) N, (Number) ratio) | Create random graph data containing _N_ nodes and having directed edges between nodes at the probability of _ratio_ (between 0 and 1). |
| **UndirectedGraph.random**((Number) N, (Number) ratio) | Basically same as `DirectedGraph.random` but edges do not have direction. |
| **WeightedDirectedGraph.random**((Number) N, (Number) ratio, (Number) min, (Number) max) | Basically same as `DirectedGraph.random` but edges have a random weight between _min_ and _max_. |
| **WeightedUndirectedGraph.random**((Number) N, (Number) ratio) | Basically same as `WeightedDirectedGraph.random` but edges do not have direction. |
\ No newline at end of file
**LogTracer** inherits **[Tracer](Tracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **LogTracer**((String) name)| create LogTracer and set its name |
| **_print**(msg) | print `msg` |
| **_setData**(args) | _inherited, but not used_ |
| **_clear**() | erase all logs |
| **_wait**() | wait for a certain amount of time |
## Usage
[Show examples](https://github.com/search?utf8=✓&q=LogTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
## Build System
Our project uses [gulp](http://gulpjs.com/) to:
- combine all individual modules into a single file
- transpile ES6 code to ES5 with [babel.js](http://babeljs.io/)
- minimize JS and CSS code
- generate source maps
- add vendor prefixer to the css
- provide a server with live-reload
## Installation
```bash
# install gulp globally so you can run it from the command line
npm install -g gulp-cli
# install all dependencies
npm install
# run gulp to start the livereload server on http://localhost:8080
gulp
```
**NOTE**: For Node.js versions below 0.12, you need to install an ES6-style Promise Polyfill (in case you receive a "Promise is undefined" error). To run with Promise, use:
```bash
npm install es6-promise
```
Then add the following line at the top of your *gulpfile.babel.js*:
```javascript
var Promise = require ('es6-promise').Promise;
```
Check out [stackoverflow](http://stackoverflow.com/questions/32490328/gulp-autoprefixer-throwing-referenceerror-promise-is-not-defined) for more details on this issue.
To check your Node.js version, use:
```bash
node --version
```
## Code Structure
*Note:* Although no linter is added as of yet, the code closely follows the conventions from [Airbnb's ECMAScript 6 Javascript style guide](https://github.com/airbnb/javascript)
### [js/index.js](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js)
The app entry point is [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js).
It performs the initial application setup (loads the app when jQuery loads, loads the initial data from the server etc.)
### [js/app/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/app)
The main application object is [`js/app/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/index.js), which holds the necessary global application state flags and application level methods.
It is [extended once the app loads in `index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L39) with the contents of [`app/constructor`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/constructor.js) and [`app/cache`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/app/cache.js).
This means that from here on now, any file that does `require(/* path to js/app */)` is getting that populated object since calls to `require` are cached.
### [js/dom/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/dom)
The `js/dom` directory holds all the code interacting with the DOM (go figure 😜).
The code is split into:
- "static" methods that are used everywhere (such as adding algorithm info to the DOM) and,
- setup code which is called within the `app/constructor`, after the DOM is ready, to initialize all the elements with their contents and listeners.
### [js/editor/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/editor)
The `js/editor` directory holds the code to create and execute code in the ace editor.
### [js/module/\*/\*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/module)
The `js/module` directory holds all the tracers and the random-data-creators.
All the modules are exported together and then "required" inside the entry point [`js/index.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js) where they are [attached to the global `window` object](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/index.js#L42) so [`eval` can use them](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/editor/executor.js#L12) when executing code in the code editor.
### [js/server/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server)
The `js/server` directory holds all the code to load data from the server and utilizes promises from [RSVP.js](https://github.com/tildeio/rsvp.js/).
In [`js/server/ajax`](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server/ajax) are some helper methods to make requesting from the server a little easier.
The main method is [`js/server/ajax/request.js`](https://github.com/parkjs814/AlgorithmVisualizer/blob/master/js/server/ajax/request.js) that is used by all other methods to call `$.ajax` with certain options and set/reset the global `isLoading` flag for every request.
### [js/trace_manager/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/server/ajax)
The `js/tracer_manager` directory holds the manager of tracers, which controls all the present tracers simultaneously.
### [js/utils/*.js](https://github.com/parkjs814/AlgorithmVisualizer/tree/master/js/utils)
The `utils` directory holds a few helper methods that are used everywhere such as building the strings for algorithm and file directories.
**Tracer** is inherited by any other tracer modules.
## Methods
| Method | Description |
|--------|-------------|
| **Tracer**((String) name)| create Tracer and set its name |
| **_setData**(args) | set data to visualize |
| **_clear**() | clear the tracer |
| **_wait**() | wait for a certain amount of time |
## Child Modules
* [LogTracer](LogTracer)
* [DirectedGraphTracer](DirectedGraphTracer)
* [Array2DTracer](Array2DTracer)
* [ChartTracer](ChartTracer)
\ No newline at end of file
**UndirectedGraphTracer** inherits **[DirectedGraphTracer](DirectedGraphTracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **UndirectedGraphTracer**((String) name)| create UndirectedGraphTracer and set its name |
| **attach**((LogTracer) logTracer)| automatically print log when visiting or leaving nodes |
| **palette**((Object) {visited, left, default})| set colors (e.g., `{visited: 'green', left: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setTreeData**((Number[][]) tree, (Number) root) | set tree data to visualize |
| **_setData**((Number[][]) graph) | set graph data to visualize |
| **_visit**((Number) target, (Number) source) | visit _target_ node from _source_ node |
| **_leave**((Number) target, (Number) source) | leave _target_ node to _source_ node |
| **_clear**() | erase traces on the graph |
| **_wait**() | wait for a certain amount of time |
## Usage
[Show examples](https://github.com/search?utf8=✓&q=UndirectedGraphTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
**WeightedDirectedGraphTracer** inherits **[DirectedGraphTracer](DirectedGraphTracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **WeightedDirectedGraphTracer**((String) name)| create WeightedDirectedGraphTracer and set its name |
| **attach**((LogTracer) logTracer)| automatically print log when visiting or leaving nodes |
| **palette**((Object) {visited, left, selected, default})| set colors (e.g., `{visited: 'green', left: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setTreeData**((Number[][]) tree, (Number) root) | set tree data to visualize |
| **_setData**((Number[][]) graph) | set graph data to visualize |
| **_weight**((Number) target, (Number) weight) | set weight of _target_ node |
| **_visit**((Number) target, (Number) source, (Number) weight) | visit _target_ node from _source_ node and set weight of _target_ node |
| **_leave**((Number) target, (Number) source, (Number) weight) | leave _target_ node to _source_ node and set weight of _target_ node |
| **_clear**() | erase traces on the graph |
| **_wait**() | wait for a certain amount of time |
## Child Modules
* [WeightedUndirectedGraphTracer](WeightedUndirectedGraphTracer)
## Usage
[Show examples](https://github.com/search?utf8=✓&q=WeightedDirectedGraphTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
**WeightedUndirectedGraphTracer** inherits **[WeightedDirectedGraphTracer](WeightedDirectedGraphTracer)**.
## Methods
| Method | Description |
|--------|-------------|
| **WeightedUnirectedGraphTracer**((String) name)| create WeightedUnirectedGraphTracer and set its name |
| **attach**((LogTracer) logTracer)| automatically print log when visiting or leaving nodes |
| **palette**((Object) {visited, left, default})| set colors (e.g., `{visited: 'green', left: '#FFA500', default: 'rgb(255,255,255)'}`) |
| **_setTreeData**((Number[][]) tree, (Number) root) | set tree data to visualize |
| **_setData**((Number[][]) graph) | set graph data to visualize |
| **_weight**((Number) target, (Number) weight) | set weight of _target_ node |
| **_visit**((Number) target, (Number) source, (Number) weight) | visit _target_ node from _source_ node and set weight of _target_ node |
| **_leave**((Number) target, (Number) source, (Number) weight) | leave _target_ node to _source_ node and set weight of _target_ node |
| **_clear**() | erase traces on the graph |
| **_wait**() | wait for a certain amount of time |
## Usage
[Show examples](https://github.com/search?utf8=✓&q=WeightedUndirectedGraphTracer+repo%3Aparkjs814%2FAlgorithmVisualizer+path%3A%2Falgorithm&type=Code&ref=advsearch&l=&l=)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册